/* =========================================================================
   SATH — sistema de diseño
   Paleta institucional teal sobre neutros fríos. Tipografía del sistema:
   sin CDN, para que la app cargue igual de rápido desde el VPS y no dependa
   de una red externa.
   ========================================================================= */

:root {
  /* Superficies y texto */
  --ground:        #eef1f2;
  --surface:       #ffffff;
  --surface-2:     #f3f6f6;
  --surface-3:     #e7ecec;
  --ink:           #141c1e;
  --ink-2:         #43555a;
  --ink-3:         #6e8085;
  --rule:          #d5dddd;
  --rule-strong:   #b6c2c2;

  /* Acento */
  --accent:        #1c6b5a;
  --accent-fuerte: #15564a;
  --accent-suave:  #dcebe6;
  --accent-contra: #ffffff;

  /* Semánticos: independientes del acento */
  --ok:            #1c6b5a;
  --ok-suave:      #dcebe6;
  --aviso:         #8a5a10;
  --aviso-suave:   #f6ecd8;
  --error:         #97362b;
  --error-suave:   #f8e2de;
  --info:          #2a5878;
  --info-suave:    #dfeaf2;

  /* Barra lateral: siempre oscura, en ambos temas.
     Los valores de texto se eligieron por contraste medido sobre --barra:
     texto 11.4:1, títulos 7.1:1, atenuado 5.6:1. Todos por encima del
     mínimo AA de 4.5:1 para texto normal. */
  --barra:         #16262a;
  --barra-2:       #22383e;
  --barra-3:       #2b454c;
  --barra-texto:   #e8f1f0;
  --barra-tenue:   #a9c2c0;
  --barra-titulo:  #bcd4d1;
  --barra-activo:  #6ed0b2;

  --sombra:    0 1px 2px rgba(20,28,30,.06), 0 6px 20px -14px rgba(20,28,30,.3);
  --sombra-lg: 0 2px 6px rgba(20,28,30,.08), 0 18px 44px -24px rgba(20,28,30,.45);

  --sans: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --r-sm: 4px;
  --r:    7px;
  --r-lg: 12px;

  --barra-ancho: 264px;
  --transicion: 160ms cubic-bezier(.2,.7,.4,1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #0d1315;
    --surface:     #151e21;
    --surface-2:   #1c282b;
    --surface-3:   #253335;
    --ink:         #dfe8e7;
    --ink-2:       #a5b7b6;
    --ink-3:       #7a8c8c;
    --rule:        #27363a;
    --rule-strong:  #3a4c50;

    --accent:        #57b39a;
    --accent-fuerte: #6ec6ad;
    --accent-suave:  #12312b;
    --accent-contra: #08201b;

    --ok:          #57b39a;  --ok-suave:    #12312b;
    --aviso:       #d5a355;  --aviso-suave: #32270f;
    --error:       #e08b7e;  --error-suave: #38211d;
    --info:        #82b3d6;  --info-suave:  #15252f;

    --barra:       #101a1d;
    --barra-2:     #1b2f34;
    --barra-3:     #243d43;

    --sombra:    0 1px 2px rgba(0,0,0,.4), 0 6px 20px -14px rgba(0,0,0,.8);
    --sombra-lg: 0 2px 6px rgba(0,0,0,.5), 0 18px 44px -24px rgba(0,0,0,.9);
  }
}

:root[data-theme="dark"] {
  --ground:      #0d1315;
  --surface:     #151e21;
  --surface-2:   #1c282b;
  --surface-3:   #253335;
  --ink:         #dfe8e7;
  --ink-2:       #a5b7b6;
  --ink-3:       #7a8c8c;
  --rule:        #27363a;
  --rule-strong: #3a4c50;

  --accent:        #57b39a;
  --accent-fuerte: #6ec6ad;
  --accent-suave:  #12312b;
  --accent-contra: #08201b;

  --ok:          #57b39a;  --ok-suave:    #12312b;
  --aviso:       #d5a355;  --aviso-suave: #32270f;
  --error:       #e08b7e;  --error-suave: #38211d;
  --info:        #82b3d6;  --info-suave:  #15252f;

  --barra:       #101a1d;
  --barra-2:     #1b2f34;
  --barra-3:     #243d43;

  --sombra:    0 1px 2px rgba(0,0,0,.4), 0 6px 20px -14px rgba(0,0,0,.8);
  --sombra-lg: 0 2px 6px rgba(0,0,0,.5), 0 18px 44px -24px rgba(0,0,0,.9);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.2; letter-spacing: -.015em; font-weight: 620; text-wrap: balance; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: .95rem; }
