body {
	padding: 0;
	margin: 0;
	overscroll-behavior: contain;
}

.nav-item {
	cursor: pointer;
	user-select: none;
	transition: color .3s ease-in-out, background-color .3s ease-in-out;
}

.nav-link:hover {
    text-shadow: 1px 1px 1px gray;
}

.dropdown-item {
	cursor: pointer;
	user-select: none;
	transition: color .3s ease-in-out, background-color .3s ease-in-out;
}

.dropdown-item:hover {
	text-shadow: 1px 1px 1px gray;
}


#mostrar {
	width: 100%;
	height: 300px;
	padding-top: 20px;
}

#login {
	margin-top: 30px;
	max-width: 600px;
	width: 70%;
}


#contenido {
	overflow: auto;
	position: relative;
}

#search2 {
	padding: 15px;
}

.tarjeta {
	width: 100%;
	height: 140px;
	margin-left: 30px;
	margin-right: 0px;
	margin-top: 10px;
	background: linear-gradient(#0F80FF, #110066);
	color: white;
	transition: all ease-in 0.5s;
	border-radius: 15px;
	cursor: pointer;
	overflow: hidden;
	max-width: 300px;
	margin-bottom: 30px;
}

.tarjeta:hover {
	transform: translateY(0.1in);
	box-shadow: 3px 3px 3px gray;
	background: linear-gradient(yellow, green);
}

#elementos {
	width: 90%;
	position: relative;
	overflow: auto;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	min-height: 350px;
}

.logo {
	color: white;
	height: 130px;
	text-align: center;
	float: left;
	position: relative;
	overflow: hidden;
	padding: 15px;
	top: 18px;
	font-weight: 2.5em;
}


.titulo {
	color: white;
	font-size: 20px;
	text-align: center;
	position: relative;
	float: left;
	width: 35%;
	overflow: hidden;
	top:30px;
	margin-left: 5px;
}

.titulo2 {
	color: white;
	font-size: 2em;
	text-align: center;
	position: relative;
	float: left;
	width: 90%;
	overflow: hidden;
	top:15px;
	margin-left: 5px;
}

.contador {
	color: white;
	font-size: 3em;
	text-align: center;
	position: relative;
	float: left;
	width: 25%;
	overflow: hidden;
	top: 35px;
}

#logotipo {
	width: 15%;
}


.peque {
	font-size: 0.8em;
}


.formula {
	min-width: 200px !important;
}


/*
Estilos para la ventana de ventas

*/

/*Contenedor principal de ventas*/
#principal {
	position: relative;
	width: 100%;
	height:560px;
	overflow: auto;
}

#prodlist {
	height: 300px;
	border: 1px solid var(--sp-line);
	border-radius: 5px;
	padding: 5px;
	overflow: auto;
}

#mensajes {
	height: 70px;
	font-size: 24px;
	border: 1px solid var(--sp-line);
	border-radius: 5px;
	left: 10px;
	top: 10px;
}

#unidadesd {
	height: 50px;
	font-size: 18px;
	font-family: 'Lucida Sans';
	border-radius: 5px;
	left: 5px;
	top: 10px;
	text-align: center;
}

#unidades {
	color: var(--sp-ink);
	background-color: transparent;
	font-size: 1.65rem;
	text-align: center;
	user-select: none;
	font-weight:bold;
	width: 100%;
	border: none;
}

#totalv {
	color: var(--sp-ink);
	background-color: transparent;
	font-size: 1.65rem;
	text-align: center;
	user-select: none;
	font-weight:bold;
	width: 100%;
	border: none;
}

#logovta {
	max-width: 200px;
	width: 95%;
	height: 120px;
	margin-top: 25px;
}

#datosvta {
	width: 90%;
	height: 110px;
	margin-bottom: 15px;
	border: 1px solid var(--sp-line);
	border-radius: 5px;
}

#dusuario {
	margin-top: 15px;
	width: 95%;
	height: 35px;
	background: var(--sp-ink);
	position: relative;
	border-radius: 5px;
	color: var(--sp-on-ink);
	padding-top: 5px;
}

.rodsquare {
	border-radius: 15px;
	border: 1px solid var(--sp-line);
	max-width: 70%;
	flex: 30%;
	margin-right: 10px;
	height: 92px;
	margin-bottom: 10px;
}

.botonvta {
	height: 50px;
}

.ventat {
	font-size: 1.8em;
	font-weight: bold;
}

#escritos {
	font-size: 1.2em;
	font-weight: bold;
	width: 100%;
}

#listvta {
	border: 1px solid var(--sp-line);
	border-radius: 10px;
	padding: 15px;
	overflow: auto;

}

#listcorte {
	padding: 40px;
	max-width: 30%;
	background-color:lightskyblue;
	height: 600px;
	overflow: auto;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	border-radius: 10px;
	max-width: 350px;
}

#subtotal {
	font-size: 1.8em;
}

#traspasoslist {
	border-radius: 5px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	overflow: auto;
	padding: 20px;
}

#favoritos {
	width: 95%;
	height: 350px;
	overflow: auto;
}


.httitle {
    filter: drop-shadow(1px 1px 2px gray);
}



/* ==========================================================================
   Compatibilidad Bootstrap 5.3 (migrado desde 4.6)
   Conserva el aspecto original del sistema. Es seguro borrar cualquier bloque
   si prefieres los valores por defecto de Bootstrap 5.
   ========================================================================== */

/* Enlaces y etiquetas como en Bootstrap 4 (BS5 subraya los enlaces y quita el margen de <label>) */
a { text-decoration: none; }
a:not([class]):hover { text-decoration: underline; }
label:not(.form-check-label):not(.btn) { margin-bottom: .5rem; }

/* Paleta de Bootstrap 4 (BS5 cambió azul, verde, cian y gris oscuro) */
:root {
	--bs-primary: #007bff;  --bs-primary-rgb: 0, 123, 255;
	--bs-success: #28a745;  --bs-success-rgb: 40, 167, 69;
	--bs-info:    #17a2b8;  --bs-info-rgb: 23, 162, 184;
	--bs-dark:    #343a40;  --bs-dark-rgb: 52, 58, 64;
	--bs-link-color: #007bff;        --bs-link-color-rgb: 0, 123, 255;
	--bs-link-hover-color: #0056b3;  --bs-link-hover-color-rgb: 0, 86, 179;
}
.btn-primary {
	--bs-btn-bg: #007bff; --bs-btn-border-color: #007bff;
	--bs-btn-hover-bg: #0069d9; --bs-btn-hover-border-color: #0062cc;
	--bs-btn-active-bg: #0062cc; --bs-btn-active-border-color: #005cbf;
	--bs-btn-disabled-bg: #007bff; --bs-btn-disabled-border-color: #007bff;
}
.btn-success {
	--bs-btn-bg: #28a745; --bs-btn-border-color: #28a745;
	--bs-btn-hover-bg: #218838; --bs-btn-hover-border-color: #1e7e34;
	--bs-btn-active-bg: #1e7e34; --bs-btn-active-border-color: #1c7430;
	--bs-btn-disabled-bg: #28a745; --bs-btn-disabled-border-color: #28a745;
}
.btn-info {
	--bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff;
	--bs-btn-bg: #17a2b8; --bs-btn-border-color: #17a2b8;
	--bs-btn-hover-bg: #138496; --bs-btn-hover-border-color: #117a8b;
	--bs-btn-active-bg: #117a8b; --bs-btn-active-border-color: #10707f;
	--bs-btn-disabled-bg: #17a2b8; --bs-btn-disabled-border-color: #17a2b8;
}
.btn-dark {
	--bs-btn-bg: #343a40; --bs-btn-border-color: #343a40;
	--bs-btn-hover-bg: #23272b; --bs-btn-hover-border-color: #1d2124;
	--bs-btn-active-bg: #1d2124; --bs-btn-active-border-color: #171a1d;
	--bs-btn-disabled-bg: #343a40; --bs-btn-disabled-border-color: #343a40;
}
.btn-outline-primary {
	--bs-btn-color: #007bff; --bs-btn-border-color: #007bff;
	--bs-btn-hover-bg: #007bff; --bs-btn-hover-border-color: #007bff;
	--bs-btn-active-bg: #007bff; --bs-btn-active-border-color: #007bff;
	--bs-btn-disabled-color: #007bff; --bs-btn-disabled-border-color: #007bff;
}
.btn-outline-dark {
	--bs-btn-color: #343a40; --bs-btn-border-color: #343a40;
	--bs-btn-hover-bg: #343a40; --bs-btn-hover-border-color: #343a40;
	--bs-btn-active-bg: #343a40; --bs-btn-active-border-color: #343a40;
	--bs-btn-disabled-color: #343a40; --bs-btn-disabled-border-color: #343a40;
}

