/* ===================================================
   BIOMÉTRICO — estilo compartido (páginas de admin)
   Look neutro/elegante (piedra + bronce) sin ninguna marca
   de MOVE — este producto se vende a OTROS clientes
   (academias o empresas), así que cada quien ve su propio
   nombre y puede poner su propio color de marca.
=================================================== */

*{ box-sizing:border-box; }

/* Blindaje: cualquier elemento con el atributo "hidden" se oculta
   SIEMPRE, sin importar qué otras reglas de esta hoja le pongan
   display (ej. ".btn{display:inline-block}"). Sin esta regla, un
   botón con clase .btn y el atributo "hidden" se seguía viendo, porque
   la regla de la clase ".btn" le ganaba a la regla por defecto del
   navegador para "hidden" — esto causaba que apareciera "Pagar ahora"
   junto con "Generar link de pago" aunque el código dijera que uno de
   los dos debía estar oculto. */
[hidden]{ display:none !important; }

/* Colores de marca — por defecto un tono neutro (piedra + bronce).
   Cada cliente puede reemplazar --color-marca (y de ahí se derivan
   automáticamente los demás tonos, ver aplicarMarca() en
   academia.js/biometrico.js). --color-peligro es FIJO a propósito
   (errores/borrar siempre en rojo, sin importar el color de marca
   que elija el cliente). */
:root{
--color-marca:#9c7b4f;
--color-marca-oscuro:#856943;
--color-marca-suave:#f3efea;
--color-marca-suave2:#ede7df;
--color-marca-suave3:#e6ded3;
--color-marca-fondo:#fbfaf8;
--color-marca-fondo2:#f9f7f4;
--color-marca-fondo3:#f7f4f1;
--color-marca-texto-suave:#755c3b;
--color-marca-texto-suave2:#8c6f47;
--color-peligro:#e0245e;
}

/* iPhone no agranda la letra solo al girar el teléfono. */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

body{
margin:0;
min-height:100vh;
font-family:'Poppins', system-ui, sans-serif;
background:linear-gradient(160deg,var(--color-marca-fondo) 0%,var(--color-marca-fondo2) 40%,var(--color-marca-fondo3) 100%);
color:#3a2e3a;
/* Con viewport-fit=cover (panel), nada queda debajo del notch ni de la
   barra de estado; en computadora env() vale 0 y queda igual que antes. */
padding:max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 60px max(16px, env(safe-area-inset-left));
/* Un enlace, correo o código largo sin espacios se corta en vez de hacer
   la página más ancha que el teléfono (eso hacía que abriera con zoom). */
overflow-wrap:break-word;
}

img, video, canvas{ max-width:100%; }
/* En las tarjetas (filas flexibles) además se corta al calcular el ancho
   mínimo: si no, la tarjeta se estira hasta el largo del enlace. Solo
   corta una palabra cuando no cabe de otra forma. */
.info-principal, .nombre-item, .detalle-item, .texto-aviso, .ayuda, li{ overflow-wrap:anywhere; }

.contenedor{
max-width:920px;
margin:0 auto;
}

.tarjeta-login{
max-width:380px;
margin:8vh auto 0;
background:white;
border-radius:20px;
padding:32px 28px;
box-shadow:0 12px 30px rgba(0,0,0,.10);
text-align:center;
}

.tarjeta-login h1{
font-size:20px;
color:var(--color-marca);
margin:4px 0 4px;
}

.tarjeta-login .logo-login{
display:block;
max-height:64px;
max-width:180px;
object-fit:contain;
margin:0 auto 8px;
}

.tarjeta-login p.subtitulo{
font-size:13px;
color:#9a7d90;
margin:0 0 20px;
}

input, select, textarea{
width:100%;
padding:12px 14px;
border-radius:12px;
border:2px solid var(--color-marca-suave2);
font-size:14px;
font-family:inherit;
margin-bottom:12px;
background:#fffafc;
color:#3a2e3a;
}

/* En celulares y tablets la letra de los campos es de 16px: con menos,
   iPhone hace zoom al tocarlos (y la página queda con zoom). En
   computadora siguen en 14px. */
@media (max-width:1023px), (pointer:coarse){
  input, select, textarea{ font-size:16px; }
}

input:focus, select:focus, textarea:focus{
outline:none;
border-color:var(--color-marca);
}