p  { margin: 0 0 .85rem; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

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

/* ---------- estructura ---------- */
.app { display: flex; min-height: 100vh; }

.barra {
  width: var(--barra-ancho);
  flex: none;
  background: var(--barra);
  color: var(--barra-texto);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.barra__marca {
  display: flex; align-items: center; gap: .65rem;
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.barra__logo {
  width: 34px; height: 34px; flex: none;
  border-radius: var(--r-sm);
  background: var(--barra-activo);
  color: #08201b;
  display: grid; place-items: center;
  font-weight: 750; font-size: .92rem; letter-spacing: -.03em;
}
.barra__nombre { font-weight: 650; color: #fff; font-size: 1rem; letter-spacing: -.01em; }
.barra__sub { font-size: .68rem; color: var(--barra-tenue); letter-spacing: .1em; text-transform: uppercase; }

.barra__nav { padding: .5rem 0 1.5rem; flex: 1; }
.barra__vacio { color: var(--barra-tenue); font-size: .82rem; padding: 1rem 1.25rem; margin: 0; }

/* ---------- módulo colapsable ---------- */
.modulo { border-bottom: 1px solid rgba(255,255,255,.06); }
.modulo > summary, .submenu > summary { list-style: none; cursor: pointer; }
.modulo > summary::-webkit-details-marker,
.submenu > summary::-webkit-details-marker { display: none; }

.modulo__titulo {
  display: flex; align-items: center; gap: .6rem;
  padding: .72rem 1rem;
  font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700; color: var(--barra-titulo);
  transition: background var(--transicion), color var(--transicion);
}
.modulo__titulo:hover { background: var(--barra-2); color: #fff; }
.modulo[open] > .modulo__titulo { color: #fff; }
.modulo__nombre { flex: 1; min-width: 0; }

/* El icono hereda el color del título, así que se aclara junto con él
   al pasar el puntero o al abrir el módulo. */
.modulo__icono {
  width: 18px; height: 18px; flex: none;
  color: var(--barra-activo);
  transition: color var(--transicion);
}
.modulo[open] > .modulo__titulo .modulo__icono,
.modulo__titulo:hover .modulo__icono { color: var(--barra-activo); }
.modulo__cuenta {
  font-size: .66rem; letter-spacing: 0; font-weight: 650;
  background: var(--barra-3); color: var(--barra-texto);
  border-radius: 10px; padding: .05rem .42rem; flex: none;
}
.modulo__cuerpo { padding-bottom: .45rem; }

/* Flecha dibujada con CSS; gira al abrir. En el módulo va a la derecha, que
   es donde se espera el indicador de una solapa; en el submenú va antes del
   texto, para que se lea como una rama anidada. */
.modulo__flecha, .submenu__flecha {
  width: 0; height: 0; flex: none;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform var(--transicion);
}
.modulo__flecha { color: var(--barra-tenue); }
.modulo[open] > .modulo__titulo .modulo__flecha,
.submenu[open] > .submenu__titulo .submenu__flecha { transform: rotate(90deg); }

/* ---------- submenú colapsable ---------- */
.submenu__titulo {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem 1rem .4rem 1.45rem;
  font-size: .67rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 650; color: var(--barra-tenue);
  transition: color var(--transicion);
}
.submenu__titulo:hover { color: #fff; }
/* La etiqueta lleva clase propia: apuntar por posición tomaba la flecha, que
   también es un span, y empujaba el texto hacia la derecha. */
.submenu__nombre { flex: 1; min-width: 0; }
.submenu__cuenta { font-size: .64rem; letter-spacing: 0; color: var(--barra-tenue); flex: none; }
.submenu__cuerpo { padding-bottom: .2rem; }

/* ---------- opción ---------- */
.enlace {
  display: flex; align-items: center; gap: .5rem;
  padding: .38rem 1rem .38rem 1.9rem;
  color: var(--barra-texto);
  font-size: .85rem; line-height: 1.35;
  border-left: 2px solid transparent;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.enlace:hover { background: var(--barra-2); color: #fff; text-decoration: none; }
.enlace--activo {
  background: var(--barra-3);
  color: #fff;
  border-left-color: var(--barra-activo);
  font-weight: 620;
}
/* Las pantallas aún no reconstruidas se atenúan, pero siguen por encima del
   mínimo de contraste: se distinguen sin volverse difíciles de leer. */
.enlace--pendiente { color: var(--barra-tenue); }
.enlace--pendiente:hover { color: #fff; }
.enlace__texto { flex: 1; min-width: 0; }
.enlace__marca {
  font-size: .62rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  background: var(--barra-3); color: var(--barra-texto);
  border-radius: 3px; padding: .05rem .3rem; flex: none;
}
.enlace__punto {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--barra-activo);
}

.barra__pie {
  padding: .9rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,.07);
  font-size: .72rem; color: var(--barra-tenue);
}

/* ---------- contenido ---------- */
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.cabecera {
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem 1.5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 20;
}
.cabecera__titulo { flex: 1; min-width: 0; }
.cabecera__titulo h1 { font-size: 1.05rem; }
.cabecera__ruta { font-size: .72rem; color: var(--ink-3); letter-spacing: .04em; }

.usuario { display: flex; align-items: center; gap: .6rem; }
.usuario__datos { text-align: right; line-height: 1.25; }
.usuario__nombre { font-size: .82rem; font-weight: 600; }
.usuario__rol { font-size: .68rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .07em; }
.usuario__avatar {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: var(--accent-suave); color: var(--accent);
  display: grid; place-items: center; font-weight: 650; font-size: .82rem;
}

.contenido { padding: 1.5rem; flex: 1; }
.contenido > * + * { margin-top: 1.25rem; }

/* ---------- tarjetas ---------- */
.tarjeta {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.tarjeta__cabecera {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
}
.tarjeta__cabecera h2 { flex: 1; min-width: 12ch; font-size: .95rem; }
.tarjeta__cuerpo { padding: 1.1rem; }
.tarjeta__cuerpo > :last-child { margin-bottom: 0; }

.rejilla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

/* ---------- indicadores ---------- */
.indicador { padding: 1rem 1.1rem; }
.indicador__etiqueta {
  font-size: .68rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 620;
}
.indicador__valor {
  font-size: 1.85rem; font-weight: 640; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums; margin-top: .15rem; line-height: 1.1;
}
.indicador__nota { font-size: .78rem; color: var(--ink-3); }

/* ---------- tablas ---------- */
.tabla-scroll { overflow-x: auto; }
table.tabla { border-collapse: collapse; width: 100%; font-size: .855rem; min-width: 32rem; }
.tabla th, .tabla td { text-align: left; padding: .55rem .85rem; border-bottom: 1px solid var(--rule); }
.tabla thead th {
  font-size: .67rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); background: var(--surface-2); font-weight: 650;
  border-bottom: 1px solid var(--rule-strong); white-space: nowrap;
  position: sticky; top: 0; z-index: 1;
}
.tabla tbody tr:hover { background: var(--surface-2); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: .8rem; }
.tabla .cod { font-family: var(--mono); font-size: .8rem; white-space: nowrap; }

/* ---------- distintivos ---------- */
.distintivo {
  display: inline-block; padding: .12rem .45rem; border-radius: var(--r-sm);
  font-size: .67rem; font-weight: 640; letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap;
}
.distintivo--ok    { background: var(--ok-suave);    color: var(--ok); }
.distintivo--aviso { background: var(--aviso-suave); color: var(--aviso); }
.distintivo--error { background: var(--error-suave); color: var(--error); }
.distintivo--info  { background: var(--info-suave);  color: var(--info); }
.distintivo--neutro{ background: var(--surface-3);   color: var(--ink-2); }

/* ---------- formularios ---------- */
.campo { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; }
.campo > label { font-size: .78rem; font-weight: 620; color: var(--ink-2); }
.campo__ayuda { font-size: .74rem; color: var(--ink-3); }

/* Formulario en rejilla: los campos cortos comparten fila y los largos la
   ocupan entera. Evita un formulario de una sola columna kilométrica. */
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0 1rem; }
.campos__ancho { grid-column: 1 / -1; }

.entrada, .selector {
  width: 100%;
  padding: .55rem .7rem;
  font: inherit; font-size: .9rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.entrada:focus, .selector:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-suave);
}
.entrada::placeholder { color: var(--ink-3); }
.entrada--codigo {
  font-family: var(--mono); font-size: 1.25rem; letter-spacing: .4em;
  text-align: center; padding-left: .4em;
}

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem 1rem;
  font: inherit; font-size: .875rem; font-weight: 600;
  border-radius: var(--r-sm); border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}
.boton--principal { background: var(--accent); color: var(--accent-contra); }
.boton--principal:hover { background: var(--accent-fuerte); text-decoration: none; }
.boton--secundario { background: var(--surface); color: var(--ink); border-color: var(--rule-strong); }
.boton--secundario:hover { background: var(--surface-2); text-decoration: none; }
.boton--sutil { background: transparent; color: var(--ink-2); padding: .35rem .6rem; }
.boton--sutil:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }

/* El icono hereda el color del botón, así que sigue al texto en el tema oscuro,
   al pasar el ratón y cuando el botón está deshabilitado. `flex: none` evita
   que se aplaste si el texto es largo. */
.boton__icono { width: 17px; height: 17px; flex: none; }

/* Los botones de acción de una pantalla van juntos y con relieve, para que se
   lean como acciones y no como enlaces sueltos en el encabezado. */
.acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.acciones .boton { box-shadow: var(--sombra); }
.acciones .boton:active { transform: translateY(1px); box-shadow: none; }

/* Para lo que deshace algo ya hecho: reabrir una planilla cerrada. No es el
   botón principal de su pantalla ni debe parecerlo. */
.boton--peligro { background: var(--surface); color: var(--error); border-color: var(--error); }
.boton--peligro:hover { background: var(--error-suave); color: var(--error); text-decoration: none; }
.boton--bloque { width: 100%; }
.boton:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- avisos ---------- */
.aviso {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .7rem .9rem;
  border-radius: var(--r-sm);
  border-left: 3px solid var(--info);
  background: var(--info-suave);
  color: var(--ink);
  font-size: .855rem;
  margin-bottom: 1rem;
}
.aviso--error { border-left-color: var(--error); background: var(--error-suave); }
.aviso--ok    { border-left-color: var(--ok);    background: var(--ok-suave); }
.aviso--atencion { border-left-color: var(--aviso); background: var(--aviso-suave); }
.aviso p:last-child { margin-bottom: 0; }

/* ---------- pantalla de acceso ---------- */
.acceso {
  min-height: 100vh;
  display: grid;
  /* minmax(0,1fr) y no 1fr: «1fr» equivale a minmax(auto,1fr), que se niega a
     encogerse por debajo del contenido mínimo y desborda en pantallas angostas. */
  grid-template-columns: minmax(0, 1fr);
  background: var(--ground);
}
.acceso__lienzo {
  display: none;
  position: relative;
  background: linear-gradient(150deg, #16262a 0%, #1c6b5a 130%);
  color: #fff;
  padding: 3rem;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.acceso__lienzo::after {
  content: "";
  position: absolute; inset: auto -20% -35% auto;
  width: 34rem; height: 34rem; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(87,179,154,.35), transparent 62%);
}
.acceso__lienzo h2 { font-size: 1.9rem; max-width: 18ch; position: relative; }
.acceso__lienzo p { color: rgba(255,255,255,.72); max-width: 40ch; position: relative; }
.acceso__pie-lienzo { font-size: .78rem; color: rgba(255,255,255,.5); position: relative; }

/* Centrado con flex y no con grid: en un contenedor grid la pista «auto» se
   dimensiona por el contenido máximo del hijo, y entonces «width:100%» del
   hijo se resuelve contra esa pista ya crecida, desbordando en pantallas
   angostas. Con flex, «width:100%» se resuelve contra la caja de contenido. */
.acceso__panel {
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1.25rem;
  min-width: 0;
}
.acceso__caja { width: 100%; max-width: 24rem; min-width: 0; }
.acceso__marca { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.75rem; }

/* El logotipo de la institución llega desde la base: verde plano sobre blanco y
   apilado —el emblema arriba, «children international» debajo—. Se le fija la
   altura y no el ancho porque es más alto que ancho, y la altura no baja de
   estas medidas: por debajo, la palabra de abajo deja de leerse y el logotipo
   parece una mancha. Por eso aquí la marca se apila en vez de ir en fila. */
.acceso__marca--apilada {
  flex-direction: column; text-align: center; gap: .85rem;
  margin-bottom: 2rem;
}
.acceso__logo { height: 6rem; width: auto; flex: none; display: block; }

/* Sobre el lienzo oscuro va dentro de una tarjeta blanca: el logotipo trae su
   propio fondo blanco y puesto directo se vería como un rectángulo recortado. */
.acceso__insignia {
  flex: none;
  background: #fff;
  border-radius: var(--r-sm);
  padding: .55rem .7rem;
  display: grid; place-items: center;
}
.acceso__insignia img { height: 4rem; width: auto; display: block; }
.acceso__titulo { margin-bottom: .3rem; }
.acceso__intro { color: var(--ink-3); font-size: .88rem; margin-bottom: 1.5rem; }
.acceso__fila { display: flex; gap: .6rem; align-items: flex-end; }
.acceso__fila .campo { flex: 1; margin-bottom: 0; }
.acceso__pie { margin-top: 1.5rem; font-size: .78rem; color: var(--ink-3); text-align: center; }

@media (min-width: 62rem) {
  .acceso { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .acceso__lienzo { display: flex; }
}

/* ---------- cajón lateral en pantallas angostas ---------- */
.velo { display: none; }

/* Botón hamburguesa dibujado con CSS: sin dependencia de iconos externos.
   Se declara oculto ANTES de la consulta de medios que lo muestra: las dos
   reglas tienen la misma especificidad, así que gana la última del archivo. */
.hamburguesa {
  display: none;
  width: 38px; height: 38px; border-radius: var(--r-sm);
  place-items: center; cursor: pointer;
  color: var(--ink-2); flex: none;
}
.hamburguesa:hover { background: var(--surface-2); }
.hamburguesa span, .hamburguesa span::before, .hamburguesa span::after {
  content: ""; display: block; width: 17px; height: 2px;
  background: currentColor; border-radius: 2px;
}
.hamburguesa span { position: relative; }
.hamburguesa span::before { position: absolute; top: -5px; }
.hamburguesa span::after  { position: absolute; top: 5px; }

/* La barra pasa a cajón deslizante y aparece el botón que lo abre. */
@media (max-width: 60rem) {
  .barra {
    position: fixed; inset: 0 auto 0 0; z-index: 60;
    transform: translateX(-100%);
    transition: transform var(--transicion);
    box-shadow: var(--sombra-lg);
  }
  #cajon:checked ~ .app .barra { transform: translateX(0); }
  #cajon:checked ~ .app .velo {
    display: block; position: fixed; inset: 0; z-index: 50; background: rgba(8,16,18,.5);
  }
  .hamburguesa { display: grid; }
  .contenido { padding: 1rem; }
  .cabecera { padding: .6rem 1rem; }
  .usuario__datos { display: none; }
}

/* ---------- turnos: horas por día ---------- */
.rejilla-dias {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  margin-bottom: .5rem;
}
.dia-turno {
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  padding: .5rem .6rem; background: var(--surface-2);
  transition: border-color var(--transicion), background var(--transicion);
}
.dia-turno--activo { border-color: var(--accent); background: var(--accent-suave); }
.dia-turno label {
  display: block; font-size: .72rem; font-weight: 620; color: var(--ink-2);
  margin-bottom: .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dia-turno .entrada { padding: .3rem .45rem; font-size: .9rem; text-align: center; }

/* ---------- calendario ---------- */
.anio {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.mes { min-width: 0; }
.mes__titulo {
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); margin: 0 0 .45rem;
}
.mes__encabezado, .mes__dias {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
}
.mes__encabezado span {
  text-align: center; font-size: .62rem; font-weight: 650;
  color: var(--ink-3); padding-bottom: .2rem;
}
.dia {
  aspect-ratio: 1; display: grid; place-items: center;
  font-size: .74rem; font-variant-numeric: tabular-nums;
  border: 1px solid transparent; border-radius: 3px;
  background: var(--surface-2); color: var(--ink-2);
  font-family: inherit; padding: 0;
}
.dia--vacio { background: transparent; }
.dia--editable { cursor: pointer; }
.dia--editable:hover { border-color: var(--accent); background: var(--accent-suave); color: var(--accent); }
.dia--feriado { background: var(--error-suave); color: var(--error); font-weight: 620; }
.dia--conmotivo { box-shadow: inset 0 -2px 0 var(--error); }
.dia:disabled { cursor: default; }

/* ---------- ficha del colaborador ---------- */
.ficha__encabezado {
  display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap;
  padding-bottom: 1rem; border-bottom: 1px solid var(--rule);
}
.ficha__retrato {
  width: 76px; height: 76px; flex: none; border-radius: 50%;
  background: var(--accent-suave); color: var(--accent);
  display: grid; place-items: center;
  font-size: 1.6rem; font-weight: 650; letter-spacing: -.02em;
}
/* La fotografía llena el círculo sin deformarse: las imágenes originales
   vienen en proporciones muy distintas entre sí. */
.ficha__retrato--foto {
  object-fit: cover;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--rule), var(--sombra);
  background: var(--surface-2);
}
.ficha__identidad { flex: 1; min-width: 14rem; }
.ficha__identidad h1 { margin-bottom: .2rem; }
.ficha__linea { color: var(--ink-2); font-size: .9rem; margin: 0 0 .55rem; }
.ficha__separador { color: var(--ink-3); margin: 0 .4rem; }

/* Pestañas */
.pestanas {
  display: flex; gap: .15rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
}
.pestana {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem .9rem;
  font: inherit; font-size: .875rem; font-weight: 600;
  color: var(--ink-2); background: transparent;
  border: 0; border-bottom: 2px solid transparent;
  cursor: pointer; margin-bottom: -1px;
  transition: color var(--transicion), border-color var(--transicion);
}
.pestana:hover { color: var(--ink); }
.pestana--activa { color: var(--accent); border-bottom-color: var(--accent); }
.pestana__cuenta {
  font-size: .68rem; font-weight: 650;
  background: var(--surface-3); color: var(--ink-2);
  border-radius: 9px; padding: .02rem .38rem;
}
.pestana--activa .pestana__cuenta { background: var(--accent-suave); color: var(--accent); }

/* Lista de datos en dos columnas */
.datos {
  display: grid; gap: .1rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 0;
}
.datos__par {
  display: flex; gap: .6rem; align-items: baseline;
  padding: .38rem 0; border-bottom: 1px solid var(--rule);
  min-width: 0;
}
.datos__par dt {
  flex: none; width: 9.5rem;
  font-size: .78rem; color: var(--ink-3); font-weight: 600;
}
.datos__par dd { margin: 0; flex: 1; min-width: 0; font-size: .885rem; overflow-wrap: anywhere; }

.rejilla-campos {
  display: grid; gap: 0 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

/* Filas destacadas en los historiales */
.fila-vigente { background: var(--accent-suave) !important; }
.fila-vigente td { font-weight: 550; }
.fila-enlace { cursor: pointer; }

/* La fila cuyo detalle se está viendo debajo, para no perder de vista cuál se
   eligió cuando la tabla de arriba tiene varias parecidas. */
.fila-enlace--activa { background: var(--accent-suave) !important; }
.fila-enlace--activa td { font-weight: 550; }

/* Fila que sigue siendo información pero queda fuera de la acción: en el
   archivo del banco, quien no se puede depositar. Se atenúa en vez de
   esconderse, porque el problema hay que verlo. */
.fila-apagada td { opacity: .55; }

.variacion--sube { color: var(--ok); font-weight: 620; }
.variacion--baja { color: var(--error); font-weight: 620; }

/* Token mostrado en pantalla durante las pruebas locales */
.token-visible {
  font-family: var(--mono);
  font-size: 1.5rem; font-weight: 700; letter-spacing: .3em;
  color: var(--aviso);
  user-select: all;
}


/* Fila de una tabla fiscal que participa de un conflicto */
.fila-conflicto { background: var(--error-suave) !important; }
.fila-conflicto td { font-weight: 550; }
/* ---------- encabezados ordenables ---------- */
.columna-orden { padding: 0 !important; }
.columna-orden__boton {
  display: flex; align-items: center; gap: .3rem;
  width: 100%; padding: .5rem .85rem;
  font: inherit; font-size: .67rem; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 650; color: var(--ink-3);
  background: transparent; border: 0; cursor: pointer; text-align: left;
  transition: color var(--transicion), background var(--transicion);
}
.columna-orden__boton:hover { color: var(--ink); background: var(--surface-3); }
.columna-orden.n .columna-orden__boton { justify-content: flex-end; }
.columna-orden--activa .columna-orden__boton { color: var(--accent); }
.columna-orden__flecha { font-size: .6rem; line-height: 1; flex: none; }

/* Botón con icono para mostrar u ocultar información sensible */
.boton--ojo { gap: .45rem; padding: .45rem .75rem; font-size: .82rem; }
.boton--ojo svg { width: 17px; height: 17px; flex: none; }
.boton--ojo[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }

/* Marca de importe oculto: ocupa un ancho parecido al del monto para que la
   columna no salte al mostrarlos. */
.salario-oculto {
  color: var(--ink-3); letter-spacing: .12em; font-size: .85rem;
  user-select: none;
}

/* Monto y su ojo, alineados a la derecha como el resto de las cifras. */
.celda-salario {
  display: inline-flex; align-items: center; justify-content: flex-end;
  gap: .45rem; width: 100%;
}

/* Ojo de cada fila. Discreto hasta que se apunta a la fila, para no llenar la
   tabla de iconos compitiendo con los datos. */
.ojo-fila {
  display: inline-grid; place-items: center; flex: none;
  width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-3);
  cursor: pointer; opacity: .45;
  transition: opacity var(--transicion), color var(--transicion), background var(--transicion);
}
.ojo-fila svg { width: 15px; height: 15px; }
.ojo-fila:hover { opacity: 1; color: var(--accent); background: var(--accent-suave); }
.ojo-fila[aria-pressed="true"] { opacity: 1; color: var(--accent); }
.tabla tbody tr:hover .ojo-fila { opacity: .85; }
.ojo-fila:focus-visible { opacity: 1; }

/* ---------- utilidades ---------- */
.vacio { text-align: center; padding: 2.5rem 1rem; color: var(--ink-3); }
.vacio h3 { color: var(--ink-2); margin-bottom: .35rem; }
.silencio { color: var(--ink-3); font-size: .82rem; }
.mono { font-family: var(--mono); font-size: .85em; }
.fila-acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* Dentro de una tabla las acciones no deben envolverse: al hacerlo duplicaban
   la altura de cada fila y la lista se volvía el doble de larga. */
.tabla .fila-acciones { flex-wrap: nowrap; gap: .25rem; }
.tabla .fila-acciones .boton { padding: .25rem .5rem; font-size: .8rem; white-space: nowrap; }
.separador { height: 1px; background: var(--rule); margin: 1rem 0; }
.solo-lectura { pointer-events: none; opacity: .6; }

/* Errores de validación de Blazor */
.validation-message, .campo__error { color: var(--error); font-size: .78rem; }
.invalid { border-color: var(--error) !important; }

/* Interfaz de reconexión de Blazor */
#blazor-error-ui, .blazor-reconnect-modal {
  background: var(--aviso-suave); color: var(--ink);
  bottom: 0; box-shadow: var(--sombra-lg); display: none;
  left: 0; padding: .8rem 1.2rem; position: fixed; width: 100%; z-index: 1000;
  border-top: 2px solid var(--aviso); font-size: .875rem;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: .6rem; }