/* Animaciones propias: reemplazan a animate.css (~70 KB) conservando los mismos nombres de clase */
.animate__animated { animation-duration: 1s; animation-fill-mode: both; }
.animate__fadeIn     { animation-name: animate-fadeIn; }
.animate__fadeInLeft { animation-name: animate-fadeInLeft; }
.animate__rubberBand { animation-name: animate-rubberBand; }
.animate__bounceIn   { animation-name: animate-bounceIn; animation-duration: .75s; }
@keyframes animate-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes animate-fadeInLeft {
	from { opacity: 0; transform: translate3d(-100%, 0, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes animate-rubberBand {
	from { transform: scale3d(1, 1, 1); }
	30%  { transform: scale3d(1.25, .75, 1); }
	40%  { transform: scale3d(.75, 1.25, 1); }
	50%  { transform: scale3d(1.15, .85, 1); }
	65%  { transform: scale3d(.95, 1.05, 1); }
	75%  { transform: scale3d(1.05, .95, 1); }
	to   { transform: scale3d(1, 1, 1); }
}
@keyframes animate-bounceIn {
	from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(.215, .61, .355, 1); }
	0%   { opacity: 0; transform: scale3d(.3, .3, .3); }
	20%  { transform: scale3d(1.1, 1.1, 1.1); }
	40%  { transform: scale3d(.9, .9, .9); }
	60%  { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
	80%  { transform: scale3d(.97, .97, .97); }
	to   { opacity: 1; transform: scale3d(1, 1, 1); }
}
@media (prefers-reduced-motion: reduce) {
	.animate__animated { animation-duration: 1ms !important; }
}


/* ==========================================================================
   SoftPoint - capa visual estilo Apple
   Temas claro / oscuro + accesibilidad + cristal líquido (menú de opciones).

   Todo el sistema comparte estos tokens. Para ajustar el aspecto basta con
   cambiar las variables de los bloques de tema; ninguna vista necesita editarse.
   El tema lo decide <html data-bs-theme="light|dark"> (ver spTema en main.js);
   Bootstrap 5.3 adapta solo sus componentes y aquí se definen los colores propios.
   Va al final del archivo a proposito: reemplaza la paleta de compatibilidad.

   Contrastes verificados (WCAG 2.2): texto >= 4.5:1, bordes de campos y
   anillo de foco >= 3:1, en claro y en oscuro.
   ========================================================================== */

/* ---------- Tokens: tema claro (predeterminado) ---------- */
:root,
[data-bs-theme="light"] {
	color-scheme: light;

	--sp-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--sp-bg:    #ffffff;
	--sp-elev:  #ffffff;               /* modales, tarjeta de inicio de sesion */
	--sp-ink:   #1d1d1f;
	--sp-ink-2: #515154;               /* 7.9:1 sobre blanco */
	--sp-ink-3: #6e6e73;               /* 5.0:1 (antes #86868b = 3.5:1, no cumplia) */
	--sp-fill:  #f5f5f7;
	--sp-fill-2:#ebebf0;
	--sp-hair:  rgba(0, 0, 0, .08);
	--sp-line:  rgba(0, 0, 0, .14);

	--sp-field-bg:   #ffffff;
	--sp-field-line: #8e8e93;          /* 3.3:1: el borde de un campo debe verse */

	--sp-blue:         #0066cc;        /* texto y enlaces: 5.6:1 */
	--sp-blue-tint:    rgba(0, 113, 227, .10);
	--sp-accent:       #0071e3;        /* fondo de botones: texto blanco 4.7:1 */
	--sp-accent-hover: #0066cf;
	--sp-accent-press: #005bb8;
	--sp-on-accent:    #ffffff;
	--sp-green:   #1d7a35;
	--sp-red:     #c8001a;
	--sp-info:    #00689d;
	--sp-focus:   #0a58ca;
	--sp-on-ink:  #ffffff;

	--sp-neutral:       rgba(0, 0, 0, .06);
	--sp-neutral-hover: rgba(0, 0, 0, .10);
	--sp-neutral-press: rgba(0, 0, 0, .15);

	--sp-nav-bg:  rgba(255, 255, 255, .78);
	--sp-menu-bg: rgba(255, 255, 255, .94);
	--sp-stripe:  rgba(0, 0, 0, .025);
	--sp-row-hover: rgba(0, 113, 227, .06);

	--sp-seg-bg: rgba(0, 0, 0, .07);
	--sp-seg-on: #ffffff;
	--sp-main-bg: #1d1d1f;  --sp-main-ink: #ffffff;  --sp-main-note: rgba(255, 255, 255, .78);

	--sp-ok-bg:   rgba(36, 138, 61, .12);   --sp-ok-fg:   #1b6b2f;
	--sp-warn-bg: rgba(199, 119, 0, .14);   --sp-warn-fg: #7a4800;
	--sp-bad-bg:  rgba(215, 0, 21, .09);    --sp-bad-fg:  #a8000f;
	--sp-note-bg: rgba(0, 113, 227, .08);   --sp-note-fg: #00539f;

	--sp-r-s: 10px;
	--sp-r-m: 14px;
	--sp-r-l: 22px;
	--sp-shadow-pop: 0 12px 40px rgba(0, 0, 0, .14), 0 2px 8px rgba(0, 0, 0, .06);
	--sp-shadow-modal: 0 30px 90px rgba(0, 0, 0, .28);
	--sp-ring: 0 0 0 4px rgba(10, 88, 202, .32);

	/* Cristal liquido (menu de opciones del punto de venta) */
	--sp-glass-bg:        rgba(255, 255, 255, .20);
	--sp-glass-solid:     rgb(250, 250, 252);
	--sp-glass-filter:    blur(30px) saturate(190%) brightness(1.1);
	--sp-glass-edge:      rgba(255, 255, 255, .70);
	--sp-glass-edge-low:  rgba(0, 0, 0, .10);
	--sp-glass-spec:      rgba(255, 255, 255, .85);
	--sp-glass-sheen:     rgba(255, 255, 255, .50);
	--sp-glass-ink:       #1d1d1f;
	--sp-glass-ink-2:     #262628;
	--sp-glass-accent:    #00418a;
	--sp-glass-tile:      rgba(255, 255, 255, .50);
	--sp-glass-row-hover: rgba(255, 255, 255, .40);
	--sp-glass-row-press: rgba(255, 255, 255, .58);
	--sp-glass-scrim:     rgba(255, 255, 255, .18);   /* en claro el velo aclara, no oscurece */
	--sp-glass-scrim-filter: blur(8px);

	/* Bootstrap 5.3 toma estos valores */
	--bs-body-font-family: var(--sp-font);
	--bs-body-color: #1d1d1f;      --bs-body-color-rgb: 29, 29, 31;
	--bs-body-bg: #ffffff;         --bs-body-bg-rgb: 255, 255, 255;
	--bs-emphasis-color: #000;
	--bs-secondary-color: #515154;
	--bs-tertiary-bg: #f5f5f7;
	--bs-border-color: rgba(0, 0, 0, .14);
	--bs-border-radius: 10px;      --bs-border-radius-lg: 16px;
	--bs-primary: #0071e3;         --bs-primary-rgb: 0, 113, 227;
	--bs-success: #1d7a35;         --bs-success-rgb: 29, 122, 53;
	--bs-danger:  #c8001a;         --bs-danger-rgb: 200, 0, 26;
	--bs-info:    #00689d;         --bs-info-rgb: 0, 104, 157;
	--bs-dark:    #1d1d1f;         --bs-dark-rgb: 29, 29, 31;
	--bs-link-color: #0066cc;      --bs-link-color-rgb: 0, 102, 204;
	--bs-link-hover-color: #0055b3;--bs-link-hover-color-rgb: 0, 85, 179;
	--bs-modal-bg: #ffffff;
}

/* ---------- Tokens: tema oscuro ---------- */
[data-bs-theme="dark"] {
	color-scheme: dark;

	--sp-bg:    #1c1c1e;
	--sp-elev:  #2c2c2e;
	--sp-ink:   #f5f5f7;
	--sp-ink-2: #c7c7cc;               /* 8-10:1 */
	--sp-ink-3: #a1a1a6;               /* 5.4-6.6:1 */
	--sp-fill:  #2c2c2e;
	--sp-fill-2:#3a3a3c;
	--sp-hair:  rgba(255, 255, 255, .10);
	--sp-line:  rgba(255, 255, 255, .18);

	--sp-field-bg:   #262629;
	--sp-field-line: #8e8e93;          /* 4.6:1 sobre el campo */

	--sp-blue:         #64a8ff;
	--sp-blue-tint:    rgba(100, 168, 255, .16);
	--sp-accent:       #0a66d9;        /* texto blanco 5.4:1 */
	--sp-accent-hover: #1a74e6;
	--sp-accent-press: #0057c2;
	--sp-on-accent:    #ffffff;
	--sp-green:   #4cd964;
	--sp-red:     #ff7a7a;
	--sp-info:    #64d2ff;
	--sp-focus:   #8ec2ff;
	--sp-on-ink:  #1d1d1f;

	--sp-neutral:       rgba(255, 255, 255, .12);
	--sp-neutral-hover: rgba(255, 255, 255, .18);
	--sp-neutral-press: rgba(255, 255, 255, .24);

	--sp-nav-bg:  rgba(28, 28, 30, .72);
	--sp-menu-bg: rgba(44, 44, 46, .94);
	--sp-stripe:  rgba(255, 255, 255, .04);
	--sp-row-hover: rgba(100, 168, 255, .10);

	--sp-seg-bg: rgba(255, 255, 255, .10);
	--sp-seg-on: #636366;
	--sp-main-bg: #f5f5f7;  --sp-main-ink: #1d1d1f;  --sp-main-note: rgba(29, 29, 31, .78);

	--sp-ok-bg:   rgba(76, 217, 100, .16);  --sp-ok-fg:   #7ee893;
	--sp-warn-bg: rgba(255, 179, 64, .16);  --sp-warn-fg: #ffc978;
	--sp-bad-bg:  rgba(255, 107, 107, .18); --sp-bad-fg:  #ffb0b0;
	--sp-note-bg: rgba(100, 168, 255, .16); --sp-note-fg: #a9d0ff;

	--sp-shadow-pop: 0 12px 40px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35);
	--sp-shadow-modal: 0 30px 90px rgba(0, 0, 0, .6);
	--sp-ring: 0 0 0 4px rgba(142, 194, 255, .38);

	--sp-glass-bg:        rgba(28, 28, 32, .38);
	--sp-glass-solid:     rgb(44, 44, 46);
	--sp-glass-filter:    blur(30px) saturate(170%) brightness(.85);
	--sp-glass-edge:      rgba(255, 255, 255, .20);
	--sp-glass-edge-low:  rgba(0, 0, 0, .40);
	--sp-glass-spec:      rgba(255, 255, 255, .28);
	--sp-glass-sheen:     rgba(255, 255, 255, .16);
	--sp-glass-ink:       #f5f5f7;
	--sp-glass-ink-2:     #e5e5ea;
	--sp-glass-accent:    #8ec2ff;
	--sp-glass-tile:      rgba(255, 255, 255, .14);
	--sp-glass-row-hover: rgba(255, 255, 255, .12);
	--sp-glass-row-press: rgba(255, 255, 255, .20);
	--sp-glass-scrim:     rgba(0, 0, 0, .45);
	--sp-glass-scrim-filter: blur(8px);

	--bs-body-color: #f5f5f7;      --bs-body-color-rgb: 245, 245, 247;
	--bs-body-bg: #1c1c1e;         --bs-body-bg-rgb: 28, 28, 30;
	--bs-emphasis-color: #ffffff;
	--bs-secondary-color: #c7c7cc;
	--bs-tertiary-bg: #2c2c2e;
	--bs-border-color: rgba(255, 255, 255, .18);
	--bs-primary: #0a66d9;         --bs-primary-rgb: 10, 102, 217;
	--bs-success: #4cd964;         --bs-success-rgb: 76, 217, 100;
	--bs-danger:  #ff7a7a;         --bs-danger-rgb: 255, 122, 122;
	--bs-info:    #64d2ff;         --bs-info-rgb: 100, 210, 255;
	--bs-dark:    #f5f5f7;         --bs-dark-rgb: 245, 245, 247;
	--bs-link-color: #64a8ff;      --bs-link-color-rgb: 100, 168, 255;
	--bs-link-hover-color: #8ec2ff;--bs-link-hover-color-rgb: 142, 194, 255;
	--bs-modal-bg: #2c2c2e;
}

/* ---------- Menos transparencia: ajuste del sistema, de contraste, o del usuario ----------
   Quita desenfoque y vuelve opacas las superficies translucidas (mas legibles). */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
	html:root {
		--sp-nav-bg: var(--sp-bg);
		--sp-menu-bg: var(--sp-elev);
		--sp-glass-bg: var(--sp-glass-solid);
		--sp-glass-filter: none;
		--sp-glass-row-hover: var(--sp-neutral-hover);
		--sp-glass-row-press: var(--sp-neutral-press);
		--sp-glass-tile: var(--sp-neutral);
		--sp-glass-scrim-filter: none;
	}
}
html:root[data-sp-transp="reducida"] {
	--sp-nav-bg: var(--sp-bg);
	--sp-menu-bg: var(--sp-elev);
	--sp-glass-bg: var(--sp-glass-solid);
	--sp-glass-filter: none;
	--sp-glass-row-hover: var(--sp-neutral-hover);
	--sp-glass-row-press: var(--sp-neutral-press);
	--sp-glass-tile: var(--sp-neutral);
	--sp-glass-scrim-filter: none;
}
@media (prefers-contrast: more) {
	html:root { --sp-line: currentColor; --sp-hair: var(--sp-field-line); }
}

/* Transicion suave al cambiar de tema (sin saltos bruscos de brillo). Solo dura 300 ms. */
/* Antes se aplicaba a TODOS los elementos (*); ahora solo a las superficies grandes y controles, que es lo que se ve cambiar. */
html.sp-tema-anim, html.sp-tema-anim body, html.sp-tema-anim #contenido, html.sp-tema-anim .sp-nav,
html.sp-tema-anim #login, html.sp-tema-anim .form-control, html.sp-tema-anim .btn,
html.sp-tema-anim .card, html.sp-tema-anim .table, html.sp-tema-anim .modal-content, html.sp-tema-anim .dropdown-menu {
	transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease !important;
}

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 4.5rem; }

body {
	font-family: var(--sp-font);
	color: var(--sp-ink);
	background: var(--sp-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	letter-spacing: -.011em;
	line-height: 1.5;
}

::selection { background: rgba(0, 113, 227, .28); }

/* Foco visible y con contraste suficiente (>= 3:1) en cualquier tema */
:focus-visible { outline: 3px solid var(--sp-focus); outline-offset: 2px; }
.form-control:focus-visible, .form-select:focus-visible { outline: none; }

/* Enlace "Saltar al contenido" para teclado y lectores de pantalla */
.sp-skip {
	position: absolute; left: .75rem; top: -4rem; z-index: 2000;
	padding: .65rem 1.1rem; border-radius: 980px; font-weight: 600;
	background: var(--sp-accent); color: var(--sp-on-accent);
	transition: top .15s ease;
}
.sp-skip:focus { top: .75rem; color: var(--sp-on-accent); }
#contenido:focus { outline: none; }

/* ---------- Titulos ---------- */
.display-4 {
	font-size: clamp(1.7rem, 1.25rem + 1.6vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.1;
}
h1 > .bi, .display-4 > .bi { color: var(--sp-ink-3); font-size: .78em; margin-right: .15em; vertical-align: -.04em; }
hr.display-4, hr { border: 0; border-top: 1px solid var(--sp-hair); opacity: 1; font-size: 1rem; }
.httitle { filter: none; }
.httitle.animate__fadeInLeft { animation-name: sp-rise; animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
@keyframes sp-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

a { color: var(--sp-blue); }
a:not([class]) { text-decoration: underline; text-underline-offset: .15em; }   /* no depender solo del color */
label:not(.form-check-label):not(.btn) { font-size: .88rem; font-weight: 500; color: var(--sp-ink-2); }

.text-info { color: var(--sp-info) !important; }
.numerose { color: var(--sp-red) !important; }

/* ---------- Barra de navegacion: cristal ---------- */
#barra { position: sticky; top: 0; z-index: 1030; }
.sp-nav {
	background: var(--sp-nav-bg);
	-webkit-backdrop-filter: saturate(180%) blur(22px);
	backdrop-filter: saturate(180%) blur(22px);
	border-bottom: 1px solid var(--sp-hair);
	padding-top: .4rem; padding-bottom: .4rem;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.sp-nav { background: var(--sp-bg); }
}
html:root[data-sp-transp="reducida"] .sp-nav { -webkit-backdrop-filter: none; backdrop-filter: none; }
.sp-brand { font-weight: 650; letter-spacing: -.02em; color: var(--sp-ink); }
.sp-nav .navbar-brand { display: flex; align-items: center; gap: .5rem; }
.sp-nav .navbar-brand img { border-radius: 8px; }
.sp-nav .navbar-toggler { border: 0; box-shadow: none; min-width: 44px; min-height: 44px; }
.sp-nav .navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231d1d1f' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 14h22M4 21h22'/%3e%3c/svg%3e");
}
[data-bs-theme="dark"] .sp-nav .navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23f5f5f7' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 14h22M4 21h22'/%3e%3c/svg%3e");
}
.sp-nav .nav-link {
	display: flex; align-items: center; gap: .4rem; min-height: 44px;   /* objetivo tactil >= 44 px */
	color: var(--sp-ink-2); font-size: .93rem; font-weight: 500;
	padding: .42rem .9rem; border-radius: 980px; text-shadow: none;
	transition: background-color .2s, color .2s;
}
.sp-nav .nav-link:hover { color: var(--sp-ink); background: var(--sp-fill); text-shadow: none; }
.sp-nav .nav-link.show { color: var(--sp-ink); background: var(--sp-fill); }
.sp-nav .nav-item.active > .nav-link,
.sp-nav .nav-link.active { color: var(--sp-blue); background: var(--sp-blue-tint); }
.sp-nav .nav-item { margin-right: .1rem; transition: none; }
.nav-link:hover, .dropdown-item:hover { text-shadow: none; }

/* ---------- Menus desplegables ---------- */
.dropdown-menu {
	--bs-dropdown-color: var(--sp-ink);
	--bs-dropdown-link-color: var(--sp-ink);
	--bs-dropdown-header-color: var(--sp-ink-2);
	border: 1px solid var(--sp-hair);
	border-radius: var(--sp-r-m);
	padding: .35rem;
	box-shadow: var(--sp-shadow-pop);
	background: var(--sp-menu-bg);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
}
.dropdown-item {
	border-radius: 8px; padding: .55rem .75rem; min-height: 44px; font-size: .95rem; color: var(--sp-ink);
	display: flex; align-items: center; gap: .55rem; transition: background-color .15s;
}
.dropdown-item .bi { color: var(--sp-ink-2); width: 1.1em; text-align: center; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--sp-fill-2); color: var(--sp-ink); }
.dropdown-item:active { background: var(--sp-accent); color: var(--sp-on-accent); }
.dropdown-item:active .bi { color: var(--sp-on-accent); }
.dropdown-header { font-size: .78rem; font-weight: 600; letter-spacing: .01em; }
.dropdown-divider { border-color: var(--sp-hair); margin: .3rem .4rem; }
.dropdown-item .sp-check { margin-left: auto; opacity: 0; color: var(--sp-blue); }
.dropdown-item[aria-checked="true"] { font-weight: 600; background: transparent; }
.dropdown-item[aria-checked="true"] .sp-check { opacity: 1; }
.dropdown-item-text { color: var(--sp-ink); }
.sp-switch-row .form-check { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding-left: 0; margin: 0; }
.sp-switch-row .form-check-input { margin: 0 0 0 .25rem; flex: none; width: 2.6em; height: 1.45em; }
.sp-switch-row .form-check-label { color: var(--sp-ink); font-size: .95rem; }