.btn{
display:inline-block;
width:100%;
padding:13px 16px;
border:none;
border-radius:12px;
background:var(--color-marca);
color:white;
font-weight:700;
font-size:14px;
font-family:inherit;
cursor:pointer;
transition:background .15s ease, transform .1s ease;
}

.btn:hover{ background:var(--color-marca-oscuro); }
.btn:active{ transform:scale(.98); }

.btn.secundario{
background:white;
color:var(--color-marca);
border:2px solid var(--color-marca-suave2);
}

.btn.secundario:hover{ background:var(--color-marca-fondo); }

.btn.chico{
width:auto;
padding:8px 14px;
font-size:12.5px;
}

.btn.peligro{ background:var(--color-peligro); }
.btn.peligro:hover{ background:#c01c4e; }

.btn:disabled{
opacity:.55;
cursor:not-allowed;
}

.mensaje-error{
color:var(--color-peligro);
font-size:13px;
font-weight:600;
min-height:18px;
margin-top:4px;
}

.mensaje-exito{
color:#1a9b6c;
font-size:13px;
font-weight:600;
min-height:18px;
margin-top:4px;
}

.enlace-texto{
display:block;
width:100%;
margin-top:16px;
font-size:13px;
color:var(--color-marca-texto-suave2);
text-decoration:underline;
background:none;
border:none;
cursor:pointer;
font-family:inherit;
text-align:center;
}

.enlace-texto:hover{ color:var(--color-marca); }

/* -------- barra superior tras iniciar sesión -------- */

.barra-superior{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
margin-bottom:22px;
}

.barra-superior .titulo-con-logo{
display:flex;
align-items:center;
gap:10px;
flex:1;
min-width:0;
}

.barra-superior .logo-marca{
max-height:34px;
max-width:100px;
object-fit:contain;
flex-shrink:0;
}

.barra-superior h1{
font-size:19px;
color:var(--color-marca);
margin:0;
}

.barra-superior .info-cuenta{
font-size:12.5px;
color:#9a7d90;
font-weight:600;
}

/* -------- tarjetas / secciones -------- */

.panel{
background:white;
border-radius:18px;
padding:20px 20px 22px;
box-shadow:0 8px 22px rgba(0,0,0,.06);
margin-bottom:20px;
}

.panel h2{
font-size:15px;
color:var(--color-marca);
margin:0 0 4px;
}

.panel p.ayuda{
font-size:12.5px;
color:#9a7d90;
margin:0 0 16px;
}

.grid-stats{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
gap:10px;
margin-bottom:18px;
}

.stat-caja{
background:var(--color-marca-fondo);
border:2px solid var(--color-marca-suave);
border-radius:14px;
padding:14px 10px;
text-align:center;
}

.stat-numero{
font-size:24px;
font-weight:800;
color:var(--color-marca);
line-height:1;
}

.stat-etiqueta{
font-size:11px;
font-weight:700;
color:#9a7d90;
text-transform:uppercase;
letter-spacing:.4px;
margin-top:4px;
}

/* -------- formularios en línea -------- */

.fila-formulario{
display:flex;
gap:10px;
flex-wrap:wrap;
align-items:flex-end;
}

.fila-formulario > div{
flex:1;
min-width:140px;
}

.fila-formulario label, .campo label{
display:block;
font-size:12px;
font-weight:700;
color:var(--color-marca-texto-suave);
margin-bottom:4px;
}

.fila-formulario input, .campo input{ margin-bottom:0; }

/* -------- lista de tarjetas (academias / alumnos) -------- */

.lista-tarjetas{
display:flex;
flex-direction:column;
gap:10px;
}

.tarjeta-item{
display:flex;
align-items:center;
gap:14px;
border:2px solid var(--color-marca-suave);
border-radius:14px;
padding:12px 14px;
background:#fffafc;
flex-wrap:wrap;
}

.tarjeta-item.tarjeta-mes-actual{
border-color:var(--color-marca);
background:var(--color-marca-suave2);
}

.tarjeta-item .foto-miniatura{
width:46px;
height:46px;
border-radius:50%;
object-fit:cover;
background:var(--color-marca-suave);
flex-shrink:0;
}

.tarjeta-item .foto-miniatura.vacia{
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
color:var(--color-marca);
}

.tarjeta-item .info-principal{
flex:1;
min-width:150px;
}

.tarjeta-item .nombre-item{
font-weight:700;
font-size:14.5px;
color:#3a2e3a;
}

.tarjeta-item .detalle-item{
font-size:12px;
color:#9a7d90;
margin-top:2px;
}

.tarjeta-item .acciones-item{
display:flex;
gap:8px;
align-items:center;
flex-wrap:wrap;
}

.etiqueta-estado{
display:inline-block;
padding:3px 10px;
border-radius:999px;
font-size:11px;
font-weight:700;
}

.etiqueta-estado.activa{
background:#e6f8f1;
color:#1a9b6c;
}

.etiqueta-estado.inactiva{
background:#fdeaea;
color:#c0392b;
}

.lista-vacia{
text-align:center;
color:#b899ac;
font-size:13px;
padding:22px 10px;
}

/* -------- modal simple para editar -------- */

.fondo-modal{
position:fixed;
inset:0;
background:rgba(60,20,45,.35);
display:flex;
align-items:center;
justify-content:center;
padding:16px;
z-index:50;
}

.fondo-modal[hidden]{
display:none;
}

.caja-modal{
background:white;
border-radius:18px;
padding:22px 20px;
max-width:380px;
width:100%;
max-height:88vh;
overflow-y:auto;
}

.caja-modal h3{
font-size:16px;
color:var(--color-marca);
margin:0 0 14px;
}

.foto-preview{
width:84px;
height:84px;
border-radius:50%;
object-fit:cover;
background:var(--color-marca-suave);
margin:0 auto 12px;
display:block;
}

.foto-preview[hidden]{
display:none;
}

.acciones-modal{
display:flex;
gap:8px;
margin-top:10px;
}

.acciones-modal .btn{ flex:1; }

.aviso-kiosko{
border:2px dashed var(--color-marca-suave3);
background:var(--color-marca-fondo);
}

.aviso-kiosko a.btn{
display:inline-block;
width:auto;
}

/* ===================================================
   PANTALLA DE CÓDIGO (biometrico.html) — pensada para
   quedarse abierta en una tablet en la entrada.
=================================================== */

body.modo-kiosko{
padding:0;
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(160deg,var(--color-marca-fondo) 0%,var(--color-marca-fondo2) 45%,var(--color-marca-fondo3) 100%);
}

.kiosko{
width:100%;
max-width:480px;
min-height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:32px 24px;
text-align:center;
}

.kiosko[hidden]{
display:none;
}

.kiosko-logo{
max-width:150px;
max-height:76px;
object-fit:contain;
margin-bottom:12px;
}

.kiosko-marca{
font-size:15px;
font-weight:700;
color:var(--color-marca-texto-suave2);
letter-spacing:.5px;
margin-bottom:6px;
}

.kiosko-titulo{
font-size:22px;
font-weight:800;
color:var(--color-marca);
margin-bottom:28px;
}

.kiosko-visor{
width:100%;
max-width:320px;
background:white;
border:3px solid var(--color-marca-suave2);
border-radius:18px;
padding:18px 16px;
font-size:34px;
font-weight:800;
letter-spacing:6px;
color:#3a2e3a;
text-align:center;
min-height:56px;
margin-bottom:22px;
box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.kiosko-visor.vacio{
color:#d9b8ca;
letter-spacing:normal;
font-size:16px;
font-weight:600;
}

.kiosko-numpad{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
width:100%;
max-width:320px;
}

.tecla-numpad{
padding:20px 0;
font-size:26px;
font-weight:700;
color:#3a2e3a;
background:white;
border:2px solid var(--color-marca-suave);
border-radius:16px;
cursor:pointer;
transition:background .1s ease, transform .08s ease;
font-family:inherit;
}

.tecla-numpad:active{
background:var(--color-marca-suave);
transform:scale(.96);
}

.tecla-numpad.tecla-confirmar{
background:var(--color-marca);
color:white;
border-color:var(--color-marca);
}

.tecla-numpad.tecla-confirmar:active{ background:var(--color-marca-oscuro); }

.tecla-numpad.tecla-borrar{
font-size:18px;
color:var(--color-marca-texto-suave);
}

.kiosko-error{
color:var(--color-peligro);
font-weight:700;
font-size:14px;
min-height:20px;
margin-top:16px;
}

.kiosko-salir{
margin-top:30px;
font-size:11.5px;
color:#d9b8ca;
text-decoration:none;
background:none;
border:none;
cursor:pointer;
font-family:inherit;
}

/* -------- tarjeta de bienvenida (tras marcar) -------- */

.kiosko-bienvenida{
width:100%;
max-width:340px;
display:flex;
flex-direction:column;
align-items:center;
}

.kiosko-bienvenida .foto-bienvenida{
width:150px;
height:150px;
border-radius:50%;
object-fit:cover;
background:var(--color-marca-suave);
border:5px solid white;
box-shadow:0 10px 26px rgba(0,0,0,.15);
margin-bottom:20px;
}

.kiosko-bienvenida .foto-bienvenida.vacia{
display:flex;
align-items:center;
justify-content:center;
font-size:56px;
}

.kiosko-bienvenida .mensaje-bienvenida{
font-size:26px;
font-weight:800;
color:var(--color-marca);
line-height:1.25;
}

.kiosko-bienvenida .detalle-bienvenida{
font-size:14px;
font-weight:600;
color:#8a6b81;
margin-top:8px;
}

.kiosko-bienvenida.error .mensaje-bienvenida{
color:var(--color-peligro);
font-size:22px;
}

@keyframes apareceBienvenida{
from{ opacity:0; transform:scale(.9); }
to{ opacity:1; transform:scale(1); }
}

.kiosko-bienvenida{
animation:apareceBienvenida .25s ease;
}

/* -------- botones "¿eres tú?" antes de marcar entrada -------- */

.kiosko-botones-confirmacion{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
width:100%;
max-width:340px;
margin-top:8px;
}

.kiosko-botones-confirmacion .tecla-numpad{
padding:22px 8px;
font-size:16px;
}

/* Tablet de una EMPRESA: Entrada / Salida, grandes para verse a distancia.
   La sugerida va rellena con el color de marca; igual hay que tocar una. */
.kiosko-botones-tipo{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
width:100%;
max-width:560px;
margin-top:8px;
}
.kiosko-botones-tipo .boton-tipo{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:10px;
min-height:150px;
padding:24px 12px;
font-size:34px;
font-weight:800;
border-width:3px;
border-color:var(--color-marca-suave3);
color:var(--color-marca-oscuro);
}
.kiosko-botones-tipo .icono-tipo{ font-size:46px; line-height:1; }
.kiosko-botones-tipo .boton-tipo.sugerido{
background:var(--color-marca);
border-color:var(--color-marca);
color:white;
box-shadow:0 8px 24px rgba(0,0,0,.16);
}
.kiosko-botones-tipo .boton-tipo.sugerido:active{ background:var(--color-marca-oscuro); }
.etiqueta-sugerido{
font-size:13px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
padding:4px 12px;
border-radius:999px;
background:rgba(255,255,255,.25);
}
.boton-tipo:not(.sugerido) .etiqueta-sugerido{ visibility:hidden; }
.kiosko-botones-confirmacion.solo-cancelar{ grid-template-columns:1fr; max-width:560px; }
@media (max-width:480px){
.kiosko-botones-tipo .boton-tipo{ min-height:120px; font-size:26px; }
}

/* -------- Portal de Alumnos: selector de hijos + cabecera de alumno -------- */

.selector-alumnas{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-bottom:18px;
}

.chip-alumna{
border:2px solid var(--color-marca-suave);
background:white;
color:var(--color-marca-texto-suave);
border-radius:999px;
padding:8px 16px;
font-family:inherit;
font-size:13px;
font-weight:700;
cursor:pointer;
transition:background .15s, color .15s, border-color .15s;
}

.chip-alumna:hover{ border-color:var(--color-marca); }

.chip-alumna.activo{
background:var(--color-marca);
border-color:var(--color-marca);
color:white;
}

.cabecera-alumna{
display:flex;
align-items:center;
gap:14px;
}

.cabecera-alumna .foto-preview{
width:64px;
height:64px;
margin:0;
flex-shrink:0;
}

.cabecera-alumna .foto-miniatura.vacia{
width:64px;
height:64px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:26px;
color:var(--color-marca);
background:var(--color-marca-suave);
flex-shrink:0;
}

@media (max-width:520px){
.barra-superior{ flex-direction:column; align-items:flex-start; }
.tarjeta-item{ flex-direction:column; align-items:flex-start; }
.tarjeta-item .acciones-item{ width:100%; }
}

/* ---- Módulos de academia (Fase 2): casillas, textos largos y avisos ---- */
textarea{ resize:vertical; min-height:90px; }
input[type="checkbox"]{ width:auto; margin:0; padding:0; accent-color:var(--color-marca); }
.opcion-check{ display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:14px; cursor:pointer; }
.texto-aviso{ white-space:pre-wrap; margin-top:6px; color:#3a2e3a; font-size:14px; }
.tarjeta-item.aviso-fijado{ border-color:var(--color-marca); }

/* ---- Fase 3: estados de mensualidad ---- */
.etiqueta-estado.parcial{ background:#fff3cd; color:#8a6100; }
.etiqueta-estado.exento{ background:#ececf1; color:#5b5b6b; }

/* ---- Tiempo real: lo que acaba de cambiar se resalta un momento ---- */
@keyframes rtResaltar{
from{ background-color:var(--color-marca-suave); box-shadow:0 0 0 2px var(--color-marca); }
to{ box-shadow:0 0 0 0 transparent; }
}
.rt-nuevo{ animation:rtResaltar 2.4s ease-out; }
@media (prefers-reduced-motion:reduce){
.rt-nuevo{ animation:none; }
}
/* Botón de un hermano con novedades (Portal) */
.chip-alumna.rt-novedad{ position:relative; border-color:var(--color-marca); }
.chip-alumna.rt-novedad::after{
content:"";
position:absolute;
top:-3px;
right:-3px;
width:10px;
height:10px;
border-radius:50%;
background:var(--color-marca);
border:2px solid white;
}

/* ---- Menú lateral del panel (solo computadora, 1024 px o más) ---- */
.menu-lateral{ display:none; }
@media (min-width:1024px){
body.con-menu-lateral{ padding-left:296px; }
body.con-menu-lateral .panel{ scroll-margin-top:16px; }
body.con-menu-lateral .menu-lateral{
display:block;
position:fixed;
top:0;
left:0;
bottom:0;
width:272px;
overflow-y:auto;
background:white;
border-right:1px solid var(--color-marca-suave2);
box-shadow:2px 0 12px rgba(60,20,45,.04);
padding:20px 12px 32px;
z-index:40;
}
.menu-lateral-titulo{ font-weight:800; font-size:15px; color:var(--color-marca-oscuro); padding:4px 10px 14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.menu-lateral-subtitulo{ margin-top:12px; padding:16px 10px 6px; border-top:1px solid var(--color-marca-suave2); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--color-marca-texto-suave2); }
.menu-lateral-lista{ list-style:none; margin:0; padding:0; }
.menu-lateral-item{ margin:1px 0; }
.menu-lateral-fila{ display:flex; align-items:center; gap:6px; border-radius:10px; padding-right:4px; }
.menu-lateral-fila:hover{ background:var(--color-marca-fondo2); }
.menu-lateral-fila a{ flex:1; min-width:0; display:block; padding:8px 10px; font-size:14px; font-weight:600; color:#3a2e3a; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.menu-lateral-item.activo > .menu-lateral-fila{ background:var(--color-marca-suave); box-shadow:inset 3px 0 0 var(--color-marca); }
.menu-lateral-item.activo > .menu-lateral-fila a{ color:var(--color-marca-oscuro); }
.menu-lateral-desplegar{ width:auto; margin:0; padding:4px 6px; border:none; background:transparent; color:var(--color-marca-texto-suave); font-size:12px; cursor:pointer; }
.menu-lateral-subs{ list-style:none; margin:2px 0 6px 16px; padding:0 0 0 8px; border-left:2px solid var(--color-marca-suave2); }
.menu-lateral-subs a{ display:block; padding:5px 8px; border-radius:8px; font-size:13px; color:var(--color-marca-texto-suave); text-decoration:none; }
.menu-lateral-subs a:hover{ background:var(--color-marca-fondo2); }
.menu-lateral-punto{ flex-shrink:0; width:9px; height:9px; border-radius:50%; background:var(--color-marca); }
.menu-lateral-numero{ flex-shrink:0; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--color-marca); color:white; font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
}

/* ===================================================
   MODO MANTENIMIENTO (bio-modulos-mantenimiento.js) y MODO DUEÑA
   La pantalla tapa todo con el logo y el color del cliente
   (--mant-color); el aviso de arriba (.mant-banner) avisa del
   mantenimiento programado.
=================================================== */
.mant-pantalla{
--mant-color:var(--color-marca);
position:fixed;
inset:0;
z-index:1000;
overflow-y:auto;
display:flex;
align-items:center;
justify-content:center;
padding:24px 16px;
background:linear-gradient(160deg,#fff 0%,color-mix(in srgb,var(--mant-color) 10%,#fff) 100%);
}
html.mant-activo, html.mant-activo body{ overflow:hidden; }
.mant-caja{
max-width:440px;
width:100%;
text-align:center;
background:white;
border-radius:20px;
padding:32px 24px;
box-shadow:0 10px 40px rgba(60,20,45,.10);
border-top:6px solid var(--mant-color);
}
.mant-logo{ max-width:160px; max-height:90px; object-fit:contain; margin:0 auto 12px; display:block; }
.mant-nombre{ margin:0 0 8px; font-size:22px; color:var(--mant-color); overflow-wrap:anywhere; }
.mant-icono{ font-size:44px; margin:8px 0; }
.mant-mensaje{ font-size:17px; font-weight:600; margin:8px 0; white-space:pre-line; overflow-wrap:anywhere; }
.mant-regreso{ color:var(--color-marca-texto-suave); margin:6px 0 0; }
.mant-regreso:empty{ display:none; }
.mant-acciones{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:18px; }
.mant-acciones:empty{ display:none; }
.mant-acciones .btn{ width:auto; }
.mant-banner{
border:2px solid #e0a020;
background:#fff8e6;
border-radius:14px;
padding:12px 14px;
margin:0 0 14px;
font-size:14px;
line-height:1.45;
}
.franja-duena{
background:#2f2a3a;
color:white;
border-radius:12px;
padding:10px 14px;
margin:0 0 14px;
font-size:13px;
line-height:1.45;
}
.franja-duena strong{ color:#ffd479; }

/* Saldo anterior y saldo a favor (cierre del año, mensualidades) */
.tarjeta-item.saldo-anterior{ border-left:4px solid #e0a020; }
.tarjeta-item.saldo-a-favor{ border-left:4px solid #2e9e5b; }
.detalle-saldo{ margin:4px 0 0; padding-left:18px; font-size:13px; color:var(--color-marca-texto-suave); }
.detalle-saldo li{ margin:1px 0; }
.stat-nota{ font-size:12px; font-weight:600; color:var(--color-marca-texto-suave); margin-top:4px; }
/* Cuadro de pago por transferencia (portal): sin el espacio de los mensajes vacíos */
.caja-pago-manual .mensaje-error:empty, .caja-pago-manual .mensaje-exito:empty{ display:none; }

/* Mi cuenta → Seguridad y privacidad (plegado, discreto) */
.bloque-seguridad{ margin-top:22px; padding-top:12px; border-top:1px solid var(--color-marca-suave2); }
.bloque-seguridad summary{ cursor:pointer; font-size:13px; font-weight:600; color:var(--color-marca-texto-suave); }
.bloque-seguridad .ayuda{ margin:8px 0 6px; }
.lista-accesos{ margin:0; padding-left:18px; font-size:12.5px; color:var(--color-marca-texto-suave); }
.lista-accesos li{ margin:3px 0; }

/* Firma "Assist · by MDA Systems": chica, gris suave, sin competir con la
   marca del cliente. No va en dueno.html. */
.firma-sistema{ font-size:11px; line-height:1.4; color:#aaa1a8; text-align:center; letter-spacing:.01em; }
.firma-sistema strong{ font-weight:700; color:#8f8590; }
.firma-sistema a{ color:inherit; text-decoration:none; }
.firma-icono{ width:14px; height:14px; vertical-align:-3px; margin-right:5px; }
.firma-portal, .firma-panel{ margin:26px 0 2px; }
.tarjeta-login .firma-portal{ margin:18px 0 0; }
.firma-tablet{ position:fixed; right:14px; bottom:10px; z-index:5; font-size:10.5px; opacity:.85; pointer-events:none; }
@media (min-width:1024px){
  /* Computadora: al pie del menú lateral. */
  body.con-menu-lateral .firma-panel{ position:fixed; left:0; bottom:0; width:272px; margin:0; padding:10px 12px 14px; background:white; border-right:1px solid var(--color-marca-suave2); z-index:41; }
  body.con-menu-lateral .menu-lateral{ padding-bottom:60px; }
}

/* Logo de Assist (el sistema): solo donde todavía no se sabe el cliente
   (inicio de sesión del panel, portal sin enlace) y en dueno.html. Con
   cliente, solo la firma de abajo: el cliente siempre es la marca principal. */
.tarjeta-login .logo-sistema-login{ display:block; width:168px; max-width:70%; height:auto; margin:0 auto 16px; }
.barra-superior .logo-sistema-encabezado{ height:30px; width:auto; flex-shrink:0; }

/* dueno.html: botones del encabezado (correo de prueba y Salir). */
.barra-superior .botones-encabezado{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }