/* Marcadas — estilos del marcador, el panel, el portal y la plataforma. Sin dependencias.
   Estilo: minimalista y claro (suizo). Todo color sale de las variables de
   :root; ningún componente lleva un color escrito a mano. Contrastes medidos:
   texto normal ≥ 4.5:1 y bordes de controles ≥ 3:1, en claro y en oscuro. */

/* La fuente va DENTRO de la app (public/vendor, la copia scripts/copiar-vendor.mjs):
   el marcador tiene que verse igual sin internet, y la política de seguridad
   (CSP) no deja cargar nada de otro sitio. Es la misma familia de nezpos.com:
   SF Pro en los aparatos de Apple, Hanken Grotesk en los demás (un solo
   archivo variable de 35 KB para todos los grosores). */
@font-face {
  font-family: 'Hanken';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/vendor/fuentes/hanken-grotesk-latin.woff2') format('woff2');
}

/* LOS COLORES: los de NezPos (nezme-web/sitios/nezpos.com/DESIGN.md).
   Perla de día, noche en el marcador, e iris como el ÚNICO color de acción.
   Entrada = verde y salida = iris, siempre con su ícono y su palabra. */
:root {
  /* Superficies */
  --fondo: #f3f4f9;          /* perla */
  --superficie: #ffffff;
  --superficie-2: #eceef5;
  --borde: rgb(16 20 44 / 0.09);   /* separadores (decorativos) */
  --borde-control: #8a91a6;        /* el borde de un campo: 3:1 contra el blanco */
  /* Texto */
  --texto: #0d1020;          /* tinta */
  --texto-suave: #4e5569;
  /* Acción: iris */
  --primario: #4b55e6;
  --primario-hover: #3a43d1;
  --primario-texto: #ffffff;
  --primario-suave: #e6e8fd;
  /* Significados */
  --entrada: #0b7a56;        /* bien-hondo */
  --salida: #4b55e6;         /* iris */
  --malo: #c4252f;
  --malo-suave: #fde8e9;
  --atento: #9a5a00;         /* ámbar hondo, para texto */
  --atento-suave: #fff1d9;
  --bien-suave: #ddf7ec;
  /* Forma y profundidad */
  --radio-chico: 10px;
  --radio: 16px;
  --radio-grande: 22px;
  --radio-control: 12px;
  --sombra: 0 1px 2px rgb(13 16 32 / 0.04), 0 4px 14px rgb(13 16 32 / 0.05);
  --sombra-alta: 0 24px 60px rgb(13 16 32 / 0.18), 0 4px 12px rgb(13 16 32 / 0.06);
  /* El agua de neztime tiene un trabajo: «presente, en turno, salió bien». Para texto sobre claro, la oscura. */
  --agua: #19c3b1;
  --agua-texto: #0b7a6e;
  /* La pastilla elegida de un segmentado o de las pestañas. */
  --sombra-control: 0 1px 2px rgb(13 16 32 / 0.08), 0 4px 12px rgb(13 16 32 / 0.08);
  --anillo-foco: 0 0 0 4px color-mix(in srgb, var(--primario) 28%, transparent);
  /* Movimiento: el «ease-out» de NezPos; se apaga con «reducir movimiento» */
  --rapido: 160ms;
  --normal: 260ms;
  --curva: cubic-bezier(0.23, 1, 0.32, 1);
  /* La curva de los cajones y hojas que entran desde una orilla (como iOS). */
  --curva-cajon: cubic-bezier(0.32, 0.72, 0, 1);
  --fuente: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Hanken', system-ui, 'Segoe UI', Roboto, sans-serif;
  --fuente-titulo: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Hanken', system-ui, 'Segoe UI', Roboto, sans-serif;
  /* La noche: UN solo casi-negro y su tarjeta (panel oscuro, terminal clásico y nuevo). */
  --noche: #07080d;
  --noche-2: #11131c;
  /* El amarillo de «active el sonido» y de la flecha del giro (no es el ámbar de atención). */
  --aviso-voz: #ffd84d;
  --aviso-voz-latido: #ffe88a;
  color-scheme: light;
}

/* NOCHE: el modo oscuro del aparato y, siempre, el marcador en reposo.
   Cada regla de oscuro va dos veces: con el sistema en oscuro (salvo que la
   persona haya elegido «Claro») y con «Oscuro» elegido a mano (data-tema en
   <html>, lo pone js/tema.js antes de pintar). */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #07080d;
    --superficie: #11131c;
    --superficie-2: #191c28;
    --borde: rgb(255 255 255 / 0.10);
    --borde-control: #646b84;
    --texto: #f4f5fa;
    --texto-suave: #a9afc2;
    --primario: #8e99ff;
    --primario-hover: #a3acff;
    --primario-texto: #0b0d18;
    --primario-suave: #1f2347;
    --entrada: #4ade9e;
    --salida: #8e99ff;
    --malo: #ff8a8f;
    --malo-suave: #3a1418;
    --atento: #ffb547;
    --atento-suave: #33240b;
    --bien-suave: #0e3326;
    --sombra: 0 1px 2px rgb(0 0 0 / 0.5);
    --sombra-alta: 0 24px 60px rgb(0 0 0 / 0.6);
    --sombra-control: 0 1px 2px rgb(0 0 0 / 0.5);
    --agua-texto: #19c3b1;
    color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
    --fondo: #07080d;
    --superficie: #11131c;
    --superficie-2: #191c28;
    --borde: rgb(255 255 255 / 0.10);
    --borde-control: #646b84;
    --texto: #f4f5fa;
    --texto-suave: #a9afc2;
    --primario: #8e99ff;
    --primario-hover: #a3acff;
    --primario-texto: #0b0d18;
    --primario-suave: #1f2347;
    --entrada: #4ade9e;
    --salida: #8e99ff;
    --malo: #ff8a8f;
    --malo-suave: #3a1418;
    --atento: #ffb547;
    --atento-suave: #33240b;
    --bien-suave: #0e3326;
    --sombra: 0 1px 2px rgb(0 0 0 / 0.5);
    --sombra-alta: 0 24px 60px rgb(0 0 0 / 0.6);
    --sombra-control: 0 1px 2px rgb(0 0 0 / 0.5);
    --agua-texto: #19c3b1;
    color-scheme: dark;
  }

* { box-sizing: border-box; }
html, body {
  font-variant-numeric: tabular-nums; margin: 0; }
body {
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.5 var(--fuente);
  /* Cifras de ancho fijo en todo: el dinero y las horas no «bailan» al refrescarse. */
  font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { font-family: var(--fuente-titulo); line-height: 1.1; margin: 0 0 0.5rem; letter-spacing: -0.025em; text-wrap: balance; }
h1 { font-weight: 750; letter-spacing: -0.03em; }
h2, h3 { font-weight: 700; }
a { color: var(--primario); text-underline-offset: 0.15em; }
@media (hover: hover) and (pointer: fine) { a:hover { color: var(--primario-hover); } }
.cargando-inicial { padding: 2rem; text-align: center; color: var(--texto-suave); }
.sutil { color: var(--texto-suave); font-size: 0.92em; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fuerte { font-weight: 700; }

/* Foco visible en TODO lo que se puede tocar, solo con teclado (no al tocar). */
:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }
a:focus-visible, button:focus-visible, summary:focus-visible { border-radius: var(--radio-chico); }

/* Íconos (js/iconos.js): siguen el color del texto y no se encogen. */
.icono { flex: none; display: inline-block; vertical-align: -0.15em; }

/* ---------- Botones y formularios ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 44px; padding: 0.55rem 1rem;
  border: 1px solid var(--borde); border-radius: 999px;
  background: var(--superficie); color: var(--texto);
  font: inherit; font-weight: 650; letter-spacing: -0.005em; cursor: pointer; text-decoration: none;
  touch-action: manipulation;
  transition: background-color var(--rapido) var(--curva), border-color var(--rapido) var(--curva),
    color var(--rapido) var(--curva), transform var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
}
@media (hover: hover) { .boton:hover { border-color: var(--borde-control); background: var(--superficie-2); } }
/* Al apretar se hunde en 160 ms; al soltar vuelve más rápido (100 ms): la respuesta del sistema es ágil. */
.boton:active:not(:disabled) { transform: scale(0.98); transition-duration: var(--rapido); }
.boton:not(:active) { transition-duration: var(--rapido), var(--rapido), var(--rapido), 100ms, var(--rapido); }
.boton:disabled { opacity: 0.5; cursor: not-allowed; }
/* El principal apagado: gris con letra legible (antes, blanco sobre morado claro casi no se leía). */
.boton.primario:disabled { opacity: 1; background: var(--superficie-2); color: var(--texto-suave); border-color: var(--borde); box-shadow: none; }
.boton.primario { background: var(--primario); color: var(--primario-texto); border-color: var(--primario); box-shadow: var(--sombra); }
.boton.primario:hover:not(:disabled) { background: var(--primario-hover); border-color: var(--primario-hover); }
.boton.peligro { color: var(--malo); border-color: color-mix(in srgb, var(--malo) 45%, transparent); }
.boton.peligro:hover:not(:disabled) { background: var(--malo-suave); border-color: var(--malo); }
.boton.chico { min-height: 36px; padding: 0.25rem 0.85rem; font-size: 0.9rem; }
/* Con el dedo, todo lo que se toca mide al menos 44 px (en la computadora los botones chicos siguen de 36):
   la regla va al final de la hoja (E-1); aquí solo que las ayudas se acomoden en su fila. */
@media (pointer: coarse) {
  .rev-ayuda > summary, .ter-ayuda > summary { display: flex; align-items: center; }
}
.boton.grande { min-height: 56px; font-size: 1.1rem; padding: 0.7rem 1.6rem; }
.boton.enorme { width: 100%; min-height: 84px; font-size: 1.6rem; font-weight: 750; letter-spacing: -0.02em; border: 0; color: #fff; border-radius: var(--radio-grande); box-shadow: var(--sombra); }
.boton.enorme.entrada { background: var(--entrada); }
.boton.enorme.salida { background: var(--salida); }
/* En oscuro, verde y azul son claros: el texto va oscuro para leerse. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .boton.enorme { color: #07080d; }
}
:root[data-tema="oscuro"] .boton.enorme { color: #07080d; }
.enlace {
  background: none; border: 0; color: var(--primario); font: inherit; font-weight: 600;
  text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; padding: 0.4rem; min-height: 44px;
}
@media (hover: hover) and (pointer: fine) { .enlace:hover { color: var(--primario-hover); } }
.fila-botones { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 0.8rem; }
.fila-botones.izquierda { justify-content: flex-start; }

.campo { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.9rem; text-align: left; }
.campo > span, .campo > .campo-titulo, .campo > label { font-size: 0.88rem; font-weight: 650; color: var(--texto); }
/* Lo que falta para el contrato: el campo resaltado, con «falta» al lado del rótulo. */
.campo.campo-falta > input { border-color: var(--atento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--atento) 30%, transparent); }
.campo.campo-falta > span::after { content: ' · falta'; color: var(--atento); font-weight: 700; }
.campo small { color: var(--texto-suave); font-size: 0.85rem; }
.campo .obligatorio, p .obligatorio { color: var(--malo); font-weight: 800; }
tr.fila-mala td, .tabla.apilable-ancho > tbody > tr.fila-mala { background: var(--malo-suave); }
.error-campo { color: var(--malo); font-weight: 650; }
.campo small.error-campo { color: var(--malo); font-weight: 650; }
.campo.con-error input, .campo.con-error select { border-color: var(--malo); box-shadow: 0 0 0 3px color-mix(in srgb, var(--malo) 22%, transparent); }
/* Teléfono: el país angosto y el número al lado; también «escribir otro puesto». */
.telefono-con-pais { display: flex; gap: 0.5rem; }
.plantillas .telefono-con-pais > .boton { white-space: nowrap; }
.plantillas h3 { font-size: 0.95rem; margin: 1rem 0 0.4rem; color: var(--texto-suave); }
.plantillas-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.5rem; }
.plantilla-boton { position: relative; display: flex; }
.plantilla-boton > button:first-child { flex: 1; text-align: left; display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem 0.75rem; min-height: 56px;
  border: 1px solid var(--borde); border-radius: var(--radio-control); background: var(--superficie); color: var(--texto); font: inherit; cursor: pointer; transition: transform 120ms ease-out, border-color 120ms; }
@media (hover: hover) and (pointer: fine) { .plantilla-boton > button:first-child:hover { border-color: var(--primario); } }
.plantilla-boton > button:first-child:active { transform: scale(0.98); }
.plantilla-boton > button:first-child span { font-size: 0.85rem; color: var(--texto-suave); }
.plantilla-boton.propia > button:first-child { padding-right: 2.6rem; border-color: color-mix(in srgb, var(--primario) 40%, var(--borde)); }
.plantilla-boton .quitar { position: absolute; top: 4px; right: 4px; min-width: 36px; min-height: 36px; border: 0; background: none; font-size: 1.2rem; color: var(--texto-suave); border-radius: 999px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .plantilla-boton .quitar:hover { color: var(--malo); background: var(--malo-suave); } }
.plantilla-datos { background: color-mix(in srgb, var(--primario) 6%, transparent); border-radius: var(--radio-control); padding: 0.8rem 0.9rem 0.6rem; margin-bottom: 0.9rem; }
.chips-quitar { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chip-quitar { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.25rem 0.3rem 0.25rem 0.75rem; border-radius: 999px; background: var(--superficie-2, var(--fondo)); border: 1px solid var(--borde); font-size: 0.95rem; }
.chip-quitar button { min-width: 32px; min-height: 32px; border: 0; background: none; color: var(--texto-suave); font-size: 1.2rem; cursor: pointer; border-radius: 999px; }
@media (hover: hover) and (pointer: fine) { .chip-quitar button:hover { color: var(--malo); background: var(--malo-suave); } }
.telefono-con-pais > select { flex: 0 0 auto; width: auto; min-width: 7.2rem; }
.telefono-con-pais > input { flex: 1 1 auto; min-width: 0; }
/* Tipo de documento y número, juntos en una fila (en el teléfono, uno debajo del otro). */
.campo-doble { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 1rem; }
.rejilla > .ocupa-dos { grid-column: 1 / -1; }
@media (max-width: 640px) { .campo-doble { grid-template-columns: minmax(0, 1fr); } }
input, select, textarea {
  font: inherit; color: var(--texto); background: var(--superficie);
  border: 1px solid var(--borde-control); border-radius: var(--radio-control); padding: 0.55rem 0.8rem; min-height: 44px; width: 100%;
  transition: border-color var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--texto-suave) 92%, transparent); }
@media (hover: hover) and (pointer: fine) { input:hover, select:hover, textarea:hover { border-color: var(--texto-suave); } }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primario); box-shadow: var(--anillo-foco); }
input:disabled, select:disabled, textarea:disabled { background: var(--superficie-2); color: var(--texto-suave); cursor: not-allowed; }
input[aria-invalid='true'], select[aria-invalid='true'] { border-color: var(--malo); }
input[type='checkbox'], input[type='radio'] { width: auto; min-height: auto; accent-color: var(--primario); box-shadow: none; }
input[type='checkbox']:focus-visible, input[type='radio']:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }
/* Safari del iPhone le da a las fechas un ancho propio que no respeta la
   columna: «Desde» y «Hasta» quedaban una encima de la otra. */
input[type='date'], input[type='time'] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; display: block; }
input[type='date']::-webkit-date-and-time-value, input[type='time']::-webkit-date-and-time-value { text-align: left; }
body.con-ventana { overflow: hidden; }
.entrada-grande { font-size: 2rem; text-align: center; font-variant-numeric: tabular-nums; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 0 1rem; }

/* Avisos: el fondo y un borde fino del mismo tono alrededor (no solo el color:
   el borde se ve también impreso o en blanco y negro). */
.aviso { padding: 0.7rem 0.9rem; border-radius: var(--radio-control); margin: 0.6rem 0; border: 1px solid transparent; overflow-wrap: anywhere; }
.aviso.malo, .kiosko-error { background: var(--malo-suave); color: var(--malo); border-color: color-mix(in srgb, var(--malo) 35%, transparent); }
.aviso.bien { background: var(--bien-suave); border-color: color-mix(in srgb, var(--entrada) 35%, transparent); }
.aviso.info { background: var(--primario-suave); color: var(--texto); border-color: color-mix(in srgb, var(--primario) 30%, transparent); }
.aviso.atento, .aviso-amarillo { background: var(--atento-suave); color: var(--atento); padding: 0.65rem 0.9rem; border-radius: var(--radio-control); border: 1px solid color-mix(in srgb, var(--atento) 35%, transparent); }
.kiosko-error { padding: 0.6rem 0.8rem; border-radius: var(--radio-control); border: 1px solid color-mix(in srgb, var(--malo) 35%, transparent); }
.aviso .icono, .aviso-amarillo .icono { margin-right: 0.35rem; }

.etiqueta {
  display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1rem 0.5rem; border-radius: 999px;
  background: var(--superficie-2); color: var(--texto-suave); font-size: 0.78rem; font-weight: 650; margin-left: 0.3rem;
  white-space: nowrap; line-height: 1.5;
}
.etiqueta.entrada { background: var(--bien-suave); color: var(--entrada); }
.etiqueta.salida { background: color-mix(in srgb, var(--salida) 13%, var(--superficie)); color: var(--salida); }
.etiqueta.malo { background: var(--malo-suave); color: var(--malo); }
.etiqueta.atento { background: var(--atento-suave); color: var(--atento); }
.etiqueta.larga { white-space: normal; border-radius: 0.6rem; margin-left: 0; display: inline-block; padding: 0.25rem 0.6rem; }
.estado { font-weight: 700; text-transform: capitalize; }
.estado-pendiente { color: var(--atento); }
.estado-aprobado { color: var(--entrada); }
.estado-rechazado { color: var(--malo); }

/* Quien pide «reducir movimiento» en su aparato: nada se desplaza; los fundidos cortos y las
   esperas (como la de «Cargando») se quedan. */
@media (prefers-reduced-motion: reduce) {
  /* Menos movimiento, no cero: las animaciones (que mueven) se acaban de una; las transiciones
     se quedan cortas para que un cambio de color u opacidad se siga entendiendo. */
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 120ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
}

/* ---------- Marcador (kiosko) ---------- */
/* La tablet de la entrada está encendida todo el día: en reposo va en NOCHE
   (descansa la vista y gasta menos pantalla), aunque el aparato esté en modo
   claro. Al escanear una cara pasa a blanco (body.con-luz, más abajo) para que
   la pantalla alumbre; la APK además sube el brillo al 100 %. */
body.kiosko:not(.con-luz) {
  --fondo: var(--noche);
  --superficie: var(--noche-2);
  --superficie-2: #191c28;
  --borde: rgb(255 255 255 / 0.10);
  --borde-control: #646b84;
  --texto: #f4f5fa;
  --texto-suave: #a9afc2;
  --primario: #8e99ff;
  --primario-hover: #a3acff;
  --primario-texto: #0b0d18;
  --primario-suave: #1f2347;
  --entrada: #4ade9e;
  --salida: #8e99ff;
  --malo: #ff8a8f;
  --malo-suave: #3a1418;
  --atento: #ffb547;
  --atento-suave: #33240b;
  --bien-suave: #0e3326;
  --sombra: 0 1px 2px rgb(0 0 0 / 0.5);
  --sombra-alta: 0 24px 60px rgb(0 0 0 / 0.6);
  color-scheme: dark;
  background: var(--noche);
}
body.kiosko:not(.con-luz) .boton.enorme { color: var(--noche); }
body.kiosko { min-height: 100dvh; }
.kiosko-pantalla { display: flex; flex-direction: column; min-height: 100dvh; }
.kiosko-cabecera {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.8rem 1rem; background: var(--superficie); border-bottom: 1px solid var(--borde);
}
.kiosko-titulo { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; min-height: 48px; display: flex; flex-direction: column; justify-content: center; }
.kiosko-empresa { font-weight: 700; font-size: 1.15rem; line-height: 1.2; }
.kiosko-aparato { color: var(--texto-suave); font-size: 0.85rem; }
.reloj { text-align: right; }
.reloj-hora { font-size: clamp(1.3rem, 5vw, 1.8rem); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.reloj-fecha { color: var(--texto-suave); font-size: 0.85rem; }
.reloj-fecha::first-letter { text-transform: uppercase; }
.kiosko-cuerpo { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1rem; }
.kiosko-centro { max-width: 560px; margin: 0 auto; padding: 3rem 1rem; text-align: center; }
.kiosko-centro .pasos { text-align: left; display: inline-block; }

/* Marcar desde el teléfono: una columna centrada. */
.telefono { max-width: 560px; margin: 0 auto; padding: 0 1rem 2rem; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.telefono-cabecera {
  align-self: stretch; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: calc(0.8rem + env(safe-area-inset-top)) 0 0.6rem; border-bottom: 1px solid var(--borde); overflow-wrap: break-word;
}
.telefono .camara { width: min(100%, 420px); }

/* La página principal: tres caminos grandes, fáciles de tocar. */
.inicio { max-width: 560px; margin: 0 auto; padding: 2.5rem 1rem 3rem; }
.inicio h1 { margin-bottom: 0.2rem; overflow-wrap: anywhere; }
.inicio-opciones { display: grid; gap: 0.8rem; margin: 1.4rem 0; }
.inicio-opcion {
  display: flex; align-items: center; gap: 0.9rem; padding: 1rem 1.1rem; border-radius: var(--radio-grande);
  background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra);
  color: var(--texto); text-decoration: none; min-height: 76px;
  transition: transform var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}
.inicio-opcion .ta-icono { margin: 0; flex: none; background: var(--superficie-2); color: var(--texto-suave); }
.inicio-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.inicio-opcion b { font-size: 1.15rem; letter-spacing: -0.015em; }
.inicio-texto > span { color: var(--texto-suave); font-size: 0.95rem; }
.inicio-opcion > .icono:last-child { color: var(--texto-suave); }
@media (hover: hover) and (pointer: fine) { .inicio-opcion:hover { border-color: var(--primario); transform: translateY(-1px); } }
.inicio-opcion.principal { background: var(--primario); border-color: var(--primario); }
.inicio-opcion.principal b, .inicio-opcion.principal .inicio-texto > span, .inicio-opcion.principal > .icono:last-child { color: var(--primario-texto); }
.inicio-opcion.principal .ta-icono { background: rgb(255 255 255 / 0.18); color: var(--primario-texto); }
.inicio-marcador { color: var(--texto-suave); }
.inicio-marcador summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.4rem 0; }
.inicio-marcador summary b { color: var(--primario); }
.inicio-marcador summary > .icono { flex: none; color: var(--primario); transition: transform var(--rapido) var(--curva); }
.inicio-marcador[open] summary > .icono { transform: rotate(90deg); }

.camara { position: relative; width: min(92vw, 520px); aspect-ratio: 4 / 3; border-radius: var(--radio-grande); overflow: hidden; background: #000; }
.camara.camara-chica { width: min(40vw, 180px); }
/* En la prueba de vida la persona tiene que verse, pero debajo van la flecha,
   la instrucción y «No soy yo»: la cámara se achica según el alto de la
   pantalla para que todo quepa sin desplazar. */
.camara.camara-vida { width: min(92vw, 520px, max(220px, (100dvh - 380px) * 4 / 3)); }
.camara video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.guia {
  position: absolute; left: 50%; top: 50%; width: 46%; height: 72%; transform: translate(-50%, -50%);
  border: 4px dashed rgb(255 255 255 / 0.65); border-radius: 50%; pointer-events: none; transition: border-color 0.2s;
}
.guia-atento { border-color: #fbbf24; border-style: solid; }
.guia-malo { border-color: #f87171; border-style: solid; }
.camara-chica .guia { display: none; }
.kiosko-aviso { font-size: 1.5rem; font-weight: 700; text-align: center; margin: 0; min-height: 2.2em; }
.tono-atento { color: var(--atento); }
.tono-malo { color: var(--malo); font-size: 1.2rem; }
.tono-bueno { color: var(--entrada); }
.guia-bueno { border-color: #4ade80; border-style: solid; }

/* Prueba de vida: la flecha grande y el paso, debajo de la cámara. */
.vida { width: min(96vw, 560px); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; }
.vida-quien { margin: 0; color: var(--texto-suave); overflow-wrap: anywhere; }
.vida-flecha { font-size: 3.5rem; line-height: 1; }

.tarjeta-grande {
  width: min(96vw, 560px); background: var(--superficie); border-radius: var(--radio-grande); box-shadow: var(--sombra);
  padding: 1.4rem; text-align: center; border: 1px solid var(--borde);
}
.tarjeta-grande { border-radius: var(--radio-grande); }
.tarjeta-grande.malo .icono-grande, .tarjeta-grande.malo h2 { color: var(--malo); }
.saludo { margin: 0; color: var(--texto-suave); font-size: 1.1rem; }
.nombre-persona { font-size: 2rem; margin: 0.2rem 0 0.4rem; }
.icono-grande { display: flex; justify-content: center; line-height: 1; color: var(--entrada); }
.hora-grande { font-size: 2.6rem; font-weight: 800; margin: 0.2rem 0; font-variant-numeric: tabular-nums; }
.dias-semana { list-style: none; padding: 0; margin: 0.6rem 0; text-align: left; }
.dias-semana li { padding: 0.45rem 0; border-bottom: 1px solid var(--borde); }
.dias-semana li.apagado { color: var(--texto-suave); }
.dia-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 0.3rem 1rem; flex-wrap: wrap; }
.dia-nombre { font-weight: 600; }
.dia-pago { font-variant-numeric: tabular-nums; font-weight: 700; }
.dia-detalle-kiosko { color: var(--texto-suave); font-size: 0.92em; margin-top: 0.15rem; }
.dia-detalle-kiosko .etiqueta { white-space: normal; }
.tabla-semana { width: 100%; border-collapse: collapse; margin: 0.6rem 0; text-align: left; font-size: 0.95rem; }
.tabla-semana td { padding: 0.35rem 0.3rem; border-bottom: 1px solid var(--borde); text-transform: none; }
.tabla-semana td:first-child::first-letter { text-transform: uppercase; }
.tabla-semana tr.apagado { color: var(--texto-suave); }
.resumen { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1rem; text-align: left; margin: 0.8rem 0; }
.resumen dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.lista-vales { list-style: none; padding: 0; margin: 0 0 1rem; text-align: left; }
.lista-vales li { display: flex; gap: 0.8rem; justify-content: space-between; padding: 0.35rem 0; border-bottom: 1px solid var(--borde); }

/* En una tablet el marcador se ve desde un paso de distancia: todo más grande. */
@media (min-width: 700px) {
  body.kiosko { font-size: 19px; }
  .kiosko-cabecera { padding: 1rem 1.6rem; }
  .kiosko-empresa { font-size: 1.4rem; }
  .reloj-hora { font-size: 2.4rem; }
  .camara { width: min(80vw, 640px); }
  .camara.camara-chica { width: 260px; }
  .tarjeta-grande { width: min(92vw, 680px); padding: 2rem; }
  .nombre-persona { font-size: 2.6rem; }
  .boton.enorme { min-height: 104px; font-size: 2rem; }
  .boton.grande { min-height: 64px; font-size: 1.25rem; }
  .kiosko-cuerpo .boton:not(.enorme):not(.grande) { min-height: 56px; font-size: 1.1rem; padding: 0.7rem 1.4rem; }
  .kiosko-aviso { font-size: 1.9rem; }
  .hora-grande { font-size: 3.4rem; }
}

/* ---------- Panel ---------- */
.admin-marco {
  display: grid; grid-template-columns: 248px 1fr; min-height: 100dvh;
  /* El fondo de la columna del menú llega hasta abajo aunque la página sea larga. */
  background: linear-gradient(to right, var(--superficie) 247px, var(--borde) 247px 248px, transparent 248px);
}
.menu {
  background: var(--superficie); border-right: 1px solid var(--borde); padding: 1rem 0.75rem;
  position: sticky; top: 0; height: 100dvh; overflow: auto;
  display: flex; flex-direction: column; justify-content: flex-start; align-self: start; gap: 0.2rem;
}
.menu-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 0 0.35rem 0.9rem; }
.menu-marca { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
.menu-marca b { display: block; font-weight: 750; font-size: 1rem; letter-spacing: -0.015em; line-height: 1.2; overflow-wrap: anywhere; }
.menu-marca small { display: block; font-weight: 600; font-size: 0.78rem; color: var(--texto-suave); }
/* El ícono de NezTime (el mismo de la app): ya trae su forma y su sombra. */
.menu-logo {
  flex: none; display: block; width: 36px; height: 36px;
  background: url("/icono.svg") center / contain no-repeat;
}
.menu-grupo { display: flex; flex-direction: column; gap: 0.1rem; margin-top: 0.6rem; }
.menu-grupo-nombre { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-suave); padding: 0.3rem 0.75rem; }
.menu a, .menu-salir {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.75rem; border-radius: var(--radio-control); min-height: 44px;
  color: var(--texto); text-decoration: none; font: inherit; font-weight: 600; background: none; border: 0; cursor: pointer; text-align: left;
  transition: background-color var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.menu a .icono, .menu-salir .icono { color: var(--texto-suave); transition: color var(--rapido) var(--curva); }
.menu-texto { flex: 1; min-width: 0; }
@media (hover: hover) and (pointer: fine) { .menu a:hover, .menu-salir:hover { background: var(--superficie-2); } }
.menu a.activo { background: var(--primario-suave); color: var(--primario); }
.menu a.activo .icono { color: var(--primario); }
.contador { background: var(--atento); color: #fff; border-radius: 999px; padding: 0 0.5rem; font-size: 0.78rem; font-weight: 750; line-height: 1.5; min-width: 1.5em; text-align: center; font-variant-numeric: tabular-nums; animation: contador-late 220ms var(--curva); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .contador { color: #07080d; }
}
:root[data-tema="oscuro"] .contador { color: #07080d; }
.menu-pie { margin-top: auto; padding-top: 0.8rem; border-top: 1px solid var(--borde); display: flex; flex-direction: column; gap: 0.1rem; }
.menu a.menu-yo { gap: 0.6rem; padding: 0.5rem 0.6rem; }
.menu-yo b { display: block; font-size: 0.92rem; line-height: 1.2; overflow-wrap: anywhere; }
.menu-yo small { display: block; font-size: 0.78rem; font-weight: 500; color: var(--texto-suave); }
.menu-pie .version { color: var(--texto-suave); padding: 0.4rem 0.75rem 0; font-size: 0.75rem; }
.boton-icono { padding: 0; width: 40px; min-height: 40px; }
/* Abajo queda espacio para que el círculo de los atajos no tape la última fila al final de la página. */
.contenido { padding: 1.6rem 2rem 6rem; max-width: 1320px; width: 100%; min-width: 0; }
.cabecera-pagina { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
.cabecera-pagina h1 { margin: 0; font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); }
.titulo-con-tutorial { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; }
/* «Ver el tutorial» junto al título: chico y discreto, que no compita con la acción de la pantalla. */
.ver-tutorial { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 32px; padding: 0.2rem 0.7rem; border: 1px solid var(--borde-control); border-radius: 999px; background: transparent; color: var(--texto-suave); font: inherit; font-size: 0.85rem; cursor: pointer; transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease; }
.ver-tutorial:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .ver-tutorial:hover { color: var(--primario); border-color: var(--primario); } }
@media (pointer: coarse) { .ver-tutorial { min-height: 44px; } }
.cerrar-cajon, .barra-abajo, .velo-cajon, .mostrar-menu { display: none; }
/* El menú escondido (iPad y computadora): la columna desaparece y queda un
   botón flotante arriba a la izquierda para traerlo de vuelta. */
.admin-marco.menu-oculto { grid-template-columns: 0 1fr; background: none; }
.admin-marco.menu-oculto .menu { display: none; }
.admin-marco.menu-oculto .mostrar-menu { display: inline-flex; position: fixed; top: calc(0.6rem + env(safe-area-inset-top)); left: 0.6rem; z-index: 35; box-shadow: var(--sombra); background: var(--superficie); }
.admin-marco.menu-oculto .contenido { padding-top: 3.4rem; grid-column: 2; }

@media (max-width: 900px) {
  /* Teléfono y tablet: la barra de las tres pantallas más usadas va ABAJO,
     al alcance del pulgar, y el resto del menú sale como un cajón desde la
     izquierda. Arriba no queda nada fijo: toda la pantalla es para el
     contenido. */
  .admin-marco { display: block; background: none; }
  .menu {
    /* align-self vuelve a stretch: con el «start» de la computadora, Chrome
       (Android) hace el cajón tan alto como su contenido y no se desplaza. */
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; width: min(86vw, 330px); height: auto; align-self: stretch;
    overflow-y: auto; overscroll-behavior: contain;
    border-right: 1px solid var(--borde); box-shadow: 0 0 40px rgb(0 0 0 / 0.25);
    padding: calc(1rem + env(safe-area-inset-top)) 0.8rem calc(1rem + env(safe-area-inset-bottom));
    /* Se desliza al abrir Y al cerrar: la visibilidad se apaga recién cuando terminó de salir. */
    transform: translateX(-105%); transition: transform 240ms var(--curva-cajon), visibility 0s linear 240ms; visibility: hidden;
  }
  .menu.abierto { transform: none; visibility: visible; transition: transform 240ms var(--curva-cajon), visibility 0s; }
  .cerrar-cajon { display: inline-flex; flex-shrink: 0; }
  .ocultar-menu, .mostrar-menu { display: none !important; }
  .admin-marco.menu-oculto { display: block; }
  .admin-marco.menu-oculto .menu { display: flex; }
  .admin-marco.menu-oculto .contenido { padding-top: 1rem; }
  .velo-cajon { display: block; position: fixed; inset: 0; z-index: 39; background: rgb(0 0 0 / 0.45); animation: velo-entra 200ms var(--curva) both; }
  .contenido { padding: 1rem 1rem calc(5.5rem + env(safe-area-inset-bottom)); }
  .barra-abajo {
    /* En la tablet los cuatro botones no se estiran a lo ancho de toda la
       pantalla: quedan juntos al centro, del tamaño de un dedo. */
    display: grid; grid-template-columns: repeat(4, minmax(0, 150px)); justify-content: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--superficie); border-top: 1px solid var(--borde); box-shadow: 0 -2px 12px rgb(0 0 0 / 0.06);
    padding: 0.25rem 0.25rem calc(0.25rem + env(safe-area-inset-bottom));
  }
  .barra-boton {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem;
    min-height: 56px; padding: 0.3rem 0.2rem; border: 0; border-radius: var(--radio-control); background: none; font: inherit;
    font-size: 0.85rem; font-weight: 600; color: var(--texto-suave); text-decoration: none; cursor: pointer;
  }
  .barra-boton.activo { color: var(--primario); background: var(--primario-suave); }
  .barra-boton .contador { position: absolute; top: 0.2rem; left: calc(50% + 0.5rem); }
}

.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: 1.2rem 1.3rem; box-shadow: var(--sombra); margin-bottom: 1rem; }
.tarjeta h2 { font-size: 1.1rem; }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 0.8rem; margin-bottom: 1rem; }
.cifra { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 0.8rem 1rem; }
/* El monto se achica según el ancho de SU cuadro (no de la pantalla), para
   que nunca se corte, haya 3 o 4 cuadros por fila. */
.cifra { container-type: inline-size; }
.cifra .valor { font-size: clamp(0.95rem, 12.5cqi, 1.6rem); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cifra .rotulo { color: var(--texto-suave); font-size: 0.88rem; }
.cifra.atento { border-color: var(--atento); }
/* Horas escritas completas («37 horas 35 minutos»): pueden pasar a dos renglones. */
.cifra .valor.valor-texto { white-space: normal; font-size: clamp(0.95rem, 9cqi, 1.3rem); }

.tabla-envoltura { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Un campo de texto dentro de una tabla (los tipos de ausencia): letra normal, para que el iPhone no haga zoom. */
.tabla td > input:not([type]), .tabla td > input[type='text'] { font-size: 1rem; min-width: 11rem; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.tabla th, .tabla td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: middle; }
.tabla th { font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-suave); background: var(--superficie-2); }
.tabla tr.anulada td { text-decoration: line-through; color: var(--texto-suave); }
.tabla tr.clic { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .tabla tr.clic:hover td { background: var(--superficie-2); } }
.tabla tfoot td { font-weight: 800; border-top: 2px solid var(--borde); }
.tabla .boton { white-space: nowrap; }

/* TABLA → TARJETAS. En una pantalla angosta, cada fila se muestra como una
   tarjeta con TODOS sus datos, cada uno con su nombre (el `data-label` de la
   celda). Antes se escondían columnas o había que desplazar la tabla de lado:
   eso deja datos fuera de la vista y la columna fija quedaba encima de las
   demás. Así no se esconde, no se abrevia y no se encima nada.
   - `.apilable`: tarjetas en el teléfono y el iPad vertical (hasta 900 px).
   - `.apilable-ancho`: siempre en tarjetas compactas (la planilla, que tiene 11 columnas y no entra ni en una computadora). */
.solo-tarjeta { display: none; }
.celda-pago { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.3rem 0.6rem; }
@media (max-width: 1399px) { /* tarjetas en tablet y teléfono; desde 1400 px, la tabla entera (el iPad Pro acostado, 1366, se pasaba 3 px) */
  .tabla.apilable-ancho thead { display: none; }
  .tabla.apilable-ancho, .tabla.apilable-ancho > tbody, .tabla.apilable-ancho > tfoot, .tabla.apilable-ancho > tbody > tr, .tabla.apilable-ancho > tfoot > tr { display: block; width: 100%; }
  .tabla.apilable-ancho > tbody > tr, .tabla.apilable-ancho > tfoot > tr {
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-control);
    padding: 0.5rem 0.9rem; margin-bottom: 0.7rem;
  }
  .tabla.apilable-ancho > tbody > tr > td, .tabla.apilable-ancho > tfoot > tr > td {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.3rem 1rem;
    border: 0; border-bottom: 1px solid var(--borde); padding: 0.45rem 0; text-align: right;
    white-space: normal; overflow-wrap: anywhere;
  }
  .tabla.apilable-ancho > tbody > tr > td > *, .tabla.apilable-ancho > tfoot > tr > td > * { min-width: 0; }
  .tabla.apilable-ancho > tbody > tr > td:last-child, .tabla.apilable-ancho > tfoot > tr > td:last-child { border-bottom: 0; }
  .tabla.apilable-ancho > tbody > tr > td::before, .tabla.apilable-ancho > tfoot > tr > td::before {
    content: attr(data-label); font-weight: 600; color: var(--texto-suave); text-align: left;
  }
  .tabla.apilable-ancho > tbody > tr > td:empty, .tabla.apilable-ancho > tfoot > tr > td:empty { display: none; }
  .tabla.apilable-ancho > tbody > tr > td.titulo-fila, .tabla.apilable-ancho > tfoot > tr > td.titulo-fila {
    display: block; text-align: left; font-size: 1.05rem; font-weight: 700;
  }
  .tabla.apilable-ancho > tbody > tr > td.titulo-fila::before, .tabla.apilable-ancho > tfoot > tr > td.titulo-fila::before { content: none; }
  .tabla.apilable-ancho > tbody > tr.dia-detalle { padding: 0.6rem; margin-top: -0.4rem; }
  .tabla.apilable-ancho > tbody > tr.dia-detalle > td { display: block; text-align: left; border: 0; }
  .tabla.apilable-ancho > tbody > tr.dia-detalle > td::before { content: none; }
  .tabla.apilable-ancho .fila-destacada { font-size: 1.1rem; }
  .tabla.apilable-ancho .solo-tarjeta { display: block; font-weight: 400; font-size: 0.85rem; margin-top: 0.2rem; }
  .tabla.apilable-ancho tr.anulada td { text-decoration: none; }
  .tabla.apilable-ancho tr.anulada td.titulo-fila { text-decoration: line-through; }
}
/* TARJETAS COMPACTAS: en vez de un renglón por dato (una persona de la
   planilla ocupaba casi una pantalla), los datos van en dos o tres columnas,
   cada uno con su nombre arriba. El título, lo que se paga y los botones van
   a lo ancho. */
@media (max-width: 1399px) {
  .tabla.apilable-ancho > tbody > tr:not(.dia-detalle), .tabla.apilable-ancho > tfoot > tr {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); column-gap: 1rem;
  }
  .tabla.apilable-ancho > tbody > tr:not(.dia-detalle) > td, .tabla.apilable-ancho > tfoot > tr > td {
    flex-direction: column; align-items: flex-start; justify-content: flex-start; text-align: left; gap: 0;
    border-bottom: 0; padding: 0.3rem 0;
  }
  .tabla.apilable-ancho > tbody > tr > td::before, .tabla.apilable-ancho > tfoot > tr > td::before { font-size: 0.8rem; }
  .tabla.apilable-ancho > tbody > tr > td.titulo-fila, .tabla.apilable-ancho > tfoot > tr > td.titulo-fila { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  /* En el teléfono, lo que se paga y los botones van a lo ancho. */
  .tabla.apilable-ancho td.ancho-completo { grid-column: 1 / -1; }
  .tabla.apilable-ancho td.fila-destacada { flex-direction: row; justify-content: space-between; align-items: center; border-top: 1px solid var(--borde); padding-top: 0.45rem; }
  .tabla.apilable-ancho .celda-pago { justify-content: flex-start; }
}
@media (max-width: 900px) {
  .tabla.apilable thead { display: none; }
  .tabla.apilable, .tabla.apilable > tbody, .tabla.apilable > tfoot, .tabla.apilable > tbody > tr, .tabla.apilable > tfoot > tr { display: block; width: 100%; }
  .tabla.apilable > tbody > tr, .tabla.apilable > tfoot > tr {
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-control);
    padding: 0.5rem 0.9rem; margin-bottom: 0.7rem;
  }
  .tabla.apilable > tbody > tr > td, .tabla.apilable > tfoot > tr > td {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.3rem 1rem;
    border: 0; border-bottom: 1px solid var(--borde); padding: 0.45rem 0; text-align: right;
    white-space: normal; overflow-wrap: anywhere;
  }
  .tabla.apilable > tbody > tr > td > *, .tabla.apilable > tfoot > tr > td > * { min-width: 0; }
  .tabla.apilable > tbody > tr > td:last-child, .tabla.apilable > tfoot > tr > td:last-child { border-bottom: 0; }
  .tabla.apilable > tbody > tr > td::before, .tabla.apilable > tfoot > tr > td::before {
    content: attr(data-label); font-weight: 600; color: var(--texto-suave); text-align: left;
  }
  .tabla.apilable > tbody > tr > td:empty, .tabla.apilable > tfoot > tr > td:empty { display: none; }
  .tabla.apilable > tbody > tr > td.titulo-fila, .tabla.apilable > tfoot > tr > td.titulo-fila {
    display: block; text-align: left; font-size: 1.05rem; font-weight: 700;
  }
  .tabla.apilable > tbody > tr > td.titulo-fila::before, .tabla.apilable > tfoot > tr > td.titulo-fila::before { content: none; }
  .tabla.apilable > tbody > tr.dia-detalle { padding: 0.6rem; margin-top: -0.4rem; }
  .tabla.apilable > tbody > tr.dia-detalle > td { display: block; text-align: left; border: 0; }
  .tabla.apilable > tbody > tr.dia-detalle > td::before { content: none; }
  .tabla.apilable .fila-destacada { font-size: 1.1rem; }
  .tabla.apilable .solo-tarjeta { display: block; font-weight: 400; font-size: 0.85rem; margin-top: 0.2rem; }
  .tabla.apilable tr.anulada td { text-decoration: none; }
  .tabla.apilable tr.anulada td.titulo-fila { text-decoration: line-through; }
}
@media (max-width: 640px) {
  .cifras { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .cifra { padding: 0.6rem 0.7rem; }
}
.miniatura { width: 48px; height: 36px; object-fit: cover; border-radius: 6px; cursor: zoom-in; display: block; background: var(--superficie-2); }

.lista { list-style: none; margin: 0; padding: 0; }
.pasos-largos { padding-left: 1.2rem; }
.pasos-largos li { margin-bottom: 0.5rem; overflow-wrap: anywhere; }
.pasos-largos select { width: auto; margin-left: 0.4rem; }
code.comando { display: inline-block; background: var(--superficie-2); padding: 0.1rem 0.4rem; border-radius: 6px; user-select: all; }
.lugar { border: 1px solid var(--borde); border-radius: var(--radio-control); padding: 0.6rem 0.8rem; margin-bottom: 0.7rem; }
.campo-en-linea { margin: 0.2rem 0; flex: 1 1 260px; max-width: 380px; }
.lista > li { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; justify-content: space-between; align-items: center; padding: 0.7rem 0; border-bottom: 1px solid var(--borde); }

.filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 220px)); gap: 0.6rem; align-items: end; margin-bottom: 1rem; }
.filtros .campo { margin: 0; min-width: 0; }
@media (max-width: 640px) {
  /* Botones de acción en el teléfono: 44 px (lo mínimo para el dedo), con menos relleno a los lados para que entren más por renglón. */
  .contenido .fila-botones .boton:not(.grande):not(.enorme):not(.chico) { min-height: 44px; padding: 0.35rem 0.8rem; }
  .contenido h1 { font-size: 1.65rem; }
  .contenido h2 { font-size: 1.1rem; }
}
@media (max-width: 640px) {
  /* En el teléfono, «Desde» y «Hasta» lado a lado y lo demás a lo ancho. */
  .filtros { grid-template-columns: 1fr 1fr; }
  .filtros .campo:nth-child(n + 3) { grid-column: 1 / -1; }
}

/* Hoy: quién está adentro, en dos columnas cuando hay ancho. */
.lista-dentro { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 1rem; }
.lista-dentro li { padding: 0.4rem 0; border-bottom: 1px solid var(--borde); }

/* Bitácora: un renglón por acción («Edgardo aprobó un vale · jueves…»). */
.lista-bitacora { list-style: none; margin: 0; padding: 0; }
.lista-bitacora li { padding: 0.45rem 0; border-bottom: 1px solid var(--borde); overflow-wrap: anywhere; }
.lista-bitacora li:last-child { border-bottom: 0; }
.lista-bitacora .detalle-bitacora { font-size: 0.85rem; }

/* Colaboradores: un renglón por persona, con su pago en una línea. */
.lista-personas { list-style: none; margin: 0; padding: 0; }
.lista-personas li {
  display: flex; align-items: center; justify-content: space-between; gap: 0.4rem 0.9rem; flex-wrap: wrap;
  padding: 0.55rem 0; border-bottom: 1px solid var(--borde); cursor: pointer;
}
.lista-personas li:last-child { border-bottom: 0; }
.lp-datos { min-width: 0; flex: 1 1 240px; }
.lista-personas a { text-decoration: none; color: var(--texto); }
@media (hover: hover) and (pointer: fine) { .lista-personas li:hover a b { color: var(--primario); } }
.lp-detalle { font-size: 0.88rem; }

/* Portal del trabajador: días de la semana y lista de pagos. */
.dias-portal { list-style: none; margin: 0; padding: 0; }
.dias-portal li { padding: 0.45rem 0; border-bottom: 1px solid var(--borde); }
.dias-portal li:last-child { border-bottom: 0; }
.dias-portal li.apagado { color: var(--texto-suave); }
.dp-fila { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.8rem; }
.lista-pagos { list-style: none; margin: 0; padding: 0; }
.lista-pagos li { border-bottom: 1px solid var(--borde); }
.lista-pagos li:last-child { border-bottom: 0; }
.lp-fila { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.3rem 1rem; padding: 0.6rem 0; color: inherit; text-decoration: none; min-height: 44px; }
@media (hover: hover) and (pointer: fine) { .lp-fila:hover b { color: var(--primario); } }
.lp-datos { display: flex; flex-direction: column; min-width: 0; flex: 1 1 220px; }
.lp-monto { display: flex; align-items: center; gap: 0.5rem; }

/* Marcadas: una fila compacta por marcada. */
.lista-marcadas { list-style: none; margin: 0; padding: 0; }
.lista-marcadas li { border-bottom: 1px solid var(--borde); }
.lista-marcadas li:last-child { border-bottom: 0; }
/* Toda la fila es un botón: abre la foto grande, el detalle y «Anular». */
.lm-fila {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0.7rem; align-items: center; width: 100%;
  padding: 0.45rem 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .lm-fila:hover .lm-linea b { color: var(--primario); } }
.lista-marcadas li.anulada .lm-linea { text-decoration: line-through; opacity: 0.6; }
.lm-miniatura { width: 52px; height: 52px; object-fit: cover; border-radius: var(--radio-chico); display: block; }
.lm-sin-foto {
  display: flex; align-items: center; justify-content: center; text-align: center; width: 52px; height: 52px;
  border-radius: var(--radio-chico); background: var(--superficie-2); color: var(--texto-suave); font-size: 0.75rem; line-height: 1.1;
}
.lm-datos { display: flex; flex-direction: column; min-width: 0; }
.lm-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.5rem; }
.lm-hora { font-variant-numeric: tabular-nums; font-weight: 600; }
.lm-como { font-size: 0.88rem; overflow-wrap: anywhere; }
.lm-alerta { display: flex; gap: 0.35rem; align-items: flex-start; color: var(--malo); font-size: 0.88rem; font-weight: 600; overflow-wrap: anywhere; }
.lm-alerta .icono { margin-top: 0.15em; }
.con-icono { display: flex; gap: 0.4rem; align-items: center; }
.con-icono .icono { color: var(--entrada); }
.pestanas { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pestanas button { border-radius: 999px; }
.pestanas button.activa { background: var(--primario); color: var(--primario-texto); border-color: var(--primario); }

.velo { position: fixed; inset: 0; background: rgb(0 0 0 / 0.55); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 50; }
.ventana { background: var(--superficie); border-radius: var(--radio-grande); padding: 1.3rem; width: min(560px, 100%); max-height: min(92dvh, calc(100dvh - 4rem)); overflow: auto; box-shadow: var(--sombra-alta); }
.ventana img.foto-grande { width: 100%; border-radius: var(--radio-chico); }
.aviso-descartar { position: sticky; top: -1.3rem; z-index: 2; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; margin: -.2rem 0 .9rem; padding: .7rem .8rem; border-radius: var(--radio-chico); background: var(--malo-suave); border: 1px solid color-mix(in srgb, var(--malo) 45%, transparent); font-weight: 600; }
.aviso-descartar .fila-botones { margin: 0; justify-content: flex-end; }

.enrolar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 720px) { .enrolar { grid-template-columns: 1fr; } }
.enrolar .camara { width: 100%; }
.enrolar .escaner-registro { --ancho-camara: min(100%, 400px); margin: 0 auto; }
.registro-instruccion {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0 0 0.7rem; min-height: 2.5em;
  font-size: clamp(1.35rem, 2.6vmin + 0.6rem, 2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; text-align: center; color: var(--texto);
}
.registro-instruccion.tono-bueno { color: var(--entrada); }
.registro-instruccion .icono { flex: none; }
.registro-nota { margin: 0.5rem 0 0; min-height: 1.5em; text-align: center; color: var(--atento); font-weight: 600; font-size: 1.05rem; }
.muestras { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* El botón va DEBAJO de la foto, no encima. */
.muestra { display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem; width: 96px; }
.muestra img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radio-chico); display: block; background: var(--superficie-2); }
.muestra button { width: 100%; }
.muestra-origen { text-align: center; }
.ter-actualizar { display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; align-items: center; margin: 0.4rem 0; }
.ter-viejas { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; justify-content: space-between; }
/* Una muestra que no parece de su dueño: la foto con borde (rojo si parece de otra persona, ámbar si salió mal). */
.muestra-dudosa img, .muestra-dudosa .muestra-vacia { outline: 3px solid var(--atento); outline-offset: 1px; }
.muestra-dudosa.duda-otra img, .muestra-dudosa.duda-otra .muestra-vacia { outline-color: var(--malo); }
.aviso-dudosas summary { cursor: pointer; min-height: 44px; line-height: 1.5; }
.aviso-dudosas summary .icono { vertical-align: -0.2em; color: var(--atento); margin-right: 0.25rem; }
.lista-dudosas { margin: 0.5rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; }
.lista-dudosas a { color: inherit; }
.muestra-vacia { width: 96px; height: 96px; border-radius: var(--radio-chico); background: var(--superficie-2); display: flex; align-items: center; justify-content: center; color: var(--texto-suave); font-size: 0.75rem; text-align: center; }

.dia-detalle { background: var(--superficie-2); }
/* El detalle de una persona no puede ensanchar la tabla entera: en el
   teléfono empujaba «A pagar» fuera de la pantalla. Si no cabe, se desplaza él. */
.detalle-bitacora { overflow-wrap: anywhere; }
.dia-detalle td { font-size: 0.88rem; }
.token-caja { font-family: ui-monospace, monospace; word-break: break-all; background: var(--superficie-2); padding: 0.6rem; border-radius: 8px; }

/* ---------- Boletas para imprimir ---------- */
.boletas { display: grid; gap: 1rem; }
.boleta { border: 1px solid #999; border-radius: 8px; padding: 1rem; break-inside: avoid; background: #fff; color: #000; }
.boleta h2 { font-size: 1.1rem; margin-bottom: 0.2rem; }
.boleta table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.boleta td, .boleta th { padding: 0.2rem 0; vertical-align: top; text-align: left; }
.boleta td.num, .boleta th.num { text-align: right; padding-left: 0.6rem; }
.boleta .sutil { color: #444; font-size: 0.85em; }
.boleta-dias { margin: 0.6rem 0; }
.boleta-dias th { font-size: 0.8rem; border-bottom: 1px solid #999; }
.boleta-dias td { border-bottom: 1px solid #ddd; }
.boleta-cuentas tr.boleta-total td { font-weight: 700; border-top: 1px solid #999; }
/* En pantallas angostas, que ninguna columna se coma a la otra: anchos fijos y el texto largo (la referencia del pago) se parte. */
.boleta-dias, .boleta-cuentas { table-layout: fixed; }
/* Día 28 %, su horario 30 % y 14 % para cada número (Horas, Ganó, Lleva ganado): «L 12,625.00» cabe entero. */
.boleta-dias th:first-child, .boleta-dias td:first-child { width: 28%; }
.boleta-dias th:nth-child(2), .boleta-dias td:nth-child(2) { width: 30%; }
.boleta-dias th.num { white-space: normal; }
.boleta-cuentas td:first-child { width: 58%; }
.boleta td.num { white-space: normal; }

.boleta .firma { margin-top: 2.2rem; display: flex; justify-content: space-between; gap: 2rem; }
.boleta .firma div { flex: 1; border-top: 1px solid #000; text-align: center; padding-top: 0.2rem; font-size: 0.85rem; }

@media print {
  .menu, .no-imprimir, .barra-abajo, .velo-cajon { display: none !important; }
  .admin-marco { display: block; background: none; }
  .contenido { padding: 0; max-width: none; }
  body { background: #fff; color: #000; }
  /* Una boleta por media hoja, con su detalle por día: en dos columnas no
     entraba el horario. */
  .boletas { grid-template-columns: 1fr; gap: 0.6rem; }
  .boleta { page-break-inside: avoid; font-size: 11pt; }
}

.mayuscula-inicial::first-letter { text-transform: uppercase; }

/* ---------- La plataforma: página de venta, registro y consola del dueño ---------- */
.plataforma { background: var(--fondo); }
.plat { max-width: 1180px; margin: 0 auto; padding: 0 max(20px, env(safe-area-inset-left)) 3rem; }
.plat section { margin-top: clamp(2.5rem, 6vw, 5rem); scroll-margin-top: 5rem; }
.plat h1 { overflow-wrap: anywhere; }
/* La barra de arriba, como la de nezpos.com: la marca y «Probar gratis». */
.plat-barra {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.8rem 0; margin: 0 calc(-1 * max(20px, env(safe-area-inset-left)));
  padding-inline: max(20px, env(safe-area-inset-left));
  background: color-mix(in srgb, var(--fondo) 82%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--borde);
}
.plat-marca { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--fuente-titulo); font-weight: 750; font-size: 1.2rem; letter-spacing: -0.02em; color: var(--texto); text-decoration: none; }
.plat-barra-acciones { display: flex; align-items: center; gap: 0.4rem; }
/* La portada: el titular grande y apretado, y la vitrina del marcador al lado. */
.plat-portada {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  padding: clamp(1.5rem, 4.5vw, 3.5rem) 0 0;
}
.plat-portada h1 {
  font-size: clamp(2.4rem, 1.2rem + 3.6vw, 4.1rem); line-height: 1.02; letter-spacing: -0.04em; font-weight: 750; color: var(--texto); margin: 0 0 1rem; text-wrap: initial;
}
.plat-lema { font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.4rem); line-height: 1.4; letter-spacing: -0.01em; font-weight: 500; color: var(--texto-suave); margin: 0 0 1.4rem; max-width: 34rem; }
.plat-titulo { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); letter-spacing: -0.035em; line-height: 1.06; margin-bottom: 0.6rem; }
.plat-sub { color: var(--texto-suave); font-size: 1.1rem; margin: 0 0 1.4rem; }
.plat-rasgos { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.plat-rasgo { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: 1.4rem; box-shadow: var(--sombra); }
.plat-rasgo .ta-icono { background: var(--primario-suave); color: var(--primario); }
.plat-rasgo h3 { margin: 0 0 0.35rem; font-size: 1.12rem; letter-spacing: -0.02em; }
.plat-rasgo p { margin: 0; line-height: 1.5; }
@media (max-width: 860px) {
  .plat-portada { grid-template-columns: 1fr; }
}

/* LA VITRINA: el marcador dibujado, con la aurora (como la tarjeta de nezpos.com). */
.vitrina {
  position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 4 / 3.3; border-radius: 28px; background: #07080d; color: #f4f5fa;
  box-shadow: 0 30px 70px -40px rgb(13 16 32 / 0.55);
}
.vitrina::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(70% 60% at 0% 0%, rgb(75 85 230 / 0.5), transparent 70%), radial-gradient(60% 55% at 110% 25%, rgb(25 195 177 / 0.22), transparent 70%);
}
.vitrina-ejemplo { position: absolute; right: 14px; bottom: 10px; font-size: 0.7rem; color: rgb(244 245 250 / 0.6); letter-spacing: 0.02em; }
.vitrina-marcador { position: absolute; inset: 0; display: grid; grid-template-columns: 1.05fr 1fr; gap: 6%; padding: 8%; align-items: center; }
.vitrina .escaner.vitrina-camara { width: 100%; }
.vitrina .escaner-estado { font-size: clamp(0.62rem, 1.1vw, 0.8rem); }
.vitrina-saludo { margin: 0; font-weight: 700; letter-spacing: -0.02em; font-size: clamp(1rem, 2vw, 1.5rem); color: #c9cde0; }
.vitrina-detalle { margin: 0.4rem 0 0; color: #a9afc2; font-size: clamp(0.72rem, 1.2vw, 0.9rem); }
.vitrina-hora { font-family: var(--fuente-titulo); font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; margin-top: 0.4rem; font-variant-numeric: tabular-nums; }
.vitrina .pildora-red { --atento: #ffb547; font-size: clamp(0.6rem, 1.1vw, 0.78rem); margin-top: 0.9rem; }
.vitrina .escaner-ok .escaner-marco { animation: none; }
.plat-registro h3 { margin: 1.4rem 0 0.7rem; font-size: 1.1rem; letter-spacing: -0.02em; }
.plat-registro h3:first-child { margin-top: 0; }
.plat-direccion { display: flex; align-items: stretch; flex-wrap: wrap; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie); overflow: hidden; }
.plat-direccion input { flex: 1 1 8rem; min-width: 0; border: 0; border-radius: 0; }
.plat-direccion-fija:last-child { flex: 1 0 auto; }
.plat-direccion-fija { display: flex; min-height: 44px; align-items: center; padding: 0 0.6rem; background: var(--superficie-2); color: var(--texto-suave); font-size: 0.92rem; overflow-wrap: anywhere; }
.plat-ok { color: var(--entrada); font-weight: 600; overflow-wrap: anywhere; }
.plat-mal { color: var(--malo); font-weight: 600; }
.plat-casilla { display: flex; gap: 0.6rem; align-items: center; margin: 0.4rem 0 0.8rem; min-height: 44px; cursor: pointer; }
.plat-casilla input { width: 22px; height: 22px; flex: none; }
.plat-dominio { padding: 0.8rem; border-radius: var(--radio-chico); background: var(--superficie-2); margin-bottom: 0.8rem; }
.plat-dominio p { margin: 0; }
.plat-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.plat-ancho { width: 100%; }
.plat-listo { max-width: 720px; margin: 1rem auto; }
.plat-listo h1 { font-size: clamp(1.4rem, 5.5vw, 2rem); }
.plat-url { font-size: clamp(1.1rem, 4.5vw, 1.5rem); font-weight: 700; color: var(--primario); overflow-wrap: anywhere; margin: 0.2rem 0; }
.plat-pasos { padding-left: 1.3rem; line-height: 1.6; }
.plat-pie { margin-top: 2.5rem; text-align: center; }
.plat-entrar { max-width: 420px; }
.plat-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.8rem; margin-bottom: 0.4rem; }
.plat-cifras .tarjeta { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; }
.plat-cifras b { font-size: 1.6rem; }
.plat-datos { display: grid; gap: 0.35rem; margin: 0 0 0.4rem; }
.plat-datos div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.5rem; }
.plat-datos dt { color: var(--texto-suave); font-size: 0.9rem; }
.plat-datos dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .plat-direccion-fija:first-child { display: none; }
  .plat-direccion input { flex-basis: 100%; }
}
@media (max-width: 420px) {
  .plat-lista { grid-template-columns: 1fr; }
  .plat-datos div { grid-template-columns: 1fr; gap: 0; }
}

/* Historial de la cara de alguien (ficha del colaborador). */
.historial-cara { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 0.6rem; }
.historial-foto { display: flex; flex-direction: column; gap: 0.25rem; align-items: stretch; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; min-width: 0; }
.historial-foto img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radio-chico); background: var(--superficie-2); display: block; }
.historial-foto .etiqueta { align-self: flex-start; }
.historial-foto.anulada img { opacity: 0.45; }
.historial-fecha { font-size: 0.8rem; color: var(--texto-suave); line-height: 1.25; overflow-wrap: anywhere; }

/* La luz: mientras se escanea, todo blanco (también en modo oscuro), para
   que la pantalla alumbre la cara. */
body.con-luz {
  --fondo: #ffffff; --superficie: #ffffff; --superficie-2: #f3f4f9; --borde: rgb(16 20 44 / 0.09);
  --texto: #0d1020; --texto-suave: #4e5569; --atento: #9a5a00; --malo: #c4252f; --entrada: #0b7a56;
  --salida: #4b55e6; --primario: #4b55e6; --primario-texto: #ffffff; --primario-suave: #e6e8fd;
  color-scheme: light; background: #ffffff; color: var(--texto);
}
body.con-luz .kiosko-cabecera { background: #ffffff; border-color: transparent; }
body.con-luz .escaner-cara { box-shadow: 0 0 0 1px rgb(0 0 0 / 0.04); }
/* Ocupa su lugar debajo de la cabecera (no flota encima): fija tapaba el nombre
   de la empresa, el reloj y el «apretar 3 s» para entrar al panel, sobre todo
   en un teléfono (los de los camiones). */
.boton-voz {
  position: sticky; top: 0; width: 100%; z-index: 50; display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 56px; padding: 0.6rem 1rem; border: 0; background: var(--aviso-voz); color: #1a1a1a; font: inherit; font-size: 1.15rem; font-weight: 700;
  cursor: pointer; animation: voz-latido 2s ease-in-out 3;
}
@keyframes voz-latido { 50% { background: var(--aviso-voz-latido); } }
@media (prefers-reduced-motion: reduce) { .boton-voz { animation: none; } }

/* Sin internet: una franja arriba del marcador. */
.sin-red { background: var(--atento-suave); color: var(--atento); text-align: center; padding: 0.45rem 1rem; font-weight: 600; overflow-wrap: anywhere; }

/* Avisos por Telegram. */
.telegram-avisos { border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 0.4rem 0.8rem 0.6rem; margin: 0.6rem 0; }
.telegram-avisos legend { font-weight: 600; padding: 0 0.3rem; }
.telegram-casilla { display: flex; gap: 0.6rem; align-items: center; min-height: 44px; cursor: pointer; }
.telegram-casilla input { width: 20px; height: 20px; flex: none; }
.telegram-colaborador { border-top: 1px solid var(--borde); margin-top: 1rem; padding-top: 0.6rem; }
.telegram-colaborador h3 { margin: 0 0 0.4rem; }
.enlace-copiable { font-family: ui-monospace, monospace; font-size: 0.85rem; background: var(--superficie-2); padding: 0.5rem 0.7rem; border-radius: 8px; overflow-wrap: anywhere; user-select: all; }
.telegram-bot { border-top: 1px solid var(--borde); margin-top: 1rem; padding-top: 0.6rem; }
.telegram-bot h3 { margin: 0 0 0.4rem; }
.telegram-asistente { background: var(--superficie-2); border-radius: var(--radio-chico); padding: 0.8rem 1rem; margin-top: 0.6rem; }
.telegram-asistente ol { padding-left: 1.2rem; margin: 0 0 0.8rem; line-height: 1.55; }
.telegram-asistente li { margin-bottom: 0.3rem; overflow-wrap: anywhere; }
.estado-aparato { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.3rem; }

/* El horario de entrada (Ajustes y ficha del colaborador). */
.horario { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.5rem 0.8rem; margin: 0.4rem 0 0.8rem; }
.horario-dia { display: flex; flex-direction: column; gap: 0.2rem; }
.horario-dia span { font-size: 0.88rem; font-weight: 600; color: var(--texto-suave); text-transform: capitalize; }
.horario .enlace { grid-column: 1 / -1; justify-self: start; }
.horario-colaborador { border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 0.4rem 0.8rem 0.4rem; margin: 0.6rem 0 0.8rem; }
.horario-colaborador legend { font-weight: 600; padding: 0 0.3rem; }

/* Feriados y tramos del ISR (Ajustes) */
.lista-feriados { list-style: none; padding: 0; margin: 0.4rem 0; display: grid; gap: 0.3rem; }
.lista-feriados li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.8rem; padding: 0.4rem 0; border-bottom: 1px solid var(--borde); }
.feriado-fecha { flex: 0 1 14rem; text-transform: capitalize; }
.feriado-nombre { flex: 1 1 10rem; color: var(--texto-suave); }
.tramos-isr { display: grid; gap: 0.5rem; margin: 0.4rem 0; }
.tramo-isr { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem 0.8rem; padding: 0.5rem 0; border-bottom: 1px solid var(--borde); }
.tramo-isr .campo { flex: 1 1 9rem; margin: 0; }
.tramo-desde, .tramo-hasta { flex: 1 1 10rem; padding-bottom: 0.6rem; }

/* Pago por banco y su formato */
.pasos-banco, .pasos-app { margin: 0.4rem 0 0.8rem; padding-left: 1.4rem; display: grid; gap: 0.5rem; }
.columnas-banco { margin: 0.4rem 0; padding-left: 1.6rem; display: grid; gap: 0.3rem; }
.columnas-banco li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3rem 0.8rem; padding: 0.3rem 0; border-bottom: 1px solid var(--borde); }
.columnas-banco-botones { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.muestra-banco { background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 0.7rem 0.9rem; overflow-x: auto; white-space: pre; font-size: 0.9rem; max-width: 100%; }
.url-larga { overflow-wrap: anywhere; word-break: break-all; }

/* =============================================================================
   EL MARCADOR, como la tarjeta de nezpos.com: la cara en un recuadro con su
   marco a un lado, y lo que pasa al otro (saludo, la hora en cifra grande, la
   píldora de «Sin internet»). Acostado: lado a lado. Parado: uno sobre otro.
   Todo se mide contra el alto REAL de la pantalla (dvh), para que quepa sin
   desplazar en un teléfono, un iPad o una tablet grande.
   ============================================================================= */
.kiosko-pantalla { position: relative; isolation: isolate; }
/* La aurora: iris arriba a la izquierda y agua a la derecha, muy difuminadas. */
body.kiosko:not(.con-luz) .kiosko-pantalla::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vmax 42vmax at 8% -8%, rgb(75 85 230 / 0.34), transparent 70%),
    radial-gradient(48vmax 38vmax at 105% 18%, rgb(25 195 177 / 0.14), transparent 70%);
}
body.kiosko .kiosko-cabecera { background: transparent; border-bottom: 1px solid var(--borde); }
body.kiosko .kiosko-empresa { letter-spacing: -0.02em; }
body.kiosko .reloj-hora { font-size: clamp(1.1rem, 2.6vw, 1.6rem); letter-spacing: -0.02em; }

.marcador {
  --cabecera: 5.5rem;
  --margen: clamp(1rem, 3.5vmin, 3rem);
  flex: 1; display: grid; align-items: center; justify-content: center;
  gap: clamp(1rem, 4vmin, 3.5rem); padding: var(--margen);
  /* Acostado: la cámara a la izquierda, del alto disponible (sin pasar el 46 % del ancho). */
  grid-template-columns: auto minmax(0, 34rem);
  --ancho-camara: min(46vw, (100dvh - var(--cabecera) - 2 * var(--margen)) * 0.75);
}
.marcador-camara { display: flex; justify-content: center; }
/* ESCANEAR CON BOTÓN (como el NezKiosk): encima de la cámara en pausa, un círculo con el escáner y el texto abajo. */
.marcador-camara { position: relative; }
.escanear-boton { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; border: 0; border-radius: inherit; background: #141820; color: #f3f5f7; cursor: pointer; font: inherit; z-index: 3; }
.escanear-circulo { display: grid; place-items: center; width: 8rem; height: 8rem; border-radius: 50%; border: 3px solid #19c3b1; background: rgb(25 195 177 / 0.12); color: #19c3b1; transition: transform 100ms var(--curva), background-color 100ms var(--curva); }
.escanear-boton:active .escanear-circulo { transform: scale(0.96); background: rgb(25 195 177 / 0.25); transition-duration: var(--rapido); }
.escanear-texto { font-size: 1.35rem; font-weight: 700; }
.escanear-cancelar { justify-content: center; margin-top: 0.5rem; }
/* «Marcar desde el teléfono»: el círculo en el lugar de la cámara, del mismo tamaño. */
.escanear-telefono { position: relative; width: min(76vw, 44dvh * 0.75, 300px); aspect-ratio: 3 / 4; margin: 0 auto; border-radius: clamp(20px, 3vmin, 32px); }
@media (prefers-reduced-motion: reduce) { .escanear-circulo { transition: none; } }
.marcador-info { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(0.4rem, 1.2vmin, 0.8rem); text-align: left; }
.marcador-saludo {
  margin: 0; font-family: var(--fuente-titulo); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1;
  font-size: clamp(1.5rem, 3.4vmin + 0.6rem, 2.75rem); color: color-mix(in srgb, var(--texto) 88%, transparent); overflow-wrap: anywhere;
}
.marcador-detalle { margin: 0; color: var(--texto-suave); font-size: clamp(1rem, 1.5vmin + 0.6rem, 1.4rem); overflow-wrap: anywhere; }
.marcador .kiosko-aviso { font-size: clamp(1.05rem, 1.8vmin + 0.6rem, 1.6rem); font-weight: 600; text-align: inherit; min-height: 0; }
/* La prueba de vida y el registro: UNA instrucción, grande, que no cambia hasta cumplirse. */
.marcador .vida .kiosko-aviso.vida-instruccion { font-size: clamp(1.5rem, 3.2vmin + 0.6rem, 2.4rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.vida-nota { margin: 0.4rem 0 0; color: var(--atento); font-weight: 600; min-height: 1.5em; }
.marcador .kiosko-aviso.tono-neutro { color: var(--texto-suave); }
.marcador .hora-grande {
  margin: 0.1em 0 0; font-family: var(--fuente-titulo); font-weight: 800; letter-spacing: -0.045em; line-height: 0.95;
  font-size: clamp(3.5rem, 11vmin, 8.5rem); font-variant-numeric: tabular-nums; color: var(--texto); white-space: nowrap;
}
.hora-grande small { font-size: 0.28em; font-weight: 600; letter-spacing: 0; margin-left: 0.25em; color: var(--texto-suave); }
.pildora-red, .pildora-atento {
  display: inline-flex; align-items: center; gap: 0.5em; margin-top: 0.4rem; padding: 0.5em 1em; border-radius: 999px;
  background: color-mix(in srgb, var(--atento) 16%, transparent); color: var(--atento);
  font-weight: 700; font-size: clamp(0.85rem, 1vmin + 0.55rem, 1.1rem); line-height: 1.25;
}
.identificado { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(0.5rem, 1.4vmin, 0.9rem); width: 100%; }
.identificado .boton.enorme { margin-top: 0.4rem; gap: 0.6rem; }
.identificado .fila-botones { margin-top: 0; }
.enlaces-marcador .enlace { padding-left: 0; padding-right: 1rem; }
.vida { width: 100%; align-items: flex-start; text-align: left; }
.vida-flecha { line-height: 1; }
/* El vale y «Mi semana»: sin cámara, el contenido al centro y a lo ancho. */
.marcador-sin-camara { grid-template-columns: minmax(0, 44rem); }
.marcador-sin-camara .marcador-camara { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.marcador-sin-camara .marcador-info { align-items: stretch; }
.marcador-sin-camara .tarjeta-grande { width: 100%; }

/* Parado (iPad vertical, teléfono): la cámara arriba y el texto abajo, al centro. */
@media (orientation: portrait) {
  .marcador {
    grid-template-columns: minmax(0, 36rem); align-content: center;
    /* Lo que queda de alto, menos ~22 rem para el saludo, la hora y los botones. */
    --ancho-camara: min(80vw, max(11rem, (100dvh - var(--cabecera) - 2 * var(--margen) - 22rem) * 0.75));
  }
  .marcador-info, .identificado, .vida { align-items: center; text-align: center; }
  .marcador-info .fila-botones.izquierda { justify-content: center; }
  .enlaces-marcador .enlace { padding: 0.4rem 0.6rem; }
}
@media (min-width: 700px) {
  .marcador { --cabecera: 6.5rem; }
}

/* ---------- El escáner: la cámara en un recuadro, con su marco ---------- */
.escaner { position: relative; width: var(--ancho-camara, min(76vw, 340px)); aspect-ratio: 3 / 4; flex: none; }
.escaner.escaner-telefono { --ancho-camara: min(76vw, 44dvh * 0.75, 300px); margin: 0 auto; }
.escaner-cara {
  position: absolute; inset: 0; overflow: hidden; border-radius: clamp(20px, 3vmin, 32px);
  background: radial-gradient(70% 60% at 50% 40%, #2a3045, #11131c);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 30px 70px -40px rgb(0 0 0 / 0.7);
}
.escaner-silueta {
  position: absolute; left: 50%; top: 40%; width: 50%; transform: translate(-50%, -50%);
  fill: none; stroke: rgb(244 245 250 / 0.38); stroke-width: 2.5; stroke-linecap: round;
}
.escaner-cara video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform: scaleX(-1); display: block; }
.escaner-marco { position: absolute; left: 50%; top: 42%; width: 74%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); overflow: visible; transition: transform var(--normal) var(--curva); }
/* El anillo de rayitas (Face ID): tenue; en iris lo que lleva; en verde lo cumplido. */
.escaner-anillo .tic { stroke: rgb(244 245 250 / 0.42); stroke-width: 2.8; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: stroke 160ms var(--curva), stroke-width 160ms var(--curva); }
/* Sin sombras ni latidos en las rayitas (30/10/2026): el terminal (tablet barata) las redibujaba en cada
   cuadro mientras lee la cara; la rayita activa se distingue por el color y el grosor. */
.escaner-anillo .tic.activo { stroke: #ffffff; stroke-width: 3.6; }
.escaner-anillo .tic.lleno { stroke: #8e99ff; stroke-width: 3.6; }
.escaner-anillo .tic.hecho { stroke: #4ade9e; stroke-width: 3.6; }
.escaner-anillo .tic.malo { stroke: #ff8a8f; }


@keyframes tic-respira { 50% { opacity: 0.35; } }
.escaner-marco path { fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--rapido) var(--curva), stroke-dashoffset 120ms linear; }
.marco-base { stroke: rgb(244 245 250 / 0.38); }
.marco-avance, .marco-lado { stroke: #8e99ff; stroke-width: 4; stroke-dasharray: 100; }
.marco-lado.hecho { stroke: #4ade9e; stroke-dasharray: none; }
.escaner-ok .marco-base { stroke: #4ade9e; filter: drop-shadow(0 0 10px rgb(74 222 158 / 0.45)); }
.escaner-ok .escaner-marco { animation: marco-listo 220ms var(--curva); }
.escaner-mal .marco-base { stroke: #ff8a8f; }
.escaner-mal .escaner-cara { animation: escaner-no 300ms var(--curva); }
.escaner-estado {
  position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); white-space: nowrap;
  padding: 0.45em 1em; border-radius: 999px; background: rgb(7 8 13 / 0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #4ade9e; font-weight: 700; font-size: clamp(0.8rem, 1.6vmin + 0.4rem, 1.15rem);
}
.escaner-mal .escaner-estado { color: #ff8a8f; }
/* Buscando: el marco «respira», como esperando una cara. */

@keyframes marco-respira { 50% { opacity: 0.45; } }
@keyframes marco-listo { from { transform: translate(-50%, -50%) scale(0.94); } }
@keyframes escaner-no { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
/* Panel → Terminales: la guía de instalación. */
.guia-instalar summary { cursor: pointer; list-style-position: inside; }
.guia-instalar ol { margin: 0.8rem 0 0; padding-left: 1.3rem; display: grid; gap: 0.55rem; line-height: 1.45; }
/* Terminal: confirmar «No soy …» (para no usarlo como «Cancelar»). */
.no-soy-yo { margin-top: 0.6rem; padding: 0.8rem 1rem; border-radius: var(--radio-control); background: var(--superficie-2); border: 1px solid var(--borde); }
.no-soy-yo p { margin: 0 0 0.6rem; }
/* Terminal: lo que ayuda a que lo reconozca (después de dos intentos). */
.aviso-postura { margin: 0.8rem auto 0; padding: 0.6rem 1rem; border-radius: var(--radio-control); background: var(--atento-suave); color: var(--atento); font-weight: 700; max-width: 34rem; }
.revisar-instalacion { text-align: left; max-width: 34rem; margin: 0 auto; }
.revisar-instalacion h3 { margin: 1rem 0 0.3rem; }
.revisar-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; }
.revisar-lista li { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 1.05rem; }
.revisar-lista li.bien { color: var(--bien, inherit); }
.revisar-lista li.mal { color: var(--atento); font-weight: 600; }
.revisar-instalacion .boton { margin-top: 1rem; }
.kiosko-ayuda { margin-top: 0.8rem; padding: 0.9rem 1.1rem; border-radius: var(--radio-control); background: var(--superficie-2); border: 1px solid var(--borde); text-align: left; max-width: 34rem; }
.kiosko-ayuda-titulo { margin: 0 0 0.4rem; font-weight: 800; }
.kiosko-ayuda ol { margin: 0 0 0.5rem; padding-left: 1.3rem; display: grid; gap: 0.3rem; font-size: clamp(0.95rem, 1.4vmin + 0.5rem, 1.15rem); }
.kiosko-ayuda .sutil { margin: 0; font-size: 0.9rem; }
/* Prueba de vida: la flecha GRANDE encima del video, del lado del giro, que
   se desliza hacia afuera. Se ve aunque la voz no se escuche. */
.escaner-flecha {
  position: absolute; top: 42%; transform: translateY(-50%); width: 34%;
  display: flex; flex-direction: column; align-items: center; gap: 0.2em; pointer-events: none;
  color: #fff; font-weight: 900; letter-spacing: 0.02em; font-size: clamp(0.8rem, 1.6vmin + 0.4rem, 1.3rem);
  text-shadow: 0 2px 8px rgb(0 0 0 / 0.8);
}
.escaner-flecha svg { width: 100%; aspect-ratio: 1 / 1; overflow: visible; filter: drop-shadow(0 3px 8px rgb(0 0 0 / 0.75)); }
.escaner-flecha path { fill: none; stroke: var(--aviso-voz); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.escaner-flecha span { padding: 0.15em 0.55em; border-radius: 999px; background: rgb(7 8 13 / 0.6); }
.escaner-flecha-izq { left: 3%; align-items: flex-start; animation: flecha-izq 1.1s ease-in-out infinite; }
.escaner-flecha-der { right: 3%; align-items: flex-end; animation: flecha-der 1.1s ease-in-out infinite; }
@keyframes flecha-izq { 50% { transform: translate(-8%, -50%); } }
@keyframes flecha-der { 50% { transform: translate(8%, -50%); } }
.escaner-chico .escaner-flecha { display: none; }
@media (prefers-reduced-motion: reduce) { .escaner-flecha-izq, .escaner-flecha-der { animation: none; } }
/* Chico (el teléfono, mientras marca): solo la cara y el marco verde. */
.escaner.escaner-chico { --ancho-camara: 96px; }
.escaner-chico .escaner-estado { display: none; }
.escaner-chico .escaner-cara { border-radius: var(--radio); }
@media (prefers-reduced-motion: reduce) {
  .escaner, .escaner-marco, .escaner-marco path, .escaner-cara { animation: none !important; transition: none !important; }
}

/* ---------- Panel: piezas nuevas (fase B del rediseño) ---------- */
/* Avatar con iniciales: seis tonos tranquilos, siempre el mismo por persona. */
.avatar {
  flex: none; display: inline-grid; place-items: center; width: var(--lado, 40px); height: var(--lado, 40px); border-radius: 50%;
  font-size: calc(var(--lado, 40px) * 0.38); font-weight: 750; letter-spacing: -0.02em; line-height: 1; user-select: none;
}
.avatar-0 { background: #e6e8fd; color: #3a43d1; }
.avatar-1 { background: #ddf7ec; color: #0b6a4b; }
.avatar-2 { background: #fff1d9; color: #8a4f00; }
.avatar-3 { background: #fde8e9; color: #b0212b; }
.avatar-4 { background: #e2f6fb; color: #0e6680; }
.avatar-5 { background: #f1e8fd; color: #6d32c4; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .avatar-0 { background: #232858; color: #b4bbff; }
  :root:not([data-tema="claro"]) .avatar-1 { background: #0e3326; color: #7ce8b8; }
  :root:not([data-tema="claro"]) .avatar-2 { background: #3a2a0c; color: #ffc876; }
  :root:not([data-tema="claro"]) .avatar-3 { background: #3d1a1d; color: #ffa3a8; }
  :root:not([data-tema="claro"]) .avatar-4 { background: #0e2f38; color: #7fd6ee; }
  :root:not([data-tema="claro"]) .avatar-5 { background: #2c1d45; color: #cfb0ff; }
}
:root[data-tema="oscuro"] .avatar-0 { background: #232858; color: #b4bbff; }
:root[data-tema="oscuro"] .avatar-1 { background: #0e3326; color: #7ce8b8; }
:root[data-tema="oscuro"] .avatar-2 { background: #3a2a0c; color: #ffc876; }
:root[data-tema="oscuro"] .avatar-3 { background: #3d1a1d; color: #ffa3a8; }
:root[data-tema="oscuro"] .avatar-4 { background: #0e2f38; color: #7fd6ee; }
:root[data-tema="oscuro"] .avatar-5 { background: #2c1d45; color: #cfb0ff; }
.lm-fila .avatar { border-radius: var(--radio-control); }

/* Selector segmentado (como las pestañas de nezpos.com): una pista gris y la
   opción elegida en blanco, con sombra. Sirve para «.pestanas» y la semana. */
.segmentado, .pestanas {
  display: inline-flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.3rem; border-radius: 999px; background: var(--superficie-2);
}
.pestanas { margin-bottom: 1rem; }
.segmentado a:active, .segmentado button:active, .pestanas button:active { transform: scale(0.97); }
.segmentado a, .segmentado button, .pestanas button {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 38px; padding: 0.35rem 0.95rem; border-radius: 999px;
  border: 0; background: transparent; color: var(--texto-suave); font: inherit; font-weight: 650; font-size: 0.92rem; text-decoration: none; cursor: pointer;
  transition: background-color var(--rapido) var(--curva), color var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
}
@media (hover: hover) and (pointer: fine) { .segmentado a:hover, .segmentado button:hover, .pestanas button:hover { color: var(--texto); background: transparent; } }
.segmentado a.activa, .segmentado button.activa, .pestanas button.activa {
  background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-control);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .segmentado a.activa, :root:not([data-tema="claro"]) .pestanas button.activa { background: #262a3a; }
}
:root[data-tema="oscuro"] .segmentado a.activa, :root[data-tema="oscuro"] .pestanas button.activa { background: #262a3a; }

/* Hoy: la tarjeta noche y las tarjetas que piden algo. */
.hoy-arriba { display: grid; gap: 1rem; margin-bottom: 0.8rem; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: stretch; }
.hoy-pendientes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); grid-auto-rows: 1fr; }
.hoy-todo-bien { display: flex; gap: 0.9rem; align-items: center; height: 100%; min-height: 8rem; padding: 1.2rem 1.3rem; border-radius: var(--radio-grande); background: var(--bien-suave); color: var(--entrada); }
.hoy-todo-bien b { display: block; font-family: var(--fuente-titulo); font-size: 1.2rem; color: var(--texto); }
.hoy-todo-bien span { color: var(--texto-suave); font-size: 0.9rem; }
.hoy-al-dia { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 1rem; font-size: 0.88rem; color: var(--texto-suave); }
.hoy-al-dia .icono { color: var(--entrada); flex: none; }
.hoy-ganado {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: 'icono texto monto accion'; align-items: center; gap: 0.3rem 1rem; margin-bottom: 1rem;
  padding: 1rem 1.25rem; border-radius: var(--radio-grande); background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra);
  color: var(--texto); text-decoration: none; transition: transform var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
}
.hoy-ganado .ta-icono { grid-area: icono; margin: 0; background: var(--primario-suave); color: var(--primario); }
.hoy-ganado-texto { grid-area: texto; display: flex; flex-direction: column; min-width: 0; }
.hoy-ganado-texto span { font-weight: 650; }
.hoy-ganado-texto small { color: var(--texto-suave); font-size: 0.85rem; }
.hoy-ganado > b { grid-area: monto; white-space: nowrap; font-family: var(--fuente-titulo); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hoy-ganado .ta-accion { grid-area: accion; margin: 0; color: var(--primario); white-space: nowrap; }
.hoy-sin-rostro h2 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.05rem; color: var(--atento); margin-bottom: 0.2rem; }
.hoy-sin-rostro p { margin: 0 0 0.7rem; }
.tarjeta-noche {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radio-grande); padding: 1.4rem 1.5rem;
  background: #07080d; color: #f4f5fa; box-shadow: 0 30px 70px -40px rgb(13 16 32 / 0.55);
}
.tarjeta-noche::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 80% at 0% 0%, rgb(75 85 230 / 0.42), transparent 70%),
    radial-gradient(60% 70% at 110% 30%, rgb(25 195 177 / 0.16), transparent 70%);
}
.noche-rotulo { margin: 0; font-weight: 650; color: #a9afc2; }
.noche-suave { margin: 0.6rem 0 0; color: #a9afc2; }
.cifra-grande {
  font-family: var(--fuente-titulo); font-weight: 800; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums;
  font-size: clamp(3rem, 2rem + 4vw, 4.75rem); margin: 0.2rem 0 0.4rem;
}
.cifra-grande small { font-size: 0.3em; font-weight: 600; letter-spacing: 0; color: #a9afc2; margin-left: 0.45em; }
.hoy-personas { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.4rem 0.8rem; }
.hoy-personas a { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; color: inherit; text-decoration: none; border-radius: var(--radio-control); padding: 0.25rem; }
@media (hover: hover) and (pointer: fine) { .hoy-personas a:hover { background: rgb(255 255 255 / 0.06); } }
.hoy-personas span { min-width: 0; }
.hoy-personas b { display: block; font-size: 0.92rem; overflow-wrap: anywhere; }
.hoy-personas small { display: block; color: #a9afc2; font-size: 0.8rem; }
.hoy-mas a { color: #a3acff; font-weight: 650; }
.tarjeta-accion {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'icono icono' 'valor valor' 'rotulo rotulo' 'accion accion';
  align-content: start; gap: 0.15rem; padding: 1.15rem 1.25rem; border-radius: var(--radio-grande);
  background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra); color: var(--texto); text-decoration: none;
  transition: transform var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
}
/* Con ratón, se levanta un poco; con el dedo, se hunde al apretar (en el iPad el «hover» se queda pegado). */
@media (hover: hover) and (pointer: fine) {
  .tarjeta-accion:hover, .hoy-ganado:hover { transform: translateY(-1px); box-shadow: var(--sombra-alta); color: var(--texto); }
}
.tarjeta-accion:active, .hoy-ganado:active, .pildora:active { transform: scale(0.97); }
.ta-icono { grid-area: icono; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radio-control); background: var(--superficie-2); color: var(--texto-suave); margin-bottom: 0.5rem; }
.ta-valor { grid-area: valor; font-family: var(--fuente-titulo); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); font-weight: 800; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; line-height: 1.1; overflow-wrap: anywhere; }
.ta-rotulo { grid-area: rotulo; color: var(--texto-suave); font-size: 0.9rem; }
.ta-accion { grid-area: accion; display: inline-flex; align-items: center; gap: 0.2rem; margin-top: 0.6rem; font-weight: 700; font-size: 0.88rem; color: var(--texto-suave); }
.tarjeta-accion.atento { border-color: color-mix(in srgb, var(--atento) 40%, transparent); }
.tarjeta-accion.atento .ta-icono { background: var(--atento-suave); color: var(--atento); }
.tarjeta-accion.atento .ta-accion { color: var(--atento); }
.tarjeta-accion.ancha .ta-icono { background: var(--primario-suave); color: var(--primario); }
.tarjeta-accion.ancha .ta-accion { color: var(--primario); }
/* En oscuro la página ya es noche: un borde y un brillo un poco más fuerte la separan. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tarjeta-noche, :root:not([data-tema="claro"]) .cifra-principal { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.10); }
  :root:not([data-tema="claro"]) .tarjeta-noche::before { background: radial-gradient(70% 80% at 0% 0%, rgb(75 85 230 / 0.55), transparent 70%), radial-gradient(60% 70% at 110% 30%, rgb(25 195 177 / 0.22), transparent 70%); }
}
:root[data-tema="oscuro"] .tarjeta-noche, :root[data-tema="oscuro"] .cifra-principal { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.10); }
:root[data-tema="oscuro"] .tarjeta-noche::before { background: radial-gradient(70% 80% at 0% 0%, rgb(75 85 230 / 0.55), transparent 70%), radial-gradient(60% 70% at 110% 30%, rgb(25 195 177 / 0.22), transparent 70%); }
@media (max-width: 900px) {
  .hoy-arriba { grid-template-columns: minmax(0, 1fr); gap: 0.7rem; }
  .hoy-pendientes { gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
  .hoy-ganado { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'icono texto' 'monto monto' 'accion accion'; }
  .hoy-pendientes { grid-auto-rows: auto; }
}

/* Avisos compactos: el título en un renglón y los nombres en píldoras. */
.aviso-compacto p { margin: 0 0 0.5rem; }
.aviso-compacto p .icono { margin: 0 0.4rem 0 0; }
.pildoras { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pildora {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0.2rem 0.9rem; border-radius: 999px; transition: transform var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
  background: var(--superficie); color: var(--texto); font-size: 0.86rem; font-weight: 600; text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--atento) 30%, transparent);
}
@media (hover: hover) and (pointer: fine) { .pildora:hover { border-color: var(--atento); color: var(--texto); } }
.aviso > .icono:first-child { margin-right: 0.4rem; }

/* La cifra principal de un grupo (por ejemplo, «A pagar» en la planilla). */
.cifra { border-radius: var(--radio); background: var(--superficie); }
.cifra-principal { background: #07080d; border-color: #07080d; color: #f4f5fa; }
.cifra-principal .rotulo { color: #a9afc2; }

/* La planilla como tabla (1280 px o más): las 11 columnas, compactas. */
@media (min-width: 1280px) {
  .tabla.apilable-ancho { font-size: 0.88rem; background: var(--superficie); border-radius: var(--radio); overflow: hidden; box-shadow: 0 0 0 1px var(--borde), var(--sombra); }
  .tabla.apilable-ancho th { white-space: normal; vertical-align: bottom; line-height: 1.25; }
  .tabla.apilable-ancho td { padding: 0.6rem 0.55rem; }
  .tabla.apilable-ancho .solo-tarjeta { display: none; }
  .tabla.apilable-ancho tfoot td { background: var(--superficie-2); }
  .tabla.apilable-ancho td.fila-destacada { font-size: 0.98rem; }
  .tabla.apilable-ancho tr.dia-detalle > td { padding: 0.8rem 1rem; }
}

/* ---------- Entrar (panel, portal, teléfono, consola): todas iguales ---------- */
.kiosko-centro.entrar { max-width: 440px; padding-top: clamp(2.5rem, 10vh, 6rem); text-align: center; }
.kiosko-centro.entrar.entrar-ancho { max-width: 540px; text-align: left; }
.entrar h1 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.4rem); letter-spacing: -0.035em; margin-bottom: 0.3rem; overflow-wrap: anywhere; }
.entrar .tarjeta { text-align: left; padding: 1.4rem; margin-top: 1.4rem; }
.entrar-logo { width: 64px; height: 64px; margin: 0 auto 1.1rem; }
.inicio .entrar-logo { margin: 0 0 1rem; }
.entrar > p:last-child { margin-top: 1.2rem; }

/* ---------- Marcar desde el teléfono ---------- */
.telefono-cabecera { border-bottom-color: var(--borde); }
.telefono-quien { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.telefono-quien b { overflow-wrap: anywhere; }
.telefono .identificado { align-items: center; text-align: center; width: min(100%, 30rem); }
.telefono .hora-grande {
  margin: 0; font-family: var(--fuente-titulo); font-weight: 800; letter-spacing: -0.045em; line-height: 0.95;
  font-size: clamp(3.5rem, 18vw, 6rem); font-variant-numeric: tabular-nums;
}
.telefono .marcador-saludo { font-size: clamp(1.5rem, 6vw, 2rem); }

/* ---------- La consola ---------- */
.plat-cifras .tarjeta { border-radius: var(--radio-grande); }
.plat-cifras b { font-family: var(--fuente-titulo); font-size: 2rem; letter-spacing: -0.035em; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.consola-sub { margin: 0.35rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.consola-sub .etiqueta { margin-left: 0; }
.consola-volver { display: inline-flex; align-items: center; gap: 0.2rem; min-height: 40px; font-weight: 700; text-decoration: none; }
.consola-filtros { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; justify-content: space-between; margin: 1rem 0; }
.consola-filtros .pestanas { margin: 0; }
.consola-filtros input { flex: 1 1 240px; max-width: 380px; }
/* Las pestañas no se parten en varias líneas: en el teléfono se deslizan de lado. */
.consola .pestanas, .consola .segmentado { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.consola .pestanas button, .consola .segmentado a { flex: none; white-space: nowrap; }
.consola-pestanas { margin: 0.4rem 0 1rem; }
.consola-tabla { padding: 0.4rem 0.6rem; }
.consola-tabla td small { font-size: 0.85rem; }
.consola-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 0 1rem; align-items: start; }
.consola-uso { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1rem; }
.consola-uso div { display: flex; flex-direction: column; min-width: 0; }
.consola-uso b { font-family: var(--fuente-titulo); font-size: 1.7rem; letter-spacing: -0.03em; line-height: 1.15; }
.consola-uso b.chica { font-size: 1rem; letter-spacing: 0; }
.consola-uso .sutil { font-size: 0.88rem; }
.consola-notas { margin: 0.6rem 0 0; font-size: 0.92rem; color: var(--texto-suave); overflow-wrap: anywhere; }
.consola-lista { list-style: none; margin: 0; padding: 0; }
.consola-lista li { display: flex; align-items: center; gap: 0.8rem; padding: 0.75rem 0; border-top: 1px solid var(--borde); flex-wrap: wrap; }
.consola-lista li:first-child { border-top: 0; }
.consola-lista-texto { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; overflow-wrap: anywhere; }
.consola-lista-texto .etiqueta { margin-left: 0.2rem; }
.consola-cabeza-tarjeta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
.consola-cabeza-tarjeta.entre { justify-content: space-between; }
.consola-cabeza-tarjeta h2 { margin: 0; }
.consola-cabeza-tarjeta .pestanas { margin: 0; }
.consola-cabeza-tarjeta .etiqueta { margin-left: 0; }
.consola-icono { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radio-control); background: var(--superficie-2); color: var(--texto-suave); }
.consola-icono.bien { background: var(--bien-suave); color: var(--entrada); }
.consola-icono.atento { background: var(--atento-suave); color: var(--atento); }
.consola-pasos { padding-left: 1.3rem; line-height: 1.55; }
.consola-qr { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 0.4rem 0 1rem; }
.consola-qr img { width: 200px; height: 200px; border-radius: var(--radio-control); border: 1px solid var(--borde); background: #fff; padding: 6px; }
.consola-qr > div { flex: 1 1 220px; display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.consola-secreto, .consola-temporal code, .consola-codigos code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.04em;
  background: var(--superficie-2); border-radius: 8px; padding: 0.3rem 0.55rem; overflow-wrap: anywhere;
}
.consola-temporal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.2rem 0 0.6rem; }
.consola-temporal code { font-size: 1.3rem; }
.consola-codigos { list-style: none; padding: 0; margin: 0.6rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.5rem; }
.consola-peligro { border-color: color-mix(in srgb, var(--malo) 30%, transparent); }
.consola-peligro h2 { color: var(--malo); }
.campo-codigo { font-size: 1.25rem; letter-spacing: 0.15em; font-variant-numeric: tabular-nums; }
.consola .aviso.atento a { color: inherit; font-weight: 700; }
.consola .contenido > .aviso { margin: 0 0 1.2rem; }
.consola .barra-abajo { grid-template-columns: repeat(4, minmax(0, 150px)); }
/* Pagos: la tarjeta noche con lo cobrado, los KPIs y las barras de 6 meses. */
/* Simetría: en la computadora, la noche y los 3 KPIs en una fila; en el iPad,
   la noche arriba y los 3 debajo; en el teléfono, de a 2 (el último a lo ancho). */
.consola-kpis { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.consola-kpis > .tarjeta { margin: 0; }
.consola-protagonista { display: flex; flex-direction: column; justify-content: center; min-height: 190px; }
@media (max-width: 1180px) {
  .consola-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .consola-protagonista { grid-column: 1 / -1; }
}
.consola-cifra-dinero { font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem); }
.barra-avance { height: 10px; border-radius: 999px; background: rgb(255 255 255 / 0.12); overflow: hidden; margin: 0.6rem 0 0; }
.barra-avance span { display: block; height: 100%; border-radius: 999px; background: #8e99ff; }
.kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; }
.kpi b { font-family: var(--fuente-titulo); font-size: 1.65rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-top: 0.7rem; }
.kpi .etiqueta { margin: 0.45rem 0 0; }
.barras { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem; height: 190px; margin-top: 0.8rem; }
.barra-mes { display: grid; grid-template-rows: auto 1fr auto; gap: 0.3rem; align-items: end; text-align: center; border-radius: var(--radio-chico); outline-offset: 2px; }
.barra-columna { height: 100%; display: flex; align-items: flex-end; border-bottom: 1px solid var(--borde); }
.barra { display: block; width: 100%; max-width: 46px; margin: 0 auto; border-radius: 4px 4px 0 0; background: var(--primario); }
.barra-valor { font-size: 0.75rem; font-weight: 650; color: var(--texto-suave); white-space: nowrap; visibility: hidden; font-variant-numeric: tabular-nums; }
.barra-mes:hover .barra-valor, .barra-mes:focus .barra-valor, .barra-mes.actual .barra-valor { visibility: visible; }
.barra-mes.actual .barra-valor { color: var(--texto); }
.barra-mes-nombre { font-size: 0.82rem; color: var(--texto-suave); }
.barra-mes.actual .barra-mes-nombre { color: var(--texto); font-weight: 700; }
.consola-subtitulo { font-size: 1rem; margin: 0.6rem 0 0.4rem; }
.num-izq { font-variant-numeric: tabular-nums; white-space: nowrap; }
.consola-form-pago .segmentado { width: fit-content; max-width: 100%; }
@media (max-width: 640px) {
  .consola-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
  .consola-kpis > .kpi:last-child { grid-column: 1 / -1; }
  .kpi b { font-size: 1.35rem; }
  .barra-valor { font-size: 0.75rem; }
}

/* Resumen: la tarjeta noche es un enlace a Pagos; la atención y lo último, lado a lado. */
.consola-enlace-tarjeta { text-decoration: none; transition: transform var(--rapido) var(--curva); }
@media (hover: hover) and (pointer: fine) { .consola-enlace-tarjeta:hover { color: #f4f5fa; } }
.consola-enlace-tarjeta:active { transform: scale(0.99); }
.consola-icono.malo { background: var(--malo-suave); color: var(--malo); }
.consola-icono.info { background: var(--primario-suave); color: var(--primario); }
.kpi-de { font-size: 0.55em; font-weight: 600; color: var(--texto-suave); letter-spacing: 0; margin-left: 0.15em; }
.consola-etiquetas { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.45rem; }
.consola-etiquetas .etiqueta { margin: 0; }
.consola-rejilla-resumen { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
.consola-rejilla-resumen > .tarjeta { margin: 0; }
.consola-todo-bien { display: flex; align-items: center; gap: 0.75rem; margin: 0.4rem 0; }
.consola-ver-mas { display: inline-flex; align-items: center; gap: 0.2rem; margin-top: 0.6rem; font-weight: 700; text-decoration: none; min-height: 40px; }
.fila-atencion .consola-lista-texto b a { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .fila-atencion .consola-lista-texto b a:hover { color: var(--primario); } }
.fila-atencion-acciones { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; }
.consola-lista.sin-saltos li { flex-wrap: nowrap; }
.consola-lista.sin-saltos .consola-lista-texto { flex: 1 1 auto; }
.consola-motivo { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--atento); font-weight: 600; }
/* La batería de un marcador: barrita y porcentaje. */
.bateria { display: inline-flex; flex: none; align-items: center; gap: 0.35rem; font-variant-numeric: tabular-nums; font-size: 0.9rem; white-space: nowrap; }
.bateria-barra { width: 42px; height: 10px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; border: 1px solid var(--borde); }
.bateria-barra span { display: block; height: 100%; background: var(--entrada); }
.bateria.atento .bateria-barra span { background: var(--atento); }
.bateria.malo .bateria-barra span { background: var(--malo); }
.bateria.malo b { color: var(--malo); }
@media (max-width: 900px) {
  .consola-rejilla-resumen { grid-template-columns: minmax(0, 1fr); }
  .fila-atencion-acciones { width: 100%; justify-content: flex-start; padding-left: calc(40px + 0.8rem); }
}

/* Claro · como el aparato · oscuro, en el pie del menú. */
.selector-tema { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0.3rem 0.4rem 0.4rem; }
.selector-tema button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0.3rem; border: 0; border-radius: 999px;
  background: transparent; color: var(--texto-suave); cursor: pointer;
  transition: background-color var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
@media (hover: hover) and (pointer: fine) { .selector-tema button:hover { color: var(--texto); } }
.selector-tema button.activa { background: var(--superficie); color: var(--primario); box-shadow: var(--sombra-control); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .selector-tema button.activa { background: #262a3a; }
}
:root[data-tema="oscuro"] .selector-tema button.activa { background: #262a3a; }
/* En el teléfono, cada empresa es una tarjeta: la tabla no cabe. */
@media (max-width: 640px) {
  .consola-tabla { padding: 0 1rem; }
  .consola-tabla table, .consola-tabla tbody, .consola-tabla tr, .consola-tabla td { display: block; }
  .consola-tabla thead { display: none; }
  .consola-tabla tr { padding: 0.8rem 0; border-bottom: 1px solid var(--borde); }
  .consola-tabla tr:last-child { border-bottom: 0; }
  .consola-tabla td { border: 0; padding: 0.15rem 0; }
  .consola-tabla td[data-rotulo] { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.92rem; }
  .consola-tabla td[data-rotulo]::before { content: attr(data-rotulo); color: var(--texto-suave); }
  .consola-tabla td.consola-abrir { display: none; }
  .consola-tabla td.consola-accion { text-align: right; padding-top: 0.4rem; }
  .consola-tabla td.consola-accion:empty { display: none; }
}

/* --- Consola, Servidor: el estado general, cuatro cifras iguales, medidores --- */
.consola-estado { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.consola-estado-titulo { font-family: var(--fuente-titulo); font-size: 1.25rem; letter-spacing: -0.02em; }
.consola-icono.grande { width: 48px; height: 48px; border-radius: var(--radio-control); }
.consola-kpis-iguales { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.consola-kpis-iguales > .tarjeta { margin: 0; }
.consola-kpis-iguales .kpi .sutil { font-size: 0.88rem; }
.medidor { align-self: stretch; height: 8px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; margin: 0.5rem 0 0.3rem; }
.medidor span { display: block; height: 100%; border-radius: 999px; background: var(--primario); }
.medidor.atento span { background: var(--atento); }
.medidor.malo span { background: var(--malo); }
.consola-rejilla-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; margin-bottom: 1rem; }
.consola-rejilla-par > .tarjeta { margin: 0; }
.consola-rejilla-par h2 { margin: 0 0 0.4rem; }
.consola-nota { margin: 0 0 0.3rem; font-size: 0.92rem; }
.consola-tabla-titulo { margin: 0.6rem 0.4rem 0.4rem; }
.consola-tabla th.num, .consola-tabla td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 1180px) {
  .consola-kpis-iguales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .consola-rejilla-par { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .consola-kpis-iguales { gap: 0.8rem; }
  .consola-estado { align-items: flex-start; }
  .consola-tabla td.num { text-align: left; }
  .consola-tabla-titulo { margin: 0.8rem 0 0.2rem; }
}

/* --- Contratos: firmar con el dedo y leer el contrato (consola y /firmar) --- */
.firma { margin: 0.4rem 0 1rem; }
/* Grande, para firmar cómodo con el dedo: más alto en el iPad que en el teléfono. */
.firma-cuadro { display: block; width: 100%; height: clamp(220px, 34vh, 340px); touch-action: none; -webkit-user-select: none; user-select: none; overscroll-behavior: contain; border: 2px dashed var(--borde-control); border-radius: var(--radio-control); background: var(--superficie-2); color: var(--texto); cursor: crosshair; }
.firma-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.35rem; }
.firma-vista { display: block; color: var(--texto); max-width: 100%; }
.contrato-papel { padding: 1.4rem 1.5rem; }
.contrato-texto { font-size: 1rem; line-height: 1.55; }
.contrato-texto p { margin: 0 0 0.7rem; }
.contrato-texto h3 { font-size: 1.02rem; margin: 1.2rem 0 0.45rem; }
.contrato-titulo { text-align: center; font-size: 1.25rem; margin: 0 0 1rem; }
.contrato-lista { display: flex; gap: 0.55rem; padding-left: 0.25rem; }
.contrato-lista > span:first-child { flex: 0 0 auto; min-width: 1.1rem; }
.contrato-firmas { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin-top: 1.6rem; }
.contrato-firma { display: flex; flex-direction: column; gap: 0.15rem; min-width: 220px; flex: 1 1 220px; border-top: 1px solid var(--texto); padding-top: 0.4rem; }
.casilla-linea { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.4rem 0 0.9rem; cursor: pointer; }
.casilla-linea input { width: 22px; height: 22px; margin-top: 0.1rem; flex: 0 0 auto; accent-color: var(--primario); }
.firmar { max-width: 780px; margin: 0 auto; padding: 1.5rem 16px 3rem; }
.firmar h1 { font-size: 1.6rem; margin: 0.3rem 0 0.2rem; text-align: center; }
.firmar > .sutil { text-align: center; margin: 0 0 1rem; }
.firmar-marca { display: flex; align-items: center; justify-content: center; gap: 0.45rem; font-weight: 750; color: var(--primario); margin: 0; }
.firmar-codigo { font-size: 1.6rem; letter-spacing: 0.5em; text-align: center; font-weight: 750; }
.firmar-pie { text-align: center; margin-top: 1.5rem; }
.contrato-editor textarea { width: 100%; min-height: 360px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88rem; line-height: 1.45; }
.correo-local { white-space: pre-wrap; font-size: 0.9rem; background: var(--superficie-2); border-radius: var(--radio-chico); padding: 0.7rem 0.9rem; margin: 0.4rem 0 0; overflow-wrap: anywhere; }
.fila-campos { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.fila-campos > .campo { flex: 1 1 240px; }

/* ---------- La contraseña con su ojito (Clave, en comun.js) ---------- */
.clave-con-ojo { display: flex; align-items: stretch; width: 100%; font-size: 1rem; font-weight: 400; }
.clave-con-ojo input { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
.clave-ojo {
  flex: none; width: 2.75rem; min-height: 44px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid var(--borde-control); border-left: 0; border-radius: 0 var(--radio-control) var(--radio-control) 0;
  background: var(--superficie); color: var(--texto-suave); box-shadow: none;
}
@media (hover: hover) and (pointer: fine) { .clave-ojo:hover { color: var(--texto); } }
.clave-ojo:focus-visible { outline: 2px solid var(--primario); outline-offset: 1px; }
.clave-ojo[aria-pressed='true'] { color: var(--primario); }
.clave-con-ojo:focus-within .clave-ojo { border-color: var(--primario); }

/* ---------- Activar un terminal con un código ---------- */
.activar-codigo { text-align: left; width: 100%; }
.activar-codigo.destacado { margin: 0.5rem 0 1rem; }
.activar-codigo input { font-size: 1.5rem; letter-spacing: 0.3em; text-align: center; font-variant-numeric: tabular-nums; }
.codigo-terminal { display: grid; gap: 0.5rem; justify-items: start; }
.codigo-terminal b { font-size: clamp(2.2rem, 8vw, 3rem); letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }

/* ---------- Anotar varios vales ---------- */
.fila-mala td { background: color-mix(in srgb, var(--malo) 10%, transparent); }
.aviso-texto-malo { color: var(--malo); font-weight: 600; }

/* ---------- La boleta en ticket (impresora térmica de 80 o 58 mm) ---------- */
.boletas-ticket { justify-items: start; }
/* En la pantalla el recibo usa el ancho que hay (sin el espacio perdido al lado); al imprimir, el del rollo
   (72 mm en el de 80, 48 mm en el de 58: también lo pone estiloDePapel). */
.boleta-ticket { width: 100%; max-width: 30rem; border: 0; border-radius: 0; padding: 0; font-size: 1rem; font-family: inherit; }
.papel-58 .boleta-ticket { font-size: 0.95rem; }
@media print {
  .boleta-ticket { width: 72mm; font-size: 9pt; }
  .papel-58 .boleta-ticket { width: 48mm; font-size: 8pt; }
}
/* Arriba de cada boleta (fuera del papel): el nombre y «WhatsApp». */
.boleta-persona { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; width: 100%; max-width: 30rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--borde, #ddd); }
.boletas-ticket .boleta-persona:first-child, .boletas .boleta-persona:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.boleta-ticket h2 { font-size: 11pt; text-align: center; }
.boleta-ticket > div:first-of-type { text-align: center; }
.boleta-ticket table { font-size: inherit; }
/* El día por día en el ticket (80 y 58 mm): cada día en un bloque —día y lo que ganó arriba, su horario y lo que
   marcó en medio, las horas y lo que lleva abajo— para que todo quepa sin esconder nada.
   Lo mismo en el teléfono (≤ 640 px): cinco columnas no caben en 360 px sin cortar los montos. */
.boleta-ticket .boleta-dias thead { display: none; }
.boleta-ticket .boleta-dias tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'dia gana' 'detalle detalle' 'horas lleva'; padding: 1.5mm 0; border-bottom: 1px dashed #999; }
.boleta-ticket .boleta-dias td { display: block; padding: 0; border: 0; width: auto !important; text-align: left; }
.boleta-ticket .boleta-dias .bd-dia { grid-area: dia; font-weight: 700; }
.boleta-ticket .boleta-dias .bd-gana { grid-area: gana; font-weight: 700; text-align: right; }
.boleta-ticket .boleta-dias .bd-detalle { grid-area: detalle; }
.boleta-ticket .boleta-dias .bd-horas { grid-area: horas; }
.boleta-ticket .boleta-dias .bd-lleva { grid-area: lleva; text-align: right; }
.boleta-ticket .boleta-dias .bd-lleva::before { content: 'lleva '; }
@media screen and (max-width: 640px) {
  .boleta-dias thead { display: none; }
  .boleta-dias tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'dia gana' 'detalle detalle' 'horas lleva'; column-gap: 0.8rem; padding: 0.45rem 0; border-bottom: 1px solid #ddd; }
  .boleta-dias td { display: block; padding: 0; border: 0; width: auto !important; text-align: left; }
  .boleta-dias .bd-dia { grid-area: dia; font-weight: 700; }
  .boleta-dias .bd-gana { grid-area: gana; font-weight: 700; text-align: right; }
  .boleta-dias .bd-detalle { grid-area: detalle; }
  .boleta-dias .bd-horas { grid-area: horas; }
  .boleta-dias .bd-lleva { grid-area: lleva; text-align: right; }
  .boleta-dias .bd-lleva::before { content: 'lleva '; }
}
.boleta-dias .bd-horas small { display: block; color: var(--texto-suave); }
.boleta-dias .bd-gana, .boleta-dias .bd-lleva, .boleta-dias .bd-horas { white-space: nowrap; }
.boleta-ticket .firma { flex-direction: column; gap: 1.8rem; margin-top: 1.6rem; }
@media print {
  .boletas-ticket { display: block; }
  .boletas-ticket .boleta-ticket { font-size: 9pt; page-break-after: always; border-bottom: 1px dashed #000; padding-bottom: 4mm; margin-bottom: 4mm; }
  .boletas-ticket.papel-58 .boleta-ticket { font-size: 8pt; }
}
/* La que sigue para imprimir en la térmica, marcada en pantalla. */
.boleta-ticket.en-turno { outline: 2px solid var(--primario); outline-offset: 4px; }
@media print { .boleta-ticket.en-turno { outline: 0; } }

/* La comparación de reglas de pago en el detalle de la planilla. */
.comparacion { margin: 0.6rem 0; padding: 0.7rem 0.9rem; border-radius: var(--radio-control); background: var(--superficie-2); }
.comparacion p { margin: 0; }
.cifra-comparacion .valor { color: var(--texto-suave); }
.tarjeta-regla { background: var(--superficie-2); box-shadow: none; }

/* Intentos sin reconocer: la foto a la izquierda, los datos a la derecha. */
.lista-intentos { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.8rem; }
.intento { display: flex; gap: 1rem; align-items: flex-start; }
.intento.revisado { opacity: 0.7; }
.intento-foto { width: 120px; height: 120px; object-fit: cover; border-radius: var(--radio-control); background: var(--superficie-2); flex: none; }
.intento-foto.sin-foto { display: flex; align-items: center; justify-content: center; color: var(--texto-suave); font-size: 0.8rem; }
.intento-datos { flex: 1; min-width: 0; }
@media (max-width: 520px) { .intento { flex-direction: column; } .intento-foto { width: 100%; height: 220px; } }

/* =============================================================================
   DISEÑO NUEVO DEL TERMINAL («la tarjeta de ponchar»), por terminal: body.diseno-nuevo.
   Solo cambia cómo se ve. Reglas que protegen el reconocimiento:
   - al escanear sigue pasando a BLANCO (body.con-luz): la pantalla alumbra la cara;
   - nada de desenfoque (backdrop-filter) encima del video: compite con el
     reconocimiento por la tarjeta gráfica;
   - mientras se leen caras, solo animaciones de transform y opacity; lo festivo
     (la tarjeta, el sello) sale DESPUÉS de guardar la marcada.
   ============================================================================= */
body.kiosko.diseno-nuevo {
  --n-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --n-cajon: cubic-bezier(0.32, 0.72, 0, 1);
  /* La misma letra que el resto (SF en Apple, Hanken en los demás): sin ella, una tablet Android caía en Roboto. */
  font-family: var(--fuente);
  font-variant-numeric: tabular-nums;
}
body.kiosko.diseno-nuevo:not(.con-luz) {
  --fondo: var(--noche); --superficie: var(--noche-2); --superficie-2: #1c1f2c; --borde: #23263a;
  --texto: #f4f5fa; --texto-suave: #a9afc2;
  --primario: #8e99ff; --primario-texto: #0b0d18; --primario-suave: #1f2347;
  /* Salida = iris, como en todo el sistema: el ámbar es solo para avisos (sin internet, falta algo). */
  --entrada: #3edc97; --salida: #8e99ff; --atento: #ffb547;
  background: var(--noche);
}
/* Sin aurora: fondo plano. */
body.kiosko.diseno-nuevo .kiosko-pantalla::before { display: none; }
/* El pie de Nezme también ocupa alto: que la cámara lo cuente y no haya que desplazar. */
body.kiosko.diseno-nuevo .marcador { --cabecera: 8.2rem; }
@media (min-width: 700px) { body.kiosko.diseno-nuevo .marcador { --cabecera: 9.2rem; } }
body.kiosko.diseno-nuevo:not(.con-luz) .boton.enorme.entrada { color: #052e1c; }
body.kiosko.diseno-nuevo:not(.con-luz) .boton.enorme.salida { color: #0b0d18; }
body.kiosko.diseno-nuevo .kiosko-cabecera { display: flex; align-items: center; gap: 0.8rem; }
body.kiosko.diseno-nuevo .kiosko-titulo { flex: 1; min-width: 0; }
/* El nombre de la empresa y el del aparato, completos: si son largos, bajan de línea (nunca «…»). */
/* break-word, no anywhere: «anywhere» deja el ancho mínimo en una letra y el nombre se partía a media palabra («Distribuid/ora»). */
body.kiosko.diseno-nuevo .kiosko-empresa { overflow-wrap: break-word; }
body.kiosko.diseno-nuevo .kiosko-aparato { overflow-wrap: break-word; }
@media (max-width: 520px) {
  /* Angosto: «En línea» queda en el punto verde (el texto sigue para el
     lector de pantalla) y le deja el lugar al nombre; «Sin internet» sí se
     lee entero, en su propia fila. */
  body.kiosko.diseno-nuevo .kiosko-cabecera { flex-wrap: wrap; row-gap: 0.5rem; }
  body.kiosko.diseno-nuevo .pildora-linea:not(.mal) { padding: 0.5rem; }
  body.kiosko.diseno-nuevo .pildora-linea:not(.mal) .pildora-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body.kiosko.diseno-nuevo .pildora-linea.mal { order: 10; flex-basis: 100%; justify-content: center; }
  /* La hora baja a su propia fila y el nombre de la empresa usa todo el ancho. */
  body.kiosko.diseno-nuevo .kiosko-cabecera > :last-child { flex-basis: 100%; }
  body.kiosko.diseno-nuevo .kiosko-cabecera .reloj { text-align: left; }
}
.marca-marcadas { flex: none; }
.pildora-linea { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.8rem; border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto-suave); font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.pildora-linea .pildora-punto { width: 8px; height: 8px; border-radius: 50%; background: #3edc97; }
/* Solo llama la atención cuando hay un problema (sin internet); «En línea» queda quieto. */
.pildora-linea.mal .pildora-punto { animation: n-punto 1.6s ease-in-out infinite; }
.pildora-linea.mal { color: #ffd9a0; border-color: #5a4318; background: #221b10; }
.pildora-linea.mal .pildora-punto { background: #ffb547; }
@keyframes n-punto { 50% { opacity: 0.3; } }

/* Botones: se hunden un poco al tocarlos. */
body.diseno-nuevo .kiosko-pantalla .boton, body.diseno-nuevo .kiosko-pantalla .enlace { transition: transform 140ms var(--n-ease), background-color 160ms ease; }
body.diseno-nuevo .kiosko-pantalla .boton:active:not(:disabled) { transform: scale(0.97); }
body.diseno-nuevo .boton.enorme { border-radius: 26px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), 0 14px 30px -14px rgb(0 0 0 / 0.6); }

/* Lo que aparece entra suave (no el video: solo el panel de la derecha). */
body.diseno-nuevo .marcador-info > *, body.diseno-nuevo .identificado > * { animation: n-entra 220ms var(--curva) both; }
body.diseno-nuevo .marcador-info > *:nth-child(2), body.diseno-nuevo .identificado > *:nth-child(2) { animation-delay: 60ms; }
body.diseno-nuevo .marcador-info > *:nth-child(3), body.diseno-nuevo .identificado > *:nth-child(3) { animation-delay: 120ms; }
body.diseno-nuevo .marcador-info > *:nth-child(n + 4), body.diseno-nuevo .identificado > *:nth-child(n + 4) { animation-delay: 180ms; }
@keyframes n-entra { from { opacity: 0; transform: translateY(12px); } }

/* El escáner: sin vidrio esmerilado encima del video; una línea que busca. */
body.diseno-nuevo .escaner-estado { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(11 12 18 / 0.78); }
body.diseno-nuevo .escaner-cara { border-radius: 30px; box-shadow: inset 0 0 0 1px #23263a; }
body.diseno-nuevo .escaner-buscando .escaner-cara::after {
  content: ''; position: absolute; left: 18%; right: 18%; top: 42%; height: 2px; border-radius: 1px; background: #8e99ff;
  box-shadow: 0 0 18px 4px rgb(142 153 255 / 0.25); animation: n-barrido 2.8s ease-in-out infinite; pointer-events: none;
}
@keyframes n-barrido { 0% { transform: translateY(-120px); opacity: 0; } 15%, 85% { opacity: 0.85; } 100% { transform: translateY(120px); opacity: 0; } }
/* Con luz (escaneando): un halo blanco alrededor de la cámara, alumbra más la cara. */
body.diseno-nuevo.con-luz .escaner-cara { box-shadow: 0 0 0 1px rgb(0 0 0 / 0.05); }

/* El reloj grande de la espera. */
.reloj-grande { display: flex; flex-direction: column; width: 100%; max-width: 30rem; }
.reloj-grande-fila { display: flex; align-items: flex-end; gap: 0.6rem; }
.reloj-grande-cifra { font-family: var(--fuente-titulo); font-weight: 700; letter-spacing: -0.045em; line-height: 0.95; font-size: clamp(3.5rem, 13vmin, 9rem); }
.reloj-grande-lado { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding-bottom: 0.4em; }
.reloj-grande-ampm { color: var(--texto-suave); font-weight: 600; font-size: clamp(1rem, 2.4vmin, 1.7rem); }
.seg-fondo { stroke: var(--borde); }
/* Avanza de a un segundo, sin transición: animarlo redibujaba el anillo casi todo el tiempo y al llegar a :00 daba una vuelta para atrás. */
.seg-avance { stroke: var(--primario); }
.reloj-grande-fecha { color: var(--texto-suave); font-size: clamp(1rem, 2vmin + 0.4rem, 1.4rem); margin-top: 0.5rem; }
.reloj-grande-fecha::first-letter { text-transform: uppercase; }
.dia-linea { margin-top: clamp(0.8rem, 2.4vmin, 1.6rem); }
.dia-linea-barra { position: relative; height: 8px; border-radius: 4px; background: var(--superficie-2); }
.dia-linea-hecho { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: #2e3352; }
.dia-linea-ahora { position: absolute; top: -4px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--primario); border: 3px solid var(--fondo); }
@keyframes n-ahora { 50% { box-shadow: 0 0 0 7px rgb(142 153 255 / 0); } 0%, 100% { box-shadow: 0 0 0 0 rgb(142 153 255 / 0.5); } }
.dia-linea-textos { display: flex; justify-content: space-between; margin-top: 0.4rem; font-size: 0.8rem; color: var(--texto-suave); }

/* La tarjeta de ponchar: papel claro que sube; el sello cae con la hora. */
.tarjeta-ponchar {
  position: relative; width: 100%; max-width: 30rem; margin: 0.6rem 0 0.2rem; padding: 1rem 1.3rem 0.9rem 2.9rem; border-radius: var(--radio);
  background: #fbfaf6; color: #17160f; text-align: left; transform: rotate(-1.5deg);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.8), 0 2px 8px rgb(0 0 0 / 0.3);
  animation: n-sube 260ms var(--n-cajon) both !important;
}
.tarjeta-ponchar::before { content: ''; position: absolute; left: 1.05rem; top: 0.9rem; bottom: 0.9rem; border-left: 2px dashed #dcd8ce; }
@keyframes n-sube { from { opacity: 0; transform: translateY(70px) rotate(-1.5deg); } to { opacity: 1; transform: rotate(-1.5deg); } }
.tarjeta-ponchar-cabeza { display: flex; justify-content: space-between; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; color: #5a574e; }
.tarjeta-ponchar-cabeza span:last-child { color: #4b55e6; letter-spacing: 0.04em; }
.tarjeta-ponchar-nombre { font-size: clamp(1.1rem, 2.2vmin + 0.5rem, 1.45rem); font-weight: 800; margin-top: 0.2rem; overflow-wrap: anywhere; }
.tarjeta-ponchar-fila { position: relative; display: grid; grid-template-columns: 0.8fr 1fr 1fr; align-items: center; min-height: 2.6rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.05rem; }
.tarjeta-ponchar-titulos { min-height: 1.8rem; margin-top: 0.4rem; border-bottom: 1px solid #e7e3d8; font-family: inherit; font-size: 0.8rem; font-weight: 700; color: #5a574e; }
.tarjeta-sello { justify-self: start; padding: 0.05rem 0.5rem; border: 2px solid currentColor; border-radius: 7px; font-weight: 800; white-space: nowrap; animation: n-sello 220ms var(--curva) 200ms both; }
.tarjeta-sello.entrada { color: #0e7a55; }
.tarjeta-sello.salida { color: #a44a00; }
@keyframes n-sello { 0% { opacity: 0; transform: scale(1.8) rotate(-5deg); } 70% { opacity: 1; transform: scale(0.95) rotate(-5deg); } 100% { opacity: 1; transform: rotate(-5deg); } }
.tarjeta-hoyo { position: absolute; left: -2.3rem; top: calc(50% - 7px); width: 13px; height: 13px; border-radius: 50%; background: var(--fondo); animation: n-hoyo 180ms var(--curva) 200ms both; }
@keyframes n-hoyo { from { opacity: 0; transform: scale(0.9); } }

/* El pie: la marca de Nezme. */
.pie-nezme { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3rem 1rem; padding: 0.6rem clamp(1rem, 3.5vmin, 3rem) 0.8rem; border-top: 1px solid var(--borde); color: var(--texto-suave); font-size: 0.8rem; }
.nezme-marca { font-weight: 800; letter-spacing: -0.02em; color: var(--texto); }
.nezme-marca span { color: #ffd200; }

/* Reposo: casi negro, el reloj se mueve despacio (protege la pantalla); se toca para marcar. */
.kiosko-reposo {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem;
  border: 0; background: #05060a; color: #e6e8f2; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.kiosko-reposo .reposo-hora { animation: n-deriva 40s ease-in-out infinite alternate; }
.kiosko-reposo .hora-grande { font-size: clamp(4rem, 16vmin, 10rem); color: #e6e8f2; }
.reposo-toque { font-size: clamp(1.1rem, 2.6vmin, 1.6rem); font-weight: 600; color: #a9afc2; animation: n-punto 3s ease-in-out infinite; }
@keyframes n-deriva { 0% { transform: translate(-30px, -20px); } 50% { transform: translate(25px, 15px); } 100% { transform: translate(-10px, 30px); } }

@media (prefers-reduced-motion: reduce) {
  body.diseno-nuevo .marcador-info > *, body.diseno-nuevo .identificado > *, .tarjeta-ponchar { animation: n-aparece 200ms ease both !important; }
  .tarjeta-sello, .tarjeta-hoyo { animation: n-aparece 200ms ease 300ms both; }
  body.diseno-nuevo .escaner-buscando .escaner-cara::after, .pildora-linea .pildora-punto, .dia-linea-ahora, .kiosko-reposo .reposo-hora, .reposo-toque { animation: none; }
  body.diseno-nuevo .kiosko-pantalla .boton:active:not(:disabled) { transform: none; }
}
@keyframes n-aparece { from { opacity: 0; } }

/* ANUNCIOS en el terminal: el carrusel de la espera (diseño nuevo) y el
   anuncio personal al marcar (los dos diseños). */
.anuncio-carrusel {
  display: flex; align-items: flex-start; gap: 0.8rem; width: 100%; max-width: 30rem; margin-top: clamp(0.8rem, 2.4vmin, 1.4rem);
  padding: 0.85rem 1rem; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--borde); text-align: left;
  animation: n-anuncio 220ms var(--curva) both;
}
@keyframes n-anuncio { from { opacity: 0; transform: translateY(-8px); } }
.anuncio-icono { flex: none; width: 40px; height: 40px; border-radius: var(--radio-control); display: flex; align-items: center; justify-content: center; background: var(--primario-suave); color: var(--primario); }
.tipo-recordatorio .anuncio-icono { background: color-mix(in srgb, var(--atento) 16%, transparent); color: var(--atento); }
.tipo-felicitacion .anuncio-icono { background: color-mix(in srgb, var(--entrada) 16%, transparent); color: var(--entrada); }
.anuncio-cuerpo { min-width: 0; flex: 1; }
.anuncio-tipo { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primario); }
.tipo-recordatorio .anuncio-tipo { color: var(--atento); }
.tipo-felicitacion .anuncio-tipo { color: var(--entrada); }
.anuncio-titulo { font-size: clamp(1rem, 1.6vmin + 0.5rem, 1.2rem); font-weight: 600; margin-top: 0.1rem; overflow-wrap: anywhere; }
.anuncio-puntos { display: flex; gap: 6px; margin-top: 0.5rem; }
.anuncio-puntos span { width: 6px; height: 6px; border-radius: 3px; background: var(--borde); transition: transform 200ms var(--curva), background-color 200ms ease; }
.anuncio-puntos span.activo { transform: scaleX(1.8); background: var(--primario); }
.anuncio-personal {
  width: 100%; max-width: 32rem; margin: 0.6rem 0; padding: 1.1rem 1.2rem; border-radius: var(--radio-grande); text-align: left;
  background: var(--superficie); border: 2px solid var(--primario); box-shadow: var(--sombra-alta, 0 20px 50px rgb(0 0 0 / 0.3));
  display: flex; flex-direction: column; gap: 0.6rem; animation: n-anuncio 220ms var(--curva) both;
}
.anuncio-personal-cabeza { display: flex; align-items: center; gap: 0.7rem; }
.anuncio-personal-titulo { font-family: var(--fuente-titulo); font-size: clamp(1.3rem, 2.6vmin + 0.6rem, 2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; }
.anuncio-personal-texto { margin: 0; color: var(--texto-suave); font-size: clamp(1rem, 1.4vmin + 0.5rem, 1.2rem); line-height: 1.4; overflow-wrap: anywhere; }
.anuncio-personal .boton { align-self: stretch; }
@media (prefers-reduced-motion: reduce) { .anuncio-carrusel, .anuncio-personal { animation: n-aparece 200ms ease both; } }

/* CUMPLEAÑOS Y ANIVERSARIOS en el terminal. */
.cinta-cumple {
  display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; margin-bottom: 0.4rem; padding: 0.35rem 0.8rem 0.35rem 0.45rem;
  border-radius: 999px; background: var(--primario-suave); border: 1px solid color-mix(in srgb, var(--primario) 40%, transparent);
  color: var(--texto); font-size: clamp(0.85rem, 1vmin + 0.5rem, 1rem); font-weight: 600;
}
.celebracion { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; width: 100%; max-width: 30rem; margin: 0.4rem 0; }
.celebracion-texto { font-family: var(--fuente-titulo); font-size: clamp(1.4rem, 3vmin + 0.6rem, 2.3rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; }
.celebracion .pastel { animation: n-late 1.4s ease-in-out infinite; }
@keyframes n-late { 50% { transform: scale(1.08); } }
.medalla {
  width: 72px; height: 72px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 4px solid #ffd23f; color: #ffd23f; line-height: 1; animation: n-hoyo 400ms ease-out both;
}
.medalla b { font-size: 1.7rem; font-weight: 800; }
.medalla small { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; color: var(--texto-suave); }
.confeti { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 30; }
.confeti span { position: absolute; top: -24px; width: 9px; height: 15px; border-radius: 2px; animation: n-cae 2.6s cubic-bezier(0.25, 0.6, 0.4, 1) both; }
@keyframes n-cae { to { opacity: 0; transform: translateY(105vh) rotate(540deg); } }
@media (prefers-reduced-motion: reduce) {
  .confeti { display: none; }
  .celebracion .pastel { animation: none; }
}

/* ETAPA 4 del diseño nuevo: la tarjeta «HOY», las fichas de la persona, el
   «listo» con la semana, «¿Cómo estuvo su día?», el vale y Mi semana. */
.tarjeta-hoy { width: 100%; max-width: 30rem; margin-top: clamp(0.8rem, 2.4vmin, 1.4rem); padding: 0.85rem 1.1rem; border-radius: var(--radio-grande); background: var(--superficie); border: 1px solid var(--borde); display: flex; flex-direction: column; gap: 0.6rem; text-align: left; }
.tarjeta-hoy-fila { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; }
.tarjeta-hoy-rotulo { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; color: var(--texto-suave); }
.tarjeta-hoy-cifra { font-size: clamp(1.05rem, 1.6vmin + 0.55rem, 1.3rem); font-weight: 700; margin-top: 0.1rem; }
.tarjeta-hoy-bolitas { display: flex; flex: none; }
.tarjeta-hoy-bolitas span { width: 34px; height: 34px; margin-left: -8px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--superficie-2); border: 2px solid var(--superficie); color: var(--texto); font-size: 0.75rem; font-weight: 800; }
.tarjeta-hoy-bolitas span:first-child { margin-left: 0; }
/* Cambia cada 4 s todo el día junto a la cámara: solo un fundido corto (sin borroso ni movimiento). */
.tarjeta-hoy-ultima { display: flex; align-items: center; gap: 0.55rem; font-size: 0.95rem; color: var(--texto-suave); animation: n-aparece 160ms var(--curva) both; }
.tarjeta-hoy-ultima b { color: var(--texto); }
.tarjeta-hoy-ultima .punto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--entrada); }
.tarjeta-hoy-ultima .punto.salida { background: var(--salida); }

.fichas { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ficha { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.85rem; border-radius: 999px; background: var(--superficie); border: 1px solid var(--borde); font-size: clamp(0.85rem, 1vmin + 0.5rem, 1.05rem); font-weight: 600; }
.ficha svg { color: var(--entrada); }

.listo-nuevo { gap: 0.7rem; }
.listo-titulo { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-family: var(--fuente-titulo); font-size: clamp(1.4rem, 2.6vmin + 0.6rem, 2rem); font-weight: 800; letter-spacing: -0.02em; }
.listo-check { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--entrada); color: #052e1c; animation: n-hoyo 300ms var(--n-ease, ease-out) both; }
.listo-nuevo.salida .listo-check { background: var(--salida); color: var(--primario-texto); }
.listo-hora { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.listo-hora b { font-family: var(--fuente-titulo); font-size: clamp(2.4rem, 7vmin, 4rem); letter-spacing: -0.04em; line-height: 1; }
.listo-hora span { color: var(--texto-suave); font-weight: 600; }
.tarjeta-ponchar-fila.pasada { color: #5a574e; min-height: 2.2rem; }
.listo-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; width: 100%; max-width: 30rem; }
.listo-cifras > div { padding: 0.7rem 0.9rem; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--borde); min-width: 0; }
.listo-cifras span { display: block; font-size: 0.8rem; color: var(--texto-suave); }
.listo-cifras b { display: block; font-size: clamp(1.05rem, 1.8vmin + 0.5rem, 1.4rem); overflow-wrap: anywhere; }
.listo-cifras small { color: var(--texto-suave); font-weight: 600; }
.listo-pie { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; width: 100%; max-width: 30rem; }
.listo-deseo { font-size: clamp(1.15rem, 1.8vmin + 0.6rem, 1.5rem); font-weight: 700; }
.listo-racha { color: var(--entrada); font-weight: 600; margin-top: 0.15rem; }

.animo { width: 100%; max-width: 30rem; display: flex; flex-direction: column; gap: 0.7rem; }
.animo-pregunta { margin: 0; font-family: var(--fuente-titulo); font-size: clamp(1.3rem, 2.4vmin + 0.6rem, 1.9rem); font-weight: 800; letter-spacing: -0.02em; }
.animo-caras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.animo-cara { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.9rem 0.4rem; border-radius: var(--radio-grande); border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); font: inherit; font-weight: 700; font-size: clamp(0.95rem, 1.2vmin + 0.55rem, 1.2rem); cursor: pointer; transition: transform 140ms var(--n-ease, ease-out); touch-action: manipulation; }
.animo-cara:active { transform: scale(0.95); }
.animo-pie { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.animo-pie .sutil { font-size: 0.85rem; }

.pantalla-nueva { width: 100%; max-width: 34rem; display: flex; flex-direction: column; gap: 0.9rem; text-align: left; }
.pantalla-nueva-cabeza h2 { margin: 0; font-family: var(--fuente-titulo); font-size: clamp(1.6rem, 3vmin + 0.6rem, 2.2rem); letter-spacing: -0.02em; }
.pantalla-nueva-cabeza p { margin: 0.2rem 0 0; color: var(--texto-suave); }
.vale-monto { display: flex; align-items: baseline; gap: 0.3rem; font-family: var(--fuente-titulo); }
.vale-monto b { font-size: clamp(3.5rem, 11vmin, 6rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.vale-monto span { font-size: clamp(1.4rem, 3vmin, 2rem); font-weight: 700; color: var(--texto-suave); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { min-height: 52px; padding: 0 1.2rem; border-radius: var(--radio); border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); font: inherit; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: transform 140ms var(--n-ease, ease-out), background-color 160ms ease; touch-action: manipulation; }
.chip:active { transform: scale(0.96); }
.chip.activo { background: #4b55e6; border-color: #4b55e6; color: #fff; }
.vale-para { margin: 0.3rem 0 0; font-weight: 700; }
.vale-para span { color: var(--texto-suave); font-weight: 500; }
body.kiosko.diseno-nuevo .pantalla-nueva .boton.enorme.primario { background: #4b55e6; color: #fff; }
.pantalla-nueva .enlace { align-self: center; }
.pasos-vale { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin: 0.6rem 0; padding: 0; list-style: none; }
.pasos-vale::before { content: ''; position: absolute; left: 16%; right: 16%; top: 17px; height: 2px; background: var(--borde); }
.pasos-vale li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; font-size: 0.9rem; font-weight: 600; color: var(--texto-suave); }
.pasos-vale .bola { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--superficie-2); border: 2px solid #2e3352; }
.pasos-vale li.hecho, .pasos-vale li.ahora { color: var(--texto); }
.pasos-vale li.hecho .bola { background: var(--entrada); border-color: var(--entrada); color: #052e1c; }
.pasos-vale li.ahora .bola { border-color: var(--primario); animation: n-ahora 2s ease-in-out infinite; }

.barras { display: flex; align-items: stretch; gap: 0.4rem; height: clamp(9rem, 26vmin, 14rem); }
.barra-dia { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
/* Sin abreviar: «7 h 30 min» y el nombre del día completos; si no caben, bajan de línea. */
.barra-horas { font-size: 0.78rem; font-weight: 700; min-height: 1.1em; text-align: center; line-height: 1.15; }
.barra-carril { flex: 1; width: 100%; max-width: 3rem; display: flex; align-items: flex-end; border-radius: var(--radio-chico); background: var(--superficie); }
.barra { width: 100%; border-radius: var(--radio-chico); background: #4b55e6; transform-origin: bottom; animation: n-crece 700ms var(--n-ease, ease-out) both; }
.barra-dia.hoy .barra { background: var(--entrada); }
.barra-dia.futuro .barra-carril { background: transparent; border: 1px dashed var(--borde); }
.barra-dia-nombre { font-size: 0.8rem; color: var(--texto-suave); text-transform: capitalize; text-align: center; line-height: 1.15; max-width: 100%; overflow-wrap: anywhere; }
.barra-dia.hoy .barra-dia-nombre { color: var(--texto); font-weight: 700; }
@keyframes n-crece { from { transform: scaleY(0.05); } }

@media (max-width: 480px) {
  .tarjeta-hoy-bolitas span { width: 28px; height: 28px; font-size: 0.75rem; }
  .listo-cifras { gap: 0.4rem; }
  .listo-cifras > div { padding: 0.55rem 0.6rem; }
  .chip { min-height: 46px; padding: 0 0.9rem; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tarjeta-hoy-ultima, .barra, .listo-check { animation: n-aparece 200ms ease both; }
  .pasos-vale li.ahora .bola { animation: none; }
  .animo-cara:active, .chip:active { transform: none; }
}

/* El panel: el ánimo del equipo en Hoy. */
.animo-barra { display: flex; gap: 2px; margin-top: 0.5rem; border-radius: var(--radio-chico); overflow: hidden; font-size: 0.8rem; font-weight: 700; }
.animo-barra span { min-width: 4.5rem; padding: 0.35rem 0.6rem; white-space: nowrap; color: #17160f; }
.animo-barra .animo-bien { background: #8fe8c2; }
.animo-barra .animo-regular { background: #ffe38a; }
.animo-barra .animo-dificil { background: #ffb9a3; }

/* ETAPA 5: «Marcar desde mi teléfono» con el diseño nuevo (lo elige la empresa). */
body.diseno-nuevo .telefono-cabecera { display: flex; align-items: center; gap: 0.7rem; }
body.diseno-nuevo .telefono-quien { flex: 1; }
body.diseno-nuevo .telefono .listo-nuevo { align-items: center; }
body.diseno-nuevo .telefono .listo-pie { justify-content: center; text-align: center; }
body.diseno-nuevo .telefono .animo { text-align: left; }
body.diseno-nuevo .telefono .pie-nezme { margin-top: 1.5rem; }
@media (max-width: 480px) {
  .tarjeta-ponchar { padding-right: 0.9rem; }
  .tarjeta-sello { padding: 0 0.3rem; font-size: 0.92rem; }
}

/* TERMINAL «SOLO VALES» (el teléfono de un camión): para quien casi no usa
   teléfono, cantidades grandes y un solo botón verde para pedir. */
.solo-vales-ayuda { font-size: 1.15rem; line-height: 1.4; margin: 0.2rem 0 0.6rem; color: var(--texto-suave); }
body.kiosko .vale-nuevo .chip.chip-grande { min-height: 76px; min-width: 6.5rem; font-size: 1.7rem; border-radius: var(--radio-grande); }
body.kiosko .vale-nuevo .boton.enorme.primario.boton-pedir-vale { background: var(--entrada); border-color: var(--entrada); color: #fff; min-height: 76px; font-size: 1.5rem; }
body.kiosko .vale-nuevo .boton.enorme.primario.boton-pedir-vale:disabled { opacity: 0.45; }
@media (max-width: 480px) {
  body.kiosko .vale-nuevo .chip.chip-grande { min-height: 64px; min-width: 5.2rem; font-size: 1.45rem; }
}

/* Reportes */
.lista-hojas { margin: 0; padding-left: 1.1rem; line-height: 1.6; }
.boton.deshabilitado { opacity: 0.45; pointer-events: none; }
/* Etiquetas largas (un feriado con nombre largo, «Aprendida · Tablet de la entrada»):
   en pantalla angosta se parten en dos renglones en vez de cortarse o montarse. */
.tabla td .etiqueta, .muestra-origen { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }

/* Terminal: hasta el primer toque, una pantalla entera para activar el sonido. */
.voz-bloqueo {
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  padding: 2rem; border: 0; background: var(--aviso-voz); color: #1a1a1a; font: inherit; text-align: center; cursor: pointer; touch-action: manipulation;
}
.voz-bloqueo-icono { display: grid; place-items: center; width: 140px; height: 140px; border-radius: 50%; background: rgb(255 255 255 / 0.55); animation: voz-latido-bloqueo 1.6s ease-in-out infinite; }
.voz-bloqueo-titulo { font-size: clamp(1.8rem, 6vw, 3rem); font-weight: 800; line-height: 1.15; max-width: 18ch; }
.voz-bloqueo-detalle { font-size: clamp(1.05rem, 3vw, 1.4rem); max-width: 30ch; line-height: 1.4; }
@keyframes voz-latido-bloqueo { 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .voz-bloqueo-icono { animation: none; } }

/* Importancia del anuncio (panel): tres botones grandes con su color. */
.prioridad-anuncio { border: 0; padding: 0; margin: 0 0 0.9rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.prioridad-anuncio legend { font-size: 0.88rem; font-weight: 650; margin-bottom: 0.3rem; padding: 0; }
.prioridad-opcion { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem 0.7rem; border-radius: var(--radio-control); border: 2px solid transparent; cursor: pointer; min-height: 56px; }
.prioridad-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.prioridad-opcion small { font-size: 0.78rem; line-height: 1.25; opacity: 0.9; }
.prioridad-urgente { background: #fde8e9; color: #8f1820; }
.prioridad-normal { background: #fff3c4; color: #6b4800; }
.prioridad-info { background: #ddf7ec; color: #085c41; }
.prioridad-opcion.activa { border-color: currentColor; box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 25%, transparent); }
.prioridad-opcion:focus-within { outline: 3px solid var(--primario); outline-offset: 2px; }
@media (max-width: 480px) { .prioridad-anuncio { grid-template-columns: minmax(0, 1fr); } }

/* IMPORTANCIA en el terminal: rojo urgente, amarillo normal, verde informativo.
   El color es el fondo de toda la tarjeta (se ve de lejos), con texto de alto
   contraste; el tipo («Reunión», «Aviso»…) sigue escrito. */
.anuncio-carrusel.prioridad-normal, .anuncio-personal.prioridad-normal { background: #ffe680; border-color: #c99a00; color: #1a1500; }
.anuncio-carrusel.prioridad-info, .anuncio-personal.prioridad-info { background: #1f8f5f; border-color: #0b7a56; color: #ffffff; }
.anuncio-carrusel.prioridad-urgente, .anuncio-personal.prioridad-urgente { background: #c4252f; border-color: #8f1820; color: #ffffff; }
:is(.anuncio-carrusel, .anuncio-personal):is(.prioridad-normal, .prioridad-info, .prioridad-urgente) :is(.anuncio-tipo, .anuncio-personal-texto, .sutil) { color: inherit; opacity: 0.92; }
:is(.anuncio-carrusel, .anuncio-personal):is(.prioridad-normal, .prioridad-info, .prioridad-urgente) .anuncio-icono { background: rgb(255 255 255 / 0.28); color: inherit; }
:is(.anuncio-carrusel):is(.prioridad-normal, .prioridad-info, .prioridad-urgente) .anuncio-puntos span { background: rgb(0 0 0 / 0.2); }
:is(.anuncio-carrusel):is(.prioridad-normal, .prioridad-info, .prioridad-urgente) .anuncio-puntos span.activo { background: currentColor; }
.anuncio-personal.prioridad-urgente .boton.primario, .anuncio-personal.prioridad-info .boton.primario { background: #ffffff; color: #1a1a1a; border-color: #ffffff; }
.anuncio-personal.prioridad-normal .boton.primario { background: #1a1500; color: #ffe680; border-color: #1a1500; }

/* URGENTE en la espera: rojo, grande, en lugar del reloj. */
.anuncio-urgente {
  width: 100%; max-width: 40rem; margin: clamp(0.6rem, 2vmin, 1.2rem) 0; padding: clamp(1rem, 3vmin, 1.8rem); border-radius: var(--radio-grande);
  background: #c4252f; color: #ffffff; text-align: left; display: flex; flex-direction: column; gap: 0.6rem;
  box-shadow: 0 18px 50px rgb(196 37 47 / 0.35); animation: n-anuncio 220ms var(--curva) both;
}
.anuncio-urgente-etiqueta { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: clamp(0.9rem, 1.6vmin + 0.4rem, 1.2rem); }
.anuncio-urgente-titulo { font-family: var(--fuente-titulo); font-weight: 800; font-size: clamp(1.6rem, 4.6vmin + 0.4rem, 3.2rem); line-height: 1.1; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.anuncio-urgente-texto { font-size: clamp(1.05rem, 2vmin + 0.5rem, 1.6rem); line-height: 1.35; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .anuncio-urgente { animation: n-aparece 200ms ease both; } }

/* Terminal mal puesto (con sensor): tapa la espera hasta que lo enderecen. */
.postura-bloqueo {
  position: fixed; inset: 0; z-index: 190; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem;
  padding: 2rem; background: #f28c28; color: #1a0f00; text-align: center;
}
.postura-bloqueo-icono { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; background: rgb(255 255 255 / 0.45); }
.postura-bloqueo-titulo { font-size: clamp(1.8rem, 6vw, 3rem); font-weight: 800; line-height: 1.1; }
.postura-bloqueo-detalle { font-size: clamp(1.05rem, 3vw, 1.4rem); max-width: 32ch; line-height: 1.4; }
.postura-bloqueo-medida { font-variant-numeric: tabular-nums; font-weight: 700; opacity: 0.85; }

/* «Saltar» de «¿Cómo estuvo su día?»: área de toque grande (con el ajuste sin
   scroll, en un teléfono chico quedaba de 27 px). */
.animo-pie .enlace { min-height: 64px; padding: 0.7rem 1.4rem; font-size: 1.05rem; }

/* HORARIOS: los turnos como una hoja de cálculo (elegir, asignar, rellenar)
   pero con la línea de NezTime: celdas de color por jornada con la hora
   completa, la persona fija a la izquierda, los días fijos arriba, y a la
   derecha lo que representa en horas y lempiras. La ventanita para asignar
   sale junto a la celda (en el teléfono, desde abajo). Colores de los tokens. */
.turnos-leyenda { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0.6rem 0; font-size: 0.85rem; }
.turnos-leyenda > span:not(.sutil) { padding: 0.15rem 0.55rem; border-radius: 999px; border: 1px solid var(--borde); }
.t-diurna { background: color-mix(in srgb, var(--c-diurna, #f5b800) 18%, var(--superficie)); }
.t-mixta { background: color-mix(in srgb, var(--c-mixta, #f07a1a) 22%, var(--superficie)); }
.t-nocturna { background: color-mix(in srgb, var(--c-nocturna, #4b55e6) 24%, var(--superficie)); }
/* El día libre, rayado (se ve de lejos que ese día no trabaja). */
.t-libre { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c-libre, #6b7280) 8%, var(--superficie)) 0 8px, color-mix(in srgb, var(--c-libre, #6b7280) 16%, var(--superficie)) 8px 16px); }
.t-vacaciones { background: color-mix(in srgb, var(--c-vacaciones, #0b7a56) 16%, var(--superficie)); }
.t-feriado { background: color-mix(in srgb, var(--c-feriado, #d6336c) 18%, var(--superficie)); }
.t-error { background: var(--malo-suave); }
.t-ausencia { background: color-mix(in srgb, var(--c-ausencia, #0284c7) 18%, var(--superficie)); }
.t-unavez { background: color-mix(in srgb, var(--c-unaVez, #0b8f80) 16%, var(--superficie)); }
.turno-marca { display: inline-flex; align-items: center; gap: 0.3rem; }
.turno-icono { display: inline-flex; vertical-align: -2px; margin-right: 0.2rem; }
/* La ausencia encima de un turno o una marca: etiqueta chica. */
.turno-ausencia { display: block; margin-top: 0.15rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: color-mix(in srgb, var(--c-ausencia, #0284c7) 60%, var(--texto)); overflow-wrap: anywhere; }
.turno-pop-tiene { margin: 0; font-size: 0.85rem; display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.turno-pop-editar, .turno-pop-ausencia { display: flex; flex-direction: column; gap: 0.5rem; }
.turno-pop-asistencia { display: flex; flex-direction: column; gap: 0.55rem; }
.turno-pop-asistencia .segmentado { flex-wrap: wrap; }
/* Lo que se le hace a lo elegido (asistencia, ausencia, bono): debajo de los turnos. */
.turno-pop-hacer { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-top: 0.6rem; border-top: 1px solid var(--borde); }
.turno-pop-hacer .boton { display: inline-flex; align-items: center; gap: 0.4rem; }
.turno-pop-hacer .hacer-asistencia { background: var(--bien-suave); color: var(--entrada); border-color: color-mix(in srgb, var(--entrada) 30%, transparent); }
.turno-pop-hacer .hacer-bono { background: var(--primario-suave); color: var(--primario-hover); border-color: color-mix(in srgb, var(--primario) 30%, transparent); }
.turno-pop-resultado { margin: 0; padding: 0.6rem 0.75rem; border-radius: var(--radio-chico); background: var(--superficie-2); font-size: 0.9rem; line-height: 1.45; }
.turno-pop-resultado.bien { background: var(--bien-suave); }
.turno-pop-resultado p { margin: 0; }
.turno-pop-resultado ul { margin: 0.3rem 0 0; padding-left: 1.1rem; max-height: 9rem; overflow-y: auto; }
.turno-pop-fila { display: grid; grid-template-columns: 1fr 5.2rem 6rem auto; gap: 0.35rem; align-items: center; }
.turno-pop-fila input, .turno-pop-fila select { min-height: 40px; min-width: 0; }
.turno-pop-fila small.error { grid-column: 1 / -1; color: var(--malo); }
.turno-pop-editar-enlace { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.3rem; }
.accesos-tabla code { font-size: 0.95rem; letter-spacing: 0.04em; }
.roles-tabla td:not(:first-child), .roles-tabla th:not(:first-child) { text-align: center; width: 8rem; }
.boton-i { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 1px solid var(--borde); background: var(--fondo-suave, transparent); color: var(--texto-suave); font: 700 0.7rem/1 Georgia, serif; font-style: italic; padding: 0; margin-left: 0.15rem; vertical-align: middle; cursor: pointer; }
.boton-i[aria-expanded='true'] { background: var(--primario); color: var(--primario-texto, #fff); border-color: var(--primario); }
.ayuda-texto { display: block; margin-top: 0.3rem; color: var(--texto-suave); font-weight: 400; line-height: 1.4; }
/* Dos filas pegadas abajo en Horarios (Horas del día y Pago del día): la primera se pega encima de la segunda. */
.hoja-tabla tfoot tr:first-child:not(:last-child) th, .hoja-tabla tfoot tr:first-child:not(:last-child) td { bottom: 2.4rem; }
/* Íconos de colores en el menú (body.iconos-color; Mi cuenta lo apaga). Tonos suaves, el activo sigue en iris. */
body.iconos-color :is(.menu, .barra-abajo) a:not(.activo)[data-icono='hoy'] .icono { color: #e0a100; }
body.iconos-color :is(.menu, .barra-abajo) a:not(.activo)[data-icono='check'] .icono { color: #16a34a; }
body.iconos-color :is(.menu, .barra-abajo) a:not(.activo)[data-icono='marcadas'] .icono { color: #0ea5e9; }
body.iconos-color :is(.menu, .barra-abajo) a:not(.activo)[data-icono='vales'] .icono { color: #f97316; }
body.iconos-color :is(.menu, .barra-abajo) a:not(.activo)[data-icono='reloj'] .icono { color: #8b5cf6; }
body.iconos-color :is(.menu, .barra-abajo) a:not(.activo)[data-icono='calendario'] .icono { color: #ec4899; }
body.iconos-color :is(.menu, .barra-abajo) a:not(.activo)[data-icono='mensaje'] .icono { color: #14b8a6; }
body.iconos-color :is(.menu, .barra-abajo) a:not(.activo)[data-icono='planilla'] .icono { color: #22c55e; }
body.iconos-color :is(.menu, .barra-abajo) a:not(.activo)[data-icono='reporte'] .icono { color: #6366f1; }
body.iconos-color :is(.menu, .barra-abajo) a:not(.activo)[data-icono='colaboradores'] .icono { color: #3b82f6; }
body.iconos-color :is(.menu, .barra-abajo) a:not(.activo)[data-icono='ajustes'] .icono { color: #64748b; }
body.iconos-color :is(.menu, .barra-abajo) a:not(.activo)[data-icono='administradores'] .icono { color: #a855f7; }
body.iconos-color :is(.menu, .barra-abajo) a:not(.activo)[data-icono='marcadores'] .icono { color: #0891b2; }
body.iconos-color :is(.menu, .barra-abajo) a:not(.activo)[data-icono='bitacora'] .icono { color: #78716c; }
/* La paleta «Ir a…» */
.paleta-fondo { position: fixed; inset: 0; z-index: 60; background: rgb(16 20 44 / 0.35); display: flex; align-items: flex-start; justify-content: center; padding: 10vh 1rem 1rem; }
.paleta { width: min(36rem, 100%); background: var(--superficie); color: var(--texto); border-radius: var(--radio); box-shadow: var(--sombra-alta); overflow: hidden; }
.paleta-campo { width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--borde); padding: 0.9rem 1rem; font: inherit; font-size: 1.1rem; background: transparent; color: inherit; outline: none; }
.paleta-lista { list-style: none; margin: 0; padding: 0.4rem; max-height: 50vh; overflow: auto; }
.paleta-lista li { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem; border-radius: var(--radio-chico); cursor: pointer; }
.paleta-lista li.elegida { background: var(--primario-suave); color: var(--primario); }
.paleta-titulo { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.paleta-tipo { font-size: 0.8rem; color: var(--texto-suave); }
.paleta-pie { margin: 0; padding: 0.4rem 1rem 0.7rem; font-size: 0.8rem; }
.paleta kbd, .menu-atajo kbd, .tarjeta kbd { font: 600 0.72rem/1 inherit; padding: 0.1rem 0.35rem; border: 1px solid var(--borde); border-radius: 5px; background: var(--superficie-2); margin: 0 0.1rem; }
.menu-atajo { all: unset; display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.6rem; border-radius: var(--radio-chico); cursor: pointer; color: var(--texto-suave); }
@media (hover: hover) and (pointer: fine) { .menu-atajo:hover { background: var(--superficie-2); } }
.menu-atajo:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }
/* En pantallas táctiles no hay Ctrl+K: se esconde solo la pista de teclas. */
@media (hover: none) { .menu-atajo kbd { display: none; } }
.consola-avisos-rapidos { margin-top: 0.8rem; }
.consola-avisos-rapidos h3 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.registro-pedido { margin: 0.6rem 0; padding: 0.9rem 1.1rem; border-radius: var(--radio-control); background: var(--primario-suave); border: 1px solid var(--primario); }
.registro-pedido-titulo { margin: 0 0 0.3rem; font-size: 1.3rem; }
.registro-remoto .vida-instruccion { margin-top: 0.4rem; }
.registro-remoto-panel { margin-top: 0.4rem; }
.registro-remoto-estado .enlace { margin-left: 0.3rem; }
.apk-aviso { margin: 0 var(--gutter, 1rem) 0.5rem; padding: 0.55rem 0.8rem; border-radius: var(--radio-control); background: #fff7d6; color: #5a4300; font-size: 0.95rem; }
.apk-aviso-boton { all: unset; display: flex; align-items: center; gap: 0.5rem; cursor: pointer; width: 100%; }
.apk-aviso-pasos { margin: 0.5rem 0 0; padding-left: 1.4rem; line-height: 1.45; }
.apk-aviso.version-aviso { background: #e6f0ff; color: #1b3a73; }
/* La versión nueva del terminal: ventana en el centro (sale solo sin nadie enfrente). */
.version-ventana { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1rem; background: rgb(5 7 14 / 0.55); }
.version-ventana-caja { width: min(30rem, 100%); background: var(--superficie, #fff); color: var(--texto, #0d1020); border-radius: var(--radio-grande); padding: 1.5rem; text-align: center; box-shadow: 0 24px 60px rgb(0 0 0 / 0.35); }
.version-ventana-caja .icono { color: var(--primario, #4b55e6); }
.version-ventana-caja h2 { margin: 0.5rem 0 0.4rem; font-size: 1.45rem; }
.version-ventana-caja p { margin: 0 0 1.1rem; color: var(--texto-suave, #4e5569); font-size: 1.05rem; }
.version-ventana-botones { display: grid; gap: 0.6rem; }
/* La versión nueva (al publicar): ventana que no deja seguir (public/js/version-nueva-ventana.js). */
.version-nueva-velo { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1rem; background: rgb(7 8 13 / 0.6); }
.version-nueva-caja { width: min(32rem, 100%); max-height: calc(100dvh - 2rem); overflow: auto; background: var(--superficie); color: var(--texto); border-radius: var(--radio-grande); padding: 1.5rem; box-shadow: 0 20px 60px rgb(0 0 0 / 0.35); }
.version-nueva-caja h2 { margin: 0 0 0.5rem; }
.version-nueva-lista { margin: 0.25rem 0 1.25rem; padding-left: 1.1rem; display: grid; gap: 0.5rem; }
.version-nueva-caja .boton { width: 100%; min-height: 48px; }
.aviso.version-nueva { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.apk-aviso-pie { margin: 0.4rem 0 0; font-size: 0.85rem; opacity: 0.8; }
.novedades-banda { animation: velo-entra 240ms var(--curva) both; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0 0 1rem; padding: 0.6rem 0.9rem; border-radius: var(--radio-control); background: var(--primario-suave); color: var(--texto); }
.novedades-banda > span { flex: 1; min-width: 12rem; }
.novedades-banda .icono { color: var(--primario); }
/* Falta el pago del contrato (la plataforma lo dice): banda ámbar arriba del panel, antes de las novedades. */
.aviso-pago { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0 0 1rem; padding: 0.6rem 0.9rem; border-radius: var(--radio-control); background: var(--atento-suave); color: var(--texto); border: 1px solid color-mix(in srgb, var(--atento) 35%, transparent); }
.aviso-pago > span { flex: 1; min-width: 12rem; }
.aviso-pago > .icono { color: var(--atento); flex: none; }
.aviso-pago-detalle { display: grid; grid-template-columns: max-content 1fr; gap: 0.45rem 1rem; margin: 0 0 0.8rem; }
.aviso-pago-detalle dt { color: var(--texto-suave); }
.aviso-pago-detalle dd { margin: 0; overflow-wrap: anywhere; }
.novedades-entrada h3 { margin: 0.2rem 0 0.4rem; font-size: 1.05rem; }
.novedades-lista { margin: 0 0 1rem; padding-left: 1.2rem; line-height: 1.45; }
.novedades-lista li + li { margin-top: 0.35rem; }
.novedades-apps { margin-bottom: 1rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--borde); }
.novedades-apps h3 { margin: 0.2rem 0 0.5rem; font-size: 1.05rem; }
.novedades-app + .novedades-app { margin-top: 0.8rem; }
.novedades-app-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.novedades-app-cabeza img { border-radius: var(--radio-chico); flex: none; }
.novedades-app-cabeza span { display: flex; flex-direction: column; flex: 1; min-width: 10rem; }
.novedades-app .novedades-lista { margin: 0.4rem 0 0; }
.novedades-lista .etiqueta { margin-right: 0.25rem; }
.puestos-horarios { margin-top: 1rem; }
.puestos-horarios h3 { margin: 0 0 0.3rem; font-size: 1rem; }
.puestos-horarios details { margin-bottom: 0.4rem; }
.perfil-resumen { margin-bottom: 1rem; }
.barra-lista { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.4rem 0 0.8rem; }
.barra-lista .colab-buscar { flex: 1 1 14rem; }
.barra-lista-exportar > summary { list-style: none; }
.barra-lista.compacta { margin: 0; }
/* El formulario de «Cambiar…» ocupa la fila entera (la fila es una cuadrícula de 3 columnas: antes caía en una sola y se veía raro). */
.dec-cambiar { flex-basis: 100%; }
.rev-fila.dec-fila > .dec-cambiar { grid-column: 1 / -1; max-width: none; }
.dec-cambiar .rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.6rem 1rem; }
.dec-cambiar .rev-acciones { flex-direction: row; }
.dec-excluidos .pildora { margin: 0.2rem 0.3rem 0 0; }
.anu-horas { display: flex; align-items: center; gap: 0.4rem; }
.anu-horas input { flex: 1; min-width: 0; }
.tablero-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem; }
.tablero-cabeza h2 { margin: 0; }
.tablero-rango { margin: 0.4rem 0 0.8rem; }
.tablero-cifras { margin-bottom: 0.8rem; }
.tablero .cifra .rotulo small { display: block; color: var(--texto-suave); font-weight: 500; }
.tops { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.8rem 1.2rem; }
.top h3 { margin: 0 0 0.3rem; font-size: 0.92rem; color: var(--texto-suave); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.top ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.top li { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; min-height: 34px; }
.top li a { display: flex; align-items: center; gap: 0.5rem; min-width: 0; color: inherit; text-decoration: none; }
.top-nombre { overflow-wrap: anywhere; }
.top li b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tablero-proximos { margin-top: 0.9rem; }
.tablero-proximos h3 { margin: 0 0 0.4rem; font-size: 0.92rem; color: var(--texto-suave); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.planilla-grupos { margin-bottom: 0.8rem; align-items: center; }
.planilla-grupos a.planilla-grupos-ajustes { padding: 0.4rem 0.6rem; }
.grupos-lista { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.8rem; }
.grupo-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; padding: 0.7rem 0.9rem; border: 1px solid var(--borde); border-radius: var(--radio-control); background: var(--superficie-2); }
.grupo-texto { flex: 1; min-width: 12rem; display: flex; flex-direction: column; }
.grupo-editar { flex-basis: 100%; }
.grupos-tabla select { min-height: 36px; }
.roles-tabla input[type=checkbox] { width: 22px; height: 22px; }
.transporte-quienes { margin-top: 1rem; }
.transporte-quienes h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.transporte-lista { display: flex; flex-direction: column; gap: 0.2rem; max-height: 22rem; overflow-y: auto; margin-top: 0.5rem; }
.transporte-fila { display: grid; grid-template-columns: minmax(0, 1fr) 7rem; gap: 0.5rem; align-items: center; }
.transporte-fila .casilla-linea { margin: 0; min-height: 36px; align-items: center; }
.transporte-fila input[inputmode] { min-height: 36px; min-width: 0; }
.vales-aqui { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.6rem; }
.vales-aqui-fila { display: grid; grid-template-columns: minmax(0, 1.6fr) 6rem minmax(0, 1.4fr) auto; gap: 0.35rem; align-items: center; }
.vales-aqui-fila select, .vales-aqui-fila input { min-width: 0; min-height: 40px; }
@media (max-width: 520px) { .vales-aqui-fila { grid-template-columns: 1fr 5.5rem auto; } .vales-aqui-fila input[aria-label="Motivo"] { grid-column: 1 / -1; } }
.personas { display: flex; flex-direction: column; gap: 0.5rem; }
.personas-modo { align-self: flex-start; }
.personas-lista { display: flex; flex-direction: column; gap: 0.45rem; border: 1px solid var(--borde); border-radius: var(--radio-control); padding: 0.6rem; background: var(--superficie-2); }
.personas-puestos { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.personas-puestos .boton.activo { background: var(--primario-suave); color: var(--primario); }
.personas-casillas { max-height: 14rem; overflow-y: auto; padding: 0 0.2rem; }
.personas-casillas .casilla-linea { margin: 0; min-height: 36px; align-items: center; }
.personas-pie { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; }
.categorias-grupo h3 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.categoria-fila { display: flex; gap: 0.4rem; align-items: center; margin-bottom: 0.35rem; }
.categoria-fila input { flex: 1; min-width: 0; }
.categoria-nueva { align-items: flex-end; margin-top: 0.8rem; }
.lista-sencilla { margin: 0.4rem 0 0.8rem; padding-left: 1.2rem; }
.lista-sencilla li + li { margin-top: 0.2rem; }
.hoja-periodo { font-weight: 600; font-variant-numeric: tabular-nums; padding: 0 0.2rem; align-self: center; }
.horario-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.6rem; margin-bottom: 0.9rem; }
.hor-detalle td { padding: 0.35rem 0.5rem; }
.hor-detalle-total td { border-top: 2px solid var(--borde); }
.horario-resumen > div { background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); padding: 0.75rem 0.95rem; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.horario-resumen span { font-size: 0.8rem; color: var(--texto-suave); }
.horario-resumen b { font-family: var(--fuente-titulo); font-size: 1.35rem; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; transition: opacity var(--rapido) var(--curva); }
.horario-resumen small { font-size: 0.8rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.horario-resumen .destacado { background: var(--primario); color: var(--primario-texto); }
.horario-resumen .destacado span, .horario-resumen .destacado small { color: color-mix(in srgb, var(--primario-texto) 92%, transparent); }
.horario-resumen-ver { display: none; }
@media (max-width: 640px) {
  .horario-resumen { grid-template-columns: 1fr; }
  .horario-resumen:not(.abierto) > div:not(.destacado) { display: none; }
  .horario-resumen .destacado { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 0.6rem; }
  .horario-resumen-ver { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; padding: 0 0.2rem; background: none; border: 0; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
}
.horario-resumen small { transition: opacity var(--rapido) var(--curva); }
.horario-resumen .calculando, .hoja-calc.calculando { opacity: 0.45; transition-delay: 150ms; }
.horario-barra { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; justify-content: space-between; margin-bottom: 0.7rem; }
.horario-areas { overflow-x: auto; max-width: 100%; }
.horario-barra .boton svg { width: 16px; height: 16px; }
.hoja { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); overflow: hidden; box-shadow: var(--sombra); }
/* Del alto de la pantalla (menos la barra de estado): al bajar, la hoja la ocupa entera y se ven muchas personas a la vez. */
.hoja-rejilla { overflow: auto; -webkit-overflow-scrolling: touch; max-height: max(20rem, calc(100dvh - 5.5rem)); outline: none; scroll-padding: 3.4rem 0 2.6rem 11rem; }
.hoja-tabla:focus { outline: none; }
.hoja-rejilla:has(> .hoja-tabla:focus-visible) { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primario) 35%, transparent); }
.hoja-tabla { border-collapse: separate; border-spacing: 0; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.hoja-tabla th, .hoja-tabla td { border-right: 1px solid var(--borde); border-bottom: 1px solid var(--borde); padding: 0; }
.hoja-tabla thead th { position: sticky; top: 0; z-index: 3; background: var(--superficie); color: var(--texto-suave); font-weight: 500; text-align: center; padding: 0.45rem 0.4rem; border-bottom: 1px solid color-mix(in srgb, var(--texto) 14%, transparent); }
.hoja-dia { min-width: 5.6rem; }
.hoja-dia span { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.hoja-dia b { display: block; color: var(--texto); font-size: 1.05rem; }
.hoja-dia small { display: block; font-size: 0.75rem; color: var(--malo); font-weight: 600; }
/* El día de arriba elige ese día de todas las personas; «Persona», toda la hoja. */
.hoja-dia-boton, .hoja-elegir-todo { all: unset; display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 44px; box-sizing: border-box; cursor: pointer; border-radius: 8px; text-align: inherit; }
@media (hover: hover) and (pointer: fine) { .hoja-dia-boton:hover, .hoja-elegir-todo:hover { color: var(--primario); } }
.hoja-dia-boton:focus-visible, .hoja-elegir-todo:focus-visible { box-shadow: var(--anillo-foco); }
.hoja-dia.es-feriado { background: color-mix(in srgb, #d6336c 10%, var(--superficie)) !important; }
.hoja-dia.es-domingo span { color: var(--malo); }
.hoja-dia.activa b, .hoja-dia.activa span { color: var(--primario); }
.hoja-pegada { position: sticky; left: 0; z-index: 2; }
.hoja-tabla thead .hoja-pegada { z-index: 5; }
.hoja-persona { background: var(--superficie); text-align: left; padding: 0.4rem 0.7rem 0.4rem 0.85rem !important; width: 13.5rem; min-width: 13.5rem; max-width: 13.5rem; font-weight: 600; color: var(--texto); box-shadow: inset 4px 0 0 var(--puesto-color, transparent), 1px 0 0 var(--borde), 6px 0 10px -8px rgb(13 16 32 / 0.25); }
.hoja-persona span, .hoja-persona small, .hoja-persona .hoja-nombre { display: block; overflow: hidden; white-space: normal; line-height: 1.25; }
.hoja-persona small { font-weight: 400; font-size: 0.75rem; color: var(--texto-suave); }
.hoja-persona .hoja-nombre { color: var(--texto); text-decoration: none; font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .hoja-persona .hoja-nombre:hover { color: var(--primario); text-decoration: underline; } }
.hoja-persona .hoja-puesto b { color: color-mix(in srgb, var(--puesto-color, var(--texto)) 58%, var(--texto)); font-weight: 700; }
.hoja-persona .hoja-etiquetas { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.15rem; }
.hoja-persona .hoja-etiquetas span { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 0.05rem 0.4rem; border-radius: 999px; letter-spacing: 0.02em; }
.hoja-persona .hoja-etiquetas .sin-horario { color: var(--atento); background: color-mix(in srgb, var(--atento) 14%, transparent); }
.hoja-persona .hoja-etiquetas .con-pin { color: var(--entrada); background: color-mix(in srgb, var(--entrada) 14%, transparent); }
.hoja-persona .hoja-etiquetas .tope-propio { color: var(--primario); background: color-mix(in srgb, var(--primario) 12%, transparent); }
.hoja-persona .hoja-etiquetas .sin-pin { color: var(--texto-suave); background: color-mix(in srgb, var(--texto-suave) 14%, transparent); }
.hoja-persona small.sin-horario { color: var(--atento); font-weight: 600; }
.hoja-persona.activa { box-shadow: inset 3px 0 0 var(--primario), 1px 0 0 var(--borde), 6px 0 10px -8px rgb(13 16 32 / 0.25); }
.hoja-tabla thead .hoja-persona { text-align: left; }
.hoja-celda { transition: background-color 120ms ease; position: relative; text-align: center; min-width: 8.2rem; height: 3.3rem; padding: 0.3rem !important; color: var(--texto); cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; vertical-align: middle; }
@media (hover: hover) and (pointer: fine) { .hoja-celda:hover { box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--primario) 5%, transparent); } }
.hoja-celda.elegida { box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--primario) 13%, transparent); }
.hoja-celda.activa { outline: 2px solid var(--primario); outline-offset: -2px; z-index: 1; touch-action: none; }
.hoja-celda.rellenando { outline: 1.5px dashed var(--primario); outline-offset: -3px; }
.hoja-celda.editando { padding: 0 !important; }
.turno-tramo { display: block; line-height: 1.2; white-space: nowrap; }
.turno-tramo b { display: block; font-weight: 700; font-size: 0.8rem; color: var(--texto); }
.turno-tramo span { display: block; font-size: 0.75rem; color: var(--texto-suave); }
.turno-tramo + .turno-tramo { margin-top: 0.2rem; padding-top: 0.2rem; border-top: 1px dashed color-mix(in srgb, var(--texto) 20%, transparent); }
.turno-nombre { display: block; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--primario); margin-bottom: 0.1rem; }
.turno-marca { font-weight: 650; font-size: 0.85rem; }
/* LA PISTA DE QUE HAY MÁS A LA DERECHA: en las listas que se deslizan de lado
   (pestañas, atajos, la hoja), un degradado en la orilla mientras quede más,
   y una barra de desplazamiento que sí se ve y se arrastra (ver desliza.js). */
.casillas-puestos { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }
.casillas-puestos .casilla-linea { min-height: 36px; }
.avatar.avatar-foto { padding: 0; overflow: hidden; background: var(--superficie-2); }
.avatar.avatar-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.desliza { position: relative; }
/* Las piezas van DENTRO de la caja que se desliza: desliza.js les pone
   transform: translateX(scrollLeft) para que sigan en la orilla visible
   (`translate` es aparte de `transform`, así el centrado vertical no se pierde). */
.desliza-sombra { position: absolute; top: 0; bottom: 0; width: 3rem; left: 0; pointer-events: none; opacity: 0; transition: opacity 200ms ease; border-radius: inherit; }
.desliza-sombra-der { left: calc(100% - 3rem); background: linear-gradient(to right, transparent, var(--fondo, var(--superficie-2)) 85%); }
.desliza-sombra-izq { background: linear-gradient(to left, transparent, var(--fondo, var(--superficie-2)) 85%); }
.desliza.con-mas > .desliza-sombra-der, .desliza.con-antes > .desliza-sombra-izq { opacity: 1; }
/* LA BARRA DE DESPLAZAMIENTO siempre visible (desliza.js la pone en las cajas de
   bloque: tablas y la hoja). Pegada (sticky) a la orilla izquierda y abajo: no
   se va con el contenido y el dedo cae donde se ve. El mango se arrastra. */
.desliza-barra { position: sticky; left: 0; bottom: 0; z-index: 12; width: 100%; box-sizing: border-box; display: none; padding: 0.45rem 0.25rem 0.3rem; background: var(--fondo, var(--superficie)); touch-action: none; user-select: none; -webkit-user-select: none; }
.desliza.con-barra > .desliza-barra { display: block; }
.desliza-pista { position: relative; height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--texto) 10%, transparent); cursor: pointer; }
/* Zona de toque más alta que la pista (31 px) sin que se vea; no se sale por abajo de la barra. */
.desliza-pista::before { content: ''; position: absolute; inset: -17px 0 -4px; }
.desliza-mango { position: absolute; top: 0; bottom: 0; left: 0; width: 20%; min-width: 2.5rem; border-radius: 999px; background: color-mix(in srgb, var(--texto) 38%, transparent); transition: background 160ms ease; }
@media (hover: hover) and (pointer: fine) { .desliza-pista:hover .desliza-mango, .desliza-barra.arrastrando .desliza-mango { background: var(--primario); } }
.tarjeta .desliza-barra, .hoja-rejilla > .desliza-barra { background: var(--superficie); }
/* El círculo de los atajos flota abajo a la derecha: la pista termina antes para que no lo tape. */
body:has(.atajos) .desliza-barra { padding-right: 4.6rem; }
.hoja-rejilla.desliza > .desliza-sombra { width: 2rem; }
.hoja-rejilla.desliza > .desliza-sombra-der { left: calc(100% - 2rem); background: linear-gradient(to right, transparent, color-mix(in srgb, var(--texto) 10%, transparent)); }
.hoja-rejilla.desliza > .desliza-sombra-izq { background: linear-gradient(to left, transparent, color-mix(in srgb, var(--texto) 10%, transparent)); }
/* Los filtros (segmentado) no llevan sombra: el degradado se ve raro sobre la pastilla. */
.colab-segmentos.desliza > .desliza-sombra { display: none; }
/* Lo que suma la celda: sus horas y lo que gana ese día. */
.turno-suma { transition: opacity var(--rapido) var(--curva); display: block; margin-top: 0.05rem; font-size: 0.75rem; font-weight: 600; color: var(--texto-suave); white-space: nowrap; letter-spacing: 0.01em; }
.turno-suma b { color: var(--texto); font-weight: 800; }
/* Lo marcado ese día, debajo del turno: verde si vino, ámbar si quedó a medias, rojo si no marcó. */
.turno-marcado { display: block; margin-top: 0.05rem; font-size: 0.75rem; font-weight: 600; white-space: normal; line-height: 1.25; }
.turno-marcado.bien { color: var(--entrada); }
.turno-marcado.atento { color: var(--atento); }
/* Lo que se le rebaja ese día (Vales y faltantes): debajo de lo marcado, en el color de lo que se descuenta. */
.turno-rebaja { display: block; margin-top: 0.05rem; font-size: 0.75rem; font-weight: 600; line-height: 1.25; white-space: normal; color: var(--malo); }
.hoja-calc.hoja-rebaja { color: var(--malo); }
/* Planilla y boleta: el vale y el faltante de cada día. */
.rebaja, .bd-rebaja { color: var(--malo); font-weight: 600; }
.bd-rebaja { font-size: 0.85em; }
.planilla-rebajas { margin: 0.4rem 0; }
.turno-marcado.mal { color: var(--malo); }
.turno-marcado b { font-weight: 800; }
.hoja-celda { height: auto; min-height: 3.3rem; }
.turno-suma.calculando { opacity: 0.5; }
.turno-error { color: var(--malo); font-weight: 600; }
.hoja-entrada { position: absolute; inset: 0; width: 100%; min-width: 8rem; height: 100%; box-sizing: border-box; border: 2px solid var(--primario); border-radius: 0; background: var(--superficie); color: var(--texto); font: inherit; font-size: 16px; padding: 0 0.4rem; outline: none; z-index: 4; text-align: center; }
.hoja-asa { position: absolute; right: -5px; bottom: -5px; width: 10px; height: 10px; border-radius: 3px; background: var(--primario); border: 2px solid var(--superficie); z-index: 4; cursor: crosshair; touch-action: none; }
.hoja-asa::after { content: ''; position: absolute; inset: -14px; }
.hoja-calc { text-align: right; padding: 0 0.6rem !important; min-width: 4rem; white-space: nowrap; color: var(--texto-suave); background: color-mix(in srgb, var(--texto-suave) 4%, var(--superficie)); transition: opacity var(--rapido) var(--curva); }
.hoja-calc small { display: block; font-size: 0.75rem; }
/* La columna Bono: se toca para ponerlo; con «+» cuando no hay. */
.hoja-bono { cursor: pointer; }
/* El período que se ve en Horarios, en grande. */
.periodo-grande { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; font-size: 1.35rem; line-height: 1.2; }
.periodo-grande b { font-weight: 800; letter-spacing: -0.01em; }
.hoja-bono .falta-bono { display: block; color: var(--malo); font-weight: 700; white-space: normal; }
/* Transporte: el ícono con lo que se paga ese día, y la columna que se toca para darlo o quitarlo. */
.turno-transporte { display: inline-flex; align-items: center; gap: 0.2rem; margin-top: 0.1rem; padding: 0.05rem 0.35rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; color: var(--agua-texto); background: color-mix(in srgb, var(--agua) 16%, transparent); }
.hoja-transporte { cursor: pointer; }
.hoja-transporte small { display: block; }
@media (hover: hover) and (pointer: fine) { .hoja-transporte:hover { box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--primario) 8%, transparent); } }
@media (hover: hover) and (pointer: fine) { .hoja-bono:hover { box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--primario) 8%, transparent); } }
.hoja-bono .hoja-mas { display: inline-block; width: 1.5rem; height: 1.5rem; line-height: 1.5rem; border-radius: 999px; text-align: center; color: var(--primario); background: color-mix(in srgb, var(--primario) 12%, transparent); font-weight: 800; }
.hoja-tabla thead .hoja-calc { text-align: right; }
.hoja-calc.pasa { color: var(--malo); font-weight: 700; }
.hoja-calc.justo { color: var(--entrada); font-weight: 700; }
.hoja-calc.falta { color: var(--atento); font-weight: 700; }
/* La semana contra su tope (Horarios): verde dentro, ámbar cerca de la extra, rojo con extra. */
.hoja-calc.dentro { color: var(--entrada); }
.hoja-calc.cerca { color: var(--atento); }
.hoja-horas { white-space: normal !important; min-width: 11rem; max-width: 13rem; vertical-align: middle; padding: 0 !important; line-height: 1.2; }
/* Toda la casilla cambia la hora extra; la barra de la semana va como raya de abajo (no suma alto). */
.hoja-horas-boton { all: unset; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; gap: 0.1rem; width: 100%; min-height: 44px; padding: 0.25rem 0.55rem 0.35rem; text-align: right; cursor: pointer;
  background: linear-gradient(currentColor, currentColor) left bottom / var(--barra, 0%) 4px no-repeat; }
@media (hover: hover) and (pointer: fine) { .hoja-horas-boton:hover .hoja-tope { color: var(--primario); } }
.hoja-horas-boton:focus-visible { box-shadow: inset var(--anillo-foco); }
.hoja-horas-linea { display: block; }
.hoja-horas b { font-size: 0.92rem; }
.hoja-horas small { font-size: 0.75rem; }
.hoja-estado-tope { font-weight: 700; }
.hoja-tope { display: block; font-size: 0.75rem; font-weight: 600; color: var(--texto-suave); text-decoration: underline dashed; text-underline-offset: 3px; }
.turno-pop-hacer .hacer-dia { background: color-mix(in srgb, #0b8f80 12%, var(--superficie)); color: #0b6b60; border-color: color-mix(in srgb, #0b8f80 30%, transparent); }
.turno-pop-quienes { border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 0.4rem 0.6rem; }
.turno-pop-quienes summary { cursor: pointer; padding: 0.35rem 0; font-size: 0.9rem; line-height: 1.4; }
.turno-pop-quienes-lista { display: flex; flex-direction: column; max-height: 12rem; overflow-y: auto; }
.turno-pop-grupo { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; }
.turno-pop-grupo legend { font-weight: 600; font-size: 0.9rem; padding: 0 0 0.2rem; }
/* Lo distinto de un día en la casilla: puesto de ese día (con su color), cómo marca, lo que gana. */
.turno-distinto { --puesto-color: var(--c-distinto, #7c3aed); display: block; margin-top: 0.15rem; padding: 0.15rem 0.35rem; border-radius: 6px; font-size: 0.75rem; font-weight: 700; line-height: 1.3; white-space: normal; color: color-mix(in srgb, var(--puesto-color) 55%, var(--texto)); background: color-mix(in srgb, var(--puesto-color) 12%, var(--superficie)); }
.turno-pop-hacer .hacer-tope { background: var(--atento-suave); color: var(--atento); border-color: color-mix(in srgb, var(--atento) 30%, transparent); }
.hoja-sep { border-left: 2px solid var(--borde); }
.hoja-total { min-width: 6.5rem; color: var(--texto); font-weight: 650; }
/* El total de cada persona queda siempre a la vista, a la derecha (como inmovilizar la columna). */
@media (min-width: 641px) {
  .hoja-tabla .hoja-total { position: sticky; right: 0; z-index: 2; background: color-mix(in srgb, var(--primario) 6%, var(--superficie)); box-shadow: -1px 0 0 var(--borde), -6px 0 10px -8px rgb(13 16 32 / 0.25); }
  .hoja-tabla thead .hoja-total { z-index: 5; }
  .hoja-tabla tfoot .hoja-total { z-index: 4; background: color-mix(in srgb, var(--primario) 10%, var(--superficie-2)); }
}
.hoja-total.bajo-minimo { color: var(--atento); }
.hoja-total .le-queda, .hoja-total small:last-child { white-space: nowrap; }
.hoja-total .le-queda { color: var(--texto); font-weight: 700; }
.hoja-total .si-cumple { white-space: nowrap; }
.horario-resumen .destacado .si-cumple { display: block; }
.hoja-tabla tfoot th, .hoja-tabla tfoot td { font-weight: 600; position: sticky; bottom: 0; z-index: 2; background: var(--superficie-2); height: 2.4rem; border-top: 1px solid color-mix(in srgb, var(--texto) 14%, transparent); }
.hoja-tabla tfoot .hoja-pegada { z-index: 4; }
.hoja-estado { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 0.45rem 0.8rem; font-size: 0.8rem; color: var(--texto-suave); border-top: 1px solid var(--borde); min-width: 0; }
.hoja-estado-der { text-align: right; overflow-wrap: anywhere; }
.hoja-ayuda { margin: 0.6rem 0 0; font-size: 0.85rem; }
/* La ventanita para asignar el turno. */
.turno-pop { position: fixed; z-index: 60; width: min(23rem, calc(100vw - 16px)); max-height: min(34rem, calc(100dvh - 16px)); overflow-y: auto; background: var(--superficie); border-radius: var(--radio-grande); box-shadow: var(--sombra-alta); border: 1px solid var(--borde); padding: 0.9rem; display: flex; flex-direction: column; gap: 0.8rem;
  /* Se abre decenas de veces al armar un horario: corta (150 ms) y nace desde la casilla tocada. */
  transform-origin: var(--origen, top left); animation: pop-entra 150ms var(--curva); }
.turno-pop.abajo { left: 0; right: 0; bottom: 0; width: auto; max-height: 78dvh; border-radius: var(--radio-grande) var(--radio-grande) 0 0; padding-bottom: max(1rem, env(safe-area-inset-bottom)); animation: hoja-entra 220ms var(--curva-cajon); }
@keyframes pop-entra { from { opacity: 0; transform: scale(0.97); } }
@media (prefers-reduced-motion: reduce) { .turno-pop { animation: none; } }
.turno-pop-cabeza { display: flex; gap: 0.6rem; align-items: flex-start; }
.turno-pop-cabeza > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.turno-pop-cabeza b { font-size: 1rem; overflow-wrap: anywhere; }
.turno-pop-cabeza span { font-size: 0.85rem; color: var(--texto-suave); }
.turno-pop-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
.turno-opcion { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; text-align: left; padding: 0.6rem 0.7rem; border-radius: var(--radio-control); border: 1.5px solid transparent; color: var(--texto); font: inherit; cursor: pointer; min-height: 44px; transition: transform var(--rapido) var(--curva), border-color var(--rapido) ease; }
.turno-opcion b { font-size: 0.92rem; }
.turno-opcion span { font-size: 0.78rem; line-height: 1.3; }
.turno-opcion small { font-size: 0.75rem; color: var(--texto-suave); }
@media (hover: hover) and (pointer: fine) { .turno-opcion:hover { border-color: color-mix(in srgb, var(--texto) 25%, transparent); } }
.turno-opcion.elegido { border-color: var(--primario); }
.turno-opcion:active { transform: scale(0.98); }
.turno-pop-marcas { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.turno-pop-marcas .boton { flex: 1 1 auto; }
.turno-sin { color: var(--malo); }
.turno-pop-otro { display: flex; flex-direction: column; gap: 0.5rem; border-top: 1px solid var(--borde); padding-top: 0.7rem; }
.turno-pop-horas { display: flex; gap: 0.5rem; align-items: flex-end; }
.turno-pop-horas .campo { flex: 1; margin: 0; min-width: 0; }
.turno-pop-horas select { width: 100%; }
.turno-pop-poner { display: flex; gap: 0.6rem; align-items: center; justify-content: space-between; }
.turno-pop-poner span { font-size: 0.85rem; }
.turno-pop-guardar { display: flex; flex-direction: column; gap: 0.5rem; }
.turno-pop-guardar p { margin: 0; }
.turno-pop-guardar p svg { width: 16px; height: 16px; color: var(--entrada); vertical-align: -3px; }
.turnos-pie { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-top: 1rem; }
.lista-avisos { margin: 0.4rem 0; padding-left: 1.1rem; }
.lista-avisos li { margin: 0.25rem 0; }
@media (max-width: 640px) {
  .hoja-persona { width: 9.2rem; min-width: 9.2rem; max-width: 9.2rem; font-size: 0.8rem; padding: 0.35rem 0.5rem 0.35rem 0.65rem !important; }
  .hoja-rejilla { scroll-padding-left: 7.8rem; }
  .hoja-dia, .hoja-celda { min-width: 5.8rem; }
  .horario-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .horario-resumen b { font-size: 1.15rem; }
}

/* COMPARAR Y ELEGIR: una tarjeta por forma de pagar, el desglose por concepto
   y la tabla persona por persona (la forma con que se le paga, resaltada). */
.comparar-formas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.comparar-forma { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; }
.comparar-forma h2 { margin: 0; }
.comparar-forma.elegida { outline: 2px solid var(--entrada); }
.comparar-forma .cifra { padding: 0; }
.comparar-forma .boton { align-self: flex-start; margin-top: auto; }
.comparar-mas { color: var(--malo); font-weight: 600; margin: 0; }
.comparar-menos { color: var(--entrada); font-weight: 600; margin: 0; }
.fila-total td { font-weight: 700; border-top: 2px solid var(--borde); }
.comparar-suya { background: color-mix(in srgb, var(--entrada) 12%, var(--superficie)); font-weight: 600; }
.comparar-detalle > td { background: color-mix(in srgb, var(--texto-suave) 5%, var(--superficie)); }

.comparar-elegir { font-size: 16px; min-width: 15rem; }
.comparar-personas .titulo-fila .enlace { font-weight: 700; }

/* Aviso breve abajo («queda pendiente de aprobación»): se va solo. */
.aviso-breve { position: fixed; left: 50%; bottom: calc(1.2rem + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 1000;
  max-width: min(92vw, 520px); padding: 0.85rem 1.1rem; border-radius: var(--radio); background: var(--texto); color: var(--superficie);
  box-shadow: var(--sombra-alta); font-weight: 600; transition: opacity var(--normal) var(--curva), transform var(--normal) var(--curva); }
.aviso-breve.saliendo { opacity: 0; transform: translate(-50%, 8px); }
/* Entra igual que sale: desde abajo, suave. */
@starting-style { .aviso-breve { opacity: 0; transform: translate(-50%, 8px); } }
@media (max-width: 900px) { .aviso-breve { bottom: calc(5.5rem + env(safe-area-inset-bottom)); } }

/* POR REVISAR: cada cosa en una fila, con sus botones a la derecha (abajo en el teléfono). */
.lista-revisar { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.lista-revisar > li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--borde); }
.lista-revisar > li:last-child { border-bottom: 0; }
.lista-revisar > li > div:first-child { flex: 1 1 22rem; min-width: 0; }
.lista-revisar .fila-botones { margin: 0; }
.campo-junto { flex-direction: row; align-items: center; gap: 0.4rem; margin: 0; }
.campo-junto input { font-size: 16px; }
/* Las listas de los niveles de aviso, del ancho de su opción más larga (nunca cortadas). */
.telegram-niveles-lista select { flex: none; width: auto; min-width: max-content; }

/* Mi portal: el tiempo fuera del turno por autorizar, y «Algo no me cuadra». */
.dp-por-autorizar { color: var(--atento); font-weight: 600; font-size: 0.92rem; }
.dp-reclamo { font-size: 0.9rem; min-height: 32px; padding: 0.2rem 0; }
.dp-reclamo-form { margin-top: 0.6rem; padding: 0.8rem; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--fondo); }
.dp-reclamo-form select, .dp-reclamo-form input { font-size: 16px; }

/* ── El PIN en el terminal (pin-terminal.js): nombres y teclado ───────── */
.pin-terminal { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; }
.pin-letras { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pin-letras .boton { min-width: 56px; min-height: 56px; font-size: 1.25rem; font-weight: 700; }
.pin-nombres { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem; }
.pin-nombres .boton { justify-content: flex-start; text-align: left; min-height: 64px; font-size: 1.15rem; }
.pin-puntos { display: flex; gap: 0.9rem; justify-content: center; padding: 0.4rem 0; }
.pin-punto { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--borde-control); transition: background var(--rapido) var(--curva), transform var(--rapido) var(--curva); }
.pin-punto.opcional { border-style: dashed; opacity: 0.55; }
.pin-punto.lleno { background: var(--primario); border-color: var(--primario); border-style: solid; opacity: 1; transform: scale(1.08); }
.pin-teclado { display: grid; grid-template-columns: repeat(3, minmax(72px, 1fr)); gap: 0.7rem; max-width: 420px; width: 100%; margin: 0 auto; }
.pin-acciones { justify-content: center; }
.pin-acciones .boton, .pin-terminal > .fila-botones .boton { min-height: 52px; min-width: 120px; }
.pin-tecla { min-height: clamp(56px, 9vh, 76px); border-radius: var(--radio-grande); border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); font: 650 2rem/1 var(--fuente-titulo); font-variant-numeric: tabular-nums; box-shadow: var(--sombra); cursor: pointer; touch-action: manipulation; display: grid; place-items: center; transition: transform var(--rapido) var(--curva); }
.pin-tecla:active:not(:disabled) { transform: scale(0.96); }
.pin-tecla:disabled { opacity: 0.45; cursor: default; }
.pin-tecla.pin-ok { background: var(--entrada); border-color: transparent; color: #fff; }
.pin-tecla.pin-borrar { color: var(--texto-suave); }
@media (prefers-reduced-motion: reduce) { .pin-tecla, .pin-punto { transition: none; } }
/* Por revisar → registros con PIN: la foto del registro junto a la de su rostro. */
.lista-revisar > li.registro-pin { justify-content: flex-start; }
.lista-revisar > li.registro-pin > .pin-fotos { flex: 0 0 auto; }
.lista-revisar > li.registro-pin > div:last-child { flex: 1 1 16rem; min-width: 0; }
.pin-fotos { display: flex; gap: 0.6rem; }
.pin-fotos figure { margin: 0; display: grid; gap: 0.25rem; justify-items: center; }
.pin-fotos img, .pin-fotos .sin-foto { width: 112px; height: 112px; object-fit: cover; border-radius: var(--radio-chico); background: var(--fondo); display: grid; place-items: center; text-align: center; font-size: 0.8rem; color: var(--texto-suave); }
.pin-fotos figcaption { font-size: 0.8rem; color: var(--texto-suave); }
/* Horarios: la leyenda de cómo va cada semana contra la jornada. */
.turnos-justo { color: var(--entrada); font-weight: 700; }
.turnos-falta { color: var(--atento); font-weight: 700; }
.turnos-pasa { color: var(--malo); }
.monto-tabla { width: 7.5rem; text-align: right; font-size: 16px; font-variant-numeric: tabular-nums; }
.campo-ancho { grid-column: 1 / -1; }

/* ---- LA PUERTA ÚNICA (/entrar, ver js/entrar.js) ----------------------------
   Teléfono: la marca arriba en noche, el formulario abajo. Computadora: dos
   columnas, la marca a la izquierda de alto completo. La marca es noche en los
   dos temas; el formulario sigue el tema. */
body.puerta { background: var(--fondo); min-height: 100dvh; }
.puerta-pagina { min-height: 100dvh; display: flex; flex-direction: column; }
.puerta-marca {
  background: #0e1018; color: #f3f4f9; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center;
  padding: calc(2.6rem + env(safe-area-inset-top, 0px)) max(1.5rem, env(safe-area-inset-right, 0px)) 1.6rem max(1.5rem, env(safe-area-inset-left, 0px));
  border-radius: 0 0 28px 28px;
}
.puerta-icono { width: 64px; height: 64px; border-radius: var(--radio-control); }
.puerta-empresa h1 { margin: 0; font-family: var(--fuente-titulo); font-size: 1.4rem; font-weight: 750; letter-spacing: -0.01em; text-wrap: balance; overflow-wrap: anywhere; }
.puerta-sitio { margin: 0.2rem 0 0; font-size: 0.88rem; color: #a9aec2; overflow-wrap: anywhere; }
.puerta-lema { display: none; }
.puerta-cuerpo { flex: 1; display: flex; justify-content: center; padding: 1.6rem max(1.5rem, env(safe-area-inset-right, 0px)) calc(1.2rem + env(safe-area-inset-bottom, 0px)) max(1.5rem, env(safe-area-inset-left, 0px)); }
.puerta-formulario { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 0.2rem; }
.puerta-titulo { margin-bottom: 0.8rem; }
.puerta-titulo h2 { margin: 0; font-family: var(--fuente-titulo); font-size: 1.75rem; font-weight: 750; letter-spacing: -0.01em; text-wrap: balance; }
.puerta-titulo p { margin: 0.3rem 0 0; color: var(--texto-suave); }
.puerta-formulario .campo > label { font-size: 0.88rem; font-weight: 650; color: var(--texto); }
.puerta-formulario input:not([type="checkbox"]) { min-height: 52px; font-size: 17px; }
.puerta-mayus { margin: 0.4rem 0 0; display: flex; gap: 0.4rem; align-items: center; padding: 0.45rem 0.7rem; border-radius: var(--radio-chico); background: var(--atento-suave); color: var(--atento); font-size: 0.88rem; font-weight: 650; }
.puerta-casilla { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0.2rem 0 1rem; cursor: pointer; line-height: 1.35; }
.puerta-casilla input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--primario); }
.puerta-casilla small { display: block; color: var(--texto-suave); font-size: 0.82rem; }
.puerta-entrar { width: 100%; }
.puerta-olvido { align-self: center; min-height: 44px; font-weight: 650; }
.puerta-ayuda { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 0.4rem 1rem; color: var(--texto-suave); font-size: 0.93rem; line-height: 1.5; }
.puerta-ayuda b { color: var(--texto); }
/* Entrar con la cara (public/js/cara-entrar.js): la cámara centrada, del ancho del formulario. */
.puerta-camara { margin: 0.4rem 0; }
.puerta-camara .escaner-registro { --ancho-camara: min(100%, 320px); margin: 0 auto; }
.puerta-cara .registro-instruccion { justify-content: center; text-align: center; }
.puerta-atajos { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0.5rem; margin-top: 1rem; }
.puerta-atajos a, .puerta-atajos button {
  min-height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.6rem 0.4rem;
  border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--borde); color: var(--texto); text-decoration: none;
  font: inherit; font-size: 0.8rem; font-weight: 650; text-align: center; line-height: 1.25; cursor: pointer;
}
.puerta-atajos svg { color: var(--primario); }
@media (hover: hover) and (pointer: fine) { .puerta-atajos a:hover, .puerta-atajos button:hover { border-color: var(--primario); } }
.puerta-pie { margin: 1.2rem 0 0; display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; justify-content: center; font-size: 0.82rem; color: var(--texto-suave); }
.puerta-pie img { border-radius: 4px; }
.puerta-destinos { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1rem; }
.puerta-destino {
  display: flex; gap: 1rem; align-items: center; padding: 1rem; border-radius: var(--radio); text-align: left; font: inherit; cursor: pointer;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borde);
}
.puerta-destino > span:last-child { display: flex; flex-direction: column; gap: 0.15rem; }
.puerta-destino b { font-size: 1.08rem; }
.puerta-destino small { color: var(--texto-suave); font-size: 0.88rem; }
.puerta-destino.oscuro { background: #0e1018; color: #f3f4f9; border-color: #0e1018; }
.puerta-destino.oscuro small { color: #b7bbcc; }
.puerta-destino-icono { width: 48px; height: 48px; border-radius: var(--radio-control); flex: none; display: flex; align-items: center; justify-content: center; background: var(--primario-suave); color: var(--primario); }
.puerta-destino.oscuro .puerta-destino-icono { background: var(--primario); color: #fff; }
.puerta-destino-icono.agua { background: color-mix(in srgb, #19c3b1 18%, transparent); color: #0b7a6e; }
@media (hover: hover) { .puerta-destino:hover { border-color: var(--primario); } }
.puerta-destino { transition: transform var(--rapido) var(--curva), border-color var(--rapido) ease; }
.puerta-destino:active { transform: scale(0.98); }
@media (min-width: 960px) {
  .puerta-pagina { flex-direction: row; }
  .puerta-marca {
    width: 40%; max-width: 520px; box-sizing: border-box; border-radius: 0; align-items: flex-start; justify-content: center; text-align: left; gap: 1.2rem;
    padding: 3.5rem;
  }
  .puerta-icono { width: 88px; height: 88px; border-radius: var(--radio-grande); }
  .puerta-empresa h1 { font-size: 2.8rem; line-height: 1.05; letter-spacing: -0.02em; }
  .puerta-lema { display: block; margin: 0; max-width: 22rem; color: #b7bbcc; font-size: 1.05rem; line-height: 1.5; }
  .puerta-cuerpo { align-items: center; padding: 3rem; }
}
.puerta-volver { align-self: flex-start; display: inline-flex; gap: 0.3rem; align-items: center; min-height: 44px; font-weight: 650; margin-bottom: 0.4rem; }
.puerta-codigo { font-size: 26px !important; letter-spacing: 0.35em; text-align: center; font-variant-numeric: tabular-nums; }
/* neztime.com/entrar (la plataforma): la marca en vez del ícono de una empresa. */
.puerta-marca-logo { height: 40px; width: auto; }
.puerta-etiqueta { margin: 0 0 0.6rem; font-size: 0.78rem; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-suave); }
.puerta-recordadas ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.puerta-recordadas li { display: flex; gap: 0.4rem; align-items: stretch; }
.puerta-empresa-recordada {
  flex: 1; min-width: 0; display: flex; gap: 0.8rem; align-items: center; padding: 0.8rem 1rem; border-radius: var(--radio);
  background: var(--superficie); border: 1px solid var(--borde); color: var(--texto); text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .puerta-empresa-recordada:hover { border-color: var(--primario); } }
.puerta-empresa-recordada img { border-radius: var(--radio-chico); flex: none; }
.puerta-empresa-recordada > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.puerta-empresa-recordada b { overflow-wrap: anywhere; }
.puerta-empresa-recordada small { color: var(--texto-suave); overflow-wrap: anywhere; }
.puerta-empresa-recordada svg { color: var(--texto-suave); flex: none; }
.puerta-quitar { width: 44px; flex: none; border: 0; border-radius: var(--radio); background: transparent; color: var(--texto-suave); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .puerta-quitar:hover { background: var(--superficie-2); color: var(--texto); } }
.puerta-separador { display: flex; align-items: center; gap: 0.6rem; margin: 1.1rem 0 0.8rem; color: var(--texto-suave); font-size: 0.88rem; }
.puerta-separador::before, .puerta-separador::after { content: ''; flex: 1; height: 1px; background: var(--borde); }
.puerta-direccion { display: flex; align-items: center; min-height: 52px; border: 1px solid var(--borde-control); border-radius: var(--radio-control); background: var(--superficie); padding-right: 0.9rem; }
.puerta-direccion:focus-within { border-color: var(--primario); box-shadow: var(--anillo-foco); }
.puerta-direccion input { flex: 1; min-width: 0; border: 0 !important; box-shadow: none !important; background: transparent; text-align: right; padding-right: 0.1rem; }
.puerta-direccion span { color: var(--texto-suave); font-size: 1rem; white-space: nowrap; }

/* /firmar (contratos): la misma puerta que /entrar, con el panel de la marca y
   un paso a la vez; la columna del contrato es más ancha que la del login. */
.firmar-cuerpo { width: 100%; max-width: 720px; display: flex; flex-direction: column; gap: 1rem; }
.firmar-cuerpo .puerta-titulo { margin-bottom: 0; }
.firmar-datos { margin: 0.4rem 0 0; display: grid; gap: 0.35rem; font-size: 0.88rem; width: 100%; max-width: 22rem; }
.firmar-datos div { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid rgb(255 255 255 / 0.1); padding-top: 0.35rem; }
.firmar-datos dt { color: #a9aec2; }
.firmar-datos dd { margin: 0; font-weight: 650; text-align: right; }
.firmar-pasos { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.firmar-pasos li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.88rem; font-weight: 650; color: var(--texto-suave); }
.firmar-pasos li + li::before { content: ""; width: 1.4rem; height: 2px; border-radius: 2px; background: var(--borde-control); opacity: 0.4; }
.firmar-pasos b { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; border: 1.5px solid var(--borde-control); background: var(--superficie); }
.firmar-pasos b svg { width: 15px; height: 15px; }
.firmar-pasos li.ahora { color: var(--texto); }
.firmar-pasos li.ahora b { background: var(--primario); border-color: var(--primario); color: var(--primario-texto); }
.firmar-pasos li.hecho b { background: #19c3b1; border-color: #19c3b1; color: #fff; }
.firmar-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0.6rem; }
.firmar-resumen div { min-width: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 0.7rem 0.8rem; display: flex; flex-direction: column; gap: 0.1rem; }
.firmar-resumen small { color: var(--texto-suave); font-size: 0.8rem; font-weight: 650; }
.firmar-resumen b { font-size: clamp(0.92rem, 3.6vw, 1.1rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
.firmar-papel { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.2rem 1.3rem; max-height: min(60dvh, 640px); overflow-y: auto; overscroll-behavior: contain; }
.firmar-papel:focus-visible { box-shadow: var(--anillo-foco); outline: none; }
.firmar-form { display: flex; flex-direction: column; gap: 1rem; }
.firmar-ayuda { margin: 0; text-align: center; color: var(--texto-suave); font-size: 0.9rem; }
.firmar-listo { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; }
.firmar-ok { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, #19c3b1 18%, transparent); color: #0b7a6e;  animation: ventana-entra 240ms var(--curva) 80ms both;}
.firmar-ok svg { width: 30px; height: 30px; }
.firmar-pago { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.firmar-pago h3 { margin: 0; font-size: 0.95rem; }
.firmar-pago .sutil { margin: 0; }
.firmar-monto { margin: 0; font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.firmar-cuenta { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; border: 1px solid var(--borde); border-radius: var(--radio); padding: 0.7rem 0.9rem; }
.firmar-cuenta div { display: flex; flex-direction: column; min-width: 0; }
.firmar-cuenta small { color: var(--texto-suave); font-size: 0.82rem; }
.firmar-cuenta b { font-size: 1.25rem; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; user-select: all; }
.firmar-whatsapp { background: #0e1018; color: #f3f4f9; border-color: #0e1018; justify-content: center; text-align: center; }
.firmar-ver summary { cursor: pointer; font-weight: 650; color: var(--primario); min-height: 44px; display: flex; align-items: center; }
@media (min-width: 960px) {
  .firmar-pagina .puerta-marca { position: sticky; top: 0; height: 100dvh; }
  .firmar-pagina .puerta-cuerpo { align-items: flex-start; }
}

/* ---- CONSOLA, rediseño del 24/10/2026 ------------------------------------------
   «Datos y cobro» por partes (quién firma, cómo se le cobra, licencia), el
   aviso de lo que falta para el contrato y la barra de guardar fija abajo. El
   menú puede ir en noche (oscuro): se elige en el pie del menú, por aparato. */
.malo-texto { color: var(--malo); }
.sin-partir { white-space: nowrap; }
.consola-tabla td .etiqueta { white-space: nowrap; }
.consola-datos { display: flex; flex-direction: column; gap: 1rem; }
.consola-datos-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 1rem; align-items: start; }
.consola-datos-columna { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.consola-datos .tarjeta { margin: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.consola-datos .tarjeta h2 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.consola-dos { align-self: flex-start; margin-bottom: 0.6rem; }
.consola-faltan { margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.consola-faltan .enlace { font-weight: 600; }
.consola-linea { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 0 0.8rem; align-items: end; }
.consola-linea .boton { margin-bottom: 1rem; }
@media (max-width: 640px) { .consola-linea { grid-template-columns: minmax(0, 1fr); } .consola-linea .boton { justify-self: start; } }
.consola-guardar {
  position: static; z-index: 5; display: flex; gap: 0.6rem; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  padding: 0.7rem 1rem; border-radius: var(--radio); background: color-mix(in srgb, var(--superficie) 92%, transparent);
  border: 1px solid var(--borde); box-shadow: var(--sombra); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.consola-guardar > span:first-child { flex: 1 1 12rem; font-size: 0.9rem; color: var(--texto-suave); min-width: 0; }
.consola-guardar.con-cambios { position: sticky; bottom: 0.6rem; border-color: color-mix(in srgb, var(--atento) 45%, transparent); animation: guardar-sube 200ms var(--curva) both; }
@keyframes guardar-sube { from { opacity: 0; transform: translateY(12px); } }
.consola-guardar.con-cambios > span:first-child b { color: var(--atento); }
@media (max-width: 900px) { .consola-guardar.con-cambios { bottom: calc(4.8rem + env(safe-area-inset-bottom, 0px)); } }
.pestana-punto { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--atento); vertical-align: 2px; margin-left: 0.15rem; }
/* El menú en noche: los mismos tokens, con los valores de la noche, solo dentro del menú. */
.consola.menu-noche .menu {
  --superficie: #11131c; --superficie-2: #1b1e2b; --borde: rgb(255 255 255 / 0.10); --texto: #f4f5fa; --texto-suave: #a9afc2;
  --primario: #a3acff; --primario-suave: #252a55; color-scheme: dark;
  background: #0b0d14; color: var(--texto); border-right-color: transparent;
}

/* ---- AJUSTES EN GRUPOS (24/10/2026) ----------------------------------------------
   La entrada: un buscador y los seis grupos, como los Ajustes del iPhone. Cada
   grupo: saltos a sus partes arriba y la barra de guardar fija abajo cuando hay
   cambios (la misma de la consola). */
.ajustes-buscar { display: flex; align-items: center; gap: 0.5rem; background: var(--superficie-2); border-radius: var(--radio-control); padding: 0 0.8rem; margin-bottom: 1rem; max-width: 34rem; color: var(--texto-suave); }
.ajustes-buscar input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 16px; padding: 0.7rem 0; color: var(--texto); outline: none; }
.ajustes-buscar:focus-within { box-shadow: var(--anillo-foco); }
.ajustes-grupos { display: flex; flex-direction: column; background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; max-width: 40rem; }
/* En el iPad y la computadora los grupos van en dos columnas: la pantalla se aprovecha. */
@media (min-width: 900px) {
  .ajustes-grupos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; gap: 1px; background: var(--borde); }
  .ajustes-grupo { background: var(--superficie); }
  .ajustes-grupo + .ajustes-grupo { border-top: 0; }
  .ajustes-buscar { max-width: none; }
}
.ajustes-grupo { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1rem; color: var(--texto); text-decoration: none; min-height: 44px; }
.ajustes-grupo + .ajustes-grupo { border-top: 1px solid var(--borde); }
@media (hover: hover) and (pointer: fine) { .ajustes-grupo:hover { background: var(--superficie-2); } }
.ajustes-grupo > .icono:last-child { color: var(--texto-suave); }
.ajustes-grupo-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ajustes-grupo-texto b { font-weight: 650; }
.ajustes-grupo-texto small { color: var(--texto-suave); font-size: 0.85rem; }
.ajustes-grupo-icono { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex: none; }
.ajustes-grupo-icono.g-empresa { background: #5b6276; }
.ajustes-grupo-icono.g-asistencia { background: #0b7a56; }
.ajustes-grupo-icono.g-pago { background: #4b55e6; }
.ajustes-grupo-icono.g-vales { background: #9a5a00; }
.ajustes-grupo-icono.g-terminales { background: #1b1e2b; }
.ajustes-grupo-icono.g-avisos { background: #6b4fd8; }
.ajustes-saltos { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.3rem; margin-bottom: 0.8rem; }
.ajustes-saltos .boton { flex: none; white-space: nowrap; }
.ajuste-seccion { scroll-margin-top: 1rem; }
.ajustes-form { display: flex; flex-direction: column; gap: 0.6rem; }
.ajustes-form > .ajuste-seccion > .tarjeta, .ajustes-form > .ajuste-seccion > div > .tarjeta { margin: 0; }
.ajuste-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; width: 100%; min-height: 52px;
  padding: 0.8rem 1rem; border: 0; border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra);
  font: inherit; font-weight: 650; color: var(--texto); text-align: left; cursor: pointer;
}
.ajuste-fila .icono { color: var(--texto-suave); transition: transform var(--rapido) var(--curva); }
.ajuste-fila.abierta { color: var(--primario); }
.ajuste-fila.abierta .icono { transform: rotate(90deg); color: var(--primario); }
.ajuste-fila { transition: background-color var(--rapido) ease; }
@media (hover: hover) { .ajuste-fila:hover { background: var(--superficie-2); } }
.ajuste-fila:active { background: var(--superficie-2); }
.ajustes-guardar { margin-top: 1rem; }
.ajustes-form.en-grupo .ajuste-seccion .tarjeta > h2:first-child { display: none; }
.ajustes-form.en-grupo .ajuste-fila.abierta { border-radius: var(--radio) var(--radio) 0 0; box-shadow: none; border-bottom: 1px solid var(--borde); }
.ajustes-form.en-grupo .ajuste-seccion { margin-top: -0.6rem; }
.ajustes-form.en-grupo .ajuste-seccion > .tarjeta, .ajustes-form.en-grupo .ajuste-seccion > div > .tarjeta { border-radius: 0 0 var(--radio) var(--radio); }
.consola-guardar { flex-wrap: nowrap; }
.consola-guardar > span:first-child { flex: 1 1 0; }
@media (max-width: 480px) { .consola-guardar { padding: 0.55rem 0.7rem; gap: 0.4rem; } .consola-guardar > span:first-child { font-size: 0.82rem; } }

/* ---- REPORTES (24/10/2026) -------------------------------------------------------
   Filtros arriba, indicadores, y cada hoja en una tabla tipo hoja de cálculo
   (títulos y primera columna fijos, números a la derecha, fila de totales) o
   en tarjetas. */
.reporte-filtros { display: flex; flex-direction: column; gap: 0.8rem; }
.reporte-atajos { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.2rem; }
.reporte-atajos .boton { flex: none; white-space: nowrap; }
.reporte-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 0 0.8rem; }
.reporte-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); gap: 0.6rem; margin: 1rem 0; }
.reporte-kpi { background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); padding: 0.75rem 0.9rem; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.reporte-kpi span { font-size: 0.8rem; color: var(--texto-suave); }
.reporte-kpi b { font-family: var(--fuente-titulo); font-size: 1.3rem; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi-cambio { font-size: 0.75rem; color: var(--texto-suave); }
.kpi-cambio.sube { color: var(--entrada); }
.kpi-cambio.baja { color: var(--malo); }
.reporte-barra { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 0.7rem; }
.reporte-vistas { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.reporte-vistas button { flex: none; white-space: nowrap; }
.reporte-buscar { display: flex; align-items: center; gap: 0.4rem; background: var(--superficie-2); border-radius: var(--radio-control); padding: 0 0.7rem; flex: 1 1 12rem; max-width: 22rem; color: var(--texto-suave); }
.reporte-buscar input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 16px; padding: 0.55rem 0; color: var(--texto); outline: none; }
.reporte-cuenta { margin-left: auto; font-size: 0.85rem; }
.reporte-tabla-marco { overflow: auto; max-height: max(24rem, calc(100dvh - 14rem)); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); transition: opacity var(--rapido) var(--curva); }
.reporte-tabla-marco.calculando, .reporte-tarjetas.calculando { opacity: 0.5; }
.reporte-tabla { border-collapse: separate; border-spacing: 0; font-size: 0.85rem; font-variant-numeric: tabular-nums; min-width: 100%; }
.reporte-tabla th, .reporte-tabla td { padding: 0.45rem 0.7rem; border-bottom: 1px solid var(--borde); border-right: 1px solid var(--borde); white-space: nowrap; text-align: left; }
.reporte-tabla .num { text-align: right; }
.reporte-tabla thead th { position: sticky; top: 0; z-index: 2; background: var(--superficie-2); padding: 0; }
.reporte-tabla thead th button { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 0.55rem 0.7rem; font-weight: 650; font-size: 0.8rem; color: var(--texto); cursor: pointer; }
.reporte-tabla thead th.num button { text-align: right; }
.reporte-tabla thead th button:focus-visible { box-shadow: inset 0 0 0 2px var(--primario); }
.reporte-tabla tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--texto) 2.5%, var(--superficie)); }
.reporte-tabla tbody tr:hover td { background: var(--primario-suave); }
.reporte-tabla td { background: var(--superficie); }
.reporte-tabla .fija { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--borde); font-weight: 600; }
.reporte-tabla thead th.fija { z-index: 3; }
.reporte-tabla tfoot td { position: sticky; bottom: 0; z-index: 1; background: var(--superficie-2); font-weight: 700; border-top: 2px solid var(--borde); }
.reporte-tabla tfoot td.fija { z-index: 2; }
.reporte-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0.7rem; }
.reporte-tarjeta { background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); padding: 0.85rem 1rem; min-width: 0; }
.reporte-tarjeta h3 { margin: 0 0 0.5rem; font-size: 1rem; overflow-wrap: anywhere; }
.reporte-tarjeta dl { margin: 0; display: grid; gap: 0.25rem; }
.reporte-tarjeta dl > div { display: flex; justify-content: space-between; gap: 0.8rem; font-size: 0.85rem; }
.reporte-tarjeta dt { color: var(--texto-suave); }
.reporte-tarjeta dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-width: 0; }
.reporte-mas { align-self: flex-start; font-weight: 600; }
.reporte-periodo { margin: 0; font-size: 0.85rem; }
.reporte-inactivos { grid-column: 1 / -1; }

/* ---- PLANILLA (auditoría del 24/10/2026) ----------------------------------------
   Una tabla desde el iPad (la persona fija a la izquierda, títulos en una línea);
   en el teléfono, solo quién, días y a pagar, y al tocar se abre el desglose. */
.solo-telefono { display: none; }
/* ANTERIOR · ACTUAL · SIGUIENTE bajo el título del período, con las fechas que comprende cada uno. */
.planilla-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 34rem); margin: 0.2rem 0 1rem; }
.planilla-nav a, .planilla-nav .planilla-nav-fin { min-height: 48px; justify-content: center; text-align: center; padding: 0.3rem 0.6rem; }
.planilla-nav a > span, .planilla-nav .planilla-nav-fin > span { display: flex; flex-direction: column; line-height: 1.15; }
.planilla-nav small { font-weight: 500; font-size: 0.78rem; color: var(--texto-suave); white-space: nowrap; }
.planilla-nav a.activa small { color: var(--texto-suave); }
.planilla-nav .planilla-nav-fin { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--texto-suave); opacity: 0.55; font-weight: 650; font-size: 0.92rem; }
@media (max-width: 420px) { .planilla-nav a .icono { display: none; } }
.planilla-pendiente { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; }
.planilla-pendiente > span { flex: 1 1 20rem; min-width: 0; }
.planilla-pendiente .boton { min-height: 44px; }
.planilla-acciones { align-items: center; }
.menu-exportar { position: relative; }
.menu-exportar > summary { list-style: none; cursor: pointer; }
.menu-exportar > summary::-webkit-details-marker { display: none; }
.menu-exportar-lista {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 14rem; display: flex; flex-direction: column; padding: 0.35rem;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-alta);
  transform-origin: top left; animation: menu-entra 160ms var(--curva);
}
@keyframes menu-entra { from { opacity: 0; transform: scale(0.97) translateY(-4px); } }
.confirmar-texto { margin: 0 0 1rem; font-size: 1.02rem; text-wrap: pretty; }
/* En el teléfono el menú ocupa casi todo el ancho y las notas se parten en dos líneas. */
@media (max-width: 640px) {
  .menu-exportar-lista { max-width: calc(100vw - 1.2rem); min-width: min(15.6rem, calc(100vw - 1.2rem)); }
  .menu-exportar-lista a { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .menu-exportar-lista { animation: none; } }
.menu-exportar-lista a { display: flex; align-items: center; gap: 0.5rem; min-height: 46px; padding: 0 0.7rem; border-radius: var(--radio-chico); color: var(--texto); text-decoration: none; font-weight: 600; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .menu-exportar-lista a:hover { background: var(--superficie-2); } }
/* OPCIONES DEL MENÚ DE EXPORTAR como app.nezpos.com: insignia de color, título y nota. */
.menu-exportar-lista { min-width: 15.6rem; }
.exp-opcion { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 0.65rem; width: 100%; min-height: 48px; padding: 0.45rem 0.6rem; border-radius: var(--radio-control); color: var(--texto); cursor: pointer; }
.exp-opcion:hover, .exp-opcion:focus-visible { background: var(--superficie-2); }
.exp-opcion:active { transform: scale(0.985); }
.exp-opcion.deshabilitado, .exp-opcion:disabled { opacity: 0.45; cursor: default; pointer-events: none; }
/* Ícono en blanco sobre un color de su función (decisión del usuario 27/10): Excel verde, PDF rojo,
   CSV azul pizarra, imprimir violeta, banco azul, WhatsApp su verde, correo naranja. */
.exp-insignia { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--primario); color: #fff; font-weight: 900; font-size: 17px; line-height: 1; }
.exp-insignia .icono { display: block; }
.exp-excel { background: #1d7044; }
.exp-pdf { background: #c8372d; }
.exp-csv { background: #4f6b95; }
.exp-imprimir { background: #6d4fd0; }
.exp-banco { background: #2563c9; }
.exp-whatsapp { background: #1faa55; }
.exp-correo { background: #d9822b; }
.exp-hoja { background: #14532d; }
.exp-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.exp-texto b { font-weight: 700; font-size: 1rem; }
.exp-texto small { color: var(--texto-suave); font-size: 0.78rem; overflow-wrap: anywhere; }
@media (max-width: 640px) { .exp-texto small { white-space: normal; } }
/* En la cabecera de la página (Reportes, Asistencia) el botón está a la derecha: el menú se alinea a su borde derecho, como en nezpos. */
/* Pegado al botón: hacia la izquierda o hacia arriba cuando no cabe (lo decide app.js al abrir). */
@media (min-width: 641px) { .cabecera-pagina .menu-exportar-lista { left: auto; right: 0; transform-origin: top right; } }
.menu-exportar-lista.a-la-izquierda, .horario-mas-lista.a-la-izquierda { left: auto; right: 0; transform-origin: top right; }
.menu-exportar-lista.a-la-derecha, .horario-mas-lista.a-la-derecha, .cabecera-pagina .menu-exportar-lista.a-la-derecha { left: 0; right: auto; transform-origin: top left; }
.menu-exportar-lista.hacia-arriba, .horario-mas-lista.hacia-arriba { top: auto; bottom: calc(100% + 6px); transform-origin: bottom left; }
.menu-exportar-lista.hacia-arriba.a-la-izquierda, .cabecera-pagina .menu-exportar-lista.hacia-arriba { transform-origin: bottom right; }
.menu-exportar-lista .menu-exportar-nota { display: flex; align-items: center; min-height: 40px; padding: 0 0.7rem; font-size: 0.85rem; color: var(--texto-suave); white-space: nowrap; }
.planilla-marco { margin-top: 1rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.planilla-tabla .planilla-apagar { position: sticky; right: 0; z-index: 1; background: var(--superficie); box-shadow: -1px 0 0 var(--borde); }
.planilla-tabla thead .planilla-apagar, .planilla-tabla tfoot .planilla-apagar { background: var(--superficie-2); z-index: 2; }
.planilla-tabla tbody tr.abierta td.planilla-apagar, .planilla-tabla tbody tr.abierta td.planilla-quien { background: color-mix(in srgb, var(--primario) 6%, var(--superficie)); }
.planilla-tabla { font-variant-numeric: tabular-nums; }
.planilla-tabla th { text-transform: none; letter-spacing: 0; font-size: 0.8rem; white-space: nowrap; }
.planilla-tabla td.num { white-space: nowrap; }
.planilla-tabla .planilla-quien { position: sticky; left: 0; z-index: 1; background: var(--superficie); min-width: 12rem; box-shadow: 1px 0 0 var(--borde); }
.planilla-tabla thead .planilla-quien, .planilla-tabla tfoot .planilla-quien { background: var(--superficie-2); z-index: 2; }
.planilla-nombre { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 0.3rem; min-height: 44px; font-weight: 700; color: var(--texto); cursor: pointer; white-space: nowrap; }
.planilla-nombre .icono { color: var(--texto-suave); transition: transform var(--rapido) var(--curva); }
.planilla-nombre[aria-expanded='true'] .icono { transform: rotate(90deg); color: var(--primario); }
.planilla-nombre:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; border-radius: 6px; }
.planilla-tabla .planilla-quien .etiqueta { margin: 0.15rem 0.3rem 0 0; }
.planilla-tabla tbody tr.clic:active td { background: var(--primario-suave); }
.planilla-tabla tbody tr.abierta td { background: color-mix(in srgb, var(--primario) 6%, var(--superficie)); }
.planilla-tabla tbody tr.con-problemas .planilla-nombre { color: var(--malo); }
.planilla-detalle > div { position: sticky; left: 0.6rem; max-width: min(56rem, calc(100vw - 4rem)); }
.planilla-pago-movil { display: none; }
.planilla-detalle-pago { justify-content: flex-start; margin-bottom: 0.75rem; }
.planilla-desglose { margin: 0 0 0.8rem; display: grid; gap: 0.25rem; }
.planilla-desglose > div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; }
.planilla-desglose dt { color: var(--texto-suave); }
.planilla-desglose dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.planilla-desglose .fuerte { font-weight: 700; border-top: 1px solid var(--borde); padding-top: 0.35rem; margin-top: 0.2rem; }
@media (max-width: 640px) {
  .solo-telefono { display: grid; }
  .planilla-tabla .solo-ancho { display: none; }
  .contenido .fila-botones.planilla-acciones .boton:not(.grande):not(.enorme):not(.chico) { min-height: 44px; }
  /* En el teléfono el pago va debajo de «A pagar» (la columna Pago no cabía). */
  .planilla-tabla .planilla-pago { display: none; }
  .planilla-pago-movil { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; margin-top: 0.35rem; }
  .planilla-pago-movil .boton { white-space: nowrap; }
  .planilla-tabla .planilla-quien, .planilla-tabla .planilla-apagar { min-width: 0; position: static; box-shadow: none; }
  .planilla-tabla .planilla-nombre { white-space: normal; }
  .planilla-detalle > div { position: static; max-width: none; }
}

/* ---- VALES (auditoría del 24/10/2026) --------------------------------------------
   Cada vale con el mismo acomodo: quién y de dónde, el monto grande a la
   derecha, lo que lleva ganado y le quedaría, y los botones. */
.vales-pestanas { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; margin-bottom: 1rem; scrollbar-width: none; }
.vales-pestanas button { flex: none; white-space: nowrap; min-height: 44px; }
.vales-vacio { display: flex; align-items: center; gap: 0.8rem; color: var(--entrada); }
.vales-vacio p { margin: 0; color: var(--texto-suave); }
.vales-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.vale {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: 'quien monto acciones' 'notas notas acciones';
  align-items: center; gap: 0.5rem 1.2rem; padding: 0.9rem 1.1rem; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra);
}
.vale-quien { grid-area: quien; display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.vale-datos { display: flex; flex-direction: column; min-width: 0; }
.vale-datos b { font-size: 1rem; }
.vale-datos .sutil { font-size: 0.85rem; }
.vale-motivo { font-size: 0.88rem; color: var(--texto); overflow-wrap: anywhere; }
.vale-monto { grid-area: monto; display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; }
.vale-monto b { font-family: var(--fuente-titulo); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vale-monto .etiqueta { margin: 0; }
.vale-notas { grid-area: notas; display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.85rem; color: var(--texto-suave); padding-left: calc(40px + 0.75rem); }
.vale-notas b { color: var(--texto); font-variant-numeric: tabular-nums; }
.vale-notas .etiqueta { margin: 0; }
.vale-acciones { grid-area: acciones; display: flex; gap: 0.5rem; align-items: center; justify-content: flex-end; }
.vale-acciones .boton { min-height: 44px; }
.vale-rechazado .vale-monto b { color: var(--texto-suave); text-decoration: line-through; }
@media (max-width: 640px) {
  .vale { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'quien monto' 'notas notas' 'acciones acciones'; padding: 0.85rem 0.9rem; }
  .vale-notas { padding-left: 0; }
  .vale-acciones { justify-content: stretch; }
  .vale-acciones .boton { flex: 1; }
}

/* ---- ASISTENCIA (auditoría del 24/10/2026) ---------------------------------------
   Una fila por persona y día: entrada → salida, lo trabajado y solo lo que no
   es normal. Al tocarla, sus registros con foto, corregir y anular. */
.asistencia-atajos { display: flex; gap: 0.4rem; overflow-x: auto; margin-bottom: 0.8rem; }
.asistencia-atajos .boton { flex: none; white-space: nowrap; min-height: 44px; }
.asistencia-como { margin: 0 0 1rem; }
.asistencia-como button { min-height: 44px; }
.asistencia-dia { padding-bottom: 0.4rem; }
.asistencia-dia-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 1rem; margin-bottom: 0.3rem; }
.asistencia-dia-cabeza h2 { margin: 0; }
.asistencia-filas { list-style: none; margin: 0; padding: 0; }
.asistencia-filas > li { border-top: 1px solid var(--borde); }
.asistencia-filas > li:first-child { border-top: 0; }
.asistencia-fila {
  all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center;
  gap: 0.4rem 0.9rem; min-height: 56px; padding: 0.5rem 0.4rem; border-radius: var(--radio-chico); cursor: pointer;
  transition: background-color var(--rapido) var(--curva), transform var(--rapido) var(--curva);
}
@media (hover: hover) and (pointer: fine) { .asistencia-fila:hover { background: var(--superficie-2); } }
.asistencia-fila:active { transform: scale(0.99); background: var(--primario-suave); }
.asistencia-fila:focus-visible { outline: 2px solid var(--primario); outline-offset: 1px; }
.asistencia-fila > .icono { color: var(--texto-suave); transition: transform var(--rapido) var(--curva); }
.asistencia-fila[aria-expanded='true'] > .icono { transform: rotate(90deg); color: var(--primario); }
.asistencia-quien { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.asistencia-quien b { overflow-wrap: anywhere; }
.asistencia-otras { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.asistencia-otras .etiqueta { margin: 0; }
.asistencia-tramos { display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 0.92rem; }
.asistencia-total { min-width: 5.5rem; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.boton.chico.asistencia-arreglar { margin: 0 0 0.5rem calc(36px + 1.3rem); min-height: 44px; }
.asistencia-detalle { padding: 0 0 0.6rem calc(36px + 1.3rem); }
.asistencia-filas > li.abierta { background: color-mix(in srgb, var(--primario) 4%, transparent); border-radius: var(--radio-chico); }
@media (max-width: 640px) {
  .asistencia-fila { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'avatar quien flecha' 'avatar tramos flecha' 'avatar total flecha'; }
  .asistencia-fila > :nth-child(1) { grid-area: avatar; align-self: start; }
  .asistencia-quien { grid-area: quien; }
  .asistencia-tramos { grid-area: tramos; align-items: flex-start; }
  .asistencia-total { grid-area: total; min-width: 0; text-align: left; }
  .asistencia-fila > .icono { grid-area: flecha; }
  .boton.chico.asistencia-arreglar, .asistencia-detalle { margin-left: 0; padding-left: 0; }
}

/* Colaboradores: la lista con buscador y filtros, y la ficha en pestañas. */
.colab-filtros { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; margin-bottom: 0.9rem; }
.colab-buscar {
  display: flex; align-items: center; gap: 0.5rem; flex: 1 1 260px; max-width: 420px; min-height: 44px; padding: 0 0.9rem;
  border: 1px solid var(--borde); border-radius: 999px; background: var(--superficie); color: var(--texto-suave);
}
.colab-buscar:focus-within { border-color: var(--primario); box-shadow: 0 0 0 3px var(--primario-suave); }
.colab-buscar input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--texto); padding: 0; outline: none; box-shadow: none; min-height: 42px; }
.colab-segmentos { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.colab-segmentos button { flex: none; white-space: nowrap; min-height: 40px; }
.colab-cuenta { font-variant-numeric: tabular-nums; color: var(--texto-suave); font-weight: 600; }
.colab-vacio p { margin: 0.2rem 0; }
.lista-personas li { display: block; padding: 0; cursor: default; }
.colab-fila {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 18px; gap: 0.3rem 0.85rem; align-items: center;
  min-height: 64px; padding: 0.55rem 0.3rem; color: inherit; text-decoration: none; border-radius: var(--radio-control);
  transition: background-color var(--rapido) var(--curva), transform 120ms var(--curva);
}
.colab-fila > .icono:last-child { color: var(--texto-suave); }
.colab-fila:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .colab-fila:hover { background: var(--superficie-2); } .colab-fila:hover b { color: var(--primario); } }
.colab-nombre { overflow-wrap: anywhere; }
.lista-personas .lp-datos { display: flex; flex-direction: column; gap: 0.1rem; }
.colab-etiquetas { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: flex-end; }
@media (max-width: 640px) {
  .colab-filtros { flex-direction: column; align-items: stretch; }
  .colab-buscar { max-width: none; flex: none; }
  /* minmax(0, 1fr): un texto largo («Cargar o cambiar desde Excel») ya no ensancha la columna ni hace deslizar la página de lado; baja de línea. */
  .cabecera-pagina:has(a[href="#/colaboradores/nuevo"]) .fila-botones, .cabecera-pagina:has(a[href="#/ausencias/saldos"]) .fila-botones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; width: 100%; }
  .cabecera-pagina:has(a[href="#/colaboradores/nuevo"]) .fila-botones .boton, .cabecera-pagina:has(a[href="#/ausencias/saldos"]) .fila-botones .boton { justify-content: center; padding-inline: 0.5rem; font-size: 0.92rem; white-space: normal; text-align: center; line-height: 1.2; }
  .cabecera-pagina .fila-botones a[href="#/colaboradores/nuevo"] { grid-column: 1 / -1; }
  .lp-detalle .solo-ancho { display: none; }
  .colab-fila { grid-template-columns: 40px minmax(0, 1fr) 18px; grid-template-areas: 'av datos flecha' 'av etiquetas flecha'; }
  .colab-fila > .avatar { grid-area: av; }
  .colab-fila > .lp-datos { grid-area: datos; }
  .colab-fila > .colab-etiquetas { grid-area: etiquetas; justify-content: flex-start; }
  .colab-fila > .colab-etiquetas:empty { display: none; }
  .colab-fila > .icono:last-child { grid-area: flecha; }
}

.ficha-cabecera { display: flex; align-items: center; gap: 0.9rem; margin: -0.4rem 0 1rem; }
.ficha-quien { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.ficha-estado { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ficha-estado a.etiqueta { text-decoration: none; }
.ficha-pestanas { display: flex; width: fit-content; max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 1rem; }
.ficha-pestanas button { flex: none; white-space: nowrap; min-height: 44px; }
.ficha-pestanas button:active { transform: scale(0.97); }
.punto-falta { width: 8px; height: 8px; border-radius: 50%; background: var(--malo); display: inline-block; }
.ficha-form { display: flex; flex-direction: column; }
.ficha-form > .tarjeta[hidden] { display: none; }
.ficha-form .tarjeta h2, .ficha-saldos .tarjeta h2 { margin-top: 0; }
.ficha-form .tarjeta p.sutil, .ficha-saldos p.sutil, .ficha-form .campo > span[style] { max-width: 75ch; }
.ficha-guardar { margin: 0.2rem 0 1rem; }
/* El horario y los décimos sin recuadro dentro de la tarjeta. */
.ficha-form .horario-colaborador { border: 0; border-top: 1px solid var(--borde); border-radius: 0; padding: 0.8rem 0 0; margin: 0.8rem 0 0; }
.ficha-form .horario-colaborador legend { padding: 0 0.4rem 0 0; }
/* Marca una vez solo algunos días (un puesto híbrido): los días como casillas que bajan de línea. */
.una-vez-dias { border: 0; border-top: 1px solid var(--borde); padding: 0.8rem 0 0; margin: 0.8rem 0 0; }
.una-vez-dias legend { font-weight: 600; padding: 0 0.4rem 0 0; }
.dias-una-vez { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0.2rem 0 0.6rem 1.9rem; }
.dias-una-vez label { display: flex; align-items: center; gap: 0.45rem; min-height: 44px; cursor: pointer; }
.dias-una-vez input { width: 20px; height: 20px; }
.aviso-campo { display: block; color: var(--atento); margin: 0 0 0.6rem 1.9rem; }
.ficha-saldos .cifra { background: var(--superficie-2); border-color: transparent; }
@media (max-width: 640px) {
  .ficha-pestanas { width: 100%; }
  /* Las cuatro pestañas caben en 360 px; «Rostro y acceso» se parte en dos líneas en vez de cortarse. */
  .ficha-pestanas button { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0.35rem 0.4rem; font-size: 0.88rem; white-space: normal; text-align: center; line-height: 1.15; }
}

/* Por revisar: resumen arriba, grupos con filas como Vales, motivos dentro de la fila. */
.rev-resumen p { margin: 0 0 0.7rem; }
.rev-saltos { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.rev-saltos .pildora { min-height: 44px; display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; font: inherit; font-weight: 600; }
.rev-saltos .pildora:active { transform: scale(0.97); }
.rev-todo-bien { min-height: 0; margin-bottom: 1rem; }
.rev-grupo { scroll-margin-top: 1rem; }
.rev-grupo h2 { margin-top: 0; }
.rev-linea { margin: -0.2rem 0 0.2rem; max-width: 75ch; }
.rev-ayuda { margin: 0 0 0.4rem; }
.rev-ayuda summary { cursor: pointer; color: var(--primario); font-size: 0.9rem; font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.rev-ayuda p { max-width: 75ch; margin: 0.2rem 0 0; }
.rev-lista { list-style: none; margin: 0.3rem 0 0; padding: 0; }
.rev-fila {
  display: grid; grid-template-columns: 40px minmax(16rem, 1fr) auto; gap: 0.5rem 0.9rem; align-items: start;
  padding: 0.9rem 0; border-bottom: 1px solid var(--borde);
}
.rev-fila:last-child { border-bottom: 0; }
.rev-fila.rev-fila-sola { display: block; }
.rev-fila.registro-pin { grid-template-columns: auto minmax(0, 1fr) auto; }
.rev-cuerpo { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; overflow-wrap: anywhere; }
.rev-cita { color: var(--texto); font-style: italic; max-width: 70ch; }
.rev-acciones { display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: flex-end; align-items: center; }
.rev-fila > .rev-acciones { max-width: 26rem; }
.rev-acciones .boton { min-height: 44px; }
.rev-motivo { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.6rem; padding: 0.75rem; border-radius: var(--radio-chico); background: var(--superficie-2); }
.rev-motivo .campo { margin: 0; }
.rev-motivo textarea { font-size: 16px; }
.rev-motivo .rev-acciones { justify-content: flex-start; }
.rev-duracion { display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; align-items: center; }
.rev-duracion input { width: 4.5rem; min-height: 44px; }
.rev-al-dia { display: flex; align-items: center; gap: 0.45rem; color: var(--texto-suave); font-size: 0.92rem; margin: 0.4rem 0 1rem; }
.rev-al-dia .icono { color: var(--entrada); }
.rev-decididos summary { cursor: pointer; font-weight: 650; min-height: 44px; display: flex; align-items: center; gap: 0.45rem; }
@media (max-width: 640px) {
  .rev-fila { grid-template-columns: 40px minmax(0, 1fr); }
  .rev-fila.registro-pin { grid-template-columns: minmax(0, 1fr); }
  .rev-fila > .rev-acciones { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; max-width: none; }
  .rev-fila > .rev-acciones > .boton.primario:first-child { grid-column: 1 / -1; }
  .rev-fila > .rev-acciones > .boton:last-child:nth-child(even) { grid-column: auto; }
  .rev-fila > .rev-acciones .boton { justify-content: center; white-space: normal; }
  .rev-fila > .rev-acciones .etiqueta { grid-column: 1 / -1; }
  .rev-fila.registro-pin { grid-template-columns: minmax(0, 1fr); }
  .rev-fila.registro-pin > .pin-fotos { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .rev-saltos { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -0.2rem; padding: 0 0.2rem; }
  .rev-saltos .pildora { flex: none; white-space: nowrap; }
}

/* AUSENCIAS: filas como Por revisar; los saldos con el número a la derecha. */
.aus-intro { max-width: 75ch; text-wrap: pretty; }
.aus-filtros { margin-bottom: 1rem; }
.aus-cuando { display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; align-items: center; }
.aus-meta { color: var(--texto-suave); font-size: 0.86rem; }
.aus-saldo-aviso { font-size: 0.92rem; }
.aus-saldo-aviso.malo { color: var(--malo); }
.aus-nombre { font-weight: 650; color: var(--texto); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .aus-nombre:hover { color: var(--primario); } }
.rev-fila.aus-saldo { grid-template-columns: 40px minmax(0, 1fr) auto; }
.aus-cifra { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.aus-cifra b { font-family: var(--fuente-titulo); font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.aus-cifra span { color: var(--texto-suave); font-size: 0.8rem; }
@media (max-width: 640px) {
  .rev-fila.aus-saldo { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .aus-filtros { flex-wrap: nowrap; }
  .aus-fila > .rev-acciones > .boton.primario:first-child { grid-column: auto; }
  .aus-fila > .rev-acciones > .boton:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ANUNCIOS: filas como Por revisar, con el punto de la importancia; vista previa en el formulario. */
.anu-intro { margin-bottom: 0.2rem; }
.anu-ayuda { margin-bottom: 1rem; }
.rev-fila.anu-fila { grid-template-columns: 40px minmax(0, 1fr) auto; }
.anu-punto { width: 40px; height: 40px; border-radius: var(--radio-control); display: flex; align-items: center; justify-content: center; }
.anu-punto.prioridad-urgente { background: #c4252f; color: #fff; }
.anu-punto.prioridad-normal { background: #ffe680; color: #1a1500; }
.anu-punto.prioridad-info { background: #1f8f5f; color: #fff; }
.anu-titulo { font-size: 1.02rem; overflow-wrap: anywhere; }
.anu-texto { color: var(--texto); overflow-wrap: anywhere; max-width: 70ch; }
.anu-lecturas {
  display: inline-flex; align-items: center; gap: 0.55rem; align-self: flex-start; margin-top: 0.25rem; min-height: 40px;
  padding: 0 0.7rem; border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto-suave);
  font: inherit; font-size: 0.9rem; cursor: pointer; transition: transform var(--rapido) ease-out;
}
.anu-lecturas b { color: var(--texto); }
.anu-lecturas:active { transform: scale(0.97); }
.anu-barra { width: 56px; height: 6px; border-radius: 3px; background: var(--superficie-2); overflow: hidden; }
.anu-barra span { display: block; height: 100%; background: var(--entrada); border-radius: 3px; }
.anu-quienes { padding: 0.6rem 0.75rem; border-radius: var(--radio-chico); background: var(--superficie-2); font-size: 0.92rem; }
.anu-quienes p { margin: 0.15rem 0; }
.prioridad-anuncio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prioridad-opcion { min-height: 44px; justify-content: center; align-items: center; text-align: center; padding: 0.4rem 0.5rem; }
.prioridad-detalle { grid-column: 1 / -1; color: var(--texto-suave); font-size: 0.85rem; }
@media (max-width: 480px) { .prioridad-anuncio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.anu-previa { display: flex; flex-direction: column; gap: 0.4rem; margin: 0 0 0.9rem; padding: 0.8rem; border-radius: var(--radio-chico); background: var(--superficie-2); }
.anu-previa-rotulo { font-size: 0.8rem; font-weight: 650; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.04em; }
.anuncio-personal.anu-previa-tarjeta { margin: 0; max-width: none; animation: none; box-shadow: none; }
.anu-previa-tarjeta .anuncio-personal-titulo { font-size: 1.25rem; }
.anu-previa-tarjeta .anuncio-personal-texto { font-size: 0.98rem; }
.anu-fechas { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.anu-fechas .campo { min-width: 0; }
.anu-fechas input { min-width: 0; width: 100%; }
.anu-flecha { display: inline-flex; transform: rotate(90deg); transition: transform var(--rapido) var(--curva); }
.anu-lecturas[aria-expanded="true"] .anu-flecha { transform: rotate(-90deg); }

/* DÉCIMOS: el año con flechas, lo que falta pagar arriba y filas como Por revisar. */
.dec-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; margin: 0 0 0.4rem; }
.dec-anio { display: flex; align-items: center; gap: 0.35rem; }
.dec-anio h2 { margin: 0; font-size: 1.2rem; text-wrap: balance; }
.dec-flecha { min-width: 44px; min-height: 44px; padding: 0; justify-content: center; }
.dec-intro { margin: 0 0 0.2rem; max-width: 75ch; text-wrap: pretty; }
.dec-ayuda { margin-bottom: 1rem; }
.dec-resumen { display: flex; flex-direction: column; gap: 0.5rem; }
.dec-resumen p { margin: 0; max-width: 75ch; }
.dec-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; }
.dec-total b { font-family: var(--fuente-titulo); font-size: clamp(1.8rem, 6vw, 2.4rem); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dec-total span { color: var(--texto-suave); }
.dec-avance { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; }
.dec-avance .anu-barra { width: min(220px, 100%); height: 8px; }
.dec-cerrado { font-size: 0.88rem; }
.rev-fila.dec-fila { grid-template-columns: 40px minmax(0, 1fr) auto; }
.dec-monto { gap: 0.25rem; }
/* «Cambiar…» va bajo el monto, pegado a la derecha (sin esto caía en la columna del avatar y se salía de la tarjeta). */
.rev-fila.dec-fila > .rev-acciones { grid-column: 3; justify-self: end; display: flex; max-width: none; }
.dec-monto b { font-size: 1.35rem; }
.dec-extra { grid-column: 2 / -1; }
.dec-pagar { justify-content: flex-start; }
.dec-pagar-rotulo { color: var(--texto-suave); font-size: 0.9rem; margin-right: 0.2rem; }
.dec-extra .rev-motivo { margin-top: 0; max-width: 36rem; }
.dec-quitar { min-height: 32px; }
.dec-cierre { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin-top: 1rem; }
.dec-cierre .rev-motivo { flex: 1 1 100%; max-width: 36rem; margin: 0; }
.dec-cierre .rev-motivo p, .dec-fila .rev-motivo p { margin: 0; }
@media (max-width: 640px) {
  .rev-fila.dec-fila { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .dec-extra { grid-column: 1 / -1; }
  .dec-pagar { display: grid; grid-template-columns: 1fr 1fr; }
  .dec-pagar .boton { justify-content: center; }
  .dec-pagar-rotulo { grid-column: 1 / -1; }
  .dec-monto b { font-size: 1.15rem; }
}

/* TERMINALES: la lista arriba con el estado en palabras; ajustes y «Desactivar» al tocar «Configurar». */
.ter-intro { margin-bottom: 0.2rem; max-width: 75ch; }
.ter-ayuda { margin-bottom: 1rem; }
.ter-ayuda-cuerpo { display: grid; gap: 0.5rem; margin-top: 0.4rem; padding: 0.9rem 1rem; border-radius: var(--radio-chico); background: var(--superficie-2); max-width: 75ch; }
.ter-ayuda-cuerpo h3 { margin: 0.4rem 0 0; font-size: 1rem; }
.ter-ayuda-cuerpo p { margin: 0; }
.guia-instalar h3 { margin-top: 0; }
.ter-resumen { margin-bottom: 1rem; }
.rev-fila.ter-fila { grid-template-columns: 40px minmax(0, 1fr) auto; }
.ter-punto { width: 40px; height: 40px; border-radius: var(--radio-control); display: flex; align-items: center; justify-content: center; background: var(--superficie-2); color: var(--texto-suave); position: relative; }
.ter-punto::after { content: ''; position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--superficie); background: var(--texto-suave); }
.ter-punto.bien::after { background: var(--entrada); }
.ter-punto.atento::after { background: var(--atento); }
.ter-punto.malo::after { background: var(--malo); }
.ter-nombre { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; }
.ter-nombre .etiqueta { margin: 0; }
.ter-estado { font-weight: 600; }
.ter-estado.bien { color: var(--entrada); }
.ter-estado .atento { color: var(--atento); }
.ter-estado .malo { color: var(--malo); }
.ter-config { grid-column: 2 / -1; display: grid; gap: 0.6rem; margin-top: 0.6rem; padding: 0.8rem; border-radius: var(--radio-chico); background: var(--superficie-2); }
.ter-config p { margin: 0; }
.ter-selects { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.6rem; }
.ter-selects .campo { margin: 0; min-width: 0; }
.ter-configurar[aria-expanded="true"] .anu-flecha { transform: rotate(-90deg); }
.ter-forma { margin-bottom: 0.6rem; }
.ter-forma button { min-height: 40px; }
@media (max-width: 640px) {
  .rev-fila.ter-fila { grid-template-columns: 40px minmax(0, 1fr); }
  .ter-fila > .rev-acciones { display: flex; }
  .ter-fila > .rev-acciones .boton { flex: 1; }
  .ter-config { grid-column: 1 / -1; margin-top: 0; }
}

/* ADMINISTRADORES: filas como Terminales; los 2 pasos con el dato a la vista. */
.adm-intro { margin-bottom: 0.2rem; max-width: 75ch; }
.adm-ayuda { margin-bottom: 1rem; }
.adm-dos-pasos { display: grid; gap: 0.4rem; }
.adm-dos-pasos p { margin: 0; max-width: 75ch; }
.adm-dos-pasos .casilla-linea { margin: 0.2rem 0 0; min-height: 44px; align-items: center; }
.adm-dos-pasos-cifra { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; }
.adm-dos-pasos-cifra b { font-family: var(--fuente-titulo); font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.adm-dos-pasos-cifra span { color: var(--texto-suave); }
.adm-estado { font-weight: 600; font-size: 0.94rem; }
.adm-estado .sutil { font-weight: 500; }
.adm-falta { color: var(--atento); font-size: 0.9rem; }
.adm-casilla { margin: 0; }
.adm-casilla small { display: block; color: var(--texto-suave); }
.adm-botones { margin: 0; }
.adm-botones .boton { min-height: 44px; }
.ter-config .campo { margin: 0; }
.adm-falta .enlace { min-height: 0; }

/* BITÁCORA: por día, con la hora a la izquierda y un ícono por tipo; lo delicado en ámbar. */
.bit-intro { max-width: 75ch; }
.bit-filtros { margin-bottom: 0.5rem; }
.bit-quien { margin: 0; flex: 0 1 14rem; }
.bit-quien select { min-height: 44px; }
.bit-tipos { margin-bottom: 1rem; }
.bit-dia h2 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.bit-lista { list-style: none; margin: 0; padding: 0; }
.bit-fila { display: grid; grid-template-columns: 5.6rem 30px minmax(0, 1fr); gap: 0.2rem 0.6rem; align-items: start; padding: 0.55rem 0; border-bottom: 1px solid var(--borde); }
.bit-fila:last-child { border-bottom: 0; }
.bit-hora { color: var(--texto-suave); font-size: 0.88rem; font-variant-numeric: tabular-nums; padding-top: 0.25rem; white-space: nowrap; }
.bit-icono { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--superficie-2); color: var(--texto-suave); }
.bit-icono .icono { width: 17px; height: 17px; }
.bit-cuerpo { min-width: 0; overflow-wrap: anywhere; padding-top: 0.15rem; }
.bit-detalle { font-size: 0.88rem; }
.bit-fila.delicado .bit-icono { background: var(--atento-suave, #fff1d6); color: var(--atento); }
.bit-fila.delicado .bit-cuerpo > div:first-child { color: var(--atento); }
.bit-fila.delicado .bit-cuerpo b { color: var(--texto); }
.bit-pie { text-align: center; font-size: 0.86rem; }
@media (max-width: 640px) {
  .bit-fila { grid-template-columns: 30px minmax(0, 1fr); }
  .bit-hora { grid-column: 2; grid-row: 2; padding: 0; font-size: 0.8rem; }
  .bit-icono { grid-row: 1 / span 2; }
}

/* AJUSTES: el valor de cada parte bajo su nombre, resultados del buscador y las reglas de pago por bloques. */
.ajuste-fila-texto { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; text-align: left; }
.ajuste-fila-texto small { color: var(--texto-suave); font-weight: 500; font-size: 0.86rem; }
.ajustes-resultados { margin-bottom: 1rem; }
.tarjeta.tarjeta-regla { margin: 0.8rem 0; background: var(--superficie-2); box-shadow: none; }
.regla-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; }
.regla-cabeza h3 { margin: 0; font-size: 1.1rem; }
.regla-nombre { flex: 1 1 18rem; max-width: 28rem; margin: 0; }
.regla-nota { margin: 0.3rem 0 0.6rem; }
.regla-bloque { border: 0; border-top: 1px solid var(--borde); margin: 0.6rem 0 0; padding: 0.7rem 0 0; min-width: 0; }
.regla-bloque legend { font-weight: 700; padding: 0 0.4rem 0 0; }
.regla-bloque .rejilla { margin-bottom: 0.3rem; }
.regla-casilla { margin: 0.35rem 0; }
.regla-casilla input:disabled + span { color: var(--texto-suave); }

/* HORARIOS: la semana entera cabe en el iPad, leyenda de colores, avisos por regla y «Más» en el teléfono. */
@media (min-width: 641px) and (max-width: 1399px) {
  .hoja-persona { width: 10.5rem; min-width: 10.5rem; max-width: 10.5rem; }
  .hoja-celda, .hoja-dia { min-width: 5.2rem; }
  .hoja-total { min-width: 6rem; }
}
.hoja-tabla thead .hoja-calc { white-space: normal; line-height: 1.15; }
.hoja-leyenda { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; margin: 0.6rem 0 0; font-size: 0.82rem; color: var(--texto-suave); }
.hoja-leyenda span { display: inline-flex; align-items: center; gap: 0.35rem; }
.hoja-leyenda i { width: 18px; height: 14px; border-radius: 4px; border: 1px solid var(--borde); }
.hoja-leyenda b { color: var(--texto); }
.hoja-leyenda .enlace { margin-left: auto; }
.colores-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.6rem; }
.colores-lista label { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0.3rem 0.6rem; border-radius: var(--radio-chico); border: 1px solid var(--borde); cursor: pointer; }
.colores-lista input[type=color] { width: 44px; height: 32px; border: 0; padding: 0; background: none; cursor: pointer; }
.hoja-ayuda { margin: 0.3rem 0 0; }
.avisos-grupos { display: grid; gap: 0.7rem; margin: 0.4rem 0 0.6rem; }
.aviso-grupo b { display: block; color: var(--atento); }
.aviso-grupo p { margin: 0.15rem 0 0; line-height: 1.5; }
.aviso-quien { white-space: nowrap; }
.horario-areas { flex-wrap: nowrap; scrollbar-width: none; }
.horario-areas button { flex: none; white-space: nowrap; }
.horario-mas { display: none; position: relative; }
.horario-mas summary { list-style: none; cursor: pointer; }
.horario-mas summary::-webkit-details-marker { display: none; }
.horario-mas-lista { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: grid; gap: 0.4rem; padding: 0.5rem; min-width: 14rem; border-radius: var(--radio-chico); background: var(--superficie); border: 1px solid var(--borde); box-shadow: 0 12px 30px -12px rgb(13 16 32 / 0.35); }
.horario-mas-lista .boton { justify-content: flex-start; }
.horario-mas-botones { display: contents; }
@media (max-width: 640px) {
  .horario-mas { display: block; }
  .horario-mas-botones { display: none; }
  .horario-barra .horario-areas { flex: 1 1 100%; min-width: 0; }
  .horario-barra > .fila-botones { flex-wrap: nowrap; }
}

/* REPORTES: el costo primero y destacado, filtros en pares y «Bajar» en un menú. */
.reporte-kpi.destacado { background: var(--primario); color: #fff; }
.reporte-kpi.destacado span, .reporte-kpi.destacado .kpi-cambio { color: rgb(255 255 255 / 0.85); }
.reporte-par { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.6rem; grid-column: span 2; }
.reporte-par legend { font-weight: 650; font-size: 0.9rem; padding: 0; margin-bottom: 0.2rem; }
.reporte-par .campo { min-width: 0; }
.reporte-par input, .reporte-par select { min-width: 0; width: 100%; }
.reporte-campos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 0.4rem 0.8rem; }
.reporte-kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.6rem), 1fr)); }
.reporte-inactivos { grid-column: 1 / -1; }
.reporte-bajar { display: block; }
.reporte-bajar summary { gap: 0.4rem; }
@media (max-width: 640px) { .reporte-par { grid-column: 1 / -1; } }

/* Su semana: con la semana llena la pantalla se achica (useSinScroll, hasta 0.5); el Volver, más alto, sigue siendo cómodo de tocar. */
.boton.grande.mi-semana-volver { min-height: max(56px, calc(40px / var(--zoom, 1))); width: 100%; }

/* EL CÍRCULO DE LOS ATAJOS (como app.nezpos.com): flotante abajo a la derecha, donde llega el pulgar.
   Se abre hacia arriba desde el mismo círculo, que pasa a ser la ✕. Menú sólido (se abre sobre listas con montos).
   `--atajos-abajo` es dónde descansa; `--atajos-sube` lo levanta sobre la barra de guardar (lo mide app.js).
   Mientras hay algo abierto encima (ventana, hoja, cajón del menú, paleta, el popover de un turno) el círculo se esconde:
   no tapa los botones de lo que se abrió. */
.atajos { display: contents; --atajos-abajo: 1rem; --atajos-sube: 0px; }
.atajo-rayo {
  all: unset; position: fixed; right: 1rem; bottom: var(--atajos-abajo); z-index: 61; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--primario); color: #fff; box-shadow: 0 6px 12px rgb(0 0 0 / 0.22);
  transform: translateY(calc(-1 * var(--atajos-sube))); transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), opacity 120ms ease;
}
.atajo-rayo:active { transform: translateY(calc(-1 * var(--atajos-sube))) scale(0.95); }
.atajo-rayo:focus-visible { outline: 3px solid var(--primario-suave); }
.atajo-rayo.escondido, body:is(.con-ventana, :has(.velo, .velo-cajon, .paleta-fondo, .turno-pop, .menu-exportar[open])) .atajo-rayo:not(.atajo-cerrar) { opacity: 0; pointer-events: none; }
.atajos-velo { position: fixed; inset: 0; z-index: 60; background: rgb(0 0 0 / 0.35); animation: atajos-velo 180ms var(--curva); }
.atajos-menu {
  position: fixed; right: 1rem; bottom: calc(var(--atajos-abajo) + var(--atajos-sube) + 56px + 0.6rem); width: min(280px, 86vw); box-sizing: border-box;
  /* Nunca más alto que lo que queda de pantalla: con muchas filas (teléfono chico, apaisado) se desliza por dentro. */
  max-height: calc(100dvh - var(--atajos-abajo) - var(--atajos-sube) - 56px - 0.6rem - 0.8rem - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--fondo); color: var(--texto); border-radius: var(--radio-grande); padding: 0.5rem 0.3rem; box-shadow: 0 18px 48px rgb(0 0 0 / 0.3);
  transform-origin: bottom right; animation: atajos-crece 200ms var(--curva);
}
@keyframes atajos-crece { from { opacity: 0; transform: translateY(8px) scale(0.96); } }
@keyframes atajos-velo { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .atajos-menu, .atajos-velo { animation: none; } .atajo-rayo { transition: opacity 120ms ease; } }
.atajos-grupo { padding: 0.3rem 0.6rem 0.15rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-suave); }
.atajos-grupo.separado { margin-top: 0.3rem; padding-top: 0.5rem; border-top: 1px solid var(--borde); }
.atajos-fila { all: unset; display: flex; align-items: center; gap: 0.6rem; width: 100%; box-sizing: border-box; min-height: 48px; padding: 0.4rem 0.6rem; border-radius: var(--radio-control); cursor: pointer; font-weight: 700; }
.atajos-fila:hover, .atajos-fila:focus-visible { background: var(--superficie-2); }
.atajos-fila:active { transform: scale(0.98); }
.atajos-icono { width: 34px; height: 34px; border-radius: var(--radio-chico); display: grid; place-items: center; background: var(--superficie); color: var(--primario); flex: none; }
@media (max-width: 900px) {
  .atajos { --atajos-abajo: calc(4.9rem + env(safe-area-inset-bottom, 0px)); }
  .atajo-rayo, .atajos-menu { right: 0.8rem; }
}
.pagina-volver { margin-bottom: 0.2rem; }
.filtros-lista { margin-bottom: 0.9rem; min-width: 0; }
.colab-filtros .filtros-lista { margin-bottom: 0; flex: 0 1 auto; min-width: 0; }
.dec-excluir { margin: 0.4rem 0 0; }
.dec-excluir .enlace { font-weight: 600; }
/* Exportar/Bajar solo con el ícono (el nombre va en title y aria-label); la cantidad, como una pastilla chica. */
.boton-icono.boton-exportar { position: relative; color: var(--texto-suave); }
.boton-icono.boton-exportar .contador-chico { position: absolute; top: -0.35rem; right: -0.35rem; min-width: 1.1rem; height: 1.1rem; padding: 0 0.3rem; border-radius: 999px; background: var(--texto-suave); color: var(--superficie); font-size: 0.75rem; font-weight: 700; line-height: 1.1rem; text-align: center; }
/* FILTROS: en la computadora la fila de pastillas; en el teléfono una lista desplegable (ocupa una línea). «Esconder los filtros» los pliega del todo. */
.filtro-lista { display: none; }
.filtros-cabeza { display: flex; align-items: center; gap: 0.4rem; flex-wrap: nowrap; min-width: 0; }
.filtros-cabeza .colab-segmentos { flex: 0 1 auto; min-width: 0; }
.filtros-cabeza .boton-icono { flex: none; }
.filtros-cabeza .boton-icono { width: 36px; min-height: 36px; color: var(--texto-suave); }
.filtros-cabeza .boton-icono[aria-pressed='true'] { color: var(--primario); background: var(--primario-suave); }
.filtros-plegados .colab-segmentos, .filtros-plegados .filtro-lista { display: none; }
.filtros-resumen { font-size: 0.9rem; color: var(--texto-suave); }
@media (max-width: 640px) {
  .filtro-lista { display: flex; align-items: center; gap: 0.4rem; min-width: 0; flex: 1 1 auto; }
  .filtro-lista select { min-height: 40px; width: 100%; }
  .filtro-lista + .colab-segmentos, .colab-segmentos.con-lista { display: none; }
}

/* =============================================================================
   MI PORTAL (body.portal): el autoservicio de cada trabajador en su teléfono.
   Extiende los tokens del panel (--curva, --rapido, --normal, radios). Todo el
   movimiento es transform/opacity, menor de 300 ms salvo la hoja (320 ms con la
   curva de cajón de iOS), y «reducir movimiento» lo apaga por la regla global.
   ============================================================================= */
body.portal { --curva-cajon: cubic-bezier(0.32, 0.72, 0, 1); }

/* La pantalla entra (opacidad + 6 px) cada vez que cambia la ruta: el
   contenido ya no aparece de golpe. Lo de adentro se escalona 30 ms por fila
   solo en su primera pintura (`--i`). */
@keyframes portal-entra { from { opacity: 0; transform: translateY(6px); } }
@keyframes portal-fila { from { opacity: 0; transform: translateY(4px); } }
body.portal .portal-pagina { animation: portal-entra 200ms var(--curva) both; }
body.portal :is(.dias-portal, .lista-pagos, .lista-portal) > li,
body.portal .lista-marcadas-grupo { animation: portal-fila 220ms var(--curva) both; animation-delay: calc(min(var(--i, 0), 8) * 30ms); }

/* --- Hoy -------------------------------------------------------------------- */
.hoy-tarjeta {
  display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.9rem; align-items: start;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande);
  padding: 1.1rem 1.2rem; margin-bottom: 1rem; box-shadow: var(--sombra);
}
.hoy-punto { width: 12px; height: 12px; border-radius: 50%; margin-top: 1.35rem; background: var(--texto-suave); }
.hoy-tarjeta.en-turno .hoy-punto { background: var(--entrada); box-shadow: 0 0 0 0 color-mix(in srgb, var(--entrada) 45%, transparent); animation: hoy-late 2.4s ease-out 3; }
.hoy-tarjeta.hecho .hoy-punto { background: var(--entrada); }
.hoy-tarjeta.pendiente .hoy-punto { background: var(--atento); }
@keyframes hoy-late { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--entrada) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 10px transparent; } }
.hoy-rotulo { color: var(--texto-suave); font-size: 0.9rem; font-weight: 600; }
.hoy-rotulo::first-letter { text-transform: uppercase; }
.hoy-titulo { font-size: clamp(1.35rem, 1.1rem + 1.4vw, 1.7rem); margin: 0.1rem 0 0.2rem; }
.hoy-detalle { margin: 0 0 0.4rem; }
.hoy-semana { margin: 0; color: var(--texto-suave); font-size: 0.92rem; }
.hoy-semana::first-letter { text-transform: uppercase; }
.hoy-marcar { grid-column: 1 / -1; justify-content: center; margin-top: 0.6rem; }
.cifras-portal { grid-template-columns: 1fr 1fr; }

/* Lo más usado, en tres accesos de un dedo. */
.acciones-rapidas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-bottom: 1rem; }
.acciones-rapidas a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; min-height: 72px;
  padding: 0.6rem 0.4rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie);
  color: var(--texto); text-decoration: none; font-weight: 600; font-size: 0.85rem; text-align: center; line-height: 1.15;
  transition: transform 120ms var(--curva), border-color var(--rapido) var(--curva);
}
.acciones-rapidas a .icono { color: var(--primario); }
.acciones-rapidas a:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .acciones-rapidas a:hover { border-color: var(--primario); } }

/* --- Día por día: filas que se tocan -------------------------------------- */
body.portal .dias-portal li { padding: 0; }
.dp-dia {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.6rem; width: 100%; min-height: 56px;
  padding: 0.55rem 0.2rem; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  border-radius: var(--radio-chico); transition: transform 120ms var(--curva), background-color var(--rapido) var(--curva);
}
.dp-dia:active { transform: scale(0.985); background: var(--superficie-2); }
.dp-dia > .icono { color: var(--texto-suave); }
.dp-datos { display: flex; flex-direction: column; min-width: 0; }
.dp-datos .sutil { font-size: 0.88rem; overflow-wrap: anywhere; }
.dp-pago { font-weight: 700; font-variant-numeric: tabular-nums; }
.dias-portal li.es-hoy .dp-dia { background: var(--primario-suave); }
.dias-portal li.es-hoy .dp-dia b { color: var(--primario); }
.pd-cifra { display: flex; flex-direction: column; margin-bottom: 0.8rem; }
.pd-cifra b { font-family: var(--fuente-titulo); font-size: 1.8rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pd-cifra .sutil::first-letter { text-transform: uppercase; }
.pd-lista { list-style: none; margin: 0 0 1rem; padding: 0; }
.pd-lista li { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.45rem 0; border-top: 1px solid var(--borde); }
.pd-lista li .icono { flex: none; margin-top: 0.15em; color: var(--texto-suave); }
.pd-lista li.dp-por-autorizar { color: var(--atento); font-weight: 600; }
.pd-detalle .dp-reclamo { width: 100%; justify-content: center; min-height: 48px; font-size: 1rem; }
.pd-detalle .dp-reclamo-form { margin: 0.4rem 0 0; padding: 0; border: 0; background: none; }
.pd-detalle .dp-reclamo-form .fila-botones { flex-direction: column; }
.pd-detalle .dp-reclamo-form .fila-botones .boton { width: 100%; justify-content: center; min-height: 48px; }

/* --- Listas que se tocan (pagos, marcadas) --------------------------------- */
body.portal .lp-fila { display: grid; grid-template-columns: 1fr auto auto; align-items: center; flex-wrap: nowrap; border-radius: var(--radio-chico); padding: 0.6rem 0.2rem; transition: transform 120ms var(--curva), background-color var(--rapido) var(--curva); }
body.portal .lp-fila > .icono { color: var(--texto-suave); }
body.portal .lp-fila:active, body.portal .lm-fila:active { transform: scale(0.985); background: var(--superficie-2); }
body.portal .lm-fila { border-radius: var(--radio-chico); transition: transform 120ms var(--curva), background-color var(--rapido) var(--curva); }
.vacio-portal { text-align: center; padding: 1.6rem 1.2rem; }
.vacio-portal .icono { color: var(--texto-suave); margin-bottom: 0.4rem; }
.vacio-portal p { margin: 0.2rem 0; }

/* --- Esqueleto mientras llegan los datos --------------------------------- */
@keyframes esqueleto-brilla { to { background-position: -200% 0; } }
.esqueleto { display: grid; gap: 0.8rem; }
.esq-bloque, .esq-linea {
  border-radius: var(--radio); background: linear-gradient(90deg, var(--superficie-2) 25%, var(--superficie) 50%, var(--superficie-2) 75%);
  background-size: 200% 100%; animation: esqueleto-brilla 1.4s linear infinite;
}
.esq-hoy { height: 150px; border-radius: var(--radio-grande); }
.esq-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.esq-cifras .esq-bloque { height: 76px; }
.esq-lista { height: 320px; border-radius: var(--radio-grande); }
.esq-fila { display: grid; gap: 0.45rem; padding: 0.3rem 0; }
.esq-linea { height: 14px; width: 55%; border-radius: 7px; }
.esq-linea.ancha { height: 18px; width: 80%; }

/* --- La hoja: la ventana del panel, pero desde abajo en el teléfono ------ */
@keyframes velo-entra { from { opacity: 0; } }
@keyframes velo-sale { to { opacity: 0; } }
@keyframes ventana-entra { from { opacity: 0; transform: scale(0.96); } }
@keyframes ventana-sale { to { opacity: 0; transform: scale(0.96); } }
@keyframes hoja-entra { from { transform: translateY(100%); } }
@keyframes hoja-sale { to { transform: translateY(100%); } }
/* Toda ventana (panel, consola y portal) entra y sale suave, centrada (30/10/2026; antes solo el portal). */
.velo { animation: velo-entra 180ms var(--curva) both; }
.velo.saliendo { animation: velo-sale 180ms var(--curva) both; pointer-events: none; }
.ventana { animation: ventana-entra 180ms var(--curva) both; }
.velo.saliendo .ventana { animation: ventana-sale 160ms var(--curva) both; }
@media (max-width: 640px) {
  body.portal .velo { align-items: flex-end; padding: 0; }
  body.portal .ventana {
    width: 100%; max-height: 92dvh; border-radius: var(--radio-grande) var(--radio-grande) 0 0;
    padding: 0.6rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom));
    animation: hoja-entra 320ms var(--curva-cajon) both;
  }
  body.portal .ventana::before { content: ''; display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--borde); margin: 0 auto 0.8rem; }
  body.portal .velo.saliendo .ventana { animation: hoja-sale 240ms var(--curva-cajon) both; }
}
.hoja-botones { flex-direction: column; margin-top: 1rem; }
.hoja-botones .boton { width: 100%; justify-content: center; }
.campo-grande { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hoja-listo { text-align: center; padding: 0.6rem 0 0.2rem; }
.hoja-listo-icono {
  display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--bien-suave); color: var(--entrada); margin-bottom: 0.6rem; animation: ventana-entra 240ms var(--curva) both; animation-delay: 80ms;
}
.hoja-listo h3 { margin-bottom: 0.3rem; }
.hoja-listo .boton { width: 100%; justify-content: center; margin-top: 0.8rem; }

/* La barra de abajo: presión y la pastilla activa con transición. */
body.portal .barra-boton { transition: transform 120ms var(--curva), background-color var(--rapido) var(--curva), color var(--rapido) var(--curva); }
body.portal .barra-boton:active { transform: scale(0.96); }

/* --- Mi cuenta: nombre arriba y una lista de opciones que abren su hoja --- */
.cuenta-cabeza { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1rem; }
.cuenta-cabeza > div { display: flex; flex-direction: column; min-width: 0; }
.cuenta-cabeza b { font-size: 1.15rem; }
.cuenta-lista { list-style: none; margin: 0; padding: 0; }
.cuenta-lista li + li { border-top: 1px solid var(--borde); }
.cuenta-fila {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.8rem; width: 100%; min-height: 60px;
  padding: 0.6rem 0.2rem; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none;
  cursor: pointer; border-radius: var(--radio-chico); transition: transform 120ms var(--curva), background-color var(--rapido) var(--curva);
}
.cuenta-fila:active { transform: scale(0.985); background: var(--superficie-2); }
.cuenta-fila > .icono { color: var(--texto-suave); }
.cuenta-icono { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radio-control); background: var(--primario-suave); color: var(--primario); }
.cuenta-texto { display: flex; flex-direction: column; min-width: 0; }
.cuenta-texto .sutil { font-size: 0.88rem; }
.cuenta-salir { width: 100%; justify-content: center; min-height: 52px; margin-top: 0.4rem; }
.hoja-form .boton.ancho { width: 100%; justify-content: center; margin-top: 0.4rem; }
/* En pantalla táctil el «hover» se queda pegado al último toque: la barra no lo pinta. */
@media (hover: none) { body.portal .barra-boton:not(.activo):hover { color: var(--texto-suave); } }

/* --- Mis horarios -------------------------------------------------------- */
.hor-periodo { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; }
.hor-periodo-texto { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; line-height: 1.2; }
.hor-periodo-texto small, .hor-periodo-texto a { font-size: 0.85rem; }
.hor-periodo-texto small { color: var(--texto-suave); }
.hor-lista { list-style: none; margin: 0; padding: 0; }
.hor-dia { display: grid; grid-template-columns: 4.75rem 1fr auto; align-items: center; gap: 0.8rem; min-height: 54px; padding: 0.45rem 0.2rem; border-top: 1px solid var(--borde); border-radius: var(--radio-chico); }
.hor-dia:first-child { border-top: 0; }
/* El día va entero («MIÉRCOLES» mide unos 66 px): la cajita es igual de ancha en todas las filas. */
.hor-fecha { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; width: 4.75rem; height: 44px; border-radius: var(--radio-control); background: var(--superficie-2); line-height: 1; }
.hor-fecha small { font-size: 0.75rem; text-transform: uppercase; color: var(--texto-suave); letter-spacing: 0.02em; }
.hor-fecha b { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.hor-texto { display: flex; flex-direction: column; min-width: 0; }
.hor-texto .sutil { font-size: 0.85rem; }
.hor-horas { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texto-suave); }
.hor-dia.turno .hor-horas { color: var(--texto); }
.hor-dia.libre .hor-texto > span:first-child, .hor-dia.vacaciones .hor-texto > span:first-child { color: var(--entrada); font-weight: 600; }
.hor-dia.feriado .hor-texto > span:first-child { color: var(--atento); font-weight: 600; }
.hor-dia.sin .hor-texto > span:first-child { color: var(--texto-suave); }
/* Los días pasados se ven apagados con el color suave, no con transparencia: así llegan al contraste (E-2). */
.hor-dia.pasado .hor-texto, .hor-dia.pasado .hor-horas, .hor-dia.pasado .hor-fecha { color: var(--texto-suave); }
.hor-dia.pasado .hor-fecha { background: transparent; box-shadow: inset 0 0 0 1px var(--borde); }
.hor-dia.es-hoy { background: var(--primario-suave); opacity: 1; }
.hor-dia.es-hoy .hor-fecha { background: var(--primario); color: var(--primario-texto); }
.hor-dia.es-hoy .hor-fecha small { color: inherit; opacity: 0.85; }
body.portal .hor-lista > li { animation: portal-fila 220ms var(--curva) both; animation-delay: calc(min(var(--i, 0), 8) * 25ms); }

/* Asistencia: lo asignado contra lo marcado, debajo de la fila de cada persona. */
.asistencia-turno { display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; align-items: center; padding: 0 0.6rem 0.5rem 3.4rem; font-size: 0.88rem; }
@media (max-width: 640px) { .asistencia-turno { padding-left: 0.6rem; } }

/* --- Portal compacto: menos desplazamiento en el teléfono ----------------- */
.periodo-corto { font-size: 0.9rem; }
.cuentas-portal > summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.cuentas-portal > summary::-webkit-details-marker { display: none; }
.cuentas-portal > summary h2 { margin: 0; }
.cuentas-portal > summary .icono { color: var(--texto-suave); transition: transform var(--rapido) var(--curva); }
.cuentas-portal[open] > summary .icono { transform: rotate(90deg); }
.cuentas-portal[open] > summary { margin-bottom: 0.6rem; }
.dias-portal h2 small, .tarjeta h2 small.sutil { font-weight: 500; font-size: 0.8rem; margin-left: 0.3rem; }
@media (max-width: 640px) {
  body.portal .contenido { padding-top: 0.7rem; }
  body.portal .cabecera-pagina { margin-bottom: 0.6rem; }
  body.portal .tarjeta { padding: 0.85rem 1rem; margin-bottom: 0.7rem; }
  body.portal .tarjeta h2 { font-size: 1.05rem; margin-bottom: 0.3rem; }
  .hoy-tarjeta { padding: 0.8rem 0.95rem; gap: 0.1rem 0.7rem; margin-bottom: 0.7rem; }
  .hoy-punto { margin-top: 1.05rem; width: 10px; height: 10px; }
  .hoy-rotulo { font-size: 0.82rem; }
  .hoy-titulo { font-size: 1.2rem; margin: 0.05rem 0 0.15rem; }
  .hoy-detalle { font-size: 0.92rem; margin-bottom: 0.25rem; }
  .hoy-semana { font-size: 0.85rem; }
  .hoy-marcar { margin-top: 0.45rem; min-height: 48px; font-size: 1rem; }
  .cifras-portal { gap: 0.5rem; margin-bottom: 0.7rem; }
  .cifras-portal .cifra { padding: 0.55rem 0.7rem; }
  .cifras-portal .cifra .rotulo { font-size: 0.8rem; }
  .acciones-rapidas { gap: 0.45rem; margin-bottom: 0.7rem; }
  .acciones-rapidas a { min-height: 56px; flex-direction: row; gap: 0.4rem; padding: 0.4rem 0.5rem; font-size: 0.82rem; text-align: left; }
  .acciones-rapidas a .icono { flex: none; width: 20px; height: 20px; }
  .dp-dia { min-height: 46px; padding: 0.35rem 0.2rem; }
  .dp-dia b { font-size: 0.95rem; }
  .dp-datos .sutil { font-size: 0.82rem; }
  body.portal .lp-fila, body.portal .cuenta-fila { min-height: 50px; }
  .hor-dia { min-height: 46px; padding: 0.3rem 0.2rem; }
  .hor-fecha { height: 40px; }
  .hor-cifras { margin-bottom: 0.7rem; }
  .vacio-portal { padding: 1.1rem 1rem; }
}
@media (max-width: 640px) {
  body.portal .contenido { padding-bottom: calc(4.4rem + env(safe-area-inset-bottom)); }
  body.portal .pestanas { margin-bottom: 0.6rem; }
  .dp-dia { min-height: 42px; padding: 0.3rem 0.2rem; }
  .dp-pago { font-size: 0.92rem; white-space: nowrap; }
  .dp-datos b { font-size: 0.95rem; }
  .cuentas-portal > summary h2 { font-size: 1rem; }
}

.msj-respuesta { margin: 0.3rem 0; padding: 0.5rem 0.7rem; border-left: 3px solid var(--primario); background: var(--primario-suave); border-radius: 0 10px 10px 0; }

/* LA BOLETA: acciones (compartir, PDF, imprimir, papel) en Mi portal y el nombre con el botón de WhatsApp en el panel. */
.boleta-acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; }
.boleta-acciones .boton { min-height: 44px; display: inline-flex; align-items: center; gap: 0.35rem; }
.boleta-acciones .campo-en-linea { flex: 1 1 160px; max-width: 260px; }
.boleta-acciones select { min-height: 44px; }
.boleta-ayuda { margin: 0 0 0.8rem; }
.boleta-nombre { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Texto en verde (Asistencia: «presente (marca una vez)»). */
.bien-texto { color: var(--bien, #127a4b); font-weight: 600; }

/* «Así se le paga» / «En esta empresa la hora extra empieza…»: la frase que resume la configuración. */
.resumen-pago { margin: 0.75rem 0 0; padding: 0.7rem 0.9rem; border-left: 3px solid var(--primario); background: var(--primario-suave); border-radius: 0 0.5rem 0.5rem 0; font-size: 0.95em; line-height: 1.45; }
.resumen-pago b { font-weight: 700; }

/* EL LOGOTIPO «neztime.» (public/js/logo.js): las letras toman el color del texto. */
.logo-neztime { display: inline-block; vertical-align: middle; width: auto; flex: none; }
.menu-marca small .logo-neztime { display: block; margin-top: 2px; }
.puerta-pie .logo-neztime { vertical-align: -3px; }

/* EL REGISTRO A DISTANCIA EN VIVO (AvanceEnVivo en admin/colaboradores.js). */
.registro-en-vivo { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; padding: 0.9rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo-suave, transparent); margin-top: 0.6rem; }
.registro-en-vivo img { width: 160px; height: 120px; object-fit: cover; border-radius: var(--radio-control); background: #000; transform: scaleX(-1); flex: none; }
.registro-en-vivo-texto { flex: 1; min-width: 12rem; }
.registro-en-vivo-texto p { margin: 0.15rem 0; }
.registro-en-vivo .barra-avance { background: var(--borde); }
.registro-en-vivo .barra-avance span { background: var(--primario); transition: width 300ms cubic-bezier(0.23, 1, 0.32, 1); }
.bueno-texto { color: var(--bien, #0b7a56); font-weight: 600; }

/* HORARIOS EN PANTALLA COMPLETA: la hoja ocupa toda la pantalla, sin el menú ni los
   resúmenes; se desplaza solo a lo ancho mientras quepan las personas. */
.horario-completa { position: fixed; inset: 0; z-index: 45; background: var(--fondo); display: flex; flex-direction: column; gap: 0.5rem; padding: 0.6rem max(0.6rem, env(safe-area-inset-right)) max(0.6rem, env(safe-area-inset-bottom)) max(0.6rem, env(safe-area-inset-left)); }
.horario-completa .hoja { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.horario-completa .hoja-rejilla { max-height: none; flex: 1; min-height: 0; }
.horario-completa-cabeza { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; }
.horario-completa-total { font-size: 0.95rem; }
.horario-completa-total b { font-size: 1.15rem; }
.horario-completa-total small { color: var(--texto-suave); }
body.hoja-completa .atajos, body.hoja-completa .barra-abajo { display: none !important; }

/* Horarios: ver solo un grupo de planilla. */
.horario-grupo { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; font-weight: 600; color: var(--texto-suave); white-space: nowrap; }
.horario-grupo select { min-height: 40px; border-radius: var(--radio-control); border: 1px solid var(--borde-control); padding: 0 0.6rem; font: inherit; color: var(--texto); background: var(--superficie); }

.hoja-leyenda .turno-distinto-muestra { background: color-mix(in srgb, var(--c-distinto, #7c3aed) 14%, var(--superficie)); border-color: color-mix(in srgb, var(--c-distinto, #7c3aed) 40%, transparent); }
.hoja-leyenda .ley-semana { font-weight: 700; }
.ley-semana.dentro { color: var(--entrada); }
.ley-semana.cerca { color: var(--atento); }
.ley-semana.pasa { color: var(--malo); }

/* VENTANA AL LADO (Horarios → la persona): un panel a la derecha, la hoja se sigue viendo. */
.velo.al-lado { justify-content: flex-end; align-items: stretch; padding: 0; background: rgb(0 0 0 / 0.25); animation: velo-entra 200ms var(--curva) both; }
.velo.al-lado.saliendo { animation: velo-sale 200ms var(--curva) both; pointer-events: none; }
.velo.al-lado.saliendo .ventana { animation: lado-sale 200ms var(--curva) both; }
@keyframes lado-sale { to { transform: translateX(24px); opacity: 0; } }
.velo.al-lado .ventana { width: min(34rem, 100vw); max-width: none; max-height: none; height: 100dvh; border-radius: var(--radio-grande) 0 0 var(--radio-grande); overflow-y: auto; animation: lado-entra var(--normal) var(--curva); }
@keyframes lado-entra { from { transform: translateX(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .velo.al-lado .ventana { animation: none; } }
@media (max-width: 640px) { .velo.al-lado .ventana { border-radius: 0; } }
.persona-bloque { border: 1px solid var(--borde); border-radius: var(--radio); padding: 0.8rem 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.7rem; }
.persona-bloque h3 { margin: 0; font-size: 1rem; }
.persona-semana { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.8rem; font-size: 0.9rem; }
.persona-semana b { font-weight: 600; }
.persona-dias { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; }
.persona-dias label { display: flex; align-items: center; gap: 0.4rem; min-height: 44px; cursor: pointer; }

/* HORAS Y PAGO DEL DÍA ARRIBA, fijos debajo de los días (antes abajo, la barra de desplazar los tapaba). */
.hoja-tabla thead tr.hoja-suma th, .hoja-tabla thead tr.hoja-suma td { position: sticky; z-index: 3; height: 2.2rem; box-sizing: border-box; background: var(--superficie-2); font-weight: 600; color: var(--texto); padding-top: 0 !important; padding-bottom: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--texto) 12%, transparent); }
.hoja-tabla thead tr.hoja-suma-1 > * { top: var(--alto-dias, 3.4rem); }
.hoja-tabla thead tr.hoja-suma-2 > * { top: calc(var(--alto-dias, 3.4rem) + 2.2rem); border-bottom: 2px solid color-mix(in srgb, var(--texto) 18%, transparent); }
.hoja-tabla thead tr.hoja-suma .hoja-pegada { z-index: 5; text-align: left; }
.hoja-tabla thead tr.hoja-suma .hoja-total { z-index: 5; background: color-mix(in srgb, var(--primario) 10%, var(--superficie-2)); }
.hoja-rejilla { scroll-padding-top: 8rem; }

/* EL MENÚ ESCONDIDO SE ASOMA (computadora y iPad): al acercar el ratón a la orilla izquierda o
   al tocar ☰ sale encima de la página, y se va al salir de él, al elegir una pantalla o con Esc. */
.menu-borde, .velo-asomado { display: none; }
@media (min-width: 901px) {
  .admin-marco.menu-oculto .menu-borde { display: block; position: fixed; top: 0; bottom: 0; left: 0; width: 10px; z-index: 34; }
  .admin-marco.menu-asomado .velo-asomado { display: block; position: fixed; inset: 0; z-index: 46; background: rgb(0 0 0 / 0.08); }
  /* Del alto de la pantalla y con su propio desplazamiento (con «height: auto» crecía con su contenido y no bajaba). */
  .admin-marco.menu-oculto.menu-asomado .menu { display: flex; position: fixed; top: 0; bottom: 0; left: 0; width: 248px; height: 100dvh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; z-index: 47; box-shadow: var(--sombra-alta); animation: menu-asoma 180ms var(--curva) both; }
  .menu .ocultar-menu:not(.boton-icono) { min-height: 36px; padding: 0 0.7rem; font-size: 0.85rem; white-space: nowrap; flex-shrink: 0; }
  /* Sin el menú, la página aprovecha el ancho (la hoja de Horarios, sobre todo). */
  .admin-marco.menu-oculto .contenido { max-width: 1680px; }
}
@keyframes menu-asoma { from { transform: translateX(-24px); opacity: 0; } }

/* MIENTRAS CARGA HORARIOS: la forma de la hoja en gris (no un «Cargando…» suelto), con un brillo
   suave que pasa; con «reducir movimiento», quieto. */
.esqueleto-hoja { border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); overflow: hidden; }
.esqueleto-fila { display: grid; grid-template-columns: 13.5rem repeat(7, minmax(5rem, 1fr)); border-bottom: 1px solid var(--borde); }
.esqueleto-fila > span { height: 3.6rem; border-right: 1px solid var(--borde); display: flex; align-items: center; justify-content: center; padding: 0 0.6rem; }
.esqueleto-fila.cabeza > span { height: 3rem; }
.esqueleto-fila > span::after { content: ''; display: block; width: 70%; height: 0.7rem; border-radius: 999px;
  background: linear-gradient(90deg, var(--superficie-2) 0%, color-mix(in srgb, var(--superficie-2) 40%, var(--superficie)) 50%, var(--superficie-2) 100%) 0 0 / 200% 100%;
  animation: esqueleto-brillo 1.4s linear infinite; }
.esqueleto-fila > span:first-child::after { width: 80%; }
.esqueleto-texto { padding: 0.8rem 1rem; margin: 0; }
@keyframes esqueleto-brillo { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .esqueleto-fila > span::after { animation: none; } }
@media (max-width: 900px) { .esqueleto-fila { grid-template-columns: 9.2rem repeat(3, minmax(5rem, 1fr)); } .esqueleto-fila > span:nth-child(n + 5) { display: none; } }

/* Portal: de dónde sale lo que va a recibir (ganado − vales y descuentos). */
.cifra-cuenta { display: block; margin-top: 0.25rem; font-size: 0.8rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.cifra-principal .cifra-cuenta { color: inherit; opacity: 0.85; }

/* --- MOVIMIENTO CON PROPÓSITO (30/10/2026) -------------------------------- */
/* El número del menú late una vez cuando cambia: entró un vale o algo por decidir. */
@keyframes contador-late { from { opacity: 0; transform: scale(0.8); } }
/* Una fila decidida (vale aprobado, cosa de Por revisar) sale hacia un lado antes de recargar. */
.fila-saliendo { opacity: 0; transform: translateX(12px); transition: opacity 180ms var(--curva), transform 180ms var(--curva); pointer-events: none; }
/* «Cargando»: el esqueleto aparece solo si tarda más de 250 ms. */
.cargando-panel { animation: velo-entra 160ms var(--curva) 250ms both; padding: 0.4rem 0; }
/* Aviso de que algo salió bien: palomita agua antes del texto. */
.aviso-breve.bien { display: flex; align-items: center; gap: 0.6rem; }
.aviso-breve-marca { flex: none; position: relative; width: 22px; height: 22px; border-radius: 50%; background: var(--agua, #19c3b1); animation: ventana-entra 200ms var(--curva) 60ms both; }
.aviso-breve-marca::after { content: ''; position: absolute; left: 7.5px; top: 4px; width: 5px; height: 10px; border: solid #07080d; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
/* «Todo al día»: solo el ícono entra, una vez. */
.hoy-todo-bien > .icono { animation: ventana-entra 240ms var(--curva) 60ms both; }
/* El motivo de rechazo aparece sin empujar de golpe. */
.rev-motivo { transition: opacity var(--rapido) var(--curva), transform var(--rapido) var(--curva); }
@starting-style { .rev-motivo { opacity: 0; transform: translateY(-4px); } }
/* Las secciones plegables se abren con un fundido corto (los menús de exportar no: ya tienen el suyo). */
details:not(.menu-exportar):not(.barra-lista-exportar):not(.inicio-marcador)::details-content {
  opacity: 0; transition: opacity 160ms var(--curva), content-visibility 160ms allow-discrete;
}
details[open]:not(.menu-exportar):not(.barra-lista-exportar):not(.inicio-marcador)::details-content { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .fila-saliendo { transform: none; }
  @keyframes contador-late { from { opacity: 0; } }
}
.cierre-listo { padding-top: 0; }
.cierre-total { font-family: var(--fuente-titulo); font-size: 2rem; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; animation: n-aparece 200ms var(--curva) 120ms both; }
/* El agua dice «presente / bien»: quién está en turno y lo que quedó al día. */
.hoy-adentro .cifra-grande { color: var(--agua); }
.hoy-personas a::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--agua); }
.hoy-todo-bien { background: color-mix(in srgb, var(--agua) 14%, var(--superficie)); color: var(--agua-texto); }

/* --- HOY: «Por decidir» en una sola cola (la noche y lo ganado al lado en pantalla ancha) --- */
.hoy-rejilla { display: grid; gap: 1rem; margin-bottom: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.hoy-rejilla > .hoy-ganado { margin-bottom: 0; }
@media (min-width: 1100px) {
  .hoy-rejilla { grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); }
  .hoy-rejilla > .hoy-adentro { grid-column: 2; grid-row: 1; }
  .hoy-rejilla > .hoy-ganado { grid-column: 2; grid-row: 2; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'icono texto' 'monto monto' 'accion accion'; }
  .hoy-rejilla > .hoy-cola { grid-column: 1; grid-row: 1 / span 3; }
}
.cola-por-decidir { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
.cola-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 1rem; }
.cola-cabeza h2 { margin: 0; font-size: 1.3rem; }
.cola-total { color: var(--atento); }
.cola-filtros { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.cola-filtro { flex: none; min-height: 40px; padding: 0 0.9rem; border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto);
  font: inherit; font-weight: 650; cursor: pointer; transition: background-color var(--rapido) var(--curva), color var(--rapido) var(--curva), transform 160ms var(--curva); }
.cola-filtro span { color: var(--texto-suave); margin-left: 0.2rem; }
.cola-filtro.activo { background: var(--texto); color: var(--superficie); border-color: var(--texto); }
.cola-filtro.activo span { color: inherit; opacity: 0.8; }
.cola-filtro:active { transform: scale(0.97); }
@media (pointer: coarse) { .cola-filtro { min-height: 44px; } }
.cola-lista { margin: 0; padding: 0.2rem 1.1rem; }
.cola-mas { align-self: flex-start; }
.rev-tipo { font-size: 0.78rem; font-weight: 750; letter-spacing: 0.03em; text-transform: uppercase; color: var(--texto-suave); }
.rev-tipo.tipo-vales { color: var(--atento); }
.rev-tipo.tipo-pagos { color: var(--primario); }
.rev-tipo.tipo-ausencias { color: color-mix(in srgb, #0284c7 65%, var(--texto)); }
.rev-tipo.tipo-registros { color: var(--malo); }
.rev-tipo.tipo-reclamos { color: var(--agua-texto); }
.cola-resumen-icono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--atento-suave, var(--superficie-2)); color: var(--atento); }
/* Cada nombre es su propio renglón de 44 px para el dedo (antes, con relleno en un enlace de texto
   corrido, las zonas de toque de un renglón pisaban las del siguiente). El nombre largo baja de línea. */
.cola-personas { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.1rem; }
.cola-personas a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; }

/* POR ARREGLAR (public/js/admin/por-arreglar.js): la casilla para elegir ocupa la columna de la
   foto (44 px para el dedo); las horas, en una fila; la barra de lo elegido se parte en el teléfono. */
.arreglar-dia h2 { font-size: 1.05rem; margin: 0 0 0.2rem; }
.arreglar-fila { grid-template-columns: 44px minmax(16rem, 1fr) auto; }
.arreglar-fila.elegida { background: color-mix(in srgb, var(--primario) 7%, transparent); border-radius: var(--radio-chico); }
.arreglar-elegir { display: grid; place-items: center; min-width: 44px; min-height: 44px; cursor: pointer; }
.arreglar-elegir input { width: 22px; height: 22px; accent-color: var(--primario); }
.arreglar-horas { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.45rem; }
.arreglar-horas .campo { margin: 0; min-width: 8.5rem; flex: 0 1 10rem; }
.arreglar-barra { flex-wrap: wrap; }
@media (max-width: 640px) {
  .arreglar-fila { grid-template-columns: 44px minmax(0, 1fr); }
  .arreglar-barra > span:first-child { flex: 1 1 100%; }
  .arreglar-barra > .boton { flex: 1 1 auto; justify-content: center; }
}

/* «Conviene registrar de nuevo» (Sin reconocer): una fila por persona con el porqué y el botón. */
.registrar-de-nuevo ul { list-style: none; margin: .5rem 0 0; padding: 0; }
.registrar-de-nuevo li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem 0; border-top: 1px solid var(--borde); }
.registrar-de-nuevo li .boton { flex: none; }

/* PIN PARA ENTREGAR: la lista para elegir y las tarjetitas para imprimir y recortar. */
.pin-personas { list-style: none; margin: .75rem 0 0; padding: 0; }
.pin-personas li { padding: .55rem 0; border-top: 1px solid var(--borde); }
.pin-personas .casilla-linea > span { display: flex; flex-direction: column; gap: .1rem; }
.pin-tarjetas { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; }
.pin-tarjeta { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; padding: 1rem; border: 2px dashed var(--borde-fuerte, #9aa0b4); border-radius: 14px; background: var(--superficie, #fff); }
.pin-tarjeta .pin-empresa { font-size: .8rem; color: var(--texto-suave); }
.pin-tarjeta .pin-nombre { font-size: 1.1rem; }
.pin-tarjeta .pin-etiqueta { font-size: .85rem; color: var(--texto-suave); }
.pin-tarjeta .pin-numero { font-size: 2.6rem; font-weight: 800; letter-spacing: .35em; padding-left: .35em; font-variant-numeric: tabular-nums; line-height: 1.1; }
@media print {
  .pin-tarjetas { grid-template-columns: repeat(2, 1fr); }
  .pin-tarjeta { break-inside: avoid; border-color: #555; background: #fff; color: #000; }
  .pin-tarjeta .pin-empresa, .pin-tarjeta .pin-etiqueta { color: #333; }
}

/* CARGAR DESDE EXCEL (personal y horario): atajos de fechas como píldoras que se eligen y la lista de lo que cambia. */
button.pildora { font-family: inherit; cursor: pointer; }
.pildora.activa { background: var(--primario-suave); border-color: var(--primario); color: var(--texto); }
.lista-cambios { margin: 0; padding-left: 1rem; display: grid; gap: 0.15rem; }

/* CARGAR EL HORARIO DESDE EXCEL: la vista previa es la misma hoja (personas por
   días, con los colores de cada jornada) antes de guardar. La ventana se abre
   ancha; la persona queda fija a la izquierda y los días se deslizan. */
.velo.ancha .ventana { width: min(1180px, 100%); }
.pv-resumen { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0.2rem; }
.pv-marco { max-height: min(60dvh, 34rem); overflow: auto; border: 1px solid var(--borde); border-radius: var(--radio-chico); }
.pv-hoja { border-collapse: separate; border-spacing: 0; font-size: 0.82rem; min-width: 100%; }
.pv-hoja thead th { position: sticky; top: 0; z-index: 2; background: var(--superficie); font-weight: 600; text-align: center; padding: 0.4rem 0.35rem; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.pv-hoja thead th.pv-domingo { color: var(--texto-suave); }
.pv-hoja .pv-quien { position: sticky; left: 0; z-index: 1; background: var(--superficie); text-align: left; min-width: 11rem; max-width: 14rem; padding: 0.45rem 0.55rem; border-right: 1px solid var(--borde); border-bottom: 1px solid var(--borde); vertical-align: top; font-weight: 400; }
.pv-hoja thead .pv-quien { z-index: 3; }
.pv-quien select { width: 100%; white-space: normal; height: auto; margin-top: 0.25rem; min-height: 36px; font-size: 0.85rem; }
.pv-del-excel { display: block; font-weight: 600; overflow-wrap: anywhere; }
.pv-revise { display: block; margin-top: 0.2rem; font-size: 0.75rem; color: var(--atento); }
.pv-celda { min-width: 6.5rem; padding: 0.4rem 0.45rem; border-bottom: 1px solid var(--borde); border-right: 1px solid color-mix(in srgb, var(--borde) 60%, transparent); vertical-align: top; }
.pv-celda .turno-nombre, .pv-celda .turno-tramo { display: block; overflow-wrap: anywhere; }
.pv-celda.pv-cambia { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primario) 55%, transparent); }
.pv-celda.pv-igual { opacity: 0.55; }
.pv-sin { background: var(--superficie); }
.pv-antes-solo { color: var(--texto-suave); font-size: 0.78rem; overflow-wrap: anywhere; }
.pv-antes { display: block; margin-top: 0.2rem; font-size: 0.75rem; color: var(--texto-suave); overflow-wrap: anywhere; }
.pv-nuevo { display: inline-block; margin-top: 0.2rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--primario); }
.pv-error { font-weight: 600; color: var(--malo); overflow-wrap: anywhere; }
.pv-quitar { background: repeating-linear-gradient(45deg, var(--superficie) 0 6px, color-mix(in srgb, var(--malo, #d33) 8%, var(--superficie)) 6px 12px); }
.pv-quitar s { display: block; color: var(--texto-suave); overflow-wrap: anywhere; }
tr.pv-fuera .pv-celda { opacity: 0.35; }
.pv-archivo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; padding: 0.6rem 0.8rem; border-radius: var(--radio-chico); background: var(--fondo); }
.pv-archivo > span { flex: 1 1 16rem; overflow-wrap: anywhere; }
.pv-nuevos { margin-top: 0.8rem; }
.pv-nuevos-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.4rem 0.8rem; margin-top: 0.4rem; }
.pv-es { display: block; font-size: 0.8rem; color: var(--texto-suave); overflow-wrap: anywhere; }
.pv-cambiar { font-size: 0.8rem; margin-top: 0.15rem; }
@media (max-width: 640px) {
  .pv-hoja .pv-quien { min-width: 8.5rem; max-width: 9.5rem; }
  .pv-celda { min-width: 6rem; }
}

/* LA SEMANA FIJA (public/js/admin/horario.js): cada día con un turno de «Mis turnos»
   o Libre, la tira de 7 colores (en angosto, un día por fila) y la frase. */
.semana-fija { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.4rem 0 0.8rem; }
.semana-dias { display: flex; flex-direction: column; gap: 0.45rem; max-width: 36rem; }
.semana-dia { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.2rem 0.7rem; align-items: center; }
.semana-dia-nombre { font-weight: 600; }
.semana-dia-elige { display: flex; gap: 0.5rem; align-items: center; min-width: 0; }
.semana-dia-elige select { flex: 1; min-width: 0; min-height: 44px; }
.semana-dia small { grid-column: 2; }
.semana-punto { width: 6px; height: 28px; border-radius: 3px; flex: none; }
.semana-punto.t-libre { background: transparent; }
.semana-punto.t-diurna { background: var(--c-diurna, #f5b800); }
.semana-punto.t-mixta { background: var(--c-mixta, #f07a1a); }
.semana-punto.t-nocturna { background: var(--c-nocturna, #4b55e6); }
.semana-fija .enlace { align-self: flex-start; }
.tira-semana { container-type: inline-size; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0.4rem 0; }
.tira-semana > div { border-radius: 8px; padding: 0.4rem 0.3rem; font-size: 0.82rem; text-align: center; line-height: 1.25; overflow-wrap: anywhere; }
.tira-semana b { display: block; font-size: 0.75rem; color: var(--texto-suave); font-weight: 700; }
.frase-semana { border-left: 4px solid var(--agua); background: color-mix(in srgb, var(--agua) 10%, var(--superficie)); padding: 0.65rem 0.85rem; border-radius: 0 var(--radio-chico) var(--radio-chico) 0; margin: 0.4rem 0; }
@media (max-width: 640px) {
  .semana-dia { grid-template-columns: 6.2rem minmax(0, 1fr); }
  .tira-semana { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .tira-semana > div { display: flex; justify-content: space-between; gap: 0.8rem; text-align: left; padding: 0.4rem 0.7rem; font-size: 0.9rem; }
  .tira-semana b { font-size: 0.9rem; color: var(--texto); font-weight: 600; }
}

/* MIS TURNOS (public/js/admin/mis-turnos.js): una fila por turno con la franja del
   color de su jornada; se toca para cambiarlo (se abre al lado). */
.texto-ancho { max-width: 70ch; }
.mis-turnos { display: flex; flex-direction: column; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; background: var(--superficie); margin: 0.8rem 0; }
.mis-turno { display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; gap: 0.8rem; align-items: center; padding: 0.7rem 0.9rem 0.7rem 0; min-height: 64px; border: 0; border-top: 1px solid var(--borde); background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.mis-turno:first-child { border-top: 0; }
.mis-turno-franja { align-self: stretch; }
.mis-turno-franja.t-diurna { background: var(--c-diurna, #f5b800); }
.mis-turno-franja.t-mixta { background: var(--c-mixta, #f07a1a); }
.mis-turno-franja.t-nocturna { background: var(--c-nocturna, #4b55e6); }
.mis-turno-texto { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; overflow-wrap: anywhere; }
.mis-turno-texto > span:not(.etiqueta) { color: var(--texto-suave); font-size: 0.92rem; }
.mis-turno-texto .etiqueta { align-self: flex-start; }
.mis-turno-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; font-size: 0.82rem; color: var(--texto-suave); text-align: right; }
@media (hover: hover) and (pointer: fine) { .mis-turno:hover { background: var(--fondo); } }
.editar-turno { display: flex; flex-direction: column; gap: 0.75rem; }
.editar-turno-tramo { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.editar-turno-vista { border-radius: var(--radio-chico); padding: 0.7rem 0.85rem; display: flex; flex-direction: column; gap: 0.1rem; }
@media (max-width: 640px) { .mis-turno { grid-template-columns: 6px minmax(0, 1fr); } .mis-turno-lado { grid-column: 2; align-items: flex-start; text-align: left; } }
.de-su-semana { color: var(--texto-suave); font-style: italic; font-size: 0.82rem; overflow-wrap: anywhere; }
.de-su-semana small { font-size: 0.75rem; }
.opciones-semana { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.4rem 0 0.6rem; }
.opcion-semana { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0.6rem; align-items: start; border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 0.6rem 0.75rem; cursor: pointer; }
.opcion-semana input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--primario); }
.opcion-semana small { display: block; color: var(--texto-suave); font-size: 0.85rem; }
.opcion-semana:has(input:checked) { border-color: var(--primario); background: color-mix(in srgb, var(--primario) 8%, var(--superficie)); }
.opcion-semana.desactivada { opacity: 0.6; cursor: default; }
.solo-ver { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 0.8rem; margin: 0.3rem 0; }
.solo-ver dt { color: var(--texto-suave); font-size: 0.88rem; }
.solo-ver dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.puesto-estado { margin-left: 0.5rem; }
.rev-motivo { display: block; margin-top: 0.25rem; font-size: 0.88rem; color: var(--atento); overflow-wrap: anywhere; }
/* Bitácora: lo que cambió, campo por campo (antes → después), y los filtros de fecha. */
.bit-cambios { margin: 0.25rem 0 0; padding-left: 1.1rem; font-size: 0.88rem; color: var(--texto-suave); display: flex; flex-direction: column; gap: 0.1rem; }
.bit-cambios li { overflow-wrap: anywhere; }
.bit-fecha { min-width: 9.5rem; }
.bit-filtros { flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.8rem; }

/* ======================================================================
   EMPEZAR CON NEZTIME (public/js/admin/tutorial.js): el asistente de una
   empresa nueva (pantalla completa: la pregunta y «Así quedaría» al lado,
   abajo en el teléfono), el tutorial guiado (el control alumbrado, lo demás
   opaco) y la primera semana en Hoy. Sin movimientos largos: 200 ms y nada
   con «reducir movimiento».
   ====================================================================== */
.asis-capa { position: fixed; inset: 0; z-index: 60; background: var(--fondo); overflow-y: auto; overscroll-behavior: contain;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  animation: asis-entra 200ms var(--curva) both; }
@keyframes asis-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.asis-marco { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.asis-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; }
.asis-cabeza > span { display: flex; flex-direction: column; gap: 0.15rem; }
.asis-cabeza > span b { font-size: 1.15rem; }
.asis-cuerpo { display: grid; grid-template-columns: 15rem minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 1.25rem; align-items: start; }
.asis-marco:has(.asis-capitulos) { max-width: 1360px; }
/* Ajustes guiados (08/11/2026): los capítulos a la izquierda, el ejemplo en cada respuesta, la barra del teléfono. */
.asis-capitulos { position: sticky; top: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.asis-cap { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); gap: 0.65rem; align-items: center; text-align: left; font: inherit; color: inherit; background: none; border: 0; border-radius: 12px; padding: 0.55rem 0.5rem; min-height: 48px; cursor: pointer; }
.asis-cap b { display: block; font-size: 0.95rem; font-weight: 650; }
.asis-cap small { display: block; color: var(--texto-suave); font-size: 0.8rem; }
.asis-cap-bola { width: 1.9rem; height: 1.9rem; border-radius: 50%; display: grid; place-items: center; font-weight: 750; font-size: 0.85rem; background: var(--superficie-2); color: var(--texto-suave); }
.asis-cap.hecho .asis-cap-bola { background: var(--bien-suave); color: var(--entrada); }
.asis-cap.ahora { background: var(--primario-suave); }
.asis-cap.ahora .asis-cap-bola { background: var(--primario); color: var(--primario-texto); }
.asis-cap:focus-visible { outline: 2px solid var(--primario); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .asis-cap:not(.ahora):hover { background: var(--superficie-2); } }
.asis-capitulo-chip { align-self: flex-start; font-size: 0.82rem; font-weight: 700; padding: 0.25rem 0.65rem; border-radius: 999px; background: var(--primario-suave); color: var(--primario); }
.asis-ejemplo { display: block; margin-top: 0.45rem; padding: 0.5rem 0.7rem; border-radius: 10px; background: var(--fondo); color: var(--texto); font-size: 0.92rem; }
.asis-opcion.elegida .asis-ejemplo { background: var(--superficie); }
.asis-solo-principal { margin: 0; display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; color: var(--atento); }
.asis-botones .enlace { min-height: 44px; }
.asis-cambio-cap h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--texto-suave); margin: 0.6rem 0 0.2rem; }
.asis-cambio { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 0.8rem; padding: 0.6rem 0; border-top: 1px solid var(--borde); align-items: baseline; }
.asis-antes-despues { grid-column: 1 / -1; font-size: 0.95rem; }
.asis-antes-despues s { color: var(--texto-suave); }
.asis-antes-despues b { color: var(--entrada); }
.asis-exactos summary { cursor: pointer; color: var(--texto-suave); font-size: 0.9rem; min-height: 44px; display: flex; align-items: center; }
.asis-barra-tel { display: none; }
.asis-pregunta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-grande); box-shadow: var(--sombra); padding: 1.25rem; display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.asis-pregunta h2 { margin: 0; font-size: 1.35rem; line-height: 1.2; text-wrap: balance; outline: none; }
.asis-pregunta h3 { margin: 0.4rem 0 0; font-size: 1rem; }
.asis-pregunta .campo { margin: 0; }
.asis-avance { display: flex; flex-direction: column; gap: 0.35rem; }
.asis-barra { height: 6px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; }
.asis-barra > i { display: block; height: 100%; border-radius: inherit; background: var(--agua); transition: width 200ms var(--curva); }
.asis-opciones { display: flex; flex-direction: column; gap: 0.5rem; }
.asis-opcion { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0.75rem; align-items: start; border: 1px solid var(--borde-control); border-radius: var(--radio-control); padding: 0.8rem 0.9rem; min-height: 52px; cursor: pointer; background: var(--superficie); }
.asis-opcion input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--primario); }
.asis-opcion b { display: block; font-weight: 600; }
.asis-opcion small { display: block; color: var(--texto-suave); font-size: 0.88rem; margin-top: 0.1rem; }
.asis-opcion.elegida { border-color: var(--primario); background: var(--primario-suave); }
.asis-opcion:has(input:focus-visible) { box-shadow: var(--anillo-foco); }
.asis-rec { color: var(--agua-texto); font-weight: 700; }
.asis-porque { margin: 0; padding: 0.7rem 0.85rem; border-radius: var(--radio-chico); background: color-mix(in srgb, var(--agua) 14%, var(--superficie)); font-size: 0.93rem; }
.asis-bancos { border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 0.6rem 0.8rem; margin: 0; }
.asis-bancos legend { font-weight: 600; padding: 0 0.3rem; }
.asis-bancos .casilla-linea { margin: 0.3rem 0; }
.asis-vista { position: sticky; top: 0; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: 1.1rem; display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; transition: opacity 160ms var(--curva); }
.asis-vista.recalculando { opacity: 0.72; }
.asis-vista h3 { margin: 0; }
.asis-vista-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.asis-persona { display: flex; align-items: center; gap: 0.7rem; }
.asis-persona small { display: block; }
.asis-avatar { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; font-weight: 800; background: var(--primario-suave); color: var(--primario); }
.asis-cuentas { margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.asis-cuentas > div { display: flex; justify-content: space-between; gap: 0.8rem; align-items: baseline; }
.asis-cuentas dt { min-width: 0; }
.asis-cuentas dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.asis-total { border-top: 1px solid var(--borde); padding-top: 0.5rem; margin-top: 0.2rem; font-weight: 800; font-size: 1.08rem; }
.asis-palabras { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.7rem 0.85rem; border-left: 4px solid var(--agua); border-radius: 0 var(--radio-chico) var(--radio-chico) 0; background: var(--superficie); font-size: 0.93rem; }
.asis-revisar { margin: 0; display: flex; flex-direction: column; }
.asis-revisar > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 0.8rem; padding: 0.55rem 0; border-bottom: 1px solid var(--borde); align-items: baseline; }
.asis-revisar dt { color: var(--texto-suave); font-size: 0.9rem; grid-column: 1 / -1; }
.asis-revisar dd { margin: 0; font-weight: 600; }
.asis-cambios { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; }
.asis-reabrir { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; }
.asis-reabrir p { margin: 0.2rem 0 0; }
@media (max-width: 1100px) {
  .asis-cuerpo { grid-template-columns: 13rem minmax(0, 1fr); }
  .asis-lado { grid-column: 2; }
}
@media (max-width: 860px) {
  .asis-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .asis-lado { grid-column: auto; }
  .asis-vista { position: static; }
  /* En el teléfono: sin la columna de capítulos (el capítulo va arriba de la pregunta) y «Así quedaría» en una barra. */
  .asis-capitulos { display: none; }
  .asis-lado:not(.abierto) { display: none; }
  /* Pegajosa (no fija): al final ocupa su lugar y nunca tapa los botones de la pregunta. */
  .asis-barra-tel { display: flex; position: sticky; bottom: calc(0.75rem + env(safe-area-inset-bottom)); z-index: 2; width: 100%; justify-content: space-between; align-items: center; gap: 1rem;
    font: inherit; text-align: left; color: #fff; background: var(--texto); border: 0; border-radius: 16px; padding: 0.8rem 1rem; min-height: 56px; box-shadow: 0 10px 30px rgb(13 16 32 / 0.25); }
  .asis-barra-tel small { display: block; color: #c9ccdb; font-size: 0.8rem; }
  .asis-barra-tel:active { transform: scale(0.98); }
}

.guia-capa { position: fixed; inset: 0; z-index: 70; }
.guia-foco { position: fixed; border-radius: 12px; pointer-events: none; box-shadow: 0 0 0 4px var(--agua), 0 0 0 200vmax rgb(8 10 22 / 0.62);
  transition: top 200ms var(--curva), left 200ms var(--curva), width 200ms var(--curva), height 200ms var(--curva); }
.guia-globo { position: fixed; z-index: 1; background: var(--superficie); color: var(--texto); border-radius: var(--radio); box-shadow: var(--sombra-alta); padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem;
  transition: top 200ms var(--curva), left 200ms var(--curva); }
.guia-globo p { margin: 0; }
.guia-globo .fila-botones { margin: 0; }
.guia-globo.abajo { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
.guia-paso { font-size: 0.82rem; font-weight: 700; color: var(--agua-texto); }
.guia-voz { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; padding: 0 0.8rem; border-radius: 999px; border: 1px solid var(--borde-control); background: var(--superficie-2); font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--texto); cursor: pointer; }
.guia-voz.encendida { border-color: var(--agua); color: var(--agua-texto); background: color-mix(in srgb, var(--agua) 14%, var(--superficie)); }
.guia-salir { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; }
.guia-salir .enlace { min-height: 44px; }

.semana-tut { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1rem; }
.semana-tut h2 { margin: 0; }
.semana-tut p { margin: 0; }
.semana-tut-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.4rem 1rem; }
.semana-tut-dias { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.semana-tut-dia { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto; gap: 0.4rem 0.8rem; align-items: center; padding: 0.6rem 0.8rem; border: 1px solid var(--borde); border-radius: var(--radio-chico); }
.semana-tut-dia small { display: block; }
.semana-tut-dia.hoy { border-color: var(--primario); background: var(--primario-suave); }
.semana-tut-dia.hecho .semana-tut-estado { color: var(--agua-texto); }
.semana-tut-estado { font-size: 0.85rem; font-weight: 700; color: var(--texto-suave); }
.semana-tut-botones { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; justify-content: flex-end; }
.semana-tut-apagar { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; }
@media (max-width: 640px) {
  .semana-tut-dia { grid-template-columns: minmax(0, 1fr); }
  .semana-tut-botones { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .asis-capa { animation: none; }
  .asis-barra > i, .asis-vista, .guia-foco, .guia-globo { transition: none; }
}

/* Cargar personal: las dos maneras lado a lado en pantalla ancha, una debajo de la otra en el teléfono. */
.cargar-intro { margin: 0 0 0.75rem; max-width: 70ch; }
.cargar-maneras { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; }
.cargar-maneras .tarjeta { margin: 0; }
.cargar-maneras h2 { margin-top: 0; }
.cargar-maneras textarea { width: 100%; margin-top: 0.5rem; font: inherit; }

/* Lo que pide BAC para subir el archivo de planilla: cada dato con «Copiar». */
.bac-datos { margin: 0.75rem 0; padding: 0.9rem 1rem; border-radius: var(--radio, 14px); background: color-mix(in srgb, var(--primario) 7%, transparent); }
.bac-datos > p { margin: 0 0 0.5rem; }
.bac-dato { display: grid; grid-template-columns: 11rem 1fr auto; align-items: center; gap: 0.5rem; padding: 0.35rem 0; border-top: 1px solid color-mix(in srgb, var(--texto) 10%, transparent); }
.bac-dato b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.bac-dato input { font-size: 1.15rem; font-weight: 700; max-width: 9rem; }
.bac-dato small { grid-column: 1 / -1; }
@media (max-width: 640px) { .bac-dato { grid-template-columns: 1fr auto; } .bac-dato > span { grid-column: 1 / -1; } }
.banco-quienes { margin: 0.75rem 0; }
.banco-quienes > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.banco-lista { list-style: none; margin: 0; padding: 0; }
.banco-lista li { border-top: 1px solid color-mix(in srgb, var(--texto) 10%, transparent); }
.banco-lista label { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6rem; min-height: 44px; cursor: pointer; }
.banco-aplicadas { margin: 0.75rem 0; display: grid; gap: 0.5rem; justify-items: start; }
.banco-aplicadas > .banco-lista { justify-self: stretch; }
.banco-aplicadas-titulo { font-weight: 600; }
.banco-lista label small { grid-column: 2 / -1; margin-top: -0.4rem; padding-bottom: 0.4rem; }

/* HORARIOS, crítica del 02/11/2026: «Más» siempre a la vista con lo de vez en cuando (Cargar Excel,
   Por arreglar, Pantalla completa); Copiar y Mis turnos siguen afuera en la computadora y entran a
   «Más» en el teléfono. La leyenda de colores se pliega. Sin turnos: qué hacer primero. */
.horario-mas.siempre { display: block; }
.horario-mas-solo-telefono { display: none; }
@media (max-width: 640px) { .horario-mas-solo-telefono { display: contents; } }
.hoja-leyenda-plegable { margin: 0.6rem 0 0; }
.hoja-leyenda-plegable > summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; font-size: 0.9rem; font-weight: 600; color: var(--texto); }
.hoja-leyenda-plegable > .hoja-leyenda { margin-top: 0.2rem; }
.horario-vacio h2 { margin-top: 0; }
.horario-vacio .fila-botones { margin-bottom: 0; }

/* «Reducir movimiento»: lo que solo se funde se sigue fundiendo; lo que se desplazaba, ahora no. */
@media (prefers-reduced-motion: reduce) {
  .velo, .velo.al-lado, .cargando-panel { animation-duration: 160ms !important; }
  .aviso-breve.saliendo { transform: translateX(-50%); }
  .rev-motivo { transition-property: opacity; }
  @starting-style { .aviso-breve { opacity: 0; transform: translateX(-50%); } .rev-motivo { opacity: 0; transform: none; } }
}
@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  .velo-cajon { animation-duration: 160ms !important; }
  /* El cajón aparece con un fundido, sin deslizarse. */
  .menu { transform: none; opacity: 0; transition: opacity 160ms var(--curva), visibility 0s linear 160ms !important; }
  .menu.abierto { opacity: 1; transition: opacity 160ms var(--curva), visibility 0s !important; }
}
.esqueleto-hoja.cargando-panel { padding: 0; }

/* VARIAS PLANILLAS JUNTAS (#/planilla/juntas): la sábana con los días en columnas y el nombre fijo a la izquierda. */
.juntas-seccion h3 { margin-bottom: 0.2rem; }
.juntas-sabana th, .juntas-sabana td { vertical-align: top; }
.juntas-sabana thead th { white-space: normal; min-width: 6.5rem; }
.juntas-sabana .juntas-persona { position: sticky; left: 0; z-index: 1; background: var(--superficie); min-width: 11rem; text-align: left; }
.juntas-sabana .juntas-persona .enlace { text-align: left; font-weight: 600; }
.juntas-dia { min-width: 6.5rem; font-size: 0.8rem; line-height: 1.3; }
.juntas-dia b { display: block; font-variant-numeric: tabular-nums; }
.juntas-ausencia { background: var(--atento-suave); }
.juntas-feriado { background: color-mix(in srgb, var(--primario) 10%, transparent); }
.juntas-libre { background: color-mix(in srgb, var(--texto) 5%, transparent); }
.juntas-detalle { margin-top: 1rem; border-top: 1px solid var(--borde); padding-top: 0.8rem; }
.juntas-detalle h4 { margin: 0 0 0.4rem; }
.juntas-detalle .boleta-cuentas td:first-child { white-space: normal; }
.juntas-sabana tbody th, .juntas-sabana tfoot th { text-transform: none; letter-spacing: normal; font-size: 0.9rem; color: var(--texto); }
.juntas-sabana tbody th .sutil { font-weight: 400; font-size: 0.8rem; }

/* CON EL DEDO, AL FINAL DE TODO (auditoría 04/11/2026, E-1): lo que se toca mide al menos 44 px. Va aquí
   abajo porque reglas de más arriba con la misma fuerza (segmentados, filtros, ayudas) lo bajaban a 32–38 px. */
@media (pointer: coarse) {
  .boton.chico, .segmentado a, .segmentado button, .pestanas button, .rev-ayuda > summary, .ter-ayuda > summary, details > summary.boton { min-height: 44px; }
  .boton-icono, .filtros-cabeza .boton-icono { min-width: 44px; min-height: 44px; }
}

/* «Saltar al contenido» (E-11): no se ve hasta que llega el foco del teclado. */
.saltar-contenido { position: absolute; left: 0.75rem; top: 0.75rem; z-index: 1000; padding: 0.6rem 1rem; border-radius: var(--radio-control); background: var(--primario); color: var(--primario-texto); font-weight: 650; text-decoration: none; transform: translateY(-200%); }
.saltar-contenido:focus { transform: none; }
#contenido-principal:focus, #contenido-principal h1:focus { outline: none; }
/* Con el dedo (E-8, E-9): el nombre en Horarios crece su zona de toque sin mover la fila; las cuentas y los días del portal, 44 px. */
@media (pointer: coarse) {
  .hoja-persona .hoja-nombre { position: relative; padding-block: 6px; margin-block: -6px; }
  .cuentas-portal > summary { min-height: 44px; display: flex; align-items: center; }
  .dias-portal .dp-dia { min-height: 44px; }
}

/* «Registrarme o registrar de nuevo» en el terminal (public/js/registro-terminal.js). */
.registro-admin { display: grid; gap: .8rem; }
.registro-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.registro-persona { width: 100%; justify-content: flex-start; text-align: left; }
.registro-persona span { display: grid; gap: .2rem; }
.registro-persona small { font-weight: 400; font-size: .9rem; color: var(--texto-suave, inherit); }
/* «¿Es usted…?» (06/11/2026): los nombres más parecidos, enteros, uno debajo del otro. */
.es-usted { display: grid; gap: .7rem; }
.es-usted-nombres { display: grid; gap: .6rem; }
.es-usted-persona { width: 100%; justify-content: flex-start; text-align: left; }
.es-usted-persona span { display: grid; gap: .2rem; }
.es-usted-persona small { font-weight: 400; font-size: .9rem; color: var(--texto-suave, inherit); }

/* INTERRUPTOR como el del iPhone (Ajustes → Jornada, «Se paga la hora de almuerzo»): toda la fila se toca. */
.interruptor-fila { gap: .35rem; }
.interruptor { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 44px;
  padding: .35rem 0; background: none; border: 0; color: var(--texto); font: inherit; text-align: left; cursor: pointer; }
.interruptor-texto { font-weight: 600; }
.interruptor-pista { position: relative; flex: none; width: 51px; height: 31px; border-radius: 999px;
  background: var(--borde-control); transition: background-color var(--rapido) var(--curva); }
.interruptor-bola { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.2); transition: transform var(--rapido) var(--curva); }
.interruptor.encendido .interruptor-pista { background: var(--entrada); }
.interruptor.encendido .interruptor-bola { transform: translateX(20px); }
.interruptor:focus-visible { outline: none; }
.interruptor:focus-visible .interruptor-pista { box-shadow: var(--anillo-foco); }
@media (prefers-reduced-motion: reduce) { .interruptor-pista, .interruptor-bola { transition: none; } }

/* «Le falta marcar» dentro de Por revisar (Por arreglar incrustada). */
.rev-faltas { display: grid; gap: .75rem; margin-bottom: 1.25rem; }
.rev-faltas-titulo { font-size: 1.15rem; margin: 0; }
.rev-piezas { margin: .15rem 0 .1rem 1.1rem; padding: 0; display: grid; gap: .15rem; }

/* VALES Y FALTANTES DEL DÍA */
.vf-persona { display: flex; gap: .75rem; align-items: flex-start; }
.vf-cuerpo { display: grid; gap: .5rem; flex: 1; min-width: 0; }
.vf-campos { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }
.vf-campos .campo-junto input { width: 8rem; }
.vf-motivo { flex: 1 1 14rem; }
.vf-hechos ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; }
.vf-semana-nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.vf-dias { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.vf-dia { width: 100%; min-height: 44px; display: grid; gap: .2rem; text-align: left; padding: .8rem; border-radius: var(--radio); border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); font: inherit; cursor: pointer; box-shadow: var(--sombra); }
.vf-dia.hoy { border-color: var(--primario); }
.vf-dia.vacio { color: var(--texto-suave); }
.vf-dia-nombre { font-weight: 650; }
.vf-del-dia { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.vf-del-dia-fila { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.vf-detalle { margin: .2rem 0 0 1.1rem; padding: 0; color: var(--texto-suave); font-size: .92rem; }
/* La hoja de vales y faltantes (persona × día): la misma hoja de Horarios (.hoja, .hoja-tabla, .hoja-dia, .hoja-persona, .hoja-calc). */
.vf-filtros { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: .75rem; }
.vf-filtros .campo { flex: 1 1 12rem; max-width: 20rem; }
.vf-hoja .hoja-celda { min-width: 7.5rem; height: 4.4rem; padding: 0 !important; }
.vf-cuadre { display: grid; justify-items: center; gap: .1rem; line-height: 1.2; }
.vf-monto { font-size: .75rem; font-variant-numeric: tabular-nums; color: var(--texto); white-space: nowrap; }
.vf-monto.faltante { color: var(--malo); font-weight: 600; }
.vf-monto.cero { color: var(--texto-suave); }
.vf-casilla { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 100%; height: 100%; min-height: 44px; cursor: pointer; }
.vf-casilla:focus-visible { box-shadow: var(--anillo-foco); border-radius: 6px; }
.vf-celda.futura { background: color-mix(in srgb, var(--texto-suave) 4%, var(--superficie)); }
.vf-celda.futura .vf-casilla { cursor: default; }
.vf-check { display: inline-flex; color: var(--entrada); vertical-align: middle; }
.vf-check.pendiente { color: var(--atento); }
.vf-mas { opacity: 0; transition: opacity var(--rapido) var(--curva); }
.vf-celda:not(.futura) .vf-casilla:focus-visible .vf-mas { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .vf-celda:not(.futura):hover .vf-mas { opacity: 1; } }
@media (pointer: coarse) { .vf-celda:not(.futura) .vf-mas { opacity: .55; } }
.vf-leyenda .vf-mas { opacity: 1; width: 1.25rem; height: 1.25rem; line-height: 1.25rem; font-size: .85rem; }
.vf-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .6rem; }
.vf-ceros { font-size: .75rem; display: block; margin: .15rem auto 0; text-transform: none; letter-spacing: 0; }
.vf-ventana { display: grid; gap: .75rem; }
.vf-guardado { display: flex; gap: .4rem; align-items: flex-start; margin: 0; }
.vf-falta { color: var(--atento); margin: 0; }
.vf-reparto { display: grid; gap: .5rem; }
.vf-reparto-titulo { font-weight: 600; }
.vf-reparto .segmentado { flex-wrap: wrap; }
.vf-reparto .casilla-linea { margin: 0; }
.vf-parte { margin: 0; }
.vf-companeros { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; max-height: 18rem; overflow-y: auto; }
.vf-companeros li { border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: .5rem .65rem; background: var(--superficie); }
.vf-companeros li.elegido { border-color: var(--primario); }
.vf-companeros .casilla-linea span { display: grid; gap: .1rem; }
.vf-vale-de { margin: .4rem 0 0 2.2rem; }
.vf-vale-de input { width: 9rem; }
.vf-hoja .hoja-tabla { min-width: 100%; }

/* EL PANEL DE UNA CASILLA DE HORARIOS, «CPU DEL COLABORADOR» (08/11/2026): el resumen del día arriba y cinco pestañas
   que siempre caben (nunca se corta un nombre). Más ancho que la ventanita de antes: trae más. */
.turno-pop.cpu { width: min(28rem, calc(100vw - 16px)); max-height: min(40rem, calc(100dvh - 16px)); }
.turno-pop.cpu.abajo { width: auto; max-height: 90dvh; }
.cpu-resumen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
.cpu-dato { background: var(--superficie-2); border-radius: var(--radio-control); padding: 0.45rem 0.6rem; min-width: 0; }
.cpu-dato small { display: block; color: var(--texto-suave); font-size: 0.78rem; }
.cpu-dato b { font-size: 0.95rem; overflow-wrap: anywhere; }
.cpu-dato.bien b { color: var(--entrada); }
.cpu-dato.atento { background: var(--atento-suave); } .cpu-dato.atento b { color: var(--atento); }
.cpu-dato.malo { background: var(--malo-suave); } .cpu-dato.malo b { color: var(--malo); }
.cpu-aviso { margin: 0; }
.cpu-pestanas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 4px; background: var(--superficie-2); border-radius: 16px; }
.cpu-pestanas button { position: relative; min-height: 48px; border: 0; background: none; border-radius: 12px; padding: 0.25rem 0.1rem; font: 600 0.8rem/1.15 var(--fuente); color: var(--texto-suave); cursor: pointer; overflow-wrap: anywhere;
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva), transform 160ms var(--curva); }
/* Responde bajo el dedo (se toca decenas de veces: apenas se nota). */
.cpu-pestanas button:active { transform: scale(0.97); }
.cpu-pestanas button.activa { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-control); }
.cpu-pestanas button:focus-visible { outline: none; box-shadow: var(--anillo-foco); }
.cpu-num { position: absolute; top: 2px; right: 3px; min-width: 18px; height: 18px; border-radius: 999px; background: var(--atento); color: #fff; font-size: 0.7rem; display: grid; place-items: center; padding: 0 4px; }
.cpu-cuerpo { animation: cpu-entra 120ms var(--curva); }
/* Cambiar de pestaña se siente inmediato: solo un fundido corto, sin moverse. */
@keyframes cpu-entra { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cpu-cuerpo, .cpu-pestanas button { animation: none; transition: none; } }
.cpu-lista { display: flex; flex-direction: column; gap: 0.6rem; }
.cpu-fila { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; border-top: 1px solid var(--borde); }
.cpu-fila:first-child { border-top: 0; }
.cpu-que { flex: 1; min-width: 0; } .cpu-que small { display: block; color: var(--texto-suave); font-size: 0.82rem; }
.cpu-botones { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
.cpu-form { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.6rem; border-radius: var(--radio-control); background: var(--superficie-2); }
.cpu-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.cpu-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.cpu-sub { font-size: 0.85rem; color: var(--texto-suave); margin-top: 0.3rem; }
.cpu-texto-horario { white-space: pre-wrap; font: inherit; font-size: 0.9rem; background: var(--superficie-2); border-radius: var(--radio-control); padding: 0.6rem; margin: 0; }
.turno-pop-embebido { display: flex; flex-direction: column; gap: 0.8rem; }

/* LA BARRA DE VARIAS CASILLAS (08/11/2026): fija abajo mientras hay más de una casilla elegida; el contenido deja su lugar. */
.barra-varias { position: fixed; z-index: 55; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(1100px, calc(100vw - 24px));
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; padding: 0.6rem 0.7rem; background: var(--texto); color: #fff; border-radius: 20px; box-shadow: var(--sombra-alta);
  animation: barra-sube 220ms var(--curva-cajon); }
@keyframes barra-sube { from { transform: translate(-50%, 24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .barra-varias { animation: none; } }
.barra-varias-cuenta { display: flex; flex-direction: column; margin-right: 0.4rem; } .barra-varias-cuenta small { opacity: 0.78; }
.barra-varias .boton { background: #1f2336; border-color: #2f3450; color: #fff; }
.barra-varias .boton.primario { background: var(--primario); border-color: var(--primario); }
.barra-varias-quitar { margin-left: auto; }
body.con-barra-varias .contenido { padding-bottom: max(6rem, var(--barra-varias-alto, 6rem)); }
.hoja-fila-elegible { cursor: pointer; }
.turno-pop-confirmar { display: flex; flex-direction: column; gap: 0.6rem; animation: confirmar-entra 150ms var(--curva); }
@keyframes confirmar-entra { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .turno-pop-confirmar, .cpu-pestanas button:active { animation: none; transform: none; } } .turno-pop-confirmar p { margin: 0; }
@media (max-width: 640px) { .barra-varias { gap: 0.35rem; } .barra-varias .boton { flex: 1 1 auto; } .barra-varias-quitar { margin-left: 0; } }
.mandar-horario { display: flex; flex-direction: column; gap: 0.6rem; } .mandar-horario p { margin: 0; }
.mandar-horario-lista { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mandar-horario-lista .boton.hecho { background: var(--bien-suave); border-color: var(--entrada); }

/* AJUSTES EN PREGUNTAS (Ajustes guiados, 08/11/2026): los capítulos en #/ajustes y las preguntas de cada uno. */
.ajustes-reconfigurar { background: var(--primario-suave); border-color: transparent; }
.ajustes-capitulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0.8rem; margin: 0.4rem 0 1.2rem; }
.ajustes-capitulo { display: flex; flex-direction: column; gap: 0.45rem; padding: 1rem 1.1rem; border-radius: var(--radio-grande); background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra); color: inherit; text-decoration: none; min-height: 44px; }
.ajustes-capitulo > b { font-size: 1.08rem; }
.ajustes-capitulo ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.92rem; color: var(--texto-suave); }
.ajustes-capitulo li::before { content: '•'; color: var(--agua-texto); margin-right: 0.45rem; }
.ajustes-capitulo .etiqueta { align-self: flex-start; white-space: normal; max-width: 100%; }
.ajustes-capitulo li b { color: var(--texto); font-weight: 600; }
.ajustes-capitulo-pie { margin-top: auto; display: flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; font-weight: 650; color: var(--primario); }
.ajustes-capitulo:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }
.ajustes-capitulo:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .ajustes-capitulo:hover { border-color: color-mix(in srgb, var(--primario) 35%, transparent); } }
.ajustes-detallados { font-size: 1rem; color: var(--texto-suave); margin: 0.6rem 0 0.4rem; }
.ajustes-capitulo-intro { margin: 0 0 0.8rem; }
.ajustes-preguntas { display: flex; flex-direction: column; padding: 0.2rem 1.1rem; }
.ajustes-pregunta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1rem; align-items: center; padding: 0.95rem 0; border-top: 1px solid var(--borde); }
.ajustes-pregunta:first-child { border-top: 0; }
.ajustes-pregunta > b { font-size: 1.02rem; }
.ajustes-pregunta-respuesta { grid-column: 1; color: var(--texto-suave); }
.ajustes-pregunta > .boton, .ajustes-pregunta-solo { grid-column: 2; grid-row: 1 / 3; }
.ajustes-pregunta-solo { display: flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; max-width: 12rem; }
.ajustes-pregunta.abierta { display: flex; flex-direction: column; gap: 0.6rem; align-items: stretch; margin: 0.4rem -0.5rem; padding: 0.9rem 1rem; border: 2px solid var(--primario); border-radius: var(--radio); }
.ajustes-pregunta.abierta + .ajustes-pregunta { border-top: 0; }
.ajustes-pregunta.abierta p { margin: 0; }
.ajustes-pregunta-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.ajustes-pregunta-pie .fila-botones { margin: 0; }
.probado { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; color: var(--entrada); }
.ajustes-mas { margin-top: 1rem; }
.ajustes-mas summary { cursor: pointer; font-weight: 650; min-height: 44px; display: flex; align-items: center; }
.ajustes-mas ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.ajustes-mas a { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; min-height: 48px; padding: 0.4rem 0.2rem; border-top: 1px solid var(--borde); color: inherit; text-decoration: none; }
@media (max-width: 640px) {
  .ajustes-pregunta { grid-template-columns: minmax(0, 1fr); }
  .ajustes-pregunta > .boton, .ajustes-pregunta-solo { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* LA GUÍA COMPLETA DE CADA PANTALLA (#/ayuda, 08/11/2026) y el menú de «Ver el tutorial». */
.ver-tutorial-caja { position: relative; display: inline-flex; }
.ver-tutorial-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 16rem; display: flex; flex-direction: column; padding: 0.35rem; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra-alta); }
.ver-tutorial-menu > * { display: flex; flex-direction: column; gap: 0.1rem; text-align: left; font: inherit; color: inherit; text-decoration: none; background: none; border: 0; border-radius: 10px; padding: 0.6rem 0.75rem; min-height: 48px; cursor: pointer; }
.ver-tutorial-menu small { color: var(--texto-suave); font-size: 0.82rem; }
.ver-tutorial-menu > *:focus-visible { outline: 2px solid var(--primario); }
@media (hover: hover) and (pointer: fine) { .ver-tutorial-menu > *:hover { background: var(--superficie-2); } }
.ayuda-intro { margin: 0 0 0.8rem; }
.ayuda-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 0.8rem; margin-top: 0.8rem; }
.ayuda-guia { max-width: 46rem; display: flex; flex-direction: column; gap: 1.2rem; }
.ayuda-guia-para-que { font-size: 1.08rem; margin: 0; }
.ayuda-guia-indice { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ayuda-guia-indice a { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 40px; padding: 0.4rem 0.85rem; border-radius: 999px; background: var(--primario-suave); color: var(--primario); font-weight: 650; text-decoration: none; }
.ayuda-guia-seccion { display: flex; flex-direction: column; gap: 0.5rem; scroll-margin-top: 1rem; }
.ayuda-guia-seccion h2 { font-size: 1.2rem; margin: 0.4rem 0 0.2rem; }
.ayuda-guia-tarea { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 0 1rem; }
.ayuda-guia-tarea summary { cursor: pointer; font-weight: 650; min-height: 52px; display: flex; align-items: center; }
.ayuda-guia-tarea[open] summary { border-bottom: 1px solid var(--borde); }
.ayuda-guia-tarea ol { margin: 0.7rem 0 0.9rem; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.45rem; }
.ayuda-guia-tarea > p { margin: 0.7rem 0 0.9rem; }
.ayuda-guia-significa { margin: 0; display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 0 1rem; }
.ayuda-guia-significa > div { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 0.3rem 1rem; padding: 0.7rem 0; border-top: 1px solid var(--borde); }
.ayuda-guia-significa > div:first-child { border-top: 0; }
.ayuda-guia-significa dt { font-weight: 650; }
.ayuda-guia-significa dd { margin: 0; color: var(--texto-suave); }
.ayuda-guia-ejemplo { margin: 0; }
.ayuda-guia-ajustes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.ayuda-guia-ajustes a { font-weight: 650; display: inline-flex; align-items: center; gap: 0.3rem; min-height: 44px; }
.ayuda-guia-ajustes small { display: block; }
@media (max-width: 640px) { .ayuda-guia-significa > div { grid-template-columns: minmax(0, 1fr); } }

/* A QUIÉN PEDIR AYUDA (contacto-ayuda.js): el contacto de la empresa y, aparte y más chico, el soporte técnico. */
.ayuda-contacto { margin-top: 1rem; display: grid; gap: 0.4rem; text-align: center; }
.ayuda-contacto-titulo { margin: 0; font-weight: 700; }
.ayuda-contacto .fila-botones { margin-top: 0.2rem; }
.ayuda-contacto-soporte { margin: 0.4rem 0 0; font-size: 0.875rem; line-height: 1.45; }
.ayuda-contacto-soporte a { overflow-wrap: anywhere; }
.ayuda-contacto .sin-cortar { white-space: nowrap; }

/* =============================================================================
   SU HORARIO Y LO QUE MARCÓ (09/11/2026): dos bloques aparte en «Listo» (terminal y teléfono), con aire entre los
   dos, para que no se confunda el horario con la hora marcada. Usa los colores de cada pantalla (clara u oscura).
   ============================================================================= */
.horario-y-marcada { display: grid; gap: 0.75rem; width: 100%; max-width: 30rem; text-align: left; }
/* La hora grande del «Listo»: «7:48 p. m.» con su espacio (la cifra y el «p. m.» chico iban pegados). */
.listo-hora b small { margin-left: 0.2em; }
.hm-bloque { border-radius: var(--radio); padding: 0.8rem 1rem; background: var(--superficie-2); }
.hm-bloque.hm-marco { background: var(--superficie); border: 1.5px solid var(--borde); }
.hm-etiqueta { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-suave); }
.hm-valor { font-size: 1.15rem; font-weight: 700; margin-top: 0.2rem; }
.hm-valor small { font-size: 0.8em; margin-left: 0.15em; }
.hm-fila { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.hm-fila + .hm-fila { margin-top: 0.4rem; }
.hm-pildora { display: inline-flex; align-items: center; padding: 0.3rem 0.75rem; border-radius: 999px; font-size: 0.9rem; font-weight: 700; }
.hm-pildora.bien { background: var(--bien-suave); color: var(--entrada); }
.hm-pildora.atento { background: var(--atento-suave); color: var(--atento); }
.hm-pildora.info { background: var(--primario-suave); color: var(--primario); }
.listo-nombre { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; margin: 0; overflow-wrap: break-word; }
/* El terminal oscuro: el verde y el ámbar suaves pasan a su versión de noche. */
body.kiosko.diseno-nuevo:not(.con-luz) .hm-pildora.bien { background: color-mix(in srgb, var(--entrada) 18%, transparent); }
body.kiosko.diseno-nuevo:not(.con-luz) .hm-pildora.atento { background: color-mix(in srgb, var(--atento) 18%, transparent); }
.horario-y-marcada { animation: hm-entra 260ms var(--curva) both; }
@keyframes hm-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .horario-y-marcada { animation: none; } }

/* LA TARJETA DE ASISTENCIA (10/11/2026, maqueta aprobada): el papel de .tarjeta-ponchar con su horario de hoy, sus
   próximos días con color y los cumpleaños del equipo. El papel es claro también de noche (es papel). */
.tarjeta-asistencia .tarjeta-ponchar-fila { grid-template-columns: 1.25fr 1.15fr 1fr; gap: 0.4rem; }
.tarjeta-asistencia .tarjeta-sello { font-size: 0.92em; padding: 0.05rem 0.4rem; }
.ta-dia { font-family: var(--fuente); font-weight: 700; font-size: 0.92rem; white-space: nowrap; }
.tarjeta-ponchar-fila.ta-hoy { min-height: 2.9rem; }
.ta-horario {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap;
  margin: 0.15rem 0 0.3rem; padding: 0.5rem 0.65rem; border-radius: 12px; background: rgb(75 85 230 / 0.07); font-size: 0.92rem; color: #17160f;
}
.ta-horario b { font-weight: 800; }
.ta-pildora { display: inline-flex; align-items: center; padding: 0.25rem 0.65rem; border-radius: 999px; font-size: 0.85rem; font-weight: 700; white-space: nowrap; }
.ta-pildora.bien { background: #ddf7ec; color: #0b7a56; }
.ta-pildora.atento { background: #fff1d9; color: #9a5a00; }
.ta-pildora.info { background: #e6e8fd; color: #3a43c4; }
.ta-separa { display: flex; align-items: center; gap: 0.5rem; margin: 0.55rem 0 0.1rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; color: #5a574e; }
.ta-separa::after { content: ''; flex: 1; border-top: 1px dashed #dcd8ce; }
.ta-viene { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; min-height: 2.4rem; color: #17160f; }
.ta-chip {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.65rem; border-radius: 10px; font-weight: 700; font-size: 0.88rem;
  text-align: right; overflow-wrap: anywhere;
}
.ta-chip i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.ta-chip.turno { background: #e6e8fd; color: #3a43c4; }
.ta-chip.libre { background: #eceae3; color: #5a574e; }
.ta-chip.vacaciones { background: #d6f5f1; color: #0b7a6e; }
.ta-chip.feriado { background: #fff1d9; color: #9a5a00; }
.ta-chip.ausencia { background: #fde8e9; color: #a4232c; }

/* Los cumpleaños del equipo: una tarjeta cálida, aparte del papel. */
.cumple-equipo {
  width: 100%; max-width: 30rem; padding: 0.75rem 0.9rem; border-radius: 18px; text-align: left; color: #17160f;
  background: linear-gradient(135deg, #fff4d6, #ffe3ef); animation: ce-entra 240ms var(--curva) 240ms both;
}
@keyframes ce-entra { from { opacity: 0; transform: translateY(8px); } }
.ce-hoy { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; font-size: 1rem; }
.ce-hoy small { display: block; font-weight: 600; color: #5a574e; font-size: 0.85rem; }
.ce-titulo { margin-top: 0.5rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; color: #8a4b00; }
.ce-hoy + .ce-titulo { padding-top: 0.5rem; border-top: 1px solid rgb(138 75 0 / 0.15); }
.ce-lista { margin: 0.35rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.25rem; font-size: 0.92rem; }
.ce-lista li { display: flex; justify-content: space-between; gap: 0.75rem; }
.ce-lista li span:first-child { font-weight: 700; overflow-wrap: anywhere; }
.ce-lista li span:last-child { color: #5a574e; white-space: nowrap; }

/* La cinta de la espera del terminal con los próximos cumpleaños. */
.cinta-cumple:has(.cinta-cumple-proximos) { flex-direction: column; align-items: stretch; gap: 0.35rem; border-radius: 18px; padding: 0.55rem 0.9rem; }
.cinta-cumple-hoy { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; }
.cinta-cumple-proximos { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.2rem; font-weight: 500; }
.cinta-cumple-proximos li { display: flex; justify-content: space-between; gap: 1rem; }
.cinta-cumple-proximos li span:last-child { color: var(--texto-suave); white-space: nowrap; }
.cinta-cumple-titulo { justify-content: flex-start !important; gap: 0.4rem !important; font-weight: 700; }

/* «Hoy» del teléfono: sus próximos días como hojas de calendario. */
.portal-proximos { display: grid; gap: 0.75rem; margin: 0.75rem 0; }
.dias-hoja { padding: 0.85rem; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--borde); }
.dias-hoja-titulo { margin-bottom: 0.55rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; color: var(--texto-suave); }
.dias-hoja-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.dia-hoja { min-width: 0; padding: 0.6rem; border-radius: 14px; background: var(--superficie-2); }
.dia-hoja.hoy { background: var(--primario); color: var(--primario-texto); }
.dh-nombre { font-size: 0.8rem; font-weight: 700; opacity: 0.85; }
.dh-numero { font-size: 1.55rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.dh-texto { margin-top: 0.25rem; font-size: 0.86rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.dh-texto span { display: block; }
.dia-hoja:not(.hoy).libre .dh-texto { color: var(--texto-suave); }
.dia-hoja:not(.hoy).vacaciones .dh-texto { color: var(--agua-texto); }
.dia-hoja:not(.hoy).feriado .dh-texto { color: var(--atento); }

/* TELÉFONO DE BAJA GAMA (automático, marcarGama): lo mismo sin giro, sombras grandes, degradados ni animación. */
.gama-sencilla .tarjeta-ponchar { transform: none !important; box-shadow: none !important; border: 1.5px solid #e7e3d8; animation: none !important; }
.gama-sencilla .tarjeta-sello, .gama-sencilla .tarjeta-hoyo, .gama-sencilla .cumple-equipo, .gama-sencilla .celebracion .pastel { animation: none !important; }
.gama-sencilla .tarjeta-sello { transform: rotate(-5deg); }
.gama-sencilla .cumple-equipo { background: #fff4d6; }
.gama-sencilla .confeti { display: none; }
/* GAMA MEDIA (10/11/2026): todo el diseño, más liviano: la mitad del confeti y sin desenfoque (el desenfoque es lo
   que más cuesta dibujar). En gama baja tampoco hay desenfoque. Los fondos ya son casi opacos: se leen igual. */
.gama-media .confeti span:nth-child(2n) { display: none; }
:is(.gama-media, .gama-sencilla) * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
@media (prefers-reduced-motion: reduce) { .cumple-equipo { animation: none; } }