/* ---------- Botones ---------- */
.btn {
	--bs-btn-border-radius: 980px;
	--bs-btn-padding-x: 1.15rem; --bs-btn-padding-y: .55rem;
	--bs-btn-font-weight: 500;
	--bs-btn-focus-box-shadow: var(--sp-ring);
	min-height: 44px;                    /* objetivo tactil >= 44 px (Apple HIG) */
	letter-spacing: -.01em;
	transition: background-color .18s, color .18s, transform .12s, box-shadow .18s;
}
.btn:active:not(:disabled) { transform: scale(.985); }
.btn-sm { --bs-btn-padding-x: .85rem; --bs-btn-padding-y: .32rem; --bs-btn-font-size: .88rem; min-height: 36px; }
.input-group > .btn { --bs-btn-border-radius: var(--bs-border-radius); }

.btn-primary, .btn-info {
	--bs-btn-color: var(--sp-on-accent);  --bs-btn-bg: var(--sp-accent);  --bs-btn-border-color: transparent;
	--bs-btn-hover-color: var(--sp-on-accent); --bs-btn-hover-bg: var(--sp-accent-hover); --bs-btn-hover-border-color: transparent;
	--bs-btn-active-color: var(--sp-on-accent); --bs-btn-active-bg: var(--sp-accent-press); --bs-btn-active-border-color: transparent;
	--bs-btn-disabled-color: var(--sp-on-accent); --bs-btn-disabled-bg: var(--sp-accent); --bs-btn-disabled-border-color: transparent;
}
.btn-outline-primary, .btn-outline-danger {
	--bs-btn-color: var(--sp-blue); --bs-btn-bg: var(--sp-blue-tint); --bs-btn-border-color: transparent;
	--bs-btn-hover-color: var(--sp-blue); --bs-btn-hover-bg: var(--sp-note-bg); --bs-btn-hover-border-color: transparent;
	--bs-btn-active-color: var(--sp-blue); --bs-btn-active-bg: var(--sp-note-bg); --bs-btn-active-border-color: transparent;
	--bs-btn-disabled-color: var(--sp-blue); --bs-btn-disabled-bg: var(--sp-blue-tint); --bs-btn-disabled-border-color: transparent;
}
.btn-outline-dark, .btn-secondary, .btn-outline-secondary {
	--bs-btn-color: var(--sp-ink); --bs-btn-bg: var(--sp-neutral); --bs-btn-border-color: transparent;
	--bs-btn-hover-color: var(--sp-ink); --bs-btn-hover-bg: var(--sp-neutral-hover); --bs-btn-hover-border-color: transparent;
	--bs-btn-active-color: var(--sp-ink); --bs-btn-active-bg: var(--sp-neutral-press); --bs-btn-active-border-color: transparent;
	--bs-btn-disabled-color: var(--sp-ink-2); --bs-btn-disabled-bg: var(--sp-neutral); --bs-btn-disabled-border-color: transparent;
}
.btn-dark {
	--bs-btn-color: var(--sp-on-ink); --bs-btn-bg: var(--sp-ink); --bs-btn-border-color: transparent;
	--bs-btn-hover-color: var(--sp-on-ink); --bs-btn-hover-bg: var(--sp-ink-2); --bs-btn-hover-border-color: transparent;
	--bs-btn-active-color: var(--sp-on-ink); --bs-btn-active-bg: var(--sp-ink-2); --bs-btn-active-border-color: transparent;
	--bs-btn-disabled-color: var(--sp-on-ink); --bs-btn-disabled-bg: var(--sp-ink); --bs-btn-disabled-border-color: transparent;
}
.btn-success {
	--bs-btn-color: #fff; --bs-btn-bg: #1d7a35; --bs-btn-border-color: transparent;
	--bs-btn-hover-color: #fff; --bs-btn-hover-bg: #17692c; --bs-btn-hover-border-color: transparent;
	--bs-btn-active-color: #fff; --bs-btn-active-bg: #125724; --bs-btn-active-border-color: transparent;
	--bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #1d7a35; --bs-btn-disabled-border-color: transparent;
}
.btn-danger {
	--bs-btn-color: #fff; --bs-btn-bg: #c8001a; --bs-btn-border-color: transparent;
	--bs-btn-hover-color: #fff; --bs-btn-hover-bg: #b00017; --bs-btn-hover-border-color: transparent;
	--bs-btn-active-color: #fff; --bs-btn-active-bg: #980014; --bs-btn-active-border-color: transparent;
	--bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #c8001a; --bs-btn-disabled-border-color: transparent;
}
[data-bs-theme="dark"] .btn-danger { --bs-btn-bg: #c4202f; --bs-btn-hover-bg: #d12b3f; --bs-btn-active-bg: #a81a28; --bs-btn-disabled-bg: #c4202f; }

/* ---------- Formularios ---------- */
.form-control, .form-select {
	border: 1px solid var(--sp-field-line);      /* borde con contraste >= 3:1 */
	border-radius: var(--sp-r-s);
	padding: .6rem .8rem;
	min-height: 44px;
	background-color: var(--sp-field-bg);
	color: var(--sp-ink);
	transition: border-color .15s, box-shadow .15s;
}
.form-control::placeholder { color: var(--sp-ink-3); opacity: 1; }
.form-control:focus, .form-select:focus { border-color: var(--sp-focus); box-shadow: var(--sp-ring); background-color: var(--sp-field-bg); color: var(--sp-ink); }
.form-control:disabled, .form-control[readonly] { background-color: var(--sp-fill); color: var(--sp-ink); }
.form-control:disabled { color: var(--sp-ink-2); }
.input-group-text { background: var(--sp-fill); border: 1px solid var(--sp-field-line); color: var(--sp-ink-2); }
.form-check-input { border-color: var(--sp-field-line); background-color: var(--sp-field-bg); }
.form-check-input:checked { background-color: var(--sp-accent); border-color: var(--sp-accent); }
.form-check-input:focus { box-shadow: var(--sp-ring); border-color: var(--sp-focus); }
.alert { border: 0; border-radius: var(--sp-r-m); }
.alert-danger  { background: var(--sp-bad-bg);  color: var(--sp-bad-fg); }
.alert-success { background: var(--sp-ok-bg);   color: var(--sp-ok-fg); }
.alert-warning { background: var(--sp-warn-bg); color: var(--sp-warn-fg); }
.alert-info    { background: var(--sp-note-bg); color: var(--sp-note-fg); }

/* ---------- Ventanas modales ---------- */
.modal-content {
	background: var(--sp-elev); color: var(--sp-ink);
	border: 0; border-radius: var(--sp-r-l); box-shadow: var(--sp-shadow-modal); overflow: hidden;
}
[data-bs-theme="dark"] .modal-content { border: 1px solid var(--sp-hair); }
.modal-header { border-bottom: 0; padding: 1rem 1.25rem .25rem; }
.modal-title { font-size: .95rem; font-weight: 600; color: var(--sp-ink-2); }
.modal-body { padding: .75rem 1.5rem 1.5rem; }
.modal-footer { border-top: 0; padding: .5rem 1.5rem 1.25rem; }
.modal-backdrop { --bs-backdrop-opacity: .4; }
[data-bs-theme="dark"] .modal-backdrop { --bs-backdrop-opacity: .6; }
.btn-close { width: 1.5em; height: 1.5em; }
.btn-close:focus { box-shadow: var(--sp-ring); }
.modal-body h1.display-4 { font-size: 1.6rem; }

/* ---------- Tablas y DataTables ---------- */
.table {
	--bs-table-bg: transparent;
	--bs-table-color: var(--sp-ink);
	--bs-table-striped-color: var(--sp-ink);
	--bs-table-hover-color: var(--sp-ink);
	--bs-table-striped-bg: var(--sp-stripe);
	--bs-table-hover-bg: var(--sp-row-hover);
	--bs-table-border-color: var(--sp-hair);
	font-size: .95rem;
}
.table > :not(caption) > * > * { padding: .75rem .9rem; vertical-align: middle; }
.table-bordered { border: 0; }
.table-bordered > :not(caption) > * > * { border-width: 0 0 1px; }
.table > thead > tr > th, .table > thead > tr > td {
	font-size: .82rem; font-weight: 600; color: var(--sp-ink-2);
	background: transparent; border-bottom: 1px solid var(--sp-line);
}
thead.table-dark { --bs-table-bg: transparent; --bs-table-color: var(--sp-ink-2); --bs-table-border-color: var(--sp-line); }
table.dataTable.table > tbody > tr > td { padding: .75rem .9rem; }
table.dataTable.table > thead > tr > th { padding: .7rem .9rem; }
table.dataTable.no-footer { border-bottom: 1px solid var(--sp-hair); }
table.dataTable tbody tr { background-color: transparent; }

.dataTables_wrapper { font-size: .92rem; color: var(--sp-ink-2); }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate { color: var(--sp-ink-2); }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
	border: 1px solid var(--sp-field-line); border-radius: var(--sp-r-s); background: var(--sp-field-bg); color: var(--sp-ink);
	padding: .35rem .7rem; margin-left: .5rem; outline: none; min-height: 36px;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus { border-color: var(--sp-focus); box-shadow: var(--sp-ring); }
.dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dt-buttons { margin-bottom: .75rem; }
.dt-buttons .dt-button {
	background: var(--sp-neutral) !important; background-image: none !important;
	border: 0 !important; border-radius: 980px !important; color: var(--sp-ink) !important;
	font-size: .88rem; font-weight: 500; padding: .45rem 1rem; min-height: 36px; margin-right: .4rem; box-shadow: none !important;
}
.dt-buttons .dt-button:hover:not(.disabled) { background: var(--sp-neutral-hover) !important; }
div.dt-button-collection { background: var(--sp-elev); border: 1px solid var(--sp-line); border-radius: var(--sp-r-m); box-shadow: var(--sp-shadow-pop); }
.dataTables_wrapper .dataTables_paginate .paginate_button {
	border: 0 !important; border-radius: 980px !important; padding: .4rem .85rem !important; min-width: 36px;
	color: var(--sp-ink) !important; background: transparent !important; box-shadow: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) { background: var(--sp-fill-2) !important; color: var(--sp-ink) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--sp-accent) !important; color: var(--sp-on-accent) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { color: var(--sp-ink-3) !important; background: transparent !important; }

/* ---------- Resumen (tarjetas del inicio) ---------- */
.tarjeta {
	background: var(--sp-fill); color: var(--sp-ink);
	border-radius: var(--sp-r-l); box-shadow: none;
	transition: background-color .2s, transform .2s;
}
.tarjeta:hover { transform: translateY(-2px); box-shadow: none; background: var(--sp-fill-2); }
.tarjeta .logo, .tarjeta .titulo, .tarjeta .titulo2, .tarjeta .contador { color: var(--sp-ink); }
#listcorte { background-color: var(--sp-fill); border-radius: var(--sp-r-l); }

/* ---------- Inicio de sesion: cristal liquido sobre un fondo de color ----------
   El cristal solo se nota si hay algo detras que desenfocar: el fondo (.sp-login-bg) son 4 manchas de color
   que flotan despacio. Se animan solo con transform/opacity (la GPU las compone sin repintar) y sin
   filter: blur (las manchas ya son degradados suaves), que es lo que mas cuesta en pantallas modestas. */
#contenido:has(.sp-login-bg) { isolation: isolate; }
/* Colores registrados como <color>: al cambiar de fondo o de tema se funden en .6 s en lugar de saltar */
@property --lg-base { syntax: '<color>'; inherits: true; initial-value: #e9eef8; }
@property --lg-1 { syntax: '<color>'; inherits: true; initial-value: #0a84ff; }
@property --lg-2 { syntax: '<color>'; inherits: true; initial-value: #ff9f0a; }
@property --lg-3 { syntax: '<color>'; inherits: true; initial-value: #ff375f; }
@property --lg-4 { syntax: '<color>'; inherits: true; initial-value: #30d158; }
.sp-login-bg {
	--lg-base: #e9eef8; --lg-1: #0a84ff; --lg-2: #ff9f0a; --lg-3: #ff375f; --lg-4: #30d158; --lg-a: .9;
	position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict;
	background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .7), transparent 60%), var(--lg-base);
	transition: --lg-base .6s ease, --lg-1 .6s ease, --lg-2 .6s ease, --lg-3 .6s ease, --lg-4 .6s ease;
}
/* Cinco fondos. Cada uno define sus colores en claro y en oscuro. */
.sp-login-bg[data-fondo="atardecer"] { --lg-base: #fbeee6; --lg-1: #ff5e3a; --lg-2: #ffb100; --lg-3: #d6249f; --lg-4: #6a4cff; }
.sp-login-bg[data-fondo="oceano"]    { --lg-base: #e4f0f8; --lg-1: #0a84ff; --lg-2: #00c7be; --lg-3: #5e5ce6; --lg-4: #64d2ff; }
.sp-login-bg[data-fondo="huerto"]    { --lg-base: #eef7e8; --lg-1: #30d158; --lg-2: #a3e635; --lg-3: #ffd60a; --lg-4: #00b894; }
.sp-login-bg[data-fondo="grafito"]   { --lg-base: #eceef2; --lg-1: #8e8e93; --lg-2: #c7c7cc; --lg-3: #636366; --lg-4: #5ac8fa; }
[data-bs-theme="dark"] .sp-login-bg { --lg-base: #0b0d14; --lg-1: #2f6bff; --lg-2: #ff7a00; --lg-3: #e0245e; --lg-4: #1fb768; --lg-a: .6;
	background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .06), transparent 60%), var(--lg-base); }
[data-bs-theme="dark"] .sp-login-bg[data-fondo="atardecer"] { --lg-base: #140b10; --lg-1: #ff4d2e; --lg-2: #ff9500; --lg-3: #c01a8c; --lg-4: #5b3df5; }
[data-bs-theme="dark"] .sp-login-bg[data-fondo="oceano"]    { --lg-base: #08121a; --lg-1: #0a6cff; --lg-2: #00a89f; --lg-3: #4b49d6; --lg-4: #2aa7d6; }
[data-bs-theme="dark"] .sp-login-bg[data-fondo="huerto"]    { --lg-base: #0a140c; --lg-1: #1fb768; --lg-2: #7fb81f; --lg-3: #d9b200; --lg-4: #00957a; }
[data-bs-theme="dark"] .sp-login-bg[data-fondo="grafito"]   { --lg-base: #0c0c0f; --lg-1: #6e6e73; --lg-2: #98989d; --lg-3: #48484a; --lg-4: #3a9fd1; }
@media (prefers-reduced-motion: reduce) { .sp-login-bg { transition: none; } }
html:root[data-sp-transp="reducida"] .sp-login-bg { transition: none; }

.sp-login-bg .o {
	position: absolute; display: block; width: 58vmax; height: 58vmax; border-radius: 50%; opacity: var(--lg-a);
	background: radial-gradient(circle closest-side, var(--c) 0%, transparent 100%);
	will-change: transform; animation: sp-orb var(--t) ease-in-out infinite alternate;
}
.sp-login-bg .o1 { --c: var(--lg-1); --t: 26s; left: 10vw; top: -12vmax; }
.sp-login-bg .o2 { --c: var(--lg-2); --t: 31s; right: 6vw; top: 4vh; animation-delay: -9s; width: 44vmax; height: 44vmax; }
.sp-login-bg .o3 { --c: var(--lg-3); --t: 29s; left: 22vw; bottom: -12vmax; animation-delay: -15s; width: 50vmax; height: 50vmax; }
.sp-login-bg .o4 { --c: var(--lg-4); --t: 34s; right: 14vw; bottom: -10vmax; width: 40vmax; height: 40vmax; animation-delay: -4s; }
@keyframes sp-orb {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(9vmax, 6vmax, 0) scale(1.18); }
}
.sp-login-bg.sp-pausa .o { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .sp-login-bg .o { animation: none; will-change: auto; } }
html:root[data-sp-transp="reducida"] .sp-login-bg .o { animation: none; will-change: auto; }
@media (forced-colors: active) { .sp-login-bg { display: none; } }

#login {
	position: relative; z-index: 1; isolation: isolate;
	max-width: 420px; width: calc(100% - 2rem);
	margin: 8vh auto 0; padding: 2.75rem 2rem 2.25rem;
	color: var(--sp-glass-ink);
	background: var(--sp-glass-bg);
	-webkit-backdrop-filter: var(--sp-glass-filter); backdrop-filter: var(--sp-glass-filter);
	border: 1px solid var(--sp-glass-edge); border-radius: 32px;
	box-shadow:
		inset 0 1px 0 var(--sp-glass-spec),
		inset 0 -1px 0 var(--sp-glass-edge-low),
		0 30px 80px rgba(0, 0, 0, .22),
		0 2px 10px rgba(0, 0, 0, .08);
}
#login::before {                                  /* brillo especular, como en el menu de opciones */
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
	background:
		radial-gradient(120% 70% at 10% -10%, var(--sp-glass-sheen) 0%, transparent 60%),
		linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 40%);
}
#login label { color: var(--sp-glass-ink-2); font-weight: 600; }
#login .form-control {
	min-height: 48px; border: 0; border-radius: 16px; color: var(--sp-glass-ink);
	background: var(--sp-glass-tile);
	box-shadow: inset 0 1px 0 var(--sp-glass-spec), inset 0 0 0 1px var(--sp-glass-edge-low);
	transition: background-color .15s ease, box-shadow .15s ease;
}
#login .form-control::placeholder { color: var(--sp-glass-ink-2); opacity: .7; }
#login .form-control:focus { background: var(--sp-glass-row-press); box-shadow: inset 0 1px 0 var(--sp-glass-spec), var(--sp-ring); }
#login .btn { min-height: 48px; border-radius: 16px; font-weight: 650; }
#login.animate__animated { animation-name: sp-rise; animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
/* Nombre del sistema en lugar de logotipo (inicio de sesión y recuperación de contraseña) */
.sp-wordmark { margin: .4rem 0 1.4rem; text-align: center; font-size: clamp(2rem, 8vw, 2.8rem); font-weight: 750; letter-spacing: -.035em; line-height: 1.05; color: var(--sp-glass-ink); }
/* Recuperación de contraseña */
.sp-olvido { display: block; margin-top: .95rem; text-align: center; font-size: .92rem; font-weight: 600; color: var(--sp-glass-ink-2); text-decoration: none; }
.sp-olvido:hover { color: var(--sp-glass-ink); text-decoration: underline; text-underline-offset: .18em; }
.sp-olvido:focus-visible { outline: 3px solid var(--sp-focus); outline-offset: 3px; border-radius: 8px; }
.sp-rec-titulo { margin: 0 0 .9rem; text-align: center; font-size: 1.12rem; font-weight: 650; color: var(--sp-glass-ink); }
.sp-rec-nota { margin: 0 0 1rem; font-size: .92rem; line-height: 1.45; color: var(--sp-glass-ink-2); }
.sp-rec-aviso, .sp-rec-ok { margin: 0 0 .8rem; font-weight: 600; line-height: 1.4; }
.sp-rec-aviso { color: var(--sp-glass-ink); }
.sp-rec-ok { color: var(--bs-success); }
.sp-rec-error { min-height: 1.3em; margin-bottom: .6rem; font-size: .9rem; font-weight: 600; color: var(--bs-danger); }
/* Selector de fondo */
.sp-fondos { display: flex; justify-content: center; gap: .1rem; margin-top: 1.1rem; }
.sp-fondos button { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 50%; }
.sp-fondos button::before {
	content: ""; position: absolute; inset: 9px; border-radius: 50%;
	background: linear-gradient(135deg, var(--s1), var(--s2) 55%, var(--s3));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 3px rgba(0, 0, 0, .25);
	transition: transform .15s ease;
}
.sp-fondos button:hover::before { transform: scale(1.08); }
.sp-fondos button[aria-pressed="true"]::after {
	content: ""; position: absolute; inset: 3px; border-radius: 50%;
	box-shadow: 0 0 0 2px var(--sp-glass-ink);
}
.sp-fondos button:focus-visible { outline: 3px solid var(--sp-focus); outline-offset: 0; }
.sp-fondos [data-fondo="aurora"]    { --s1: #0a84ff; --s2: #ff375f; --s3: #ff9f0a; }
.sp-fondos [data-fondo="atardecer"] { --s1: #ffb100; --s2: #ff5e3a; --s3: #d6249f; }
.sp-fondos [data-fondo="oceano"]    { --s1: #64d2ff; --s2: #0a84ff; --s3: #5e5ce6; }
.sp-fondos [data-fondo="huerto"]    { --s1: #ffd60a; --s2: #a3e635; --s3: #30d158; }
.sp-fondos [data-fondo="grafito"]   { --s1: #d1d1d6; --s2: #8e8e93; --s3: #48484a; }
.sp-fondo-nombre { text-align: center; font-size: .85rem; font-weight: 600; color: var(--sp-glass-ink-2); min-height: 1.3em; margin-top: .1rem; }
@media (forced-colors: active) {
	.sp-fondos button::before { forced-color-adjust: none; }
	.sp-fondos button[aria-pressed="true"]::after { box-shadow: 0 0 0 2px Highlight; }
}
@media (forced-colors: active) {
	#login { background: Canvas; border: 1px solid CanvasText; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.sp-login-tools { position: absolute; top: .75rem; right: .75rem; }

/* Selector de apariencia (3 opciones) */
.sp-seg-icons { display: inline-flex; gap: 2px; padding: 3px; background: var(--sp-seg-bg); border-radius: 12px; }
.sp-seg-icons > button {
	display: inline-grid; place-items: center; width: 44px; height: 38px; border: 0; border-radius: 9px;
	background: transparent; color: var(--sp-ink-2); font-size: 1.05rem; cursor: pointer;
	transition: background-color .18s, color .18s, box-shadow .18s;
}
.sp-seg-icons > button:hover { color: var(--sp-ink); }
.sp-seg-icons > button[aria-pressed="true"] { background: var(--sp-seg-on); color: var(--sp-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }

/* ==========================================================================
   Pantalla de venta (punto de venta)
   ========================================================================== */
#unidades, #totalv { color: var(--sp-ink); background-color: transparent; font-variant-numeric: tabular-nums; }
#unidades:focus-visible, #totalv:focus-visible { outline-offset: -2px; border-radius: var(--sp-r-s); }
#prodlist { background: var(--sp-bg); }

/* ==========================================================================
   Menu de opciones del punto de venta: cristal liquido (casi transparente)
   El #ventana lleva .sp-glass solo mientras se muestra este menu (ver opciones_boton).
   Texto con mas contraste y peso sobre el material (vibrancy); se vuelve opaco con
   "reducir transparencia", "mas contraste" o el interruptor del menu Apariencia.
   ========================================================================== */
html.sp-glass-open .modal-backdrop {
	--bs-backdrop-bg: var(--sp-glass-scrim);      /* el velo lleva su propia transparencia: con opacity el desenfoque se perdería */
	--bs-backdrop-opacity: 1;
	-webkit-backdrop-filter: var(--sp-glass-scrim-filter);
	backdrop-filter: var(--sp-glass-scrim-filter);
}
#ventana.sp-glass .modal-dialog { max-width: 440px; }
#ventana.sp-glass .modal-content {
	isolation: isolate;
	background: var(--sp-glass-bg);
	-webkit-backdrop-filter: var(--sp-glass-filter);
	backdrop-filter: var(--sp-glass-filter);
	border: 1px solid var(--sp-glass-edge);
	border-radius: 30px;
	color: var(--sp-glass-ink);
	box-shadow:
		inset 0 1px 0 var(--sp-glass-spec),            /* borde superior: luz que toca el vidrio */
		inset 0 -1px 0 var(--sp-glass-edge-low),
		0 30px 80px rgba(0, 0, 0, .28),
		0 2px 10px rgba(0, 0, 0, .10);
}
#ventana.sp-glass .modal-content::before {              /* brillo especular */
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
	background:
		radial-gradient(120% 70% at 10% -10%, var(--sp-glass-sheen) 0%, transparent 60%),
		linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 40%);
}
#ventana.sp-glass .modal-title { color: var(--sp-glass-ink-2); font-weight: 650; }
#ventana.sp-glass .modal-body { padding: .25rem 1rem 1.25rem; }
#ventana.sp-glass .modal-footer { display: none; }      /* el menu ya tiene su propio boton de cierre arriba */
#ventana.sp-glass .btn-close { opacity: .75; }
#ventana.sp-glass .btn-close:hover { opacity: 1; }

/* Buscador de productos (mismo cristal; ventana mas ancha y lista con scroll) */
#ventana.sp-glass.sp-glass-wide .modal-dialog { max-width: 640px; }
.sp-search {
	display: flex; align-items: center; gap: .6rem; margin: 0 .25rem .6rem; padding: 0 1rem; min-height: 52px;
	background: var(--sp-glass-tile); border-radius: 18px; color: var(--sp-glass-ink-2);
	box-shadow: inset 0 1px 0 var(--sp-glass-spec), inset 0 0 0 1px var(--sp-glass-edge-low);
	transition: box-shadow .15s ease;
}
.sp-search:focus-within { box-shadow: inset 0 1px 0 var(--sp-glass-spec), 0 0 0 3px var(--sp-focus); }
.sp-search .bi { font-size: 1.05rem; }
.sp-search input {
	flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--sp-glass-ink);
	font-size: 1.1rem; font-weight: 550; letter-spacing: -.01em; padding: .7rem 0;
}
.sp-search input::placeholder { color: var(--sp-glass-ink-2); opacity: .75; font-weight: 500; }
.sp-search input::-webkit-search-cancel-button { filter: opacity(.6); cursor: pointer; }
.sp-res-count { font-size: .85rem; font-weight: 600; color: var(--sp-glass-ink-2); padding: 0 1.1rem; margin-bottom: .3rem; }
.sp-res-list { max-height: min(52vh, 440px); overflow-y: auto; overscroll-behavior: contain; padding: 0 .15rem .15rem; scrollbar-width: thin; }
.sp-res { min-height: 60px; }
.sp-res .sp-opt-name { overflow-wrap: anywhere; }
.sp-res-price { flex: none; font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--sp-glass-ink); }
.sp-res-empty { text-align: center; padding: 2rem 1rem; color: var(--sp-glass-ink-2); }
.sp-res-empty .bi { display: block; font-size: 2rem; margin-bottom: .4rem; opacity: .7; }
.sp-res-empty p { margin: 0; }

/* Aparece como un material que llega: se enfoca y crece, no solo se desvanece */
#ventana.sp-glass.show .modal-content { animation: sp-materialize .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes sp-materialize {
	from { opacity: 0; transform: scale(.94); -webkit-backdrop-filter: blur(0) saturate(100%); backdrop-filter: blur(0) saturate(100%); }
}
@keyframes sp-fade { from { opacity: 0; } }

.sp-opts-title { font-size: 1.65rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; margin: 0; color: var(--sp-glass-ink); padding: 0 .85rem; }
.sp-opts-sub { font-size: .95rem; font-weight: 500; color: var(--sp-glass-ink-2); margin: .2rem 0 .85rem; padding: 0 .85rem; }
.sp-opts { display: flex; flex-direction: column; gap: .25rem; }
.sp-opt {
	display: flex; align-items: center; gap: .9rem; width: 100%; min-height: 64px;
	padding: .55rem .85rem; border: 0; border-radius: 20px; text-align: left;
	background: transparent; color: var(--sp-glass-ink); cursor: pointer;
	transition: background-color .15s ease, transform .12s ease;
}
.sp-opt:hover { background: var(--sp-glass-row-hover); }
.sp-opt:active { background: var(--sp-glass-row-press); transform: scale(.985); }   /* respuesta al instante, al presionar */
.sp-opt:focus-visible { outline: 3px solid var(--sp-focus); outline-offset: 1px; background: var(--sp-glass-row-hover); }
.sp-opt-icon {
	flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
	background: var(--sp-glass-tile); color: var(--sp-glass-accent); font-size: 1.3rem;
	box-shadow: inset 0 1px 0 var(--sp-glass-spec);
}
.sp-opt-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sp-opt-name { font-size: 1.02rem; font-weight: 650; letter-spacing: -.012em; }
.sp-opt-hint { font-size: .88rem; font-weight: 500; color: var(--sp-glass-ink-2); letter-spacing: -.005em; }
.sp-opt-go { flex: none; color: var(--sp-glass-ink-2); font-size: .95rem; }

@media (prefers-reduced-motion: reduce) {
	#ventana.sp-glass.show .modal-content { animation: sp-fade .2s ease both; }
	.sp-opt:active, .btn:active:not(:disabled) { transform: none; }
}
@media (forced-colors: active) {                         /* Modo de alto contraste de Windows */
	#ventana.sp-glass .modal-content { background: Canvas; border: 1px solid CanvasText; -webkit-backdrop-filter: none; backdrop-filter: none; }
	.sp-opt { border: 1px solid ButtonText; }
	.sp-search { border: 1px solid ButtonText; box-shadow: none; }
	.sp-opt:focus-visible { outline: 3px solid Highlight; }
}

/* Ventana de cobro (F2): mismo cristal liquido que el menu de opciones.
   Los campos usan el "tile" de cristal; el boton principal lleva el acento. */
.sp-cobro-total {
	display: flex; flex-direction: column; align-items: flex-end; gap: .1rem;
	margin: 0 .25rem 1rem; padding: .9rem 1.2rem 1rem; border-radius: 22px;
	background: var(--sp-glass-tile);
	box-shadow: inset 0 1px 0 var(--sp-glass-spec), inset 0 0 0 1px var(--sp-glass-edge-low);
}
.sp-cobro-total-label { font-size: .88rem; font-weight: 600; color: var(--sp-glass-ink-2); }
#ventana.sp-glass .sp-cobro-total-value {
	width: 100%; border: 0; padding: 0; text-align: right; background: transparent; opacity: 1;
	color: var(--sp-glass-ink); font-size: 2.4rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1;
	font-variant-numeric: tabular-nums; box-shadow: none;
}
.sp-cobro { display: flex; flex-direction: column; gap: .75rem; margin: 0 .25rem; }
.sp-cobro-field label { display: block; margin: 0 0 .3rem .35rem; font-size: .9rem; font-weight: 600; color: var(--sp-glass-ink-2); }
#ventana.sp-glass .sp-cobro .form-control,
#ventana.sp-glass .sp-cobro .form-select {
	min-height: 52px; border: 0; border-radius: 16px; color: var(--sp-glass-ink);
	background-color: var(--sp-glass-tile);
	font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums;
	box-shadow: inset 0 1px 0 var(--sp-glass-spec), inset 0 0 0 1px var(--sp-glass-edge-low);
}
#ventana.sp-glass .sp-cobro .form-control:disabled { opacity: 1; background-color: var(--sp-glass-row-hover); color: var(--sp-glass-ink); }
#ventana.sp-glass .sp-cobro .form-control:focus,
#ventana.sp-glass .sp-cobro .form-select:focus {
	background-color: var(--sp-glass-row-press); color: var(--sp-glass-ink);
	box-shadow: inset 0 1px 0 var(--sp-glass-spec), 0 0 0 3px var(--sp-focus);
}
#ventana.sp-glass .sp-cobro .form-select option { color: #1d1d1f; background: #fff; }
.sp-cobro-error { margin: .9rem .25rem 0; border-radius: 16px; }
.sp-cobro-btn {
	display: flex; align-items: center; justify-content: center; gap: .5rem;
	width: calc(100% - .5rem); min-height: 56px; margin: 1.1rem .25rem 0; border: 0; border-radius: 20px;
	background: var(--sp-glass-accent); color: var(--sp-glass-solid);
	font-size: 1.08rem; font-weight: 650; letter-spacing: -.012em;
	box-shadow: inset 0 1px 0 var(--sp-glass-spec), 0 6px 18px rgba(0, 0, 0, .18);
	transition: filter .15s ease, transform .12s ease;
}
.sp-cobro-btn:hover { filter: brightness(1.08); color: var(--sp-glass-solid); }
.sp-cobro-btn:active { transform: scale(.985); color: var(--sp-glass-solid); }
.sp-cobro-btn:focus-visible { outline: 3px solid var(--sp-focus); outline-offset: 2px; }
.sp-cobro-vacio { color: var(--sp-glass-ink-2); }
@media (prefers-reduced-motion: reduce) { .sp-cobro-btn:active { transform: none; } }
@media (forced-colors: active) {
	.sp-cobro-total, #ventana.sp-glass .sp-cobro .form-control, #ventana.sp-glass .sp-cobro .form-select { border: 1px solid ButtonText; box-shadow: none; }
	.sp-cobro-btn { border: 1px solid ButtonText; }
}

/* Productos mas vendidos: ranking con barra proporcional y grafica horizontal */
.sp-top-label { display: block; margin-bottom: .5rem; font-size: 1rem; }
.sp-top-h { font-size: 1.05rem; font-weight: 650; letter-spacing: -.01em; margin: 0 0 .75rem; }
.sp-top-pie { position: relative; height: 340px; max-width: 420px; margin: 0 auto; }
.sp-top-legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .15rem .75rem; }
.sp-top-key {
	display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 44px; padding: .4rem .65rem;
	border: 0; border-radius: 12px; background: transparent; color: var(--sp-ink); text-align: left; transition: background-color .15s;
}
.sp-top-key:hover { background: var(--sp-fill); }
.sp-top-key:focus-visible { outline: 3px solid var(--sp-focus); outline-offset: 1px; }
.sp-top-sw { flex: none; width: 14px; height: 14px; border-radius: 50%; }
.sp-top-key-name { flex: 1; min-width: 0; font-weight: 550; overflow-wrap: anywhere; }
.sp-top-key-pct { flex: none; font-weight: 650; color: var(--sp-ink-2); }
.sp-top-key.is-off { opacity: .5; }
.sp-top-key.is-off .sp-top-key-name { text-decoration: line-through; }
.sp-top-name { font-weight: 600; overflow-wrap: anywhere; }
.sp-top-bar { height: 6px; margin-top: .4rem; max-width: 320px; border-radius: 980px; background: var(--sp-fill-2); overflow: hidden; }
.sp-top-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--sp-info); }
.sp-rank {
	display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 .35rem; border-radius: 980px;
	font-size: .85rem; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--sp-ink-2); background: var(--sp-fill-2);
}
.sp-rank-top { background: var(--sp-main-bg); color: var(--sp-main-ink); }
@media (forced-colors: active) { .sp-top-bar { border: 1px solid ButtonText; } .sp-top-bar > span { background: Highlight; } }

/* ==========================================================================
   Componentes nuevos (cobranza y reporte de cobranza)
   ========================================================================== */

.sp-page { padding-top: .5rem; padding-left: clamp(1rem, 3vw, 2.5rem); padding-right: clamp(1rem, 3vw, 2.5rem); }
.sp-page-head { margin: 1.25rem 0 1.75rem; }
.sp-lede { font-size: 1.08rem; color: var(--sp-ink-2); max-width: 62ch; margin: .6rem 0 0; }
.sp-hint { font-size: .9rem; color: var(--sp-ink-2); margin: 0 0 .75rem; }
.sp-muted { color: var(--sp-ink-3); }
.sp-money { font-variant-numeric: tabular-nums; }
.sp-pos { color: var(--sp-green); }

.sp-panel { background: var(--sp-fill); border-radius: var(--sp-r-l); padding: 1.25rem 1.5rem; }

/* Indicadores: uno principal contrastado, el resto discretos */
.sp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .75rem; }
.sp-kpi { display: flex; flex-direction: column; gap: .15rem; background: var(--sp-fill); border-radius: var(--sp-r-l); padding: 1.1rem 1.35rem 1.2rem; min-width: 0; }
.sp-kpi-label { font-size: .88rem; font-weight: 500; color: var(--sp-ink-2); }
.sp-kpi-value { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); font-weight: 650; letter-spacing: -.03em; line-height: 1.15; overflow-wrap: anywhere; }
.sp-kpi-note { font-size: .88rem; color: var(--sp-ink-2); overflow-wrap: anywhere; }
.sp-kpi-main { background: var(--sp-main-bg); color: var(--sp-main-ink); }
.sp-kpi-main .sp-kpi-label, .sp-kpi-main .sp-kpi-note { color: var(--sp-main-note); }

/* Control segmentado */
.sp-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--sp-seg-bg); border-radius: 12px; }
.sp-seg > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sp-seg > label.sp-seg-item {
	margin: 0; padding: .55rem 1rem; min-height: 40px; border-radius: 9px; cursor: pointer; user-select: none;
	font-size: .9rem; font-weight: 500; color: var(--sp-ink-2); transition: background-color .18s, color .18s, box-shadow .18s;
}
.sp-seg > input:checked + label.sp-seg-item { background: var(--sp-seg-on); color: var(--sp-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .18), 0 0 0 .5px rgba(0, 0, 0, .04); }
.sp-seg > input:focus-visible + label.sp-seg-item { outline: 3px solid var(--sp-focus); outline-offset: 1px; }

/* Insignias de antiguedad */
.sp-badge { display: inline-block; padding: .15rem .6rem; border-radius: 980px; font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.sp-age-ok   { background: var(--sp-ok-bg);   color: var(--sp-ok-fg); }
.sp-age-warn { background: var(--sp-warn-bg); color: var(--sp-warn-fg); }
.sp-age-late { background: var(--sp-bad-bg);  color: var(--sp-bad-fg); }

.sp-icon-btn {
	display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
	background: transparent; color: var(--sp-ink-2); transition: background-color .15s, color .15s;
}
.sp-icon-btn:hover, .sp-icon-btn.show { background: var(--sp-fill-2); color: var(--sp-ink); }

.sp-row-open td { color: var(--sp-ink-2); font-style: normal; background: var(--sp-fill); }

/* Estados vacios: explican que pasa y que hacer */
.sp-empty { text-align: center; padding: 3rem 1rem; color: var(--sp-ink-2); }
.sp-empty > .bi { display: block; font-size: 2.2rem; color: var(--sp-ink-3); margin-bottom: .5rem; }
.sp-empty p { margin: 0; font-size: 1rem; }

/* Hoja del abono global (dentro del modal) */
.sp-sheet-title { font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; margin: 0; }
.sp-sheet-sub { color: var(--sp-ink-2); margin: .15rem 0 1.1rem; overflow-wrap: anywhere; }
.sp-balance { display: flex; flex-direction: column; background: var(--sp-fill); border-radius: var(--sp-r-m); padding: .9rem 1.1rem; margin-bottom: 1.1rem; }
.sp-balance-label, .sp-balance-note { font-size: .88rem; color: var(--sp-ink-2); }
.sp-balance-value { font-size: 2rem; font-weight: 650; letter-spacing: -.03em; line-height: 1.15; }
.sp-flow-wrap { max-height: 220px; overflow: auto; border-radius: var(--sp-r-m); border: 1px solid var(--sp-hair); }
.sp-flow { margin: 0; font-size: .9rem; }
.sp-flow > :not(caption) > * > * { padding: .5rem .75rem; }
.sp-flow thead th { position: sticky; top: 0; background: var(--sp-fill); z-index: 1; }
.sp-flow tbody tr:last-child td { border-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------------------
   Datos de la empresa: vista previa del ticket (v20261027)
   El PDF siempre es claro (papel térmico); el marco sigue el tema.
   ------------------------------------------------------------------------- */
.tk-preview {
	height: 640px;
	max-height: 75vh;
	border: 1px solid var(--sp-line);
	border-radius: 14px;
	background: var(--sp-fill);
	overflow: hidden;
}
.tk-preview iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
#tk_config.tk-papel-58 .tk-solo80,
#tk_config.tk-papel-80 .tk-solo58 {
	display: none;
}

/* =====================================================================================================
   Multiempresa: marca de la empresa en el login, pantalla de licencia y asistente de registro
   ===================================================================================================== */
.sp-emp-marca { display: flex; flex-direction: column; align-items: center; gap: .4rem; margin: -.6rem 0 1.2rem; text-align: center; }
.sp-emp-marca[hidden] { display: none; }
.sp-emp-marca img { max-width: 120px; max-height: 70px; border-radius: 10px; background: #fff; padding: 4px; }
.sp-emp-marca img[hidden] { display: none; }
#sp-emp-nombre { font-weight: 600; color: var(--sp-glass-ink); opacity: .85; }

#sp-lic-banner { display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; padding: .35rem .75rem;
    font-size: .875rem; background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); border-bottom: 1px solid var(--bs-warning-border-subtle); }
#sp-lic-banner a { font-weight: 600; cursor: pointer; text-decoration: underline; }

.sp-lic { max-width: 880px; margin: 1.5rem auto; padding: 0 1rem; }
.sp-lic-estado { border-radius: 18px; padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); }
.sp-lic-estado.vencida { background: var(--bs-danger-bg-subtle); border-color: var(--bs-danger-border-subtle); }
.sp-lic-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.sp-plan { border: 1px solid var(--bs-border-color); border-radius: 18px; padding: 1.4rem; background: var(--bs-body-bg); display: flex; flex-direction: column; gap: .5rem; position: relative; }
.sp-plan.destacado { border: 2px solid var(--bs-primary); }
.sp-plan .precio { font-size: 2.2rem; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; }
.sp-plan .precio small { font-size: .9rem; font-weight: 500; color: var(--bs-secondary-color); }
.sp-plan .ahorro { position: absolute; top: -.7rem; right: 1rem; background: var(--bs-primary); color: #fff; font-size: .75rem; font-weight: 600; padding: .15rem .6rem; border-radius: 999px; }
.sp-plan ul { margin: .25rem 0 .75rem; padding-left: 1.1rem; color: var(--bs-secondary-color); font-size: .9rem; }

/* Asistente de registro (registro.php) */
.sp-reg { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.sp-reg .sp-wordmark { margin-bottom: .3rem; }
.sp-reg-sub { text-align: center; color: var(--bs-body-color); opacity: .75; margin-bottom: 1.2rem; }
.sp-pasos { display: flex; gap: .4rem; justify-content: center; margin-bottom: 1.2rem; flex-wrap: wrap; }
.sp-pasos span { font-size: .8rem; padding: .25rem .7rem; border-radius: 999px; background: rgba(127,127,127,.18); color: var(--bs-body-color); }
.sp-pasos span.act { background: var(--bs-primary); color: #fff; font-weight: 600; }
.sp-pasos span.ok { background: var(--bs-success); color: #fff; }
.sp-reg-card { border-radius: 24px; padding: 1.6rem; background: color-mix(in srgb, var(--bs-body-bg) 84%, transparent); border: 1px solid var(--bs-border-color);
    -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); box-shadow: 0 10px 40px rgba(0,0,0,.12); color: var(--bs-body-color); }
.sp-reg-card label { font-weight: 600; font-size: .9rem; margin-bottom: .25rem; }
.sp-reg-card .invalido { color: var(--bs-danger); font-size: .82rem; margin-top: .2rem; min-height: 1px; }
.sp-url-prev { min-height: 2.7em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; opacity: .85; margin-top: .25rem; word-break: break-all; }
.sp-papel { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.sp-papel input { position: absolute; opacity: 0; pointer-events: none; }
.sp-papel label { border: 2px solid var(--bs-border-color); border-radius: 16px; padding: 1rem; cursor: pointer; text-align: center; margin: 0; background: rgba(127,127,127,.08); }
.sp-papel input:checked + label { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.sp-papel .rollo { margin: 0 auto .5rem; height: 54px; background: #fff; border: 1px solid #bbb; border-radius: 3px; display: block; }
.sp-papel .r58 { width: 38px; } .sp-papel .r80 { width: 56px; }
.sp-logo-prev { width: 140px; height: 90px; border: 1px dashed var(--bs-border-color); border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #fff; overflow: hidden; }
.sp-logo-prev img { max-width: 100%; max-height: 100%; }
@media (max-width: 575.98px) { .sp-reg-card { padding: 1.1rem; border-radius: 18px; } }

/* Registro: enlace para volver a la página de inicio */
.sp-reg-back { display: inline-block; margin-bottom: .6rem; font-size: .92rem; text-decoration: none; opacity: .8; }
.sp-reg-back:hover { opacity: 1; text-decoration: underline; }