/* ==========================================================================
   src/assets/css/app.css
   Lenguaje visual de la intranet — direccion "aireada".

   Cambia el aspecto, no el contrato: los nombres de clase son los mismos que
   antes, asi que ninguna pagina ni componente se rompe al cambiar esta hoja.
   Lo que cambia es el idioma:

     · La aplicacion vive dentro de una tarjeta blanca flotando sobre un fondo
       lavanda, no pegada a los bordes de la ventana.
     · Ninguna barra azul rellena. El azul de marca queda para el boton
       primario, la pestana activa y el filtro seleccionado.
     · Cabeceras de tabla en versalitas diminutas sobre blanco.
     · Estados en pildoras palidas, no en bloques de color.
     · Tipografia Roboto a 13px de base.

   ---------------------------------------------------------------------------
   KIT MATERIAL v2 — se adopta la paleta, la elevacion y los componentes del
   kit. La via es el token, no el marcado: como toda la hoja pinta con
   variables, cambiarlas aqui repinta las 32 paginas sin tocar una sola. Por lo
   mismo el modo oscuro es una redefinicion de tokens al final del archivo, no
   una segunda hoja.

   Las fuentes se importan AQUI y no en cada <head>: eran 32 copias del mismo
   enlace. El de Plus Jakarta Sans que queda en las paginas es inofensivo -no
   se usa- y se retira cuando se toquen esas cabeceras.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400..500,0..1,0&display=swap");

:root {
  /* Marca — azul REAL de Farmacias del Dr. Simi, no el del kit.
     Los valores estan tomados del sitio de produccion (drsimi.cl): #1747A2 es
     el del encabezado, #052D6F el de la franja superior y #DAE6FF el fondo
     palido. Se usan estos y no el #2563EB del kit porque la identidad la pone
     la marca; del kit se toma la FORMA, no el color corporativo. */
  --brand:        #1747A2;
  --brand-dark:   #052D6F;
  --brand-light:  #DAE6FF;
  /* Línea de tendencia (Panel general): celeste «Cielo +1», más suave que --brand. */
  --graf-linea:   #4597E6;
  --graf-previa:  #CBD6E4;
  --brand-tint:   #F2F6FE;
  --brand-line:   #B9CEF5;
  --on-brand:    #FFFFFF;

  /* ---------- La paleta de los graficos ----------
     Pastel, y declarada UNA vez: la usan el dashboard de horas extras, los
     indicadores y la medicion de desayuno. Antes cada sitio tiraba del color
     pleno -`--brand`, `--success`...- y ocho columnas a plena saturacion pesan
     mas que el dato que cuentan.

     Se mezcla con `--surface` y no con blanco, para que en modo oscuro salga un
     tono apagado sobre el fondo oscuro en vez de un chicle. El texto nunca usa
     estos tonos: para eso estan los `--*-dark`, que si contrastan. */
  --graf-azul:  color-mix(in srgb, var(--brand) 38%, var(--surface));
  --graf-verde: color-mix(in srgb, var(--success) 38%, var(--surface));
  --graf-ambar: color-mix(in srgb, var(--warning) 45%, var(--surface));
  --graf-rojo:  color-mix(in srgb, var(--danger) 38%, var(--surface));
  /* El carril por donde corre una barra: mas claro aun que la barra. */
  --graf-carril: color-mix(in srgb, var(--brand) 10%, var(--surface));

  /* Azul profundo de marca: titulos y superficies de caracter. */
  --navy:         #052D6F;
  --navy-light:   #1747A2;

  /* El globo de ayuda: una placa OSCURA con texto claro, en los dos temas.
     Tiene tonos propios porque `--navy` cambia de bando al pasar a oscuro
     -alli vale #E4E9F0, que es casi blanco- y los dos globos del sistema
     -`.tip` y `.nav-link__globo`- quedaban con texto blanco sobre fondo
     blanco: contraste 0.09, o sea ilegibles. Un token que sirve de fondo no
     puede ser el mismo que sirve de color de texto. */
  --globo-fondo:  #052D6F;
  --globo-texto:  #FFFFFF;

  /* Superficies: gris azulado fuera, blanco dentro.
     --bg se oscureció de #F4F6F9 a #E8ECF3: el matiz anterior era tan sutil que
     en pantallas con más brillo/gamma (una TV, un proyector) se lavaba a blanco
     y las tarjetas blancas se fundían con el fondo. Este valor da separación
     real entre el lienzo y las tarjetas en cualquier pantalla, sin sentirse
     pesado. El modo oscuro tiene su propio --bg más abajo. */
  --bg:           #E8ECF3;
  --surface:      #FFFFFF;
  --surface-2:    #F8FAFC;
  --border:       #E2E8F0;
  --border-strong:#CBD5E1;
  --line:         #EEF2F7;

  /* Texto — escala 'ink' del kit.
     Ojo con --text-soft: no es un gris decorativo, es el color del TEXTO DE
     TODAS LAS CELDAS de tabla (`tbody td`). Puesto en el #8492A6 del kit
     -pensado para rotulos secundarios- una tabla de diez filas se vuelve
     ilegible. Se queda a medio camino entre 'ink' e 'ink-soft'. */
  --text:         #3C4858;
  --text-soft:    #4B5B71;
  /* 01-11-2026 (auditoría UX-06): #8492A6 daba 3,2:1 sobre blanco y la regla
     pide 4,5:1; en las pantallas de sucursal no se leía. #5C6C83 da 5,4:1 en
     blanco y 4,5:1 sobre el gris de fondo (--bg), donde van pestañas y
     rótulos; --text-soft bajó a #4B5B71 para seguir distinguiéndose.
     --text-faint queda solo para lo decorativo y lo deshabilitado: el texto
     que lo usaba pasó a --text-muted. */
  --text-muted:   #5C6C83;
  --text-faint:   #C0CCDA;

  /* Cebra de tabla. Estaba escrita en literal y por eso el modo oscuro pintaba
     filas casi blancas. */
  --zebra:        #FBFCFE;

  /* Estados, en pares palido/tinta. */
  --danger:       #D32F2F;
  --danger-dark:  #B71C1C;
  --danger-light: #FEF2F2;
  --danger-line:  #FCA5A5;
  /* El borde ambar que acompana a `--warning-light`. No existia y estaba escrito
     a mano -#F2DFB8- en `.cadena__enlace-regla`, asi que en oscuro no cambiaba. */
  --warning-line: #F2DFB8;
  --success:      #16A34A;
  --success-dark: #12833F;
  --success-light:#F0FDF4;
  --success-line: #A7E3BD;
  --warning:      #ED6C02;
  --warning-dark: #B35400;
  --warning-light:#FFF4E5;
  --info:         #0288D1;
  --info-light:   #E5F4FD;
  --info-dark:    #01699E;

  /* Acento naranja del kit: destaca sin competir con el azul de marca. */
  --accent:       #FF6B00;
  --accent-dark:  #D95A00;
  --accent-light: #FFF3E9;

  /* Coral del kit, para series de graficos y avisos suaves. */
  --coral:        #E9556A;
  --coral-dark:   #C13A4E;
  --coral-light:  #FEF2F3;

  /* Alias que piden he-ingreso.js, usuarios.js y detalle-hora-extra.js. */
  --crit: var(--danger);
  --warn: var(--warning);

  /* Radios Material: 4px manda en controles, las superficies redondean mas. */
  /* Escala de redondeo. La original -4/6/8- dejaba botones y campos casi
     rectos. Un primer intento a 6/9/12 no se noto: dos pixeles en una caja de
     28px de alto no cambian nada. Estos valores si se ven. */
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 12px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --radius-icon: 4px;
  --space-1: 4px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;

  /* Elevacion Material (e1/e2/e4/e8 del kit). Los alias historicos
     -sm/md/lg- se mantienen apuntando a la escala nueva para no tener que
     tocar los 2.500 usos repartidos por la hoja. */
  --e1: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
  --e2: 0 3px 6px rgba(0, 0, 0, .10), 0 2px 4px rgba(0, 0, 0, .06);
  --e4: 0 10px 20px rgba(0, 0, 0, .10), 0 3px 6px rgba(0, 0, 0, .06);
  --e8: 0 16px 32px rgba(0, 0, 0, .14), 0 6px 12px rgba(0, 0, 0, .08);
  --shadow-sm: var(--e1);
  --shadow-md: var(--e2);
  --shadow-lg: var(--e8);
  --shadow-azul: 0 4px 12px rgba(37, 99, 235, .26);
  --shadow-menu: var(--e8);
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, .16);

  --sidebar-w: 232px;
  --font: Roboto, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --print-ink: #000000;
  --print-paper: #FFFFFF;
}

* { box-sizing: border-box; }

/* Un 'display' de autor -flex, grid, inline-flex- gana al display:none que el
   navegador da a [hidden], asi que ocultar con el atributo no ocultaba nada.
   Se resuelve aqui y no en cada componente: la hoja ya llevaba seis parches
   locales del mismo choque. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ---------- Armazon: a sangre ---------- */
/* Sin marco ni respiro exterior: la tarjeta flotante sobre lavanda dejaba una
   banda muerta alrededor y comia ancho justo donde mas falta -el cierre de
   RR.HH. son 19 columnas-. La hoja llega al borde de la ventana. */
.layout {
  display: flex;
  min-height: 100vh;
  margin: 0;
  background: var(--surface);
  border-radius: 0;
  box-shadow: none;
  /* SIN overflow:hidden.
     Lo llevaba de cuando el armazon era una tarjeta flotante y habia que
     recortarle las esquinas; hoy el radio es 0 y no recorta nada. Lo que si
     hacia era romper la cabecera pegajosa de las tablas: un ancestro con
     overflow distinto de visible se vuelve el contenedor de referencia del
     sticky, y como este no hace scroll, el th no se pegaba nunca.
     El desborde horizontal de las tablas ya lo contiene .tabla-scroll. */
}

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  overflow-y: auto;
}

/* El logotipo pasa de circulo a cuadrado redondeado y el azul se invierte:
   antes era texto azul sobre fondo palido. */
.sidebar__brand { display: flex; align-items: center; gap: 10px; padding-left: 4px; }
.sidebar__logo {
  width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: var(--radius-sm); background: var(--brand); color: var(--on-brand);
  display: grid; place-items: center;
  font-size: 10px; font-weight: 800; letter-spacing: .04em;
}
.sidebar__title { font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.sidebar__sub   { font-size: 10.5px; color: var(--text-muted); line-height: 1.35; }

/* Bloque de contexto: quien es esta sesion, bajo la marca. */
.sidebar__ficha {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; border-radius: var(--radius-md);
  background: var(--brand-tint);
}
.sidebar__ficha-icono {
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: var(--radius-sm); background: var(--surface); color: var(--brand);
  display: grid; place-items: center;
}
.sidebar__ficha-nombre { font-size: 12px; font-weight: 700; line-height: 1.35; }
.sidebar__ficha-sub    { font-size: 10.5px; color: var(--text-muted); line-height: 1.35; }

.sidebar__label {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
  padding: 0 12px 8px; margin: 0;
}

.sidebar nav { display: flex; flex-direction: column; gap: 3px; }

.nav-link {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-soft); text-decoration: none;
  font-size: 13px; font-weight: 500;
  transition: background .15s, color .15s;
}
.nav-link svg { flex: 0 0 18px; }
.nav-link:hover  { background: var(--brand-tint); color: var(--brand); }
/* El activo es un fondo palido, no el azul pleno de antes. */
.nav-link.active { background: var(--brand-light); color: var(--brand); font-weight: 700; }
.nav-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.main { flex: 1; min-width: 0; padding: 22px 26px 26px; display: flex; flex-direction: column; gap: 22px; background: var(--bg); }

/* ---------- Barra superior ---------- */
/* Deja de ser una tarjeta con borde: es una fila dentro de la misma hoja. */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: transparent; border: none; border-radius: 0;
  padding: 0; margin: 0;
  /* Quien envuelve es la BARRA, no el bando de acciones. Con `nowrap` en las
     acciones y `nowrap` tambien aqui, a 375 px el bloque de la derecha no tenia
     por donde ceder y se salia 3 px. Asi el bando entero baja a su renglon
     -que es el criterio- en vez de partirse por dentro. */
  flex-wrap: wrap;
}
/* El titulo se corta con puntos suspensivos en vez de empujar. Sin esto, y
   como `.topbar__acciones` SI envolvia mientras `.topbar` no, al crecer el
   titulo el bando de la derecha no bajaba entero: se partia por dentro y
   «Cerrar sesion» se quedaba solo debajo del interruptor de tema. Es el mismo
   criterio de «baja el bando entero» de la barra de acciones. */
.topbar__title { font-size: 19px; font-weight: 800; margin: 0; line-height: 1.25; letter-spacing: -.015em;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__sub   { font-size: 12.5px; color: var(--text-muted); margin: 2px 0 0;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__bloque-izq { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* ...y sus hijos tambien. El titulo vive dentro de un `div` sin clase, y un
   elemento flexible NO encoge por debajo de su `min-content` a menos que se le
   diga: sin esto, la elipsis del titulo no llegaba a aplicarse y
   «Automatizaciones de horas extras» empujaba la pagina 31 px a 375. */
.topbar__bloque-izq > * { min-width: 0; }
/* Envuelve, pero LO ULTIMO. El orden es: primero el bando entero baja a su
   renglon -eso lo hace el `flex-wrap: wrap` de `.topbar`-, y solo si ni asi
   cabe se parte por dentro. Con `nowrap` no habia ese segundo escalon: en
   /soporte el bando mide 624 px -lleva un distintivo largo ademas de los
   botones- y se salia 287 px de la pagina a 375. `wrap` no lo parte mientras
   quepa, asi que el criterio de «el bando va junto» se conserva. */
.topbar__acciones {
  display: flex; gap: 14px; align-items: center;
  flex-wrap: wrap; justify-content: flex-end; flex: 0 1 auto; min-width: 0;
}
/* Y sus hijos ceden: un distintivo con un texto largo no puede empujar. */
.topbar__acciones > * { min-width: 0; }
.topbar__acciones > .badge { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.usuario-chip { display: flex; align-items: center; gap: 9px; }
.usuario-chip__avatar {
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: var(--radius-circle); background: var(--brand-light); color: var(--brand);
  display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
}
.usuario-chip__nombre { font-size: 12px; font-weight: 700; line-height: 1.3; }
.usuario-chip__rol    { font-size: 10.5px; color: var(--text-muted); line-height: 1.3; }
.usuario-chip__sep    { width: 1px; height: 24px; background: var(--border); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--brand); background: var(--brand); color: var(--on-brand);
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: none;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover:not(:disabled) { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn:disabled { background: var(--surface-2); border-color: var(--border); color: var(--text-faint); cursor: not-allowed; box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }

.btn--ghost {
  background: var(--surface); color: var(--text-soft);
  border-color: var(--border); font-weight: 600; box-shadow: none;
}
.btn--ghost:hover:not(:disabled) { background: var(--brand-tint); color: var(--brand); border-color: var(--brand-line); }

.btn--success { background: var(--success-dark); border-color: var(--success-dark); box-shadow: none; } /* blanco sobre --success daba 3,3:1 (01-11-2026) */
.btn--success:hover:not(:disabled) { background: #0E6B33; border-color: #0E6B33; }

/* Rechazar es un contorno rojo sobre blanco, no un bloque rojo: rechazar no es
   la accion principal de ninguna pantalla. */
.btn--danger {
  background: var(--surface); color: var(--danger-dark);
  border-color: var(--danger-line); box-shadow: none;
}
.btn--danger:hover:not(:disabled) { background: var(--danger-light); border-color: var(--danger); color: var(--danger-dark); }

/* `.btn--sm` esta definido junto al `.btn` que manda, mas abajo: aqui perdia
   por orden de aparicion. */
.btn--register { white-space: nowrap; }
.btn--block { width: 100%; justify-content: center; }

/* Boton redondo de accion, para la barra superior. */
/* Boton de icono discreto, para las acciones de fila. */
.btn--icono {
  width: 28px; height: 28px; padding: 0; flex: 0 0 28px;
  border: none; background: transparent; color: var(--text-muted);
  box-shadow: none; border-radius: var(--radius-sm);
}
.btn--icono:hover:not(:disabled) { background: var(--surface-2); color: var(--brand); }

/* ---------- Tarjetas KPI ---------- */
/* 190px y no 210: el panel de administrador muestra cinco indicadores y con la
   medida anterior el quinto se caia solo a una segunda fila. */
/* `minmax(min(190px, 100%), 1fr)` y no `minmax(190px, 1fr)`.

   Una columna de `auto-fit` NO baja de su minimo: si el hueco es de 225 px y el
   minimo es 300, la columna mide 300 y se sale por la derecha. Paso en
   /he-dashboard a 375 px -6 px de desborde en toda la pagina- y es el mismo
   riesgo en cada rejilla elastica del fichero. Con `min(N, 100%)` el minimo
   pasa a ser "N, o el hueco entero si es menor", y entonces encoge en vez de
   desbordar. Va en TODAS las rejillas `auto-fit`/`auto-fill`, no solo en la que
   se rompio: el fallo es del patron. */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 16px; margin: 0; }
/* Cinco indicadores en vez de cuatro: con el minimo de 190 px el quinto se
   caia solo a una segunda fila justo en 1280. Reflui igual al estrechar. */
.kpis.kpis--cinco { grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr)); }
.kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px 18px;
  display: flex; align-items: center; gap: 14px;
}
/* Cuadro pastel a la izquierda; el color lo pone el modificador de estado. */
.kpi__icono {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: var(--radius-md);
  background: var(--line); color: var(--text-muted);
  display: grid; place-items: center;
}
.kpi__texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* La etiqueta ya no grita en versalitas: el icono de color hace ese trabajo. */
.kpi__label { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.kpi__value { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; font-variant-numeric: tabular-nums; color: var(--text); }
.kpi__nota  { font-size: 11px; color: var(--text-muted); }   /* --text-faint casi no se leía (27-10-2026) */

.kpi--pendiente   .kpi__icono { background: var(--warning-light); color: var(--warning-dark); }
.kpi--preaprobada .kpi__icono { background: var(--brand-light);   color: var(--brand); }
.kpi--aprobada    .kpi__icono { background: var(--success-light); color: var(--success-dark); }
.kpi--rechazada   .kpi__icono { background: var(--danger-light);  color: var(--danger-dark); }

/* ---------- Panel ---------- */
/* Sin cabecera azul: un titulo y sus acciones sobre la misma hoja blanca. */
.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); margin: 0; overflow: visible;
  /* Sobre el fondo perla el blanco casi no se despega: el borde y una sombra
     minima hacen de canto. */
  box-shadow: 0 1px 3px rgba(27, 31, 43, .05);
  /* El aire lo daba .main cuando el panel y la pagina eran la misma hoja
     blanca. Con fondo propio el panel pasa a ser una hoja recortada y tiene
     que traerse el suyo, o el titulo queda pegado al canto. */
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 16px;
}
.panel__head {
  background: transparent; color: var(--text);
  padding: 0 0 12px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.panel__head h2 { font-size: 15px; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.panel__head .btn--ghost { background: var(--surface); border-color: var(--border); color: var(--text-soft); }
.panel__head .btn--ghost:hover:not(:disabled) { background: var(--brand-tint); color: var(--brand); border-color: var(--brand-line); }
.panel__acciones,
.panel__head > .exportar-acciones,
.tabla-barra > .exportar-acciones {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px; flex-wrap: wrap; min-width: 0;
}
.panel__acciones {
  /* Encoge (0 1) y no 0 0: con shrink en cero la barra tomaba su ancho de
     max-content -1252px en Usuarios- y se salia de la pagina en vez de
     envolver, asi que el flex-wrap de aqui abajo no llegaba a aplicarse nunca
     y el ultimo filtro quedaba cortado contra el borde. */
  flex: 0 1 auto; margin-left: auto;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  justify-content: flex-end; min-width: 0;
}
/* El buscador vive en la cabecera del panel, junto a las demas acciones. */
.panel__acciones .tabla-barra--search { margin: 0; min-height: 0; }
.panel__acciones > .exportar-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.panel__head > .exportar-acciones { margin-left: auto; }
.panel__body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
/* Panel con tabla: el panel ya trae su margen, asi que el cuerpo no suma el
   suyo -eran 20px mas por cada lado y por arriba-, y la cabecera no necesita
   raya: la banda gris de la tabla ya separa titulo y datos. */
.panel__body:has(.tabla-scroll) { padding: 0; }
.panel:has(.tabla-scroll) > .panel__head { border-bottom: none; padding-bottom: 0; }
.panel__acciones .filtros-columnas__barra { margin: 0; }
.ausencias-agenda .panel__acciones { flex: 1 1 100%; justify-content: flex-start; margin-left: 0; }
.ausencias-agenda .panel__acciones > * { max-width: 100%; }
.ausencias-agenda__explicacion { margin: 0; color: var(--text-soft); font-size: 13px; }
.ausencias-agenda__conclusion { margin: 0; padding: 16px; border-left: 3px solid var(--brand); background: var(--brand-tint); color: var(--text); font-size: 15px; line-height: 1.6; }
.ausencias-agenda td { vertical-align: middle; }
.ausencias-agenda td:first-child { white-space: nowrap; font-weight: 600; }
.ausencias-agenda td:last-child { position: sticky; right: 0; background: var(--surface); }
.ausencias-agenda .flujo__sub { margin-top: 5px; }
.ausencias-resumen > summary { cursor: pointer; color: var(--brand); font-weight: 600; padding: 12px 0; }

/* ---------- Filtros en pildora ---------- */
/* ==========================================================================
   Filtro de estado: pestañas segmentadas
   --------------------------------------------------------------------------
   Antes eran pildoras sueltas y la elegida se rellenaba de azul, que es el
   mismo tratamiento que un boton de accion: costaba distinguir "estoy viendo
   pendientes" de "pulsa aqui para algo". Ahora es un grupo segmentado -un
   carril gris con la activa en blanco-, que es como se lee una eleccion entre
   pocas alternativas excluyentes.

   El estado es el filtro mas usado de estas pantallas: aqui se cambia de un
   clic y los tres conteos quedan a la vista sin filtrar nada.
   ========================================================================== */
.filtros {
  display: inline-flex; flex-wrap: wrap; gap: 2px; margin: 0;
  padding: 3px; border-radius: 8px; background: var(--surface-2);
}
.filtro {
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 13px; border-radius: 6px;
  border: 0; background: transparent;
  color: var(--text-muted); font-size: 12.5px; font-weight: 400;
  cursor: pointer; font-family: inherit; white-space: nowrap;
  transition: background .15s, color .15s;
}
.filtro:hover { background: var(--brand-tint); color: var(--brand); }
.filtro[aria-pressed="true"] {
  background: var(--surface); color: var(--brand); font-weight: 500;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .09);
}
.filtro:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.filtro__n {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--brand-light); color: var(--brand);
  font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.filtro[aria-pressed="true"] .filtro__n { background: var(--brand); color: var(--on-brand); }
/* Un cero no es un dato util en una pestaña: ocupa sitio y no invita a nada. */
.filtro__n:empty { display: none; }

/* ---------- Tablas ---------- */
.filtros-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  width: 100%;
  margin-bottom: 14px;
}
.filtros-toolbar__estados { flex: 0 0 auto; }
/* Bandeja de HE: chips de estado y etapa apilados; el rango, a la derecha. */
.filtros-toolbar--bandeja { align-items: flex-end; flex-wrap: wrap; }
.horas-extras__chips { display: flex; gap: 8px; min-width: 0; flex-wrap: wrap; align-items: center; }
.filtros-toolbar--bandeja .horas-extras__rango { margin-left: auto; }
.filtros-toolbar .filtros { margin-bottom: 0; }
.rango-fechas {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex: 0 0 auto;
}
.tabla-barra { display: flex; align-items: center; justify-content: flex-end; min-height: 36px; margin: 0; }
.filtros-toolbar .tabla-barra--search { margin-left: auto; flex: 0 0 auto; }
/* Dos lineas a proposito: rango y buscador arriba, fichas de supervisor en su
   propia fila completa. Sin flex-wrap las fichas reclamaban el 100% del ancho
   DENTRO de la unica linea y el bloque quedaba descuadrado. */
.filtros-toolbar--recientes { flex-wrap: wrap; }
.filtros-toolbar--recientes .rango-fechas { flex-wrap: wrap; max-width: 100%; }
.he-recientes__personas { order: 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; }
.he-recientes__personas .campo { min-width: 0; margin: 0; display: grid; gap: 8px; }
.he-recientes__personas input, .he-recientes__personas .select-ui { width: 100%; min-width: 0; }
.he-recientes__estado { order: 4; flex-basis: 100%; color: var(--text-muted); font-size: 12px; margin: 0; }
@media (max-width: 640px) { .he-recientes__personas { grid-template-columns: 1fr; } }
.filtros-toolbar--recientes .rango-fechas { order: 1; }
.filtros-toolbar--recientes .tabla-barra--search { order: 2; }
.filtros-toolbar--recientes .filtros-colaboradores {
  order: 3; flex: 1 1 100%; width: 100%; min-width: 0; margin: 0;
}
.tabla-barra label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); }
/* Lupa dentro del campo en lugar del rotulo «Buscar:». Es data: y la CSP de
   deploy/nginx.conf lo admite (img-src 'self' data:). */
.tabla-buscador {
  height: 36px; padding: 0 13px 0 34px; min-width: 240px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 12.5px; color: var(--text);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23A9AEC2' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center / 15px 15px;
}
.tabla-buscador::placeholder { color: var(--text-muted); }
/* Cargando una pagina nueva: las filas actuales se quedan, atenuadas, y la
   altura no cambia. Evita el encogimiento-y-rebote al paginar. */
.tabla-scroll--cargando tbody { opacity: .45; pointer-events: none; transition: opacity .15s ease; }
.tabla-buscador:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }

@media (max-width: 1180px) {
  .filtros-toolbar { align-items: flex-start; flex-wrap: wrap; }
  .filtros-toolbar .tabla-barra--search { margin-left: 0; }
}

@media (max-width: 700px) {
  .panel__head { align-items: flex-start; }
  .panel__acciones,
  .panel__head > .exportar-acciones {
    width: 100%; margin-left: 0; justify-content: flex-start;
  }
  .panel__acciones > .exportar-acciones { justify-content: flex-start; }
  .tabla-barra { justify-content: stretch; width: 100%; }
  .tabla-barra--search label, .tabla-barra--search .tabla-buscador { width: 100%; }
}

/* El `.tabla-scroll` que habia aqui -overflow-y:hidden, sin borde ni radio-
   quedaba anulado por el de mas abajo, que desplaza en los dos ejes y lleva
   `max-height:70vh`. Su comentario ademas afirmaba que «aqui nunca hay scroll
   vertical real», que con ese max-height dejo de ser cierto. */
table { border-collapse: collapse; width: 100%; font-size: 12.5px; }

/* Cabecera clara: banda gris palida con los titulos en gris, sin azul. La
   separa del cuerpo una linea, no el color; el azul queda para lo accionable
   (botones, filtros puestos, orden activo) y deja de competir con los datos.
   Mismo aspecto que el prototipo de tabla con filtro bajo cada columna. */
thead th {
  background: var(--surface-2); color: var(--text-muted);
  text-align: left; padding: 10px 12px;
  font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  white-space: nowrap;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
/* La fila de filtros bajo la cabecera se retiro: se filtra solo desde el
   cajon. Con ella se fueron .filtros-fila, .filtro-celda y sus estados. */
.correos__asunto { min-width: 260px; }

/* Filas compactas: con la cabecera clara, el aire lo pone la cebra suave y
   no un interlineado de 13px, que obligaba a desplazar para ver diez filas. */
tbody td { padding: 9px 12px; border-top: 1px solid var(--line); border-bottom: none; color: var(--text-soft); }
tbody tr:first-child td { border-top: none; }
/* La cebra y el resalte azul de fila vivian aqui y los anulaba el bloque de
   FoodPass de mas abajo (`transparent` y `--surface-2`). Se quitan para que no
   haya dos respuestas: la cebra esta retirada A PROPOSITO y el resalte es gris. */
/* Botones dentro de una fila: un punto mas bajos que los de la cabecera del
   panel, para que no sean ellos los que marquen el alto de cada registro. */
tbody td .btn--sm { height: 28px; padding: 0 11px; }
td.num, .num { font-variant-numeric: tabular-nums; }

.tabla-vacia { padding: 44px 14px; text-align: center; color: var(--text-muted); font-size: 12.5px; }

/* Celda de persona: iniciales, nombre y dato secundario en una columna. */
.persona { display: flex; align-items: center; gap: 11px; }
.persona__ini {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: var(--radius-circle); background: var(--brand-light); color: var(--brand);
  display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
}
.persona__nom { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--text); white-space: nowrap; }
.persona__sub { font-size: 11px; color: var(--text-muted); line-height: 1.35; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Acciones de fila, alineadas a la derecha. */
.acciones-fila { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }

/* ---------- Distintivos de estado ---------- */
/* Versalitas diminutas sobre fondo palido, en vez de texto normal en color. */
.badge {
  display: inline-block; padding: 5px 11px; border-radius: var(--radius-pill);
  font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  white-space: nowrap;
}
.badge--pendiente    { background: var(--warning-light); color: var(--warning-dark); }
.badge--preaprobada  { background: var(--brand-light);   color: var(--brand); }
.badge--aprobada     { background: var(--success-light); color: var(--success-dark); }
.badge--rechazada    { background: var(--danger-light);  color: var(--danger-dark); }
.badge--anulada      { background: var(--line);          color: var(--text-muted); }
.badge--info         { background: var(--brand-light);   color: var(--brand); }

/* ---------- Formularios ---------- */
.campo { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.campo__label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-soft);
}
.campo__label .req { color: var(--danger); margin-left: 2px; }
.campo input, .campo select, .campo textarea {
  width: 100%; height: 40px; padding: 0 13px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  background: var(--surface); color: var(--text);
}
.campo textarea { height: auto; min-height: 82px; padding: 11px 13px; font-weight: 500; line-height: 1.55; }
.campo select { padding-right: 34px; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: var(--focus-ring);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--text-muted); font-weight: 500; }
.campo input[readonly] { background: var(--surface-2); color: var(--text-soft); border-color: var(--border); }
/* La regla de arriba da a todo input de un .campo el tamano de un campo de
   texto: 100% de ancho y 40px de alto. En una casilla eso la convierte en un
   rectangulo enorme que empuja su etiqueta fuera del panel. Se exceptuan aqui
   y no en cada pantalla porque el problema es de la regla, no de quien la
   encuentra. */
.campo input[type="checkbox"], .campo input[type="radio"] {
  width: auto; height: auto; padding: 0; flex: 0 0 auto;
}

/* ---------- Casillas y opciones ----------

   Eran las del NAVEGADOR: 13x13 px, gris del sistema y el tilde de Windows.
   En una intranet que ya tiene desplegable propio y calendario propio, la
   casilla cruda es lo unico que delata de que ano es el HTML. Estaban asi en
   diez pantallas -horas extras, aprobadores, feriados, colacion, reasignar,
   configuracion, secciones de usuario...-, o sea que el arreglo va aqui y no
   en cada una.

   El input sigue siendo el input: guarda el estado, responde al teclado y al
   `label for`. Solo se le quita la pintura (`appearance: none`).

   Pesan (0,2,1): el :not() suma su argumento. `.acceso-sw` y
   `.usuario-personalizado__switch`, que son interruptores de verdad, escriben
   su input como `input[type="checkbox"]` para pesar lo mismo y ganar por ir
   despues. */
input[type="checkbox"]:not([hidden]),
input[type="radio"]:not([hidden]) {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto;
  width: 17px; height: 17px; margin: 0;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  cursor: pointer;
  display: inline-grid; place-content: center;
  transition: background .13s ease, border-color .13s ease;
}
input[type="checkbox"]:not([hidden]) { border-radius: 5px; }
input[type="radio"]:not([hidden])    { border-radius: var(--radius-circle, 50%); }

input[type="checkbox"]:not([hidden]):hover,
input[type="radio"]:not([hidden]):hover { border-color: var(--brand); }

/* El tilde se dibuja con un borde en L girado: sin imagen, sin fuente y sin
   depender de que cargue Material Symbols. */
input[type="checkbox"]:not([hidden])::before {
  content: ""; width: 9px; height: 5px;
  border: 2px solid var(--on-brand, #fff); border-top: 0; border-right: 0;
  transform: rotate(-45deg) translate(1px, -1px) scale(0);
  transition: transform .13s ease;
}
input[type="radio"]:not([hidden])::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--on-brand, #fff);
  transform: scale(0); transition: transform .13s ease;
}
input[type="checkbox"]:not([hidden]):checked,
input[type="radio"]:not([hidden]):checked {
  background: var(--brand); border-color: var(--brand);
}
input[type="checkbox"]:not([hidden]):checked::before { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
input[type="radio"]:not([hidden]):checked::before    { transform: scale(1); }

/* El tercer estado de una cabecera de tabla: hay filas marcadas, pero no todas. */
input[type="checkbox"]:not([hidden]):indeterminate {
  background: var(--brand); border-color: var(--brand);
}
input[type="checkbox"]:not([hidden]):indeterminate::before {
  width: 9px; height: 0; border: 0; border-top: 2px solid var(--on-brand, #fff);
  transform: none;
}

input[type="checkbox"]:not([hidden]):focus-visible,
input[type="radio"]:not([hidden]):focus-visible {
  outline: none; border-color: var(--brand); box-shadow: var(--focus-ring);
}
input[type="checkbox"]:not([hidden]):disabled,
input[type="radio"]:not([hidden]):disabled {
  cursor: not-allowed; background: var(--surface-2); border-color: var(--border);
}
input[type="checkbox"]:not([hidden]):disabled:checked,
input[type="radio"]:not([hidden]):disabled:checked {
  background: var(--text-faint); border-color: var(--text-faint);
}
/* --text-muted y no --text-faint (26-10-2026): sobre blanco daba 1,6:1 y no se leía. */
.campo__ayuda { font-size: 11.5px; color: var(--text-muted); }

/* ---------- Acceso modular del usuario ----------
   El rol es la estructura y los perfiles especiales son excepciones. Este
   bloque hace visible esa relacion sin convertir capacidades tecnicas en una
   segunda lista de permisos editable. */
.acceso-rol {
  margin: -2px 0 18px; padding: 15px;
  border: 1px solid var(--brand-line); border-radius: var(--radius-lg);
  background: var(--brand-light);
}
.acceso-rol__cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.acceso-rol__eyebrow {
  margin: 0 0 3px; color: var(--brand); font-size: 9.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
}
.acceso-rol__titulo { margin: 0; color: var(--text); font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.acceso-rol__familia {
  flex: 0 0 auto; padding: 5px 9px; border: 1px solid var(--brand-line);
  border-radius: var(--radius-pill); background: var(--surface); color: var(--brand-dark);
  font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.acceso-rol__descripcion { margin: 7px 0 0; color: var(--text-muted); font-size: 11.5px; line-height: 1.45; }
.acceso-rol__contexto { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.acceso-rol__contexto-label { margin-right: 2px; color: var(--text-muted); font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.acceso-rol__chip { padding: 4px 8px; border: 1px solid var(--brand-line); border-radius: var(--radius-pill); background: var(--surface); color: var(--brand-dark); font-size: 9.5px; font-weight: 800; }
.acceso-modulos { display: grid; gap: 8px; margin-top: 12px; }
.acceso-modulo {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px;
  padding: 10px; border: 1px solid var(--border-strong); border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm); background: var(--surface);
}
.acceso-modulo--aprobacion { border-left-color: var(--brand); }
.acceso-modulo--registro { border-left-color: var(--info); }
.acceso-modulo--solicitud { border-left-color: var(--warning); }
.acceso-modulo--consulta { border-left-color: var(--success); }
.acceso-modulo--administracion { border-left-color: var(--accent); }
.acceso-modulo__icono {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-sm);
  background: var(--brand-light); color: var(--brand); font-size: 10px; font-weight: 900;
}
.acceso-modulo--registro .acceso-modulo__icono { background: var(--info-light); color: var(--info-dark); }
.acceso-modulo--solicitud .acceso-modulo__icono { background: var(--warning-light); color: var(--warning-dark); }
.acceso-modulo--consulta .acceso-modulo__icono { background: var(--success-light); color: var(--success-dark); }
.acceso-modulo--administracion .acceso-modulo__icono { background: var(--accent-light); color: var(--accent); }
.acceso-modulo__cuerpo { min-width: 0; }
.acceso-modulo__fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.acceso-modulo__nombre { min-width: 0; margin: 0; color: var(--text); font-size: 11.5px; font-weight: 800; line-height: 1.3; }
.acceso-modulo__accion {
  flex: 0 0 auto; padding: 3px 7px; border-radius: var(--radius-pill); background: var(--brand-light);
  color: var(--brand-dark); font-size: 9.5px; font-weight: 800; letter-spacing: .03em;
}
.acceso-modulo--registro .acceso-modulo__accion { background: var(--info-light); color: var(--info-dark); }
.acceso-modulo--solicitud .acceso-modulo__accion { background: var(--warning-light); color: var(--warning-dark); }
.acceso-modulo--consulta .acceso-modulo__accion { background: var(--success-light); color: var(--success-dark); }
.acceso-modulo--administracion .acceso-modulo__accion { background: var(--accent-light); color: var(--accent); }
.acceso-modulo__detalle { margin: 4px 0 7px; color: var(--text-muted); font-size: 10.5px; line-height: 1.4; }
.acceso-modulo__alcance {
  display: inline-flex; max-width: 100%; padding: 4px 7px; border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text-soft); font-size: 9.5px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acceso-modulos__vacio { margin: 12px 0 0; color: var(--text-muted); font-size: 11px; }
.acceso-rol__nota { margin: 11px 0 0; color: var(--text-muted); font-size: 10px; line-height: 1.4; }

/* ---------- Configurador de acceso por modulos ----------
   Una direccion visual para la decision importante: primero se elige si la
   cuenta hereda el rol o si se arma por funciones; despues se acotan areas y
   pantallas. Es deliberadamente compacto para el cajon de usuarios. */
/* Aqui vivian las 39 reglas `.config-acceso*`, sustituidas por las
   `acceso-cfg-*` / `.acceso-pieza` / `.acceso-lanzador` de
   assets/js/modules/acceso-usuario.js. Cero usos en JS y HTML. */

/* ---------- Configurador de acceso en doble cajon ----------
   Colores planos: el bloque anterior pintaba fondos compuestos
   encima y competia con el resto de la ficha. Cada seccion es una "pieza"
   cerrada con su cabecera y su conteo. */

/* Resumen en linea dentro de la ficha; el detalle vive en el doble cajon. */
.acceso-lanzador { display: grid; gap: 9px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.acceso-lanzador__modos { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.acceso-lanzador__modo { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.acceso-lanzador__modo:has(input:checked) { border-color: var(--brand); background: var(--brand-light); }
.acceso-lanzador__modo input { width: 15px; height: 15px; flex: 0 0 15px; margin: 1px 0 0; accent-color: var(--brand); }
.acceso-lanzador__modo strong { display: block; color: var(--text); font-size: 11px; font-weight: 700; line-height: 1.25; }
.acceso-lanzador__modo small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 10px; line-height: 1.35; }
.acceso-lanzador__pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.acceso-lanzador__cuenta { color: var(--text-muted); font-size: 11px; }
.acceso-lanzador__cuenta b { color: var(--text); font-weight: 800; }

/* Pieza: bloque cerrado con cabecera gris. */
/* flex:0 0 auto no es adorno: el cuerpo del cajon es un contenedor flex en
   columna, y sin esto las piezas se encogen para caber en vez de desbordar.
   En una ventana baja eso aplastaba las filas -851px de contenido metidos en
   537- en lugar de dejar que el cuerpo se desplace. */
.acceso-pieza { flex: 0 0 auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.acceso-pieza__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.acceso-pieza__titulo { color: var(--text-soft); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.acceso-pieza__conteo { color: var(--text-muted); font-size: 10px; font-weight: 700; }
.acceso-pieza__ayuda { margin: 0; padding: 8px 12px 2px; color: var(--text-muted); font-size: 10.5px; line-height: 1.4; }
.acceso-pieza__cuerpo { padding: 6px; }

/* Fila con interruptor. */
.acceso-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 9px; border-radius: var(--radius-sm); cursor: pointer; }
.acceso-fila:hover { background: var(--surface-2); }
.acceso-fila:has(input:checked) { background: var(--brand-light); }
.acceso-fila__textos { display: grid; gap: 2px; min-width: 0; }
.acceso-fila__textos strong { color: var(--text); font-size: 11.5px; font-weight: 700; line-height: 1.25; }
.acceso-fila__textos small { color: var(--text-muted); font-size: 10px; line-height: 1.35; }

/* Interruptor construido sobre el checkbox real: el input sigue siendo el que
   guarda el estado y el que oye al teclado; solo se le quita la pintura. */
.acceso-sw { position: relative; flex: 0 0 32px; width: 32px; height: 18px; }
.acceso-sw input[type="checkbox"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.acceso-sw__pista { display: block; width: 32px; height: 18px; border-radius: var(--radius-pill); background: var(--border-strong); transition: background .15s; pointer-events: none; }
.acceso-sw__bola { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: var(--radius-circle); background: var(--surface); transition: left .15s; pointer-events: none; }
.acceso-sw input:checked ~ .acceso-sw__pista { background: var(--brand); }
.acceso-sw input:checked ~ .acceso-sw__bola { left: 16px; }
.acceso-sw input:focus-visible ~ .acceso-sw__pista { box-shadow: var(--focus-ring); }

/* Lista de modulos del panel principal. */
.acceso-cfg-modulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 11px 12px; border: 0; border-radius: var(--radius-sm); background: transparent; font: inherit; text-align: left; cursor: pointer; }
.acceso-cfg-modulo + .acceso-cfg-modulo { border-top: 1px solid var(--line); border-radius: 0; }
.acceso-cfg-modulo:hover { background: var(--surface-2); }
.acceso-cfg-modulo[aria-current="true"] { background: var(--brand-light); }
.acceso-cfg-modulo__nombre { color: var(--text); font-size: 12px; font-weight: 700; line-height: 1.25; }
.acceso-cfg-modulo__sub { display: block; color: var(--text-muted); font-size: 10px; font-weight: 400; line-height: 1.35; }
.acceso-cfg-modulo__contador { flex: 0 0 auto; min-width: 22px; padding: 3px 7px; border-radius: var(--radius-pill); background: var(--brand); color: var(--on-brand); font-size: 9.5px; font-weight: 800; text-align: center; }
.acceso-cfg-modulo__contador--cero { background: var(--border); color: var(--text-muted); }

/* El doble cajon del configurador, solo el suyo.
   1) Los paneles se ajustan al contenido en vez de ocupar la ventana entera:
      el modulo Permisos son tres filas y dejaba 639px de blanco debajo. Con
      max-height siguen desplazandose cuando el contenido es largo -Horas
      extras trae dieciseis filas-.
   2) El formulario de usuario sigue abierto debajo, a la derecha. El doble
      cajon conserva su posicion y sus paneles compactos quedan alineados por
      abajo con la ficha. Tambien se reserva el ancho de la ficha para que los
      tres cajones formen una sola fila sin solaparse.
   3) Separacion entre los dos: el reparto base los deja pegados -el secundario
      termina justo donde empieza el principal- y sus esquinas de 14px dejaban
      asomar el fondo oscuro entre ambas, como una muesca. */
.acceso-cfg-cajon {
  /* El cajon de ficha usa el ancho medio permitido por el sistema. */
  --acceso-cfg-desplazamiento: calc(440px + var(--cajon-margen, 14px));
}
.acceso-cfg-cajon .doble-cajon__panel {
  top: auto;
  bottom: var(--cajon-margen, 14px);
  max-height: calc(100% - (var(--cajon-margen, 14px) * 2));
}
.acceso-cfg-cajon .doble-cajon__panel--principal {
  right: calc(var(--cajon-margen, 14px) + var(--acceso-cfg-desplazamiento));
}
.acceso-cfg-cajon .doble-cajon__panel--secundario {
  right: calc(
    var(--doble-cajon-ancho-principal, 440px)
    + (var(--cajon-margen, 14px) * 2)
    + var(--acceso-cfg-desplazamiento)
  );
}

@media (max-width: 780px) {
  .acceso-lanzador__modos { grid-template-columns: 1fr; }
  /* En movil vuelven a ocupar la pantalla: no hay sitio para dos paneles. */
  .acceso-cfg-cajon { --acceso-cfg-desplazamiento: 0px; }
  .acceso-cfg-cajon .doble-cajon__panel { top: 0; bottom: 0; max-height: none; }
}

/* Aqui vivian `.perfiles-extra*` y `.perfil-extra*` (10 reglas), sin un solo
   uso en JS ni en HTML. */
.estado-acceso { display: grid; gap: 3px; min-width: 110px; }
.estado-acceso strong { color: var(--text-soft); font-size: 10.5px; }
.estado-acceso small { color: var(--text-muted); font-size: 9.5px; line-height: 1.3; }
.estado-acceso--modular strong { color: var(--brand-dark); }

/* ---------- Zona de carga de archivo ----------
   El <input type="file"> nativo pinta un boton gris del sistema operativo y el
   texto "Ningun archivo seleccionado": no se puede estilar y desentona con el
   resto. Se le deja hacer su trabajo, escondido, y por encima va esta zona. */
.subida { position: relative; }
.subida__campo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.subida__zona {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; padding: 26px 20px; text-align: center;
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg);
  background: var(--surface-2); color: var(--text-muted);
  transition: border-color .16s, background .16s, color .16s;
}
/* :focus-within por el teclado: el input real esta encima pero es invisible,
   asi que sin esto tabular hasta aqui no se ve. */
.subida__campo:hover + .subida__zona,
.subida__campo:focus-visible + .subida__zona,
.subida.is-encima .subida__zona {
  border-color: var(--brand); background: var(--brand-light); color: var(--brand-dark);
}
.subida__campo:focus-visible + .subida__zona { box-shadow: var(--focus-ring); }
.subida__icono { color: var(--brand); }
.subida__titulo { font-size: 13px; font-weight: 600; color: var(--text); }
.subida__pista  { font-size: 11.5px; color: var(--text-muted); }
/* Con archivo elegido la zona deja de invitar y pasa a confirmar: el trazo se
   cierra y el fondo vuelve a blanco. Asi "listo" no se confunde con "pasa por
   encima", que comparten el azul claro. */
.subida.tiene-archivo .subida__zona {
  border-style: solid; border-color: var(--brand); background: var(--surface);
}
.subida.tiene-archivo .subida__titulo { color: var(--brand-dark); }

/* ---------- Verificador de contraseña ---------- */
.password-check { margin-top: 8px; padding: 11px 12px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.password-check__status { margin: 0 0 7px; color: var(--text-soft); font-size: 11px; font-weight: 800; }
.password-check__meter { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 9px; }
.password-check__segment { height: 4px; border-radius: var(--radius-pill); background: var(--border-strong); transition: background .18s ease; }
.password-check[data-level="weak"] .password-check__segment:nth-child(-n+2) { background: var(--danger); }
.password-check[data-level="medium"] .password-check__segment:nth-child(-n+4) { background: var(--warning); }
.password-check[data-level="strong"] .password-check__segment { background: var(--success); }
.password-check[data-level="weak"] .password-check__status { color: var(--danger-dark); }
.password-check[data-level="medium"] .password-check__status { color: var(--warning-dark); }
.password-check[data-level="strong"] .password-check__status { color: var(--success-dark); }
.password-check__requirements { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin: 0; padding: 0; list-style: none; color: var(--text-muted); font-size: 10.5px; }
.password-check__requirements li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.password-check__mark { display: inline-grid; place-items: center; flex: 0 0 14px; width: 14px; height: 14px; border-radius: var(--radius-circle); background: var(--border); color: var(--text-muted); font-size: 9.5px; font-weight: 800; }
.password-check__requirements li.is-met { color: var(--success-dark); }
.password-check__requirements li.is-met .password-check__mark { background: var(--success-light); color: var(--success-dark); }

/* ---------- Selects, fechas y horas propios ---------- */
.select-ui, .date-time-ui { position: relative; width: 100%; }
.select-ui[hidden], .date-time-ui[hidden] { display: none; }
/* El campo NATIVO, escondido detras del control propio. Se nombra por su tipo
   y no como "el input que cuelga del envoltorio": el disparador de la hora es
   tambien un input -ahi se escribe- y con el selector de antes se lo llevaba
   por delante, dejando el campo invisible y el reloj flotando solo. */
.select-ui > select,
.date-time-ui > input[type="date"],
.date-time-ui > input[type="time"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.select-ui__trigger, .date-time-ui__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 40px; padding: 0 13px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.select-ui__trigger:hover, .date-time-ui__trigger:hover { border-color: var(--brand-line); background: var(--brand-tint); }
.select-ui__trigger:focus-visible, .date-time-ui__trigger:focus-visible { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }
.select-ui__trigger:disabled, .date-time-ui__trigger:disabled { cursor: not-allowed; opacity: .6; background: var(--surface-2); }
.select-ui__value, .date-time-ui__trigger > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-ui__input-shell { position: relative; width: 100%; }
.select-ui__search-input { width: 100%; height: 40px; padding: 0 36px 0 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; transition: border-color .15s, box-shadow .15s, background .15s; }
.select-ui__search-input::placeholder { color: var(--text-soft); opacity: 1; }
.select-ui__search-input:hover { border-color: var(--brand-line); background: var(--brand-tint); }
.select-ui__search-input:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }
.select-ui__search-input:disabled { cursor: not-allowed; opacity: .6; background: var(--surface-2); }
.select-ui__input-shell > .select-ui__chevron { position: absolute; top: 50%; right: 11px; pointer-events: none; transform: translateY(-50%); }
.select-ui.is-open .select-ui__input-shell > .select-ui__chevron { transform: translateY(-50%) rotate(180deg); }
/* font-size y line-height eran para el caracter de texto que habia antes; con
   un SVG no pintan nada. flex-shrink:0 para que no lo aplaste un valor largo. */
.select-ui__chevron { color: var(--brand); flex: 0 0 16px; transition: transform .18s; }
.select-ui.is-open .select-ui__chevron { transform: rotate(180deg); }
.select-ui__menu, .date-time-ui__panel { position: absolute; top: calc(100% + 7px); left: 0; right: 0; z-index: 90; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-menu); animation: menuEntrada .16s ease-out; transform-origin: top center; }
.date-time-ui__panel { width: 300px; right: auto; padding: 16px; border-radius: var(--radius-lg); box-shadow: var(--shadow-menu); }
.date-picker__selection { position: relative; display: flex; align-items: flex-end; gap: 12px; min-height: 58px; margin: -2px 0 14px; padding: 2px 2px 15px; border-bottom: 4px solid var(--brand-light); }
.date-picker__selection::after { content: ''; position: absolute; right: 0; bottom: -4px; left: 0; width: 52%; height: 4px; border-radius: var(--radius-pill); background: var(--brand); }
.date-picker__selection-day { min-width: 45px; color: var(--text); font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.date-picker__selection-copy { display: grid; gap: 3px; min-width: 0; }
.date-picker__selection-label { color: var(--text-muted); font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.date-picker__selection-month { overflow: hidden; color: var(--text); font-size: 15px; font-weight: 700; text-overflow: ellipsis; text-transform: capitalize; white-space: nowrap; }
@keyframes menuEntrada { from { opacity: 0; transform: translateY(-5px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
.select-ui__menu[hidden], .date-time-ui__panel[hidden] { display: none; }
/* ---------- El menú mide lo que mide su contenido ----------
   El menú heredaba el ancho del disparador (`left: 0; right: 0`). Con un
   disparador estrecho —los de la barra de acciones bajaron a 92 px para que las
   siete piezas cupieran en un renglón— «Gestión de horas extras RR.HH.» salía
   partido en cuatro líneas y la lista se volvía ilegible.

   Ahora el menú se estira hasta lo que pida la opción más larga, sin bajar del
   ancho del disparador y sin pasarse de 340 px. Si alguna opción es más larga
   que eso, ahí sí envuelve, que es lo correcto: un menú de 600 px de ancho no
   lo lee nadie.

   `right: auto` es necesario: con `left` y `right` fijados a la vez, el ancho
   lo decide la caja y `width` se ignora. */
.select-ui__menu {
  max-height: 280px; overflow-y: auto;
  /* Al llegar al final de la lista, la rueda no arrastra lo de atrás. */
  overscroll-behavior: contain;
  right: auto;
  width: max-content;
  min-width: 100%;
  max-width: min(340px, calc(100vw - 32px));
}

/* Pegado al borde derecho de la ventana el menú se saldría, así que ahí crece
   hacia la izquierda. Lo marca controles.js al abrirlo. */
.select-ui__menu.es-a-la-izquierda { left: auto; right: 0; }
.select-ui__option { display: flex; align-items: center; width: 100%; padding: 9px 11px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.select-ui__option:hover, .select-ui__option:focus-visible { outline: none; background: var(--brand-tint); color: var(--brand-dark); }
.select-ui__option.is-selected { background: var(--brand-light); color: var(--brand-dark); font-weight: 800; }
.select-ui__option--check { gap: 9px; }
.select-ui__check { display: inline-grid; place-items: center; width: 16px; height: 16px; flex: 0 0 16px; border: 1px solid var(--border-strong); border-radius: 4px; color: transparent; font-size: 11px; font-weight: 900; line-height: 1; }
.select-ui__option--check.is-selected .select-ui__check { border-color: var(--brand); background: var(--brand); color: var(--on-brand); }
.select-ui__option:disabled { opacity: .42; cursor: not-allowed; }
.select-ui__empty { padding: 10px 11px; color: var(--text-muted); font-size: 12px; }
.date-time-ui__trigger { justify-content: flex-start; }
.date-time-ui__icon {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--brand);
}
/* ---------- La hora se escribe ----------
   Su disparador es un campo de texto, no un boton: la rejilla se abre desde el
   reloj, que se mete DENTRO del campo por la derecha. El reloj va a la derecha
   y no a la izquierda como en la fecha: a la izquierda es un adorno delante del
   valor, y aqui es un boton que hay que poder pulsar sin tapar lo que se
   escribe.

   El reloj es un boton CON el icono dentro, y no el icono convertido en boton:
   la esfera se dibuja con el borde del icono y las agujas con sus dos
   pseudoelementos, asi que si el icono fuera el boton el area que se pulsa
   mediria lo que mide la esfera -15 px, la mitad de lo que pide un dedo-. */
.date-time-ui--time .date-time-ui__trigger {
  padding-right: 40px;
  cursor: text;
  /* Cifras de ancho fijo: sin esto el campo baila al pasar de «1» a «18:30». */
  font-variant-numeric: tabular-nums;
}
.date-time-ui--time .date-time-ui__trigger::placeholder { color: var(--text-muted); font-weight: 500; }
/* Un campo de texto no se ilumina al pasar por encima como lo hace un boton. */
.date-time-ui--time .date-time-ui__trigger:hover { background: var(--surface); border-color: var(--brand-line); }
.date-time-ui--time .date-time-ui__trigger:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }

.date-time-ui__reloj {
  position: absolute; top: 50%; right: 7px; transform: translateY(-50%);
  width: 28px; height: 28px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-soft); cursor: pointer;
  transition: background .15s, color .15s;
}
.date-time-ui__reloj:hover { background: var(--brand-tint); color: var(--brand); }
.date-time-ui__reloj:focus-visible { outline: none; box-shadow: var(--focus-ring); color: var(--brand); }
.is-open > .date-time-ui__reloj { background: var(--brand-tint); color: var(--brand); }
.date-time-ui.is-disabled .date-time-ui__reloj { cursor: not-allowed; opacity: .6; }
/* El icono hereda el color del boton, que cambia al señalarlo; en la fecha es
   siempre el azul de la marca. */
.date-time-ui__reloj .date-time-ui__icon { color: inherit; }

/* Lo que no se puede leer como una hora no se guarda a medias: el campo vuelve
   a lo ultimo valido y lo dice un instante. */
.date-time-ui--time.es-invalida .date-time-ui__trigger {
  border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-light);
}
/* El panel de la hora mide lo que mide su contenido: estirado al ancho del
   campo dejaba las dos columnas nadando. */
.date-time-ui__panel--time { width: max-content; min-width: 0; }

.date-time-ui__icon--date { border: 1.6px solid currentColor; border-radius: var(--radius-icon); }
.date-time-ui__icon--date::before {
  content: '';
  position: absolute;
  top: 3px;
  right: 1px;
  left: 1px;
  border-top: 1.6px solid currentColor;
}
.date-time-ui__icon--date::after {
  content: '';
  position: absolute;
  top: -3px;
  left: 3px;
  width: 6px;
  height: 4px;
  border-right: 1.6px solid currentColor;
  border-left: 1.6px solid currentColor;
}
.date-time-ui__icon--time { border: 1.6px solid currentColor; border-radius: var(--radius-circle); }
.date-time-ui__icon--time::before { content: ''; position: absolute; top: 3px; left: 6px; width: 1.6px; height: 5px; background: currentColor; }
.date-time-ui__icon--time::after { content: ''; position: absolute; top: 7px; left: 6px; width: 4px; height: 1.6px; background: currentColor; transform: rotate(25deg); transform-origin: left center; }
.date-picker__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 12px; }
.date-picker__head strong { color: var(--text); font-size: 14px; font-weight: 800; text-transform: capitalize; }
.date-picker__head > div { display: flex; gap: 4px; }
.date-picker__nav { display: grid; place-items: center; width: 31px; height: 31px; padding: 0; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--brand); font-size: 22px; cursor: pointer; }
.date-picker__nav:hover, .date-picker__nav:focus-visible { outline: none; background: var(--brand-tint); }
.date-picker__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px 4px; }
.date-picker__weekday { padding: 4px 0 7px; color: var(--text-muted); font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.date-picker__empty { min-height: 32px; }
.date-picker__day { width: 100%; min-height: 32px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text); font: inherit; font-size: 11px; cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .15s; }
.date-picker__day:hover, .date-picker__day:focus-visible { outline: none; border-color: var(--brand); background: var(--brand-light); }
.date-picker__day.is-selected { border-color: var(--brand); background: var(--brand); color: var(--on-brand); font-weight: 800; }
/* Los extremos del rango van excluidos igual que la seleccion suelta: si no,
   esta regla gana -el :not() suma especificidad- y el dia de hoy queda azul
   sobre azul, es decir, sin numero visible. */
.date-picker__day.is-today:not(.is-selected):not(.is-rango-ini):not(.is-rango-fin) { border-color: var(--brand); color: var(--brand); font-weight: 800; }
.date-picker__day:disabled { color: var(--text-faint); cursor: not-allowed; }
.date-picker__actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--border); }
.date-picker__action { padding: 6px 9px; border: 0; border-radius: 4px; background: transparent; color: var(--text-muted); font: inherit; font-size: 11px; cursor: pointer; }
.date-picker__action:hover { background: var(--brand-tint); color: var(--brand); }
.date-picker__action--primary { color: var(--brand); font-weight: 800; }
.date-picker__saltos { display: flex; gap: 6px; }
/* Mes y ano son botones: cambian la rejilla por la de meses o la de anos. */
.date-picker__salto-trigger { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; text-transform: capitalize; cursor: pointer; }
.date-picker__salto-trigger svg { fill: none; stroke: var(--text-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s; }
.date-picker__salto-trigger:hover { border-color: var(--brand-line); background: var(--brand-tint); }
.date-picker__salto-trigger.is-open { border-color: var(--brand-line); background: var(--brand-light); color: var(--brand); }
.date-picker__salto-trigger.is-open svg { stroke: var(--brand); transform: rotate(180deg); }
.date-picker__grid--salto { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.date-picker__salto { min-height: 40px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--text); font: inherit; font-size: 12px; font-weight: 600; text-transform: capitalize; cursor: pointer; }
.date-picker__salto:hover { background: var(--brand-light); color: var(--brand); }
.date-picker__salto.is-selected { background: var(--brand); color: var(--on-brand); font-weight: 800; box-shadow: var(--shadow-azul); }
/* Calendario desplegable (opcion C): dias redondos, fin de semana tenido y
   flechas grises; el azul queda para el dia elegido. Acotado al panel para no
   tocar los calendarios de cierres, que comparten las clases. */
.date-time-ui__panel .date-picker__nav { color: var(--text-soft); }
.date-time-ui__panel .date-picker__day { border-radius: 4px; font-size: 12px; font-variant-numeric: tabular-nums; }
.date-time-ui__panel .date-picker__day.is-finde { background: var(--surface-2); color: var(--text-soft); }
.date-time-ui__panel .date-picker__day:hover { border-color: transparent; background: var(--brand-light); color: var(--brand); }
.date-time-ui__panel .date-picker__day.is-today:not(.is-selected) { border-color: var(--brand-line); background: transparent; }
.date-time-ui__panel .date-picker__day.is-selected { box-shadow: var(--shadow-azul); }
.date-time-ui__panel .date-picker__weekday.is-finde { color: var(--text-muted); }
.date-time-ui__panel .date-picker__action { font-size: 12px; }
.time-picker__title { display: block; margin: 3px 3px 10px; font-size: 12.5px; }
.time-picker__columns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.time-picker__label { display: block; margin: 0 0 5px 4px; color: var(--text-muted); font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.time-picker__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; max-height: 166px; overflow-y: auto; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.time-picker__item { min-height: 28px; padding: 3px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); font: inherit; font-size: 11px; cursor: pointer; }
.time-picker__item:hover { background: var(--brand-light); color: var(--brand); }
.time-picker__item.is-selected { background: var(--brand); color: var(--on-brand); font-weight: 800; }
.time-picker__done { width: 100%; justify-content: center; margin-top: 12px; }

.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 0 16px; }
.ficha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; max-width: 760px; }
@media (max-width: 620px) { .ficha { grid-template-columns: 1fr; } }

.grupo-titulo {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0 14px; color: var(--text-muted);
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .11em;
}
.grupo-titulo::after { content: ""; height: 1px; background: var(--border); flex: 1; }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 40px 24px; background: var(--bg); }
.login-card {
  width: 100%; max-width: 400px;
  background: var(--surface); border: none;
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden;
}
/* La cabecera deja de ser un degradado azul: el azul queda para el boton. */
.login-card__head { background: var(--surface); color: var(--text); text-align: center; padding: 32px 26px 4px; }
.login-card__head h1 { font-size: 19px; font-weight: 800; margin: 16px 0 5px; line-height: 1.3; letter-spacing: -.015em; }
.login-card__head p  { font-size: 12.5px; margin: 0; color: var(--text-muted); }
.login-card__body { padding: 24px 26px 26px; }
.login-card__body .btn { width: 100%; height: 44px; font-size: 13px; }
.login-logo {
  width: 48px; height: 48px; border-radius: var(--radius-lg); background: var(--brand); margin: 0 auto;
  display: grid; place-items: center; color: var(--on-brand); font-weight: 800; font-size: 13px; letter-spacing: .04em;
}
.login-pie { text-align: center; font-size: 11.5px; color: var(--text-muted); margin-top: 16px; }

/* ---------- Avisos ---------- */
.aviso {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 15px; border-radius: var(--radius-md);
  font-size: 12.5px; font-weight: 600; margin: 0;
  border: none;
}
.aviso--error   { background: var(--danger-light);  color: var(--danger-dark); }
.aviso--ok      { background: var(--success-light); color: var(--success-dark); }
.aviso--info    { background: var(--brand-light);   color: var(--brand); }
.aviso--warn    { background: var(--warning-light); color: var(--warning-dark); }
.aviso[hidden]  { display: none; }

.info-badge {
  display: inline-block; background: var(--brand-light); color: var(--brand);
  padding: 5px 11px; border-radius: var(--radius-pill);
  font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}

/* ---------- Estado de carga ---------- */
.esqueleto { background: var(--line); border-radius: var(--radius-sm); height: 14px; animation: pulso .9s ease-in-out infinite alternate; }
.esqueleto--label { width: 60%; height: 10px; }
.esqueleto--valor { width: 40%; height: 18px; }
@keyframes pulso { from { opacity: .62; } to { opacity: 1; } }

.cargando { text-align: center; padding: 34px; color: var(--text-muted); font-size: 12.5px; }

/* ---------- Paginacion ---------- */
.paginacion {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin: 0; font-size: 12px; color: var(--text-muted);
}
.paginacion__botones { display: flex; gap: 6px; align-items: center; }
.paginacion__izq { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.paginacion__tamano { display: flex; align-items: center; gap: 7px; }
.paginacion__tamano select {
  height: 30px; padding: 0 26px 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 12px; font-weight: 700;
  background: var(--surface); color: var(--text);
}
.paginacion__tamano select:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }
.paginacion__tamano .select-ui { width: auto; min-width: 64px; }
.paginacion__tamano .select-ui__menu {
  top: auto; bottom: calc(100% + 7px);
  transform-origin: bottom center;
  animation-name: menuEntradaArriba;
}

/* ---------- Log de la consola de soporte ----------
   Lineas crudas de log: monoespaciada, con scroll propio y sobre la superficie
   secundaria. Plana a proposito — sin fondo oscuro ni colores propios (§10). */
.consola-log {
  max-height: 480px; overflow: auto; margin: 0; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-2); color: var(--text-soft);
   font: 12px/1.6 var(--font-mono);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

@keyframes menuEntradaArriba { from { opacity: 0; transform: translateY(5px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* ---------- Registro de horas extras: las cinco partes en una pagina ---------- */
/* Antes cada parte se veia sola dentro de un cajon y no necesitaba separarse de
   nada; apiladas en el mismo formulario se leen como un unico chorro de campos
   si no se marca donde empieza cada una. */
.ingreso-form-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.ingreso-form-section:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.ingreso-form-section__title { margin: 0 0 4px; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.ingreso-form-section__hint { margin: 0 0 14px; color: var(--text-muted); font-size: 12.5px; }

/* ---------- Cajon lateral ---------- */
/* Formularios largos que antes ocupaban una columna fija. Entra por la derecha
   para que la lista de la que vienes siga a la vista al fondo. */
.cajon__fondo {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(15, 23, 42, 0);
  transition: background .22s ease;
  display: flex; justify-content: flex-end;
  padding: var(--cajon-margen, 14px);
}

/* ---------- Dónde aparece el cajón ----------
   `centro` es lo normal: un formulario que hay que completar antes de seguir se
   comporta como un diálogo y se pone en medio.

   `lateral` se reserva para los FILTROS. Ahí la posición es funcional, no
   estética: se quiere seguir viendo la tabla que se está acotando mientras se
   toca el filtro, y un diálogo en medio la taparía justo cuando hace falta
   mirarla. Lo pide `crearCajon({ posicion: 'lateral' })`. */
.cajon__fondo--centro { justify-content: center; align-items: center; }
.cajon__fondo--centro .cajon {
  height: auto;
  max-height: 100%;
  /* Entra subiendo un poco y creciendo, no deslizándose: el deslizamiento
     cuenta «vengo del borde», que es mentira cuando sale del medio. */
  transform: translateY(14px) scale(.985);
  opacity: 0;
  transition: transform .22s cubic-bezier(.32, .72, 0, 1), opacity .18s ease;
}
.cajon__fondo--centro.cajon__fondo--visible .cajon { transform: none; opacity: 1; }
/* El velo se oscurece un punto más que en el lateral: aquí el cajón SÍ es un
   alto en el camino, y el fondo deja de ser lo que se está mirando. */
.cajon__fondo--centro.cajon__fondo--visible { background: rgba(15, 23, 42, .34); }

@media (prefers-reduced-motion: reduce) {
  .cajon__fondo--centro .cajon { transform: none; transition: opacity .12s ease; }
}
/* Velo suave y no oscuro: el cajon flota SOBRE la pantalla y la lista de la que
   vienes tiene que seguir leyendose detras. Ennegrecerla la convertiria en un
   dialogo a pantalla completa, que es justo lo que no es. */
.cajon__fondo--visible { background: rgba(15, 23, 42, .22); }
/* 'display: flex' gana al display:none que el navegador aplica a [hidden], asi
   que sin esto el fondo cerrado sigue ocupando la pantalla entera y se traga
   todos los clics de la pagina. */
.cajon__fondo[hidden] { display: none; }

.cajon {
  width: min(var(--cajon-ancho, 440px), 100%);
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  /* Redondeado por los cuatro lados, no solo por dentro: separado del borde de
     la ventana, es una tarjeta flotante y no un panel encajado. */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  overflow: hidden;
  /* El margen entra en el desplazamiento para que salga limpio por el borde. */
  transform: translateX(calc(100% + var(--cajon-margen, 14px)));
  transition: transform .26s cubic-bezier(.32, .72, 0, 1);
}
.cajon__fondo--visible .cajon { transform: translateX(0); }

.cajon__cab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 22px; border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.cajon__cab h2 { font-size: 15px; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.cajon__cerrar {
  border: 1px solid transparent; background: transparent; cursor: pointer;
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  font-size: 22px; line-height: 1; color: var(--text-soft);
}
.cajon__cerrar:hover { background: var(--brand-tint); color: var(--brand); }
.cajon__cerrar:focus-visible { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }

/* El unico que se desplaza: la cabecera se queda fija arriba. */
.cajon__cuerpo { padding: 20px 22px 28px; overflow-y: auto; flex: 1 1 auto; display: flex; flex-direction: column; gap: 18px; }

/* Detalles de permisos y sobretiempo dentro de un cajon de solo lectura. */
.cajon__cuerpo .detalle-solicitud,
.cajon__cuerpo .detalle-hora-extra { display: flex; flex-direction: column; gap: 2px; }
/* El detalle de solicitud pide aire: los 2 px de arriba venian de cuando cada
   dato era un `.campo` con sus propios margenes. Con la ficha nueva -titular,
   quien, rejilla, recorrido- dos pixeles dejaban todo pegado.
   El ritmo es 16 px entre bloques y 8 debajo de cada rotulo de grupo: el
   titulo tiene que estar mas cerca de LO SUYO que del bloque anterior, o no se
   sabe qué encabeza. El margen negativo descuenta la mitad del hueco. */
.cajon__cuerpo .detalle-solicitud,
.cajon__cuerpo .detalle-hora-extra { gap: 16px; }
/* El rotulo de grupo trae su propio `margin: 22px 0 14px`, pensado para un
   contenedor SIN `gap`. Aqui los dos se suman: daban 38 px por encima y 22 por
   debajo, o sea el titulo mas cerca del bloque anterior que del suyo. Se
   anulan sus margenes y manda el ritmo del contenedor. */
.detalle-solicitud .grupo-titulo,
.detalle-hora-extra .grupo-titulo { margin: 0; }
.detalle-solicitud .grupo-titulo + *,
.detalle-hora-extra .grupo-titulo + * { margin-top: -8px; }
.cajon__cuerpo .ficha { width: 100%; max-width: none; gap: 0 14px; }
/* ---------- El dialogo de confirmar, CENTRADO ----------
   Era el ultimo que seguia entrando por la derecha sin ser un filtro. Y es el
   caso mas claro de todos: una pregunta que hay que responder antes de seguir
   va en medio, no apoyada en un borde. El lateral se reserva para los FILTROS,
   donde la posicion es funcional -se quiere seguir viendo la tabla-.

   El nombre de la clase se queda: lo usan cuatro modulos y renombrarlo no
   cambia ni un pixel. */
.confirmacion-lateral__fondo {
  position: fixed; inset: 0; z-index: 130;
  display: flex; justify-content: center; align-items: center;
  padding: var(--cajon-margen, 14px);
  background: rgba(15, 23, 42, 0);
  transition: background .22s ease;
  pointer-events: none;
}
.confirmacion-lateral__fondo[hidden] { display: none; }
/* El velo, un punto mas oscuro que el de un cajon lateral: este SI es un alto
   en el camino. */
.confirmacion-lateral__fondo--visible {
  background: rgba(15, 23, 42, .34);
  pointer-events: auto;
}
.confirmacion-lateral {
  width: min(var(--confirmacion-ancho, 420px), 100%); max-height: calc(100% - 28px);
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-lg);
  /* Entra subiendo y creciendo, no deslizandose: el deslizamiento cuenta
     «vengo del borde», que es mentira cuando sale del medio. */
  transform: translateY(14px) scale(.985); opacity: 0;
  transition: transform .22s cubic-bezier(.32, .72, 0, 1), opacity .18s ease;
}
.confirmacion-lateral__fondo--visible .confirmacion-lateral { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .confirmacion-lateral { transform: none; transition: opacity .12s ease; }
}
.confirmacion-lateral__cab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 22px; border-bottom: 1px solid var(--border);
}
.confirmacion-lateral__cab h2 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.confirmacion-lateral__cerrar {
  width: 30px; height: 30px; padding: 0; border: 1px solid transparent;
  border-radius: var(--radius-sm); background: transparent; color: var(--text-soft);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.confirmacion-lateral__cerrar:hover { background: var(--brand-tint); color: var(--brand); }
.confirmacion-lateral__cerrar:focus-visible { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }
/* Con desplazamiento propio: el alto del dialogo lo limita la ventana, y un
   contenido largo -una bitacora de veinte lineas- se cortaba contra el borde
   dejando los botones fuera. */
.confirmacion-lateral__cuerpo { padding: 20px 22px 24px; overflow: auto; min-height: 0; }
.confirmacion-lateral__mensaje {
  margin: 0 0 22px; color: var(--text-muted); font-size: 12.5px;
  line-height: 1.55; white-space: pre-line;
}
/* El pie, fuera del cuerpo que se desplaza: los botones de un dialogo tienen
   que estar siempre donde se les busca, no al final de un desplazamiento. */
.confirmacion-lateral__acciones {
  display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
  padding: 14px 22px 18px; border-top: 1px solid var(--border);
  background: var(--surface); flex: none;
}
/* El margen inferior del mensaje lo ponia la separacion con los botones; ahora
   esa separacion la pone el pie. */
.confirmacion-lateral__mensaje:last-child { margin-bottom: 0; }

/* ---------- Graficos de tendencia (graficoTendencia, graficoColumnasSuaves) ---------- */
.graf-tendencia { min-width: 0; }
.graf-svg { display: block; width: 100%; height: auto; overflow: visible; }
.graf-eje   { font-size: 10.5px; font-weight: 500; fill: var(--text-muted); }
.graf-valor { font-size: 11px; font-weight: 700; fill: var(--text-soft); }
.graf-leyenda { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; font-size: 12px; color: var(--text-muted); }
.graf-leyenda span { display: inline-flex; align-items: center; gap: 7px; }
.graf-leyenda i { display: inline-block; width: 16px; height: 3px; border-radius: 2px; }
.graf-leyenda__actual { background: var(--brand); }
/* La raya del periodo anterior va punteada como su linea en el grafico. */
.graf-leyenda__previo { background: repeating-linear-gradient(90deg, var(--text-faint) 0 4px, transparent 4px 7px); }
@media (prefers-reduced-motion: no-preference) {
  .graf-columna { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0);
                  animation: graf-sube .6s cubic-bezier(.2,.8,.3,1) forwards; }
  @keyframes graf-sube { to { transform: scaleY(1); } }
}
/* ---------- Tablero gerencial (/panel) ----------
   Un dashboard de verdad: cifras, graficos, dos tablas resumidas y el acceso a
   todos los modulos, en una pantalla.

   El cromado va ACOTADO a `.tablero` y no cambiado en `.panel` global: el
   tratamiento nuevo -sin borde, radio 20, sombra amplia- mejora esta pantalla,
   pero aplicarlo de golpe cambiaria el aspecto de las otras veintiseis sin que
   nadie lo haya pedido. Si gusta, se sube a `.panel` borrando este anidado.

   Cada bloque se dibuja solo si la cuenta alcanza su endpoint; por eso la
   rejilla es `auto-fit` y no una maqueta fija: con tres bloques menos no puede
   quedar un hueco. */
.tablero { display: flex; flex-direction: column; gap: 18px; }
.tablero .panel {
  border: 0; border-radius: 20px;
  box-shadow: 0 1px 2px rgba(5,45,111,.05), 0 14px 34px -18px rgba(5,45,111,.22);
}
.tablero .panel__head { padding: 20px 22px 0; border-bottom: 0; }
.tablero .panel__head h2 { font-size: 15.5px; letter-spacing: -.015em; }
.tablero .panel__body { padding: 18px 22px 22px; }

/* Flex con MINIMOS, no rejilla con un corte de ventana. Con la rejilla 2/1 y
   el corte en 980 px, a 1012 px de ventana -menos el menu lateral- el tercio
   quedaba en 180 px: la leyenda del anillo salia cortada («Pre-Apr...») y el
   grafico de la izquierda, encogido. Asi cada pieza declara cuanto necesita y
   baja de fila cuando no lo tiene, mida lo que mida la ventana. */
.tablero__rejilla { display: flex; flex-wrap: wrap; gap: 16px; }
.tablero__rejilla > * { min-width: 0; }
.tablero__rejilla--2 > *  { flex: 1 1 380px; }
.tablero__rejilla--21 > :first-child { flex: 2 1 440px; }
.tablero__rejilla--21 > :last-child  { flex: 1 1 300px; }
/* El panel ocupa todo el alto de su celda: dos paneles lado a lado miden igual. */
.tablero__rejilla > * > .panel { height: 100%; }

/* La bienvenida. El Simi es el unico recurso de marca que tiene el proyecto y
   no se usaba en ninguna pantalla. */
.tablero__hola {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 24px; border-radius: 20px;
  background: var(--brand-tint); border: 1px solid var(--brand-line);
}
.tablero__cara { width: 72px; height: 72px; flex: 0 0 72px; }
.tablero__saludo { font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 5px; color: var(--navy); }
.tablero__resumen { font-size: 13.5px; color: var(--text-soft); margin: 0; line-height: 1.55; }
.tablero__acciones { display: flex; gap: 8px; margin-top: 13px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .tablero__hola { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Tarjeta de cifra con chip de icono y variacion. */
/* Flex y no rejilla: las cifras son tantas como bloques alcance la cuenta -de
   una a cinco- y con rejilla la ultima fila dejaba casillas vacias (cinco en
   tres columnas = un hueco). Asi las de la ultima fila se estiran y la cubren. */
.tablero__cifras { display: flex; flex-wrap: wrap; gap: 16px; }
.tablero__cifras > .tablero__caja { flex: 1 1 190px; }
/* En movil, de dos en dos: a una por fila eran 650 px de desplazamiento antes
   del primer grafico. */
@media (max-width: 560px) {
  .tablero__cifras > .tablero__caja { flex-basis: 140px; padding: 16px; }
  .tablero__valor { font-size: 24px; }
  .tablero__chip { width: 36px; height: 36px; border-radius: 12px; }
}
.tablero__caja {
  background: var(--surface); border-radius: 20px; padding: 20px;
  box-shadow: 0 1px 2px rgba(5,45,111,.05), 0 14px 34px -18px rgba(5,45,111,.22);
  display: flex; flex-direction: column; min-width: 0;
}
.tablero__alto { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.tablero__chip { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: #fff; }
.tablero__chip svg { width: 21px; height: 21px; }
.tablero__chip--brand { background: var(--brand); }
.tablero__chip--navy  { background: var(--navy); }
.tablero__chip--ok    { background: var(--success); }
.tablero__chip--warn  { background: var(--warning); }
.tablero__chip--dang  { background: var(--danger); }
.tablero__valor { font-size: 29px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05;
                  color: var(--text); font-variant-numeric: tabular-nums; }
.tablero__rotulo { font-size: 12.5px; color: var(--text-muted); font-weight: 600; margin-top: 5px; }
.tablero__pie { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
/* La variacion solo se pinta donde el periodo anterior tiene con que comparar;
   el resto de tarjetas se quedan sin ella a proposito. */
.tablero__var { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.tablero__var--bien { background: var(--success-light); color: var(--success-dark); }
.tablero__var--mal  { background: var(--danger-light);  color: var(--danger-dark); }
.tablero__var--igual { background: var(--line); color: var(--text-muted); }

/* Tabla resumida: ni cabecera ni paginacion, es un top. */
/* Con `.tablero .tablero__tabla thead th` y no solo `.tablero__tabla th`: el CSS
   global tiene cuatro reglas para `thead th` y una, `thead tr:first-child th`,
   pesa 0,1,3 -mas que 0,1,1-. Imponia altura fija, fondo gris y `sticky`, y la
   ultima cabecera salia cortada. Aqui se anula todo lo que esas reglas ponen;
   esta tabla es un resumen, no la tabla de datos del sistema. */
.tablero__tabla { width: 100%; border-collapse: collapse; table-layout: auto; }
.tablero .tablero__tabla thead th {
  position: static; height: auto; background: none; border-top: 0;
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); padding: 0 12px 9px 0; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.tablero .tablero__tabla tbody td {
  padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: middle;
  background: none; height: auto;
}
/* La caja de la tabla desplaza ella sola y la pagina no: a 320 px, una tabla de
   cuatro columnas medía 130 px mas que la pantalla y arrastraba todo el
   tablero de lado. */
.tablero__tablaCaja { overflow-x: auto; margin: 0 -2px; padding: 0 2px; }
@media (max-width: 560px) {
  .tablero .tablero__tabla thead th { white-space: normal; padding-right: 8px; }
  .tablero .tablero__tabla tbody td { padding-right: 8px; font-size: 12.5px; }
}
.tablero .tablero__tabla tbody tr:last-child td { border-bottom: 0; }
.tablero .tablero__tabla thead th:last-child,
.tablero .tablero__tabla tbody td:last-child { text-align: right; padding-right: 0; }
.tablero__quien { font-weight: 600; color: var(--text); }
.tablero__donde { font-size: 11.5px; color: var(--text-muted); }
.tablero__dias { font-weight: 700; font-variant-numeric: tabular-nums; }
.tablero__dias--viejo { color: var(--danger-dark); }

/* ---------- Anillo de reparto ----------
   El grafico de torta del panel: anillo fino con el total dentro y la leyenda
   como lista AL LADO, no debajo, para no cruzar la vista entre dibujo y nombres.

   ESCALA MONOCROMA, elegida frente a la semantica (ambar espera, verde
   aprobado, rojo rechazado). Gana en que encaja con el resto del sistema, que
   es todo azul de marca; pierde en que «Rechazada» deja de leerse como un
   rechazo por su color. Se acepta porque la leyenda va pegada al anillo, con
   nombre y porcentaje, y no hay nada que adivinar.

   Los cinco tonos viven aqui, en un solo sitio, y los consumen tanto el
   segmento como su punto en la leyenda: no pueden desincronizarse. */
:root {
  --anillo-1: #BFDBFE;
  --anillo-2: #7EA9F0;
  --anillo-3: #3B82F6;
  --anillo-4: #1D4ED8;
  --anillo-5: #1E3A8A;
}
/* Flex con salto de linea, no rejilla de dos columnas: el anillo vive tanto en
   un panel a todo lo ancho como en un tercio de fila (~260 px), y en ese hueco
   anillo y leyenda al lado no caben -se salia 120 px por la derecha-. Asi, si
   la leyenda no tiene sus 200 px junto al anillo, baja sola debajo. Lo decide
   el ancho del PANEL, que es lo que importa, y no el de la ventana. */
.anillo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 24px; }
.anillo__svg { display: block; overflow: visible; flex: 0 0 auto; width: min(230px, 100%); height: auto; }
.anillo__seg { transition: transform .18s ease, filter .18s ease; transform-origin: 50% 50%; }
/* Al pasar por encima se apagan todos menos el de debajo del raton: la
   comparacion se hace sola, sin tener que leer la cifra. */
.anillo__svg:hover .anillo__seg { filter: saturate(.45) opacity(.5); }
.anillo__svg .anillo__seg:hover { filter: none; transform: scale(1.03); }
.anillo__total { font-size: 36px; font-weight: 800; letter-spacing: -.03em; fill: var(--text); }
.anillo__sub   { font-size: 12.5px; font-weight: 600; fill: var(--text-muted); }
/* Acotada: sin tope, la lista se estira hasta el borde del panel y el valor
   queda a trescientos pixeles de su nombre, con la vista cruzando el vacio. */
.anillo__lista { display: flex; flex-direction: column; gap: 11px; min-width: 0; flex: 1 1 200px; max-width: 360px; }
.anillo__fila  { display: grid; grid-template-columns: 11px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.anillo__punto { width: 11px; height: 11px; border-radius: 4px; }
.anillo__nombre { font-size: 13px; font-weight: 600; color: var(--text);
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anillo__valor { font-size: 12.5px; font-weight: 700; color: var(--text-soft);
                 font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .anillo__svg { animation: anillo-entra .8s cubic-bezier(.22,.8,.3,1) both; transform-origin: 50% 50%; }
  @keyframes anillo-entra { from { transform: rotate(-22deg) scale(.88); opacity: 0; } }
}
/* ---------- La bitacora de una hora extra ----------
   Un recorrido: una raya vertical y un punto por hito. El punto lleva el color
   del desenlace -verde si se aprobo, rojo si se rechazo-, que es lo primero que
   se busca al recorrer la lista; los hitos sin desenlace van en el azul de la
   marca.

   Se dibuja con pseudoelementos sobre el `<li>` y no con nodos: la raya y el
   punto no son contenido, y un lector de pantalla no tiene nada que anunciar
   ahi. */
.bitacora { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; }
/* La raya. Arranca y termina en el primer y el ultimo punto -no en el borde del
   cuerpo-, con los 7px que hay del borde del `li` al centro del punto. */
.bitacora::before {
  content: ''; position: absolute; left: 6px; top: 7px; bottom: 7px;
  width: 1px; background: var(--border);
}
.bitacora__hito { position: relative; padding: 0 0 20px; }
.bitacora__hito:last-child { padding-bottom: 0; }
.bitacora__hito::before {
  content: ''; position: absolute; left: -22px; top: 2px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--surface);
  /* El aro, con el fondo del cuerpo detras: el punto tiene que tapar la raya,
     no montarse encima de ella. */
  border: 2px solid var(--brand);
  box-shadow: 0 0 0 3px var(--surface);
}
.bitacora__hito--aprueba::before { border-color: var(--success); }
.bitacora__hito--rechaza::before { border-color: var(--danger); }
.bitacora__hito--resuelve::before { border-color: var(--text-faint); }
.bitacora__hito--aplica::before  { border-color: var(--brand); background: var(--brand); }

.bitacora__que {
  margin: 0 0 7px; font-size: 13px; font-weight: 600;
  color: var(--text); letter-spacing: -.01em;
}
.bitacora__dato {
  margin: 0 0 3px; font-size: 12.5px; color: var(--text-muted);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
}
.bitacora__rotulo { color: var(--text-muted); }
.bitacora__rotulo::after { content: ':'; }
.bitacora__antes { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--text-faint); }
.bitacora__flecha { color: var(--text-muted); }
.bitacora__despues { color: var(--text); font-weight: 500; }
/* La observacion es texto de quien pidio el cambio: va entrecomillada y con su
   propia raya, para que no se confunda con lo que anota el sistema. */
.bitacora__nota {
  margin: 8px 0 0; padding: 0 0 0 11px; border-left: 2px solid var(--border);
  font-size: 12.5px; color: var(--text-soft); font-style: italic;
  white-space: pre-line; overflow-wrap: anywhere;
}
.bitacora__firma {
  margin: 9px 0 0; font-size: 11.5px; color: var(--text-muted);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.bitacora__quien { color: var(--text-soft); font-weight: 500; }
/* Separador entre quien y cuando, puesto con CSS: un caracter suelto en el HTML
   lo leeria el lector de pantalla. El punto va LITERAL y no como escape:
   un «\00a0» mal terminado ya se pinto una vez en crudo en cada fila de una
   tabla, y este archivo es UTF-8 declarado. */
.bitacora__firma > span + span::before { content: '·'; margin-right: 8px; color: var(--border); }
.bitacora__rol {
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 1px 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
}
.bitacora__rol::before { content: none !important; }

/* ---------- Detalle de solicitud: titular y recorrido ----------
   El cuerpo era una rejilla de catorce `<input readonly>`: cajas de formulario
   para datos que nadie puede editar, dos de ellas con «No registrado» y las
   fechas en crudo. Ahora arriba va el TITULAR -que permiso, entre que fechas,
   cuantos dias y en que estado, que es lo que se pregunta al abrir-, debajo
   quien lo pide, luego el resto del detalle y al final el RECORRIDO con lo que
   ya paso. Lo que esta vacio no se pinta. */
.ficha-titular {
  display: flex; flex-direction: column; gap: 11px;
  padding: 16px 18px;
  border: 1px solid var(--brand-line); border-radius: var(--radius-md);
  background: var(--brand-tint);
}
.ficha-titular__alto {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.ficha-titular__que {
  font-size: 16px; font-weight: 700; color: var(--navy); letter-spacing: -.01em;
}
.ficha-titular__cuando {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--text-soft);
}
.ficha-titular__cuando .ms { font-size: 16px; color: var(--brand); }
/* `margin-left:auto` y no un hueco fijo: la pildora se va al borde derecho sea
   cual sea el largo del rango. */
.ficha-titular__cuanto {
  margin-left: auto; padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--brand); color: var(--on-brand);
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}

/* La fila de quien pide es `.persona`, la misma celda que usan las tablas. Aqui
   solo se le da su aire dentro del cajon. */
.cajon__cuerpo .detalle-solicitud > .persona,
.cajon__cuerpo .detalle-hora-extra > .persona { padding: 2px 0; }

/* Un dato de solo lectura: rotulo pequeno arriba, valor debajo, y una linea
   fina que separa. Sin caja, que es lo que lo hacia parecer editable. */
.dato {
  display: flex; flex-direction: column; gap: 2px;
  padding: 7px 0; border-bottom: 1px solid var(--line);
  min-width: 0;
}
.dato__rotulo { font-size: 10.5px; color: var(--text-muted); }
.dato__valor {
  font-size: 13px; font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* El recorrido. La linea que une los puntos la pinta el ::after del carril y se
   corta en el ultimo, que si no cuelga hacia abajo sin llegar a nada. */
.recorrido { display: flex; flex-direction: column; }
.recorrido__paso {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px;
  padding: 6px 0;
}
.recorrido__carril { position: relative; display: flex; justify-content: center; }
.recorrido__carril i {
  width: 9px; height: 9px; margin-top: 4px;
  border-radius: var(--radius-circle); background: var(--border-strong);
}
.recorrido__carril::after {
  content: ""; position: absolute; top: 15px; bottom: -8px;
  width: 1px; background: var(--border);
}
.recorrido__paso:last-child .recorrido__carril::after { display: none; }
.recorrido__paso--hecho  .recorrido__carril i { background: var(--success); }
.recorrido__paso--no     .recorrido__carril i { background: var(--danger); }
/* El que falta va hueco: se distingue de un paso dado sin gritar. */
.recorrido__paso--espera .recorrido__carril i {
  background: var(--surface); box-shadow: inset 0 0 0 2px var(--border-strong);
}
.recorrido__que { font-size: 12.5px; color: var(--text); }
.recorrido__paso--espera .recorrido__que { color: var(--text-muted); }
.recorrido__cuando { font-size: 11px; color: var(--text-muted); }
/* Una reversion de estado: en ambar, que no es ni un paso dado ni un rechazo,
   y con el motivo debajo, que es lo que explica por que se deshizo. */
.recorrido__paso--cambio .recorrido__carril i { background: var(--warning); }
.recorrido__motivo {
  margin-top: 3px; padding: 6px 9px; border-radius: 7px;
  background: var(--surface-2); color: var(--text); font-size: 12px; line-height: 1.45;
  white-space: pre-line; overflow-wrap: anywhere;
}

/* El dialogo de cambiar estado (modules/revertir-estado.js). */
/* El margen de abajo es el hueco de la muesca del campo de motivo, que va
   justo debajo y lleva su rotulo medio por encima del borde. */
.revertir { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.revertir__aviso { align-items: flex-start; line-height: 1.45; }
.revertir__aviso strong { font-weight: 650; }
.revertir__opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.revertir__efecto {
  margin: 0; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-muted); font-size: 12.5px; line-height: 1.5;
}

/* Las columnas las decide el SITIO QUE HAY, no el ancho de la ventana.
   `.ficha` general baja a una columna con `@media (max-width: 620px)`, y eso
   mide la VENTANA cuando lo que manda aqui es el ancho del cajon, que es fijo:
   en una ventana de 617 el cajon tiene 535 de holgura -de sobra para dos
   columnas- y se quedaba en una. Con `auto-fit` y un minimo de 210 px, caben
   dos cuando caben y una cuando no, sin preguntarle nada a la ventana. */
/* Vale para los DOS cajones de detalle, no solo para el de solicitudes. */
.cajon__cuerpo .ficha {
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}
.detalle-solicitud__nota,
.detalle-hora-extra__valor {
  margin: 0; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text); font-size: 12.5px;
  line-height: 1.55; white-space: pre-line;
}
/* Pie FIJO del cajon de detalle, no un bloque mas al final de lo que desplaza.
   `detalle-solicitud.js` lo cuelga del panel, igual que el cajon de filtros
   cuelga su `__pie`: asi los botones de decidir se quedan siempre a la vista,
   por larga que sea la ficha. `flex-shrink:0` para que el pie no ceda cuando el
   cuerpo pide sitio, y `background` propio porque queda sobre el contenido que
   pasa por debajo al desplazar. */
.detalle-solicitud__acciones,
.detalle-hora-extra__acciones {
  display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap;
  flex-shrink: 0;
  margin-top: 0; padding: 14px 22px; border-top: 1px solid var(--border);
  background: var(--surface);
}
.detalle-solicitud__acciones .aviso { flex: 1 0 100%; margin: 0 0 4px; }
.detalle-hora-extra__resumen { margin: 0 0 2px; color: var(--text-muted); font-size: 12px; font-weight: 700; }
.detalle-hora-extra__traza { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.detalle-hora-extra__galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr)); gap: 10px; }
.detalle-hora-extra__foto { display: block; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.detalle-hora-extra__foto img { display: block; width: 100%; height: 96px; object-fit: cover; }
.detalle-hora-extra__ubicacion { margin: 0; color: var(--text-muted); font-size: 12.5px; line-height: 1.5; }

/* En la bandeja del supervisor, la identidad de la persona queda agrupada:
   nombre arriba, RUT y sucursal debajo, y el acceso al detalle ocupa toda la
   celda para que sea facil de pulsar sin perseguir una columna estrecha. */
.supervisor-colaborador { display: grid; gap: 5px; width: 100%; min-width: 210px; }
.supervisor-colaborador__nombre {
  display: block; overflow: hidden; color: var(--text); font-size: 13px;
  line-height: 1.3; text-overflow: ellipsis; white-space: nowrap;
}
.supervisor-colaborador__datos { display: grid; gap: 2px; min-width: 0; }
.supervisor-colaborador__dato {
  display: block; overflow: hidden; color: var(--text-muted); font-size: 11px;
  line-height: 1.25; text-overflow: ellipsis; white-space: nowrap;
}
.supervisor-colaborador__boton { width: 100%; justify-content: center; margin-top: 2px; }

/* ---------- Doble cajon lateral para subsecciones ---------- */
/* ---------- El doble cajon, centrado ----------
   Era el unico modal que seguia entrando por la derecha sin ser un filtro: lo
   usa «Crear colaborador». Un formulario que hay que completar antes de seguir
   se comporta como un dialogo y va en medio; el lateral se reserva para los
   FILTROS, donde la posicion es funcional -se quiere seguir viendo la tabla que
   se esta acotando-.

   Las dos hojas pasan a estar EN FLUJO dentro de un fondo que centra, en vez de
   estar ancladas al borde derecho con `position: absolute`. */
.doble-cajon__fondo {
  position: fixed; inset: 0; z-index: 85;
  background: rgba(15,23,42,0);
  transition: background .22s ease;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  gap: var(--cajon-margen, 14px);
  padding: var(--cajon-margen, 14px);
}
.doble-cajon__fondo[hidden] { display: none; }
.doble-cajon__panel[hidden] { display: none; }
/* Igual que el cajon centrado: el velo se oscurece un punto mas, porque aqui el
   modal SI es un alto en el camino. */
.doble-cajon__fondo--visible { background: rgba(15,23,42,.34); pointer-events: auto; }
.doble-cajon__panel {
  position: relative;
  max-height: 100%;
  width: min(var(--doble-cajon-ancho, 440px), calc(100% - 28px));
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
  /* Entra subiendo un poco y creciendo, no deslizandose: el deslizamiento
     cuenta «vengo del borde», que es mentira cuando sale del medio. */
  transform: translateY(14px) scale(.985);
  opacity: 0;
  transition: transform .22s cubic-bezier(.32,.72,0,1), opacity .18s ease;
}
.doble-cajon__panel--visible, .doble-cajon__fondo--visible .doble-cajon__panel--principal { transform: none; opacity: 1; }
/* La hoja de detalle, a la izquierda de la principal: es donde estaba cuando
   las dos se abrian por el lateral, y leerlas de izquierda a derecha -detalle,
   contexto- es el orden que ya conocia quien la usa. */
.doble-cajon__panel--secundario { order: -1; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .doble-cajon__panel { transform: none; transition: opacity .12s ease; }
}
@media (max-width: 940px) {
  /* Dos hojas de 440 mas su hueco piden 894 px: por debajo de eso se apilan, la
     de detalle encima. Se corta en 940 y no en 894 para no dejarlas pegadas a
     los bordes justo antes de apilar. */
  .doble-cajon__fondo { flex-direction: column; }
  .doble-cajon__panel { width: min(440px, 100%); max-height: calc(50% - var(--cajon-margen, 14px)); }
}
@media (max-width: 560px) {
  .doble-cajon__panel { width: 100%; }
}
.doble-cajon__panel--principal { z-index: 1; }
.doble-cajon__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.doble-cajon__cab h2 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.doble-cajon__cab p { margin: 5px 0 0; color: var(--text-muted); font-size: 11px; }
.doble-cajon__cuerpo { padding: 20px 22px 28px; overflow-y: auto; flex: 1 1 auto; display: flex; flex-direction: column; gap: 18px; }
.doble-cajon__cuerpo > :first-child { margin-top: 0; }
/* Aqui vivian tres reglas del diseño anterior, cuando el doble cajon se
   anclaba al borde derecho: un `right: calc(440px + 28px)` en la hoja de
   detalle y dos consultas de medios que lo recolocaban con `left`, `right` y
   anchos en porcentaje.

   Se fueron con el centrado, y la de `right` era ademas un corte real: con
   `position: relative` desplaza SIN mover el hueco, asi que la hoja de detalle
   se iba 468 px a la izquierda y se salia de la pantalla -medido: x = -192 en
   una ventana de 1440-. Ahora la separacion la pone el `gap` del contenedor y
   el reparto lo pone el centrado. */

@media (max-width: 560px) {
  .cajon__fondo { padding: 0; }
  .cajon { width: 100%; border-radius: 0; border-right: none; }
  .confirmacion-lateral__fondo { padding: 0; }
  .confirmacion-lateral { width: 100%; max-height: 100%; border-radius: 0; border-right: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cajon, .cajon__fondo { transition: none; }
}

/* ---------- Aviso flotante ---------- */
.toast-zona { position: fixed; right: 30px; bottom: 30px; display: flex; flex-direction: column; gap: 10px; z-index: 60; }
.toast {
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--brand);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: 13px 17px; font-size: 12.5px; font-weight: 600; max-width: 340px;
}
.toast--ok    { border-left-color: var(--success); }
.toast--error { border-left-color: var(--danger); }

/* ---------- Clases compartidas de componentes dinámicos ---------- */
.ui-sin-scroll { overflow: hidden; }
.aviso__icono { flex: 0 0 17px; }
.aviso-impersonacion { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 18px; border-bottom: 1px solid var(--warning); background: var(--warning-light); color: var(--warning-dark); font-size: 13px; font-weight: 600; }
.aviso-impersonacion__texto { flex: 1 1 auto; }
.aviso-impersonacion__volver { color: var(--warning-dark); border-color: var(--warning); }
.aviso-impersonacion__volver:hover:not(:disabled) { color: var(--warning-dark); border-color: var(--warning-dark); background: var(--surface); }
.exportar-acciones__estado { padding: 6px 11px; font-size: 11.5px; }
.exportar-acciones__tope { align-self: center; color: var(--warning-dark); font-size: 12px; font-weight: 600; }
.tabla-vacia__icono { color: var(--text-faint); }
.tabla-vacia__titulo { margin-top: 10px; color: var(--text); font-weight: 700; }
.tabla-vacia__pista { margin-top: 2px; color: var(--text-muted); }   /* --text-faint no se leía (1,6:1) */
.tabla-vacia__caja { position: sticky; left: 14px; max-width: 100%; }
.paginacion__actual { padding: 0 6px; color: var(--text); font-weight: 700; }
.kpi__texto--cargando { flex: 1; gap: 8px; }
.formulario-solicitud__rut { display: flex; align-items: flex-end; gap: 8px; }
.formulario-solicitud__distintivos { display: flex; flex-wrap: wrap; gap: 8px; }
/* `display: flex` gana al `display: none` que el navegador aplica a [hidden]:
   sin esta linea, la fila vacia de distintivos seguia ocupando su hueco. */
.formulario-solicitud__distintivos[hidden] { display: none; }
/* El campo del RUT no tiene que cruzar los 620 px del cajon: es un RUT. */
.formulario-solicitud__rut .campo { flex: 0 1 260px; margin-bottom: 0; }
/* `.campo` arrastra `margin-bottom: 20px` del maquetado en bloque, y con
   `align-items: flex-end` lo que se alinea es la caja CON su margen: el boton
   quedaba 20 px por debajo del campo. Se le quita el margen al campo y el suyo
   al boton, y entonces se alinean los dos bordes de abajo, que es lo que se ve. */
.formulario-solicitud__validar { margin-top: 0; }

/* Dentro de un paso manda el `gap` del panel, no el margen de cada campo: los
   dos se SUMAN -16 del panel mas 20 del campo dan 36- y el paso se descuadraba
   respecto del resto del cajon. Es el mismo choque que ya se corrigio en los
   cajones de detalle con `.grupo-titulo`. */
.pasos__panel > .campo,
.pasos__panel > .rejilla > .campo:last-child,
.pasos__panel > .formulario-solicitud__rut { margin-bottom: 0; }
/* En una rejilla de UNA sola fila el margen del campo tampoco pinta nada. */
.pasos__panel > .rejilla { row-gap: 0; }
/* `--enviar` ya no lleva margen propio: vive en el pie fijo del cajon, que trae
   el suyo. El margen de 8 px le sobraba ahi y descuadraba la fila de botones. */

/* ---------- Un formulario POR PASOS ----------

   Lo estrena «Nueva Solicitud», que tenia catorce controles seguidos en una
   sola columna: 1349 px de contenido en 699 visibles. Se parte en tres -quien,
   que permiso, quien aprueba- y con el cajon a 620 px cada paso cabe entero,
   sin desplazar nada.

   Va aqui, en global, y no dentro del modulo del formulario: cualquier otro
   alta larga -un colaborador nuevo, una carga masiva- pide exactamente esto. */
/* El formulario por pasos lleva su propio ritmo, el mismo del cuerpo del
   cajon. Sin esto es un `display: block` sin `gap` y la barra de pasos queda
   pegada al primer campo. */
.formulario-pasos { display: flex; flex-direction: column; gap: 18px; }

.pasos { display: flex; gap: 8px; }
.pasos__paso {
  flex: 1; display: flex; flex-direction: column; gap: 6px;
  font-size: 10.5px; color: var(--text-muted);
}
/* La barra fina es el paso: se llena cuando esta hecho o es el de ahora. Un
   numero en un circulo decia lo mismo y ocupaba el triple. */
.pasos__paso i { height: 3px; border-radius: 2px; background: var(--border); transition: background .18s ease; }
.pasos__paso.es-hecho i,
.pasos__paso.es-activo i { background: var(--brand); }
.pasos__paso.es-activo { color: var(--brand); font-weight: 700; }
/* El panel hereda el ritmo del cajon: sus bloques separados como los demas. */
.pasos__panel { display: flex; flex-direction: column; gap: 16px; }
.pasos__panel[hidden] { display: none; }

/* Lo ya resuelto se queda arriba en una linea, con su «Cambiar»: sin esto hay
   que volver atras solo para comprobar de quien era el permiso. */
.resumen-paso {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.resumen-paso:empty { display: none; }
.resumen-paso__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.resumen-paso__texto strong { font-size: 13px; font-weight: 600; color: var(--text); }
.resumen-paso__texto span { font-size: 11px; color: var(--text-muted); }

/* El pie del formulario: «Atras» a la izquierda y el que hace avanzar a la
   derecha, que es el orden en el que se leen. */
.formulario-solicitud__pie .cajon__pie-botones { width: 100%; justify-content: flex-end; }
.formulario-solicitud__pie .btn--ghost:first-child { margin-right: auto; }
.formulario-solicitud__pie .btn[hidden] { display: none; }
.detalle-hora-extra__foto--error { padding: 10px; color: var(--text-muted); font-size: 12px; text-align: center; }
.noscript-aviso { padding: 20px; }
.login-card--narrow { max-width: 440px; }
.login-card__body--center { text-align: center; }
.honeypot { position: absolute; left: -9999px; }
.login-pie--spaced { margin: 0 0 14px; }
.he-config__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.he-config__form > .campo { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); margin: 0; }
.he-config__activo { display: flex; align-items: center; gap: 9px; color: var(--text); font-size: 13px; font-weight: 700; }
.he-config__guardar { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 760px) { .he-config__form { grid-template-columns: 1fr; } }
.he-reportes__controles, .he-reasignar__controles, .horas-extras__rango, .he-indicadores__rango { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin: 4px 0 6px; }
.he-reportes__control, .he-indicadores__control, .he-recientes__control { min-width: 150px; margin: 0; }
.he-reasignar__control { min-width: 220px; margin: 0; }
.horas-extras__control { margin-bottom: 0; }
.turnos-seremi__formulario { display: flex; flex-direction: column; gap: 14px; }
.turnos-seremi__control { min-width: 150px; margin-bottom: 0; }
.turnos-seremi__sucursal { min-width: 190px; margin-bottom: 0; }
.turnos-seremi__tipo { min-width: 150px; margin-bottom: 0; }
.turnos-seremi__nota { margin: 12px 0 0; color: var(--text-muted); font-size: 13px; }
.he-indicadores__bloques { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 18px; }
.he-indicadores__bloque { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.he-indicadores__titulo { margin: 0 0 10px; color: var(--text); font-size: 13px; font-weight: 800; letter-spacing: -.01em; }
/* `minmax(0, 1fr)` y no `1fr`: `1fr` equivale a `minmax(auto, 1fr)`, o sea que
   su minimo es el `min-content` del nombre. Un nombre largo sin espacios
   empujaba la columna `auto` fuera de la tarjeta, que solo tiene 300 px de
   minimo. Con el tope a 0 y la elipsis, el nombre cede. */
.he-indicadores__fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-bottom: 7px; }
.he-indicadores__nombre { margin-bottom: 3px; color: var(--text-soft); font-size: 12px;
                          overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.he-indicadores__barra { height: 6px; overflow: hidden; border-radius: var(--radius-pill); background: var(--graf-carril); }
.he-indicadores__relleno { width: var(--porcentaje); height: 100%; background: var(--graf-azul); }

/* ---------- Graficos del dashboard de HE ---------- */
/* Dona de estados con los azules elegidos por el equipo. Dos de los tres son
   casi el mismo tono (lo marca validate_palette.js), asi que la identidad
   viaja en la leyenda, que rotula cada segmento con su valor y porcentaje. */
.grafico-dona { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.grafico-dona__seg { fill: none; stroke-width: 12; stroke-linecap: round; }
.grafico-dona__seg--aprobada  { stroke: var(--graf-verde); }
.grafico-dona__seg--pendiente { stroke: var(--graf-ambar); }
.grafico-dona__seg--rechazada { stroke: var(--graf-rojo); }
.grafico-dona__total { font-size: 22px; font-weight: 800; fill: var(--text); }
.grafico-dona__sub { font-size: 8.5px; fill: var(--text-muted); }
.grafico-dona__leyenda { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.grafico-dona__item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-soft); }
.grafico-dona__chip { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
.grafico-dona__chip--aprobada  { background: var(--graf-verde); }
.grafico-dona__chip--pendiente { background: var(--graf-ambar); }
.grafico-dona__chip--rechazada { background: var(--graf-rojo); }
.grafico-dona__valor { margin-left: auto; font-weight: 700; color: var(--text); }

/* ---------- Grafico de torta (dashboard HE) ----------
   Reemplaza a la dona en /he-dashboard. Paleta "Vivida" en tokens: para cambiar
   el tono de los estados se tocan SOLO estas tres variables. La separacion fina
   entre porciones es del color de la tarjeta (--surface), asi se ve en claro y
   en oscuro. */
:root {
  --torta-aprob: #12B76A;
  --torta-pend:  #F79009;
  --torta-rech:  #F04438;
}
.grafico-torta { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.grafico-torta__svg { flex: 0 0 auto; }
.grafico-torta__slice { stroke: var(--surface); stroke-width: 2; stroke-linejoin: round; }
.grafico-torta__slice--aprobada  { fill: var(--torta-aprob); }
.grafico-torta__slice--pendiente { fill: var(--torta-pend); }
.grafico-torta__slice--rechazada { fill: var(--torta-rech); }
.grafico-torta__leyenda { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.grafico-torta__item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-soft); }
.grafico-torta__chip { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.grafico-torta__chip--aprobada  { background: var(--torta-aprob); }
.grafico-torta__chip--pendiente { background: var(--torta-pend); }
.grafico-torta__chip--rechazada { background: var(--torta-rech); }
.grafico-torta__valor { margin-left: auto; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- Marcar lo que se señala ----------
   El pastel quita peso pero acerca los tonos entre si. En vez de volver al
   color fuerte, el color fuerte aparece SOLO donde se esta mirando: al pasar el
   raton, lo señalado recupera su tono pleno y lo demas se atenua.

   Se hace con `:has()` porque en la dona el segmento y su fila de leyenda son
   nodos hermanos: sin eso no hay manera de que uno marque al otro. */
.grafico-dona__seg { transition: stroke .15s ease, opacity .15s ease, stroke-width .15s ease; }
.grafico-dona__item { transition: color .15s ease; border-radius: var(--radius-sm); }

/* Con el raton dentro, todo baja un punto y se levanta lo señalado. */
.grafico-dona:hover .grafico-dona__seg { opacity: .35; }
.grafico-dona:hover .grafico-dona__item { color: var(--text-muted); }

/* LA TRAMPA: `.grafico-dona:hover .grafico-dona__seg` pesa mas que
   `.grafico-dona__seg:hover` -tres clases contra dos-, asi que al atenuar
   ganaba y lo señalado se quedaba apagado. Se mide: el segmento bajo el raton
   daba opacidad 0,35. Las reglas que LEVANTAN llevan el mismo prefijo para
   pesar igual y ganar por orden. */
.grafico-dona:hover .grafico-dona__seg:hover { opacity: 1; stroke-width: 15; }
.grafico-dona:hover .grafico-dona__item:hover { color: var(--text); }

/* La leyenda marca su segmento, y el segmento marca su fila de leyenda. */
/* LA SEGUNDA TRAMPA, y esta no avisa: `:has()` NO puede anidar otro `:has()`.
   Estaba escrito `:has(.item:has(.chip--aprobada):hover)` y, al ser invalido el
   selector, el navegador tira la REGLA ENTERA -incluida la otra mitad de la
   lista, la del hover directo-. Se veia como un color que no cambiaba mientras
   la opacidad y el grosor si. Ahora la fila de leyenda lleva su propia clase de
   estado y no hay nada que anidar. */
.grafico-dona:has(.grafico-dona__item--aprobada:hover) .grafico-dona__seg--aprobada,
.grafico-dona:hover .grafico-dona__seg--aprobada:hover { opacity: 1; stroke: var(--success); }
.grafico-dona:has(.grafico-dona__item--pendiente:hover) .grafico-dona__seg--pendiente,
.grafico-dona:hover .grafico-dona__seg--pendiente:hover { opacity: 1; stroke: var(--warning); }
.grafico-dona:has(.grafico-dona__item--rechazada:hover) .grafico-dona__seg--rechazada,
.grafico-dona:hover .grafico-dona__seg--rechazada:hover { opacity: 1; stroke: var(--danger); }

.grafico-dona:has(.grafico-dona__seg--aprobada:hover) .grafico-dona__item--aprobada,
.grafico-dona:has(.grafico-dona__seg--pendiente:hover) .grafico-dona__item--pendiente,
.grafico-dona:has(.grafico-dona__seg--rechazada:hover) .grafico-dona__item--rechazada {
  color: var(--text); font-weight: 600;
}

/* Las barras horizontales: la fila entera es la zona sensible, que una barra de
   seis pixeles de alto es muy poca diana. */
.he-indicadores__relleno { transition: background .15s ease; }
.he-indicadores__fila { border-radius: var(--radius-sm); transition: opacity .15s ease; }
.he-indicadores__bloque:hover .he-indicadores__fila { opacity: .55; }
.he-indicadores__bloque:hover .he-indicadores__fila:hover { opacity: 1; }
.he-indicadores__bloque:hover .he-indicadores__fila:hover .he-indicadores__relleno { background: var(--brand); }
.he-indicadores__bloque:hover .he-indicadores__fila:hover .he-indicadores__nombre { color: var(--text); }

/* Las columnas: la zona sensible es la COLUMNA entera -su franja de arriba
   abajo-, no la barra pintada, que en un valor pequeno son cuatro pixeles. */
.grafico-columnas__barra { transition: background .15s ease; }
.grafico-columnas__col { transition: opacity .15s ease; }
.grafico-columnas:hover .grafico-columnas__col { opacity: .5; }
.grafico-columnas:hover .grafico-columnas__col:hover { opacity: 1; }
.grafico-columnas:hover .grafico-columnas__col:hover .grafico-columnas__barra { background: var(--brand); }
.grafico-columnas:hover .grafico-columnas__col:hover .grafico-columnas__valor,
.grafico-columnas:hover .grafico-columnas__col:hover .grafico-columnas__etiqueta { color: var(--text); }

/* El mapa de calor: se levanta la fila que se mira. */
.mapa-calor__fila { transition: opacity .15s ease; }
.mapa-calor:hover .mapa-calor__fila { opacity: .55; }
.mapa-calor:hover .mapa-calor__fila:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .grafico-dona__seg, .grafico-dona__item, .he-indicadores__fila,
  .he-indicadores__relleno, .grafico-columnas__col, .grafico-columnas__barra,
  .mapa-calor__fila { transition: none; }
}
/* Sin raton -un telefono- no hay «pasar por encima»: nada se atenua. */
@media (hover: none) {
  .grafico-dona:hover .grafico-dona__seg,
  .grafico-dona:hover .grafico-dona__item,
  .he-indicadores__bloque:hover .he-indicadores__fila,
  .grafico-columnas:hover .grafico-columnas__col,
  .mapa-calor:hover .mapa-calor__fila { opacity: 1; }
}

/* Columnas verticales: valor arriba, barra a escala y etiqueta abajo. */
.grafico-columnas { display: flex; align-items: stretch; gap: 8px; height: 200px; padding-top: 6px; }
.grafico-columnas__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.grafico-columnas__zona { flex: 1 1 auto; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.grafico-columnas__valor { font-size: 10.5px; color: var(--text-muted); margin-bottom: 4px; white-space: nowrap; }
.grafico-columnas__barra {
  width: 100%; max-width: 34px; min-height: 2px; height: var(--porcentaje);
  background: var(--graf-azul); border-radius: 3px 3px 0 0;
}
.grafico-columnas__etiqueta {
  margin-top: 6px; font-size: 10px; color: var(--text-muted);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Mapa de calor (colaborador x semana): un solo tono de azul, claro a oscuro. */
.mapa-calor { display: flex; flex-direction: column; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.mapa-calor__fila {
  display: grid; gap: 4px; align-items: center;
  grid-template-columns: minmax(180px, 260px) repeat(var(--cols, 8), minmax(18px, 1fr)) 70px;
}
.mapa-calor__etiqueta { font-size: 11px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapa-calor__col { font-size: 9px; color: var(--text-muted); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Cabeceras verticales cuando las columnas son nombres y no semanas. */
.mapa-calor--cab-rotada .mapa-calor__fila { align-items: end; }
.mapa-calor--cab-rotada .mapa-calor__col {
  writing-mode: vertical-rl; transform: rotate(180deg);
  height: 74px; max-height: 74px; font-size: 10px;
  justify-self: center; text-align: left;
}
.mapa-calor__celda { display: block; height: 18px; border-radius: 3px; }
.mapa-calor__celda--n0 { background: var(--surface-2); }
/* La rampa termina en el pastel de los graficos y no en el azul pleno: los dos
   ultimos escalones eran los unicos de toda la pantalla a plena saturacion y se
   comian el resto. Siguen separandose lo suficiente para leerse como escala. */
.mapa-calor__celda--n1 { background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }
.mapa-calor__celda--n2 { background: color-mix(in srgb, var(--brand) 20%, var(--surface)); }
.mapa-calor__celda--n3 { background: color-mix(in srgb, var(--brand) 29%, var(--surface)); }
.mapa-calor__celda--n4 { background: var(--graf-azul); }
.mapa-calor__total { font-size: 11px; font-weight: 700; text-align: right; }
.mapa-calor__leyenda {
  display: flex; align-items: center; gap: 4px; justify-content: flex-end;
  font-size: 10px; color: var(--text-muted); margin-top: 4px;
}
.mapa-calor__leyenda .mapa-calor__celda { width: 14px; height: 14px; }

/* Reparto del informe de indicadores: 70/30 arriba y bloques a lo ancho. */
/* `.he-indicadores__bloques--informe` y sus `--70`/`--30` se fueron:
   he-dashboard.js usa solo `.he-indicadores__bloques`. */
@media (max-width: 980px) {
  .he-indicadores__bloques--informe > .he-indicadores__bloque--70,
  .he-indicadores__bloques--informe > .he-indicadores__bloque--30 { grid-column: span 10; }
}

/* Nombres largos: etiquetas en diagonal, con sitio reservado debajo.
   El rotulo rotado se sale de su columna a proposito -para eso se gira-, asi
   que el grafico tiene que CONTENERLO: sin esto, en la ultima columna sobresalia
   por la derecha y a 375 px empujaba la pagina 10 px. `overflow:hidden` en el
   eje X recorta ese sobrante sin tocar el grafico, que ya cabe entero. */
.grafico-columnas--rotado { height: 250px; overflow-x: hidden; }
.grafico-columnas--rotado .grafico-columnas__col { overflow: visible; }
.grafico-columnas--rotado .grafico-columnas__etiqueta {
  max-width: none; overflow: visible; align-self: flex-end;
  transform: rotate(-38deg); transform-origin: top right;
  margin-top: 10px; height: 54px;
}
.he-indicadores__numero { font-size: 12.5px; font-weight: 700; }

/* Dashboard BI.
   Esto traia la jerarquia visual del panel legacy: el fondo gris, las tarjetas
   flotantes con su radio de 16 y su sombra, y una docena de hexes propios que
   eran casi -pero no- los tokens de la casa. En una intranet donde todo lo
   demas es UNA hoja blanca con secciones separadas por una linea, esta pagina
   se leia como si fuera de otro sitio.
   Queda solo lo que es de verdad del BI: la rejilla de cuatro filtros, las
   cabeceras de seccion, la tarjeta alta sin icono y los repartos de los
   graficos. El color y la forma los pone el sistema, como en el resto. */
.he-bi__form { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px 16px; align-items: end; }
.he-bi__form .campo { min-width: 0; margin: 0; }
.he-bi__form input, .he-bi__form select { width: 100%; min-width: 0; }
.he-bi__form > button { grid-column: 4; justify-self: stretch; }
.he-bi__comparar { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 12px; }
.he-bi__comparar strong { font-weight: 500; }
.he-bi__comparar .campo__ayuda { font-size: 11px; margin: 0; }
.he-bi__seccion { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 28px 0 12px; }
.he-bi__seccion::after { content: ''; height: 1px; background: var(--border); flex: 1; }
.he-bi__seccion h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .045em; margin: 0; font-weight: 800; }
.he-bi__seccion span { color: var(--text-muted); font-size: 11px; }
.he-bi > .kpis { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
/* La tarjeta del BI es alta y sin icono: el numero manda y debajo va la
   comparacion con el periodo anterior, que son dos lineas. El color y el
   borde los hereda de .kpi. */
.he-bi .kpi { padding: 20px; min-height: 152px; align-items: start; }
.he-bi .kpi__icono { display: none; }
.he-bi .kpi__label { font-size: 11px; font-weight: 700; text-transform: uppercase; margin-bottom: 10px; }
.he-bi .kpi__value { font-size: 27px; line-height: 1.2; }
.he-bi .kpi__nota { margin-top: 10px; font-size: 11px; line-height: 1.7; white-space: pre-line; }
.he-bi .kpi.he-bi__alerta { border-color: var(--danger-line); border-left: 3px solid var(--danger); }
.he-bi__tasa { appearance: none; border: 0; width: 100%; height: 5px; display: block; margin-top: 10px; }
.he-bi__tasa::-webkit-progress-bar { background: var(--surface-2); border-radius: var(--radius-icon); }
.he-bi__tasa::-webkit-progress-value { background: var(--success); border-radius: var(--radius-icon); }
.he-bi__espera, .he-bi__evolucion, .he-bi__repartos { display: grid; gap: 18px; }
.he-bi__espera { grid-template-columns: minmax(0,5fr) minmax(0,7fr); }
.he-bi__evolucion { grid-template-columns: minmax(0,8fr) minmax(0,4fr); }
.he-bi__repartos { grid-template-columns: repeat(2,minmax(0,1fr)); }
.he-bi .he-indicadores__bloque { min-width: 0; padding: 20px; }
.he-bi .he-indicadores__titulo { font-size: 13px; margin: 0 0 6px; }
.he-bi__ayuda { margin: 0 0 22px; color: var(--text-muted); font-size: 12px; }
.he-bi__repartos > section, .he-bi__evolucion > section { min-height: 315px; }
.he-bi .grafico-columnas { height: 255px; border-bottom: 1px solid var(--border); background: repeating-linear-gradient(to top,transparent 0,transparent calc(25% - 1px),var(--border) calc(25% - 1px),var(--border) 25%); }
.he-bi .grafico-columnas__barra { background: var(--graf-azul); border-radius: 2px 2px 0 0; }
.he-bi .grafico-columnas__etiqueta { font-size: 10px; }
.he-bi .he-indicadores__fila { margin-bottom: 14px; }
.he-bi .he-indicadores__relleno { background: var(--graf-azul); }
.he-bi__antiguas table { font-size: 11px; }
.he-bi__antiguas th { font-size: 9px; padding: 10px 8px; }
.he-bi__antiguas td { padding: 11px 8px; }
.he-bi__antiguas td:nth-child(2) { min-width: 150px; }
.he-bi__antiguas .badge { font-size: 9px; white-space: nowrap; }
.he-bi__tendencia svg { width: 100%; display: block; }
.he-bi__rejilla { stroke: var(--border); stroke-width: 1; }
.he-bi__eje { fill: var(--text-muted); font-size: 10px; }
.he-bi__linea { stroke-width: 2.5; }
.he-bi__linea--actual { stroke: var(--brand); }
.he-bi__linea--anterior { stroke: var(--text-faint); stroke-dasharray: 5 4; }
.he-bi__punto--actual { fill: var(--brand); }
.he-bi__punto--anterior { fill: var(--text-muted); }
.he-bi__leyenda { display: flex; flex-wrap: wrap; gap: 18px; font-size: 11px; color: var(--text-muted); }
.he-bi__leyenda span::before { content: ''; display: inline-block; width: 16px; border-top: 2px solid var(--brand); margin-right: 5px; vertical-align: middle; }
.he-bi__leyenda .he-bi__leyenda--anterior::before { border-color: var(--text-faint); border-top-style: dashed; }
.he-bi__adicionales { margin-top: 22px; }
.he-bi__adicionales summary { cursor: pointer; color: var(--brand); padding: 12px 0; font-size: 13px; }
.he-bi__error { padding: 16px; background: var(--danger-light); border-radius: var(--radius-md); color: var(--danger-dark); }
@media(max-width:1100px) {
  .he-bi > .kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .he-bi__form { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .he-bi__form > button { grid-column: 2; }
  .he-bi__espera { grid-template-columns: minmax(0,1fr); }
  .he-bi__evolucion { grid-template-columns: minmax(0,2fr) minmax(0,1fr); }
  .he-bi .grafico-dona { flex-wrap: wrap; }
}
@media(max-width:650px) {
  .he-bi__form { grid-template-columns: minmax(0,1fr); }
  .he-bi__form > button { grid-column: 1; }
  .he-bi__evolucion, .he-bi__repartos { grid-template-columns: minmax(0,1fr); }
  .he-bi .kpi { padding: 14px; min-height: 160px; }
  .he-bi .kpi__value { font-size: 23px; }
  .he-bi .kpi__label { font-size: 10px; }
  .he-bi .panel__body, .he-bi .he-indicadores__bloque { padding: 16px; }
}
/* ---------- Pestanas de panel ---------- */
/* Dicen QUE tabla se esta mirando, y por eso van en la cabecera y pesan mas que
   el control segmentado de dentro, que solo corta esa misma tabla por estado.
   Cuando los dos eran pastillas, competian. */
.pestanas { display: flex; align-items: stretch; gap: 4px; margin-bottom: -1px; }
.pestana {
  display: flex; align-items: center; gap: 9px;
  padding: 18px 4px 17px; margin-right: 20px;
  border: 0; border-bottom: 2px solid transparent; background: none;
  color: var(--text-muted); font-family: inherit; font-size: 14px; font-weight: 700;
  letter-spacing: -.01em; cursor: pointer; white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.pestana:hover { color: var(--brand); }
.pestana[aria-selected="true"] { color: var(--text); border-bottom-color: var(--brand); font-weight: 800; }
.pestana:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pestana__cuenta {
  display: inline-block; min-width: 22px; padding: 2px 7px;
  border-radius: var(--radius-pill); background: var(--line); color: var(--text-muted);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.pestana[aria-selected="true"] .pestana__cuenta { background: var(--brand-light); color: var(--brand); }
/* Las pestanas traen su propio alto: la cabecera solo pone los margenes laterales. */
.panel__head--pestanas { padding: 0 22px; }
/* `flex-wrap: wrap` y `min-width: 0` como en `.panel__acciones`: sin ellos el
   grupo toma su ancho de `max-content` -«Registrar horas extras» y «Cargar
   Excel» son 303 px- y se sale por la derecha aunque la cabecera SI envuelva.
   Lo que tiene que envolver es el grupo, no solo su padre; medido a 375 px,
   eran 3 px de desborde en toda la pagina. */
.panel__head-accion {
  display: flex; align-items: center; gap: 10px; margin-left: auto;
  flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; min-width: 0;
}

.he-rrhh__control { margin-bottom: 0; }
.he-rrhh__acciones { display: flex; gap: 6px; }
.he-rrhh { background: var(--bg); }
.he-rrhh > .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.he-rrhh > .kpis .kpi { position: relative; min-height: 158px; padding: 22px; align-items: flex-start; border: 0; border-radius: 10px; }
.he-rrhh .kpi__icono { position: absolute; top: 20px; right: 18px; width: 34px; height: 34px; }
.he-rrhh .kpi__texto { gap: 12px; }
.he-rrhh .kpi__label { padding-right: 40px; text-transform: uppercase; font-size: 12px; }
.he-rrhh .kpi__value { font-size: 30px; }
.he-rrhh .kpi--pendiente .kpi__value { color: var(--brand); }
.he-rrhh .kpi--aprobada .kpi__value { color: var(--success-dark); }
.he-rrhh .kpi--rechazada .kpi__value { color: var(--danger-dark); }
.he-rrhh .kpi__nota { font-size: 12px; color: var(--text-muted); }
.he-rrhh__solicitudes { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: visible; }
.he-rrhh__solicitudes > .panel__head { padding: 18px 22px; margin: 0; }
.he-rrhh__solicitudes > .panel__body { padding: 20px 22px; gap: 16px; }
.he-rrhh__herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.he-rrhh__filtros { flex-wrap: wrap; margin: 0; gap: 14px; }
.he-rrhh__filtros .filtros,
.he-rrhh__barra .filtros { display: flex; padding: 4px; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; }
.he-rrhh__filtros .filtro,
.he-rrhh__barra .filtro { border: 0; border-radius: 4px; background: transparent; }
.he-rrhh__filtros .filtro[aria-pressed="true"],
.he-rrhh__barra .filtro[aria-pressed="true"] { background: var(--brand-light); color: var(--brand); }
.he-rrhh__rango { font-size: 12px; color: var(--text-muted); margin: 0; }
.he-rrhh__vista { display: flex; flex-direction: column; gap: 16px; }
.he-rrhh__solicitudes .pestanas { flex-wrap: wrap; min-width: 0; }
.he-rrhh__vista > .rango-fechas { margin: 0; }
/* Cada pestana trae su propia barra: el rango o los chips a la izquierda y el
   buscador empujado al borde derecho. */
.he-rrhh__barra { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.he-rrhh__barra > .tabla-barra--search { margin-left: auto; }
.he-rrhh__herramientas > .panel__acciones { margin-left: auto; }
/* La barra de estados y el buscador entran en la fila de herramientas y van
   JUNTOS a la izquierda: lo que se empuja al borde derecho es el grupo de
   acciones, no el buscador. `.filtros-toolbar` trae `width: 100%` y margen
   inferior pensados para cuando iba sola en su renglon; aqui la tirarian a una
   linea propia otra vez. */
.he-rrhh__herramientas > .he-rrhh__filtros {
  width: auto; flex: 0 1 auto; margin: 0; align-items: center; gap: 10px;
  /* Primero de la fila y con el hueco a su derecha: lo que acota -las pestañas
     de estado y el buscador- queda a la izquierda y TODO lo demas se va junto
     al borde derecho. El `margin-left: auto` del grupo de acciones ya no hace
     falta y sobra: con los dos, el hueco se repartia y Exportar se descolgaba
     a un renglon para el solo. */
  order: -1; margin-right: auto;
  /* Y que CEDA: con `0 1 auto` el bloque se plantaba en sus 566 px -las
     pestañas de estado mas un buscador de ancho fijo- y dejaba 116 para un
     grupo de acciones que pide 147, asi que Exportar seguia cayendose solo a la
     segunda linea. Lo que sobra se lo queda el hueco; lo que falta lo pone el
     buscador, que es lo unico elastico de la fila. */
  flex: 1 1 auto; min-width: 0;
}
.he-rrhh__herramientas > .he-rrhh__filtros .tabla-barra--search { margin-left: 0; flex: 1 1 170px; min-width: 0; }
.he-rrhh__herramientas > .he-rrhh__filtros .tabla-buscador,
.he-rrhh__herramientas > .he-rrhh__filtros .tabla-barra--search input { width: 100%; min-width: 0; }
/* Columnas, Filtros y Exportar: un solo grupo, en una caja, para que al
   estrecharse bajen JUNTOS en vez de de a uno. */
.he-rrhh__acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.he-rrhh__acciones > .panel__acciones { margin-left: 0; }
/* La lista de columnas se abre hacia la IZQUIERDA. Nace con `left: 0` de cuando
   el boton estaba al principio de la fila; ahora esta al final, y 240 px hacia
   la derecha se salian 77 de la ventana a 1024 px -medido y visto: las casillas
   quedaban cortadas contra el borde-. */
.he-rrhh__acciones .he-rrhh__columnas-lista { left: auto; right: 0; }
/* En esta fila la mitad de «mirar» esta vacia -el buscador y los filtros viven
   fuera, y la barra de columnas que le queda dentro va oculta-, pero seguia
   reclamando sus 150 px de minimo. Entre eso y Exportar pedia 260 px que no
   sobraban, asi que el grupo entero se caia a un renglon para el solo. Sin
   contenido, sin sitio. */
.he-rrhh__herramientas > .panel__acciones > .barra-acciones__mirar { flex: 0 0 auto; min-width: 0; }
/* Solo la esquina: el fondo y el color de la cabecera los pone el bloque de
   tokens del final (--th-fondo / --th-texto). Si se repiten aca ganan por
   especificidad -clase sobre elemento- y esta tabla se queda con el gris casi
   blanco de antes mientras el resto ya cambio. */
.he-rrhh__tabla thead th { border-radius: 0; }
.he-rrhh__tabla .tabla-scroll { margin: 0; }
.he-rrhh__columnas { position: relative; }
.he-rrhh__columnas summary { list-style: none; cursor: pointer; }
.he-rrhh__columnas summary::-webkit-details-marker { display: none; }
.he-rrhh__columnas-lista { position: absolute; top: calc(100% + 8px); left: 0; z-index: 12; width: 240px; max-height: 340px; overflow: auto; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; box-shadow: var(--shadow-md); }
.he-rrhh__columnas-lista label { display: flex; align-items: center; gap: 9px; padding: 6px; font-size: 12px; }
.he-rrhh__filtros-lateral .rango-fechas { display: grid; grid-template-columns: 1fr; width: 100%; }
.he-rrhh__filtros-lateral .he-rrhh__control { width: 100%; }
.he-rrhh__filtros-lateral .cajon__cuerpo { padding-bottom: 20px; }
.he-filtros-avanzados__fechas h3 { font-size: 14px; margin: 0 0 14px; }
.he-filtros-avanzados__atajos { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.he-filtros-avanzados__atajos .btn { font-size: 11px; }
.he-rrhh__filtros-lateral .rango-fechas { grid-template-columns: repeat(2,minmax(0,1fr)); }
.he-filtros-avanzados__grupo { border-top: 1px solid var(--border); margin-top: 22px; padding-top: 18px; }
.he-filtros-avanzados__grupo > summary { font-size: 14px; font-weight: 700; cursor: pointer; margin-bottom: 18px; }
.he-filtros-avanzados__rejilla { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 14px; }
.he-filtros-avanzados__rejilla .campo { margin: 0; min-width: 0; }
.he-filtros-avanzados__rejilla input, .he-filtros-avanzados__rejilla select { width: 100%; min-width: 0; }
.he-filtros-avanzados__pie .btn { flex: 1; }
.he-filtros-avanzados__aviso { font-size: 12px; color: var(--text-muted); padding-top: 16px; }
@media(max-width:480px) {
  .he-filtros-avanzados__rejilla, .he-rrhh__filtros-lateral .rango-fechas { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 600px) {
  .he-rrhh > .kpis { gap: 8px; }
  .he-rrhh > .kpis .kpi { min-height: 136px; padding: 12px; }
  .he-rrhh .kpi__icono { display: none; }
  .he-rrhh .kpi__label { padding: 0; font-size: 9px; }
  .he-rrhh .kpi__value { font-size: 23px; }
  .he-rrhh .kpi__nota { font-size: 10px; }
  .he-rrhh__solicitudes > .panel__head, .he-rrhh__solicitudes > .panel__body { padding: 14px; }
  .he-rrhh__solicitudes > .panel__head--pestanas { padding: 0 14px; }
  .pestana { font-size: 13px; margin-right: 12px; padding: 14px 2px 13px; }
  .he-rrhh__filtros .filtros { width: 100%; }
  .he-rrhh__filtros .filtro { flex: 1; padding: 7px; font-size: 10px; }
  .he-rrhh__herramientas > .panel__acciones { margin-left: 0; }
}
/* Una sola fila: el campo, el boton y la explicacion. `align-items: center`
   y no `flex-end` porque lo que se alinea con `flex-end` es la caja CON su
   margen, y `.campo` arrastra `margin-bottom: 20px` del maquetado en bloque:
   el boton caia 20 px por debajo del campo. Es el mismo choque que ya se
   corrigio en la fila del RUT. */
.colacion__config-fila { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
/* El campo tiene que caber su propia ETIQUETA. «Minutos permitidos» mide
   114 px y la caja se encogia a 64 en movil, asi que el rotulo flotante salia
   recortado como «Minu…». El `max-width` del input sobra: manda la caja. */
/* `.colacion__config-fila > .campo` y no `.colacion__config-campo`: la regla
   general `.campo { margin-bottom: 20px }` tiene la MISMA especificidad (0,1,0)
   y vive mas abajo en el fichero, asi que ganaba por posicion y el boton
   seguia 10 px por debajo del campo. Con dos clases (0,2,0) manda esta sin
   depender de donde este escrita. */
.colacion__config-fila > .campo { margin-bottom: 0; }
.colacion__config-campo { flex: 0 1 auto; min-width: 170px; }
.colacion__minutos { width: 100%; }
.colacion__nota { flex: 1 1 260px; margin: 0; color: var(--text-muted); font-size: 13px; }
/* El interruptor de «cada jefatura ve solo a su equipo», debajo del limite:
   son las dos unicas cosas que se configuran del modulo. */
/* `flex: none`. Llevaba `1 1 320px` de cuando vivia en una FILA junto al
   limite; dentro del cajon el cuerpo es una columna, asi que ese `1 1 320px`
   se leia como «crece hasta 320 px de ALTO» y el recuadro de dos lineas se
   estiraba a 320, dejando el cajon en 640 px por dos ajustes. */
.colacion__jefatura {
  display: flex; align-items: flex-start; gap: 10px;
  flex: none; min-width: 0;
  padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--surface-2); cursor: pointer;
}
.colacion__jefatura:hover { border-color: var(--brand-line); background: var(--brand-tint); }
.colacion__jefatura input { margin-top: 1px; }
.colacion__jefatura strong { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); }
.colacion__jefatura small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }
/* El aviso de que la lista esta acotada. */
.colacion__alcance {
  margin: 0 0 12px; padding: 8px 12px;
  border: 1px solid var(--brand-line); border-radius: var(--radius-sm);
  background: var(--brand-tint); color: var(--brand-dark);
  font-size: 12px; font-weight: 600;
}
.colacion__alcance[hidden] { display: none; }
/* ---------- En colacion ahora: una tarjeta por persona ----------

   Era una lista de avisos: un renglon gris por cabeza con «salio a las 12:14:00
   · lleva 415 min». Con cuatro personas fuera no habia forma de ver de un
   vistazo quien iba bien y quien llevaba media hora, que es LO UNICO que se
   mira en esta pantalla.

   El color es el estado y no adorno: verde mientras queda tiempo, ambar en el
   ultimo cuarto -avisa antes de que pase, que es cuando sirve- y rojo pasado el
   limite. El numero grande va en `tabular-nums` porque cuenta hacia arriba cada
   segundo: sin ancho fijo por cifra, la tarjeta entera tiembla al cambiar. */
.colacion-ahora {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(272px, 100%), 1fr));
  align-content: start;
  gap: 14px;
}
.colacion-ficha {
  display: flex; flex-direction: column; gap: 11px;
  padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface);
}
.colacion-ficha__alto { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* El contador. `font-variant-numeric` ademas de `tabular-nums` por si la fuente
   no trae la tabla: el salto de 9 a 10 es de un pixel y se nota. */
.colacion-ficha__reloj {
  font-size: 27px; font-weight: 700; line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.colacion-ficha__unidad { font-size: 12px; font-weight: 600; margin-left: 3px; }
.colacion-ficha__estado {
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.colacion-ficha__pie {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 11.5px; color: var(--text-muted);
}
.colacion-ficha__pie .ms { font-size: 14px; vertical-align: -3px; margin-right: 3px; }
/* La barra dice lo mismo que el numero, pero de un vistazo y sin leer. */
.colacion-ficha__barra {
  height: 5px; border-radius: var(--radius-pill);
  background: var(--border); overflow: hidden;
}
.colacion-ficha__barra i { display: block; height: 100%; border-radius: inherit; transition: width .4s linear, background .3s; }

.colacion-ficha--bien  { border-color: var(--success-line); background: var(--success-light); }
.colacion-ficha--bien  .colacion-ficha__reloj,
.colacion-ficha--bien  .colacion-ficha__estado { color: var(--success-dark); }
.colacion-ficha--bien  .colacion-ficha__estado { background: var(--surface); border: 1px solid var(--success-line); }
.colacion-ficha--bien  .colacion-ficha__barra i { background: var(--success); }

.colacion-ficha--justo { border-color: var(--warning-line); background: var(--warning-light); }
.colacion-ficha--justo .colacion-ficha__reloj,
.colacion-ficha--justo .colacion-ficha__estado { color: var(--warning-dark); }
.colacion-ficha--justo .colacion-ficha__estado { background: var(--surface); border: 1px solid var(--warning-line); }
.colacion-ficha--justo .colacion-ficha__barra i { background: var(--warning); }

.colacion-ficha--mal   { border-color: var(--danger-line); background: var(--danger-light); }
.colacion-ficha--mal   .colacion-ficha__reloj,
.colacion-ficha--mal   .colacion-ficha__estado { color: var(--danger-dark); }
.colacion-ficha--mal   .colacion-ficha__estado { background: var(--surface); border: 1px solid var(--danger-line); }
.colacion-ficha--mal   .colacion-ficha__barra i { background: var(--danger); }

/* Sobre el fondo de color, la inicial en blanco se lee mejor que en su azul. */
.colacion-ficha .persona__ini { background: var(--surface); }
.colacion-ficha--bien  .persona__ini { color: var(--success-dark); }
.colacion-ficha--justo .persona__ini { color: var(--warning-dark); }
.colacion-ficha--mal   .persona__ini { color: var(--danger-dark); }

@media (prefers-reduced-motion: reduce) {
  .colacion-ficha__barra i { transition: none; }
}

/* ---------- La misma lista, en compacto ----------

   Con cien personas fuera, cien tarjetas de 120 px son diez pantallas de
   desplazamiento para responder a una sola pregunta: quien se paso. La vista
   compacta deja la inicial, el nombre, el contador y el color -que es lo que se
   mira- y esconde el RUT, la hora de salida, el limite y la barra, que en la
   tarjeta sirven y repetidos cien veces son ruido.

   Es el MISMO DOM: solo cambia una clase en el contenedor. Dos plantillas
   distintas se separarian a la primera de cambio y la misma pantalla se veria
   de dos maneras segun la vista elegida. */
.colacion-ahora--compacta {
  grid-template-columns: repeat(auto-fill, minmax(min(226px, 100%), 1fr));
  gap: 8px;
}
.colacion-ahora--compacta .colacion-ficha {
  flex-direction: row; align-items: center; gap: 10px;
  padding: 7px 11px 7px 9px;
  border-radius: var(--radius-sm);
}
/* El bloque de arriba deja de ser un bloque: es la mitad izquierda de la fila. */
.colacion-ahora--compacta .colacion-ficha__alto { flex: 1 1 auto; min-width: 0; }
.colacion-ahora--compacta .persona { gap: 8px; min-width: 0; }
.colacion-ahora--compacta .persona__ini { width: 26px; height: 26px; flex-basis: 26px; font-size: 10px; }
/* El `div` sin clase que envuelve al nombre y al RUT. Es un hijo flexible mas,
   y por omision un hijo flexible NO encoge por debajo de su contenido: sin esto
   el «text-overflow: ellipsis` de la linea de abajo no llegaba a actuar nunca y
   «Constanza Pizarro Rojas» se salia doce pixeles de su tarjeta, por encima del
   distintivo de la derecha. Medido a 1366 y a 375. */
.colacion-ahora--compacta .persona > div { min-width: 0; }
.colacion-ahora--compacta .persona__nom { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.colacion-ahora--compacta .persona__sub { overflow: hidden; text-overflow: ellipsis; }
/* Fuera lo que no se lee cien veces seguidas. */
.colacion-ahora--compacta .persona__sub,
.colacion-ahora--compacta .colacion-ficha__estado,
.colacion-ahora--compacta .colacion-ficha__barra,
.colacion-ahora--compacta .colacion-ficha__pie { display: none; }
/* El contador se queda, mas pequeno y a la derecha: es la cifra que se busca. */
.colacion-ahora--compacta .colacion-ficha__reloj {
  flex: 0 0 auto; font-size: 15px; letter-spacing: -.01em;
}
.colacion-ahora--compacta .colacion-ficha__unidad { font-size: 9.5px; margin-left: 2px; }

/* Sin distintivo ni barra, el color es lo unico que dice el estado: se le sube
   el tono al borde izquierdo para que se lea tambien en una lista larga y de
   reojo, y para quien no distingue el verde del rojo. */
.colacion-ahora--compacta .colacion-ficha { border-left-width: 3px; }

/* ---------- Los tres recuentos, que ademas filtran ----------

   Con cien personas fuera, la pregunta no es «quienes estan» sino «quien se
   paso». El numero grande responde eso sin leer una sola fila, y de paso acota
   la lista: es un resumen y un filtro a la vez, que es lo que hace que no haya
   que anadir una barra de filtros encima de otra. */
.colacion-estados { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.colacion-estados[hidden] { display: none; }
.colacion-estados__chip {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 7px 13px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text-muted);
  font: inherit; font-size: 11.5px; font-weight: 600;
  transition: border-color .14s, background .14s, color .14s;
}
.colacion-estados__chip b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.colacion-estados__chip:hover:not(:disabled) { border-color: var(--border-strong); }
/* Apagado y no escondido: que un estado este a cero tambien es informacion. */
.colacion-estados__chip:disabled { opacity: .5; cursor: default; }
.colacion-estados__chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.colacion-estados__chip.es-mal b   { color: var(--danger-dark); }
.colacion-estados__chip.es-justo b { color: var(--warning-dark); }
.colacion-estados__chip.es-bien b  { color: var(--success-dark); }

/* Elegido: se tine entero, para que se vea cual acota la lista de abajo. */
.colacion-estados__chip.es-elegido.es-mal   { background: var(--danger-light);  border-color: var(--danger-line);  color: var(--danger-dark); }
.colacion-estados__chip.es-elegido.es-justo { background: var(--warning-light); border-color: var(--warning-line); color: var(--warning-dark); }
.colacion-estados__chip.es-elegido.es-bien  { background: var(--success-light); border-color: var(--success-line); color: var(--success-dark); }

/* El pie de paginacion, el mismo de las tablas, separado de las tarjetas. */
.colacion-ahora + div > .paginacion { margin-top: 14px; }

/* El selector de vista, en la cabecera del panel. */
.vista-conmutador { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--surface-2); }
.vista-conmutador .btn { height: 26px; padding: 0 10px; font-size: 11.5px; border-radius: var(--radius-sm); }
.vista-conmutador .btn[aria-pressed="true"] { background: var(--surface); color: var(--brand); border-color: var(--border); box-shadow: var(--e1); }
.vista-conmutador .btn[aria-pressed="false"] { background: transparent; border-color: transparent; color: var(--text-muted); }
.vista-conmutador .btn .ms { font-size: 15px; }

/* El grupo de periodos lleva dentro el selector de rango, que es su cuarto
   boton. Se le quita el marco propio para que no parezca una pieza pegada al
   lado del grupo, pero se le deja su `position: relative`: el calendario cuelga
   de el. */
/* Cuatro botones piden 320 px y en un movil la cabecera no los tiene: a 375 px
   se salian y arrastraban la pagina de lado. El grupo parte en dos filas, que
   es feo pero se ve entero. `flex-wrap` va en el GRUPO; ponerlo en el padre no
   hace nada. */
.vista-conmutador--periodo { flex-wrap: wrap; }
.vista-conmutador--periodo .rango-ui { display: flex; }
.vista-conmutador--periodo .rango-ui__trigger {
  height: 26px; padding: 0 10px;
  border: 1px solid transparent; background: transparent;
  border-radius: var(--radius-sm);
  font-size: 11.5px; color: var(--text-muted);
}
.vista-conmutador--periodo .rango-ui__trigger:hover { color: var(--text); }
/* Abierto, se marca igual que un boton elegido del grupo. */
.vista-conmutador--periodo .rango-ui__trigger[aria-expanded="true"] {
  background: var(--surface); color: var(--brand);
  border-color: var(--border); box-shadow: var(--e1);
}
.vista-conmutador--periodo .rango-ui__icono { font-size: 15px; }

/* El cajon de ajustes: dos controles, no un formulario. El ritmo de 18 px del
   cuerpo separa demasiado un campo de SU PROPIA ayuda -son la misma cosa- y
   deja el cajon el doble de alto de lo que pide su contenido. */
.cajon__cuerpo.es-ajustes { gap: 14px; }
.cajon__cuerpo.es-ajustes > .campo { margin-bottom: 0; }
.cajon__cuerpo.es-ajustes > .campo + .campo__ayuda { margin: -10px 0 0; }

/* Ninguna celda de esta tabla se parte en dos lineas. Empezo por el RUT, el PIN
   y la fecha -datos de largo conocido y corto, que el navegador estrechaba hasta
   partir «13.641.969-2» por la mitad, que se lee como dos datos distintos-, pero
   hace falta en TODAS, y por una razon de geometria:

   una fila de una linea mide 66 px y una de dos, 85,5. Con diez filas por pagina
   y un numero distinto de nombres partidos en cada una, cada pagina medía algo
   distinto -738, 758, 777- y el pie de paginacion no paraba quieto. Con las
   celdas en una sola linea todas las filas miden igual, toda pagina llena mide
   lo mismo y el hueco reservado es exacto.

   El precio es que la tabla puede pasarse de ancho con un nombre largo. Se paga:
   `.tabla-scroll` ya lleva `overflow-x: auto`, asi que se desplaza de lado, y
   eso es mejor que cortar el apellido o que la pagina de tumbos. */
.pagina-colacion td { white-space: nowrap; }
/* El motivo de que no haya duracion no es una duracion: se dice en gris para
   que no se lea como una medida. */
.colacion__sin-dato { color: var(--text-muted); font-style: italic; }

/* ---------- Relojes de marcaje: el estado al frente ----------

   Eran una fila por reloj con todo a la vez -el nombre, dos distintivos sin
   relacion entre si, la fecha en ISO crudo, la IP suelta, y cuatro botones y un
   campo de texto siempre a la vista-, y despues una tarjeta con ficha de datos
   que gastaba una fila entera por cada IP para decir casi siempre lo mismo.

   Ahora manda el LOMO: un icono y un punto tenidos segun el estado, pegados al
   borde izquierdo. El estado se ve antes de leer, que es lo que se pregunta de
   un reloj; el resto se lee como una frase -«Acepta desde cualquier IP · visto
   en 192.168.10.22»- y no como una tabla de dos columnas. */
/* `align-content: start` no es adorno: una rejilla con el alto acotado reparte
   sus filas por el hueco disponible -`stretch` es el valor de fabrica-, asi que
   dentro del cajon las quince filas se repartian 172 px a cuatro pixeles cada
   una y las tarjetas quedaban como rayas de colores con el contenido saliendose
   por arriba. Con `start` cada fila mide lo que pide su tarjeta y la caja se
   desplaza, que es lo que se buscaba. */
.colacion__relojes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
  align-content: start;
  gap: 12px;
}
.reloj {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); overflow: hidden;
}

/* El lomo. `align-items: stretch` por defecto, asi que crece con la tarjeta y
   el color acompana a todo el bloque, no solo a una esquina. */
.reloj__lomo {
  width: 46px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: var(--surface-2); border-right: 1px solid var(--border);
  color: var(--text-muted);
}
.reloj__lomo .ms { font-size: 20px; }
.reloj__lomo i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }

/* Tres estados y no dos: en linea, callado y sin aprobar. El callado se queda
   en gris a proposito -que un reloj lleve un rato sin hablar es informacion, no
   una alarma-, y el rojo se reserva para los excesos, que ese si hay que
   mirarlo. */
.reloj--viva .reloj__lomo {
  background: var(--success-light); border-right-color: var(--success-line);
  color: var(--success-dark);
}
.reloj--viva .reloj__lomo i { background: var(--success); }
.reloj--sin-aprobar { border-color: var(--warning-line); }
.reloj--sin-aprobar .reloj__lomo {
  background: var(--warning-light); border-right-color: var(--warning-line);
  color: var(--warning-dark);
}
.reloj--sin-aprobar .reloj__lomo i { background: var(--warning); }

.reloj__cuerpo {
  padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; min-width: 0;
}
.reloj__alto { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.reloj__alto strong {
  font-size: 13px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reloj__alto span { flex: none; font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }
.reloj--viva .reloj__alto span { color: var(--success-dark); font-weight: 600; }

.reloj__linea { font-size: 11.5px; color: var(--text-soft); line-height: 1.5; }
.reloj__linea b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.reloj__serie { color: var(--text-muted); font-variant-numeric: tabular-nums; }

.reloj__acciones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; }

/* El campo de la IP, escondido hasta que se pide: es lo que menos se toca de la
   pantalla y lo que mas ruido metia, una caja vacia por reloj. */
.reloj__ip {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px; margin-top: 4px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.reloj__ip[hidden] { display: none; }
.reloj__ip > .campo { margin-bottom: 0; }
.reloj__ip-botones { display: flex; gap: 6px; flex-wrap: wrap; }

/* Dentro del cajon de Ajustes -440 px- la rejilla de tarjetas no tiene sitio
   para dos columnas y el lomo de 46 px se come un octavo del ancho. Una
   columna, lomo mas estrecho y sin la linea de la serie: en un cajon que se
   abre para tocar una IP, el numero de serie ya esta en el titulo. */
.es-ajustes .colacion__relojes { grid-template-columns: 1fr; gap: 8px; }
.es-ajustes .reloj__lomo { width: 34px; }
.es-ajustes .reloj__lomo .ms { font-size: 17px; }
.es-ajustes .reloj__cuerpo { padding: 10px 12px; gap: 5px; }
.es-ajustes .reloj__serie { display: none; }
.es-ajustes .reloj__linea { font-size: 11px; }

/* Y el rotulo que los encabeza dentro del cajon. */
.es-ajustes .grupo-titulo { margin: 4px 0 0; }
/* Dentro del cajon ocupa el ancho entero: el `min-width: 240px` del buscador
   del sistema esta pensado para una cabecera con mas cosas al lado. */
.colacion__buscar-reloj { margin: 0; min-height: 0; }
.colacion__buscar-reloj .tabla-buscador { width: 100%; min-width: 0; }
.colacion__buscar-reloj[hidden] { display: none; }
/* La lista se desplaza DENTRO de su caja, no estirando el cajon: con quince
   relojes el cajon crecia hasta el borde de la ventana y los botones de abajo
   se iban con el. Asi el cajon mide siempre lo mismo. */
/* Dos cosas hacen falta aqui, y las dos por lo mismo: acotar el alto de una
   rejilla dentro de una columna flexible.

   1. `flex: none`. El cuerpo del cajon es una columna flexible y sus hijos
      encogen de fabrica: la lista se quedaba en 172 px en vez de 320. Es el
      mismo mordisco que ya se llevo el recuadro del interruptor.

   2. `grid-auto-rows: min-content`. Con el alto acotado, las filas IMPLICITAS
      de una rejilla se reparten el hueco disponible en vez de tomar el alto de
      su contenido: las quince filas salian a 13,86 px cada una y las tarjetas
      quedaban como rayas de colores con el texto desbordando por arriba.
      `align-content: start` NO lo arregla -eso coloca las filas, no las mide-;
      hay que decir explicitamente que cada fila vale lo que su tarjeta. */
.es-ajustes .colacion__relojes {
  flex: none;
  grid-auto-rows: min-content;
  max-height: 320px; overflow-y: auto;
  padding-right: 4px; margin-right: -4px;
}
.colacion__filtro-exceso { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--text); font-size: 13px; font-weight: 700; }
.colaboradores__cargo-fila { display: flex; align-items: center; gap: 8px; }
.colaboradores__cargo-select { flex: 1 1 auto; }
.colaboradores__nuevo-cargo { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--brand-line); border-radius: var(--radius-sm); background: var(--brand-tint); }
.colaboradores__nuevo-cargo-acciones { display: flex; justify-content: flex-end; gap: 8px; }
.colaboradores__cancelar { margin-top: 8px; }
.colaboradores__jefaturas { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.colaboradores__jefaturas-agregar { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px; }
.colaboradores__jefatura { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.reservas__bloques { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.reservas__bloques-nota { grid-column: 1 / -1; margin: 0; color: var(--text-muted); font-size: 13px; }
.reservas__bloque-esqueleto { height: 36px; }
.reservas__bloque { justify-content: center; }
.reservas__filtros { margin-bottom: 14px; }
.reservas__vacio { color: var(--text-muted); }
.feriados__turnos { margin: 0 0 14px; padding: 0; border: 0; }
.feriados__turno { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; font-weight: 600; }
/* `.feriados__busqueda` y `.feriados__buscador` se fueron: /feriados usa el
   buscador de `crearTabla`. */
.feriados__acciones { white-space: nowrap; }
.feriados__borrar { margin-left: 6px; }
.he-ingreso__casilla { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; font-weight: 600; }
.he-ingreso__rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 0 16px; }
.he-ingreso__resultado { min-height: 18px; }
.he-ingreso__previa { margin: 6px 0 14px; }
.he-ingreso__acciones { display: flex; gap: 10px; margin-top: 6px; }
.he-ingreso__aviso-previo { margin: 0 0 6px; padding: 8px 11px; border: 1px solid var(--warning); border-radius: var(--radius-sm); font-size: 13px; }
.he-ingreso__aviso-previo--error { border-color: var(--danger); background: var(--danger-light); color: var(--danger-dark); }
.he-ingreso__aviso-previo--aviso { border-color: var(--warning); background: var(--warning-light); color: var(--warning-dark); }
/* Forzar el registro (he.forzar, 09-10-2026): ámbar, junto al botón de enviar. */
.he-ingreso__forzar { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--warning-line); border-radius: var(--radius-sm); background: var(--warning-light); }
.he-ingreso__forzar-titulo { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--warning-dark); cursor: pointer; }
.he-ingreso__forzar .campo__ayuda { margin: 4px 0 8px; }
.he-ingreso__forzar textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--warning-line); border-radius: var(--radius-sm); font: inherit; background: var(--surface); color: var(--text); resize: vertical; }
.usuarios__turnos { margin: 0 0 14px; padding: 0; border: 0; }
.usuarios__turno-fila { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 10px; }
.usuarios__turno-campo { margin-bottom: 0; }
.usuarios__cancelar { margin-top: 8px; }
/* `wrap` para que en un movil «Estado:» baje a su renglon en vez de salirse:
   medido a 375 px, los dos filtros piden 21 px mas de los que hay. */
.usuarios__filtro-rol { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-bottom: 8px; }
/* Aqui habia un `.panel__acciones .usuarios__filtro-rol { flex: 0 0 auto }`.
   Ese bloque rigido de 353 px era justo lo que impedia que la barra de
   /usuarios cupiera en un renglon, y lo corrige mas abajo
   `.barra-acciones__mirar > .usuarios__filtro-rol { flex: 0 1 auto }`... que
   tiene LA MISMA especificidad (0,2,0) y solo gana por estar 2.600 lineas
   despues. Si alguien reordena la hoja, vuelve el bug. Se quita el rigido: el
   reparto de la barra ya define lo que hace falta. */
.panel__acciones .usuarios__filtro-rol { margin-bottom: 0; }
.usuarios__filtro-rol-label { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 13px; }
/* El `<select>` nativo esta OCULTO -`position:absolute; opacity:0`- detras del
   control que monta `controles.js`, asi que este minimo no se ve: lo unico que
   hacia era sobresalir 26 px invisibles por la derecha de su etiqueta y hacer
   mentir a cualquier medida de desborde. El minimo de verdad esta en
   `.select-ui`, mas abajo. */
.usuarios__filtro-rol-select { min-width: 0; }
/* En una linea: apiladas en dos, cada fila doblaba su alto y la tabla dejaba
   de caber en pantalla. La columna crece lo que haga falta. */
.usuarios__acciones { display: flex; flex-wrap: nowrap; gap: 6px; white-space: nowrap; }
.usuarios__carga-ayuda { margin: 0 0 12px; color: var(--text-muted); font-size: 12.5px; }
.usuarios__cargar { margin-top: 14px; }
.usuarios__plantilla { margin-top: 8px; }
.usuarios__resultado-carga { margin-top: 14px; }
.usuarios__resultado-resumen { margin: 0 0 8px; font-weight: 600; }
.usuarios__resultado-error { margin: 0 0 5px; color: var(--crit); font-size: 12.5px; }
/* ---------- Restos de la pantalla de aprobadores ----------
   Se quitaron de aqui las 28 reglas `.aprobadores__*`: /aprobadores se
   reescribio y `aprobadores.js` usa `cadena__*` y `flujo__*`. Eran el resto de
   la pantalla de «cargos y niveles» anterior; cero usos en JS y en HTML. */
.soporte__barra-filtros { justify-content: flex-start; gap: 8px; }

/* ---------- Disenador de flujos de aprobacion (/aprobadores) ---------- */
/* Texto de apoyo: 45-75 caracteres por linea. A sangre se lee mal aunque el
   layout lo permita. */
.flujo__ayuda { margin: 0 0 12px; max-width: 68ch; color: var(--text-muted); font-size: 13px; line-height: 1.55; }
.flujo__contenido { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 320px); align-items: start; gap: 18px; margin-top: 12px; }
.flujo__canvas { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); padding: 8px; overflow: hidden; }
.flujo__lienzo { display: block; width: 100%; height: auto; touch-action: none; }
.flujo__lateral { display: flex; flex-direction: column; gap: 14px; }
.flujo__editor { min-height: 54px; }
.flujo__nota { margin: 4px 0 0; color: var(--text-muted); font-size: 12.5px; }
.flujo__activo { display: flex; align-items: center; gap: 7px; margin: 10px 0; font-size: 13px; cursor: pointer; }
.flujo__acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.flujo__acciones [hidden] { display: none !important; }
/* `wrap`: con un area de nombre largo -«Administracion RR.HH.»- la fila pedia
   251 px donde hay 225 en un movil, y las dos casillas se salian por la
   derecha. Envolviendo, bajan a su renglon. */
.flujo__evidencia-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.flujo__evidencia-area { flex: 1; font-weight: 600; text-transform: capitalize; }
.flujo__evidencia-casilla { display: flex; align-items: center; gap: 5px; cursor: pointer; color: var(--text-muted); }

/* nodos */
.flujo__nodo { cursor: grab; }
.flujo__nodo:active { cursor: grabbing; }
.flujo__caja { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.5; }
.flujo__nodo--inicio .flujo__caja { fill: var(--surface-2); stroke-dasharray: 5 3; }
.flujo__nodo--fin .flujo__caja { fill: var(--success-light); stroke: var(--success); }
.flujo__nodo.is-inactivo { opacity: .42; }
.flujo__nodo.is-seleccionado .flujo__caja { stroke: var(--brand); stroke-width: 2.5; }
.flujo__nombre { fill: var(--text); font-size: 13px; font-weight: 700; }
.flujo__detalle { fill: var(--text-muted); font-size: 10.5px; }

/* aristas */
.flujo__arista { fill: none; stroke-width: 1.6; }
.flujo__arista--aprueba { stroke: var(--brand); }
.flujo__arista--rechaza { stroke: var(--danger); stroke-dasharray: 5 4; opacity: .75; }
.flujo__arista--aviso { stroke: var(--success); stroke-dasharray: 2 4; opacity: .8; }
.flujo__flecha--aprueba { fill: var(--brand); }
.flujo__flecha--rechaza { fill: var(--danger); }
.flujo__flecha--aviso { fill: var(--success); }
.flujo__arista-texto { font-size: 10px; fill: var(--text-muted); }

.flujo__impresion { display: none; }

@media print {
  body.imprimiendo-flujo > *:not(.flujo__impresion) { display: none !important; }
  body.imprimiendo-flujo .flujo__impresion { display: block; padding: 24px; }
  body.imprimiendo-flujo .flujo__impresion h1 { font-size: 18px; margin: 0 0 16px; }
  body.imprimiendo-flujo .flujo__impresion .flujo__lienzo { width: 100%; max-height: 85vh; }
}

@media (max-width: 900px) {
  .flujo__contenido { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; flex: none; height: auto; border-right: none; border-bottom: 1px solid var(--line); flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }
  .sidebar__label { display: none; }
  .sidebar nav { flex-direction: row; flex-wrap: wrap; }
  .main { padding: 16px; }
}

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

@media (max-width: 560px) {
  .date-time-ui__panel--date { left: 50%; right: auto; width: min(300px, calc(100vw - 20px)); transform: translateX(-50%); animation-name: menuEntradaMobile; }
}
@keyframes menuEntradaMobile { from { opacity: 0; transform: translate(-50%, -5px) scale(.985); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }

/* ---------- Impresion ----------
   El boton "Imprimir" de las tablas manda la pagina a la impresora tal cual.
   Sin esto salian el menu lateral, la barra superior y los propios botones de
   descarga, y la tabla partida por el scroll horizontal. Solo se imprime la
   tabla, sobre blanco y con la cabecera repetida en cada hoja.               */
@media print {
  .sidebar, .topbar, .tabla-barra, .panel__acciones, .paginacion,
  .filtros, .cajon, .toast-zona { display: none !important; }

  .layout, .main { display: block; padding: 0; gap: 0; }
  /* El plomo del fondo y el aire del panel son de pantalla: en papel se
     imprimirian como una mancha gris y un margen que la hoja ya trae. */
  .main { background: var(--print-paper); }
  .panel { gap: 8px; padding: 0; border-radius: 0; }
   .panel__head { border-bottom: 1px solid var(--print-ink); padding-bottom: 6px; }

  /* El scroll no existe en papel: la tabla se deja fluir y se encoge. El
     envoltorio que recorta la esquina tambien se abre, o cortaria las filas. */
  .tabla-scroll { overflow: visible; }
  .tabla-recorte { overflow: visible; border-radius: 0; }
  table { font-size: 9.5px; }
  thead { display: table-header-group; }
  thead th {
     background: var(--print-paper) !important; color: var(--print-ink) !important;
     border-bottom: 1px solid var(--print-ink); border-radius: 0;
  }
  tr { break-inside: avoid; }

   body { background: var(--print-paper); }
}
.he-ingreso__grupo {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.he-ingreso__grupo-encabezado,
.he-ingreso__grupo-fila {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.he-ingreso__grupo-encabezado h4 {
  margin: 0 0 var(--space-1);
}

.he-ingreso__grupo-lista {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.he-ingreso__grupo-fila {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.he-ingreso__grupo-fila > .campo {
  flex: 1;
}

@media (max-width: 640px) {
  .he-ingreso__grupo-encabezado,
  .he-ingreso__grupo-fila {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ============================================================
   FLUJOS DE APROBACION POR AREA
   ============================================================
   La cadena se lee de arriba abajo, numerada, con la persona por
   delante de la cuenta: un username no permite comprobar que quien
   va a aprobar TI sea la jefatura de TI.
   El azul se raciona: solo el paso de cierre y el nodo activo lo
   llevan, para que el ojo encuentre el final de la cadena. */

.cadena__cabecera { margin-bottom: 18px; }
.cadena__cab-fila { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
/* El titulo NO es lo mas importante de la pantalla: lo es la cadena. Se queda
   en tamano de lectura y deja el peso visual a los nodos. */
.cadena__titulo { margin: 0; font-size: 15px; font-weight: 700; color: var(--text); }
.cadena__version { font-size: 12.5px; color: var(--text-muted); }
.cadena__aviso { margin: 8px 0 0; font-size: 12.5px; color: var(--text-muted); }

/* Estado vacio: es la primera pantalla que ve quien llega sin flujo abierto. */
.cadena__vacio { padding: 32px 24px; text-align: center; }
.cadena__vacio-titulo { margin: 0 0 6px; font-size: 14.5px; font-weight: 700; color: var(--text-soft); }
.cadena__vacio-texto {
  margin: 0 auto; max-width: 46ch; font-size: 13px; line-height: 1.55; color: var(--text-muted);
}

/* La cadena entera en una linea. Es lo primero que hay que poder leer:
   "Area TI -> Coordinador TI (Juan Perez) -> Jefe TI (Ana Soto) -> RR.HH.".
   Envuelve en vez de recortar: una cadena de cuatro pasos no cabe de otra
   manera, y cortarla escondería justo el final, que es el cierre. */
tr.is-elegida > td { background: var(--brand-tint); }

/* La cadena como linea de tiempo: un rail continuo a la izquierda y un
   marcador por nodo. Se lee de arriba abajo, que es como se recorre una
   aprobacion, y de un vistazo se ve cuantas manos pasan por ella.

   El rail y los marcadores son DECORACION: van en pseudoelementos, no llevan
   texto y no entran en el orden de lectura. Quien usa un lector de pantalla oye
   el rotulo de cada nodo -"1. Aprobacion", "Nodo final"-, que es la misma
   informacion sin depender de ver una linea. */
/* La cadena NO va a sangre aunque el layout si: son tres lineas de texto por
   nodo, y estirarlas 1300px las vuelve ilegibles. El ancho sale del contenido,
   no del contenedor. */
.cadena { position: relative; padding-left: 30px; max-width: 760px; }
.cadena::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--border-strong);
  border-radius: 1px;
}

.cadena__nodo {
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 12px 14px;
  margin: 0 0 12px;
}
/* El marcador, centrado sobre el rail. */
.cadena__nodo::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 16px;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-circle);
  background: var(--surface);
  border: 2px solid var(--border-strong);
  box-sizing: border-box;
}
.cadena__nodo--fijo { background: var(--surface-2); border-style: dashed; }
.cadena__nodo--fijo::before { border-style: dashed; }

/* El cierre va macizo: es el final de la cadena y conviene que se vea desde
   arriba sin contar los nodos. */
.cadena__nodo--cierre { border-color: var(--brand-line); background: var(--brand-light); }
.cadena__nodo--cierre::before { background: var(--brand); border-color: var(--brand); }

/* El nodo que se esta editando. El anillo va en el marcador y el color en el
   borde, no en el fondo entero: la tarjeta activa es la que lleva el buscador
   y los botones, y texto blanco sobre azul dejaria un formulario ilegible. */
.cadena__nodo.is-activo {
  border-color: var(--brand);
  background: var(--brand-tint);
  box-shadow: 0 0 0 3px var(--brand-light);
}
.cadena__nodo.is-activo::before {
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-light);
}

.cadena__nodo-titulo { font-size: 14.5px; font-weight: 700; color: var(--text); margin-top: 2px; }

/* Quien firma es EL dato de la tarjeta: va debajo del nombre del paso y con
   mas contraste que el resto del detalle. */
.cadena__nodo-quien { font-size: 13px; color: var(--text-soft); margin-top: 3px; }
.cadena__nodo-detalle { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.cadena__nodo-alerta { font-size: 12px; color: var(--danger-dark); margin-top: 4px; }

/* Las marcas del paso -grupo, regla, puede forzar-. Pastillas palidas, nunca
   bloques de color: son matices del nodo, no su titular. */
.cadena__marcas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cadena__marca {
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-soft);
  white-space: nowrap;
}
.cadena__marca--activo { background: var(--success-light); color: var(--success-dark); }
.cadena__marca--sombra { background: var(--warning-light); color: var(--warning-dark); }
.cadena__marca--auto   { background: var(--brand-light);   color: var(--brand-dark); }

/* Un paso automatico no lo firma nadie: se dibuja discontinuo, como el inicio,
   porque tampoco consume turno de una persona. */
.cadena__nodo--auto { border-style: dashed; }

.cadena__nodo-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cadena__nodo-rotulo { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-soft); }
.cadena__nodo-accion { font-size: 12px; color: var(--text-muted); }
.cadena__nodo input[type="text"] { width: 100%; margin: 8px 0; }
.cadena__controles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.cadena__validacion { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.cadena__validacion ul { margin: 6px 0 0; padding-left: 18px; }

/* ---------- La cadena dentro de su cajon ----------
   El editor dejo de ser un panel bajo la tabla y pasa a un cajon lateral: antes
   habia que bajar media pantalla para pasar de elegir el flujo a editarlo, y al
   volver se perdia el sitio en la lista. */
.cajon--lienzo .cajon__cuerpo { padding: 0; gap: 0; overflow: hidden; }

/* El lienzo llega a los cuatro bordes del cajon y es lo unico que se desplaza.
   La reticula dice "esto es un lienzo, no un formulario" sin una sola palabra. */
.lienzo {
  position: relative; flex: 1 1 auto; min-height: 0; overflow: auto;
  padding: 20px 18px 24px;
  background-color: var(--surface-2);
  background-image: radial-gradient(var(--border-strong) 1.1px, transparent 1.1px);
  background-size: 18px 18px;
}
.lienzo .cadena { max-width: none; }

/* El conector: por que se pasa al siguiente nodo, y el + que inserta uno ahi.
   La condicion vive en la flecha porque describe la flecha -"se salta si es
   domingo"-, no es un atributo del paso. */
.cadena__enlace {
  position: relative; min-height: 42px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: -12px 0 0; padding: 4px 0 6px;
}
.cadena__enlace::before {
  content: ""; position: absolute; left: -25px; top: 0; bottom: 0;
  width: 2px; background: var(--border);
}
.cadena__enlace-siempre {
  position: relative; z-index: 1;
  font-size: 11.5px; color: var(--text-muted);
  background: var(--surface-2); border-radius: var(--radius-pill); padding: 2px 9px;
}
.cadena__enlace-regla {
  position: relative; z-index: 1;
  font-size: 11.5px; font-weight: 700; color: var(--warning-dark);
  background: var(--warning-light); border: 1px solid var(--warning-line);
  border-radius: var(--radius-pill); padding: 2px 10px;
}
.cadena__enlace-mas {
  position: relative; z-index: 1;
  width: 22px; height: 22px; padding: 0; border-radius: var(--radius-circle);
  background: var(--surface); border: 1px solid var(--border-strong);
  color: var(--text-soft); font-size: 14px; line-height: 1;
  cursor: pointer; font-family: inherit;
}
.cadena__enlace-mas:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }

/* Cabecera y pie del cajon no se desplazan: el estado y Publicar tienen que
   estar siempre a la vista, y Publicar junto a lo que lo bloquea. */
.cajon--lienzo .cadena__cabecera {
  flex: 0 0 auto; margin: 0; padding: 14px 22px;
  border-bottom: 1px solid var(--border); background: var(--surface);
}
.cajon__pie {
  flex: 0 0 auto; border-top: 1px solid var(--border);
  padding: 12px 18px 14px 22px; background: var(--surface);
  display: flex; flex-direction: column; gap: 10px;
}
/* Un pie SIN la caja de botones -los filtros cuelgan sus dos botones directos-
   va en fila: en columna se apilaban uno sobre otro y ocupaban el doble. */
.cajon__pie:not(:has(> .cajon__pie-botones)) { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
.cajon__pie-botones { display: flex; gap: 8px; flex-wrap: wrap; }
/* `cajon.pie(...)`: botonera en fila; el primero a la izquierda y el resto a la
   derecha. Ningún botón a lo ancho, aunque venga marcado como btn--block. */
.cajon__pie--fila { flex-direction: row; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.cajon__pie--fila > :first-child:not(:only-child) { margin-right: auto; }
.cajon__pie--fila .btn { width: auto; }
.cajon__pie--fila > [hidden] { display: none !important; }

/* Cajón AMPLIO (`crearCajon({ ancho: 'amplio' })`): formularios largos o de
   configuración en dos columnas. Un solo scroll, el del cuerpo. */
.cajon--amplio .cajon__cuerpo { padding: 20px 26px 26px; }
.amplio-cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px; align-items: start;
}
.amplio-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
/* Separador vertical suave entre columnas: se lee como dos zonas, no como un
   formulario cortado por la mitad. */
.amplio-cols > .amplio-col + .amplio-col { border-left: 1px solid var(--line); padding-left: 28px; }
.amplio-cols .ancho-completo { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .amplio-cols { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .amplio-cols > .amplio-col + .amplio-col { border-left: 0; padding-left: 0; }
}
/* Dentro de una columna amplia el `gap` ya separa los bloques: sin esto se
   sumaban los márgenes propios (secciones del registro de HE, último campo,
   filas de `.rejilla`) y quedaban huecos de más. */
.amplio-col > .ingreso-form-section { margin-top: 0; }
.amplio-col > .campo { margin-bottom: 0; }
.amplio-col > .campo + .campo__ayuda { margin-top: -10px; }
/* Un bloque a lo ancho debajo de las columnas no queda pegado a ellas. */
.amplio-cols > .ancho-completo { margin-top: 18px; }
/* La lista de "Asignar perfil" no desplaza sola dentro del cajón: un solo scroll. */
.cajon__cuerpo .perfil-usuarios { max-height: none; overflow-y: visible; }
/* Una caja de ancho completo que solo guarda un aviso oculto no deja hueco. */
.amplio-cols > .ancho-completo:has(> [hidden]:only-child) { display: none; }
.amplio-col > .campo:last-child,
.amplio-col > .rejilla:last-child > .campo,
.amplio-col > .formulario-solicitud__rut { margin-bottom: 0; }
.amplio-col > .rejilla { row-gap: 0; }
/* Una tabla dentro del cuerpo de un cajón no se encoge para desplazar sola:
   desplaza el cuerpo entero (un solo scroll). */
.cajon__cuerpo > .tabla-scroll { flex-shrink: 0; }
/* …ni tiene alto máximo propio (70vh) dentro de un cajón: eso era un scroll
   dentro de otro en "Registros" del panel. */
.cajon__cuerpo .tabla-scroll { max-height: none; }
/* Ajustes de desayuno en cajón amplio: la lista de relojes deja de tener scroll
   propio (un solo scroll, el del cuerpo), y el espaciado compacto de
   `.es-ajustes` vuelve a aplicar dentro de las columnas. */
.cajon--amplio .es-ajustes .colacion__relojes { max-height: none; overflow-y: visible; padding-right: 0; margin-right: 0; }
.cajon__cuerpo.es-ajustes .amplio-col > .campo { margin-bottom: 0; }
.cajon__cuerpo.es-ajustes .amplio-col > .campo + .campo__ayuda { margin: -10px 0 0; }
.cajon__cuerpo.es-ajustes .amplio-col > .grupo-titulo { margin: 4px 0 0; }
/* Ficha de colaboradores (doble cajón): hoja principal ancha, en dos columnas,
   junto a la de jefaturas. */
.colaboradores-cajon .doble-cajon__panel--principal { --doble-cajon-ancho: 820px; }
@media (max-width: 940px) {
  /* Apiladas, la ficha vuelve a 440: una sola columna. */
  .colaboradores-cajon .amplio-cols { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .colaboradores-cajon .amplio-cols > .amplio-col + .amplio-col { border-left: 0; padding-left: 0; }
  /* Sola (sin la hoja de jefaturas abierta) usa todo el alto, no la mitad. */
  .colaboradores-cajon:not(:has(> .doble-cajon__panel--secundario:not([hidden]))) .doble-cajon__panel--principal { max-height: 100%; }
}

/* Mientras se configura un nodo, los demas se apagan: tres tarjetas blancas
   iguales compiten con el formulario y no se sabe cual se esta editando. */
.cadena__nodo--apagado { opacity: .5; }

/* El segundo cajon se pone AL LADO del lienzo, no encima: asi se sigue viendo
   que nodo se esta editando. Mismo desplazamiento que .doble-cajon. */
/* El segundo cajon se coloca a la IZQUIERDA del primero, no encima.
   Cambia la cuenta segun donde este el primero:

   · Lateral -pegado al borde derecho-: basta apartarlo el ancho del primero.
   · Centrado: en un contenedor centrado, un margen derecho de X corre la caja
     X/2 hacia la izquierda. Para que el segundo quede junto al primero hay que
     apartarlo (ancho + hueco), asi que el margen es el DOBLE de eso. */
.cajon__fondo--lateral .cajon--secundario { margin-right: calc(440px + var(--cajon-margen, 14px)); }
/* Los dos centrados piden 440 + 14 + 440 mas sus margenes: unos 950 px. Por
   debajo de eso el segundo se salia por la izquierda -medido a 900 px: quedaba
   entero fuera de la pantalla, invisible-. Ahi deja de apartarse y se comporta
   como cualquier otro modal: se pone en medio, encima, y se cierra para volver
   al lienzo. */
@media (min-width: 981px) {
  .cajon__fondo--centro .cajon--secundario { margin-right: calc((440px + var(--cajon-margen, 14px)) * 2); }
}
/* Dos cajones abiertos son dos velos: al 22% cada uno la tabla de detras se
   pierde. El del segundo se baja para que sumen aproximadamente uno. */
.cajon__fondo--visible:has(.cajon--secundario) { background: rgba(15, 23, 42, .10); }

/* ---------- Medicion del desayuno ----------
   Tres bloques con su propia forma, porque ninguno es un grafico de barras al
   uso: los tres se miden contra el LIMITE, no contra el maximo de la serie.
   `bloqueBarras` escala al maximo y ahi 21,3 y 13,7 min salian casi igual de
   largas, con el limite sin dibujar. */

/* La rejilla propia, y no `.he-indicadores__bloques`: aquella reparte en tres
   columnas a 1366 px y ahi el podio se queda con 110 px por tarjeta -«Daniela
   T...»- y el mapa de calor parte cada celda en dos lineas. Dos columnas fijas,
   una sola por debajo de 900 px, y el mapa ocupa la fila entera. */
.medicion-bloques {
  display: grid;
  /* Dos columnas -el podio y la lista, uno al lado del otro- y el mapa a lo
     ancho. Hubo un intento con `auto-fit` que los apilaba en cuanto el hueco
     bajaba de 440 px, y se descarto: el reparto lado a lado es el que se
     quiere. Lo que se arregla es el otro lado del problema -el podio se
     quedaba sin nombres al estrecharse-, y se arregla abajo, en el propio
     podio, con una consulta de CONTENEDOR. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;

  /* El pastel sale de la paleta comun de graficos, declarada en `:root`: antes
     se calculaba aqui y habia dos sitios donde tocar el mismo tono. */
  --medicion-mal: var(--graf-rojo);
  --medicion-bien: var(--graf-verde);
  --medicion-mal-borde: color-mix(in srgb, var(--danger) 32%, var(--border));
  /* El texto no puede ser pastel -deja de leerse-, pero si bajar el tono:
     granate en vez del rojo de aviso. */
  --medicion-mal-texto: color-mix(in srgb, var(--danger-dark) 72%, var(--text));
}
.medicion-bloques > .es-ancho { grid-column: 1 / -1; }
/* En una tableta o un movil dos columnas no son dos columnas, son dos tiras:
   a 768 px cada bloque se quedaba en 310 y el nombre volvia a cortarse. */
@media (max-width: 860px) { .medicion-bloques { grid-template-columns: minmax(0, 1fr); } }

/* Los bloques de una fila miden lo mismo -la rejilla los estira- y el podio,
   que es mas corto que la lista de al lado, dejaba un palmo de blanco debajo.
   Su contenido crece hasta llenar el bloque. */
.medicion-bloques > .he-indicadores__bloque {
  display: flex;
  flex-direction: column;
  /* El bloque se declara contenedor para que el podio pueda preguntar por SU
     ancho. La consulta de medios no sirve aqui: con la barra lateral abierta,
     a 1.150 px de ventana el bloque mide 367 y la ventana dice que hay sitio
     de sobra. */
  container-type: inline-size;
}
.medicion-bloques > .he-indicadores__bloque > :last-child { flex: 1 1 auto; }

/* El podio: los tres que mas se demoran, con cara y cifra grande. */
.medicion-podio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.medicion-podio__puesto {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-align: center;
  min-width: 0;
  /* Centrado en vertical: la tarjeta crece con el bloque y el contenido se
     queda en medio en vez de colgar de arriba. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* El primero se marca en rojo solo si de verdad se pasa del limite: en un
   equipo que cumple, el podio no deberia alarmar. */
.medicion-podio__puesto.es-mal { border-color: var(--medicion-mal-borde); }
.medicion-podio__ini {
  width: 38px; height: 38px; margin: 0 auto 7px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); color: var(--text-muted);
  font-size: 13px; font-weight: 700;
}
.medicion-podio__puesto.es-mal .medicion-podio__ini { background: var(--danger-light); color: var(--danger-dark); }
.medicion-podio__nom { font-size: 12.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.medicion-podio__cargo { margin-top: 1px; font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.medicion-podio__cifra { margin-top: 6px; font-size: 22px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.medicion-podio__puesto.es-mal .medicion-podio__cifra { color: var(--medicion-mal-texto); }

/* Las barras contra el limite: la raya fija es el limite y la barra se pinta
   verde o roja segun lo cruce. La escala llega al DOBLE del limite, asi que la
   raya cae justo al medio y la lectura es inmediata. */
.medicion-limite__leyenda { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; font-size: 11px; color: var(--text-muted); }
.medicion-limite__muestra { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 2px; vertical-align: -1px; }
.medicion-limite__muestra.es-raya { width: 2px; background: var(--text); opacity: .55; }
.medicion-limite__fila { display: grid; grid-template-columns: minmax(0, 104px) 1fr minmax(0, 62px); align-items: center; gap: 10px; padding: 6px 0; }
.medicion-limite__nom { font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.medicion-limite__pista { position: relative; height: 16px; border-radius: 4px; background: var(--bg); overflow: hidden; }
.medicion-limite__barra { height: 100%; border-radius: 4px 0 0 4px; background: var(--medicion-bien); }
.medicion-limite__barra.es-mal { background: var(--medicion-mal); }
.medicion-limite__raya { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); opacity: .55; }
.medicion-limite__val { font-size: 12.5px; text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.medicion-limite__val.es-mal { color: var(--medicion-mal-texto); font-weight: 600; }

/* El mapa de calor, cargo x semana. */
.medicion-calor { display: grid; gap: 3px; font-size: 11px; }
.medicion-calor__marco { overflow-x: auto; }
@media (max-width: 620px) {
  /* El rotulo del cargo mas una columna por semana no caben en un movil. Se
     recorre de lado, igual que una tabla ancha. */
  .medicion-calor { min-width: 370px; }
}
.medicion-calor__cab { padding: 4px 2px; text-align: center; font-weight: 600; color: var(--text-muted); }
.medicion-calor__lado { padding: 9px 8px 9px 0; text-align: right; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.medicion-calor__celda { padding: 9px 6px; border-radius: 4px; text-align: center; color: var(--text); font-variant-numeric: tabular-nums; }
/* Una celda sin desayunos no es un cero: es que ese cargo no salio esa semana. */
.medicion-calor__celda.es-vacia { color: var(--text-muted); background: var(--bg); }
.medicion-calor__leyenda { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 11px; color: var(--text-muted); }
.medicion-calor__escala { display: flex; gap: 2px; }
.medicion-calor__escala i { display: inline-block; width: 20px; height: 10px; border-radius: 2px; }

/* El nombre y el cargo, juntos, para poder moverlos como uno solo. */
.medicion-podio__datos { min-width: 0; }

@container (max-width: 430px) {
  /* Tres tarjetas en un bloque estrecho dejan el nombre en dos letras
     -«Daniela T...»-. Debajo de ese ancho la tarjeta se tumba: inicial a la
     izquierda, nombre y cargo en medio, cifra a la derecha. Cabe todo y se
     siguen leyendo los tres de un vistazo. */
  .medicion-podio { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .medicion-podio__puesto { flex-direction: row; align-items: center; gap: 12px; padding: 10px 12px; text-align: left; }
  .medicion-podio__ini { margin: 0; flex: none; }
  .medicion-podio__datos { flex: 1 1 auto; }
  .medicion-podio__cifra { margin-top: 0; flex: none; font-size: 19px; }
}

@container (max-width: 320px) {
  /* En un movil estrecho ni tumbada cabe todo: la inicial, el nombre, el cargo
     y la cifra piden 204 px y hay 216 menos el relleno. Se va el cargo -esta en
     el mapa de abajo y en la tabla- y encogen la inicial y la cifra. El nombre
     es lo ultimo que se toca: sin el, el bloque no dice nada. */
  .medicion-podio__cargo { display: none; }
  .medicion-podio__ini { width: 30px; height: 30px; font-size: 11px; }
  .medicion-podio__cifra { font-size: 16px; }
}

@container (max-width: 260px) {
  /* Y por debajo de ahi se va tambien la inicial, y se aprietan el hueco y el
     relleno. Medido a 375 px: con la inicial, al nombre le quedaban 48 y pedia
     70; sin ella -30 px mas sus 12 de hueco- 90, y «Andres Sepulveda», que es
     el mas largo, pide 95. Los ocho que faltan salen del hueco y el relleno.
     La inicial es adorno; el nombre es el dato. */
  .medicion-podio__ini { display: none; }
  .medicion-podio__puesto { gap: 8px; padding: 10px; }
  /* «Andres Sepulveda» seguia pidiendo 102 px donde hay 98. Antes que encoger
     la letra, que el nombre use dos lineas: la tarjeta crece diecisiete pixeles
     y no se corta nada. */
  .medicion-podio__nom { white-space: normal; }
}

@media (max-width: 560px) {
  /* El buscador baja su minimo de 240 a 150 px: en un panel de movil el hueco
     util son 237 y se salia tres. Se probo con `min(240px, 100%)` y salio peor
     -el porcentaje se mide contra un padre que tambien encoge, y en
     `/turnos-seremi` el campo se quedaba en CINCO pixeles-. Un suelo fijo es lo
     que hace falta, y 150 es el mismo numero que ya declara su `flex-basis`. */
  .tabla-buscador { min-width: 150px; }

  /* En un movil el grafico de columnas no cabe: medido a 375 px, la caja mide
     191 y el contenido pide 196 en uno y 212 en otro -las etiquetas de los
     extremos asoman-. Se aprieta el hueco y, si aun asi no entra, se recorre de
     lado, igual que una tabla ancha. Encoger las columnas no vale: por debajo
     de 17 px dejan de leerse. */
  .grafico-columnas { gap: 5px; overflow-x: auto; }
  /* Y las columnas piden su ancho minimo. Sin el, a 375 px quedaban en 17 px y
     los rotulos de valor se montaban unos sobre otros: medido, SEIS de los ocho
     se solapaban -«132 h» acababa en 133,3 y «112 h» empezaba en 131,7- y uno
     se salia de la caja. Con 38 px entran enteros y el grafico se recorre de
     lado. */
  .grafico-columnas__col { min-width: 38px; }
}

/* Las filas que completan la ultima pagina. No son registros: solo la linea de
   la rejilla, para que el hueco reservado se lea como una tabla que termina y no
   como un trozo en blanco. El espacio duro que las levanta lo pone `tabla.js`,
   como escape de JavaScript: hacerlo aqui desde `content`, con un escape CSS,
   se probo y el navegador pinto los caracteres del escape tal cual, en cada
   fila de relleno. */
.tabla-fila-fantasma td { color: transparent; user-select: none; }

/* La fila entera abre la cadena. Se marca con la misma barra azul a la
   izquierda que lleva el nodo activo, para que sean el mismo gesto. */
tbody tr.is-abrible { cursor: pointer; }
tbody tr.is-abrible:hover td:first-child,
tbody tr.is-abrible:focus-visible td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
tbody tr.is-abrible:focus-visible { outline: none; }
/* Ya es un `.btn--ghost`: solo se conserva el matiz de color al pasar por
   encima de la fila, que es lo que dice «esta fila se abre». */
.fila-abrir { white-space: nowrap; }
/* Cuando en vez de una accion la celda lleva el motivo por el que no la hay,
   partido en dos lineas se lee como otra fila. Se deja correr a lo ancho: la
   tabla ya vive dentro de .tabla-scroll. */

/* ---------- Proyeccion de ausencias ----------
   Tres numeros arriba y una barra por fila. La barra existe porque con veinte
   sucursales el numero solo dice cuantos faltan, y no si eso es mucho ahi. */
.ausencias__datos { display: flex; gap: 12px; flex-wrap: wrap; }
.ausencias__dato {
  flex: 1 1 140px; min-width: 140px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 14px 16px; background: var(--surface);
}
.ausencias__dato-valor {
  font-size: 26px; font-weight: 800; letter-spacing: -.02em;
  color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.ausencias__dato-rotulo {
  font-size: 10px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-soft); margin-top: 4px;
}
/* Solo dos llevan color, y el que importa es el que queda. */
.ausencias__dato--bien { border-color: var(--success-light); background: var(--success-light); }
.ausencias__dato--bien .ausencias__dato-valor { color: var(--success-dark); }
.ausencias__dato--ojo { border-color: var(--warning-light); background: var(--warning-light); }
.ausencias__dato--ojo .ausencias__dato-valor { color: var(--warning-dark); }

/* Los tres controles del rango van en una fila: apilados ocupaban tres alturas
   de cabecera para tres campos de una linea.
   (Aqui habia ademas un `.panel__acciones input[type="date"] { width:150px }`
   muerto por partida doble: apunta a un campo de fecha NATIVO, que la regla
   dura del proyecto prohibe en pantalla y `controles.js` sustituye.) */
/* `.select-ui` y `.date-time-ui` nacen al 100% porque estan pensados para un
   formulario en columna. Dentro de una cabecera eso hace que cada control
   reclame su propia linea y la cabecera crezca hasta cuatro alturas. */
/* El `min-width: 132px` de antes tambien lo corrige la barra partida
   (`.barra-acciones__mirar .select-ui { min-width: 104px }`), con la misma
   especificidad y ganando solo por orden. Se baja aqui al valor real para que
   las dos reglas digan lo mismo y no dependan de quien este mas abajo. */
.panel__acciones .select-ui,
.panel__acciones .date-time-ui { width: auto; min-width: 104px; max-width: 240px; }

/* ---------- Lo predicho ----------
   Una falta probable no se lee nunca igual que una confirmada, ni en una
   tarjeta ni en una celda. El morado es --accent, que ya existia: no hace
   falta un color nuevo para decir "esto todavia no ha pasado". */
.ausencias__dato--predicho { border-color: var(--accent-light); background: var(--accent-light); }
.ausencias__dato--predicho .ausencias__dato-valor { color: var(--accent); }
.num-predicho { color: var(--accent); font-weight: 700; }
.ausencias__modelo { color: var(--text-muted); font-size: 12px; }

/* ---------- Restos del mapa de la semana ----------
   La pantalla /ausencias ya no pinta el mapa por columnas: se quitaron de aqui
   `.mapa`, `.celda`/`.celda--*`, `.mapa__totales`, `.total` y `.es-dia`, unas 25
   reglas que no pintaban nada (verificado: cero usos en JS y en HTML). Lo que SI
   sigue vivo de ese bloque se queda debajo: `.leyenda-mapa`, que hoy `ausencias.js`
   usa como pie de la agenda, y `.detalle-dia*`, que es su encabezado. Las
   subreglas `.leyenda-mapa__*` -muestra, cuenta- tambien se fueron con el mapa. */
.leyenda-mapa { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 0; color: var(--text-muted); font-size: 11.5px; }
.leyenda-mapa > span { display: inline-flex; align-items: center; gap: 7px; }

.detalle-dia { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.detalle-dia__titulo { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.detalle-dia__resumen { font-size: 12.5px; color: var(--text-muted); }
.detalle-dia__resumen b { color: var(--accent); font-weight: 700; }

/* ---------- Evidencia de la alerta ----------
   La estimacion y los hechos viven en bloques separados para que una fecha
   historica o una solicitud no parezca una probabilidad nueva. El panel usa
   el mismo cajon lateral que el resto de la intranet. */
.ausencias-evidencia-cajon { width: min(var(--cajon-ancho, 560px), 100%); }
.ausencias-evidencia-cajon .cajon__cuerpo { gap: 16px; }
.ausencias-evidencia__contexto {
  margin: 0; color: var(--text); font-size: 12px; font-weight: 800;
  letter-spacing: .02em; text-transform: none;
}
.ausencias-evidencia__nota {
  margin: 0; padding: 11px 13px; border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm); background: var(--brand-tint);
  color: var(--text-soft); font-size: 12px; line-height: 1.55;
}
.ausencias-evidencia { display: grid; gap: 14px; }
.ausencias-evidencia__persona {
  display: grid; gap: 12px; padding: 16px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.ausencias-evidencia__persona-cabecera {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: start; gap: 5px 10px; padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
}
.ausencias-evidencia__nombre { margin: 0; color: var(--text); font-size: 14px; line-height: 1.3; }
.ausencias-evidencia__meta { grid-column: 1 / -1; margin: 0; color: var(--text-muted); font-size: 11.5px; line-height: 1.4; }
.ausencias-evidencia__estimacion { display: grid; gap: 8px; }
.ausencias-evidencia__estimacion-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0; }
.ausencias-evidencia__estimacion-valor { color: var(--accent); font-size: 12px; font-weight: 700; }
.ausencias-evidencia__subtitulo {
  margin: 0; color: var(--text-soft); font-size: 10px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}
.ausencias-evidencia__factores,
.ausencias-evidencia__lista { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.ausencias-evidencia__factores { padding-left: 15px; list-style: disc; color: var(--text-muted); font-size: 11.5px; line-height: 1.45; }
.ausencias-evidencia__lista { gap: 8px; }
.ausencias-evidencia__item { display: grid; gap: 3px; padding: 10px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.ausencias-evidencia__tipo { color: var(--text); font-size: 12px; line-height: 1.35; }
.ausencias-evidencia__detalle { color: var(--text-soft); font-size: 11.5px; line-height: 1.45; overflow-wrap: anywhere; }
.ausencias-evidencia__metadatos { display: flex; flex-wrap: wrap; gap: 6px; }
.ausencias-evidencia__vacio,
.ausencias-evidencia__sin-alerta { margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.ausencias-evidencia__sin-alerta { padding: 9px 11px; border-radius: var(--radius-sm); background: var(--surface-2); }

@media (max-width: 560px) {
  .ausencias-evidencia-cajon { width: 100%; }
  .ausencias-evidencia__persona { padding: 14px; border-radius: var(--radius-md); }
}

/* ---------- Cobertura del dia: horario contra horario ----------
   Una fila por persona sobre un eje comun de horas. Naranja macizo es un turno
   que YA queda sin cubrir; rayado morado es el que el modelo cree que va a
   quedar sin cubrir; gris es el turno de quien queda y verde, lo que de verdad
   se solapa con el hueco.

   Las dos lineas de puntos son el tramo de la persona elegida, y son lo unico
   que hace comparable una fila con otra: sin ellas son diez barras sueltas. */
.cobertura { display: flex; flex-direction: column; }
.cobertura__fila {
  display: grid;
  grid-template-columns: 230px 112px minmax(0, 1fr) 196px;
  gap: 14px; align-items: center;
  padding: 7px 10px; border-radius: var(--radius-sm);
}
.cobertura__fila--elegible { cursor: pointer; }
.cobertura__fila--elegible:hover { background: var(--surface-2); }
.cobertura__fila.is-referencia { background: var(--brand-light); box-shadow: inset 3px 0 0 var(--brand); }
.cobertura__fila:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.cobertura__regla { padding-top: 0; padding-bottom: 0; }
.cobertura__turno { font-size: 12px; font-weight: 700; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.cobertura__cierre { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.cobertura__nota { font-size: 11px; color: var(--text-muted); text-align: right; }
.cobertura__rotulo {
  padding: 14px 10px 7px;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
}
.cobertura__rotulo--corte { margin-top: 7px; border-top: 1px solid var(--border); }

.franja__eje {
  display: flex; justify-content: space-between; padding-bottom: 3px;
  font-size: 10px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.franja__pista { position: relative; height: 22px; border-radius: var(--radius-pill); background: var(--surface-2); }
.franja__guia { position: absolute; top: -4px; bottom: -4px; border-left: 1px dashed var(--warning); }
.franja__turno { position: absolute; top: 4px; height: 14px; border-radius: var(--radius-pill); background: var(--border-strong); }
.franja__turno--falta { background: var(--warning); }
.franja__turno--probable {
  background: repeating-linear-gradient(135deg, var(--accent-light) 0 5px, var(--surface) 5px 10px);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.franja__cubre { position: absolute; top: 4px; height: 14px; border-radius: var(--radius-pill); background: var(--success); }
.franja__nada { display: block; padding-left: 12px; line-height: 22px; font-size: 11.5px; color: var(--text-muted); }

/* Con poco ancho la franja se queda sin sitio util: las columnas de texto se
   apilan y la barra ocupa la linea entera, que es la parte que hay que ver. */
@media (max-width: 1100px) {
  .cobertura__fila { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .cobertura__fila > .franja__pista,
  .cobertura__fila > .franja__eje { grid-column: 1 / -1; }
  .cobertura__regla { display: none; }
  .cobertura__cierre { align-items: flex-end; }
}

/* ---------- Periodos de horas extras ----------
   Calendario central: doce meses en una tarjeta, el elegido manda. Reusa las
   fichas del date-picker (celda, seleccion, hero) porque es el mismo gesto,
   con el mes como unidad en vez del dia. La excepcion por area baja a la
   tabla del detalle. */
.cierres { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); align-items: start; gap: 18px; }
.cierres__calendario {
  max-width: 100%; padding: 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}
/* La entradilla ya separa por el gap del panel; su margen propio sobraba. */
/* ---------- Configuracion HE: la rejilla de meses ----------
   Antes era UN mes con flechas para ir pasando, y despues una linea de
   pastillas que decia el estado con un punto y escondia la fecha en el aviso
   del raton. Doce tarjetas lo dicen escrito y se ve el año entero.

   Se usan las piezas del sistema -el borde, el radio y la superficie de las
   tarjetas, y `badge` para el estado-, no un estilo propio de la pantalla. */
.cierres-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(176px, 100%), 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.cierres-rejilla__mes {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-align: left; cursor: pointer; min-width: 0;
}
.cierres-rejilla__mes:hover { border-color: var(--border-strong); }
.cierres-rejilla__mes[aria-pressed="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
/* Un mes cerrado se tiñe, en pastel: es el estado que hay que ver de lejos. */
.cierres-rejilla__mes.es-cerrado { background: color-mix(in srgb, var(--danger-light) 70%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 22%, var(--border)); }
.cierres-rejilla__mes.es-parcial { background: color-mix(in srgb, var(--warning-light) 60%, var(--surface)); border-color: color-mix(in srgb, var(--warning) 25%, var(--border)); }
.cierres-rejilla__rotulo { font-size: 12.5px; font-weight: 600; color: var(--text); text-transform: capitalize; }
.cierres-rejilla__detalle { font-size: 11px; line-height: 1.4; color: var(--text-muted); }

/* La ficha del mes elegido: estado en una frase y lo que se puede hacer. */
.cierres-ficha {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.cierres-ficha__alto { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.cierres-ficha__mes { font-size: 17px; font-weight: 700; color: var(--text); text-transform: capitalize; }
.cierres-ficha__frase { margin: 8px 0 0; max-width: 78ch; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.cierres-ficha__acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
/* El desplegable abierto se marca, que si no no se sabe cual de los dos trajo
   lo que hay debajo. */
.cierres-ficha__acciones .btn.es-elegido { border-color: var(--brand); color: var(--brand); }

/* Lo que sale al pedirlo: el calendario de dias o la tabla por area. */
.cierres-desplegado { margin-top: 14px; }
.cierres-desplegado .cierres__calendario { max-width: 340px; }

/* El estado del mes elegido, dicho entero y no con una sola palabra. */
.cierres__estado-frase { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-muted); }

/* Las tres maneras de cerrar, plegadas: estorban cuando ya se sabe. */
.cierres-como { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.cierres-como > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--brand); }
.cierres-como__lista { margin: 10px 0 8px; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.cierres-como__lista strong { color: var(--text); }

.cierres__intro { margin-bottom: 0; }
/* Los dias que todavia quedan de plazo, en banda; el elegido, macizo. */
.date-picker__day--periodo { background: var(--brand-light); color: var(--brand); font-weight: 700; }
.cierres__leyenda {
  display: flex; flex-wrap: wrap; gap: 14px; margin: 14px 0 0; padding-top: 13px;
  border-top: 1px solid var(--border); color: var(--text-muted); font-size: 11px;
}
.cierres__leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.cierres__muestra {
  width: 13px; height: 13px; border-radius: var(--radius-icon); background: var(--brand-light);
}
.cierres__muestra--cierre { background: var(--brand); }
.cierres__detalle { display: flex; min-width: 0; flex-direction: column; gap: 18px; }
.cierres__estado-periodo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.cierres__estado-periodo .campo__label { margin: 0; }
.cierres__calendario .date-picker__selection { flex-wrap: wrap; }
.cierres__resumen-mes {
  display: flex; align-items: center; gap: 4px;
  font-size: 17px; font-weight: 800; letter-spacing: -.02em; text-transform: capitalize;
}
.cierres__resumen-mes .date-picker__nav { width: 26px; height: 26px; font-size: 19px; }
.cierres__titulo { display: block; margin-bottom: 8px; }
/* Todas las areas es una fila mas, no una barra aparte: misma tabla, mismas
   columnas. Lo unico que la separa de las suyas es el peso y una linea. */
/* El fondo va en la FILA y no en sus celdas: la celda de acciones es flex, se
   encoge a su contenido y dejaria el resto de su columna en blanco. */
.cierres__fila-todas { background: var(--surface-2); border-bottom: 2px solid var(--border); }
.cierres__fila-todas > td { font-weight: 700; }
.he-alertas__regla { margin: 0; font-weight: 700; color: var(--text); }
.he-alertas__resumen { margin: 0 0 12px; color: var(--text-soft); }
.he-alertas__nota { padding: 12px 16px; border-left: 3px solid var(--warning); background: var(--warning-light); border-radius: var(--radius-sm); font-size: 12px; }
.he-alertas details { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }
.he-alertas summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.he-alertas td:first-child { font-weight: 800; color: var(--text); }
.he-alertas td:nth-child(5) { font-weight: 800; color: var(--warning-dark); white-space: nowrap; }
/* Los dias de la semana con hora extra, dentro del cajon de evidencia. En
   columnas porque son como mucho siete y en una lista larga se leen peor. */
.he-alertas__dias {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(112px, 100%), 1fr));
  gap: 6px 12px; margin: 0; padding: 0; list-style: none;
}
.he-alertas__dias li {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text-soft);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
/* El plazo en horas, dentro de la tarjeta del calendario: es la otra forma de
   decir cuando cierra, asi que va con los dias y separado por la misma linea
   que la leyenda. */
.cierres__plazo { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--border); }
.cierres__plazo .campo__label { display: block; margin: 0 0 7px; }
.cierres__plazo-control { display: flex; align-items: center; gap: 8px; }
.cierres__plazo-control input {
  width: 92px; height: 36px; padding: 0 10px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
  font: inherit; font-size: 13px; font-weight: 700;
}
.cierres__plazo-control input:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }
.cierres__plazo-unidad { color: var(--text-muted); font-size: 13px; }
.cierres__plazo .campo__ayuda { margin: 8px 0 0; }
@media (max-width: 820px) {
  .cierres { grid-template-columns: 1fr; }
  .cierres__calendario { width: 100%; }
  .cierres__plazo-control input { flex: 1; width: auto; }
}
tbody tr.is-abrible:hover .fila-abrir { border-color: var(--brand); color: var(--brand); }
tbody tr.is-elegida .fila-abrir { border-color: var(--brand); color: var(--brand); }

/* ---- Selector de persona ---- */
.selper { margin-top: 8px; }
.selper__avisos { margin: 6px 0 0; font-size: 12.5px; color: var(--warning-dark); }
.selper__lista { list-style: none; margin: 6px 0 0; padding: 0; max-height: 260px; overflow-y: auto; }
.selper__lista:not(:empty) { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.selper__fila { padding: 9px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.selper__fila:last-child { border-bottom: 0; }
.selper__fila.is-activa { background: var(--brand-light); box-shadow: inset 3px 0 0 var(--brand); }
/* No seleccionable no es solo un color mas palido: la fila lo dice con
   palabras en su propia advertencia. */
.selper__fila.is-bloqueada { cursor: not-allowed; opacity: .72; }
.selper__estado { padding: 10px 12px; color: var(--text-muted); font-size: 13px; }
.selper__cuenta { font-weight: 600; font-size: 13.5px; color: var(--text); }
.selper__marca { margin-left: 6px; padding: 1px 6px; border-radius: var(--radius-pill); background: var(--brand-light); color: var(--brand-dark); font-size: 11px; font-weight: 700; }
.selper__persona { font-size: 12.5px; color: var(--text-soft); }
.selper__correo { font-size: 12px; color: var(--text-muted); }
.selper__aviso { margin-top: 4px; font-size: 12px; color: var(--warning-dark); }
.selper__ficha { margin: 8px 0; padding: 8px 10px; border-left: 3px solid var(--brand); background: var(--surface-2); border-radius: var(--radius-icon); }
.selper__ficha--vacia { border-left-color: var(--border-strong); color: var(--text-muted); font-size: 13px; }
.selper__ficha-nombre { font-weight: 600; font-size: 13.5px; }
.selper__ficha-detalle { font-size: 12.5px; color: var(--text-soft); }

/* ---- Diagnostico de identidad ---- */
.identidad__resumen { display: flex; flex-wrap: wrap; gap: 18px; margin: 10px 0 14px; }
.identidad__dato { display: flex; flex-direction: column; min-width: 160px; }
.identidad__cifra { font-size: 22px; font-weight: 800; color: var(--text); }
.identidad__rotulo { font-size: 12.5px; color: var(--text-muted); }

/* ---- Bandeja de aprobaciones asignadas ---- */
.aprobacion { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 12px; background: var(--surface); }
.aprobacion__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.aprobacion__titulo { margin: 0; font-size: 14.5px; font-weight: 700; }
.aprobacion__datos { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 10px 0; }
.aprobacion__dato { display: flex; flex-direction: column; }
.aprobacion__rotulo { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.aprobacion__valor { font-size: 13.5px; color: var(--text); }
.aprobacion__justificacion { margin: 6px 0; font-size: 13px; color: var(--text-soft); }
.aprobacion__acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* ---- Trazabilidad ---- */
.traza__nodo { border-left: 3px solid var(--border-strong); padding: 8px 12px; margin-bottom: 10px; }
.traza__nodo--origen { border-left-style: dashed; }
.traza__nodo--pendiente { border-left-color: var(--brand); background: var(--brand-light); }
.traza__nodo--aprobado { border-left-color: var(--success); }
.traza__nodo--rechazado { border-left-color: var(--danger); }
/* Omitido no es aprobado: nadie lo firmo. Se atenua y se raya para que no se
   confunda con un paso que alguien miro. */
.traza__nodo--omitido { border-left-style: dashed; opacity: .7; }
.traza__nodo--omitido .traza__persona { text-decoration: line-through; }
.traza__paso { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; font-weight: 600; font-size: 13.5px; }
/* El estado va escrito, no solo coloreado. */
.traza__estado { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.traza__persona { font-size: 12.5px; color: var(--text-soft); overflow-wrap: anywhere; }
.traza__fecha, .traza__nota { font-size: 12px; color: var(--text-muted); }

@media (max-width: 640px) {
  .aprobacion__datos { gap: 8px 14px; }
  .cadena__controles { flex-direction: column; align-items: stretch; }
}

/* Persona de la dotacion que todavia no tiene cuenta: se ve, se explica y se
   le puede abrir una desde aqui. Es la unica accion del selector que escribe,
   asi que va con boton propio y con la letra pequena delante, no detras. */
.selper__persona--sin-cuenta { color: var(--warning-dark); }
.selper__alta { margin-top: 6px; }
.selper__nota { margin-top: 4px; font-size: 11.5px; color: var(--text-muted); line-height: 1.45; }

/* Lista de flujos: el nombre manda y el estado va debajo, en pequeno. */
.flujo__nombre { font-weight: 600; color: var(--text); }
.flujo__sub { font-size: 11.5px; color: var(--text-muted); }

/* Quien puede emitir solicitudes por el area, dentro del nodo inicial. */
/* El nodo inicial, dentro del cajon. Que se pide va en grande porque es lo
   primero que hay que saber para entender la cadena entera. */
/* `.inicio__capacidad` y `.inicio__seccion*` se fueron: sin usos. */
  margin: 0 0 6px; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-soft);
}

/* Vive dentro del cajon del nodo inicial: sin panel propio ni ancho que acotar. */
/* Mismo motivo que la cadena: son dos lineas por persona, no una tabla de 19
   columnas. Estirarlas a sangre deja el "por su perfil" a un metro del nombre. */
.registro-area { margin: 4px 0 12px; }
.registro-area__datos { min-width: 0; }
.registro-area__fila {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--line);
}
.registro-area__fila:last-child { border-bottom: 0; }
.registro-area__nombre { font-size: 13.5px; font-weight: 600; color: var(--text); }
.registro-area__detalle { font-size: 12px; color: var(--text-soft); }
/* Lo que viene de un perfil se marca con palabras, no solo en gris. */
.registro-area__via { font-size: 11.5px; color: var(--text-muted); font-style: italic; }
.registro-area__grupo { font-size: 12px; color: var(--brand-dark); }
/* Elegir de una lista cerrada: hereda .campo select y solo necesita separarse
   de las fichas que lleva encima. */
.campo .elegir { margin-top: 6px; }

/* Campo, operador y valor en una linea: el operador ocupa lo justo y el resto
   se reparte, que es como se lee una condicion. */
.condicion { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.condicion > * { margin-top: 0; flex: 1 1 0; min-width: 0; }
.condicion > :nth-child(2) { flex: 0 0 92px; }
/* Seleccion de colaboradores para solicitudes delegadas. */
.personas-solicitables { padding: 16px; }
.personas-solicitables .campo { display: grid; gap: 8px; margin-top: 12px; }
.personas-solicitables__lista { display: grid; gap: 8px; }
.personas-solicitables__fila { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); }
.personas-solicitables__fila > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.personas-solicitables__fila strong, .personas-solicitables__fila small { display: block; }
.personas-solicitables__fila small { margin-top: 4px; color: var(--text-muted); }
.personas-solicitables__fila .btn { flex-shrink: 0; }
/* Editor de cuentas: simulación a la izquierda, ficha a la derecha. */
.cajon.usuario-editor { width: min(1440px, 96vw); max-width: none; }
.cajon.usuario-editor--datos { width: min(560px, 96vw); }
.usuario-editor.usuario-editor--datos .cajon__cuerpo { display: block; }
.cajon.usuario-editor--perfil { width: min(620px, 96vw); }
.usuario-editor.usuario-editor--perfil .cajon__cuerpo { display: block; padding: 24px; }
.cajon.usuario-editor--vista { width: min(1120px, 96vw); }
.usuario-editor.usuario-editor--vista .cajon__cuerpo { display: block; padding: 22px; }
.usuario-editor--vista .usuario-preview { position: static; width: 100%; }
.usuario-editor--vista .usuario-preview__shell { min-height: 620px; }
/* En el perfil la vista previa se abre como segundo cajón, a la izquierda.
   Ambos paneles conservan su propio scroll y nunca se dibujan uno encima del
   otro. El ancho se adapta para que los dos sigan cabiendo en 960px. */
body.usuarios--vista-abierta .usuario-editor--perfil {
  position: absolute; top: var(--cajon-margen, 14px); right: var(--cajon-margen, 14px); bottom: var(--cajon-margen, 14px);
  height: auto; width: min(620px, 42vw);
}
body.usuarios--vista-abierta .usuario-editor--vista {
  position: absolute; top: var(--cajon-margen, 14px); right: calc(min(620px, 42vw) + 28px); bottom: var(--cajon-margen, 14px);
  /* `100%` y no `100vw`: este panel es `position:absolute` dentro de un
     `.cajon__fondo` `fixed`, que NO incluye la barra de desplazamiento, asi que
     mezclar las dos unidades calculaba 12 px de mas y descuadraba el par de
     paneles respecto al margen de la derecha. */
  height: auto; width: min(780px, calc(100% - min(620px, 42vw) - 56px));
}
/* El velo pertenece al fondo de la vista, no al perfil que queda al lado. */
body.usuarios--vista-abierta .cajon__fondo:has(.usuario-editor--vista) { background: transparent; pointer-events: none; }
body.usuarios--vista-abierta .cajon__fondo:has(.usuario-editor--vista) .usuario-editor--vista { pointer-events: auto; }
.usuario-editor form > [hidden], .usuario-editor__acciones > [hidden] { display: none !important; }
.usuario-editor form > .aviso { flex: none; }
.usuario-editor .cajon__cuerpo { display:grid; grid-template-columns:minmax(0,1fr) 390px; gap:28px; padding:24px; align-items:start; }
.usuario-editor .cajon__cuerpo > form { min-width:0; padding:0 6px; display:flex; flex-direction:column; height:calc(100dvh - 150px); }
/* El `padding-top` de 10px no es aire decorativo: es el hueco que necesita la
   muesca del primer campo.

   Los rotulos de los campos van `position:absolute; top:0` con
   `transform: translateY(-50%)`, o sea la mitad del texto queda POR ENCIMA del
   borde superior de su campo. Como este contenedor desplaza (`overflow-y:auto`),
   esa mitad caia fuera de su caja y el navegador la recortaba: «Nombre de
   usuario» se veia cortado a media altura al abrir «Crear usuario».

   Cualquier contenedor que desplace y lleve campos con muesca necesita lo
   mismo. */
.usuario-editor__campos { overflow-y:auto; flex:1; min-height:0; padding:10px 10px 20px 0; }
.usuario-editor__campos > * { margin-bottom:18px; }
.usuario-editor__acciones { flex:none; padding:16px 0 0; background:var(--surface); border-top:1px solid var(--border); }
.usuario-editor details summary { cursor:pointer; padding:12px 0; font-size:12px; color:var(--text-muted); }
.usuario-editor .cajon__cuerpo > div[hidden] { display:none; }
.usuario-editor .cajon__cuerpo > div:not([hidden]):not(.usuario-preview) { grid-column:1/-1; }
.usuario-editor form > .campo, .usuario-editor form > div, .usuario-editor form > section { margin-bottom:18px; }
/* El resumen "Qué podrá hacer con este perfil" SÍ se muestra en el editor
   (antes estaba oculto): es la forma de ver qué otorga el perfil base. Se
   oculta solo cuando el acceso es avanzado/personalizado (JS pone [hidden]). */
.usuario-editor .acceso-rol { display:block; }
.usuario-editor .acceso-rol[hidden] { display:none; }
.usuario-personalizado { background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:18px; }
/* Permisos especiales de la ficha de usuario: el mismo recuadro e interruptor
   que «Personalizado», con nombre y explicacion en cada fila. */
.usuario-especiales__titulo { display:block; margin-bottom:4px; }
.usuario-especiales .campo__ayuda { margin:0 0 10px; }
.usuario-especiales__fila { gap:14px; padding:10px 0; margin-bottom:0; border-top:1px solid var(--border); }
.usuario-especiales__textos { display:flex; flex-direction:column; gap:2px; min-width:0; }
.usuario-especiales__nombre { font-size:13px; font-weight:600; color:var(--text); }
.usuario-especiales__detalle { font-size:12px; color:var(--text-muted); line-height:1.4; }
/* Resumen vivo de los perfiles adicionales marcados ("con esto ademas podra…"). */
.usuario-especiales__resumen { margin:4px 0 12px; padding:12px 14px; border-radius:9px; background:var(--brand-tint); border:1px solid var(--brand-line); }
.usuario-especiales__resumen-titulo { margin:0 0 6px; font-size:12px; font-weight:800; color:var(--brand-dark); }
.usuario-especiales__resumen-lista { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:3px; }
.usuario-especiales__resumen-lista li { font-size:12px; color:var(--text-soft); line-height:1.4; }
.usuario-especiales__resumen-lista strong { color:var(--text); font-weight:600; }
.usuario-especiales__fila input { flex:none; }
.usuario-personalizado__switch { display:flex; justify-content:space-between; align-items:center; cursor:pointer; margin-bottom:12px; }
/* Con [type="checkbox"]: la casilla global (`input[type="checkbox"]:not([hidden])`)
   pesa (0,2,1) -el :not() suma su argumento- y le ganaba a `… input` (0,1,1).
   El interruptor de «Personalizado» se veia como una casilla de 17 px. */
.usuario-personalizado__switch input[type="checkbox"] { appearance:none; display:block; width:42px; height:24px; border:0; border-radius:12px; background:var(--border-strong); padding:3px; cursor:pointer; }
.usuario-personalizado__switch input[type="checkbox"]::before { display:none; }
.usuario-personalizado__switch input[type="checkbox"]::after { content:''; display:block; width:18px; height:18px; border-radius:50%; background:var(--surface); box-shadow:0 1px 2px rgba(15,23,42,.18); transition:transform .15s; }
.usuario-personalizado__switch input[type="checkbox"]:checked { background:var(--brand); }
.usuario-personalizado__switch input[type="checkbox"]:checked::after { transform:translateX(18px); }
.usuario-seccion { background:var(--surface); border:1px solid var(--border); border-radius:7px; padding:14px; margin:14px 0; }
.usuario-seccion__top { display:flex; align-items:center; justify-content:space-between; color:var(--text-muted); font-size:11px; margin-bottom:12px; }
.usuario-seccion .campo { display:block; margin-bottom:12px; }
.usuario-preview { position:sticky; top:0; min-width:0; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; background:var(--surface); box-shadow:var(--e4); }
.usuario-preview__head { display:flex; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid var(--border); color:var(--text-muted); font-size:10px; }
.usuario-preview__eyebrow { color:var(--brand); font-size:10px; font-weight:800; letter-spacing:.12em; }
.usuario-preview__shell { display:grid; grid-template-columns:150px minmax(0,1fr); min-height:560px; }
.usuario-preview__nav { border-right:1px solid var(--border); display:flex; align-items:stretch; flex-direction:column; gap:10px; padding:22px 12px; font-size:11px; }
.usuario-preview__nav small { color:var(--text-muted); overflow-wrap:anywhere; margin-bottom:20px; }
.usuario-preview__brand { background:var(--brand); color:var(--on-brand); border-radius:6px; width:34px; padding:10px 3px; font-size:10px; font-weight:800; text-align:center; margin-bottom:20px; }
.usuario-preview__link { text-align:left; border:0; border-radius:5px; background:transparent; color:var(--text-muted); padding:10px; cursor:pointer; font:inherit; }
.usuario-preview__link.is-active { color:var(--brand); background:var(--brand-light); font-weight:700; }
.usuario-preview__screen { padding:30px 24px; min-width:0; }
.usuario-preview__screen h2 { margin:16px 0 12px; font-size:22px; }
.usuario-preview__scopes { display:flex; gap:8px; flex-wrap:wrap; margin:24px 0; }
.usuario-preview__chip { border:1px solid var(--border); border-radius:4px; padding:7px 10px; font-size:10px; color:var(--text-soft); }
.usuario-preview__actions { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.usuario-preview__actions button:disabled { opacity:.8; }
.usuario-preview__tabs { font-size:11px; color:var(--text-soft); padding-bottom:16px; border-bottom:1px solid var(--border); }
.usuario-preview__table { border:1px solid var(--border); border-radius:6px; overflow:hidden; margin-top:18px; }
.usuario-preview__columns { padding:12px; background:var(--brand); color:#fff; font-size:9px; word-spacing:10px; }
.usuario-preview__table p { padding:65px 12px; text-align:center; color: var(--text-muted); font-size:11px; }
.usuario-preview__foot { color:var(--text-muted); font-size:10px; line-height:1.8; margin-top:24px; }
.usuario-preview__notice { padding:12px; background:var(--warning-light); border-radius:5px; color:var(--warning-dark); font-size:11px; }
@media(max-width:1050px) { .usuario-editor .cajon__cuerpo { grid-template-columns:minmax(0,1fr) 340px; gap:16px; padding:16px; } .usuario-preview__shell { grid-template-columns:115px minmax(0,1fr); } .usuario-preview__screen { padding:20px 14px; } }
/* `width:100%` y no `100vw`: el contenedor es `.cajon__fondo`, que es
   `position:fixed; inset:0` CON `padding: var(--cajon-margen,14px)`, o sea que
   su caja de contenido mide la ventana menos 28 px. `100vw`, encima, incluye la
   barra de desplazamiento (12 px aqui). El cajon pedia ~40 px mas de los que
   tenia y, con `justify-content:flex-end` en el fondo, se comia el margen
   derecho y sobresalia por la izquierda. */
@media(max-width:760px) { .cajon.usuario-editor { width:100%; } .usuario-editor .cajon__cuerpo { display:flex; flex-direction:column-reverse; } .usuario-editor .cajon__cuerpo > form,.usuario-preview { width:100%; height:auto; } .usuario-editor__campos { overflow:visible; } .usuario-preview { position:static; } .usuario-preview__shell { min-height:380px; } .usuario-editor--vista .usuario-preview__shell { min-height:520px; } }
/* ---------- Automatizaciones de horas extras ----------
   Una lista de reglas y un cajon para escribirlas. Casi todo sale de clases
   que ya existen -tabla, badge, aviso, cajon, campo, fila-abrir-; lo propio
   es la FILA DE CONDICION, que es una linea con cuatro mandos y tiene que
   leerse como la frase que es: «Y | tipo de dia | es | domingo».
   Este bloque sustituye al de cadenas y pasos: aquella pantalla ensenaba la
   forma que el motor tiene por dentro, y ya no se ensena. */
.nombre-cadena { color: var(--text); font-weight: 700; }
.regla-titulo {
  margin: 22px 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted);
}
.regla-conds { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
/* Los <select> los envuelve controles.js en .select-ui, asi que los hijos de
   la rejilla son los envoltorios, no los selects. */
.regla-cond { display: grid; grid-template-columns: 64px minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr) 34px; gap: 7px; align-items: center; }
.regla-cond input {
  width: 100%; height: 40px; padding: 0 13px; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.regla-cond input:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }
.regla-cond input:disabled { background: var(--surface-2); color: var(--text-soft); }
/* La primera condicion no se une a nada. Se le quita la vista, no el sitio:
   con display:none su columna se colapsaria y las filas de abajo quedarian
   descuadradas respecto a la de arriba. */
.regla-cond--primera > :first-child { visibility: hidden; }
.regla-cond__quitar { width: 34px; height: 34px; padding: 0; font-size: 16px; }
/* El cajon es una columna flex: sin esto el boton se estira de lado a lado y
   deja de parecer un boton. */
.regla-anadir { align-self: flex-start; }
/* La regla entera en palabras, debajo de sus mandos: es lo que se va a leer
   en la tabla, y verlo mientras se escribe evita publicar una frase que dice
   otra cosa de la que se queria decir. */
.regla-resumen {
  margin: 10px 0 0; padding: 11px 13px; background: var(--brand-tint);
  border-left: 3px solid var(--brand); border-radius: var(--radius-sm);
  color: var(--text-soft); font-size: 12px; font-weight: 600; line-height: 1.5;
}
.regla-resumen:empty { display: none; }
.regla-ventana { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.regla-ventana .campo { margin-bottom: 0; }
.regla-texto { max-width: 420px; color: var(--text-soft); line-height: 1.5; }
/* El motivo por el que una regla publicada no rige. En ambar y no en gris:
   es lo unico de esa celda que pide que alguien haga algo. */
.vigencia-sin-efecto {
  margin-top: 5px; max-width: 200px; color: var(--warning-dark);
  font-size: 11px; font-weight: 600; line-height: 1.4;
}
@media (max-width: 700px) {
  .regla-cond { grid-template-columns: minmax(0, 1fr) 34px; }
  .regla-cond > :first-child, .regla-cond > :nth-child(2) { grid-column: 1 / -1; }
  .regla-cond--primera > :first-child { display: none; }
  .regla-ventana { grid-template-columns: minmax(0, 1fr); }
}
.solicitud-filtros__barra { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:16px 0; }
.solicitud-filtros__resumen, .solicitud-filtros__ayuda { color:var(--text-muted); font-size:12px; line-height:1.6; }
.solicitud-filtros__grupo { border-bottom:1px solid var(--border); padding:4px 0 22px; margin-bottom:22px; }
.solicitud-filtros__grupo summary { font-size:14px; font-weight:650; cursor:pointer; margin-bottom:18px; }
.solicitud-filtros__rejilla { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 14px; }
.solicitud-filtros__rejilla .campo { min-width:0; margin:0; }
.solicitud-filtros__atajos { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
.solicitud-filtros__atajos .btn { font-size:11px; }
/* Pie de cajon, no un pie propio: lleva `.cajon__pie` y aqui solo queda lo que
   de verdad cambia -los dos botones se reparten el ancho-. Antes cada cajon de
   filtros traia su propio relleno: 16/22 aqui, 14/20 en columnas y 16/22 en el
   de horas extras, contra 12/18/14/22 del sistema. Tres cajones que hacen lo
   mismo no pueden tener tres pies distintos. */
.solicitud-filtros__pie .btn { flex: 1; }
@media(max-width:480px) { .solicitud-filtros__rejilla { grid-template-columns:1fr; } }
.filtros-columnas__barra { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:12px 0 16px; }
/* El envoltorio de las tablas montadas a mano -las que no pasan por
   `crearTabla`- no tenia NI UNA regla en la hoja: era un `div` suelto y el
   boton «Filtros» caia en un sitio distinto que en las veinte tablas del
   estandar. Ahora `filtros-columnas.js` sube el boton a `.panel__acciones`
   cuando la tabla vive en un panel, igual que `crearTabla`; esto cubre el caso
   en el que no hay panel y la barra se queda donde nace. */
.filtros-columnas__local { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.filtros-columnas__local:empty { display:none; }
/* `--muted` no existe: estos dos textos llevaban un color que nunca se aplico
   y salian del color heredado. El token es --text-muted. */
.filtros-columnas__resumen { color:var(--text-muted); font-size:12px; line-height:1.6; }
/* El constructor de condiciones -«Condiciones avanzadas»- se retiro: era una
   segunda forma de poner un filtro, con otro lenguaje, plegada al final del
   cajon y sin que nada dijera cual usar ni que las dos se sumaban. Sus
   comparaciones viven ahora dentro del campo encendido, en un desplegable.
   Con el se fueron .filtros-columnas__reglas, __regla, __quitar y __vacio. */
.filtros-columnas__pie { align-items: center; }
/* Los botones ya no se reparten el ancho: con el recuento al lado, estirarlos
   dejaba «Quitar todas» tan grande como «Aplicar» y los dos lejos del texto. */
.filtros-columnas__pie .btn { flex:0 0 auto; }

/* El recuento en vivo: cuantas filas quedarian ANTES de aplicar. */
.filtros-columnas__recuento {
  margin-left:auto; color:var(--text-muted); font-size:12px; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.filtros-columnas__recuento b { color:var(--brand); font-weight:700; }
.filtros-columnas__recuento[hidden] { display:none; }
/* Mientras se consulta, el numero de antes se apaga en vez de desaparecer: si
   se vaciara, el pie daria un salto en cada tecla. */
.filtros-columnas__recuento.es-calculando { opacity:.45; }
/* El @media que habia aqui colocaba `.filtros-columnas__regla` y su variante de
   rango, que se fueron con el selector de operadores. Cero usos en JS. */

/* ==========================================================================
   KIT MATERIAL v2 — capa de adopcion
   --------------------------------------------------------------------------
   Va al final a proposito: lo que hay aqui refina o anade, nunca reescribe.
   Los componentes de arriba ya se repintaron solos al cambiar los tokens; esto
   agrega las piezas que el kit trae y la hoja no tenia, y el modo oscuro.
   ========================================================================== */

/* ---------- Iconografia Material Symbols ----------
   Convive con los SVG de trazo del armazon: los nuevos usos van con .ms y los
   antiguos se migran cuando se toque cada pantalla. */
.ms {
  font-family: "Material Symbols Outlined";
  font-weight: normal; font-style: normal; line-height: 1 !important;
  letter-spacing: normal; text-transform: none; display: inline-block;
  white-space: nowrap; word-wrap: normal; direction: ltr;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  user-select: none; vertical-align: middle;
}
.ms-fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.ms-sm { font-size: 18px; }
.ms-lg { font-size: 28px; }

/* ---------- Utilidades de elevacion ---------- */
.e1 { box-shadow: var(--e1); }
.e2 { box-shadow: var(--e2); }
.e4 { box-shadow: var(--e4); }
.e8 { box-shadow: var(--e8); }

/* ---------- Movimiento ----------
   'lift' es el gesto del kit: la superficie sube un poco al pasar por encima.
   Se respeta a quien pidio menos animacion en su sistema. */
.lift { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.lift:hover { transform: translateY(-4px); box-shadow: var(--e8); }
@media (prefers-reduced-motion: reduce) {
  .lift { transition: none; }
  .lift:hover { transform: none; }
}

/* ---------- Superficies de caracter ---------- */
.glass {
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 8px 32px rgba(15,23,42,.18);
}
/* `.grad-mesh` era una utilidad del kit que nunca se uso. */

/* ---------- Chip seleccionable ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border-radius: var(--radius-pill); font-size: 12px; background: var(--surface);
  border: 1px solid var(--border); color: var(--text); cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.chip:hover { border-color: var(--border-strong); }
.chip.on { background: var(--brand-light); border-color: var(--brand); color: var(--brand); }

/* ---------- Tooltip sin JavaScript ---------- */
.tip { position: relative; }
.tip::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--globo-fondo); color: var(--globo-texto); font-size: 11px; padding: 6px 10px;
  border-radius: var(--radius-md); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 70;
}
.tip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Esqueleto de carga ----------
   Sustituye al salto en blanco mientras la API responde. */
/* `.skel` -el esqueleto de carga del kit- nunca se uso: las pantallas cargan
   con `kpisCargando` y el vacio de la tabla. */

/* ---------- Refinamientos Material sobre lo que ya existia ---------- */

/* Los titulos toman el azul profundo del kit; el cuerpo se queda en 'ink'. */
h1, h2, h3, .panel__titulo, .kpi__valor { color: var(--navy); letter-spacing: -.01em; }

/* El boton primario gana la elevacion del kit y la responde al pulsarlo. */
.btn--primario { box-shadow: var(--e1); }
.btn--primario:hover { box-shadow: var(--e2); }
.btn--primario:active { box-shadow: var(--e1); transform: translateY(1px); }

/* Las tarjetas de indicador flotan en vez de apoyarse en un borde. */
.kpi {
  box-shadow: var(--e1);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.kpi:hover { transform: translateY(-3px); box-shadow: var(--e4); }
@media (prefers-reduced-motion: reduce) { .kpi { transition: none; } .kpi:hover { transform: none; } }

/* Interruptor del kit, para el modo oscuro y cualquier ajuste binario. */
.sw {
  width: 44px; height: 24px; border-radius: var(--radius-pill); position: relative;
  transition: background-color .2s; background: var(--text-faint);
  border: 0; padding: 0; cursor: pointer; flex: 0 0 auto;
}
.sw.on { background: var(--brand); }
.sw > span {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: var(--e1); transition: left .2s;
}
.sw.on > span { left: 22px; }

/* ==========================================================================
   MODO OSCURO
   --------------------------------------------------------------------------
   Es una redefinicion de tokens y nada mas: cada componente de la hoja ya
   pinta con variables, asi que no hay que duplicar una sola regla. Lo que si
   hace falta es lo que estaba escrito en color literal, que se corrige abajo.
   ========================================================================== */
html.dark {
  --brand:        #60A5FA;
  --graf-linea:   #6CB0F0;
  --graf-previa:  #4A5A70;
  /* El texto que va ENCIMA del azul. En claro es blanco sobre #1A56DB y se lee;
     en oscuro el azul se aclara a #60A5FA y el blanco encima da 2,54:1, por
     debajo del minimo legible. Con el fondo oscuro como tinta son 6,7:1. Es el
     tratamiento de siempre para un acento claro sobre tema oscuro. */
  --on-brand:     #0F172A;
  --brand-dark:   #3B82F6;
  --brand-light:  rgba(96, 165, 250, .14);
  --brand-tint:   #1E293B;
  --brand-line:   #2F4468;

  --navy:         #E4E9F0;
  /* En oscuro el globo se aclara un punto para despegarse del fondo. */
  --globo-fondo:  #10305F;
  --globo-texto:  #EEF3FA;
  --navy-light:   #C7D2E0;

  --bg:           #0F172A;
  --surface:      #1E293B;
  --surface-2:    #243149;
  --border:       #334155;
  --border-strong:#475569;
  --line:         #2A3A55;

  /* Mismo criterio que en claro, invertido: --text-soft pinta las celdas, asi
     que tiene que quedar CERCA del blanco, no a medio camino. */
  --text:         #E4E9F0;
  --text-soft:    #C3CDDA;
  --text-muted:   #9AA7B8;
  --text-faint:   #64748B;

  /* Una cebra casi imperceptible: en oscuro, dos tonos de fondo distintos
     cansan mucho antes que en claro. */
  --zebra:        rgba(255, 255, 255, .028);

  --danger-light: rgba(211, 47, 47, .18);
  --danger-line:  #7F2A2A;
  --warning-line: #6B4A1A;
  --success-light:rgba(22, 163, 74, .18);
  --success-line: #2F6B47;
  --warning-light:rgba(237, 108, 2, .18);
  --info-light:   rgba(2, 136, 209, .18);
  --accent-light: rgba(255, 107, 0, .16);
  --coral-light:  rgba(233, 85, 106, .16);

  /* LAS TINTAS, que faltaban.
     Los `*-light` de arriba si se redefinian, pero sus parejas `*-dark` no: se
     quedaban con el valor de claro -#B35400, #B71C1C, #12833F...- que es una
     tinta OSCURA. Y los distintivos de estado son exactamente esa pareja:
     `.badge--pendiente` pinta `--warning-dark` sobre `--warning-light`, que en
     oscuro es un translucido sobre `--surface` (#1E293B). O sea «Pendiente» en
     marron oscuro sobre azul oscuro: no se lee. No era un color en literal, era
     un token sin contrapartida, por eso la revision anterior no lo vio.
     Los valores son los mismos tonos aclarados hasta despegarse del fondo. */
  --danger-dark:  #FCA5A5;
  --success-dark: #6EE7A8;
  --warning-dark: #FBBF77;
  --info-dark:    #7DD3FC;
  --accent-dark:  #FFB380;
  --coral-dark:   #FDA4AF;

  --e1: 0 1px 3px rgba(0, 0, 0, .45);
  --e2: 0 3px 8px rgba(0, 0, 0, .50);
  --e4: 0 10px 22px rgba(0, 0, 0, .55);
  --e8: 0 18px 38px rgba(0, 0, 0, .60);
  --focus-ring: 0 0 0 3px rgba(96, 165, 250, .25);

  color-scheme: dark;
}

/* El esqueleto brilla en claro; en oscuro el destello tiene que ser tenue. */
/* El tooltip usaba el navy como fondo, y en oscuro el navy es casi blanco. */
html.dark .tip::after { background: #0B1220; color: #E4E9F0; }
/* Los pocos blancos literales de la hoja. */
html.dark .glass { background: rgba(15,23,42,.35); border-color: rgba(255,255,255,.16); }

/* La transicion se pone al cambiar de modo y se quita enseguida (lo hace
   layout.js): sin esto, cada hover repintaria con retardo. */
html.tema-en-transicion,
html.tema-en-transicion * {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease !important;
}

/* ---------- Interruptor de tema en la barra superior ---------- */
.tema-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text-soft); cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.tema-toggle:hover { background: var(--surface-2); color: var(--brand); border-color: var(--border-strong); }
.tema-toggle .ms { font-size: 19px; }

/* ==========================================================================
   KIT MATERIAL v2 — COMPONENTES (la forma)
   --------------------------------------------------------------------------
   La capa anterior cambio los COLORES; esta cambia la FORMA: alturas, radios,
   pesos, densidad y la muesca del campo outlined.

   Una cosa NO se adopta del kit: el cuerpo de 14px. Esta intranet trabaja a
   13px y no es capricho -el cierre de RR.HH. son 19 columnas en una tabla-.
   Subirlo obliga a desplazar horizontalmente la pantalla que mas se usa.
   ========================================================================== */

/* ---------- Botones ----------
   Material: 36px de alto, 4px de radio y peso medio. El 700 anterior gritaba
   al lado de Roboto. */
.btn {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  padding: 0 18px;
  box-shadow: var(--e1);
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn:hover:not(:disabled) { box-shadow: var(--e2); }
.btn:active:not(:disabled) { box-shadow: var(--e1); }

/* Secundario = boton 'outlined' del kit. */
.btn--ghost {
  background: var(--surface);
  color: var(--brand);
  border-color: var(--border-strong);
  font-weight: 500;
  box-shadow: none;
}
.btn--ghost:hover:not(:disabled) {
  background: var(--brand-light);
  color: var(--brand);
  border-color: var(--brand);
  box-shadow: none;
}
/* El de icono no lleva contorno: en una fila de tabla son seis marcos seguidos. */
.btn--icono { box-shadow: none; }

/* ---------- Campos: outlined con muesca ----------
   El label se apoya SIEMPRE sobre el borde superior, con el fondo de la
   superficie detras para abrirle hueco a la linea.

   Siempre arriba y no flotando al escribir: el <label> va ANTES del <input>
   en las 32 paginas y la mitad de los campos no llevan placeholder, asi que
   ni :placeholder-shown ni un :has() encima detectan bien "tiene contenido".
   Un label que flota mal es peor que uno que no flota. */
.campo {
  position: relative;
  margin-bottom: 20px;
}

/* La muesca SOLO donde hay un campo de texto de verdad.
   Un .campo tambien envuelve grupos de casillas y controles propios, y ahi el
   label tiene que seguir en el flujo normal: colgado en absoluto se salia del
   panel -"Turnos (multiple)" aparecia flotando sobre la cabecera del cajon-. */
.campo:has(> input:not([type="checkbox"]):not([type="radio"])),
.campo:has(> select),
.campo:has(> textarea) { gap: 0; }

.campo:has(> input:not([type="checkbox"]):not([type="radio"])) > .campo__label,
.campo:has(> select) > .campo__label,
.campo:has(> textarea) > .campo__label {
  position: absolute;
  top: 0;
  left: 9px;
  transform: translateY(-50%);
  z-index: 1;
  padding: 0 5px;
  background: var(--surface);
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  line-height: 1;
  pointer-events: none;
  max-width: calc(100% - 18px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Las casillas quedan fuera a proposito: la hoja ya tenia una excepcion para
   ellas mas arriba y esta regla, por venir despues, se la comia -una casilla
   pasaba a ser un rectangulo de 44px-. */
.campo input:not([type="checkbox"]):not([type="radio"]),
.campo select,
.campo textarea {
  height: 44px;
  padding: 0 13px;
  font-size: 13px;
  font-weight: 400;
  border-color: var(--border-strong);
  transition: border-color .15s, box-shadow .15s;
}

/* Label que se queda en el flujo (grupos de casillas): mismo idioma Material
   que el de la muesca, sin versalitas. */
.campo__label {
  font-size: 11.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}
.campo textarea { height: auto; min-height: 88px; padding: 13px; font-weight: 400; }
/* Foco Material: el contorno engorda, no crece un halo alrededor. */
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.campo:focus-within > .campo__label { color: var(--brand); }
.campo input::placeholder, .campo textarea::placeholder { font-weight: 400; }

/* La muesca necesita ver el fondo real: dentro de un panel gris, el label
   quedaba con un rectangulo blanco flotando detras. */
.panel--gris .campo__label { background: var(--surface-2); }

/* ---------- Tablas ----------
   Aqui habia un `thead th` y un `tbody td` enteros -de la etapa Material- que
   NO llegaban a aplicarse: el bloque de mas abajo, el que sigue a FoodPass,
   redefine todas sus propiedades. Se quitaron: eran dos de los SEIS `thead th`
   globales que habia en la hoja, y quien buscara «por que la cabecera mide
   esto» daba antes con el que no manda. */
tbody tr { transition: background-color .12s; }

/* ---------- Superficies ----------
   Aqui habia un `.panel`/`.kpi` con `border:none` y sombra que no llegaba a
   aplicarse: mas abajo se decidio borde fino y sin sombra. Se quita para que no
   queden dos respuestas distintas a la misma pregunta. */

/* ---------- Menu lateral ----------
   Sigue la variante 'Flotante' del kit: fila de 44px redondeada, activa en
   azul palido. La variante de barra a la derecha no encaja porque el menu de
   esta intranet tiene margen horizontal y el trazo no llegaria al borde. */
.nav-link {
  height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 400;
  gap: 12px;
}
.nav-link.active { background: var(--brand-light); color: var(--brand); font-weight: 500; }
.nav-link .ms { font-size: 20px; flex: 0 0 20px; }
.nav-link.active .ms { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }

.sidebar__label { font-weight: 500; color: var(--text-muted); letter-spacing: .12em; }

/* ---------- Barra superior ---------- */
.topbar__title { font-size: 20px; font-weight: 500; letter-spacing: -.01em; }

/* ---------- Distintivos de estado = badge del kit ----------
   Pildora en minusculas y peso medio. Las versalitas a 9,5px con 0.07em de
   prosa eran del lenguaje anterior. */
.badge {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 3px 10px;
  line-height: 1.5;
}

/* ---------- Barra de desplazamiento ----------
   La forma vale para TODO el proyecto: la ventana, las tablas, los cajones y
   cualquier caja que desborde. Una sola pastilla, completamente redondeada,
   carril invisible y sin flechas en las puntas.

   Antes esto decia `border-radius: 4px` sobre un pulgar de 8 px, que a ese
   tamano se lee como un palito cuadrado: era la barra que se veia en la ventana.

   El pulgar se afina con un borde transparente en vez de estrechar el carril:
   asi se ve delgado pero la zona donde se puede pinchar sigue siendo ancha. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--text-faint);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--text-muted); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: transparent; }

/* ==========================================================================
   KIT MATERIAL v2 — BARRA SUPERIOR Y TARJETA KPI
   --------------------------------------------------------------------------
   Los dos rasgos por los que se reconoce el kit de un vistazo y que faltaban:
   la barra navy con el acento naranja, y la tarjeta de indicador compuesta
   como rotulo -> numero grande -> icono arriba a la derecha.

   La barra NO usa --navy. En modo oscuro ese token se redefine a un gris casi
   blanco (lo usan los titulos), asi que la barra habria salido clara justo en
   el modo donde tiene que ser lo mas oscuro de la pantalla. Lleva token
   propio.
   ========================================================================== */
:root {
  /* El azul del encabezado de drsimi.cl. El navy del kit (#16284F) se probo y
     se descarto: apagaba la marca y leia como panel de administracion
     generico, no como la intranet de Farmacias del Dr. Simi. */
  --appbar:     #1747A2;
  --on-appbar:  #FFFFFF;
}
html.dark {
  /* El par --appbar/--on-appbar de este bloque quedaba anulado por el de mas
     abajo (busca `--appbar: #1E293B`), donde ahora vive la decision. */
  --on-appbar:  #E4E9F0;
}

/* ---------- Barra superior: app bar de Material ----------
   Sale del padding de .main con margen negativo para llegar a los bordes: una
   app bar que deja aire a los lados no parece una barra, parece una tarjeta. */
.main { padding-top: 0; }

.topbar {
  min-height: 56px;
  margin: 0 -26px;
  padding: 0 26px;
  background: var(--appbar);
  color: var(--on-appbar);
  border-radius: 0;
  box-shadow: var(--e2);
  position: relative;
  z-index: 5;
}
.topbar__title { color: var(--on-appbar); font-size: 17px; font-weight: 500; letter-spacing: 0; }
.topbar__sub   { color: color-mix(in srgb, var(--on-appbar) 62%, transparent); }

/* Lo que vive dentro de la barra deja de pintarse contra blanco. */
.topbar .usuario-chip__nombre { color: var(--on-appbar); }
.topbar .usuario-chip__rol    { color: color-mix(in srgb, var(--on-appbar) 60%, transparent); }
.topbar .usuario-chip__avatar {
  background: color-mix(in srgb, var(--on-appbar) 16%, transparent);
  color: var(--on-appbar);
}
.topbar .usuario-chip__sep { background: color-mix(in srgb, var(--on-appbar) 22%, transparent); }

.topbar .btn--ghost {
  background: transparent;
  color: var(--on-appbar);
  border-color: color-mix(in srgb, var(--on-appbar) 34%, transparent);
  box-shadow: none;
}
.topbar .btn--ghost:hover:not(:disabled) {
  background: color-mix(in srgb, var(--on-appbar) 12%, transparent);
  color: var(--on-appbar);
  border-color: color-mix(in srgb, var(--on-appbar) 55%, transparent);
}

.topbar .tema-toggle {
  background: transparent;
  color: color-mix(in srgb, var(--on-appbar) 80%, transparent);
  border-color: color-mix(in srgb, var(--on-appbar) 30%, transparent);
}
.topbar .tema-toggle:hover {
  background: color-mix(in srgb, var(--on-appbar) 12%, transparent);
  color: var(--on-appbar);
  border-color: color-mix(in srgb, var(--on-appbar) 55%, transparent);
}

/* Buscador de la barra: sobre navy, el campo blanco deslumbra. */
.topbar__buscador {
  background: color-mix(in srgb, var(--on-appbar) 12%, transparent);
  border-color: transparent;
  color: color-mix(in srgb, var(--on-appbar) 72%, transparent);
}
.topbar__buscador-icono { color: color-mix(in srgb, var(--on-appbar) 72%, transparent); }

/* El acento naranja del kit marca lo activo dentro de la barra. */
.topbar .btn--primario,
.topbar .is-activo { background: var(--accent); border-color: var(--accent); color: var(--on-brand); }

/* ---------- Tarjeta KPI: composicion del kit ----------
   Rotulo arriba, numero grande debajo, icono a la derecha. El marcado
   (icono + texto) se reordena con grid: no hace falta tocar kpis.js ni las
   pantallas que lo usan.

   Se conserva el cuadro de color del icono -el kit lo deja en un simbolo
   suelto- porque aqui ese color NO es decorativo: codifica el estado
   (pendiente / aprobada / rechazada) y es como se distingue una tarjeta de
   otra de un vistazo. */
.kpi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  padding: 20px;
}
.kpi__texto { grid-column: 1; grid-row: 1; gap: 6px; }
.kpi__icono { grid-column: 2; grid-row: 1; }

.kpi__label { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.kpi__value { font-size: 30px; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
.kpi__nota  { font-size: 11.5px; margin-top: 2px; }

/* ==========================================================================
   KIT MATERIAL v2 — LA ESCALA
   --------------------------------------------------------------------------
   Hasta aqui se habian adoptado color, tipografia, radios y bordes del kit,
   pero NO sus proporciones: el kit es un diseno de 14px con 24px de aire en
   las celdas y esto corria sobre una base compacta de 13px. Medido contra el
   kit, la diferencia era toda de escala -campo 44 vs 56, celda 12 vs 24-, y
   por eso "se parecia pero no era".

   Aqui se iguala la escala. La pantalla que motivo la base compacta -el
   cierre de RR.HH., 19 columnas- se resuelve al final con una excepcion
   explicita por pantalla, no bajandole el tamano a toda la intranet.
   ========================================================================== */

body { font-size: 14px; }

/* ---------- Botones: 36px, 14px, 24px de costado, sin prosa ----------
   El letter-spacing que llevaban era invento mio; el kit no lo tiene. */
.btn {
  font-size: 14px;
  padding: 0 24px;
  letter-spacing: normal;
}

/* ---------- Campos: 44px y 14px ----------
   Estaban en 56px y 16px, que es la medida «confortable» de Material. Los 16px
   tenian una razon concreta: por debajo de eso, iOS hace zoom solo al enfocar
   un campo.

   Se bajan a la medida densa -44px y 14px- por dos motivos:

     · Esta intranet se usa en escritorio. La regla de los 16px paga un precio
       -campos de 56px- por un problema que aqui no se da.
     · Todo lo demas se fue compactando: botones a 36, la barra partida a 30, la
       fila de filtros a 28. Al lado de eso, un campo de 56px con una sola linea
       de texto se leia como un `textarea` vacio.

   Si algun dia esto se usa en telefono de verdad, la vuelta es subir estos dos
   numeros, no repartir excepciones. */
.campo input:not([type="checkbox"]):not([type="radio"]),
.campo select,
.campo textarea {
  height: 44px;
  padding: 0 14px;
  font-size: 14px;
}
.campo textarea { height: auto; min-height: 88px; padding: 12px 14px; }

/* Y los controles PROPIOS que sustituyen al `<select>` y al `input[type=date]`
   tambien, cuando estan dentro de un campo de formulario. Sin esto median 40 px
   -su talla de barra- y quedaban 4 px mas bajos que el campo de texto de al
   lado: en la misma fila de «Crear usuario» convivian un texto de 44 y un
   desplegable de 40. Se ajusta SOLO dentro de `.campo`; en las barras siguen a
   40, que es donde ese tamano tiene sentido. */
.campo > .select-ui > .select-ui__trigger,
.campo > .date-time-ui > .date-time-ui__trigger {
  height: 44px; font-size: 14px; padding: 0 14px;
}

/* El label de la muesca toma el tamano que el kit le da cuando esta arriba. */
.campo:has(> input:not([type="checkbox"]):not([type="radio"])) > .campo__label,
.campo:has(> select) > .campo__label,
.campo:has(> textarea) > .campo__label {
  font-size: 12px;
  left: 12px;
}
.campo__label { font-size: 12px; }

/* ---------- Tablas ----------
   Aqui habia otro `thead th`/`tbody td` -de la etapa del kit, celda de 16x24-
   tambien anulado por completo por el bloque de FoodPass de mas abajo. Fuera. */

/* ---------- Distintivos y chips, con las medidas del kit ---------- */
.badge { font-size: 11px; font-weight: 500; padding: 2px 8px; }
.chip  { height: 32px; font-size: 13px; font-weight: 400; }

/* ==========================================================================
   EXCEPCION: PANTALLAS ANCHAS
   --------------------------------------------------------------------------
   Con 24px por celda, una tabla de 19 columnas no cabe en ninguna pantalla.
   Estas vuelven a la densidad compacta. Es una lista EXPLICITA y corta a
   proposito: si crece, la respuesta deja de ser una excepcion y pasa a ser
   que la escala elegida no sirve.

   La clase la pone layout.js a partir de la ruta (body.pagina-<ruta>).
   ========================================================================== */
body.pagina-he-rrhh,
body.pagina-horas-extras,
body.pagina-he-recientes,
body.pagina-he-reportes,
body.pagina-colaboradores { font-size: 13px; }

/* La talla de la tabla en estas pantallas se declaraba aqui Y otra vez mas
   abajo, con NUMEROS DISTINTOS (12/13 px aqui, 11/12.5 px alla). Misma
   especificidad, asi que ganaba la de abajo y esta no pintaba nada: quien
   viniera a mirar «por que las pantallas densas miden esto» daba antes con la
   que no manda. Se queda solo la de abajo, junto al resto de la variante densa. */

/* En esas pantallas el campo se queda ademas un punto mas chico. La ALTURA ya
   no hace falta declararla aqui: los 44px pasaron a ser el valor de toda la
   intranet, que es justo lo que esta excepcion venia a conseguir. */
body.pagina-he-rrhh .campo input:not([type="checkbox"]):not([type="radio"]),
body.pagina-he-rrhh .campo select,
body.pagina-horas-extras .campo input:not([type="checkbox"]):not([type="radio"]),
body.pagina-horas-extras .campo select,
body.pagina-he-recientes .campo input:not([type="checkbox"]):not([type="radio"]),
body.pagina-he-recientes .campo select,
body.pagina-he-reportes .campo input:not([type="checkbox"]):not([type="radio"]),
body.pagina-he-reportes .campo select,
body.pagina-colaboradores .campo input:not([type="checkbox"]):not([type="radio"]),
body.pagina-colaboradores .campo select { font-size: 13px; padding: 0 13px; }

/* ==========================================================================
   TABLAS — lenguaje FoodPass
   --------------------------------------------------------------------------
   Del kit se conserva todo lo demas (color, tipografia, botones, campos), pero
   la TABLA sigue a FoodPass, que es la que funciona: la de 24px por celda del
   kit dejaba cinco filas a la vista y cortaba el contenido a lo ancho en una
   tabla de seis columnas.

   Las tres diferencias que la hacen legible:
     1. Lineas entre filas en vez de cebra. La cebra pinta el fondo; la linea
        separa. Para seguir una fila de lado a lado, separa mejor.
     2. Cabecera pegajosa con banda gris: al bajar, sigues sabiendo que
        columna miras. En el cierre de RR.HH. -19 columnas- eso es la
        diferencia entre poder revisar y no.
     3. Densidad de trabajo: 13px con 13px x 16px de aire.

   Referencia: FoodPass/casinobistro/assets/css/foodpass-saas.css (.fp-table).
   ========================================================================== */

/* La cabecera pegajosa necesita 'separate': con 'collapse' el navegador
   descuelga los bordes del th al fijarlo y la banda queda sin su linea. */
.panel table,
.tabla-scroll table {
  border-collapse: separate;
  border-spacing: 0;
}

/* El contenedor pasa a scrollear tambien en vertical.
   No es opcional: `position:sticky` se mide contra el ancestro que scrollea, y
   .tabla-scroll ya lo era por su overflow-x:auto. Mientras no scrolleara en
   vertical, el th no tenia contra que pegarse y la cabecera se iba con la
   pagina.

   INTERCAMBIO, y es real: la hoja traia overflow-y:hidden a proposito, para
   que no asomara una barra vertical fugaz al cambiar de pagina. A cambio, la
   tabla larga ahora se desplaza DENTRO de su caja y la cabecera se queda. El
   pie de paginacion vive fuera del contenedor, asi que sigue siempre visible. */
/* El desplazamiento propio de la tabla -overflow:auto, max-height:70vh,
   overscroll-behavior:contain- estaba declarado DOS VECES, palabra por palabra.
   La otra copia esta mas abajo, junto al comentario que explica por que la tabla
   necesita su propia barra vertical (la cabecera pegajosa necesita contra que
   pegarse), asi que la decision vive alli y aqui sobraba. */

thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--text-muted);
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

tbody td {
  font-size: 13px;
  padding: 13px 16px;
  color: var(--text-soft);
  border-top: none;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

/* Se quita la cebra: aqui separa la linea. Dos senales para lo mismo se
   estorban -el fondo alterno le come contraste a la linea-. */
tbody tr:nth-child(even) { background: transparent; }

tbody tr { transition: background-color .12s; }
tbody tr:hover { background: var(--surface-2); }

/* La ultima fila no lleva linea: la cierra el borde del panel. */
tbody tr:last-child td { border-bottom: 0; }

/* La primera columna con nombre es el ancla de la fila: va en tinta plena y
   algo mas de peso, como el .fp-strong de FoodPass. */
tbody td:first-child,
tbody td.ancla { color: var(--text); font-weight: 500; }

/* ---------- Las DOS filas de la cabecera ----------
   El thead lleva la fila de titulos y la de filtros, y ambas son <th>. Con las
   dos pegadas en top:0 se montaban una sobre otra: se veia la de filtros y la
   de titulos desaparecia debajo.

   La segunda se baja exactamente la altura de la primera. Para que ese numero
   no sea magico, la altura de la fila de titulos se FIJA aqui y el
   desplazamiento la lee de la misma variable: si una cambia, cambia la otra. */
:root { --tabla-th-alto: 40px; }

thead tr:first-child th {
  height: var(--tabla-th-alto);
  padding-top: 0;
  padding-bottom: 0;
  top: 0;
  z-index: 3;
}

/* ---------- Variante densa, para las pantallas anchas ----------
   Misma tabla, menos aire. La activa la clase de ruta que pone layout.js. */
body.pagina-he-rrhh thead th,
body.pagina-horas-extras thead th,
body.pagina-he-recientes thead th,
body.pagina-he-reportes thead th,
body.pagina-colaboradores thead th { padding: 9px 12px; font-size: 11px; }

body.pagina-he-rrhh tbody td,
body.pagina-horas-extras tbody td,
body.pagina-he-recientes tbody td,
body.pagina-he-reportes tbody td,
body.pagina-colaboradores tbody td { padding: 9px 12px; font-size: 12.5px; }

/* La variante densa tiene la cabecera mas baja, asi que su desplazamiento
   tambien: la variable se redefine y las dos reglas de arriba la siguen. */
body.pagina-he-rrhh,
body.pagina-horas-extras,
body.pagina-he-recientes,
body.pagina-he-reportes,
body.pagina-colaboradores { --tabla-th-alto: 34px; }

/* ==========================================================================
   DIRECCIÓN "SaaS CLARO"  (opción 1 elegida)
   --------------------------------------------------------------------------
   Reemplaza la direccion anterior, que mezclaba la barra de color del kit con
   una estructura que no la pedia. El diagnostico fue que se veia antiguo, y la
   causa principal era esa: una franja de color llena ocupando todo el ancho
   arriba es un recurso de hace anos.

   El idioma nuevo, en una linea: superficies blancas separadas por BORDES
   FINOS en vez de sombras, aire generoso, y el azul de marca reservado para lo
   accionable -boton primario, item activo, filtro puesto-. Nada mas lleva
   color.

   Los botones son la excepcion pedida: conservan la FORMA Material del kit
   (36px de alto, radio 4, 24px de costado) con el color de esta direccion.
   ========================================================================== */

/* ---------- Barra superior: blanca, no franja de color ---------- */
:root      { --appbar: #FFFFFF; --on-appbar: var(--navy); }
/* En oscuro la barra baja POR DEBAJO del fondo: es la unica forma de que siga
   leyendose como barra y no como un panel mas. Con #1E293B -que es justo
   `--surface`- la barra superior y el panel de debajo eran el mismo color y la
   barra desaparecia. Se conserva el tinte azul de la marca en vez de irse a un
   gris neutro. */
html.dark  { --appbar: #08203F; --on-appbar: #E4E9F0; }

.topbar {
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  padding: 16px 26px;
  min-height: 0;
}
.topbar__title { font-size: 19px; font-weight: 500; color: var(--navy); }
.topbar__sub   { color: var(--text-muted); font-size: 12.5px; }

/* Lo que vive en la barra vuelve a pintarse contra blanco: se anulan los
   color-mix sobre --on-appbar que hacian falta cuando el fondo era navy. */
.topbar .usuario-chip__nombre { color: var(--text); }
.topbar .usuario-chip__rol    { color: var(--text-muted); }
.topbar .usuario-chip__avatar { background: var(--brand-light); color: var(--brand); }
.topbar .usuario-chip__sep    { background: var(--border); }
.topbar .btn--ghost {
  background: var(--surface); color: var(--text-soft);
  border-color: var(--border-strong);
}
.topbar .btn--ghost:hover:not(:disabled) {
  background: var(--surface-2); color: var(--brand); border-color: var(--brand);
}
.topbar .tema-toggle {
  background: var(--surface); color: var(--text-soft); border-color: var(--border-strong);
}
.topbar .tema-toggle:hover { background: var(--surface-2); color: var(--brand); border-color: var(--brand); }
.topbar__buscador { background: var(--surface); border-color: var(--border-strong); color: var(--text-muted); }
.topbar__buscador-icono { color: var(--text-muted); }

/* ---------- Superficies: borde fino, sin sombra ---------- */
/* El radio iba en literal -12 px- y era la ultima palabra, asi que la TABLA de
   dentro (`--radius-lg`, 16) salia mas redondeada que la caja que la contiene.
   La escala de la Parte I asigna `--radius-lg` a «paneles, tablas, cajones»: se
   usa el token y los dos vuelven a coincidir. */
.panel,
.kpi {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
.kpi:hover { transform: none; box-shadow: none; }

/* ---------- Tarjeta de indicador ---------- */
.kpi { padding: 16px 18px; }
.kpi__label { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.kpi__value { font-size: 27px; font-weight: 500; color: var(--navy); letter-spacing: -.02em; }
.kpi__icono { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; }
.kpi__icono .ms { font-size: 17px; }

/* ---------- Botones: forma Material, color de esta direccion ---------- */
.btn {
  height: 36px;
  padding: 0 20px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: normal;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.btn:hover:not(:disabled) { box-shadow: 0 2px 5px rgba(16, 24, 40, .08); }

/* .btn--sm, UNA sola vez y AQUI.
   Habia cuatro definiciones globales -30, 32, 32 y 32- repartidas por la hoja,
   mas un `.panel__acciones .btn--sm` a 36: el mismo boton «pequeno» media 36 px
   en una barra de panel sin repartir, 30 si `barra-acciones.js` la habia
   repartido, 32 suelto en un cajon y 28 dentro de una fila.
   Y el sitio importa tanto como el valor: `.btn--sm` y `.btn` tienen la MISMA
   especificidad (0,1,0), asi que con `.btn--sm` arriba del archivo y el `.btn`
   que manda aqui abajo, ganaba `.btn` y los botones pequenos median 36 igual
   -se veia en «Anterior»/«Siguiente» de la paginacion-. Pegado al `.btn` que
   manda, no hay forma de que vuelva a perder.
   La excepcion de 28 px dentro de una fila de tabla se queda: ahi el boton no
   debe marcar el alto del registro. */
.btn--sm { height: 30px; padding: 0 13px; font-size: 11.5px; border-radius: var(--radius-sm); }

.btn--primario { padding: 0 24px; box-shadow: 0 1px 3px rgba(23, 71, 162, .28); }
.btn--primario:hover:not(:disabled) { box-shadow: 0 3px 8px rgba(23, 71, 162, .32); }
.btn--ghost {
  background: var(--surface); color: var(--text-soft); border-color: var(--border-strong);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.btn--ghost:hover:not(:disabled) {
  background: var(--surface-2); color: var(--brand); border-color: var(--brand);
}
.btn--icono { width: 36px; padding: 0; justify-content: center; }

/* ---------- Menu lateral: blanco con borde, item redondeado ---------- */
.sidebar { background: var(--surface); border-right: 1px solid var(--border); }
.nav-link { height: 38px; border-radius: 8px; font-size: 13px; }
.nav-link .ms { font-size: 19px; flex: 0 0 19px; }
.nav-link:hover { background: var(--bg); }
.nav-link.active { background: var(--brand-light); color: var(--brand); font-weight: 500; }

/* ---------- Cuerpo ---------- */
.main { background: var(--bg); padding: 0; }
.main > *:not(.topbar) { margin-left: 26px; margin-right: 26px; }
.main > .topbar { margin: 0; padding: 16px 26px; }
.main > *:last-child { margin-bottom: 26px; }

/* ==========================================================================
   CABECERA DE TABLA — gris marcado, texto oscuro, con orden por columna
   --------------------------------------------------------------------------
   El gris casi blanco anterior apenas se separaba del contenido: en una
   captura costaba decir donde terminaba la cabecera. Este tiene contraste de
   verdad y sigue siendo neutro -no mete color, que queda para lo accionable-.

   Va en tokens y no en literales para que el modo oscuro lo siga solo.
   ========================================================================== */
:root      { --th-fondo: #EEF1F6; --th-texto: #44506A; }
html.dark  { --th-fondo: #243149; --th-texto: #C3CDDA; }

thead th {
  background: var(--th-fondo);
  color: var(--th-texto);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-strong);
}

/* La fila de filtros vive dentro del thead pero NO es cabecera: se queda
   blanca para no convertir el bloque en una banda gris de 80px. */

/* ---------- Columna ordenable ---------- */
thead th.es-ordenable { cursor: pointer; user-select: none; }
thead th.es-ordenable:hover { color: var(--brand); }
thead th.es-ordenable:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.th-orden {
  font-size: 15px;
  vertical-align: -3px;
  opacity: .34;
  transition: opacity .15s, color .15s;
}
thead th.es-orden { color: var(--brand); }
thead th.es-orden .th-orden { opacity: 1; color: var(--brand); }

/* ==========================================================================
   Selector de rango de fechas (rango-fechas.js)
   --------------------------------------------------------------------------
   Reemplaza los dos campos sueltos "Desde"/"Hasta" mas la fila de atajos. El
   calendario de dentro es el mismo de controles.js: aqui solo se resuelven los
   extremos, el tramo interior y la caja de dos meses.
   ========================================================================== */
.rango-ui { position: relative; display: inline-block; }

/* EL CIRCUITO DE FILTRADO VUELVE A LA ESCALA.
   El disparador del selector de rango -que es el control de fecha oficial del
   proyecto- iba a 4 px de radio y 38 px de alto, y los campos encendidos del
   cajon de filtros igual. O sea que en la misma fila convivian un campo de 38,
   un desplegable de 40 y un boton de 32, con radios de 4, 10 y 10. La escala
   dice `--radius-sm` (10) y los campos 40 en barra: se igualan. */
.rango-ui__trigger {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 13px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.rango-ui__trigger:hover { border-color: var(--brand-line); background: var(--brand-tint); }
.rango-ui__trigger:focus-visible { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }
.rango-ui__icono { font-size: 18px; color: var(--text-muted); }
.rango-ui.tiene-rango .rango-ui__icono { color: var(--brand); }
.rango-ui[aria-expanded] { }

.rango-ui__panel {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-lg, 0 14px 34px rgba(16,24,40,.16));
  padding: 0; width: max-content; max-width: min(92vw, 420px);
}
/* Dentro de un cajon el control queda pegado al borde izquierdo, asi que el
   panel tiene que crecer hacia la derecha -hay 600px de cajon- y no hacia
   afuera, donde el propio cajon lo recorta. */
.cajon .rango-ui__panel { left: 0; right: auto; }
/* Un solo mes cuando no caben dos (cajones angostos, celular): el panel no
   pasa del ancho del mes y los atajos se acomodan en varias filas. */
.rango-ui__panel--arriba { top: auto; bottom: calc(100% + 6px); }
.rango-ui__panel--un-mes { width: 236px; max-width: calc(100vw - 16px); }
.rango-ui__panel--un-mes .rango-ui__mes { width: 100%; }
.rango-ui__panel--un-mes .rango-ui__pie { flex-wrap: wrap; }
.rango-ui__panel--un-mes .rango-ui__mes:first-child .date-picker__head { flex-direction: row; justify-content: space-between; }

.rango-ui__atajos {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 10px 11px 9px; border-bottom: 1px solid var(--border);
}
.rango-ui__atajo {
  height: 27px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text-muted);
  font: inherit; font-size: 12px; cursor: pointer; transition: .15s;
}
.rango-ui__atajo:hover { border-color: var(--text-muted); color: var(--text); }
.rango-ui__atajo.is-activo { background: var(--brand-light); border-color: var(--brand); color: var(--brand); font-weight: 600; }

.rango-ui__meses { display: flex; gap: 12px; padding: 11px 11px 4px; }
.rango-ui__mes { width: 178px; }
/* Sin separacion horizontal entre celdas: el tramo tiene que leerse continuo. */
.rango-ui__mes .date-picker__grid { gap: 3px 0; }
.rango-ui__mes .date-picker__head { padding-bottom: 8px; }
.rango-ui__mes .date-picker__salto-trigger { height: 26px; padding: 0 7px; font-size: 12px; }
.rango-ui__mes .date-picker__day { min-height: 28px; border-radius: 0; }

.date-picker__day.is-en-rango { background: var(--brand-light); border-color: transparent; }
.date-picker__day.is-rango-ini,
.date-picker__day.is-rango-fin { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 800; }
.date-picker__day.is-rango-ini { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.date-picker__day.is-rango-fin { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.date-picker__day.is-rango-ini.is-rango-fin { border-radius: var(--radius-sm); }

.rango-ui__pie {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px; border-top: 1px solid var(--border);
}
.rango-ui__leyenda { flex: 1; color: var(--text-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }

/* La cabecera del calendario pone siempre las flechas a la derecha, que es lo
   correcto con un mes solo. Con dos, la flecha de retroceder tiene que quedar
   al borde izquierdo del primero, o parece que pertenece al mes de al lado. */
.rango-ui__mes:first-child .date-picker__head { flex-direction: row-reverse; justify-content: flex-end; gap: 8px; }

/* ==========================================================================
   Banda de filtros aplicados (chips-filtros.js)
   --------------------------------------------------------------------------
   Reemplaza el resumen en texto del rango. Va en el azul palido de marca para
   que se lea como una franja de estado y no como otra barra de botones.
   ========================================================================== */
.chips-filtros {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--brand-tint); border: 1px solid var(--brand-line);
}
.chips-filtros__rotulo {
  color: var(--brand); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.chips-filtros__lista { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.chips-filtros__limpiar {
  border: 0; background: transparent; color: var(--brand);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0 2px;
}
.chips-filtros__limpiar:hover { text-decoration: underline; }
.chips-filtros__cuenta { margin-left: auto; color: var(--text-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }

.chip-filtro {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 0 6px 0 11px;
  border: 1px solid var(--brand-line); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 12.5px; cursor: pointer; transition: .15s;
}
.chip-filtro:is(span) { cursor: default; padding-right: 11px; }
.chip-filtro:is(button):hover { border-color: var(--brand); background: var(--brand-light); color: var(--brand); }
.chip-filtro__equis { font-size: 15px; opacity: .5; }
.chip-filtro:hover .chip-filtro__equis { opacity: 1; }

/* Cabecera del calendario en modo rango: mes y ano como texto. Los cuatro
   controles del modo suelto (mes, ano, atras, adelante) pedian 201px en una
   columna de 178 y se desbordaban. */
.rango-ui__mes .date-picker__saltos { align-items: baseline; gap: 5px; }
.rango-ui__mes .date-picker__head strong { font-size: 12.5px; font-weight: 600; color: var(--navy, var(--text)); text-transform: capitalize; }
.rango-ui__mes .date-picker__anio { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Cajon de filtros: formulario de un control por campo
   --------------------------------------------------------------------------
   Lo primero que se ve al abrir «Filtros». El constructor de condiciones sigue
   existiendo, plegado, para lo que esto no puede expresar.
   ========================================================================== */
/* UNA columna, no dos.
   El cajon es alto y estrecho: en dos columnas los campos quedaban cortos y
   sobraba la mitad de abajo en blanco -que es lo que se veia raro-, mientras
   que la bandeja de RR.HH., con diecinueve columnas, se quedaba corta igual.
   En una columna lo que sobra, sobra hacia abajo, y el cajon se desplaza. */
.filtros-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.filtros-form__campo { display: grid; gap: 6px; min-width: 0; }
.filtros-form__campo > .campo__label {
  font-size: 11px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted);
}
.filtros-form__campo input[type="text"] {
  width: 100%; min-height: 40px; padding: 0 11px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: inherit; font-size: 13px;
}
.filtros-form__campo input:focus-visible { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }
.filtros-form__par { display: flex; align-items: center; gap: 8px; }
.filtros-form__par input { flex: 1 1 0; min-width: 0; }
/* El rango ocupa la fila entera: su panel mide 420px y partido a la mitad
   quedaria mas estrecho que el calendario que tiene que abrir. */
.filtros-form__campo:has(.rango-ui) { grid-column: 1 / -1; }
.filtros-form__campo .rango-ui,
.filtros-form__campo .rango-ui__trigger { width: 100%; }

/* .filtros-avanzado se retiro con el bloque de condiciones avanzadas. */

/* Con una sola columna el ancho de dos ya no hace falta: el ancho lo pide
   `crearFiltrosColumnas` al crear el cajon (modules/filtros-columnas.js). */
.filtros-columnas .filtros-form__campo > .campo__label { margin-bottom: 1px; }
/* La pantalla trae su propio cajon de filtros: esta barra sobra. */
.filtros-columnas__barra--oculta { display: none !important; }
/* La barra de una tabla que esta en una pestaña que no se esta mirando. Clase
   aparte de `--oculta`, que la tabla usa para otra cosa: si compartieran clase,
   una de las dos razones borraria a la otra. */
.filtros-columnas__barra--fuera-de-vista { display: none !important; }

/* ==========================================================================
   Menú lateral: azul marino con pestaña de muesca curva, y plegable
   --------------------------------------------------------------------------
   El elemento activo deja de ser una píldora rellena y pasa a ser una pestaña
   del color del contenido que SALE del menú: las dos esquinas invertidas hacen
   que se funda con la pantalla en vez de flotar dentro del menú. Así no hace
   falta ninguna línea que separe menú de contenido — la dibuja el propio
   activo.

   Las esquinas se pintan con degradados radiales y no con `box-shadow` de
   extensión: la sombra no recorta nada, pinta cuadrados que se salen del menú
   y dejan dos manchas sueltas flotando sobre el contenido.
   ========================================================================== */
/* `--sidebar-fondo` es EL azul marino de las superficies de marca: el menu
   lateral y el panel del ingreso. Es de los pocos colores que NO se invierten
   en oscuro -solo se oscurece un punto-, porque esas dos superficies son navy
   en los dos temas. `--sobre-marino` es el azul claro que se lee encima. */
:root { --sidebar-w: 248px; --sidebar-w-rail: 72px; --sidebar-fondo: #0F2A5C;
        --sobre-marino: #7FB0FF; --sobre-marino-suave: #C9D6EA; --exito-sobre-marino: #4FD19A; }
html.dark { --sidebar-fondo: #0B1F45;
        --sobre-marino: #8FBCFF; --sobre-marino-suave: #C3D2E6; --exito-sobre-marino: #5FDCA8; }

.sidebar {
  background: var(--sidebar-fondo);
  border-right: 0;
  /* Sin padding a la derecha: la pestaña activa tiene que llegar al borde.
     Y sin padding ARRIBA: ese hueco lo pone ahora el bloque de marca, que mide
     lo mismo que la cabecera. Dejarlo obligaba a pelearse con el: un elemento
     pegajoso con `top: 0` se ancla bajo el relleno del contenedor, no en su
     borde, asi que la marca quedaba 20 px mas abajo que la cabecera y las dos
     rayas no se encontraban. */
  padding: 0 0 20px 14px;
  gap: 14px;
  transition: width .24s cubic-bezier(.32,.72,0,1), flex-basis .24s cubic-bezier(.32,.72,0,1);

  /* ---------- Siempre a la vista ----------
     Se iba con la pagina: al bajar, la columna azul quedaba vacia y para
     cambiar de pantalla habia que volver arriba del todo.

     `sticky` + el alto de la ventana lo clava, y `align-self: flex-start` es
     imprescindible: sin eso el menu se estira a todo el alto del armazon -es un
     hijo flexible- y un elemento pegajoso MAS ALTO que la ventana se queda
     pegado por abajo, o sea no se pega. `100dvh` para el movil, donde la barra
     del navegador entra y sale y `100vh` se pasa de largo. */
  position: sticky; top: 0; align-self: flex-start;
  height: 100vh; height: 100dvh;

  /* Y con su propio desplazamiento, porque el menu no cabe: 1.134 px de
     contenido en una ventana de 768 -plegado, 1.074-. `contain` para que al
     llegar al final no empiece a moverse la pagina de atras. */
  overflow: hidden auto;
  /* Y aqui tampoco se corta el encadenamiento, por lo mismo que en las tablas:
     al llegar al final de la lista, la rueda tiene que seguir moviendo la
     pagina en vez de quedarse muerta bajo el puntero. */

  /* Barra SIEMPRE visible, fina. Antes se ocultaba a proposito, pero con
     tantas opciones no se notaba que la columna seguia hacia abajo. Se usan
     las propiedades ESTANDAR (scrollbar-width / scrollbar-color): Chrome y
     Edge modernos ya las soportan y pintan una barra persistente; con ellas
     Chrome ignora los ::-webkit-scrollbar de mas abajo, que quedan solo de
     respaldo para navegadores viejos. */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .55) transparent;
}
.sidebar::-webkit-scrollbar { width: 8px; height: 8px; }
/* Y NADA de encogerse. Al darle al menu un alto fijo, sus hijos -que son
   elementos flexibles- pasan a repartirse ese alto en vez de ocupar el suyo: el
   bloque de marca, que tiene un alto declarado y ningun contenido que lo
   sostenga, se quedo en 9 px y la primera entrada se le monto encima. Las
   listas aguantaron solas porque su contenido las sostiene; la marca no. */
.sidebar > * { flex-shrink: 0; }

/* ---------- Botón de plegar ---------- */
.sidebar__plegar {
  /* En el CRUCE de las dos rayas: la vertical que separa el menu del contenido
     y la horizontal que cierra la cabecera. Ahi el boton se lee como lo que es
     -el tirador del borde- y esta siempre a la vista.

     Antes iba en `position: absolute` con `top: 50%`, y ese 50% se contaba
     sobre el alto del MENU, que crece con la pagina: en /he-rrhh el menu mide
     987 px y el boton caia en el 480, muy por debajo de lo que se esta
     mirando, y en una pagina larga se iba directamente fuera de la pantalla.
     Con `fixed` deja de depender del largo de la pagina.

     Las dos medidas salen de variables, no de numeros escritos a mano:
     `--topbar-alto` la publica `layout.js` midiendo la cabecera de verdad
     -que envuelve y crece cuando la ventana se estrecha- y `--sidebar-w`
     cambia sola al plegar. Los 13 px son la mitad de sus 26 de ancho: asi
     queda mitad sobre el azul y mitad sobre el contenido. */
  position: fixed; top: var(--topbar-alto, 78px); left: calc(var(--sidebar-w) - 13px);
  transform: translateY(-50%); z-index: 12;
  transition: left .24s cubic-bezier(.32,.72,0,1), color .15s, border-color .15s;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .16);
}
/* Plegado, la raya se mueve: el boton la sigue con la misma animacion. */
body.menu-plegado .sidebar__plegar { left: calc(var(--sidebar-w-rail) - 13px); }
.sidebar__plegar:hover { color: var(--brand); border-color: var(--brand); }
.sidebar__plegar:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.sidebar__plegar svg { width: 15px; height: 15px; transition: transform .24s; }
body.menu-plegado .sidebar__plegar svg { transform: rotate(180deg); }

/* ---------- Marca y ficha, sobre fondo oscuro ---------- */
.sidebar__brand { padding-left: 10px; }
.sidebar__logo { background: var(--surface); color: var(--sidebar-fondo); }
.sidebar__ficha {
  margin-right: 14px; background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .12);
}
.sidebar__ficha-icono { background: rgba(255, 255, 255, .12); color: #fff; }
.sidebar__ficha-nombre { color: #fff; }
.sidebar__ficha-sub { color: rgba(255, 255, 255, .55); }
.sidebar__label { color: rgba(255, 255, 255, .34); padding-left: 14px; }

/* ---------- Enlaces ---------- */
.sidebar nav { gap: 2px; }
.nav-link {
  color: rgba(255, 255, 255, .74);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  padding: 0 14px;
  position: relative;
}
.nav-link svg { width: 19px; height: 19px; flex: 0 0 19px; color: rgba(255, 255, 255, .52); }
.nav-link:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.nav-link:hover svg { color: #fff; }

.nav-link.active {
  background: var(--bg);
  color: var(--navy);
  font-weight: 600;
}
.nav-link.active svg { color: var(--brand); }
/* Las dos esquinas invertidas: cada cuadrado es del color del menú salvo el
   cuarto de círculo pegado a la pestaña, que va del color del contenido. */
.nav-link.active::before,
.nav-link.active::after {
  content: ''; position: absolute; right: 0;
  width: 16px; height: 16px; pointer-events: none;
}
.nav-link.active::before {
  top: -16px;
  background: radial-gradient(circle 16px at 0 0, var(--sidebar-fondo) 99%, var(--bg) 100%);
}
.nav-link.active::after {
  bottom: -16px;
  background: radial-gradient(circle 16px at 0 100%, var(--sidebar-fondo) 99%, var(--bg) 100%);
}

/* ---------- Globo, solo cuando está plegado ---------- */
/* `fixed` y no `absolute`: el globo sale por el lado derecho del menu, y el
   menu ahora recorta -desplazar en vertical obliga a recortar en horizontal-.
   Lo fijo no lo recorta ningun ancestro. Las coordenadas se las pone layout.js
   al pasar el raton, que en CSS no hay forma de saber donde cayo el enlace. */
.nav-link__globo {
  position: fixed;
  transform: translateY(-50%) translateX(-4px);
  background: var(--globo-fondo); color: var(--globo-texto); font-size: 12px; font-weight: 500;
  padding: 6px 11px; border-radius: 7px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .14s, transform .14s;
  /* Por encima de TODO lo que pueda haber en la pagina. Con 30 iba por delante
     de una tarjeta normal, pero cualquier bloque que se pinte mas arriba -un
     panel desplegado, un menu- lo tapaba a medias, y entonces no se lee como
     una etiqueta sino como un recuadro azul cortado. */
  z-index: 70; box-shadow: 0 4px 14px rgba(15, 23, 42, .26);
}

/* ---------- Plegado ---------- */
body.menu-plegado .sidebar { width: var(--sidebar-w-rail); flex-basis: var(--sidebar-w-rail); }

/* A 780 px o menos el menu es una barra horizontal arriba: no hay raya vertical
   sobre la que poner el boton ni carril al que plegarlo.
   Va AQUI y no en el bloque de movil de mas arriba: `.sidebar__plegar` y
   `body.menu-plegado .sidebar` se declaran despues de aquel, y con la misma
   especificidad manda la ultima. El sitio importa tanto como el valor. */
@media (max-width: 780px) {
  /* Aqui el menu es una barra horizontal arriba: no se queda pegado ni se
     desplaza por dentro. Fijarlo robaria media pantalla al contenido, que es
     lo que se viene a leer. */
  .sidebar { position: static; align-self: auto; height: auto; overflow: visible; padding-top: 20px; }
  /* Y aqui los hijos SI se encogen. El `flex-shrink: 0` del menu vertical
     impide que la marca se aplaste contra un alto fijo; en esta barra, que es
     horizontal, el eje pasa a ser el ancho y ese mismo cero deja a cada lista
     con su ancho de contenido: no envuelve nunca y mete 790 px de desborde
     -medido en las diez pantallas a 430 px-. */
  .sidebar > * { flex-shrink: 1; min-width: 0; }
  /* Sin esto el boton -que es `fixed`- se quedaba flotando en medio de la
     pagina, encima del contenido. */
  .sidebar__plegar { display: none; }
  /* Y el ancho de carril tampoco aplica: la barra ocupa todo el ancho. */
  body.menu-plegado .sidebar { width: 100%; flex-basis: auto; }
  /* El globo solo existe para el carril, donde el texto del enlace no se ve.
     Aqui los enlaces llevan su nombre al lado, asi que no hay nada que
     explicar. Y estorbaba de verdad: aunque va en `opacity: 0`, un elemento
     absoluto SI cuenta para el area que se puede desplazar, y el del ultimo
     enlace de la fila sobresalia 15 px, o sea 16 px de desborde en toda la
     pagina. Lo invisible tambien empuja. */
  .nav-link__globo { display: none; }
}
body.menu-plegado .nav-link { justify-content: center; padding: 0; gap: 0; }
body.menu-plegado .nav-link__texto { display: none; }
body.menu-plegado .nav-link:hover .nav-link__globo { opacity: 1; transform: translateY(-50%) translateX(0); }
body.menu-plegado .sidebar__label { opacity: 0; height: 8px; padding: 0; overflow: hidden; }
body.menu-plegado .sidebar__ficha { margin-right: 10px; padding: 8px; justify-content: center; }
body.menu-plegado .sidebar__ficha-icono { margin: 0; }
body.menu-plegado .sidebar__ficha > div:not(.sidebar__ficha-icono) { display: none; }
body.menu-plegado .sidebar__brand { justify-content: center; padding-left: 0; padding-right: 14px; }

/* ---------- Marca del menú: un solo bloque ----------
   Antes eran dos: un cuadro azul con el texto "SIMI" y, debajo, una ficha con
   un icono de edificio. Repetían la misma idea y el edificio no es la marca.
   Ahora va el logotipo real de la cadena con el nombre al lado. */
.sidebar__brand {
  display: flex; align-items: center; gap: 11px;
  padding: 2px 14px 6px 10px; min-height: 46px;
}
.sidebar__logo {
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 50%; object-fit: contain;
  /* El logotipo es un disco azul marino con la cara blanca. Sobre el menu, que
     es del mismo azul, el disco se fundiria con el fondo y se veria una cara
     flotando: el aro blanco es lo que le devuelve el borde. */
  background: #fff;
  /* Aro blanco ancho: el emblema es azul marino sobre el mismo azul del menu,
     asi que sin una base clara no se despega del fondo. */
  padding: 4px;
}
.sidebar__brand-textos { min-width: 0; overflow: hidden; }
.sidebar__title { font-size: 13.5px; font-weight: 600; color: #fff; letter-spacing: -.015em; white-space: nowrap; }
.sidebar__sub { font-size: 11px; color: rgba(255, 255, 255, .55); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }

body.menu-plegado .sidebar__brand-textos { display: none; }

/* ---------- La marca cierra con la misma raya que la cabecera ----------
   Faltaba media raya. El boton de plegar esta en el CRUCE de dos lineas -la
   vertical que separa el menu del contenido y la horizontal que cierra la
   cabecera-, pero del lado del menu la horizontal no existia: el azul corria de
   arriba abajo sin cortarse, y el boton quedaba apoyado en un cruce a medias.

   El alto sale de `--topbar-alto`, la MISMA variable que usa el boton y que
   publica layout.js midiendo la cabecera de verdad. Asi las dos rayas estan
   siempre a la misma altura, tambien cuando la cabecera envuelve y crece.

   El sangrado -margen negativo arriba y a la izquierda- es para que el bloque
   llegue a los dos bordes del menu: sin el, la raya empezaria 14 px adentro,
   que es el hueco que deja el relleno del menu para que la pestaña activa
   pueda pegarse al borde derecho. */
.sidebar__brand {
  position: sticky; top: 0; z-index: 3;
  background: var(--sidebar-fondo);
  box-sizing: border-box;
  margin-left: -14px;
  padding: 2px 14px 6px 24px;
  height: var(--topbar-alto, 78px); min-height: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
/* Plegado el relleno es igual por los dos lados, para que el logotipo quede en
   el centro exacto del carril. */
body.menu-plegado .sidebar__brand { padding: 2px 14px 6px 14px; }

/* En movil la marca es un elemento mas de la barra horizontal: ni se queda
   arriba ni cierra nada, porque no hay una cabecera al lado con la que alinear
   la raya. Va AQUI, despues de la regla que deshace, y no en el bloque de movil
   de mas arriba: con la misma especificidad manda la ultima que se declara, y
   alli quedaba por detras. */
@media (max-width: 780px) {
  .sidebar__brand {
    position: static; margin: 0; height: auto; min-height: 46px;
    padding: 2px 14px 6px 10px; border-bottom: 0;
  }
}

/* ---------- El menu en movil: detras de un boton ----------
   Envolver las entradas hacia abajo las hacia caber, pero ocupaban 1.050 px de
   alto -la pantalla entera y media- antes del titulo de la pagina. Un menu que
   hay que pasar de largo para leer no es un menu.

   La barra se queda con la marca y el boton; las entradas salen al pulsarlo. */
.sidebar__menu-boton { display: none; }

@media (max-width: 780px) {
  .sidebar {
    flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 10px; padding: 9px 14px;
  }
  /* La marca primero y el boton al final, aunque en el documento vaya antes:
     el boton se crea junto al de plegar, arriba del todo, y moverlo en el DOM
     obligaria a saber desde layout.js que estamos en movil. */
  .sidebar__brand { flex: 1 1 auto; min-height: 0; padding: 0; order: 1; }
  .sidebar__logo { width: 32px; height: 32px; flex-basis: 32px; }

  /* Botón macizo de marca (11-10-2026). Era blanco translúcido, pensado para
     el menú oscuro de antes: con el menú claro «Suave» quedó blanco sobre
     blanco, invisible, y en el celular no había cómo abrir el menú. */
  .sidebar__menu-boton {
    display: inline-flex; align-items: center; gap: 9px;
    flex: 0 0 auto; padding: 9px 14px; order: 2; min-height: 40px;
    border: 1px solid var(--brand); border-radius: var(--radius-md);
    background: var(--brand); color: #fff;
    font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
    box-shadow: 0 2px 8px rgba(23, 71, 162, .25);
  }
  .sidebar__menu-boton:focus-visible { outline: 3px solid var(--brand-tint); outline-offset: 2px; }
  /* Las tres rayas, con los pseudoelementos como las de arriba y abajo. */
  .sidebar__menu-rayas,
  .sidebar__menu-rayas::before,
  .sidebar__menu-rayas::after {
    display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor;
  }
  .sidebar__menu-rayas { position: relative; }
  .sidebar__menu-rayas::before { content: ''; position: absolute; top: -5px; }
  .sidebar__menu-rayas::after  { content: ''; position: absolute; top: 5px; }
  /* Abierto, las rayas se cruzan: el boton dice lo que va a hacer. */
  body.menu-movil-abierto .sidebar__menu-rayas { background: transparent; }
  body.menu-movil-abierto .sidebar__menu-rayas::before { top: 0; transform: rotate(45deg); }
  body.menu-movil-abierto .sidebar__menu-rayas::after  { top: 0; transform: rotate(-45deg); }

  /* Las entradas, guardadas. Se ocultan con `display` y no con alto cero: un
     bloque de alto cero sigue recibiendo el foco con el tabulador, y se
     tabularia por veintitantos enlaces invisibles antes de llegar a la pagina. */
  .sidebar > nav,
  .sidebar > .sidebar__label { display: none; }

  body.menu-movil-abierto .sidebar > nav {
    display: flex; flex-direction: column; flex-basis: 100%; gap: 2px; order: 3;
  }
  body.menu-movil-abierto .sidebar > .sidebar__label {
    display: block; flex-basis: 100%; order: 3;
    padding: 12px 12px 6px; margin: 0;
  }
  /* Desplegado no puede crecer sin fin: con veintitantas entradas se iria muy
     por debajo de la pantalla y habria que recorrer la pagina entera para
     cerrarlo. Se queda en tres cuartos de la ventana, con su desplazamiento. */
  body.menu-movil-abierto .sidebar { max-height: 78vh; overflow-y: auto; }
  /* Y el boton se queda arriba mientras la lista corre por debajo: desplegado
     el menu se desplaza por dentro, y un boton de cerrar que se va con el
     desplazamiento obliga a volver arriba del todo para cerrar lo que tapa la
     pantalla. `sticky` y no `fixed`: asi sigue perteneciendo al menu y se va
     con el cuando el menu entero sale de la pagina.
     Con fondo opaco, que semitransparente dejaria verse los enlaces debajo. */
  body.menu-movil-abierto .sidebar__menu-boton {
    position: sticky; top: 9px; z-index: 3;
    background: var(--brand);
    box-shadow: 0 2px 10px rgba(5, 20, 48, .3);
  }
  /* En columna la pestaña activa ya no se funde con nada a la derecha: se
     redondea por los dos lados y se despega del borde. */
  body.menu-movil-abierto .nav-link { border-radius: var(--radius-md); margin-right: 14px; }
  body.menu-movil-abierto .nav-link.active::before,
  body.menu-movil-abierto .nav-link.active::after { display: none; }
}

/* ---------- Redondeo de los controles de formulario ----------
   Campos, desplegables y fechas siguen a los botones: 9px. La fila de filtros
   bajo la cabecera se queda en 6, que es la escala chica: son cajas de 28px de
   alto y a 9 se ven como pastillas. */
input[type="text"], input[type="search"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="time"], select, textarea,
.select-ui__trigger, .date-time-ui__trigger, .rango-ui__trigger, .fld {
  border-radius: var(--radius-md);
}
/* Con la misma especificidad que los selectores de atributo de arriba: una
   clase sola pierde contra `input[type="text"]`, y estas cajas de 28px de alto
   a 9px se ven como pastillas. */
.tabla-barra--search input[type="search"] { border-radius: var(--radius-sm); }

/* ---------- La tabla también se redondea ----------
   El panel ya tenía 12px, pero la tabla que va dentro estaba en 0: la banda
   gris de la cabecera llegaba recta hasta el borde y el bloque entero se leía
   cuadrado, por mucho que su contenedor estuviera curvado. Es lo que uno mira,
   así que era ahí donde había que redondear.

   El borde y la curva NO pueden vivir en el mismo elemento que desplaza. Chrome
   pinta el carril de la barra sobre la caja entera y no lo recorta el
   `border-radius`: en la esquina de arriba a la derecha asomaba un trocito
   recto, justo donde la curva debía cerrar. Se comprobó ampliado en
   _dash/31-esquina-scroll.html.

   Por eso el recorte sube un piso, a `.tabla-recorte`, que no desplaza nada y
   por lo tanto no tiene barra que se le escape. Ese envoltorio lo pone
   `modules/recorte-scroll.js` en todas las tablas del proyecto; si por lo que
   sea faltara, la tabla se ve igual pero con las esquinas rectas. */
.tabla-scroll,
.tabla-recorte {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
/* El envoltorio recorta; el de adentro deja de dibujar para no duplicar el
   borde. Se escribe así -y no quitándole el borde a `.tabla-scroll` a secas-
   para que una tabla que todavía no haya sido envuelta se siga viendo entera,
   con su marco, aunque le falte la curva de la esquina. */
.tabla-recorte { overflow: hidden; }
.tabla-recorte > .tabla-scroll { border: 0; border-radius: 0; }
/* La cabecera pegajosa pierde el borde superior: lo dibuja ya el contenedor. */
.tabla-scroll thead th { border-top: 0; }

/* ==========================================================================
   Barra de desplazamiento que aparece al pasar por encima
   --------------------------------------------------------------------------
   Antes estaba siempre visible y en una tabla llena competía con los datos.
   Ahora el carril reserva su sitio pero el pulgar es transparente: solo se
   pinta cuando el puntero entra en la zona, cuando algo de dentro tiene el
   foco, o mientras se arrastra.

   Se reserva el ancho igual -no se oculta la barra- a proposito: si apareciera
   y desapareciera ocupando espacio, la tabla daria un salto de 10px cada vez
   que el mouse entra.
   ========================================================================== */
.tabla-scroll,
.cajon__cuerpo,
.doble-cajon__cuerpo,
.select-ui__menu,
.he-rrhh__columnas-lista,
.usuario-editor__campos,
.sidebar {
  /* Ojo: las dos propiedades estandar -`scrollbar-width` Y `scrollbar-color`-
     van solo para Firefox. Cualquiera de las dos con un valor distinto de
     `auto` hace que Chrome abandone los `::-webkit-scrollbar` de mas abajo y
     vuelva a la barra del sistema: se midio el carril en 12px en vez de los 8
     pedidos, y eso ensanchaba el canal blanco al costado de la tabla. */
  transition: scrollbar-color .18s;
}
@supports (-moz-appearance: none) {
  .tabla-scroll,
  .cajon__cuerpo,
  .doble-cajon__cuerpo,
  .select-ui__menu,
  .he-rrhh__columnas-lista,
  .usuario-editor__campos,
  .sidebar { scrollbar-width: thin; }

  .tabla-scroll,
  .cajon__cuerpo,
  .doble-cajon__cuerpo,
  .select-ui__menu,
  .he-rrhh__columnas-lista,
  .usuario-editor__campos,
  .sidebar { scrollbar-color: transparent transparent; }

  .tabla-scroll:hover, .tabla-scroll:focus-within,
  .cajon__cuerpo:hover, .cajon__cuerpo:focus-within,
  .doble-cajon__cuerpo:hover, .doble-cajon__cuerpo:focus-within,
  .select-ui__menu:hover,
  .he-rrhh__columnas-lista:hover,
  .usuario-editor__campos:hover, .usuario-editor__campos:focus-within,
  .sidebar:hover { scrollbar-color: var(--text-faint) transparent; }

  .sidebar:hover { scrollbar-color: rgba(255, 255, 255, .34) transparent; }
}

/* Chrome, Edge y Safari: el pulgar se pinta con transparencia, no se quita. */
.tabla-scroll::-webkit-scrollbar,
.cajon__cuerpo::-webkit-scrollbar,
.doble-cajon__cuerpo::-webkit-scrollbar,
.select-ui__menu::-webkit-scrollbar,
.he-rrhh__columnas-lista::-webkit-scrollbar,
.usuario-editor__campos::-webkit-scrollbar,
.sidebar::-webkit-scrollbar { width: 8px; height: 8px; }

.tabla-scroll::-webkit-scrollbar-track,
.cajon__cuerpo::-webkit-scrollbar-track,
.doble-cajon__cuerpo::-webkit-scrollbar-track,
.select-ui__menu::-webkit-scrollbar-track,
.he-rrhh__columnas-lista::-webkit-scrollbar-track,
.usuario-editor__campos::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track { background: transparent; }

.tabla-scroll::-webkit-scrollbar-thumb,
.cajon__cuerpo::-webkit-scrollbar-thumb,
.doble-cajon__cuerpo::-webkit-scrollbar-thumb,
.select-ui__menu::-webkit-scrollbar-thumb,
.he-rrhh__columnas-lista::-webkit-scrollbar-thumb,
.usuario-editor__campos::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
  /* El borde transparente afina el pulgar sin tocar el ancho del carril. */
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background-color .18s;
}
.tabla-scroll:hover::-webkit-scrollbar-thumb,
.tabla-scroll:focus-within::-webkit-scrollbar-thumb,
.cajon__cuerpo:hover::-webkit-scrollbar-thumb,
.doble-cajon__cuerpo:hover::-webkit-scrollbar-thumb,
.select-ui__menu:hover::-webkit-scrollbar-thumb,
.he-rrhh__columnas-lista:hover::-webkit-scrollbar-thumb,
.usuario-editor__campos:hover::-webkit-scrollbar-thumb,
.sidebar:hover::-webkit-scrollbar-thumb { background-color: var(--text-faint); }

.tabla-scroll:hover::-webkit-scrollbar-thumb:hover,
.cajon__cuerpo:hover::-webkit-scrollbar-thumb:hover,
.doble-cajon__cuerpo:hover::-webkit-scrollbar-thumb:hover,
.usuario-editor__campos:hover::-webkit-scrollbar-thumb:hover,
.sidebar:hover::-webkit-scrollbar-thumb:hover { background-color: var(--text-muted); }

/* En el menú, que es azul marino, el gris del resto no se ve. El blanco para
   Firefox va arriba, dentro del @supports; aquí solo el dibujo propio. */
.sidebar:hover::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .34); }
.sidebar:hover::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .5); }

/* El menu SIEMPRE muestra su barra, no solo al pasar el mouse: con tantas
   opciones no era evidente que la columna seguia hacia abajo. Thumb tenue
   permanente (blanco sobre el azul marino) y mas marcado al hover (reglas de
   arriba). Para Firefox, color permanente tambien. */
.sidebar::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .5); }
@supports (-moz-appearance: none) {
  .sidebar { scrollbar-color: rgba(255, 255, 255, .5) transparent; }
}

/* ---------- La banda gris llega hasta el borde ----------
   El fondo de la cabecera lo pintan los <th>, y la tabla termina donde empieza
   el carril de la barra: quedaba un corte blanco de 10px a la derecha.

   El fondo del CONTENEDOR sí se pinta bajo el carril, así que la franja se
   dibuja ahí: gris hasta el alto de la fila de cabecera -que ya vive en
   --tabla-th-alto y se ajusta solo en las pantallas densas-, su línea inferior,
   y transparente de ahí para abajo.

   Va como fondo del contenedor y no de la tabla porque no debe desplazarse con
   el contenido: la cabecera es pegajosa y la franja tiene que quedarse con ella. */
.tabla-scroll {
  background-image: linear-gradient(
    to bottom,
    var(--th-fondo) 0,
    var(--th-fondo) var(--tabla-th-alto),
    var(--border-strong) var(--tabla-th-alto),
    var(--border-strong) calc(var(--tabla-th-alto) + 1px),
    transparent calc(var(--tabla-th-alto) + 1px)
  );
  background-repeat: no-repeat;
  /* `scroll` -el valor por omision- ancla el fondo al elemento, no al
     contenido: con `local` la franja se iria hacia arriba al desplazar y la
     cabecera pegajosa se quedaria sin ella. */
  background-attachment: scroll;
}

/* ---------- Desplazamiento propio de la tabla ----------
   La tabla vuelve a tener su propia barra vertical: es la que se pedia, y ademas
   es la que hace que la cabecera pegajosa tenga contra que pegarse.

   Se quito en un intento anterior para eliminar el canal blanco de la derecha,
   y con ella se fue la cabecera fija. El canal se resuelve mas abajo pintando
   las lineas de fila tambien bajo el carril. */
.tabla-scroll {
  max-height: 70vh;
  overflow: auto;
  /* SIN `overscroll-behavior: contain`, que es lo que estaba aqui.
     `contain` corta el encadenamiento: al llegar al final de la tabla, la rueda
     deja de hacer efecto y la pagina NO sigue bajando. Quien recorre la pagina
     con la rueda y pasa por encima de una tabla se queda clavado ahi -medido:
     tabla al final, cinco golpes de rueda, la pagina avanza 0 px de los 2.203
     que le quedaban-.
     La idea de `contain` era que la pagina no saltara al terminar de leer la
     tabla. Cuesta mas de lo que ahorra: el atasco pasa siempre que se recorre
     la pagina, y el salto solo al que estaba leyendo la tabla a proposito.
     Con el valor por defecto la rueda sigue su camino, que es lo que hace
     cualquier pagina. */
}

/* ---------- La barra de la pagina ----------
   La forma la pone el bloque general del principio del archivo. Aqui solo queda
   lo de Firefox.

   LA REGLA QUE HAY QUE RECORDAR: `scrollbar-color` y `scrollbar-width` pelean
   con `::-webkit-scrollbar`. En cuanto un elemento lleva cualquiera de las dos
   con un valor distinto de `auto`, Chrome se pasa a la barra del sistema y deja
   de mirar los pseudoelementos -se midio: el ancho seguia en los 15px de
   Windows pese a pedirle 12-. Por eso van encerradas para Firefox, que es el
   unico que las necesita.

   La de la ventana se ve siempre, no solo al pasar por encima: es la que dice
   cuanto queda de pagina. */
@supports (-moz-appearance: none) {
  html { scrollbar-width: thin; scrollbar-color: var(--text-faint) transparent; }
}

/* ==========================================================================
   BARRA DE ACCIONES — "solo uno pesa"
   --------------------------------------------------------------------------
   La barra de cada tabla llevaba cinco cajas del mismo tamaño en fila:
   buscador, Filtros, Nuevo, Excel y PDF. Todas pesaban igual, así que ninguna
   mandaba y la vista se repartía entre todas.

   Tres movimientos, ninguno quita funciones:

     · Excel y PDF se juntan en un «Exportar» con menú (modules/exportar.js).
     · «Filtros» lleva el número de condiciones puestas en una insignia, en vez
       del texto suelto «2 condiciones aplicadas» que iba al lado.
     · El botón que CREA algo -el único azul- se marca con un más.

   De cinco piezas se baja a tres, y el azul queda para lo único que no se
   puede deshacer solo mirando.
   ========================================================================== */

/* ---------- Botón con menú ---------- */
.menu-boton { position: relative; display: inline-flex; }
.menu-boton__flecha { transition: transform .18s; margin-left: -2px; }
.menu-boton.is-open .menu-boton__flecha { transform: rotate(180deg); }

/* Mismo lenguaje que el desplegable propio: borde, sombra y entrada de
   `select-ui__menu`. No hace falta una segunda clase de menú en el sistema. */
.menu-boton__menu {
  position: absolute; top: calc(100% + 7px); right: 0; z-index: 90;
  min-width: 190px; padding: 6px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); box-shadow: var(--shadow-menu);
  animation: menuEntrada .16s ease-out; transform-origin: top right;
}
.menu-boton__menu[hidden] { display: none; }

.menu-boton__item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 11px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text); font: inherit; font-size: 12.5px;
  text-align: left; cursor: pointer;
}
.menu-boton__item:hover, .menu-boton__item:focus-visible {
  outline: none; background: var(--brand-tint); color: var(--brand-dark);
}
.menu-boton__item:disabled { color: var(--text-faint); cursor: not-allowed; }
.menu-boton__texto { flex: 1; min-width: 0; }
/* La extensión va apagada y a la derecha: dice qué archivo cae sin competir
   con el nombre del formato. */
.menu-boton__detalle { color: var(--text-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.menu-boton__item:hover .menu-boton__detalle { color: var(--brand); }

/* ---------- Insignia de cuenta en un botón ---------- */
.btn__cuenta {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 1px;
  border-radius: var(--radius-pill);
  background: var(--brand); color: var(--on-brand);
  font-size: 10.5px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.btn__cuenta[hidden] { display: none; }
/* Dentro de un botón ya azul, la insignia se invierte para seguir viéndose. */
.btn:not(.btn--ghost):not(.btn--danger) .btn__cuenta { background: var(--on-brand); color: var(--brand); }

/* ---------- El más del botón que crea ----------
   Va en CSS y no en el marcado para no armar un <span> del símbolo en cada
   pantalla que da de alta algo; son varias y se olvidan. */
.btn--nuevo::before {
  content: "add";
  font-family: "Material Symbols Outlined";
  font-size: 17px; font-weight: normal; line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  margin-left: -3px;
}

/* ---------- Solo para lectores de pantalla ----------
   El texto sigue ahí y sigue siendo una región viva (`role="status"`), pero no
   ocupa sitio: lo que se mira es la insignia del botón. No se usa `display:none`
   ni `hidden` porque eso lo sacaría también del lector. */
.solo-lectores {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ==========================================================================
   CAJON DE FILTROS — "campos apagados hasta que se usan"
   --------------------------------------------------------------------------
   El cajon tenia una caja por columna, encendida o no: cinco cajas vacias en
   Usuarios y diecinueve en la bandeja de RR.HH. Habia que desplazar una
   pantalla entera de campos en blanco para llegar al pie.

   Ahora lo apagado es una linea de texto con un mas, y solo lo que se esta
   usando ocupa sitio de campo. El cajon arranca limpio y crece con el uso.
   ========================================================================== */

/* ---------- Un campo encendido ---------- */
.filtros-form__campo {
  padding: 9px 10px;
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-sm);
  background: var(--brand-tint);
}
.filtros-form__campo[hidden] { display: none; }

.filtros-form__cabeza {
  display: flex; align-items: center; gap: 7px; margin-bottom: 6px;
  color: var(--brand); font-size: 11px; font-weight: 600;
}
.filtros-form__cabeza .ms { font-size: 15px; }
/* El rotulo hereda el color y el peso de la cabecera: ya no necesita ser una
   versalita gris por su cuenta. */
.filtros-form__campo > .filtros-form__cabeza > .campo__label {
  margin: 0; color: inherit; font-size: inherit; font-weight: inherit;
  letter-spacing: .04em; text-transform: uppercase;
}

.filtros-form__quitar {
  margin-left: auto; width: 20px; height: 20px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--brand); cursor: pointer;
}
.filtros-form__quitar:hover { background: var(--brand-light); }
.filtros-form__quitar:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* Los controles de dentro van en blanco sobre el fondo azul palido del campo. */
.filtros-form__campo input[type="text"] { background: var(--surface); border-color: var(--brand-line); }

/* ---------- La lista de lo apagado ---------- */
.filtros-apagados { display: grid; gap: 3px; margin-top: 2px; }
.filtros-apagados__buscar {
  display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; margin-bottom: 4px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
}
.filtros-apagados__buscar[hidden] { display: none; }
.filtros-apagados__buscar .ms { color: var(--text-muted); }
.filtros-apagados__buscar input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 12.5px; color: var(--text);
}

.filtros-apagados__rotulo {
  margin-top: 4px; color: var(--text-muted);
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.filtros-apagados__rotulo[hidden] { display: none; }

.filtros-apagados__linea {
  display: flex; align-items: center; gap: 9px; width: 100%; height: 34px; padding: 0 10px;
  border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--text-soft); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
}
.filtros-apagados__linea:hover,
.filtros-apagados__linea:focus-visible { outline: none; background: var(--brand-tint); color: var(--brand-dark); }
.filtros-apagados__linea > .ms:first-child { color: var(--text-muted); }
.filtros-apagados__linea:hover > .ms:first-child { color: var(--brand); }
.filtros-apagados__nombre { flex: 1; min-width: 0; }
.filtros-apagados__mas { color: var(--text-muted); }
.filtros-apagados__linea:hover .filtros-apagados__mas { color: var(--brand); }

.filtros-apagados__vacio {
  margin: 0; padding: 10px; text-align: center;
  color: var(--text-muted); font-size: 12px;
}

/* ---------- El valor del campo encendido ----------
   Aqui vivia un desplegable con la condicion -contiene, es igual a, esta
   vacio...-, heredado del bloque de condiciones avanzadas que se retiro. Duro
   poco: nadie elige el operador al filtrar, se escribe y ya. Ahora cada tipo
   de columna lleva el suyo implicito, igual que la fila bajo la cabecera. */
.filtros-form__valor { display: grid; gap: 7px; }
.filtros-form__valor .rango-ui,
.filtros-form__valor .rango-ui__trigger { width: 100%; }


/* ==========================================================================
   BARRA DE ACCIONES PARTIDA EN DOS MITADES
   --------------------------------------------------------------------------
   A la izquierda lo que sirve para MIRAR la tabla -buscador, Filtros, los
   desplegables de la pantalla-; a la derecha lo que sirve para ACTUAR sobre
   ella -Carga masiva, Exportar, el alta-, con una raya fina al medio.

   En `/usuarios` eran siete piezas en la misma fila. `flex-wrap` parte donde se
   queda sin sitio, no donde tiene sentido, así que «Rol» y «Estado» acababan
   colgando solos en una segunda línea, pegados a la derecha y sin nada que los
   relacionara con el buscador que estaba arriba.

   Con las piezas dentro de dos cajas, al estrechar **baja el bando entero**.

   El reparto lo hace `modules/barra-acciones.js`. Si por lo que sea no llegara
   a correr, la barra se ve como antes: estas reglas solo aplican cuando los
   grupos existen.
   ========================================================================== */
.barra-acciones__mirar,
.barra-acciones__actuar {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; min-width: 0;
}
/* La mitad de mirar se queda el espacio sobrante: es la que lleva el buscador,
   que es lo único de la barra que gana con ser más ancho. */
/* `flex: 1 1 0` y no `1 1 auto`: con base automática, la mitad de mirar reclama
   el ancho de su contenido -922 px medidos en `/usuarios`- y no deja sitio para
   la otra mitad, que se cae al renglón siguiente. Con base cero pide lo mínimo,
   se reparte lo que sobra y son sus piezas las que ceden. */
/* Con `min-width: 0` esta mitad podia encogerse hasta DESAPARECER. Medido en
   `/turnos-seremi` a 375 px: la mitad de actuar se quedaba los 265 px de la
   barra, mirar bajaba a CINCO, y su buscador y su boton de filtros se salian
   por la derecha. Con un minimo util, cuando las dos mitades no caben juntas se
   reparten en dos renglones, que es lo que este modulo dice que tiene que
   pasar. */
.barra-acciones__mirar  { flex: 1 1 0; min-width: min(150px, 100%); justify-content: flex-start; }
/* `margin-left: auto` y no solo el `flex` del vecino: cuando las dos mitades no
   caben en el mismo renglon, la de actuar baja SOLA a la suya y sin esto se
   quedaba pegada a la izquierda, debajo del buscador. Con el margen se va al
   borde derecho en los dos casos. */
.barra-acciones__actuar { flex: 0 0 auto; justify-content: flex-end; margin-left: auto; }

/* `max-width` en las dos mitades: con `flex: 0 0 auto` la de actuar tomaba el
   ancho de su contenido -352 px con Carga masiva, Exportar y Nuevo usuario- sin
   mirar el sitio disponible, asi que en un telefono se salia de la pantalla.
   Medido en `/usuarios` a 375 px: la pagina desbordaba 26 px por la derecha.
   Con el tope, la mitad no puede pasarse de la barra y sus botones envuelven
   dentro, que es lo que ya sabian hacer. */
.barra-acciones__mirar,
.barra-acciones__actuar { max-width: 100%; }

.barra-acciones__raya {
  flex: none; width: 1px; min-height: 24px; align-self: stretch;
  background: var(--border);
  margin: 0 2px;
}
/* `visibility` y no `display`: la raya reserva su hueco aunque no se vea, para
   que medir si las dos mitades comparten renglon no dependa de si la raya esta
   puesta. Ver el comentario de `ajustarRaya` en barra-acciones.js. */
.barra-acciones__raya.es-oculta { visibility: hidden; }
.barra-acciones__raya[hidden] { display: none; }

/* ---------- La barra se lleva un renglón entero ----------
   La gracia de este reparto es que las dos mitades vayan en LA MISMA LÍNEA, con
   la raya al medio. Compartiendo renglón con el título no cabían: en
   `/usuarios` las siete piezas piden ~1.195 px y quedaban ~980 después del
   título y del menú, así que la mitad de actuar se caía abajo y volvíamos a
   tener dos filas.

   El título sube a su propio renglón y la barra ocupa el ancho completo del
   panel. `.panel__head` ya trae `flex-wrap`, así que basta con darle a la barra
   una base del 100% — no hay que mover ningún nodo de sitio.

   Va con `:has()` para no tocar las barras que el módulo no repartió. */
.panel__head > .panel__acciones:has(> .barra-acciones__mirar) {
  flex: 1 1 100%;
  margin-left: 0;
  justify-content: flex-start;
}

/* El año de la rejilla de periodos. El rotulo va DENTRO -«Año 2026»-, en el
   texto de la opcion: un «2026» suelto en una cabecera no dice de que es, y un
   rotulo fuera era una pieza mas en una barra que no la necesita. */
.cierres__anio ~ .select-ui__trigger,
.panel__acciones .select-ui:has(> .cierres__anio) { width: auto; min-width: 124px; }

/* Pero una barra con UN SOLO mando no necesita su propio renglón: la regla de
   arriba existe para las siete piezas de `/usuarios`, y aplicada a un
   desplegable suelto lo mandaba a la línea de abajo, pegado a la izquierda,
   justo donde nadie lo busca. Con `es-compacta` se queda en la línea del
   título, a la derecha. Lleva la misma estructura mas una clase, asi que gana
   por especificidad. */
.panel__head > .panel__acciones.es-compacta:has(> .barra-acciones__mirar) {
  flex: 0 1 auto;
  margin-left: auto;
  justify-content: flex-end;
}

/* El buscador es lo único de la barra que puede ceder ancho sin perder
   función: encoge hasta 150 px antes de que nada se caiga de la línea. */
.barra-acciones__mirar > .tabla-barra--search { flex: 1 1 150px; min-width: 0; }
.barra-acciones__mirar > .tabla-barra--search label,
.barra-acciones__mirar > .tabla-barra--search .tabla-buscador,
.barra-acciones__mirar > .tabla-barra--search input { min-width: 0; width: 100%; }

/* Dentro de cada mitad el aire baja de 8 a 6: son seis huecos, y esos 12 px
   son justo los que deciden si la línea cabe o no. */
.barra-acciones__mirar, .barra-acciones__actuar { gap: 5px; }

/* ---------- Los filtros propios de la pantalla también ceden ----------
   Medido en `/usuarios`: el bloque «Rol + Estado» ocupaba 353 px, un tercio de
   la barra, y era RÍGIDO -`flex: 0 0 auto` con dos desplegables de 130 px de
   mínimo-. Daba igual cuánto encogiera el buscador: ese bloque no cabía y la
   mitad de actuar se caía al renglón de abajo.

   Ahora encoge como todo lo demás y sus desplegables bajan el mínimo a 96 px,
   que sigue siendo suficiente para «Activas» y «Todos». */
.barra-acciones__mirar > .usuarios__filtro-rol { flex: 0 1 auto; min-width: 0; }
.barra-acciones__mirar .usuarios__filtro-rol-label { min-width: 0; }
/* El mínimo vive en `.select-ui` -el control propio que monta controles.js-, no
   en el `<select>` nativo, que está oculto. Ahí estaban los 132 px por
   desplegable: 264 de los 353 que ocupaba el bloque. */
.barra-acciones__mirar .select-ui { min-width: 104px; }

/* ---------- La barra partida va en talla compacta ----------
   Siete controles de 36 px no caben en un renglón a 1280 con el menú ocupando
   248: medido, piden ~1.100 px y quedan ~920. Estrujar los mínimos hasta que
   entren por los pelos deja una barra apretada y un desplegable donde no cabe
   «Administración central».

   Así que cuando la barra se parte en dos, TODA ella baja a la talla chica que
   el sistema ya usa (`.btn--sm`, 30 px). Se recuperan ~60 px reales y la fila
   respira. Las barras que no se reparten -una o dos piezas- se quedan como
   estaban. */
.barra-acciones__mirar .btn,
.barra-acciones__actuar .btn { height: 30px; padding: 0 12px; font-size: 12px; border-radius: var(--radius-sm); }
.barra-acciones__mirar .btn .ms,
.barra-acciones__actuar .btn .ms { font-size: 16px; }

.barra-acciones__mirar .select-ui__trigger,
.barra-acciones__mirar input[type="search"],
.barra-acciones__mirar .tabla-buscador { height: 30px; border-radius: var(--radius-sm); font-size: 12px; }

.barra-acciones__mirar .usuarios__filtro-rol-label { font-size: 12px; gap: 6px; }
.barra-acciones__mirar .tabla-barra { min-height: 30px; }

/* La raya se esconde al envolver: dos mitades en renglones distintos ya están
   separadas, y la rayita suelta al final de la primera línea se lee como un
   error de pintado. Quien decide es `barra-acciones.js`, comparando en qué
   renglón cayó cada mitad; un `@media` tendría que adivinar el ancho, y el
   ancho útil depende también de si el menú está plegado. */

/* ==========================================================================
   INGRESO — fondo de caras, columna de texto y el Dr. Simi sobre la tarjeta

   Segunda entrega de la maqueta de la dirección («Login con emojis Simi»).
   Sobre la anterior añade cabecera de marca arriba, una columna de texto a la
   izquierda con tres rasgos, y un pie con la línea de conexión segura, la
   ayuda y el copyright. La tarjeta y la cara que reacciona siguen igual.

   El velo ya no es plano: es un DEGRADADO horizontal, más opaco a la izquierda
   —donde va el texto, que necesita fondo limpio— y más transparente a la
   derecha, donde las caras acompañan a la tarjeta.

   Tres cosas se apartan de la maqueta a propósito:

   1. El fondo NO se pinta con un <div> por casilla —cientos de nodos y quince
      imágenes sueltas, 570 KB— sino con UNA imagen que se repite,
      `simi-fondo-hd.png` (89 KB, Simi versión D al doble de resolución; la
      original `simi-fondo.png` queda de respaldo), horneada del mismo juego de caras y con la misma
      retícula. Debajo del velo se ve igual.
   2. Los iconos son los Material Symbols que ya usa toda la intranet, no SVG
      sueltos: misma familia, mismo grosor, y no hay que mantener dos juegos.
   3. Los colores salen de los tokens, para que el modo oscuro siga en pie.

   Clases propias (`ingreso*`) y no las de `.login-card`, que siguen usando
   /404, /recuperar, /restablecer y /primer-acceso.
   ========================================================================== */
.ingreso {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--sidebar-fondo);
  color: #fff;
}

/* ---------- El papel pintado de caras ----------
   Dos capas: el velo en degradado y, debajo, la imagen que se repite. */
.ingreso__fondo {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, var(--velo-ingreso-izq) 0%, var(--velo-ingreso-med) 55%, var(--velo-ingreso-der) 100%),
    url("/assets/img/simi-fondo-hd.png");
  background-repeat: repeat, repeat;
  background-size: auto, 460px 206px;
  pointer-events: none;
}
:root {
  --velo-ingreso-izq: rgba(15, 42, 92, .97);
  --velo-ingreso-med: rgba(15, 42, 92, .90);
  --velo-ingreso-der: rgba(15, 42, 92, .84);
}
html.dark {
  --velo-ingreso-izq: rgba(11, 31, 69, .97);
  --velo-ingreso-med: rgba(11, 31, 69, .91);
  --velo-ingreso-der: rgba(11, 31, 69, .86);
}

.ingreso__marco {
  position: relative;
  min-height: 100vh;
  /* 1120 y no los 1440 de la maqueta. Con `space-between`, todo el ancho que
     sobra se convierte en hueco ENTRE las dos columnas: medido a 1314 px, el
     texto ocupa 520 y la tarjeta 380, asi que quedaban 270 px de aire en medio
     y la tarjeta pegada al borde. Estrechando la medida, las dos se acercan y
     la cabecera y el pie se alinean con ellas. */
  max-width: 1120px;
  margin: 0 auto;
  padding: 36px 72px;
  display: flex; flex-direction: column;
}

/* ---------- Cabecera de marca ---------- */
.ingreso__marca { display: flex; align-items: center; gap: 12px; }
.ingreso__marca img {
  width: 44px; height: 44px; border-radius: var(--radius-circle);
  background: var(--surface);
  /* Un aro claro en vez de sombra: sobre marino la sombra no se ve. */
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .5);
}
.ingreso__marca b { font-size: 16px; font-weight: 600; }
.ingreso__marca span { font-size: 14px; color: var(--sobre-marino-suave); }

/* ---------- Las dos columnas ---------- */
.ingreso__centro {
  flex: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 64px; padding: 32px 0;
}

.ingreso__intro { max-width: 520px; display: flex; flex-direction: column; gap: 18px; }
.ingreso__intro h1 {
  margin: 0; font-size: 48px; line-height: 1.08; font-weight: 700;
  letter-spacing: -.02em; text-wrap: balance;
  /* En blanco y dicho aqui: `h1, h2, h3 { color: var(--navy) }` gana a lo
     heredado, y en marino sobre marino el titulo no se veria. */
  color: #fff;
}
.ingreso__intro > p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--sobre-marino-suave); }

.ingreso__rasgos { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ingreso__rasgos li {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; font-size: 15px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .07);
}
.ingreso__rasgos .ms { font-size: 20px; flex: none; color: var(--sobre-marino); }

/* ---------- La tarjeta ---------- */
.ingreso__caja {
  position: relative;
  width: 100%; max-width: 380px; flex: none;
  margin-top: 40px;
  padding: 68px 32px 28px;
  background: var(--surface);
  color: var(--text-soft);
  border-radius: var(--radius-lg);
  /* Sombra larga y baja: la tarjeta tiene que despegarse del marino sin que se
     vea el canto. */
  box-shadow: 0 24px 60px rgba(0, 20, 50, .4);
  display: flex; flex-direction: column; gap: 14px;
}

/* ---------- La cara que reacciona ----------
   Asoma por encima del borde: el `padding-top` de 68 px es el hueco que deja. */
.ingreso__cara {
  position: absolute;
  left: 50%; top: -58px;
  width: 112px; height: 112px;
  margin-left: -56px;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .25));
  transition: transform .26s ease, opacity .17s ease;
}
/* El salto al cambiar de cara: dice que ha pasado algo sin escribir nada. */
.ingreso__cara.es-salto { transform: scale(1.08); }
/* El fundido entre caras (login.js ponerCara): se achica y se apaga, y vuelve. */
.ingreso__cara.es-cambio { opacity: 0; transform: scale(.82) translateY(6px); }
.ingreso__titulo { transition: color .2s ease; }
@media (prefers-reduced-motion: reduce) {
  .ingreso__cara { transition: none; }
  .ingreso__cara.es-salto, .ingreso__cara.es-cambio { transform: none; }
}

.ingreso__titulo {
  margin: 0; text-align: center;
  font-size: 21px; font-weight: 700; color: var(--navy);
  letter-spacing: -.01em;
}
.ingreso__sub { margin: -8px 0 0; text-align: center; font-size: 13px; color: var(--text-muted); }

/* ---------- Campos, con la etiqueta en la muesca ----------
   La etiqueta empieza DENTRO del campo y al escribir sube hasta el borde, que
   abre a su paso. Es lo que ya hacen los formularios del resto de la intranet,
   asi que el ingreso habla el mismo idioma.

   OJO CON EL ORDEN DEL MARCADO: la etiqueta va DESPUES del input. Es lo unico
   que permite al CSS saber si el campo esta vacio -`:placeholder-shown`- sin
   una linea de JavaScript, y por eso el `placeholder` es un espacio: tiene que
   existir para que el selector tenga algo que mirar, pero no debe verse. */
.ingreso__campos { display: flex; flex-direction: column; gap: 14px; }
.ingreso__par { position: relative; margin-top: 6px; }
.ingreso__campo {
  width: 100%; height: 46px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 14px; outline: 0;
  transition: border-color .15s, box-shadow .15s;
}
.ingreso__campo:focus { border-color: var(--brand); box-shadow: var(--focus-ring); }
.ingreso__par label {
  position: absolute; left: 10px; top: 23px;
  transform: translateY(-50%);
  padding: 0 5px;
  /* El fondo es el de la TARJETA, no blanco en literal: al subir, la etiqueta
     tapa el borde y abre la muesca, y en modo oscuro la tarjeta no es blanca. */
  background: var(--surface);
  font-size: 14px; line-height: 1; color: var(--text-muted);
  pointer-events: none;
  transition: top .15s ease, font-size .15s ease, color .15s ease;
}
.ingreso__campo:focus + label,
.ingreso__campo:not(:placeholder-shown) + label {
  top: 0; font-size: 12px; font-weight: 600; color: var(--text-muted);
}
.ingreso__campo:focus + label { color: var(--brand); }
@media (prefers-reduced-motion: reduce) { .ingreso__par label { transition: none; } }

/* ---------- Cuando algo falla, la tarjeta tiembla ----------
   Medio segundo y se acabo. Dice «no» sin tener que leer nada, y acompana al
   aviso en texto, no lo sustituye. */
.ingreso__caja.es-temblor { animation: ingresoTemblor .45s; }
@keyframes ingresoTemblor {
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .ingreso__caja.es-temblor { animation: none; }
}
/* El titulo se tine con el resultado: verde al entrar, rojo al fallar. */
.ingreso__titulo.es-bien { color: var(--success-dark); }
.ingreso__titulo.es-mal  { color: var(--danger-dark); }

.ingreso__boton {
  height: 48px; border: 0; border-radius: var(--radius-sm);
  background: var(--brand); color: var(--on-brand);
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background-color .15s;
}
.ingreso__boton:hover:not(:disabled) { background: var(--brand-dark); }
.ingreso__boton:disabled { cursor: wait; opacity: .7; }

.ingreso__olvido { text-align: center; font-size: 13px; color: var(--navy); text-decoration: none; }
.ingreso__olvido:hover { color: var(--brand); text-decoration: underline; }

/* ---------- Pie ---------- */
.ingreso__pie {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 13px; color: var(--sobre-marino-suave);
}
.ingreso__pie a { color: #fff; font-weight: 600; text-decoration: none; }
.ingreso__pie a:hover { text-decoration: underline; }
.ingreso__seguro { display: flex; align-items: center; gap: 8px; }
.ingreso__seguro .ms { font-size: 15px; color: var(--exito-sobre-marino); }

/* ---------- Estrecho ---------- */
@media (max-width: 960px) {
  .ingreso__marco { padding: 24px; }
  .ingreso__centro { flex-direction: column; justify-content: center; gap: 24px; }
  /* La columna de texto se retira: en vertical empuja el formulario fuera de
     la pantalla, y lo que hay que ver al entrar es el formulario. */
  .ingreso__intro { display: none; }
  .ingreso__marca span { display: none; }
  .ingreso__pie { justify-content: center; text-align: center; }
}

/* ---------- Pantallas bajas ----------
   Con poco alto la cara asomando se come el aire de arriba y la tarjeta acaba
   pegada al borde. Se encoge la cara y se recorta el hueco. */
@media (max-height: 620px) {
  .ingreso__caja { margin-top: 26px; padding-top: 46px; }
  .ingreso__cara { width: 84px; height: 84px; margin-left: -42px; top: -42px; }
}

/* ---------- /tipos-permiso ---------- */
.tipos-permiso__nota { margin: 0 0 14px; }
.tipos-permiso__tipo { display: grid; gap: 2px; }
.tipos-permiso__tipo strong { font-weight: 600; color: var(--text); }
.tipos-permiso__tipo small { font-size: 11px; color: var(--text-muted); }
.tipos-permiso__form { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.tipos-permiso__bloque {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
.tipos-permiso__bloque-titulo {
  margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-soft);
}
.tipos-permiso__bloque .campo { margin-bottom: 0; }
.tipos-permiso__bloque .campo__ayuda { margin: 0; }
.tipos-permiso__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tipos-permiso__fila {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-top: 10px; border-top: 1px solid var(--border); cursor: pointer;
}
.tipos-permiso__fila[hidden] { display: none; }
.tipos-permiso__fila-textos { display: grid; gap: 2px; min-width: 0; }
.tipos-permiso__fila-textos strong { font-size: 13px; font-weight: 600; color: var(--text); }
.tipos-permiso__fila-textos small { font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.tipos-permiso__rotulado { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tipos-permiso__rotulo { font-size: 12.5px; color: var(--text-muted); }
.tipos-permiso__probar { background: var(--surface-2); }
.tipos-permiso__resultado:empty { display: none; }
.tipos-permiso__resultado {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px; border-radius: 9px; background: var(--surface); border: 1px solid var(--border);
}
.tipos-permiso__resultado-cabeza { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tipos-permiso__resultado-cabeza strong { font-size: 20px; font-weight: 800; color: var(--brand); }
.tipos-permiso__resultado-cabeza span { font-size: 12.5px; color: var(--text-muted); }
.tipos-permiso__resultado-rotulo { margin: 2px 0 0; font-size: 11.5px; color: var(--text-muted); }
.tipos-permiso__excluidos { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.tipos-permiso__excluidos li {
  padding: 3px 9px; border-radius: var(--radius-pill); background: var(--surface-2);
  border: 1px solid var(--border); font-size: 11.5px; color: var(--text);
}
.tipos-permiso__vuelve { margin: 4px 0 0; font-size: 12.5px; color: var(--text-muted); }
.tipos-permiso__vuelve strong { color: var(--text); font-weight: 700; }
.tipos-permiso__resultado-error { margin: 0; color: var(--danger-dark); font-size: 12.5px; }

/* Formulario de solicitud: como se contaron los dias (GET /api/solicitudes/calcular). */
.formulario-solicitud__calculo { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.formulario-solicitud__calculo:empty { display: none; }
.formulario-solicitud__calculo p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
.formulario-solicitud__calculo-vuelve strong { color: var(--text); font-weight: 700; }
.formulario-solicitud__extra { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text); cursor: pointer; }
.formulario-solicitud__extra[hidden] { display: none; }
.formulario-solicitud__documento input[type="file"] { padding: 10px 12px; font-size: 13px; }
.tipos-permiso__aviso, .formulario-solicitud__calculo .formulario-solicitud__calculo-aviso { margin: 4px 0 0; padding: 8px 11px; font-size: 12px; line-height: 1.45; color: var(--warning-dark); }

/* ---------- /traspasar-jefatura ---------- */
.traspaso__nota { margin: 0 0 14px; }
.traspaso__jefatura { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.traspaso__n { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.traspaso__n--cero { font-weight: 400; color: var(--text-muted); }
.traspaso { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.traspaso__resumen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.traspaso__cifra { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.traspaso__cifra strong { font-size: 22px; font-weight: 800; color: var(--brand); line-height: 1.1; }
.traspaso__cifra span { font-size: 12px; color: var(--text-muted); }
.traspaso__bloque { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.traspaso__bloque-titulo { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-soft); }
.traspaso__bloque .campo { margin-bottom: 0; }
.traspaso__bloque .campo__ayuda { margin: 0; }
.traspaso__fila { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 10px; border-top: 1px solid var(--border); cursor: pointer; }
.traspaso__bloque-titulo + .traspaso__fila { padding-top: 0; border-top: 0; }
.traspaso__fila.es-apagada { opacity: .55; cursor: default; }
.traspaso__fila-textos { display: grid; gap: 2px; min-width: 0; }
.traspaso__fila-textos strong { font-size: 13px; font-weight: 600; color: var(--text); }
.traspaso__fila-textos small { font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.traspaso__reparto { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.traspaso__reparto[hidden] { display: none; }
.traspaso__reparto-fila { display: grid; grid-template-columns: minmax(0, 1.3fr) 120px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.traspaso__reparto-pend { font-size: 12px; color: var(--text-muted); text-align: right; }
.traspaso__lista summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--brand); }
.traspaso__lista ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 12.5px; color: var(--text); }
@media (max-width: 700px) {
  .traspaso__resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .traspaso__reparto-fila { grid-template-columns: 1fr; }
}

/* ---------- Proyecciones (submodulo) ---------- */
.subnav { margin: 0 0 18px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.subnav .pestanas { margin-bottom: -1px; }
.subnav a.pestana { text-decoration: none; padding: 12px 2px 11px; }
.proy-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: 16px; }
.proy-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.proy-chips__rotulo { font-size: 12.5px; color: var(--text-muted); margin-right: 2px; }
.proy-interruptor { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text); cursor: pointer; }
.proy-nota { margin: 0 0 16px; font-size: 12.5px; line-height: 1.5; }
.proy-celda { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.proy-celda strong { font-weight: 700; color: var(--text); }
.proy-celda small { font-size: 11px; color: var(--text-muted); }
.proy-base { font-size: 12px; color: var(--text-muted); }
.proy-metodo { display: grid; gap: 6px; margin-bottom: 14px; }
.proy-metodo p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.proy-metodo strong { color: var(--text); }
.proy-prueba__titulo { margin: 0 0 8px; font-size: 12.5px; color: var(--text-muted); }
.proy-prueba { width: 100%; max-width: 560px; border-collapse: collapse; font-size: 13px; }
.proy-prueba th { text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); padding: 8px 10px; border-bottom: 1px solid var(--border); }
.proy-prueba td { padding: 8px 10px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.proy-saldo { display: inline-flex; align-items: center; gap: 8px; }
.proy-vence { color: var(--warning-dark); font-weight: 600; font-size: 12.5px; }
.proy-form { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.proy-form .campo { margin-bottom: 0; }
.proy-acciones { display: flex; gap: 6px; white-space: nowrap; }
.proy-con-globo { cursor: help; border-bottom: 1px dotted var(--text-faint); }

/* Calendario persona x dia */
.cal-controles { justify-content: space-between; }
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-nav__mes { min-width: 150px; text-align: center; font-size: 15px; font-weight: 800; color: var(--text); text-transform: capitalize; }
.cal-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cal-filtro { min-width: 200px; }
.cal-buscar { height: 40px; min-width: 220px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; font-size: 13px; background: var(--surface); }
.cal-leyenda { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 8px; font-size: 12px; color: var(--text-muted); }
.cal-leyenda__item { display: inline-flex; align-items: center; gap: 6px; }
.cal-resumen { margin: 0 0 10px; }
.cal-marco { overflow: auto; max-height: 70vh; border: 1px solid var(--border); border-radius: 10px; }
.cal-marco.es-cargando { opacity: .55; }
.cal { border-collapse: separate; border-spacing: 0; font-size: 12px; min-width: 100%; }
.cal th, .cal td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--line); }
.cal thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); padding: 6px 0; font-weight: 700; color: var(--text-muted); }
.cal thead th span { display: block; font-size: 12px; color: var(--text); }
.cal thead th small { display: block; font-size: 10px; font-weight: 600; }
.cal tfoot td, .cal tfoot th { position: sticky; bottom: 0; z-index: 2; background: var(--surface-2); font-weight: 700; color: var(--text); padding: 6px 0; }
.cal tfoot small { display: block; font-size: 10px; font-weight: 600; color: var(--text-muted); }
.cal__persona { position: sticky; left: 0; z-index: 3; background: var(--surface); min-width: 220px; max-width: 220px; padding: 6px 12px !important; text-align: left; }
.cal thead .cal__persona, .cal tfoot .cal__persona { z-index: 4; background: var(--surface-2); }
.cal__nombre { display: block; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal tbody .cal__persona small { display: block; font-size: 10.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 400; }
.cal__dia { width: 30px; min-width: 30px; text-align: center; padding: 3px 0; }
.cal__dia.es-domingo { background: var(--surface-2); }
.cal__dia.es-feriado { background: var(--warning-light); }
.cal thead .cal__dia.es-feriado { background: var(--warning-light); color: var(--warning-dark); cursor: help; }
.cal__dia.es-hoy { box-shadow: inset 2px 0 0 var(--brand), inset -2px 0 0 var(--brand); }
.cal__vacio { padding: 18px !important; text-align: center; color: var(--text-muted); }
.cal-marca { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; font-size: 10.5px; font-weight: 800; color: #fff; cursor: default; }
.cal-marca--vacaciones { background: #2563EB; }
.cal-marca--licencia   { background: #DC2626; }
.cal-marca--permiso    { background: #7C3AED; }
.cal-marca--cumpleanos { background: #DB2777; }
.cal-marca--falta      { background: #475569; }
.cal-marca.es-pendiente { opacity: .45; }
.cal-marca.es-proyectada { background: transparent; color: #DB2777; box-shadow: inset 0 0 0 2px #DB2777; }
.cal-paginas { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 10px; font-size: 12.5px; color: var(--text-muted); }
.cal-paginas:empty { display: none; }

/* /he-config: plazo por area y estado al registrar */
.he-config__intro { margin: 0 0 12px; max-width: 760px; }
.he-config__filas { display: flex; flex-direction: column; margin-bottom: 14px; }
.he-config__fila { display: grid; grid-template-columns: 220px auto 1fr; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.he-config__fila strong { font-size: 13px; font-weight: 600; color: var(--text); }
.he-config__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.he-config__horas-caja { display: inline-flex; align-items: center; gap: 8px; }
.he-config__horas-caja[hidden] { display: none; }
.he-config__horas { width: 90px; height: 36px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; }
@media (max-width: 700px) { .he-config__fila { grid-template-columns: 1fr; } }

/* /correos: a quien va cada aviso */
.destinos-aviso { width: 100%; border-collapse: collapse; font-size: 13px; }
.destinos-aviso th { text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); padding: 9px 10px; border-bottom: 1px solid var(--border); }
.destinos-aviso td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.destinos-aviso td small { display: block; font-size: 11.5px; color: var(--text-muted); }
.destinos-aviso tr.es-apagado td:not(:first-child):not(:nth-child(2)) { opacity: .45; }

/* Tipos de permiso y de hora extra: acciones por fila (0075) */
.tipos-permiso__acciones { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.tipos-permiso__eliminar { color: var(--danger-dark); }
.tipos-permiso__eliminar:disabled { color: var(--text-muted); opacity: .55; cursor: not-allowed; }
.tipos-permiso__rotulado .tipos-permiso__rotulo { min-width: 132px; }
.catalogo-he__libre { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
/* Los avisos bajo la jornada (nombre, tipo de día, jornada Talana) solo ocupan sitio con texto */
.he-ingreso__resultado:empty { display: none; }

/* ---------- Trazabilidad (modules/trazabilidad.js) ---------- */
.traza { margin-top: 4px; }
.traza__resumen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.traza__dato {
  display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line); min-width: 0;
}
.traza__dato-rotulo { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.traza__dato-valor { font-size: 13.5px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.traza__dato-pie { font-size: 11.5px; color: var(--text-muted); overflow-wrap: anywhere; }
.traza__filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.traza__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.traza__paso { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; padding: 7px 0; }
.traza__carril { position: relative; display: flex; justify-content: center; }
.traza__carril i { width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: var(--border-strong); position: relative; z-index: 1; }
.traza__carril::after { content: ""; position: absolute; top: 16px; bottom: -10px; width: 1px; background: var(--border); }
.traza__paso:last-child .traza__carril::after { display: none; }
.traza__paso--inicio .traza__carril i { background: var(--brand); }
.traza__paso--ok .traza__carril i { background: var(--success); }
.traza__paso--no .traza__carril i { background: var(--danger); }
.traza__paso--cambio .traza__carril i { background: var(--warning); }
.traza__paso--fin .traza__carril i { background: var(--navy); box-shadow: 0 0 0 3px var(--surface-2); }
.traza__paso--vista .traza__carril i { background: var(--surface); box-shadow: inset 0 0 0 2px var(--border-strong); }
.traza__paso--correo .traza__carril i { background: var(--info); }
.traza__linea { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.traza__que { font-size: 13px; font-weight: 600; color: var(--text); }
.traza__paso--vista .traza__que { font-weight: 500; }
.traza__desde { font-size: 11px; color: var(--text-muted); background: var(--surface-2); border-radius: 999px; padding: 1px 8px; }
.traza__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.traza__ip { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.traza__detalle {
  margin: 4px 0 0; padding: 6px 9px; border-radius: 7px; background: var(--surface-2);
  font-size: 12px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere;
}
.traza__nota { margin-top: 8px; }
@media (max-width: 560px) { .traza__resumen { grid-template-columns: minmax(0, 1fr); } }

/* Antigüedad de un registro: en listas y en el titular del detalle. */
.traza-dias { display: inline-flex; align-items: center; white-space: nowrap; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.traza-dias--nuevo { background: var(--info-light); color: var(--info-dark); }
.traza-dias--medio { background: var(--warning-light, #FFF4E5); color: var(--warning-dark); }
.traza-dias--viejo { background: var(--danger-light, #FDECEC); color: var(--danger-dark); }
.traza-dias--fin   { background: var(--surface-2); color: var(--text-muted); font-weight: 500; }
.traza-dias--nada  { color: var(--text-muted); }
.ficha-titular__antiguedad:not(:empty), .detalle-hora-extra__antiguedad:not(:empty) { margin-left: 8px; display: inline-flex; vertical-align: middle; }

/* ---------- Graficos interactivos (modules/graficos-he.js) ---------- */
.graf-con-tip { position: relative; }
.graf-tip {
  position: absolute; z-index: 6; pointer-events: none;
  transform: translate(-50%, calc(-100% - 10px));
  display: grid; gap: 2px; padding: 7px 11px; border-radius: 9px;
  background: var(--navy); color: var(--surface); font-size: 12px; line-height: 1.35;
  white-space: nowrap; box-shadow: 0 6px 18px rgba(5, 45, 111, .22);
}
.graf-tip[hidden] { display: none; }
.graf-tip strong { font-weight: 700; font-size: 12.5px; }
.graf-tip span { opacity: .86; }
.graf-tip span:last-child:not(:first-child) { font-size: 11px; }
.graf-svg--interactivo { outline: none; touch-action: pan-y; }
.graf-svg--interactivo:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 8px; }
.graf-svg--clic { cursor: pointer; }
.graf-col { transition: opacity .15s ease, filter .15s ease; }
.graf-svg--foco .graf-col { opacity: .45; }
.graf-svg--foco .graf-col--on { opacity: 1; filter: brightness(1.08); }
.graf--sin-previa .graf-fantasma { display: none; }
.graf-leyenda__boton {
  display: inline-flex; align-items: center; gap: 7px; padding: 2px 8px; margin: -2px -8px;
  border: 0; border-radius: 999px; background: none; color: inherit; font: inherit; cursor: pointer;
}
.graf-leyenda__boton:hover { background: var(--surface-2); color: var(--text); }
.graf-leyenda__boton[aria-pressed="false"] { opacity: .5; text-decoration: line-through; }
.anillo__svg--foco .anillo__seg { filter: saturate(.45) opacity(.5); }
.anillo__svg--foco .anillo__seg--on { filter: none; transform: scale(1.03); }
.anillo__svg--clic .anillo__seg { cursor: pointer; }
.anillo__fila { border-radius: 8px; padding: 3px 6px; margin: -3px -6px; transition: background .15s ease; }
.anillo__fila--on { background: var(--surface-2); }
.anillo__fila--accion { cursor: pointer; }
.anillo__fila--accion:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.he-indicadores__fila--accion { cursor: pointer; border-radius: 8px; transition: background .15s ease; }
.he-indicadores__fila--accion:hover, .he-indicadores__fila--accion:focus-visible { background: var(--surface-2); outline: none; }

/* ---------- Panel general interactivo ---------- */
.tablero__hola-texto { flex: 1 1 auto; min-width: 0; }
.tablero__periodo { display: grid; gap: 6px; flex: 0 0 auto; align-self: flex-start; }
.tablero__periodo-rotulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
@media (max-width: 900px) { .tablero__hola { flex-wrap: wrap; } .tablero__periodo { width: 100%; } }
.tablero__zona { display: flex; flex-direction: column; gap: 18px; transition: opacity .2s ease; }
.tablero__zona--cargando { opacity: .55; pointer-events: none; }
/* Las cifras que llevan a algun sitio se ven y se sienten como botones. */
.tablero__caja--accion {
  color: inherit; text-decoration: none; text-align: left; font: inherit; border: 0; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tablero__caja--accion:hover, .tablero__caja--accion:focus-visible {
  transform: translateY(-2px); outline: none;
  box-shadow: 0 1px 2px rgba(5,45,111,.06), 0 18px 38px -16px rgba(5,45,111,.32), 0 0 0 2px var(--brand-line);
}
.tablero__ir { margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--brand); opacity: .75; }
.tablero__caja--accion:hover .tablero__ir { opacity: 1; }
.tablero__pista { margin: 8px 0 0; font-size: 11.5px; }
/* El nombre en una tabla del panel abre el detalle; la fila entera tambien. */
.tablero__abrir {
  display: grid; gap: 1px; padding: 0; border: 0; background: none; text-align: left; font: inherit; cursor: pointer;
}
.tablero__abrir .tablero__quien { color: var(--brand); }
.tablero__abrir:hover .tablero__quien, .tablero__abrir:focus-visible .tablero__quien { text-decoration: underline; }
.tablero__abrir:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.tablero__fila--accion { cursor: pointer; }
.tablero__fila--accion:hover td { background: var(--surface-2); }
.tablero__lista-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.tablero__lista-resumen { margin: 0; font-size: 13px; font-weight: 600; color: var(--text); }
/* El titulo de la trazabilidad con su aire, tambien dentro del detalle de horas extras (que junta titulo y contenido con un margen negativo). */
.traza > .grupo-titulo, .detalle-hora-extra .traza > .grupo-titulo { margin: 4px 0 12px; }
.traza > .grupo-titulo + .traza__cuerpo, .detalle-hora-extra .traza > .grupo-titulo + .traza__cuerpo { margin-top: 0; }

/* ---------- Tickets de soporte (modules/detalle-ticket.js, pages/tickets*) ---------- */
.ticket-badge { display: inline-flex; align-items: center; white-space: nowrap; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.ticket-badge--estado-abierto    { background: var(--info-light); color: var(--info-dark); }
.ticket-badge--estado-en_proceso { background: var(--warning-light, #FFF4E5); color: var(--warning-dark); }
.ticket-badge--estado-cerrado    { background: var(--surface-2); color: var(--text-muted); }
.ticket-badge--prio-baja    { background: var(--surface-2); color: var(--text-muted); }
.ticket-badge--prio-media   { background: var(--info-light); color: var(--info-dark); }
.ticket-badge--prio-alta    { background: var(--warning-light, #FFF4E5); color: var(--warning-dark); }
.ticket-badge--prio-urgente { background: var(--danger-light, #FDECEC); color: var(--danger-dark); }

.ticket-detalle { display: flex; flex-direction: column; gap: 6px; }
.ticket-cab { display: grid; gap: 6px; }
.ticket-cab__badges { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ticket-cab__cat { font-size: 12.5px; color: var(--text-muted); }
.ticket-cab__meta { margin: 0; font-size: 12px; color: var(--text-muted); }
.ticket-gestion { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); margin-top: 4px; }
.ticket-gestion__campo { display: grid; gap: 3px; font-size: 12px; }
.ticket-gestion__rotulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.ticket-gestion select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); }

.ticket-hilo { display: flex; flex-direction: column; gap: 10px; }
.ticket-sistema { display: flex; justify-content: center; gap: 8px; align-items: baseline; font-size: 11.5px; color: var(--text-muted); padding: 2px 0; }
.ticket-sistema__fecha { opacity: .7; }
.ticket-msg { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.ticket-msg--interna { background: var(--warning-light, #FFF8EC); border-color: var(--warning-line, #F3D9A6); }
.ticket-msg__top { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 12.5px; }
.ticket-msg__top strong { color: var(--text); }
.ticket-msg__etq { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--warning-dark); background: var(--surface); padding: 1px 7px; border-radius: 999px; }
.ticket-msg__fecha { margin-left: auto; color: var(--text-muted); font-size: 11.5px; }
.ticket-msg__texto { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.ticket-adjuntos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ticket-adjunto { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: 12.5px; color: var(--brand); text-decoration: none; }
.ticket-adjunto__img { max-width: 160px; max-height: 120px; border-radius: 8px; border: 1px solid var(--line); object-fit: cover; }
.ticket-responder { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.ticket-responder__texto { width: 100%; resize: vertical; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; font: inherit; }
.ticket-responder__pie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ticket-responder__interna { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); }
.ticket-responder__pie .btn { margin-left: auto; }

/* ===================================================================
   Diseñador de perfiles (/perfiles)
   Bloques claros reutilizando los tokens del sistema. La casilla manda;
   los chips de ambito y las areas solo se muestran cuando esta marcada.
   =================================================================== */
.perfil-buscar { margin-top: 4px; }
.perfil-resumen {
  margin: 10px 0 4px; font-size: 13px; font-weight: 600; color: var(--text-soft);
}
.perfil-resumen--alerta { color: var(--danger-dark); }

.perfil-grupos { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.perfil-grupo {
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden;
}
.perfil-grupo__titulo {
  margin: 0; padding: 9px 12px; font-size: 13px; font-weight: 700; color: var(--brand-dark);
  background: var(--brand-tint); border-bottom: 1px solid var(--border);
}
.perfil-grupo__caps { display: flex; flex-direction: column; }

.perfil-cap { padding: 8px 12px; border-top: 1px solid var(--line); }
.perfil-cap:first-child { border-top: none; }
.perfil-cap--on { background: var(--brand-tint); }
.perfil-cap__cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.perfil-cap__cab input[type="checkbox"] { width: 16px; height: 16px; flex: none; }
.perfil-cap__nombre { font-size: 14px; color: var(--text); cursor: pointer; display: flex; align-items: center; gap: 6px; }
.perfil-cap__codigo {
  margin-left: auto; font-size: 11px; color: var(--text-muted);
  background: var(--bg); padding: 1px 6px; border-radius: 5px;
}
.perfil-cap__sensible {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--danger-dark); background: var(--danger-light);
  border: 1px solid var(--danger-line); border-radius: 999px; padding: 1px 7px;
}

.perfil-amb { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px 24px; }
.perfil-amb__op {
  font-size: 12px; font-weight: 600; color: var(--text-soft); cursor: pointer;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 3px 11px; transition: all .12s ease;
}
.perfil-amb__op:hover { border-color: var(--brand); color: var(--brand); }
.perfil-amb__op--on, .perfil-amb__op--on:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

.perfil-areas {
  display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 2px 24px;
  padding: 8px 12px; background: var(--bg); border-radius: 8px;
}
.perfil-area { font-size: 13px; color: var(--text-soft); display: inline-flex; align-items: center; cursor: pointer; }
/* «Marcar todas / Quitar todas»: ocupa su propia línea, arriba de las casillas. */
.perfil-areas__fila { flex-basis: 100%; margin-bottom: 2px; }
.perfil-areas__todas {
  font: inherit; font-size: 12px; font-weight: 600; color: var(--brand); cursor: pointer;
  background: var(--surface); border: 1px solid var(--brand-line); border-radius: 999px; padding: 2px 10px;
}
.perfil-areas__todas:hover { background: var(--brand-tint); }
.perfil-areas__todas--llenas { color: var(--text-soft); border-color: var(--border-strong); }

.perfil-acciones, .perfil-cap__acciones { display: flex; gap: 6px; flex-wrap: wrap; }

@media (max-width: 650px) {
  .perfil-cap__codigo { margin-left: 0; order: 3; width: 100%; }
  .perfil-amb, .perfil-areas { margin-left: 0; }
}

/* Asignación masiva de un perfil a usuarios (/perfiles) */
.perfil-usuarios {
  display: flex; flex-direction: column; margin-top: 6px;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden; max-height: 52vh; overflow-y: auto;
}
.perfil-usuario {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-top: 1px solid var(--line); cursor: pointer;
}
.perfil-usuario:first-child { border-top: none; }
.perfil-usuario:hover { background: var(--brand-tint); }
.perfil-usuario input[type="checkbox"] { width: 16px; height: 16px; flex: none; }
.perfil-usuario__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.perfil-usuario__nom { font-size: 14px; color: var(--text); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.perfil-usuario__inac { font-size: 10px; font-weight: 700; text-transform: uppercase; }
.perfil-usuario__meta { font-size: 12px; color: var(--text-muted); }

/* ==========================================================================
   Menú lateral · rediseño "Suave" (claro, chips de color por módulo,
   separadores y carril limpio al plegar). Va al final a propósito: reemplaza
   el look azul marino anterior ganando en la cascada, sin tocar su bloque.
   Sigue el tema (usa --surface/--border/--text…), así que en modo oscuro el
   menú se vuelve un gris oscuro suave en vez de blanco.
   ========================================================================== */
:root{
  --sb-fg-azul:#2846c7;   --sb-bg-azul:#e7ecff;
  --sb-fg-verde:#0f8a4f;  --sb-bg-verde:#e3f6ec;
  --sb-fg-morado:#7c3aed; --sb-bg-morado:#efe7fe;
  --sb-fg-ambar:#b26a00;  --sb-bg-ambar:#fdf0db;
  --sb-fg-slate:#64748b;  --sb-bg-slate:#eef1f5;
  --sb-fg-rosa:#be185d;   --sb-bg-rosa:#fde7f1;
}
html.dark{
  --sb-fg-azul:#9db4ff;   --sb-bg-azul:rgba(99,130,246,.16);
  --sb-fg-verde:#73d99f;  --sb-bg-verde:rgba(34,170,100,.16);
  --sb-fg-morado:#c3a6f7; --sb-bg-morado:rgba(140,90,240,.18);
  --sb-fg-ambar:#e6b366;  --sb-bg-ambar:rgba(200,130,0,.16);
  --sb-fg-slate:#9aa6b8;  --sb-bg-slate:rgba(148,163,184,.16);
  --sb-fg-rosa:#f49ac1;   --sb-bg-rosa:rgba(236,72,153,.16);
}

.sidebar{
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 0 8px 16px;
  gap: 2px;
  scrollbar-color: color-mix(in srgb, var(--text-muted) 45%, transparent) transparent;
}

/* Marca: disco del logo tal cual sobre claro, textos en color de texto. */
.sidebar__brand{ padding: 12px 8px 8px; }
.sidebar__logo{ background: transparent; padding: 0; }
.sidebar__title{ color: var(--text); font-size: 13.5px; font-weight: 700; }
.sidebar__sub{ color: var(--text-muted); }

/* Encabezados de sección: tenues, con separador fino arriba. */
.sidebar__label{
  color: var(--text-muted); font-weight: 600; letter-spacing: .02em; text-transform: none;
  font-size: 11px; padding: 11px 8px 4px; margin: 6px 6px 0; border-top: 1px solid var(--border);
}
.sidebar nav + .sidebar__label,
.sidebar > .sidebar__label{ /* separador entre secciones */ }
.sidebar > nav:first-of-type ~ nav { }

/* Enlaces */
.sidebar nav{ gap: 1px; }
.nav-link{
  color: var(--text-soft);
  border-radius: 9px;
  padding: 5px 8px; gap: 10px;
  height: auto; min-height: 40px;
}
.nav-link__chip{
  width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--sb-bg-slate); color: var(--sb-fg-slate);
}
.nav-link__chip svg{ width: 16px; height: 16px; color: inherit; }
.nav-link:hover{ background: var(--surface-2); color: var(--text); }
.nav-link:hover .nav-link__chip svg{ color: inherit; }
.nav-link.active{ background: var(--brand-light); color: var(--brand); font-weight: 600; }
.nav-link.active .nav-link__chip svg{ color: inherit; }
/* Fuera la "pestaña" curva del diseño anterior: Suave usa una píldora simple. */
.nav-link.active::before, .nav-link.active::after{ content: none; display: none; }
.nav-link.active .nav-link__chip{ outline: 1.5px solid color-mix(in srgb, var(--brand) 32%, transparent); }
.nav-link:focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; }

/* Color del chip por grupo */
.nav--azul   .nav-link__chip{ background: var(--sb-bg-azul);   color: var(--sb-fg-azul); }
.nav--verde  .nav-link__chip{ background: var(--sb-bg-verde);  color: var(--sb-fg-verde); }
.nav--morado .nav-link__chip{ background: var(--sb-bg-morado); color: var(--sb-fg-morado); }
.nav--ambar  .nav-link__chip{ background: var(--sb-bg-ambar);  color: var(--sb-fg-ambar); }
.nav--slate  .nav-link__chip{ background: var(--sb-bg-slate);  color: var(--sb-fg-slate); }
.nav--rosa   .nav-link__chip{ background: var(--sb-bg-rosa);   color: var(--sb-fg-rosa); }

/* ---- Plegado: carril limpio y centrado ---- */
body.menu-plegado .sidebar{ padding: 0 0 16px; }
body.menu-plegado .nav-link{ justify-content: center; padding: 5px 0; gap: 0; }
body.menu-plegado .nav-link.active{ background: transparent; }
body.menu-plegado .nav-link.active .nav-link__chip{ outline: 2px solid var(--brand); }
body.menu-plegado .sidebar__label{
  width: 26px; height: 0; min-height: 0; padding: 0; margin: 9px auto 4px;
  border-top: 1px solid var(--border); opacity: 1; overflow: hidden;
}
body.menu-plegado .sidebar__brand{ justify-content: center; padding: 12px 0 8px; }

/* El bloque de marca también pasa a claro (seguía con fondo navy del diseño
   anterior). Se mantiene pegajoso arriba para cubrir el scroll. */
.sidebar__brand{
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  margin-left: 0;
  padding: 2px 8px 6px;
}
body.menu-plegado .sidebar__brand{ padding: 2px 0 6px; }
.sidebar__title{ color: var(--text); }
.sidebar__sub{ color: var(--text-muted); }

/* ---- Buscador dentro del menú (estilo Suave) ---- */
.sidebar__buscar{
  display: flex; align-items: center; gap: 8px;
  margin: 6px 8px 4px; padding: 7px 10px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted);
}
.sidebar__buscar-icono{ width: 16px; height: 16px; flex: 0 0 auto; }
.sidebar__buscar-icono svg{ width: 16px; height: 16px; }
.sidebar__buscar-input{
  border: 0; background: none; outline: none; font: inherit; font-size: 12.5px;
  color: var(--text); width: 100%; min-width: 0; padding: 0;
}
.sidebar__buscar-input::placeholder{ color: var(--text-muted); }
/* Oculta la X nativa del input[type=search] para que no choque con el estilo. */
.sidebar__buscar-input::-webkit-search-cancel-button{ -webkit-appearance: none; appearance: none; }
.sidebar__buscar-kbd{
  margin-left: auto; font-family: inherit; font-size: 10px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--border); border-radius: 5px;
  padding: 1px 5px 2px; color: var(--text-muted); flex: 0 0 auto; white-space: nowrap;
}
.oculto-busq{ display: none !important; }

/* Plegado: el buscador es solo el ícono, centrado y pulsable. */
body.menu-plegado .sidebar__buscar{ width: 40px; margin: 6px auto 4px; padding: 9px 0; justify-content: center; cursor: pointer; }
body.menu-plegado .sidebar__buscar-input,
body.menu-plegado .sidebar__buscar-kbd{ display: none; }

/* ---- Botón de plegar: dentro de la marca, no flotando en el borde ----
   Antes era un círculo fixed en el cruce menú/contenido; con el menú claro
   quedaba flotando sobre el contenido. Ahora va en la fila de marca, a la
   derecha; plegado, baja bajo el logo, centrado. */
.sidebar__plegar{
  position: static; transform: none; inset: auto; left: auto; top: auto;
  margin-left: auto; flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  box-shadow: none;
}
.sidebar__plegar:hover{ background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
body.menu-plegado .sidebar__plegar{ left: auto; margin: 0; }
body.menu-plegado .sidebar__brand{
  flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 8px; height: auto;
}

/* Recuadro "Cómo funciona" del cajón "El inicio de la cadena" (/aprobadores):
   ubica al usuario en qué punto de la cadena está configurando. Con tokens para
   que el modo oscuro lo herede solo. */
.guia-inicio{
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 13px; margin-bottom: 16px;
}
.guia-inicio__t{ font-size: 12px; font-weight: 800; color: var(--navy); margin-bottom: 9px; }
.guia-inicio__flujo{ display: flex; align-items: stretch; gap: 6px; margin-bottom: 9px; }
.guia-inicio__paso{
  flex: 1; text-align: center; background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 4px;
}
.guia-inicio__paso.is-on{
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
}
.guia-inicio__n{ font-size: 10.5px; font-weight: 800; color: var(--text-muted); }
.guia-inicio__paso.is-on .guia-inicio__n{ color: var(--brand); }
.guia-inicio__d{ font-size: 10.5px; color: var(--text-soft); line-height: 1.2; margin-top: 2px; }
.guia-inicio__a{ align-self: center; color: var(--text-muted); font-weight: 800; font-size: 13px; }
.guia-inicio__p{ font-size: 11.5px; color: var(--text-soft); line-height: 1.5; margin: 0; }

/* Botón "Eliminar" de un borrador en la tabla de flujos (/aprobadores): ghost
   discreto que se tiñe de peligro al apuntarlo, para que no compita con la
   acción principal pero quede claro que es destructivo. */
.fila-eliminar{ color: var(--danger); }
.fila-eliminar:hover{ background: var(--danger-light); border-color: var(--danger-line); color: var(--danger-dark); }

/* Ícono de ayuda ⓘ junto a una etiqueta (ver src/modules/ayuda.js). Hereda el
   globo de .tip; aquí solo el icono y la variante multilínea del globo. */
.ayuda-icono{
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; margin-left: 5px; color: var(--text-muted);
  cursor: help; border-radius: var(--radius-circle);
}
.ayuda-icono:hover, .ayuda-icono:focus-visible{ color: var(--brand); outline: none; }
/* El globo, cuando lleva una frase: deja que fluya en varias líneas en vez de
   estirarse en una sola (como hace .tip por defecto con white-space:nowrap). */
.tip--ayuda::after{
  white-space: normal; width: max-content; max-width: 240px;
  text-align: left; line-height: 1.4; font-weight: 500;
}
/* El globo también aparece al ENFOCAR con el teclado, no solo al pasar el mouse. */
.tip:focus-visible::after{ opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Acceso "Personalizado" de una cuenta (/usuarios) ----------
   Ver src/assets/js/modules/usuario-secciones.js. Todas las secciones a la vista,
   cada una con sus acciones como casillas-píldora y, donde aplica, "Sobre qué". */
.usuario-personalizado__switch .ayuda-icono{ margin-right: auto; }
.acc-resumen{
  background: var(--success-light); border: 1px solid var(--success-line);
  border-radius: var(--radius-sm); padding: 10px 12px; margin: 4px 0 12px;
}
.acc-resumen.is-vacio{ background: var(--surface); border-color: var(--border); border-style: dashed; }
.acc-resumen__t{
  font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  color: var(--success-dark); margin-bottom: 4px;
}
.acc-resumen ul{ margin: 0; padding-left: 17px; font-size: 12px; color: var(--text); line-height: 1.6; }
.acc-resumen__vacio{ margin: 0; font-size: 12px; color: var(--text-muted); }
.acc-leyenda{ display: flex; align-items: center; margin: 0 0 4px; font-size: 11.5px; color: var(--text-soft); }
.acc-grupo{
  font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: var(--text-muted); margin: 14px 0 6px;
}
.acc-lista{ display: grid; gap: 7px; }
.acc-sec{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.acc-sec.is-on{
  border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
  background: color-mix(in srgb, var(--brand) 3%, var(--surface));
}
.acc-sec__cab{ display: flex; align-items: center; gap: 10px; padding: 9px 11px; flex-wrap: wrap; }
.acc-sec__marca{ display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.acc-sec__nom{ font-weight: 700; font-size: 12.5px; color: var(--text); }
.acc-sec__desc{ margin-left: auto; font-size: 11px; color: var(--text-muted); text-align: right; }
.acc-sec__cuerpo{ padding: 0 11px 10px 37px; }
.acc-regla-wrap{ padding: 8px 0; border-top: 1px dashed var(--line); }
.acc-regla-wrap:first-child{ border-top: 0; padding-top: 2px; }
.acc-regla{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.acc-regla__sobre{ display: flex; align-items: center; gap: 8px; flex: 1 1 220px; min-width: 0; }
.acc-regla__rot{ font-size: 11px; font-weight: 700; color: var(--text-muted); }
.acc-regla__sobre select, .acc-regla__sobre .select-ui{ flex: 1; min-width: 0; }
.acc-regla__acciones{ display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
.acc-chip{
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px 0 8px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  font-size: 12px; color: var(--text-soft); background: var(--surface); cursor: pointer;
  transition: border-color .13s, background .13s, color .13s;
}
.acc-chip:hover{ border-color: var(--brand); }
.acc-chip.is-si{
  border-color: var(--brand); color: var(--brand); font-weight: 700;
  background: color-mix(in srgb, var(--brand) 9%, var(--surface));
}
.acc-chip.is-no{ opacity: .45; cursor: not-allowed; }
.acc-regla__quitar{ margin-left: auto; }
.acc-mas{
  border: 0; background: none; padding: 4px 0; margin-top: 2px; cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 700; color: var(--brand);
}
.acc-mas:hover{ text-decoration: underline; }
.acc-aviso{ color: var(--warning-dark); }

/* ---------- /usuarios → "Perfil y accesos": ancho y en dos columnas ----------
   Antes medía 620px, apilaba todo y el formulario tenía altura fija
   (100dvh - 150px) más alta que el cajón: dos scrolls anidados y los botones
   apretados. Ahora el formulario llena el cajón (flex), cada columna desplaza
   sola y la botonera es una fila fija abajo. */
.cajon.usuario-editor--perfil { width: min(1200px, 96vw); }
.usuario-editor.usuario-editor--perfil .cajon__cuerpo {
  display: flex; flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; min-height: 0;
}
.usuario-editor.usuario-editor--perfil .cajon__cuerpo > form {
  height: auto; flex: 1 1 auto; min-height: 0; padding: 0;
}
.usuario-editor--perfil form > .aviso { margin: 14px 22px 0; }
.usuario-editor--perfil .perfil-cols {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  grid-template-rows: minmax(0, 1fr); padding: 0; margin: 0; overflow: hidden;
}
.usuario-editor--perfil .perfil-cols--una { grid-template-columns: minmax(0, 1fr); }
/* padding-top: la muesca de los rótulos de campo sobresale hacia arriba. */
.usuario-editor--perfil .perfil-cols__col { overflow-y: auto; min-height: 0; padding: 18px 22px 22px; margin: 0; }
.usuario-editor--perfil .perfil-cols__col--acceso { border-left: 1px solid var(--border); }
.usuario-editor--perfil .perfil-cols__col > * { margin-bottom: 18px; }
.usuario-editor--perfil .perfil-cols__col > :last-child { margin-bottom: 0; }
.usuario-editor--perfil .perfil-cols__col--acceso > details > summary { padding-top: 0; }
.usuario-editor--perfil .usuario-editor__acciones {
  display: flex; flex-direction: row-reverse; align-items: center; gap: 8px;
  padding: 12px 22px; margin: 0;
}
.usuario-editor--perfil .usuario-editor__acciones .btn { width: auto; }
/* "Cancelar" (último en el DOM, primero a la izquierda) se separa del resto. */
.usuario-editor--perfil .usuario-editor__acciones > :last-child { margin-right: auto; }
/* El paso 1 ("Datos de la cuenta") tenía el mismo formulario de altura fija y
   el mismo doble scroll: mismo arreglo, en una sola columna. */
.usuario-editor.usuario-editor--datos .cajon__cuerpo {
  display: flex; flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; min-height: 0;
}
.usuario-editor.usuario-editor--datos .cajon__cuerpo > form {
  height: auto; flex: 1 1 auto; min-height: 0; padding: 0;
}
.usuario-editor--datos form > .aviso { margin: 14px 22px 0; }
.usuario-editor--datos .usuario-editor__campos { padding: 18px 22px 20px; margin: 0; }
.usuario-editor--datos .usuario-editor__acciones {
  display: flex; flex-direction: row-reverse; align-items: center; gap: 8px;
  padding: 12px 22px; margin: 0;
}
.usuario-editor--datos .usuario-editor__acciones .btn { width: auto; }
.usuario-editor--datos .usuario-editor__acciones > :last-child { margin-right: auto; }
/* Con la vista previa abierta al lado el perfil queda angosto: una columna y
   un solo scroll. Igual en pantallas chicas. */
body.usuarios--vista-abierta .usuario-editor--perfil .perfil-cols {
  grid-template-columns: minmax(0, 1fr); grid-template-rows: none; overflow-y: auto;
}
body.usuarios--vista-abierta .usuario-editor--perfil .perfil-cols__col { overflow: visible; }
body.usuarios--vista-abierta .usuario-editor--perfil .perfil-cols__col--acceso { border-left: 0; border-top: 1px solid var(--border); }
@media (max-width: 900px) {
  .usuario-editor--perfil .perfil-cols { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; overflow-y: auto; }
  .usuario-editor--perfil .perfil-cols__col { overflow: visible; }
  .usuario-editor--perfil .perfil-cols__col--acceso { border-left: 0; border-top: 1px solid var(--border); }
  .usuario-editor--perfil .usuario-editor__acciones { flex-wrap: wrap; }
}

/* ---------- /perfiles → "Lo que trae cada rol" ---------- */
.rol-intro{ margin: 0 0 12px; }
.rol-lista{ display: grid; gap: 8px; }
.rol-fila{
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 11px 13px;
}
.rol-fila__cab{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rol-fila__nom{ font-size: 13px; color: var(--text); }
.rol-fila__meta{ font-size: 11.5px; color: var(--text-muted); }
.rol-fila__desc{ margin: 2px 0 8px; }
.rol-fila__chips{ display: flex; flex-wrap: wrap; gap: 5px; }
.rol-chip{
  display: inline-flex; align-items: center; height: 24px; padding: 0 9px;
  border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 600;
  color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand) 25%, var(--border));
}
.rol-fila__estado{ margin: 8px 0 0; font-size: 11px; color: var(--text-muted); }
.rol-fila__estado.is-distinto{ color: var(--warning-dark); font-weight: 700; }
.rol-fila__creado{
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin-left: 8px;
  border-radius: var(--radius-pill); font-size: 10.5px; font-weight: 700;
  color: var(--success-dark, #166534); background: var(--success-light, #dcfce7);
}
/* Nuevo rol (0098): nombre y familia lado a lado, descripción debajo. */
.rol-editor__datos{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 10px 14px; margin-bottom: 6px; }
.rol-editor__datos .campo{ margin: 0; }
.rol-editor__desc{ grid-column: 1 / -1; }
.rol-editor__desc textarea{ min-height: 54px; resize: vertical; }
@media (max-width: 640px){ .rol-editor__datos{ grid-template-columns: minmax(0, 1fr); } }

/* Detalle de un rol: qué permite, comparar, cuentas por poner al día, historial. */
.rol-fila__botones{ display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.rol-fila__atraso{
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-top: 9px; padding: 8px 11px; border-radius: var(--radius-sm);
  background: var(--warning-light); color: var(--warning-dark); font-size: 12px; font-weight: 600;
}
.perfil-uso{ display: inline-flex; gap: 5px; flex-wrap: wrap; }
.rol-detalle__pestanas{ border-bottom: 1px solid var(--border); margin: -4px 0 14px; overflow-x: auto; overflow-y: hidden; flex-shrink: 0; }
.rol-detalle__pestanas .pestana{ padding: 12px 2px 11px; margin-right: 16px; font-size: 13px; }
.rol-detalle__pestanas .pestana{ white-space: nowrap; }
.rol-permite__grupo{ margin: 0 0 14px; }
.rol-permite__grupo h3{ font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 0 0 6px; }
.rol-permite__lista{ list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rol-permite__item{
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2px 12px; align-items: baseline;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
}
.rol-permite__item.is-sensible{ border-color: color-mix(in srgb, var(--warning-dark) 35%, var(--border)); }
.rol-permite__texto{ font-size: 13px; font-weight: 600; color: var(--text); }
.rol-permite__ambito{ font-size: 12px; color: var(--brand); }
.rol-permite__origen{ grid-column: 1 / -1; font-size: 11px; color: var(--text-muted); }
.rol-comparar__barra{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.rol-comparar{ margin-top: 12px; }
.rol-comparar__tabla{ border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.rol-comparar__fila{ display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 7px 10px; border-top: 1px solid var(--border); font-size: 12.5px; }
.rol-comparar__fila--cab{ border-top: 0; background: var(--surface-2); font-weight: 700; color: var(--text); }
.rol-comparar__grupo{ padding: 6px 10px; border-top: 1px solid var(--border); background: var(--surface-2); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.rol-comparar__cap{ color: var(--text); font-weight: 600; }
.rol-comparar__celda{ color: var(--success-dark); }
.rol-comparar__celda.is-no{ color: var(--text-muted); }
.rol-comparar__celda.is-distinto{ color: var(--warning-dark); font-weight: 600; }
.rol-cuentas{ display: grid; gap: 5px; margin-top: 8px; }
.rol-cuenta{ display: flex; gap: 10px; align-items: flex-start; padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; background: var(--surface); }
.rol-cuenta input{ margin-top: 3px; }
.rol-cuenta__txt{ display: grid; gap: 2px; min-width: 0; }
.rol-cuenta__txt strong{ font-size: 13px; }
.rol-cuenta__recibe{ color: var(--success-dark); font-size: 11.5px; }
.rol-cuenta__pierde{ color: var(--danger-dark); font-size: 11.5px; }
.rol-cuentas__accion{ display: flex; justify-content: flex-end; margin-top: 12px; }
.rol-historial{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rol-historial__item{ padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.rol-historial__item p{ margin: 5px 0 0; font-size: 12.5px; color: var(--text); }
.rol-historial__cab{ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rol-historial__tipo{ font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--brand-light); color: var(--brand); }
.rol-historial__tipo--borrar{ background: var(--danger-light); color: var(--danger-dark); }
.rol-historial__tipo--crear, .rol-historial__tipo--aplicar{ background: var(--success-light); color: var(--success-dark); }
.rol-historial__meta{ font-size: 11.5px; color: var(--text-muted); }
@media (max-width: 640px){
  .rol-fila__cab{ flex-wrap: wrap; }
  .rol-permite__item{ grid-template-columns: minmax(0, 1fr); }
  .rol-comparar__fila{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rol-comparar__fila > .rol-comparar__cap, .rol-comparar__fila--cab > span:first-child{ grid-column: 1 / -1; }
}
.rol-editor__barra{ display: flex; gap: 8px; align-items: center; margin: 10px 0 4px; flex-wrap: wrap; }
.rol-editor__barra .campo{ flex: 1 1 200px; margin: 0; }
.rol-editor__grupos{ display: grid; gap: 6px; }
.rol-opcion{
  display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
}
.rol-opcion.is-on{
  border-color: color-mix(in srgb, var(--brand) 40%, var(--border));
  background: color-mix(in srgb, var(--brand) 4%, var(--surface));
}
.rol-opcion input{ margin-top: 1px; }
.rol-opcion__txt{ display: grid; gap: 2px; }
.rol-opcion__txt strong{ font-size: 12.5px; color: var(--text); }
.rol-opcion__txt small{ font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }@media (max-width: 560px){
  .acc-sec__desc{ margin-left: 0; text-align: left; flex-basis: 100%; }
  .acc-sec__cuerpo{ padding-left: 11px; }
}

/* ===================================================== Zonales (/zonales)
   Lista a la izquierda + detalle a la derecha, en las dos primeras pestañas. */
.zon-seccion[hidden] { display: none; }
.zon-intro { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-soft); max-width: 900px; }
.zon-split { display: grid; grid-template-columns: minmax(240px, 300px) 1fr; gap: 16px; align-items: start; }
.zon-lista { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); padding: 8px; display: flex; flex-direction: column; gap: 6px; max-height: 560px; overflow-y: auto; }
.zon-buscar { width: 100%; min-width: 0; }
.zon-entrada, .zon-detalle textarea { height: 36px; padding: 0 12px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; }
.zon-entrada::placeholder { color: var(--text-muted); }
.zon-entrada:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }
.zon-items { display: flex; flex-direction: column; gap: 4px; }
.zon-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; padding: 9px 10px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text); cursor: pointer; font: inherit; }
.zon-item:hover { background: var(--surface); border-color: var(--border); }
.zon-item.is-on { background: var(--surface); border-color: var(--brand-line); box-shadow: inset 3px 0 0 var(--brand); }
.zon-item__txt { display: flex; flex-direction: column; min-width: 0; }
.zon-item__txt strong { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zon-item__txt small { color: var(--text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zon-item__n { flex-shrink: 0; font-size: 12px; color: var(--text-soft); background: var(--line); border-radius: 999px; padding: 2px 8px; }
.zon-detalle { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding: 16px 18px; min-height: 220px; }
.zon-cab h3 { margin: 0; font-size: 17px; color: var(--navy); }
.zon-meta { margin: 2px 0 0; color: var(--text-muted); font-size: 12.5px; }
.zon-agregar { display: flex; gap: 8px; margin: 14px 0; }
.zon-agregar input { flex: 1; min-width: 0; }
.zon-rotulo { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 8px; }
.zon-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.zon-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border: 1px solid var(--brand-line); background: var(--brand-tint); color: var(--brand-dark); border-radius: 999px; font-size: 13px; font-variant-numeric: tabular-nums; }
.zon-chip__x { border: 0; background: transparent; color: var(--text-muted); width: 20px; height: 20px; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1; }
.zon-chip__x:hover { background: var(--danger-light); color: var(--danger-dark); }
.zon-frase { margin: 16px 0 0; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text-soft); font-size: 13.5px; }
.zon-asignar { margin-bottom: 4px; }
.zon-filas { display: flex; flex-direction: column; margin-top: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.zon-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; }
.zon-fila + .zon-fila { border-top: 1px solid var(--line); }
.zon-fila__txt { display: flex; flex-direction: column; min-width: 0; }
.zon-fila__txt small { color: var(--text-muted); font-size: 12px; }
.zon-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
.zon-seg__op { border: 0; background: var(--surface); color: var(--text-soft); padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.zon-seg__op + .zon-seg__op { border-left: 1px solid var(--border-strong); }
.zon-seg__op:hover:not(:disabled) { background: var(--surface-2); }
.zon-seg__op[aria-checked="true"] { background: var(--brand-tint); color: var(--brand-dark); font-weight: 600; }
.zon-seg__op[aria-checked="true"][data-nivel="aprobar"] { background: var(--success-light); color: var(--success-dark); }
.zon-seg__op:disabled { opacity: .5; cursor: not-allowed; }
.zon-acciones { display: flex; justify-content: flex-end; margin-top: 14px; }
.zon-previa { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.zon-cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.zon-cifra { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--surface-2); display: flex; flex-direction: column; }
.zon-cifra b { font-size: 20px; color: var(--navy); font-variant-numeric: tabular-nums; }
.zon-cifra b.is-mas { color: var(--success-dark); }
.zon-cifra b.is-menos { color: var(--danger-dark); }
.zon-cifra span { font-size: 12px; color: var(--text-muted); }
.zon-tipo--agrega { color: var(--success-dark); }
.zon-tipo--quita { color: var(--danger-dark); }
.zon-tipo--cambia { color: var(--brand); }
@media (max-width: 760px) {
  .zon-split { grid-template-columns: 1fr; }
  .zon-cifras { grid-template-columns: repeat(2, 1fr); }
  .zon-fila { flex-direction: column; align-items: flex-start; }
}


/* ===================================================== Términos (/terminos, /terminos-admin)
   La página de aceptación no lleva menú: una hoja centrada, el texto con
   scroll propio y el pie (casilla + botones) siempre a la vista. */
.terminos-wrap { min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; padding: 32px 16px; background: var(--bg); }
.terminos-card { width: 100%; max-width: 820px; background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; max-height: calc(100vh - 64px); overflow: hidden; }
.terminos-card__head { display: flex; align-items: center; gap: 14px; padding: 22px 28px 18px; border-bottom: 1px solid var(--border); }
.terminos-card__head img { border-radius: 10px; flex-shrink: 0; }
.terminos-card__head h1 { margin: 0; font-size: 18px; font-weight: 800; color: var(--navy); letter-spacing: -.01em; line-height: 1.3; }
.terminos-card__head p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-muted); }
.terminos-aviso { margin: 16px 28px 0; padding: 11px 14px; border-radius: var(--radius-sm); background: var(--brand-tint); border: 1px solid var(--brand-line); color: var(--brand-dark); font-size: 13px; line-height: 1.5; }
.terminos-aviso--ok { background: var(--success-light); border-color: var(--success-line); color: var(--success-dark); }
.terminos-card > .terminos-texto { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 28px 20px; }
.terminos-texto { color: var(--text); font-size: 14px; line-height: 1.65; }
.terminos-texto h2 { font-size: 15px; font-weight: 700; color: var(--navy); margin: 22px 0 6px; }
.terminos-texto p { margin: 0 0 10px; }
.terminos-texto ul { margin: 0 0 10px; padding-left: 20px; }
.terminos-texto li { margin-bottom: 4px; }
.terminos-texto:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.terminos-card__pie { border-top: 1px solid var(--border); padding: 16px 28px 20px; display: flex; flex-direction: column; gap: 12px; background: var(--surface-2); }
.terminos-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; }
.terminos-check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--brand); flex-shrink: 0; }
.terminos-card__acciones { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.terminos-card__pie > .btn { align-self: flex-end; }
.terminos-card__acciones .btn { min-width: 140px; }
@media (max-width: 600px) {
  .terminos-wrap { padding: 0; }
  .terminos-card { max-height: 100vh; border-radius: 0; }
  .terminos-card__head, .terminos-card > .terminos-texto, .terminos-card__pie { padding-left: 16px; padding-right: 16px; }
  .terminos-aviso { margin-left: 16px; margin-right: 16px; }
  .terminos-card__acciones .btn { flex: 1; min-width: 0; }
}
@media print {
  .terminos-wrap { padding: 0; background: #fff; }
  .terminos-card { box-shadow: none; max-height: none; }
  .terminos-card > .terminos-texto { overflow: visible; }
  .terminos-card__pie, .terminos-aviso { display: none; }
}

/* Administración */
.ter-estado { margin: 0; font-size: 13px; color: var(--text-soft); padding: 9px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); }
.ter-estado--alerta { background: var(--warning-light, #FFF8E6); border-color: var(--warning-line, #F5D58A); color: var(--warning-dark, #8A5A00); }
.ter-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.ter-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ter-editor { min-height: 520px; font-size: 13.5px; line-height: 1.55; resize: vertical; }
.ter-ayuda, .ter-intro { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-soft); }
.ter-rotulo { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.ter-col--vista { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 20px; background: var(--surface); }
.ter-vista__titulo { margin: 0; font-size: 16px; color: var(--navy); }
.ter-vista { max-height: 560px; overflow-y: auto; font-size: 13.5px; }
.ter-vigente { margin-left: 8px; font-size: 11.5px; font-weight: 600; color: var(--success-dark); background: var(--success-light); border: 1px solid var(--success-line); border-radius: 999px; padding: 1px 8px; }
.ter-sub { display: block; color: var(--text-muted); font-size: 12px; }
.ter-avance { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.ter-avance__barra { flex: 1; height: 6px; border-radius: 999px; background: var(--graf-carril); overflow: hidden; }
.ter-avance__lleno { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.ter-avance__txt { font-size: 12.5px; color: var(--text-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ter-barra { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.ter-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.ter-seg__op { border: 0; background: var(--surface); color: var(--text-soft); padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.ter-seg__op + .ter-seg__op { border-left: 1px solid var(--border-strong); }
.ter-seg__op[aria-pressed="true"] { background: var(--brand-tint); color: var(--brand-dark); font-weight: 600; }
@media (max-width: 900px) { .ter-cols { grid-template-columns: 1fr; } .ter-editor { min-height: 360px; } }

/* ===================================================== Formulario por secciones
   (form-secciones.js) — «Registrar horas extras» y «Nueva solicitud». Cada fila:
   título y ayuda a la izquierda, campos a la derecha; el resumen va en el pie. */
.cajon--secciones .cajon__cuerpo { padding: 0; }
.cajon--secciones .cajon__cuerpo > form, .cajon--secciones .cajon__cuerpo > .formulario-secciones { display: block; }
.fsec { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; padding: 20px 26px; border-bottom: 1px solid var(--border); }
.fsec[hidden] { display: none; }
.fsec__titulo { margin: 0 0 4px; font-size: 13.5px; font-weight: 700; color: var(--text); }
.fsec__ayuda { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-soft); }
.fsec__cuerpo { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fsec__cuerpo > .campo, .fsec__cols > .campo { margin: 0; }
.fsec__cols { display: grid; gap: 12px; }
.fsec__cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fsec__cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fsec__info { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-soft); }
.fsec__info[hidden] { display: none; }
.fsec__info::before { content: "i"; flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.fsec__nombre { margin: 0; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); color: var(--text-soft); font-size: 13px; min-height: 38px; display: flex; align-items: center; }
.fsec__nombre:empty::before { content: attr(data-vacio); color: var(--text-muted); }
.fsec__linea { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fsec__linea strong { font-size: 13.5px; }
.fsec-interruptor { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-soft); cursor: pointer; }
.fsec-interruptor input[type="checkbox"]:not([hidden]), .fsec-interruptor input[type="checkbox"]:not([hidden]):hover { background-image: none; width: 30px; min-width: 30px; border: 0; box-shadow: none; height: 17px; appearance: none; -webkit-appearance: none; border-radius: 9px; background: var(--border-strong); position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.fsec-interruptor input[type="checkbox"]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: transform .15s; }
.fsec-interruptor input[type="checkbox"]:not([hidden]):checked, .fsec-interruptor input[type="checkbox"]:not([hidden]):checked:hover { background: var(--brand); background-image: none; }
.fsec-interruptor input[type="checkbox"]:checked::after { transform: translateX(13px); }
.fsec-interruptor input[type="checkbox"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.fsec-final { padding: 16px 26px; display: flex; flex-direction: column; gap: 8px; }
.fsec-final:not(:has(> :not([hidden]):not(:empty))) { display: none; }
.fsec-resumen { display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; }
.fsec-resumen__par { font-size: 12.5px; color: var(--text-soft); }
.fsec-resumen__par[hidden] { display: none; }
.fsec-resumen__par b { margin-left: 5px; font-size: 14px; color: var(--text); font-weight: 700; }
.cajon--secciones .cajon__pie { background: var(--surface-2); }
.fsec-dia { margin-left: 10px; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; color: var(--info-dark); vertical-align: middle; }
.fsec-dia[hidden] { display: none; }
.fsec-dia::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fsec-dia[data-tono="sabado"] { color: var(--warning-dark); }
.fsec-dia[data-tono="domingo"] { color: var(--danger); }
.fsec-dia[data-tono="feriado"] { color: var(--danger-dark); }
@media (max-width: 760px) {
  .fsec { grid-template-columns: 1fr; gap: 10px; padding: 16px; }
  .fsec__cols--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fsec-final { padding: 14px 16px; }
}
.cajon__cab .fsec-dia { margin-right: auto; }
.fsec-interruptor input[type="checkbox"]:not([hidden])::before { display: none; content: none; }

/* ---- Jornada Talana y tinte por tipo de día (registro de HE) ----
   Tonos suaves a propósito: informan sin gritar. */
.jornada-card { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.jornada-card__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.jornada-card__rotulo { font-size: 12px; font-weight: 600; color: var(--text-soft); }
.jornada-card__fuente { margin: 0; font-size: 11.5px; color: var(--text-muted); }
.jornada-card__sub { margin: 0; font-size: 12px; color: var(--text-muted); }
.jornada-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid #EFE3C2; background: #FDF9EE; color: #8A6A1F; }
.jornada-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .75; }
.jornada-pill[data-estado="ok"] { border-color: #CDE9D6; background: #F3FAF5; color: #2F7A4A; }
.jornada-pill[data-estado="libre"] { border-color: #DCE3EC; background: #F6F8FB; color: #55657A; }
.jornada-pill[data-estado="choca"] { border-color: #F2D4D4; background: #FDF5F5; color: #A94444; }
.jornada-ventanas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-soft); }
.jornada-ventanas[hidden] { display: none; }
.jornada-ventanas__rotulo { margin-right: 2px; }
.jornada-ventanas__tramo { padding: 2px 9px; border-radius: 6px; background: var(--brand-tint); color: var(--brand-dark); font-weight: 600; font-variant-numeric: tabular-nums; }
.jornada-ventanas__sep { color: var(--text-muted); }
.dia-leyenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11.5px; color: var(--text-muted); }
.dia-leyenda__item { display: inline-flex; align-items: center; gap: 6px; }
.dia-leyenda__muestra { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--line); display: inline-block; }
.dia-leyenda__muestra--normal { border-style: dashed; border-color: var(--border-strong); }
.dia-leyenda__muestra--domingo, .cajon--secciones[data-dia="domingo"] .cajon__cuerpo { background: #FFFCF3; }
.dia-leyenda__muestra--feriado, .cajon--secciones[data-dia="feriado"] .cajon__cuerpo { background: #FFF8F1; }
.dia-leyenda__muestra--irrenunciable, .cajon--secciones[data-dia="irrenunciable"] .cajon__cuerpo { background: #FFF6F6; }
.cajon--secciones .cajon__cuerpo { transition: background-color .2s ease; }

/* Nuevo ticket (por secciones): prioridad como selector segmentado con su color,
   y el contador bajo la descripción. */
.ticket-prioridad { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); width: max-content; max-width: 100%; }
.ticket-prioridad .chip { border: 0; background: transparent; border-radius: 7px; padding: 7px 14px; display: inline-flex; align-items: center; gap: 7px; color: var(--text-soft); box-shadow: none; }
.ticket-prioridad .chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #9BB3C9; }
.ticket-prioridad .chip:nth-child(2)::before { background: var(--graf-linea); }
.ticket-prioridad .chip:nth-child(3)::before { background: #E59A2F; }
.ticket-prioridad .chip:nth-child(4)::before { background: #D64545; }
.ticket-prioridad .chip.on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 3px rgba(15, 40, 80, .12); }
.ticket-contador { margin-top: 4px; text-align: right; font-size: 11.5px; color: var(--text-muted); }
/* Adjunto del ticket en franja horizontal: la zona alta empujaba el pie y a
   650 px de alto quedaba cortada. Los formatos ya los dice la ayuda. */
#ticket-form .subida__zona { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: center; justify-items: start; text-align: left; padding: 12px 16px; }
#ticket-form .subida__icono { grid-row: span 2; width: 22px; height: 22px; }
#ticket-form .subida:not(.tiene-archivo) .subida__pista { display: none; }
#ticket-form .subida:not(.tiene-archivo) .subida__icono { grid-row: auto; }
#ticket-form .fsec { padding-top: 16px; padding-bottom: 16px; }
#ticket-form textarea { min-height: 96px; }

/* ==========================================================================
   Detalle de solicitud: ficha con barra lateral (estilo Stripe Dashboard)
   ========================================================================== */
.cajon--ficha .cajon__cuerpo { padding: 0; }
.cajon--ficha .cajon__cab { justify-content: flex-start; }
.cajon--ficha .cajon__cab .cajon__cerrar { margin-left: auto; }
.ficha-lado__cab { display: inline-flex; align-items: center; gap: 8px; }
.ficha-lado__numero { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--line); }
.cajon__cuerpo .detalle-solicitud.ficha-lado { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 0; min-height: 100%; }
.ficha-lado__main { padding: 20px 24px 26px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ficha-lado__aside { padding: 20px; background: var(--surface-2); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.ficha-lado__arriba { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; padding-bottom: 4px; }
.ficha-lado__arriba > .persona:only-child { grid-column: 1 / -1; }
.ficha-lado__periodo { display: flex; flex-direction: column; gap: 3px; }
.ficha-lado__periodo span { font-size: 12px; color: var(--text-soft); }
.ficha-lado__periodo strong { font-size: 26px; line-height: 1.1; font-weight: 800; color: var(--text); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ficha-lado__periodo small { font-size: 12px; color: var(--text-soft); }
.ficha-lado__main > .grupo-titulo { margin: 6px 0 -4px; }
.ficha-lado__dato { display: flex; flex-direction: column; gap: 3px; }
.ficha-lado__dato span { font-size: 12px; color: var(--text-soft); }
.ficha-lado__dato strong { font-size: 13.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.ficha-lado__aside > div:empty { display: none; }
.ficha-lado__aside > div:not(.ficha-lado__dato):not(.ficha-lado__antiguedad) { display: flex; flex-direction: column; gap: 14px; }
.ficha-lado__antiguedad[hidden] { display: none; }
.ficha-lado__antiguedad .traza-dias { font-size: 12.5px; padding: 6px 12px; border-radius: 10px; width: 100%; justify-content: flex-start; }
/* La línea de aprobación, en horizontal */
.etapas { list-style: none; margin: 0; padding: 4px 0 0; display: flex; align-items: flex-start; }
.etapas__paso { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; font-size: 11.5px; color: var(--text-soft); }
.etapas__paso::before { content: ""; position: absolute; top: 11px; left: -50%; right: 50%; height: 2px; background: var(--line); }
.etapas__paso:first-child::before { display: none; }
.etapas__paso--hecho::before, .etapas__paso--actual::before, .etapas__paso--no::before { background: var(--success, #1E8E5A); }
.etapas__paso--actual::before { background: linear-gradient(90deg, var(--success, #1E8E5A), var(--line)); }
.etapas__paso i { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; background: var(--surface); border: 2px solid var(--line); color: var(--text-muted); margin-bottom: 4px; }
.etapas__paso--hecho i { background: var(--success, #1E8E5A); border-color: var(--success, #1E8E5A); color: #fff; }
.etapas__paso--actual i { background: #FDF3E3; border-color: #D08A2A; color: #B7701A; }
.etapas__paso--no i { background: var(--danger, #C2413B); border-color: var(--danger, #C2413B); color: #fff; }
.etapas__paso b { font-size: 12.5px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.etapas__paso--actual b { color: #9A5B0C; } /* #B7701A daba 3,9:1 */
.etapas__paso--no b { color: var(--danger, #C2413B); }
.etapas__paso span { overflow-wrap: anywhere; padding: 0 4px; }
@media (max-width: 860px) {
  .cajon__cuerpo .detalle-solicitud.ficha-lado { grid-template-columns: 1fr; }
  .ficha-lado__aside { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .ficha-lado__arriba { grid-template-columns: 1fr; gap: 14px; }
}
.etapas__paso--no::before { background: linear-gradient(90deg, var(--success, #1E8E5A), var(--danger, #C2413B)); }
.ficha-lado__antiguedad .traza-dias--fin { background: var(--surface); border: 1px solid var(--line); color: var(--text-soft); }

/* ==========================================================================
   Detalle de ticket: chat de mensajería
   ========================================================================== */
.cajon--chat .cajon__cab { justify-content: flex-start; flex-wrap: wrap; row-gap: 8px; }
.cajon--chat .cajon__cab .cajon__cerrar { margin-left: auto; }
.cajon--chat .cajon__cuerpo { padding: 0; gap: 0; overflow: hidden; display: flex; flex-direction: column; }
.chat-cab { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ticket-badge--cat { background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--line); }
.chat-gestion { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.chat-gestion__campo { display: inline-flex; min-width: 128px; }
.chat-gestion__campo .select-ui { width: 100%; }
.chat-gestion__campo .select-ui__trigger { min-height: 32px; height: 32px; padding-top: 0; padding-bottom: 0; font-size: 12.5px; }
.chat-cargando { padding: 20px 24px; }
.chat-hilo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 26px 20px; display: flex; flex-direction: column; gap: 8px; background: var(--surface-2); }
.chat-inicio { align-self: center; margin: 0 0 6px; font-size: 11.5px; color: var(--text-muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; }
.chat-sys { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 11.5px; margin: 6px 0; }
.chat-sys::before, .chat-sys::after { content: ""; flex: 1; border-top: 1px dashed var(--border); }
.chat-quien { font-size: 11.5px; font-weight: 600; color: var(--text-soft); margin: 6px 4px -4px; }
.chat-quien--der { align-self: flex-end; }
.chat-b { max-width: min(72%, 560px); padding: 9px 13px 7px; border-radius: 14px; display: flex; flex-direction: column; gap: 4px; }
.chat-b--autor { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.chat-b--soporte { align-self: flex-end; background: var(--graf-linea); color: #fff; border-bottom-right-radius: 4px; }
.chat-b--interna { align-self: flex-end; background: #FFF8E1; border: 1px solid #F3DFA2; color: #5E4A10; border-bottom-right-radius: 4px; }
.chat-b--interna .ticket-msg__etq { align-self: flex-start; background: #FCEFC7; }
.chat-b__texto { margin: 0; font-size: 13.5px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.chat-b__texto--recortado { max-height: 110px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.chat-b__mas { align-self: flex-start; border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--brand); }
.chat-b--soporte .chat-b__mas { color: #fff; text-decoration: underline; }
.chat-b__hora { font-size: 11px; opacity: .7; align-self: flex-end; }
.chat-b--soporte .ticket-adjunto { color: #fff; }
.chat-comp { flex: 0 0 auto; border-top: 1px solid var(--line); background: var(--surface); padding: 12px 18px 14px; display: flex; flex-direction: column; gap: 8px; }
.chat-comp__caja { border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; background: var(--surface); transition: border-color .15s, background .15s; }
.chat-comp__caja:focus-within { border-color: var(--graf-linea); box-shadow: 0 0 0 3px rgba(69, 151, 230, .15); }
.chat-comp__caja--interna { background: #FFFBEF; border-color: #F3DFA2; }
.cajon--chat .chat-comp__texto, .cajon--chat .chat-comp__texto:focus { width: 100%; border: 0; outline: 0; box-shadow: none; resize: none; padding: 2px 2px 6px; background: transparent; font: inherit; font-size: 13.5px; line-height: 1.45; min-height: 44px; }
.chat-comp__pie { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.chat-comp__pie .btn { margin-left: auto; }
.chat-comp__ayuda { font-size: 11.5px; color: var(--text-muted); }
.chat-clip { position: relative; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--brand); cursor: pointer; max-width: 260px; }
.chat-clip span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-clip .ms { font-size: 18px; }
.chat-clip__campo { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.chat-clip:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.chat-clip--con { color: var(--text); }
.chat-clip__quitar { border: 0; background: var(--surface-2); color: var(--text-soft); width: 20px; height: 20px; border-radius: 50%; cursor: pointer; line-height: 1; margin-left: -8px; }
.chat-clip__quitar[hidden] { display: none; }
@media (max-width: 640px) { .chat-b { max-width: 88%; } .chat-hilo { padding: 14px; } .chat-comp__ayuda { display: none; } }

/* Historial de horas extras (/he-ingreso): filas de una línea. Lo largo
   (colaborador, motivo de rechazo) se recorta y se lee completo al pasar el
   mouse o con «Ver». Las acciones son íconos: con texto no cabían. */
.historial-he td { white-space: nowrap; }
.historial-he .celda-recorte { display: inline-block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.historial-he__acciones { display: inline-flex; gap: 4px; }
.historial-he__icono { width: 32px; height: 32px; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text-soft); cursor: pointer; padding: 0; transition: background .15s, color .15s, border-color .15s; }
.historial-he__icono .ms { font-size: 18px; }
.historial-he__icono:hover { border-color: var(--brand-line, #BFD3F2); color: var(--brand); background: var(--brand-tint, #EEF3FB); }
.historial-he__icono:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.historial-he__eliminar:hover { border-color: #F1C9C7; color: var(--danger-dark, #B42318); background: var(--danger-light, #FDECEC); }

/* Menú de la cuenta (el chip de arriba a la derecha abre Mi cuenta). */
.usuario-chip--boton { border: 1px solid transparent; background: transparent; padding: 4px 8px 4px 4px; border-radius: 12px; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.usuario-chip--boton:hover, .menu-boton.is-open .usuario-chip--boton { background: var(--surface-2); border-color: var(--border); }
.usuario-chip--boton:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.usuario-chip--boton .menu-boton__flecha { color: var(--text-muted); font-size: 18px; }

/* Mi cuenta (/mi-cuenta) */
.mi-cuenta__pestanas { margin-bottom: 14px; }
.mi-cuenta__cuerpo { padding: 0; }
.mi-cuenta__cuerpo .fsec { padding-left: 4px; padding-right: 4px; }
.mi-cuenta__datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
@media (max-width: 640px) { .mi-cuenta__datos { grid-template-columns: 1fr; } }
.mi-cuenta__reglas { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mi-cuenta__reglas li { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--line); }
.mi-cuenta__reglas li.ok { background: var(--success-light, #E6F4EC); color: var(--success-dark, #15803D); border-color: transparent; }
.mi-cuenta__reglas li.ok::before { content: "✓ "; }
.mi-cuenta__pie { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 4px 4px; }
.mi-cuenta__estado { margin: 0; font-size: 13px; color: var(--text-soft); }
.mi-cuenta__estado--pendiente { color: var(--warning-dark, #B45309); font-weight: 600; }
.mi-cuenta__buscar { width: 100%; max-width: 420px; }
.mi-cuenta__justificativos { display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.mi-cuenta__grupo { margin: 8px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.mi-cuenta__opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.mi-cuenta__opcion { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; font-size: 13px; }
.mi-cuenta__opcion:hover { border-color: var(--brand-line, #BFD3F2); }
.mi-cuenta__opcion:has(input:checked) { border-color: var(--graf-linea); background: var(--brand-tint, #EEF3FB); }
.mi-cuenta__opcion input { margin: 0; }
.mi-cuenta__tuya { margin-left: auto; font-style: normal; font-size: 11px; color: var(--text-muted); }
.mi-cuenta__agregar { display: flex; gap: 8px; max-width: 560px; }
.mi-cuenta__agregar input { flex: 1; }
.mi-cuenta__buscar, .mi-cuenta__agregar input { height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 13.5px; background: var(--surface); color: var(--text); }
.mi-cuenta__buscar:focus, .mi-cuenta__agregar input:focus { outline: none; border-color: var(--graf-linea); box-shadow: 0 0 0 3px rgba(69, 151, 230, .15); }
/* El diseño de ficha vale para TODOS los detalles (ficha-lado.js), no solo el de solicitudes. */
.cajon--ficha .cajon__cuerpo .ficha-lado { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 0; min-height: 100%; }
@media (max-width: 860px) { .cajon--ficha .cajon__cuerpo .ficha-lado { grid-template-columns: 1fr; } }
.ficha-lado__main .detalle-hora-extra__galeria { margin-top: 2px; }
.ficha-lado__main .detalle-hora-extra__ubicacion { margin: 0; font-size: 13.5px; color: var(--text); }
/* Detalle de cada paso dentro de la ficha (Aprobaciones). */
.ficha-lado__main .traza-pasos { display: flex; flex-direction: column; gap: 8px; }
/* Solo el detalle de cada paso de Aprobaciones (.traza-pasos): `traza__paso`
   también es la fila de la línea de tiempo del Historial y no hay que tocarla. */
.traza-pasos .traza__paso { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; }
.traza-pasos .traza__paso > span:first-child { flex: 1 1 auto; min-width: 0; }
.traza-pasos .traza__estado { flex: 0 0 auto; }
.traza-pasos .traza__nodo { width: 100%; }

/* Historial como feed de actividad: ícono del tipo | qué y quién | cuándo. */
.traza__lista { gap: 2px; }
.traza__lista .traza__paso { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 12px; align-items: start; padding: 8px 0; }
.traza__lista .traza__carril { position: relative; display: flex; justify-content: center; align-self: stretch; }
.traza__lista .traza__carril i { width: 26px; height: 26px; margin: 0; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-style: normal; box-shadow: none;
  background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--line); position: relative; z-index: 1; }
.traza__lista .traza__carril::after { content: ""; position: absolute; top: 30px; bottom: -12px; left: 50%; width: 1px; background: var(--line); transform: translateX(-50%); }
.traza__lista .traza__paso:last-child .traza__carril::after { display: none; }
.traza__lista .traza__paso--inicio .traza__carril i { background: var(--brand-tint, #EEF3FB); color: var(--brand); border-color: transparent; }
.traza__lista .traza__paso--ok .traza__carril i { background: var(--success-light, #E6F4EC); color: var(--success-dark, #15803D); border-color: transparent; }
.traza__lista .traza__paso--no .traza__carril i { background: var(--danger-light, #FDECEC); color: var(--danger-dark, #B42318); border-color: transparent; }
.traza__lista .traza__paso--cambio .traza__carril i { background: var(--warning-light, #FFF4E5); color: var(--warning-dark, #B45309); border-color: transparent; }
.traza__lista .traza__paso--fin .traza__carril i { background: var(--navy); color: #fff; border-color: transparent; }
.traza__lista .traza__paso--correo .traza__carril i { background: var(--info-light, #E8F2FD); color: var(--info-dark, #1F5F9F); border-color: transparent; }
.traza__lista .traza__paso--vista .traza__carril i { width: 22px; height: 22px; margin-top: 2px; font-size: 13px; background: var(--surface); }
.traza__lista .traza__texto { min-width: 0; padding-top: 3px; }
.traza__lista .traza__linea { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.traza__lista .traza__que { font-size: 13.5px; font-weight: 600; color: var(--text); }
.traza__lista .traza__paso--vista .traza__que { font-weight: 500; color: var(--text-soft); font-size: 13px; }
.traza__lista .traza__meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 2px; font-size: 12px; color: var(--text-muted); }
.traza__lista .traza__detalle { margin: 4px 0 0; padding: 0; background: none; border: 0; font-size: 12.5px; color: var(--text-soft); font-weight: 500; overflow-wrap: anywhere; }
.traza__lista .traza__cuando { display: flex; flex-direction: column; align-items: flex-end; padding-top: 4px; font-size: 12px; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.traza__lista .traza__hora { font-size: 11.5px; color: var(--text-muted); }

/* ===== Detalles: «bloques con tarjetas» (ficha-lado.js → crearFichaBloques) =====
   Cada tema en su tarjeta blanca sobre fondo gris claro, dos columnas. */
.ficha-bloques, .cajon__cuerpo .ficha-bloques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px; background: var(--surface-2); min-height: 100%; align-content: start; }
.ficha-bloque { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ficha-bloque--ancho { grid-column: 1 / -1; }
.ficha-bloque__titulo { display: flex; align-items: baseline; gap: 12px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.ficha-bloque__lado { margin-left: auto; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-soft); text-align: right; }
.ficha-bloque__lado:empty { display: none; }
.ficha-bloque__cuerpo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ficha-bloque__grande { display: flex; flex-direction: column; gap: 3px; }
.ficha-bloque__grande strong { font-size: 17px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.ficha-bloque__grande small { font-size: 12.5px; color: var(--text-soft); }
.ficha-bloque__subtitulo { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); margin-top: 6px; }
.ficha-bloque__texto { margin: 0; font-size: 13.5px; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.ficha-bloque__datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px 20px; }
.ficha-bloque .etapas { padding-top: 2px; }
.ficha-bloque .traza { margin: 0; }
.ficha-bloque .detalle-hora-extra__ubicacion { margin: 0; font-size: 13px; color: var(--text); }
.ficha-lado__cab .ficha-lado__antiguedad:empty { display: none; }
.ficha-lado__cab .ficha-lado__antiguedad .traza-dias { font-size: 11.5px; padding: 2px 9px; border-radius: 999px; width: auto; }
@media (max-width: 760px) { .ficha-bloques, .cajon__cuerpo .ficha-bloques { grid-template-columns: 1fr; padding: 12px; } }
.ficha-bloques > :not(.ficha-bloque) { grid-column: 1 / -1; }

/* ===== Plazo, anticipación y solicitudes urgentes (0088) ===== */
.badge--urgente { background: var(--danger-light); color: var(--danger-dark); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }
.celda-urgente { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.formulario-solicitud__plazo { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--brand-light); color: var(--brand); font-size: 13.5px; font-weight: 500; line-height: 1.5; }
.formulario-solicitud__plazo[hidden] { display: none; }
.formulario-solicitud__plazo .ms { font-size: 20px; flex: none; }
.formulario-solicitud__anticipacion { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.formulario-solicitud__anticipacion[hidden] { display: none; }
.formulario-solicitud__anticipacion .fsec__info { flex: 1 1 260px; }
.fsec__info--alerta { color: var(--danger-dark); }
.fsec__info--alerta::before { content: "!"; background: var(--danger-light); color: var(--danger-dark); }
.formulario-solicitud__btn-urgente { color: var(--danger-dark); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.formulario-solicitud__btn-urgente:hover { background: var(--danger-light); }
.formulario-solicitud__btn-urgente[hidden] { display: none; }
.fsec--urgente { background: var(--danger-light); }
.fsec--urgente .fsec__titulo { color: var(--danger-dark); }
.fsec[hidden] { display: none; }
.ficha-bloque--urgente { border-color: color-mix(in srgb, var(--danger) 30%, transparent); background: var(--danger-light); }
.ficha-bloque--urgente .ficha-bloque__titulo { color: var(--danger-dark); }
.ficha-bloque__adjunto { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--brand); text-decoration: none; }
.ficha-bloque__adjunto:hover { text-decoration: underline; }
.ficha-bloque__adjunto .ms { font-size: 18px; }
.aprobacion--urgente { border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.aprobacion__urgencia { color: var(--danger-dark); }
.tipos-permiso__hoy { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--brand); }
.tipos-permiso__lista-ant { display: flex; flex-direction: column; }
.tipos-permiso__lista-ant .tipos-permiso__fila { padding: 8px 0; border-bottom: 1px solid var(--line); }
.tipos-permiso__lista-ant .tipos-permiso__fila:last-child { border-bottom: 0; }
.tipos-permiso__fila--apagada strong { color: var(--text-muted); }
/* Registrar HE: quién la aprueba, banda fija bajo el título del cajón (opción B). */
.he-banda-flujo { flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 22px; background: var(--brand-tint, #EAF3FC); border-bottom: 1px solid color-mix(in srgb, var(--brand) 18%, transparent); }
.he-banda-flujo[hidden] { display: none; }
.he-banda-flujo__titulo { font-size: 12.5px; font-weight: 600; color: var(--brand); margin-right: 2px; }
.he-banda-flujo__pildora { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent); border-radius: 999px; padding: 3px 12px 3px 3px; font-size: 13px; color: var(--text); }
.he-banda-flujo__quien { font-weight: 600; }
.he-banda-flujo__pildora small { font-size: 11.5px; color: var(--text-soft); }
.he-banda-flujo__av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; background: var(--brand-tint, #EAF3FC); color: var(--brand); flex: none; }
.he-banda-flujo__av--rrhh { background: #EFE9FB; color: #5B3BB0; }
.he-banda-flujo__flecha { color: var(--text-muted); font-size: 18px; line-height: 1; }
.he-banda-flujo__nota { font-size: 12px; color: var(--text-soft); }
.he-banda-flujo__pildora--falta { border-color: color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger-dark); }
.he-banda-flujo__pildora--falta .he-banda-flujo__av { background: var(--danger-light); color: var(--danger-dark); }
.he-banda-flujo--alerta .he-banda-flujo__nota { color: var(--danger-dark); font-weight: 600; }
@media (max-width: 760px) { .he-banda-flujo { padding: 10px 16px; } }

/* ===== Cierre de sesión por inactividad: «modo noche» (inactividad.js, 0089) =====
   Pantalla completa de noche con Simi durmiendo y la cuenta regresiva. Por
   encima de todo (cajones y diálogos incluidos). Solo se cierra con sus botones. */
.noche { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; text-align: center; color: #fff;
  background: radial-gradient(120% 90% at 50% 0%, #1E4A8E 0%, #0B2A5B 55%, #081F45 100%); animation: noche-entra .35s ease-out both; }
@keyframes noche-entra { from { opacity: 0; } to { opacity: 1; } }
.noche__estrellas i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: .55; animation: noche-titila 3s ease-in-out infinite; }
.noche__estrellas i:nth-child(2n) { animation-delay: 1.2s; width: 2px; height: 2px; }
.noche__estrellas i:nth-child(3n) { animation-delay: 2s; }
@keyframes noche-titila { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }
.noche__luna { position: absolute; top: 7%; right: 9%; width: 46px; height: 46px; border-radius: 50%; box-shadow: -12px 6px 0 0 #FDE7A7; transform: rotate(-20deg); }
.noche__centro { position: relative; padding: 0 16px; }
.noche__simi { width: 180px; height: 180px; display: block; margin: 0 auto; animation: noche-respira 3.4s ease-in-out infinite; user-select: none; }
@keyframes noche-respira { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(4px) rotate(2deg); } }
.noche__z { position: absolute; left: calc(50% + 62px); top: 4px; font-weight: 900; color: #CFE0F8; font-size: 24px; animation: noche-zeta 2.8s ease-out infinite; pointer-events: none; }
.noche__z--dos { animation-delay: 1.4s; font-size: 16px; left: calc(50% + 72px); top: 14px; }
@keyframes noche-zeta { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(34px, -60px) scale(1.25); } }
.noche h2 { margin: 12px 0 4px; font-size: 24px; color: #fff; }
.noche p { margin: 0 0 4px; color: #C9D8F0; font-size: 15px; }
.noche__cuenta { font-size: 48px; font-weight: 900; margin: 2px 0 18px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.noche__botones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.noche__btn { height: 46px; padding: 0 24px; border-radius: 12px; border: 1px solid rgba(255,255,255,.28); background: transparent; color: #DCE7F7; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.noche__btn:hover { background: rgba(255,255,255,.08); }
.noche__btn--seguir { background: #fff; color: #0B2A5B; border-color: #fff; font-weight: 700; }
.noche__btn--seguir:hover { background: #EAF1FC; }
.noche__btn:focus-visible { outline: 3px solid #8FB8F0; outline-offset: 2px; }
.noche__despierta { position: absolute; inset: 0; display: none; place-items: center; background: #F3F5F9; color: #0B2A5B; }
.noche--despierta .noche__despierta { display: grid; animation: noche-entra .25s ease-out both; }
.noche__despierta img { width: 130px; height: 130px; margin: 0 auto 8px; display: block; }
.noche__despierta h3 { margin: 0 0 4px; font-size: 20px; }
.noche__despierta p { color: #5A6B82; }
@media (prefers-reduced-motion: reduce) { .noche, .noche *, .noche__estrellas i { animation: none !important; } }

/* ===== Autocompletado del navegador (08-10-2026) =====
   Chrome pinta de celeste los campos que autocompleta y deja el rótulo
   flotante con su fondo blanco encima: se veía un recuadro blanco sobre el
   celeste. El campo queda del color de la tarjeta, como los demás, y el
   rótulo sube a la muesca aunque la página no se haya enterado del valor. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
  box-shadow: 0 0 0 1000px var(--surface) inset;
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  transition: background-color 9999s ease-out 0s;
}
input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset, var(--focus-ring);
  box-shadow: 0 0 0 1000px var(--surface) inset, var(--focus-ring);
}
.ingreso__campo:-webkit-autofill + label {
  top: 0; font-size: 12px; font-weight: 600; color: var(--text-muted);
}

/* ===== Cortina de entrada: del ingreso a la plataforma (opción C, 08-10-2026) =====
   En el ingreso (login.js) la tarjeta se desvanece y queda la cortina con Simi,
   «Preparando tu panel…» y una barra que avanza. La página de destino parte
   con la MISMA cortina ya puesta (html.cortina-entrada, desde el <head>) y la
   barra llena; sesion.js la sube cuando el panel está armado. Misma geometría
   en los dos lados para que el cambio de página no se note. */
.cortina-login { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.cortina-login img { position: absolute; left: 50%; top: calc(50% - 95px); width: 110px; height: 110px; margin-left: -55px; animation: cortina-flota 1.6s ease-in-out infinite; }
.cortina-login__texto, html.cortina-entrada::after {
  position: fixed; left: 50%; top: calc(50% + 24px); width: 240px; padding-bottom: 24px;
  text-align: center; color: #fff;
  /* Letra del sistema, no Roboto: la web font llega tarde a la página nueva y
     el texto cambiaba de ancho justo en el cambio de página (08-10-2026). */
  font: 700 16px/20px "Segoe UI", system-ui, -apple-system, sans-serif;
}
.cortina-login__texto { position: absolute; transform: translateX(-50%); }
.cortina-login__barra { position: absolute; left: 10px; right: 10px; bottom: 0; height: 6px; border-radius: 999px; background: rgba(255,255,255,.22); overflow: hidden; }
.cortina-login__barra i { display: block; height: 100%; width: 0; border-radius: 999px; background: #fff; }
@keyframes cortina-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
/* El fondo de la página (y del espacio de la barra) con el mismo tono de la cortina. */
/* Tono = velo derecho sobre el fondo casi negro de las caras (calculado: el
   espacio de la barra no recibe imágenes de fondo, solo color). */
html.cortina-entrada { background: #0D244E; }
html.dark.cortina-entrada { background: #0A1B3C; }
html.cortina-entrada::before {
  content: ""; position: fixed; top: 0; bottom: 0; left: 0; width: 100vw; z-index: 200000;
  background:
    var(--cortina-simi, url("/assets/img/simi/hd/emo-estrellas.png")) center calc(50% - 40px) / 110px 110px no-repeat,
    linear-gradient(90deg, var(--velo-ingreso-izq) 0%, var(--velo-ingreso-med) 55%, var(--velo-ingreso-der) 100%),
    url("/assets/img/simi-fondo-hd.png") 0 0 / 460px 206px repeat;
  background-color: var(--sidebar-fondo);
  transition: transform .65s cubic-bezier(.6, 0, .4, 1);
}
html.cortina-entrada::after {
  content: "¡Todo listo!"; z-index: 200001; left: 50vw; transform: translateX(-50%);
  background: linear-gradient(#fff, #fff) center bottom / 220px 6px no-repeat;
  transition: transform .65s cubic-bezier(.6, 0, .4, 1);
}
html.cortina-entrada.cortina-sube::before { transform: translateY(-100%); }
html.cortina-entrada.cortina-sube::after { transform: translate(-50%, -100vh); }
@media (prefers-reduced-motion: reduce) {
  .cortina-login img { animation: none; }
  html.cortina-entrada::before, html.cortina-entrada::after { transition: none; }
}

/* La cortina dice lo que le dejó la página anterior («¡Hasta pronto, …!»). */
html.cortina-entrada[data-cortina-texto]::after { content: attr(data-cortina-texto); }
/* Cortina de SALIDA (cortina.js): baja desde arriba con el mismo fondo del ingreso. */
.cortina-salida {
  position: fixed; inset: 0; z-index: 200000; transform: translateY(-100%);
  background:
    linear-gradient(90deg, var(--velo-ingreso-izq) 0%, var(--velo-ingreso-med) 55%, var(--velo-ingreso-der) 100%),
    url("/assets/img/simi-fondo-hd.png") 0 0 / 460px 206px repeat;
  background-color: var(--sidebar-fondo);
}
.cortina-salida img { position: absolute; left: 50%; top: calc(50% - 95px); width: 110px; height: 110px; margin-left: -55px; animation: cortina-flota 1.6s ease-in-out infinite; }
.cortina-salida .cortina-login__texto { position: absolute; transform: translateX(-50%); }
@media (prefers-reduced-motion: reduce) { .cortina-salida img { animation: none; } }

/* El espacio de la barra de desplazamiento queda SIEMPRE reservado en la
   plataforma: así nada se corre cuando aparece (al subir la cortina, o cuando
   una página crece al llegar sus datos). El ingreso no se desplaza: sin reserva. */
html { scrollbar-gutter: stable; }
html:has(.ingreso) { scrollbar-gutter: auto; }
/* Con la cortina puesta no hay barra ni se mueve la página por debajo. */
html.cortina-entrada { overflow: hidden; }
/* …y sin el espacio reservado de la barra: la cortina mide el ancho completo,
   igual que en el ingreso (antes Simi, texto y barra saltaban ~7 px a la
   izquierda al cambiar de página y quedaba una franja lisa a la derecha). La
   reserva vuelve apenas empieza a subir, con la página aún tapada: así el
   panel ya está en su lugar cuando se descubre. La cortina se mide en vw,
   no se corre. */
html.cortina-entrada:not(.cortina-sube) { scrollbar-gutter: auto; }
/* Simi flota igual que en la página anterior y al mismo compás: la fase sale
   del reloj (--cortina-fase, puesta en el <head>; login.js y cortina.js usan
   la misma cuenta), así no da un saltito al cambiar de página. */
html.cortina-entrada::before { animation: cortina-flota-fondo 1.6s ease-in-out var(--cortina-fase, 0s) infinite; }
@keyframes cortina-flota-fondo {
  0%, 100% { background-position: center calc(50% - 40px), 0 0, 0 0; }
  50% { background-position: center calc(50% - 46px), 0 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) { html.cortina-entrada::before { animation: none; } }
/* La franja de la barra (a la derecha) pasa al color de la página mientras
   la cortina sube (solo admite un color liso). Antes quedaba azul hasta el
   final y se veía una línea oscura junto al panel ya descubierto. */
html.cortina-entrada { transition: background-color .65s cubic-bezier(.6, 0, .4, 1); }
html.cortina-entrada.cortina-sube { background-color: var(--bg); }
@media (prefers-reduced-motion: reduce) { html.cortina-entrada { transition: none; } }

/* Halloween también en las cortinas (26-10-2026): las telarañas del ingreso
   seguían en la cortina del ingreso pero desaparecían al llegar al panel (su
   cortina es otra capa) y la de salida nunca las tuvo. Mismas telas, misma
   posición y tamaño que en el ingreso (.hw-tela--a / --b); suben con la
   cortina. La página siguiente se entera por sessionStorage (cortina.js, hw). */
:root {
  --hw-tela-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='rgba(255,255,255,.22)' stroke-width='1.6'%3E%3Cg%3E%3Cpath d='M0 0L200 200M0 0L200 70M0 0L70 200M0 0L200 0M0 0L0 200'/%3E%3Cpath d='M40 0Q34 18 0 40M80 0Q70 36 0 80M125 0Q110 56 0 125M170 0Q150 78 0 170M200 30Q170 100 30 200'/%3E%3C/g%3E%3C/svg%3E");
  --hw-tela-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='rgba(255,255,255,.22)' stroke-width='1.6'%3E%3Cg transform='rotate(180 100 100)'%3E%3Cpath d='M0 0L200 200M0 0L200 70M0 0L70 200M0 0L200 0M0 0L0 200'/%3E%3Cpath d='M40 0Q34 18 0 40M80 0Q70 36 0 80M125 0Q110 56 0 125M170 0Q150 78 0 170M200 30Q170 100 30 200'/%3E%3C/g%3E%3C/svg%3E");
}
html.cortina-entrada.cortina-hw body::after,
.cortina-salida.hw::before {
  content: ""; position: fixed; inset: 0; z-index: 200002; pointer-events: none;
  background:
    var(--hw-tela-a) left top / 260px 260px no-repeat,
    var(--hw-tela-b) right bottom / 220px 220px no-repeat;
}
.cortina-salida.hw::before { position: absolute; z-index: auto; }
html.cortina-entrada.cortina-hw body::after { transition: transform .65s cubic-bezier(.6, 0, .4, 1); }
html.cortina-entrada.cortina-hw.cortina-sube body::after { transform: translateY(-100%); }
@media (max-width: 960px) {
  html.cortina-entrada.cortina-hw body::after,
  .cortina-salida.hw::before {
    background-size: 150px 150px, 120px 120px;
  }
}
@media (prefers-reduced-motion: reduce) { html.cortina-entrada.cortina-hw body::after { transition: none; } }

/* ===== Ranking de horas por sucursal (Panel general, 08-10-2026) =====
   # · sucursal con su barra · horas. La columna de horas tiene ancho fijo:
   antes cada número le quitaba distinto espacio a su barra y quedaban disparejas. */
.ranking__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ranking__boton { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) 92px; align-items: center; gap: 12px;
  padding: 7px 8px; border: 0; border-radius: 10px; background: none; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.ranking__boton:hover, .ranking__boton:focus-visible { background: var(--surface-2); outline: none; }
.ranking__pos { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--text-soft); background: var(--surface-2); }
.ranking__pos--top { background: var(--brand-light); color: var(--brand); }
.ranking__medio { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ranking__nombre { font-size: 12.5px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking__barra { display: block; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.ranking__barra i { display: block; height: 100%; border-radius: 999px; background: var(--graf-linea, #4597E6); opacity: .55; transition: width .4s ease; }
.ranking__boton:hover .ranking__barra i { opacity: .85; }
.ranking__valor { font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.ranking__pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 8px 0; margin-top: 6px; border-top: 1px solid var(--line); }
.ranking__cuenta { font-size: 12px; color: var(--text-soft); }
.ranking__pie .btn[hidden] { display: none; }
/* Panel general: «Horas extras» en un solo panel, dos lados (12-10-2026).
   Izquierda: totales + columnas por semana. Derecha: el ranking de sucursales,
   10 a la vista; con más se recorre dentro y el panel no crece. */
.tablero__rejilla--1 > * { flex: 1 1 100%; }
.he-unido__sub { margin: 3px 0 0; font-size: 12.5px; color: var(--text-soft); }
.panel--he-unido > .panel__body { padding-top: 14px; }
.he-unido__cab { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 10px; }
.he-unido__titulo { font-size: 12.5px; font-weight: 700; color: var(--text-soft); }
.he-unido__cab .chip { height: 28px; padding: 0 10px; font-size: 12px; }
.he-unido { display: grid; grid-template-columns: minmax(0, 1.55fr) 1px minmax(0, 1fr); gap: 24px; }
.he-unido__lado { min-width: 0; }
.he-unido__sep { background: var(--line); }
.he-unido__kpis { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-bottom: 8px; }
.he-unido__kpi b { display: block; font-size: 20px; font-weight: 800; color: var(--navy, var(--brand)); font-variant-numeric: tabular-nums; }
.he-unido__kpi span { font-size: 11.5px; color: var(--text-soft); }
.he-unido .ranking__lista { max-height: 400px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.he-unido .ranking__boton { padding: 5px 6px; grid-template-columns: 30px minmax(0, 1fr) 84px; gap: 10px; }
.he-unido .ranking__nombre { font-weight: 600; color: var(--text); }
.he-unido .ranking__barra i { background: linear-gradient(90deg, #5B8FE0, var(--brand)); opacity: 1; }
@media (max-width: 900px) {
  .he-unido { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .he-unido__sep { display: none; }
}

/* La cortina de la página de destino NO se queda quieta mientras carga
   (08-10-2026): si trae un «final» (data-cortina-fin), la barra sigue
   avanzando despacio desde donde quedó (--cortina-desde) y, cuando la página
   tiene sus datos, cortina.js pone .cortina-fin: cambia la cara y el texto
   («¡Todo listo!») y la barra se llena. Barra = riel tenue + relleno blanco. */
html.cortina-entrada.cortina-espera::after {
  background:
    linear-gradient(#fff, #fff) 10px bottom / calc(220px * var(--cortina-desde, .7)) 6px no-repeat,
    linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)) center bottom / 220px 6px no-repeat;
  animation: cortina-avanza 10s cubic-bezier(.3, .35, .4, 1) forwards;
}
@keyframes cortina-avanza {
  to { background-size: 206px 6px, 220px 6px; }
}
html.cortina-entrada.cortina-fin::after {
  content: attr(data-cortina-fin);
  animation: none;
  background:
    linear-gradient(#fff, #fff) 10px bottom / 220px 6px no-repeat,
    linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)) center bottom / 220px 6px no-repeat;
}
html.cortina-entrada.cortina-fin::before {
  background:
    var(--cortina-simi-fin, var(--cortina-simi)) center calc(50% - 40px) / 110px 110px no-repeat,
    linear-gradient(90deg, var(--velo-ingreso-izq) 0%, var(--velo-ingreso-med) 55%, var(--velo-ingreso-der) 100%),
    url("/assets/img/simi-fondo-hd.png") 0 0 / 460px 206px repeat;
  background-color: var(--sidebar-fondo);
}
@media (prefers-reduced-motion: reduce) { html.cortina-entrada.cortina-espera::after { animation: none; } }

/* ===== Cadena de aprobación como «Diagrama centrado» (/aprobadores, 09-10-2026) =====
   Elegido entre varias opciones: sin el riel a la izquierda (el rectángulo y el
   punto no se entendían). Cada nodo es un círculo grande con ícono al centro,
   el nombre debajo y una línea con «+» entre nodos. El círculo dice quién firma:
   la sucursal, las iniciales de la persona, un grupo, RR.HH., o «?» si falta. */
:root { --cadena-jef: #0E7490; --cadena-rh: #6D3FC0; }
html.dark { --cadena-jef: #1593B4; --cadena-rh: #8B5CF6; }
.lienzo .cadena { padding-left: 0; display: flex; flex-direction: column; align-items: center; }
.lienzo .cadena::before { display: none; }
.lienzo .cadena__nodo {
  width: min(380px, 100%); margin: 0; padding: 12px 16px 14px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-md);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.lienzo .cadena__nodo::before { display: none; }
.lienzo .cadena__nodo:hover { background: var(--surface); border-color: var(--border); }
.lienzo .cadena__nodo--fijo, .lienzo .cadena__nodo--cierre, .lienzo .cadena__nodo--auto { background: transparent; border-style: solid; border-color: transparent; }
.lienzo .cadena__nodo.is-activo { background: var(--surface); border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); }
.lienzo .cadena__nodo-cab { justify-content: center; gap: 6px; }
.lienzo .cadena__nodo-accion::before { content: "· "; }
.lienzo .cadena__marcas, .lienzo .cadena__controles { justify-content: center; }
.cadena__circ {
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  display: grid; place-items: center; margin-bottom: 8px;
  font-weight: 700; font-size: 16px; letter-spacing: .02em;
  box-shadow: 0 6px 16px rgba(15, 40, 80, .10);
}
.cadena__circ svg { width: 24px; height: 24px; }
.cadena__circ--inicio { background: var(--surface); color: var(--brand); border: 2px solid var(--brand-light); }
.cadena__circ--persona, .cadena__circ--registro, .cadena__circ--buzon { background: var(--cadena-jef); color: #fff; }
.cadena__circ--cierre { background: var(--cadena-rh); color: #fff; }
.cadena__circ--auto { background: var(--surface-2); color: var(--text-soft); border: 2px dashed var(--border-strong); box-shadow: none; }
.cadena__circ--falta {
  background: var(--surface); color: var(--warning-dark); border: 2.5px dashed var(--warning, #F5A524);
  font-size: 22px; font-weight: 900; box-shadow: none;
}
/* La unión: una línea vertical centrada, con la condición y el «+» encima. */
.lienzo .cadena__enlace {
  width: 100%; min-height: 64px; margin: 0; padding: 6px 0;
  flex-direction: column; justify-content: center; gap: 5px;
}
.lienzo .cadena__enlace::before { left: 50%; transform: translateX(-1px); top: 2px; bottom: 2px; background: var(--border-strong); }
.lienzo .cadena__enlace-siempre { background: var(--surface-2); }

/* ===== Aprobaciones asignadas para muchas solicitudes (09-10-2026) =====
   Cuatro vistas (tabla, bandeja, por persona, por día) que cada persona elige.
   Aprobar/rechazar en grupo va en VERDE y ROJO PASTEL (pedido de la usuaria):
   se distinguen de un vistazo sin gritar como un botón lleno. */
.btn.btn--ok-suave {
  background: color-mix(in srgb, var(--success) 16%, var(--surface));
  color: var(--success-dark); border: 1px solid color-mix(in srgb, var(--success) 35%, var(--surface));
}
.btn.btn--ok-suave:hover { background: color-mix(in srgb, var(--success) 26%, var(--surface)); }
.btn.btn--no-suave {
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  color: var(--danger-dark); border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--surface));
}
.btn.btn--no-suave:hover { background: color-mix(in srgb, var(--danger) 18%, var(--surface)); }
html.dark .btn.btn--ok-suave { color: #86EFAC; }
html.dark .btn.btn--no-suave { color: #FCA5A5; }

.apr-barra, .apr-filtros, .apr-herramientas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.apr-barra { margin-bottom: 12px; }
.apr-filtros { padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.apr-herramientas { justify-content: flex-end; margin-bottom: 8px; }
.apr-espacio { flex: 1; }
.apr-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.apr-vistas__rot { font-size: 12px; color: var(--text-muted); margin-right: 2px; }
.apr-buscar {
  flex: 1 1 260px; min-width: 200px; height: 36px; padding: 0 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px;
}
.apr-buscar:focus { outline: 2px solid var(--brand-light); border-color: var(--brand); }
.apr-num { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.apr-motivo { color: var(--text-soft); display: inline-flex; gap: 6px; align-items: center; }
.apr-espera {
  display: inline-block; font-size: 12px; font-weight: 500; white-space: nowrap;
  border-radius: var(--radius-pill); padding: 2px 8px; background: var(--surface-2); color: var(--text-muted);
}
.apr-espera--media { background: var(--warning-light); color: var(--warning-dark); }
.apr-espera--alta { background: var(--danger-light); color: var(--danger-dark); }
.apr-acciones { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.apr-ic {
  width: 30px; height: 30px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface); display: inline-grid; place-items: center; cursor: pointer;
  font-weight: 900; font-size: 14px; font-family: inherit; padding: 0;
}
.apr-ic--ok { color: var(--success-dark); }
.apr-ic--ok:hover { background: color-mix(in srgb, var(--success) 16%, var(--surface)); border-color: var(--success); }
.apr-ic--no { color: var(--danger-dark); }
.apr-ic--no:hover { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); border-color: var(--danger); }
.apr-check { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; flex: none; }
.apr-mod { font-size: 11.5px; font-weight: 700; border-radius: var(--radius-pill); padding: 2px 9px; background: var(--brand-light); color: var(--brand); }
.apr-mod--permiso { background: var(--success-light); color: var(--success-dark); }

/* Barra de selección (lote) y Deshacer */
.apr-lote-zona { position: sticky; bottom: 12px; z-index: 5; }
.apr-lote {
  margin-top: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: var(--radius-md); background: var(--surface);
  border: 1px solid var(--brand); box-shadow: 0 10px 26px rgba(15, 40, 80, .16);
}
.apr-lote__info b { color: var(--text); }
.apr-lote__info span { color: var(--text-muted); font-size: 13px; }
.apr-deshacer {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 80;
  display: flex; align-items: center; gap: 16px; padding: 11px 16px; border-radius: var(--radius-md);
  background: #0B2A5B; color: #fff; font-size: 13.5px; box-shadow: 0 12px 28px rgba(11, 42, 91, .35);
}
.apr-deshacer[hidden] { display: none; }
.apr-deshacer__btn { background: none; border: 0; color: #9EC1FF; font: inherit; font-weight: 700; cursor: pointer; padding: 0; }

/* Bandeja: lista + detalle */
.apr-bandeja { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; height: min(640px, 70vh); }
.apr-bandeja__lista { border-right: 1px solid var(--border); overflow: auto; }
.apr-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer; }
.apr-item:hover { background: var(--surface-2); }
.apr-item.is-activo { background: var(--brand-light); box-shadow: inset 3px 0 0 var(--brand); }
.apr-item .apr-check { margin-top: 3px; }
.apr-item__txt { flex: 1; min-width: 0; }
.apr-item__l1 { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.apr-item__nom { font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apr-item__fecha { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; flex: none; }
.apr-item__sub { color: var(--text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apr-bandeja__detalle { padding: 18px 22px; overflow: auto; }
.apr-det__pos { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.apr-det__cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.apr-obs {
  width: 100%; height: 36px; margin-top: 6px; padding: 0 12px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); background: var(--surface); color: var(--text); font: inherit; font-size: 13px;
}
.apr-det__acc { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.apr-det__ayuda { font-size: 12px; color: var(--text-muted); margin: 12px 0 0; }

/* Por persona y por día */
.apr-grupos { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.apr-grupo + .apr-grupo { border-top: 1px solid var(--border); }
.apr-grupo__cab { display: flex; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer; flex-wrap: wrap; }
.apr-grupo__cab:hover { background: var(--surface-2); }
.apr-grupo__cab .persona { flex: 1 1 160px; min-width: 0; }
.apr-grupo__cab .persona { overflow: hidden; }
.apr-grupo__cab .persona__nom, .apr-grupo__cab .persona__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apr-grupo__tot { flex-shrink: 0; white-space: nowrap; }
.apr-grupo__acc { display: flex; gap: 8px; flex-wrap: nowrap; margin-left: auto; }
.apr-grupo__acc:empty { display: none; }
.apr-flecha { color: var(--text-muted); transition: transform .15s; }
.apr-grupo.is-abierta .apr-flecha { transform: rotate(90deg); }
.apr-grupo__tot { display: flex; align-items: center; gap: 12px; color: var(--text-muted); font-size: 12.5px; }
.apr-grupo__tot b { color: var(--text); font-size: 13.5px; }
.apr-grupo__det { background: var(--surface-2); padding: 6px 14px 10px 46px; }
.apr-mini {
  display: grid; grid-template-columns: 20px 70px 110px 110px 70px minmax(0, 1fr) auto auto; gap: 10px; align-items: center;
  padding: 7px 10px; font-size: 13px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: 6px; cursor: pointer;
}
.apr-mini:hover { border-color: var(--border-strong); }
.apr-dias .apr-mini--dia {
  grid-template-columns: 20px minmax(180px, 1.8fr) 64px 100px 100px 64px minmax(0, 1fr) auto auto;
  margin: 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 8px 14px;
}
.apr-dia__cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1; }
.apr-dia__tit b { color: var(--text); text-transform: capitalize; }
.apr-dia__tit span { color: var(--text-muted); font-size: 13px; }
@media (max-width: 900px) {
  .apr-bandeja { grid-template-columns: 1fr; height: auto; }
  .apr-bandeja__lista { max-height: 320px; border-right: 0; border-bottom: 1px solid var(--border); }
  .apr-grupo__det { padding-left: 14px; }
}
.apr-mini > * { min-width: 0; }
.apr-mini .persona { overflow: hidden; }
.apr-mini .persona__nom, .apr-mini .persona__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Filas compactas (Por persona / Por día) a cualquier ancho (09-10-2026): una
   línea por celda con «…», el estado y los botones nunca se encogen ni se montan
   sobre el motivo, y según el ancho DEL RECUADRO -no de la ventana, que con el
   menú abierto engaña- se sueltan primero el N° y luego el motivo. */
.vl-raiz .apr-grupos, .apr-dias { container-type: inline-size; --apr-col-estado: 128px; --apr-col-botones: 112px; }
.apr-mini > span, .apr-mini > b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apr-mini > :nth-last-child(-n+2) { justify-self: end; white-space: nowrap; overflow: visible; flex-shrink: 0; }
.apr-mini > :last-child { display: flex; gap: 6px; }
.apr-dias .apr-mini--dia { grid-template-columns: 20px minmax(150px, 1.6fr) 62px minmax(92px, 130px) 56px minmax(0, 1fr) var(--apr-col-estado) var(--apr-col-botones); }
@container (max-width: 820px) {
  .apr-dias .apr-mini--dia { grid-template-columns: 20px minmax(0, 1.6fr) minmax(88px, 1fr) 52px var(--apr-col-estado) var(--apr-col-botones); }
  .apr-mini { --apr-col-estado: 112px; }
  .apr-mini--dia > .apr-num, .apr-mini--dia > .apr-motivo { display: none; }
  .apr-mini { grid-template-columns: 20px minmax(0, 96px) minmax(0, 1fr) 56px var(--apr-col-estado) var(--apr-col-botones); }
  .apr-mini:not(.apr-mini--dia) > .apr-num, .apr-mini:not(.apr-mini--dia) > .apr-motivo { display: none; }
}
@container (max-width: 560px) {
  .apr-dias .apr-mini--dia { grid-template-columns: 20px minmax(0, 1fr) 52px var(--apr-col-estado) var(--apr-col-botones); }
  .apr-mini > .apr-oculta { display: none; }
  .apr-mini:not(.apr-mini--dia) { grid-template-columns: 20px minmax(0, 1fr) 52px var(--apr-col-estado) var(--apr-col-botones); }
}
/* Teléfono: el estado/espera se ve en el detalle; la fila deja nombre, horas y botones. */
@container (max-width: 420px) {
  /* Dos líneas (26-10-2026): arriba quién y cuánto, abajo los botones. En una
     sola, los botones se comían la fila y el nombre quedaba en 7 px: se
     aprobaba sin ver de quién era. */
  .apr-dias .apr-mini--dia, .apr-mini:not(.apr-mini--dia) { grid-template-columns: 20px minmax(0, 1fr) auto; row-gap: 6px; }
  .apr-mini > :nth-last-child(2) { display: none; }
  .apr-mini > :last-child { grid-column: 2 / -1; justify-self: end; }
}

/* Quién firma cada etapa de la línea de aprobación (detalle de /aprobaciones, opción C 09-10-2026). */
.etapas__quien { margin-top: 6px; padding: 5px 9px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-soft); font-size: 12px; line-height: 1.35; display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 100%; overflow-wrap: anywhere; }
.etapas__paso--actual .etapas__quien { background: var(--warning-light); }
.etapas__paso--tu .etapas__quien { box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning, #ED6C02) 45%, transparent); }
.etapas__tu { font-size: 11px; font-weight: 700; color: #fff; background: var(--brand); border-radius: var(--radius-pill); padding: 1px 8px; }

/* Vista: Tabla · Bandeja · Por persona · Por día en los listados (vistas-lista.js, 09-10-2026). */
.vl-fila-selector { display: flex; justify-content: flex-end; margin: 4px 0 10px; }
.vl-nota { font-size: 12.5px; color: var(--text-muted); }
.apr-check-hueco { display: inline-block; width: 16px; }
.vl-raiz[hidden], .vl-raiz [hidden] { display: none !important; }
.vl-raiz .apr-grupos { max-height: min(680px, 72vh); overflow: auto; }

/* Texto largo en una tabla: dos líneas como máximo y el resto en «…» (tabla.js ponerTexto, 09-10-2026). */
.celda-larga { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-width: 160px; max-width: 280px; white-space: normal; overflow-wrap: anywhere; cursor: help; }
td.celda-corta { white-space: nowrap; }

/* ==========================================================================
   Campana de avisos del encabezado (avisos.js, 09-10-2026, opción D)
   Resumen en cuadros + lo último + aviso en vivo abajo a la derecha.
   ========================================================================== */
:root { --aviso-tk: #7C3AED; --aviso-tk-light: #EDE9FE; }
html.dark { --aviso-tk: #A78BFA; --aviso-tk-light: rgba(167, 139, 250, .14); }
.avisos-hueco { display: flex; }
.avisos { position: relative; }
.avisos__campana {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text-soft); cursor: pointer;
}
.avisos__campana:hover, .avisos__campana.is-abierta { background: var(--brand-tint); border-color: var(--brand-line); color: var(--brand); }
.avisos__campana .ms { font-size: 20px; }
.avisos__globo {
  position: absolute; top: -6px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-pill); background: var(--danger); color: #fff; border: 2px solid var(--surface);
  font-size: 10.5px; font-weight: 800; line-height: 14px; text-align: center;
}
.avisos__campana--mueve .ms { animation: avisos-mueve .7s; transform-origin: 50% 10%; }
@keyframes avisos-mueve { 20% { transform: rotate(-16deg); } 40% { transform: rotate(13deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(4deg); } }
.avisos__panel {
  position: absolute; top: calc(100% + 10px); right: -8px; z-index: 60; width: 400px; max-width: calc(100vw - 24px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(15, 40, 80, .18); overflow: hidden;
}
.avisos__cab { display: flex; align-items: center; gap: 8px; padding: 13px 14px 8px; }
.avisos__cab b { flex: 1; font-size: 15px; color: var(--text); }
.avisos__lnk { background: none; border: 0; padding: 4px; color: var(--brand); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.avisos__cuadros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 2px 14px 10px; }
.avisos__cuadro { display: block; border-radius: var(--radius-md); padding: 10px 12px; text-decoration: none; border: 1px solid transparent; min-width: 0; }
a.avisos__cuadro:hover { border-color: currentColor; }
.avisos__cuadro b { display: block; font-size: 22px; line-height: 1.1; }
.avisos__cuadro small { display: block; font-size: 12px; font-weight: 600; }
.avisos__cuadro-detalle { display: block; margin-top: 3px; font-size: 11px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avisos__cuadro--ok { background: var(--success-light); color: var(--success-dark); }
.avisos__cuadro--tk { background: var(--aviso-tk-light); color: var(--aviso-tk); }
.avisos__cuadro--si { background: var(--brand-tint); color: var(--brand); }
.avisos__cuadro--wa { background: var(--warning-light); color: var(--warning-dark); }
.avisos__cuadro--er { background: var(--danger-light); color: var(--danger-dark); }
.avisos__cuadro--cero { opacity: .55; }
.avisos__partes { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.avisos__parte { font-size: 12px; font-weight: 600; color: var(--brand); text-decoration: none; padding: 3px 9px; border: 1px solid var(--brand-line); border-radius: var(--radius-pill); }
.avisos__parte:hover { background: var(--brand-tint); }
.avisos__grupo { padding: 9px 14px 5px; font-size: 11px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; border-top: 1px solid var(--border); }
.avisos__lista { max-height: min(340px, 50vh); overflow: auto; }
.avisos__vacio { margin: 0; padding: 14px 16px 18px; color: var(--text-muted); font-size: 12.5px; line-height: 1.5; }
.avisos__item { display: flex; gap: 11px; padding: 10px 14px; border-top: 1px solid var(--border); text-decoration: none; color: inherit; position: relative; }
.avisos__item:hover { background: var(--surface-2); }
.avisos__item--nuevo { background: var(--brand-tint); }
.avisos__item--nuevo::before { content: ''; position: absolute; left: 5px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--brand); }
.avisos__ic { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; display: grid; place-items: center; }
.avisos__ic .ms { font-size: 18px; }
.avisos__ic--he { background: var(--accent-light); color: var(--accent-dark); }
.avisos__ic--permiso { background: var(--success-light); color: var(--success-dark); }
.avisos__ic--ticket { background: var(--aviso-tk-light); color: var(--aviso-tk); }
.avisos__ic--sistema { background: var(--brand-tint); color: var(--brand); }
.avisos__tx { flex: 1; min-width: 0; }
.avisos__tit { font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.35; }
.avisos__det { margin-top: 2px; font-size: 12px; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avisos__pie { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.avisos__tag { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: var(--radius-pill); }
.avisos__tag--he { background: var(--accent-light); color: var(--accent-dark); }
.avisos__tag--permiso { background: var(--success-light); color: var(--success-dark); }
.avisos__tag--ticket { background: var(--aviso-tk-light); color: var(--aviso-tk); }
.avisos__tag--sistema { background: var(--brand-tint); color: var(--brand); }
.avisos__cuando { font-size: 11px; color: var(--text-muted); }
/* El aviso en vivo, abajo a la derecha: se va solo a los 7 s. */
.avisos__toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 900; width: 360px; max-width: calc(100vw - 32px);
  display: flex; gap: 11px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: 0 18px 50px rgba(15, 40, 80, .22);
  transform: translateY(16px); opacity: 0; pointer-events: none; transition: transform .3s, opacity .3s;
}
.avisos__toast.is-visible { transform: none; opacity: 1; pointer-events: auto; }
.avisos__toast .avisos__det { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.avisos__toast-acc { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.avisos__toast-ver { font-size: 12px; font-weight: 700; color: var(--brand); text-decoration: none; padding: 4px 12px; border: 1px solid var(--brand-line); border-radius: var(--radius-sm); }
.avisos__toast-ver:hover { background: var(--brand-tint); }
.avisos__toast-x { margin-left: auto; background: none; border: 0; color: var(--text-muted); cursor: pointer; padding: 2px; display: inline-flex; }
.avisos__ic--pulso { animation: avisos-pulso 1.4s infinite; }
@keyframes avisos-pulso { 50% { box-shadow: 0 0 0 6px rgba(22, 163, 74, .14); } }
@media (max-width: 640px) {
  .avisos__panel { position: fixed; top: 64px; left: 12px; right: 12px; width: auto; }
}
/* Tablet (26-10-2026): la campana queda a la izquierda del encabezado y el panel,
   anclado a su derecha, se salía de la pantalla (a 768 px solo se veían 68 px). */
@media (min-width: 641px) and (max-width: 1100px) {
  .avisos__panel { position: fixed; top: 72px; right: 16px; left: auto; width: min(400px, calc(100vw - 32px)); }
}
@media (prefers-reduced-motion: reduce) {
  .avisos__campana--mueve .ms, .avisos__ic--pulso { animation: none; }
  .avisos__toast { transition: none; }
}

/* ==========================================================================
   Anuncios emergentes (anuncios-popup.js, 10-10-2026)
   Ventana centrada con banda de color por tipo, imagen opcional y pie de acciones.
   ========================================================================== */
.anuncio-velo {
  position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 20px;
  background: rgba(8, 24, 52, .45); backdrop-filter: blur(2px); opacity: 0; transition: opacity .18s;
}
.anuncio-velo.is-visible { opacity: 1; }
body.anuncio-abierto { overflow: hidden; }
.anuncio {
  --anuncio-color: var(--brand); --anuncio-claro: var(--brand-tint);
  position: relative; width: min(560px, 100%); max-height: min(86vh, 760px); display: flex; flex-direction: column;
  background: var(--surface); border-radius: 18px; overflow: hidden; color: var(--text);
  box-shadow: 0 28px 70px rgba(8, 24, 52, .35); border-top: 5px solid var(--anuncio-color);
  transform: translateY(14px) scale(.98); transition: transform .22s cubic-bezier(.2, .8, .3, 1);
}
.anuncio-velo.is-visible .anuncio { transform: none; }
.anuncio--novedad { --anuncio-color: var(--success); --anuncio-claro: var(--success-light); }
.anuncio--importante { --anuncio-color: var(--warning); --anuncio-claro: var(--warning-light); }
.anuncio--urgente { --anuncio-color: var(--danger); --anuncio-claro: var(--danger-light); }
.anuncio__cerrar {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--text-soft); cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--e2);
}
.anuncio__cerrar:hover { color: var(--text); }
.anuncio__imagen { display: block; width: 100%; max-height: 240px; object-fit: cover; flex: none; }
.anuncio__cuerpo { padding: 22px 26px 8px; overflow: auto; }
.anuncio__cab { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.anuncio__icono {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 14px; display: grid; place-items: center;
  background: var(--anuncio-claro); color: var(--anuncio-color);
}
.anuncio__icono .ms { font-size: 24px; }
.anuncio__meta { display: flex; flex-direction: column; gap: 2px; }
.anuncio__chip { align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--anuncio-color); }
.anuncio__fecha { font-size: 12px; color: var(--text-muted); }
.anuncio__titulo { margin: 0 0 10px; font-size: 21px; line-height: 1.25; font-weight: 800; color: var(--text); letter-spacing: -.01em; }
.anuncio__texto { font-size: 14.5px; line-height: 1.62; color: var(--text-soft); }
.anuncio__texto p { margin: 0 0 10px; }
.anuncio__texto ul { margin: 0 0 10px; padding-left: 20px; }
.anuncio__texto li { margin: 3px 0; }
.anuncio__texto strong { color: var(--text); }
.anuncio__texto a { color: var(--brand); font-weight: 600; }
.anuncio__confirma {
  display: flex; align-items: center; gap: 9px; margin: 6px 0 4px; padding: 11px 13px; border-radius: 12px;
  background: var(--anuncio-claro); font-size: 13.5px; font-weight: 600; color: var(--text); cursor: pointer;
}
.anuncio__confirma input { width: 17px; height: 17px; accent-color: var(--anuncio-color); }
.anuncio__pie { display: flex; align-items: center; gap: 10px; padding: 14px 26px 20px; flex: none; }
.anuncio__contador { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.anuncio__acciones { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.anuncio .btn.anuncio__principal { background: var(--anuncio-color); border-color: var(--anuncio-color); color: #fff; }
.anuncio .btn.anuncio__principal:disabled { opacity: .45; }
.anuncio__vista { padding: 7px; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--text-muted); background: var(--surface-2); border-top: 1px solid var(--border); }
.anuncio--mini { width: 100%; max-height: none; box-shadow: var(--e2); transform: none; }
.anuncio--mini .anuncio__titulo { font-size: 18px; }
@media (max-width: 560px) {
  .anuncio-velo { padding: 10px; align-items: end; }
  .anuncio { border-radius: 18px 18px 14px 14px; }
  .anuncio__cuerpo { padding: 18px 18px 6px; }
  .anuncio__pie { padding: 12px 18px 18px; flex-wrap: wrap; }
  .anuncio__acciones { width: 100%; }
  .anuncio__acciones .btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .anuncio-velo, .anuncio { transition: none; } }

/* ---- Administración de anuncios (/anuncios) ---- */
.anuncios__intro { margin: 0 0 10px; }
.anuncios__celda { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: 300px; }
.anuncios__celda-tit { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anuncios__tipo { align-self: flex-start; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--brand-tint); color: var(--brand); }
.anuncios__tipo--novedad { background: var(--success-light); color: var(--success-dark); }
.anuncios__tipo--importante { background: var(--warning-light); color: var(--warning-dark); }
.anuncios__tipo--urgente { background: var(--danger-light); color: var(--danger-dark); }
.anuncios__vigencia { white-space: nowrap; font-size: 12.5px; }
.anuncios__lectura { display: flex; flex-direction: column; gap: 5px; min-width: 140px; }
.anuncios__lectura-txt { font-size: 12.5px; white-space: nowrap; }
.anuncios__barra { height: 6px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; border: 1px solid var(--border); }
.anuncios__barra span { display: block; height: 100%; background: var(--success); border-radius: var(--radius-pill); }
.anuncios__acciones { display: flex; flex-wrap: nowrap; gap: 6px; }
.anuncios__peligro { color: var(--danger-dark); }
.anuncios__cuerpo { min-height: 150px; }
.anuncios__filtros { display: grid; gap: 10px; margin-top: 4px; }
.anuncios__multi { flex-wrap: wrap; }
.anuncios__alcance { margin: 6px 0 0; font-size: 12.5px; color: var(--text-muted); }
.anuncios__personas { display: grid; gap: 6px; position: relative; }
.anuncios__resultados { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.anuncios__resultados:empty { display: none; }
.anuncios__resultado { text-align: left; padding: 7px 11px; border: 0; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.anuncios__resultado:hover { background: var(--brand-tint); }
.anuncios__elegidas { display: flex; flex-wrap: wrap; gap: 6px; }
.anuncios__token { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: var(--radius-pill); background: var(--brand-tint); color: var(--brand); font-size: 12.5px; font-weight: 600; }
.anuncios__token-x { border: 0; background: none; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; }
.anuncios__col-previa { position: sticky; top: 0; align-self: start; display: grid; gap: 10px; }
.anuncios__previa-titulo { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.anuncios__previa { padding: 18px; border-radius: var(--radius-lg); background: var(--bg); }
.anuncios__vistas-res { margin: 0 0 10px; font-weight: 700; }
.anuncios__vistas-tabla { width: 100%; font-size: 13px; }

/* ---- Aviso de mantenimiento para quien lo administra (arriba de la página) ---- */
.aviso-mantenimiento-admin {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-md);
  background: var(--warning-light); border: 1px solid var(--warning-line); color: var(--warning-dark); font-size: 13px; font-weight: 600;
}
.aviso-mantenimiento-admin__ir { margin-left: auto; white-space: nowrap; color: var(--warning-dark); font-weight: 800; }

/* ==========================================================================
   Mantenimiento y estado (/mantenimiento)
   ========================================================================== */
.mant__intro { margin: 0 0 12px; }
.mant__sistema { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; background: var(--surface); }
.mant__sistema--on { border-color: var(--warning-line); background: var(--warning-light); }
.mant__sistema-cab { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mant__sistema-cab > div { flex: 1; min-width: 220px; }
.mant__sistema-cab strong { font-size: 15px; color: var(--text); }
.mant__sistema-cab p { margin: 3px 0 0; }
.mant__sistema-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--success-light); color: var(--success-dark); flex: none; }
.mant__sistema--on .mant__sistema-ic { background: var(--surface); color: var(--warning-dark); }
.mant__mensaje { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface); }
.mant__mensaje p { margin: 4px 0 10px; color: var(--text-soft); }
.mant__buscar { width: min(360px, 100%); margin-bottom: 10px; }
.mant__paginas { display: grid; gap: 6px; }
.mant__pagina { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.mant__pagina--on { border-color: var(--warning-line); background: var(--warning-light); }
.mant__pagina-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mant__pagina-txt strong { font-size: 13.5px; }
.mant__ruta { font-size: 11.5px; color: var(--text-muted); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.mant__pagina-msg { font-size: 12px; color: var(--warning-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mant__pagina-acc { display: flex; gap: 6px; justify-content: flex-end; }
.mant__incidentes { display: grid; gap: 10px; }
.mant__vacio { margin: 0; padding: 18px; text-align: center; color: var(--text-muted); border: 1px dashed var(--border); border-radius: var(--radius-md); }
.mant__inc { border: 1px solid var(--border); border-left: 4px solid var(--warning); border-radius: var(--radius-md); padding: 12px 14px; background: var(--surface); }
.mant__inc--critico { border-left-color: var(--danger); }
.mant__inc--menor { border-left-color: var(--warning); }
.mant__inc--mayor { border-left-color: var(--accent); }
.mant__inc--mantenimiento { border-left-color: var(--brand); }
.mant__inc:not(.mant__inc--abierto) { opacity: .8; }
.mant__inc-cab { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.mant__inc-cab strong { display: block; font-size: 14px; }
.mant__inc-meta { font-size: 12px; color: var(--text-muted); }
.mant__linea { list-style: none; margin: 10px 0; padding: 0 0 0 14px; border-left: 2px solid var(--border); display: grid; gap: 8px; }
.mant__linea li { position: relative; }
.mant__linea li::before { content: ""; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--brand); }
.mant__linea-estado { font-size: 12px; font-weight: 800; color: var(--text); margin-right: 8px; }
.mant__linea-fecha { font-size: 11.5px; color: var(--text-muted); }
.mant__linea p { margin: 2px 0 0; font-size: 13px; color: var(--text-soft); }
@media (max-width: 720px) {
  .mant__pagina { grid-template-columns: 1fr; }
  .mant__pagina-acc { justify-content: flex-start; }
}

/* ==========================================================================
   Página de mantenimiento (lo que ve quien llega a algo apagado)
   ========================================================================== */
body.mant-aviso { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 20px; box-sizing: border-box; background: var(--bg); font-family: "Plus Jakarta Sans", system-ui, sans-serif; }
.mant-aviso__tarjeta { width: min(520px, 100%); text-align: center; background: var(--surface); border-radius: 22px; padding: 30px 30px 22px; box-sizing: border-box; box-shadow: 0 24px 60px rgba(8, 24, 52, .14); border-top: 5px solid var(--warning); }
.mant-aviso__logo { height: 54px; width: auto; }
.mant-aviso__simi { display: block; width: 132px; height: 132px; margin: 12px auto 4px; object-fit: contain; }
.mant-aviso__chip { display: inline-block; padding: 3px 12px; border-radius: var(--radius-pill); background: var(--warning-light); color: var(--warning-dark); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.mant-aviso__titulo { margin: 12px 0 8px; font-size: 23px; line-height: 1.25; color: var(--text); }
.mant-aviso__mensaje { margin: 0 0 8px; font-size: 15px; line-height: 1.6; color: var(--text-soft); white-space: pre-line; }
.mant-aviso__hasta { margin: 0 0 6px; font-weight: 700; color: var(--warning-dark); }
.mant-aviso [data-mostrar=""] { display: none; }
.mant-aviso__acciones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 18px 0 14px; }
.mant-aviso__pie { margin: 0; font-size: 12px; color: var(--text-muted); }

/* ==========================================================================
   Estado del sistema (/status, con sesión; status.rrhhsimi.cl redirige aquí)
   ========================================================================== */
.estado__main { max-width: 980px; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-content: start; }
.estado__cargando { color: var(--text-muted); }
.estado__general { display: flex; align-items: center; gap: 16px; padding: 22px 24px; border-radius: 18px; color: #fff; background: var(--success-dark); box-shadow: 0 12px 30px rgba(8, 24, 52, .12); }
.estado__general--degradado { background: var(--warning-dark); } /* blanco sobre --warning daba 3,2:1 */
.estado__general--caido { background: var(--danger); }
.estado__general--mantenimiento { background: var(--brand); }
.estado__general--sin_datos { background: var(--text-muted); }
.estado__general-ic .ms { font-size: 40px; }
.estado__general h2 { margin: 0; font-size: 22px; line-height: 1.25; color: inherit; }
.estado__general p { margin: 3px 0 0; opacity: .9; font-size: 13px; }
.estado__aviso { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--brand-tint); border: 1px solid var(--brand-line); }
.estado__aviso .ms { color: var(--brand); font-size: 24px; }
.estado__aviso p { margin: 3px 0 0; color: var(--text-soft); font-size: 13.5px; }
.estado__seccion { display: grid; gap: 12px; }
.estado__seccion h2 { margin: 0; font-size: 16px; }
.estado__seccion-cab { display: flex; align-items: baseline; justify-content: space-between; }
.estado__leyenda { font-size: 12px; color: var(--text-muted); }
.estado__componentes { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.estado__comp { padding: 16px 18px; border-top: 1px solid var(--border); }
.estado__comp:first-child { border-top: 0; }
.estado__comp-cab { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin-bottom: 10px; }
.estado__comp-nom strong { display: block; font-size: 14.5px; }
.estado__comp-nom small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.estado__pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--success-light); color: var(--success-dark); }
.estado__pill .ms { font-size: 16px; }
.estado__pill--degradado { background: var(--warning-light); color: var(--warning-dark); }
.estado__pill--caido { background: var(--danger-light); color: var(--danger-dark); }
.estado__pill--mantenimiento { background: var(--brand-tint); color: var(--brand); }
.estado__pill--sin_datos { background: var(--surface-2); color: var(--text-muted); }
.estado__barra { display: grid; grid-template-columns: repeat(90, minmax(0, 1fr)); gap: 2px; height: 32px; }
.estado__dia { border-radius: 2px; background: var(--success); }
.estado__dia:hover { filter: brightness(.85); }
.estado__dia--degradado { background: var(--warning); }
.estado__dia--caido { background: var(--danger); }
.estado__dia--mantenimiento { background: var(--brand); }
.estado__dia--sin_datos { background: var(--border); }
.estado__comp-pie { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; color: var(--text-muted); }
.estado__pct { font-weight: 700; color: var(--text-soft); }
.estado__leyenda-colores { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--text-muted); }
.estado__leyenda-colores > span { display: inline-flex; align-items: center; gap: 6px; }
.estado__muestra { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.estado__muestra:hover { filter: none; }
.estado__inc { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--warning); border-radius: 14px; padding: 14px 16px; }
.estado__inc--critico { border-left-color: var(--danger); }
.estado__inc--mayor { border-left-color: var(--accent); }
.estado__inc--mantenimiento { border-left-color: var(--brand); }
.estado__inc-cab { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; }
.estado__inc-cab h3 { margin: 0; font-size: 15px; }
.estado__inc-chip { font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--warning-light); color: var(--warning-dark); white-space: nowrap; }
.estado__inc-chip--critico { background: var(--danger-light); color: var(--danger-dark); }
.estado__inc-chip--mantenimiento { background: var(--brand-tint); color: var(--brand); }
.estado__inc-comp, .estado__inc-fechas { margin: 4px 0 0; font-size: 12.5px; color: var(--text-muted); }
.estado__linea { list-style: none; margin: 12px 0 0; padding: 0 0 0 16px; border-left: 2px solid var(--border); display: grid; gap: 10px; }
.estado__linea li { position: relative; }
.estado__linea li::before { content: ""; position: absolute; left: -22px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--brand); }
.estado__linea-cab { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.estado__linea-cab strong { font-size: 13px; }
.estado__linea-cab span { font-size: 12px; color: var(--text-muted); }
.estado__linea p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-soft); }
.estado__dia-hist { padding: 10px 0; border-top: 1px solid var(--border); display: grid; gap: 8px; }
.estado__dia-hist h3 { margin: 0; font-size: 13.5px; }
.estado__dia-hist--vacio { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; }
.estado__dia-hist--vacio h3 { font-weight: 600; color: var(--text-soft); }
.estado__sin { margin: 0; font-size: 13px; color: var(--text-muted); }
@media (max-width: 600px) {
  .estado__general { padding: 18px; }
  .estado__general h2 { font-size: 18px; }
  .estado__barra { grid-template-columns: repeat(45, minmax(0, 1fr)); height: 26px; }
  .estado__barra .estado__dia:nth-child(-n+45) { display: none; }
}
@media (max-width: 600px) { .estado__desde { font-size: 0; } .estado__desde::before { content: "Hace 45 días"; font-size: 11.5px; } }
.mant__buscar { display: block; height: 38px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; box-sizing: border-box; }
.mant__buscar:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }

/* ==========================================================================
   Alertas de la instalación (arriba de /status, solo super administrador)
   ========================================================================== */
.inst { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 18px 20px; display: grid; gap: 14px; box-shadow: 0 6px 18px rgba(8, 24, 52, .05); }
.inst__cab { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.inst__tit h2 { margin: 0; font-size: 17px; }
.inst__tit p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-muted); }
.inst__resumen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inst__todo-ok { font-weight: 700; color: var(--success-dark); font-size: 13.5px; margin-right: 4px; }
.inst__chip { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 800; padding: 3px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
.inst__chip--critico { background: var(--danger-light); color: var(--danger-dark); }
.inst__chip--aviso { background: var(--warning-light); color: var(--warning-dark); }
.inst__chip--info { background: var(--brand-tint); color: var(--brand); }
.inst__chip--ok { background: var(--success-light); color: var(--success-dark); }
.inst__lista { display: grid; gap: 10px; }
.inst__item { display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border-radius: 14px; border: 1px solid var(--border); border-left-width: 4px; background: var(--surface); }
.inst__item--critico { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger-light) 55%, var(--surface)); }
.inst__item--aviso { border-left-color: var(--warning); background: color-mix(in srgb, var(--warning-light) 55%, var(--surface)); }
.inst__item--info { border-left-color: var(--brand); }
.inst__ic .ms { font-size: 22px; }
.inst__item--critico .inst__ic { color: var(--danger); }
.inst__item--aviso .inst__ic { color: var(--warning-dark); }
.inst__item--info .inst__ic { color: var(--brand); }
.inst__cuerpo { min-width: 0; flex: 1; display: grid; gap: 4px; justify-items: start; }
.inst__cuerpo strong { font-size: 14px; }
.inst__cuerpo p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-soft); overflow-wrap: anywhere; }
.inst__arreglo b { color: var(--text); }
.inst__ver { margin-top: 6px; }
.inst__crons { display: grid; gap: 10px; width: 100%; margin-top: 6px; }
.inst__crons[hidden] { display: none; }
.inst__crons-intro { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.inst__crons-intro p { flex: 1 1 280px; font-size: 12.5px; }
.inst__cron { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--surface); display: grid; gap: 10px; min-width: 0; }
.inst__cron-cab { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; }
.inst__cron-cab strong { display: block; font-size: 13.5px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.inst__cron-cab small { display: block; font-size: 12px; color: var(--text-muted); }
.inst__frec { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; }
.inst__frec-txt { font-size: 12.5px; font-weight: 700; color: var(--text-soft); min-width: 150px; }
.inst__campos { display: flex; gap: 6px; flex-wrap: wrap; }
.inst__campo { display: grid; justify-items: center; gap: 2px; min-width: 62px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.inst__campo small { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.inst__campo code { font-size: 13px; font-weight: 700; }
.inst__cmd { display: flex; gap: 8px; align-items: center; min-width: 0; }
.inst__cmd code { flex: 1; min-width: 0; font-size: 12px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); overflow-x: auto; white-space: nowrap; }
.inst__copiar { flex-shrink: 0; }
.inst__copiar .ms { font-size: 16px; }
.inst__nota { margin: 0; font-size: 12px; color: var(--text-muted); }
.inst__nota--error { color: var(--danger-dark); overflow-wrap: anywhere; }
.inst__oks summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text-soft); }
.inst__oks ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.inst__oks li { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; font-size: 13px; align-items: start; }
.inst__oks li .ms { color: var(--success); font-size: 18px; grid-row: span 2; }
.inst__oks li small { color: var(--text-muted); grid-column: 2; }
.inst__oks li > .inst__ver, .inst__oks li > .inst__crons { grid-column: 2; justify-self: start; }
@media (max-width: 600px) {
  .inst { padding: 14px; }
  .inst__item { padding: 11px; gap: 9px; }
  .inst__cmd { flex-direction: column; align-items: stretch; }
  .inst__campo { min-width: 52px; }
}
.mant__inc-extras { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mant__inc-extra { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--brand-tint); color: var(--brand); }
.mant__inc-extra .ms { font-size: 15px; }
/* Aviso de mantenimiento en la pantalla de ingreso (login.js). */
.ingreso__mant { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 11px 13px; margin: 0 0 14px; border-radius: 12px; border: 1px solid var(--warning-line); background: var(--warning-light); color: var(--text); }
.ingreso__mant[hidden] { display: none; }
.ingreso__mant .ms { font-size: 22px; color: var(--warning-dark); flex-shrink: 0; }
.ingreso__mant strong { display: block; font-size: 13.5px; color: var(--warning-dark); }
.ingreso__mant p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text-soft); }
.ingreso__mant--activo { background: var(--brand-tint); border-color: var(--brand-line); }
.ingreso__mant--activo .ms, .ingreso__mant--activo strong { color: var(--brand); }

/* ==========================================================================
   Accesos bloqueados y sesiones activas (0095)
   ========================================================================== */
.acc-alertas { display: grid; gap: 10px; }
.acc-alertas:empty { display: none; }
.acc-alerta { display: flex; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--danger); border-radius: var(--radius-lg); padding: 14px 16px; }
.acc-alerta__ic { width: 42px; height: 42px; flex: 0 0 42px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--danger-light); color: var(--danger-dark); }
.acc-alerta__txt { flex: 1; min-width: 0; }
.acc-alerta__txt strong { color: var(--text); font-size: 14px; }
.acc-alerta__txt p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-soft); }
.acc-kpi--ip .kpi__icono { background: #F1EAFE; color: #6D28D9; }
.ses-kpi--hoy .kpi__icono { background: var(--surface-2); color: var(--text-soft); }
.acc-vista[hidden] { display: none; }
.acc-ip { font: 600 12px ui-monospace, Consolas, monospace; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; white-space: nowrap; }
.acc-fh strong, .acc-fh small { display: block; white-space: nowrap; }
.acc-fh strong { font-size: 12.5px; }
.acc-fh small { font-size: 11.5px; color: var(--text-muted); }
.acc-num { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.acc-num strong { font-size: 13.5px; color: var(--text); }
.acc-fecha { white-space: nowrap; font-size: 12.5px; }
.acc-estado { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.acc-estado .ms { font-size: 15px; }
.acc-acciones { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; }
.acc-acciones .ms { font-size: 16px; }
.acc-btn-perdon { background: #6D28D9; border-color: #6D28D9; color: #fff; }
.acc-btn-perdon:hover:not(:disabled) { background: #5B21B6; border-color: #5B21B6; color: #fff; }
.acc-btn-perdon .ms { font-size: 16px; }
.badge.acc-badge--perdon { background: #F1EAFE; color: #6D28D9; }
.acc-link { cursor: pointer; }
.acc-link:hover strong, .acc-link:hover b { color: var(--brand); text-decoration: underline; }
.acc-cuenta-x strong, .acc-cuenta-x small { display: block; }
.acc-cuenta-x strong { font-size: 13px; color: var(--danger-dark); font-family: ui-monospace, Consolas, monospace; }
.acc-cuenta-x small { font-size: 11.5px; color: var(--text-muted); }
.acc-muestras { display: flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; max-width: 240px; }
.acc-chip { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-soft); white-space: nowrap; }
/* Cajón de una cuenta */
.acc-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.acc-sub { font-size: 12px; color: var(--text-muted); }
.acc-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.acc-cifras div { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px; text-align: center; }
.acc-cifras strong { display: block; font-size: 19px; color: var(--text); }
.acc-cifras small { font-size: 11px; color: var(--text-soft); }
.acc-linea { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--border); display: grid; gap: 11px; }
.acc-linea__dia { margin: 6px 0 -2px -18px; padding-left: 0; font-size: 11px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.acc-linea__it { position: relative; }
.acc-linea__it::before { content: ""; position: absolute; left: -25px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 3px solid var(--danger); }
.acc-linea__it--ok::before { border-color: var(--success); }
.acc-linea__it--perdon::before { border-color: #6D28D9; }
.acc-linea__it--bloqueo::before { border-color: var(--warning); background: var(--warning); }
.acc-linea__it--rechazo::before { border-color: var(--text-faint); }
/* 0100: de dónde está bloqueada y «Bloquear la cuenta entera». */
.acc-sub-tit { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 12px 0 6px; }
.acc-bloqueos { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; font-size: 12.5px; color: var(--text); }
.acc-bloquear { margin-top: 14px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--border)); border-radius: var(--radius-sm); background: var(--surface); }
.acc-bloquear summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--danger-dark); }
.acc-bloquear[open] summary { margin-bottom: 10px; }
.acc-bloquear .btn { margin-top: 8px; }
.acc-linea__cab { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.acc-linea__cab strong { font-size: 13px; color: var(--text); }
.acc-linea__cab span { font-size: 12px; color: var(--text-muted); }
.acc-linea__it p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-soft); overflow-wrap: anywhere; }
.acc-linea__vacio { font-size: 13px; color: var(--text-muted); }
.acc-perdon { margin-top: 16px; border: 1px solid #E4D7FB; background: #FBF8FF; border-radius: var(--radius-lg); padding: 14px; display: grid; gap: 10px; }
.acc-perdon h3 { margin: 0; font-size: 14px; color: #6D28D9; }
.acc-perdon textarea { width: 100%; box-sizing: border-box; }
.acc-chk { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--text-soft); cursor: pointer; }
.acc-chk input { margin-top: 2px; accent-color: var(--brand); }
.acc-nota { margin: 0; display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--text-soft); background: var(--surface-2); border-radius: var(--radius-md); padding: 8px 10px; }
.acc-nota .ms { font-size: 16px; color: var(--brand); flex-shrink: 0; }
.acc-ip-grande { margin: 0 0 6px; font: 700 18px ui-monospace, Consolas, monospace; color: var(--text); }
/* Sesiones */
.ses-tu { margin-left: 6px; font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: var(--radius-pill); background: var(--brand-tint); color: var(--brand); vertical-align: middle; }
.ses-estado { display: inline-flex; align-items: center; gap: 6px; }
.ses-punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
.ses-tiempo { white-space: nowrap; font-size: 13px; }
.ses-fecha { white-space: nowrap; font-size: 12.5px; }
.ses-nota { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.ses-doble { display: grid; gap: 3px; justify-items: start; }
.ses-doble small { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
@media (max-width: 600px) {
  .acc-alerta { flex-wrap: wrap; }
  .acc-alerta .btn { width: 100%; }
}
/* Suplencias (0097): marca en la bandeja de aprobaciones. */
.apr-suplencia { margin-left: 8px; font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: var(--radius-pill); background: #F1EAFE; color: #6D28D9; white-space: nowrap; vertical-align: middle; }
.sup__intro { margin: 0 0 12px; }
.sup__fechas { white-space: nowrap; font-size: 12.5px; }
.sup__admin { display: flex; flex-direction: column; gap: 22px; }
.sup__admin:empty { display: none; }
.sup__guardar { align-self: flex-start; }
.sup__plazos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; margin-bottom: 12px; }

/* ==========================================================================
   Celebraciones (0097)
   ========================================================================== */
.cel__barra:empty { display: none; }
.cel__hoy { background: var(--surface); border: 1px solid var(--border); border-top: 4px solid #F59E0B; border-radius: var(--radius-lg); padding: 18px 20px; display: grid; gap: 14px; }
.cel__hoy-cab h2 { margin: 0; font-size: 18px; color: var(--text); }
.cel__hoy-cab p { margin: 3px 0 0; font-size: 13px; color: var(--text-soft); }
.cel__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px; }
.cel__card { position: relative; display: flex; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px 14px; }
.cel__card--cumpleanos { border-left: 4px solid #F59E0B; }
.cel__card--aniversario { border-left: 4px solid #6D28D9; }
.cel__simi { width: 54px; height: 54px; flex: 0 0 54px; }
.cel__card-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cel__card-txt strong { font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cel__card-txt small { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cel__chip { display: inline-flex; align-items: center; gap: 4px; justify-self: start; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: var(--radius-pill); background: #FFF4E5; color: #B35400; }
.cel__card--aniversario .cel__chip { background: #F1EAFE; color: #6D28D9; }
.cel__chip .ms { font-size: 14px; }
.cel__mod { border: 0; background: none; padding: 0; font: inherit; font-size: 11.5px; color: var(--text-muted); text-decoration: underline; cursor: pointer; white-space: nowrap; }
.cel__ojo { border: 0; background: none; padding: 4px; border-radius: 8px; color: var(--text-muted); cursor: pointer; display: grid; place-items: center; }
.cel__ojo:hover { background: var(--surface-2); color: var(--text-soft); }
.cel__ojo .ms { font-size: 17px; }
.cel__mas { margin: 8px 0 0; font-size: 12.5px; color: var(--text-muted); }
.cel__ocultas { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.cel__ocultas summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.cel__ocultas .cel__lista { margin-top: 8px; }
.cel__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 16px; align-items: start; }
.cel__cols > div { display: flex; flex-direction: column; min-width: 0; }
.cel__vacio { margin: 0; font-size: 13px; color: var(--text-muted); }
.cel__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cel__lista li { display: flex; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--border); }
.cel__lista li .ms { color: var(--text-muted); font-size: 18px; }
.cel__fecha { flex: 0 0 62px; font-size: 12px; font-weight: 800; color: var(--brand); }
.cel__lista-txt { flex: 1; min-width: 0; display: grid; }
.cel__lista-txt strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cel__lista-txt small { font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cel__feed { display: grid; gap: 10px; }
.cel__rec { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; background: var(--surface); }
.cel__rec--oculto { opacity: .55; border-style: dashed; }
.cel__rec-ic { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); }
.cel__rec-ic--cumpleanos { background: #FFF4E5; color: #B35400; }
.cel__rec-ic--aniversario, .cel__rec-ic--equipo { background: #F1EAFE; color: #6D28D9; }
.cel__rec-ic--gracias { background: var(--success-light); color: var(--success-dark); }
.cel__rec-ic--gran_trabajo { background: #FEF9C3; color: #A16207; }
.cel__rec-txt { flex: 1; min-width: 0; display: grid; gap: 4px; }
.cel__rec-cab { display: flex; gap: 6px 8px; align-items: baseline; flex-wrap: wrap; }
.cel__rec-tipo { font-size: 11px; font-weight: 800; color: var(--brand); text-transform: uppercase; letter-spacing: .03em; }
.cel__rec-cab strong { font-size: 13.5px; color: var(--text); }
.cel__rec-cab small { font-size: 11.5px; color: var(--text-muted); }
.cel__rec-txt p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-soft); overflow-wrap: anywhere; }
.cel__rec-pie { font-size: 11.5px; color: var(--text-muted); }
.cel__elegido { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--brand-line); background: var(--brand-tint); border-radius: var(--radius-md); }
.cel__elegido[hidden] { display: none; }
.cel__elegido strong, .cel__elegido small { display: block; }
.cel__elegido small { font-size: 11.5px; color: var(--text-muted); }
.cel__resultados { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; max-height: 240px; overflow: auto; }
.cel__resultado { width: 100%; text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-md); padding: 8px 10px; cursor: pointer; font: inherit; display: grid; }
.cel__resultado:hover { border-color: var(--brand); background: var(--brand-tint); }
.cel__resultado small { font-size: 11.5px; color: var(--text-muted); }
.cel__contador { display: block; text-align: right; font-size: 11.5px; color: var(--text-muted); margin-top: -6px; }
@media (max-width: 900px) { .cel__cols { grid-template-columns: 1fr; } }

/* ==========================================================================
   Organigrama (0097, solo super administrador)
   ========================================================================== */
.org__barra { position: relative; max-width: 520px; }
.org__buscar { width: 100%; }
.org__resultados { position: absolute; z-index: 30; left: 0; right: 0; top: 44px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 12px 30px rgba(15,40,80,.12); max-height: 320px; overflow: auto; padding: 6px; display: grid; gap: 4px; }
.org__resultados[hidden] { display: none; }
.org__resultado { text-align: left; border: 0; background: none; border-radius: 8px; padding: 8px 10px; cursor: pointer; font: inherit; display: grid; }
.org__resultado:hover { background: var(--brand-tint); }
.org__resultado small { font-size: 11.5px; color: var(--text-muted); }
.org__diagrama { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; display: grid; justify-items: center; gap: 0; }
.org__fila { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; width: 100%; }
.org__fila--ramas { position: relative; padding-top: 16px; border-top: 2px solid var(--border); max-width: 1000px; }
.org__conector { width: 2px; height: 18px; background: var(--border); }
.org__caja { display: flex; align-items: center; gap: 10px; min-width: 200px; text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: 14px; padding: 12px 14px; cursor: pointer; font: inherit; color: var(--text); position: relative; }
.org__fila--ramas .org__caja::before { content: ""; position: absolute; top: -17px; left: 50%; width: 2px; height: 16px; background: var(--border); }
.org__caja:hover:not(:disabled) { border-color: var(--brand); }
.org__caja:disabled { cursor: default; opacity: 1; }
.org__caja .ms { font-size: 22px; color: var(--brand); }
.org__caja--raiz { background: var(--brand); border-color: var(--brand); color: #fff; min-width: 280px; }
.org__caja--raiz .ms, .org__caja--raiz small { color: rgba(255,255,255,.85); }
.org__caja--raiz .org__total { background: rgba(255,255,255,.18); color: #fff; }
.org__caja--on { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.org__caja--sin_cc .ms { color: var(--warning-dark); }
.org__caja-txt { flex: 1; display: grid; }
.org__caja-txt strong { font-size: 14px; }
.org__caja-txt small { font-size: 11.5px; color: var(--text-muted); }
.org__total { font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.org__nivel { display: grid; gap: 12px; }
.org__migas { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.org__miga { border: 0; background: none; padding: 0; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--brand); cursor: pointer; }
.org__miga--actual { color: var(--text); cursor: default; }
.org__sep { color: var(--text-muted); }
.org__pista { margin: 0; font-size: 13px; color: var(--text-soft); }
.org__pista--alerta { padding: 10px 12px; border-radius: var(--radius-md); background: var(--warning-light); color: var(--warning-dark); }
.org__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px; }
.org__grid--centros { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.org__grupo, .org__centro { text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: 14px; padding: 12px 14px; cursor: pointer; font: inherit; display: grid; gap: 6px; align-content: start; color: var(--text); }
.org__grupo { border-top: 4px solid var(--brand); }
.org__grupo--sin { border-top-color: var(--warning); }
.org__grupo:hover, .org__centro:hover { border-color: var(--brand); }
.org__grupo-cab { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.org__grupo-cab strong { font-size: 13.5px; }
.org__grupo small, .org__centro small { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.org__cc { font: 600 11.5px ui-monospace, Consolas, monospace; color: var(--text-soft); }
.org__aprobadores { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.org__aprobadores--grande { gap: 6px; }
.org__ap-lbl { font-size: 12.5px; font-weight: 700; color: var(--text-soft); }
.org__chip { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--brand-tint); color: var(--brand); white-space: nowrap; }
.org__chip--alerta { background: var(--warning-light); color: var(--warning-dark); }
.org__chip--mini { justify-self: start; background: var(--surface-2); color: var(--text-soft); }
.org__fecha { white-space: nowrap; font-size: 12.5px; }
.org__falta { color: var(--warning-dark); font-size: 12.5px; }
@media (max-width: 600px) {
  .org__caja { min-width: 0; width: 100%; }
  .org__fila--ramas .org__caja::before { display: none; }
}

/* ==========================================================================
   Celular (11-10-2026): la barra de arriba solo con la marca y «Menú».
   El buscador del menú vive dentro del menú abierto (y sin el «Ctrl K», que
   en un teléfono no existe); el botón de plegar a carril no aplica.
   ========================================================================== */
@media (max-width: 780px) {
  .sidebar__buscar { display: none; order: 3; flex-basis: 100%; margin: 4px 0 0; }
  body.menu-movil-abierto .sidebar__buscar { display: flex; }
  .sidebar__buscar-kbd { display: none; }
  .sidebar__plegar { display: none; }
}
/* Encabezado en celular (11-10-2026): título arriba y, debajo, UNA sola fila
   con campana, cuenta (solo la inicial), tema y salir. Antes eran tres filas y
   un cuarto de pantalla antes de llegar al contenido. */
@media (max-width: 600px) {
  .main > .topbar { padding: 12px 16px; gap: 10px; }
  .topbar__title { font-size: 19px; }
  .topbar__sub { font-size: 12.5px; }
  .topbar__acciones { width: 100%; flex-wrap: nowrap; justify-content: space-between; gap: 8px; }
  .topbar__acciones .usuario-chip__nombre, .topbar__acciones .usuario-chip__rol, .topbar__acciones .menu-boton__flecha { display: none; }
  .topbar__acciones .menu-boton { margin-right: auto; }
  /* El chip queda a la izquierda: su menú se abre hacia la derecha, o se cortaba
     («fil», «ontraseña») (26-10-2026). */
  .topbar__acciones .menu-boton__menu { right: auto; left: 0; transform-origin: top left; }
  .topbar__salir { padding: 0 12px; height: 38px; font-size: 12.5px; white-space: nowrap; }
  .sidebar__brand { border-bottom: 0; }
}
/* Red de seguridad (11-10-2026): en pantallas angostas nada puede ensanchar
   la página. Si algo se pasa (una tabla sin su envoltura con desplazamiento),
   el navegador del celular achicaba la página ENTERA para que cupiera —menú
   incluido— y había que hacer zoom para usarla. `clip` corta solo lo que se
   pasa, sin crear una caja con desplazamiento ni romper los `sticky`. */
@media (max-width: 780px) {
  html, body { overflow-x: clip; }
  .main { overflow-x: clip; }
}
@media (max-width: 600px) {
  .topbar__acciones { flex-wrap: wrap; justify-content: flex-start; row-gap: 8px; }
  .topbar__salir { margin-left: auto; }
}

/* ---------- /correo-config (0103): configuración de correo, solo super ---------- */
.correo-estado { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; margin-bottom: 16px; }
.correo-estado__tarjeta {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
}
.correo-estado__tarjeta strong { display: block; font-size: 14px; color: var(--text); }
.correo-estado__tarjeta p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-muted); }
.correo-estado__ic { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--brand-light); color: var(--brand); }
.correo-estado__tarjeta.is-ok .correo-estado__ic { background: var(--success-light); color: var(--success-dark); }
.correo-estado__tarjeta.is-mal { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.correo-estado__tarjeta.is-mal .correo-estado__ic { background: var(--danger-light); color: var(--danger-dark); }
.correo-estado__tarjeta.is-aviso .correo-estado__ic { background: var(--warning-light); color: var(--warning-dark); }
.correo-estado__link { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--brand); }
button.correo-estado__link { background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; text-align: left; }
button.correo-estado__link:hover { text-decoration: underline; }
.correo-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.correo-col { display: grid; gap: 16px; min-width: 0; }
.correo-smtp { margin-top: 12px; display: grid; gap: 4px; }
.correo-prueba { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.correo-prueba .campo { flex: 1 1 220px; margin: 0; }
.correo-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.correo-ultimo { margin: 0; }
@media (max-width: 900px) { .correo-rejilla { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Páginas de error · opción D «Textura Simi clara» (12-10-2026)
   App/tools/PaginaError.php. Funciona sin sesión y con la base caída.
   ========================================================================== */
.err-pag {
  --err-tinta: #0B2A5B; --err-suave: #4B5B71; --err-tenue: #5C6C83; /* tenue daba 3,2:1 (01-11-2026) */ --err-linea: #E2E8F0; --err-linea2: #D6DEEA;
  --err-azul: #1747A2; --err-azul-l: #EAF1FC; --err-vi: #6D28D9; --err-vi-l: #F1EAFE;
  --err-rojo: #B42318; --err-rojo-l: #FDECEA; --err-ambar: #B35400; --err-ambar-l: #FFF4E5;
  margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 88px 16px 32px;
  background: #F3F6FB; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: #3C4858; position: relative; overflow-x: hidden;
}
.err-fondo {
  position: fixed; inset: 0; pointer-events: none;
  background-image: url('/assets/img/simi/hd/emo-15.png'); background-size: 84px; background-repeat: space;
  opacity: .06; filter: grayscale(1);
}
.err-marca { position: absolute; left: 22px; top: 18px; display: flex; align-items: center; gap: 10px; text-decoration: none; z-index: 1; }
.err-marca img { width: 36px; height: 36px; }
.err-marca b { display: block; color: var(--err-tinta); font-size: 14px; }
.err-marca small { color: var(--err-tenue); font-size: 11.5px; }
.err-tarjeta { position: relative; width: min(560px, 100%); background: #fff; border-radius: 24px; box-shadow: 0 22px 50px rgba(15, 40, 80, .12); overflow: hidden; }
.err-banda { height: 110px; background: var(--err-azul-l); position: relative; }
.err-banda--403 { background: var(--err-vi-l); }
.err-banda--500 { background: var(--err-rojo-l); }
.err-banda--503 { background: var(--err-ambar-l); }
.err-num { position: absolute; left: 26px; top: 20px; font-size: 62px; font-weight: 800; color: var(--err-azul); opacity: .35; letter-spacing: -.03em; line-height: 1.1; }
.err-banda--403 .err-num { color: var(--err-vi); }
.err-banda--500 .err-num { color: var(--err-rojo); }
.err-banda--503 .err-num { color: var(--err-ambar); }
.err-simi { position: absolute; right: 26px; bottom: -46px; width: 118px; height: 118px; border-radius: 50%; background: #fff; padding: 6px; box-shadow: 0 8px 20px rgba(15, 40, 80, .12); }
.err-cuerpo { padding: 26px 26px 22px; }
.err-chip { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 800; padding: 4px 11px; border-radius: 999px; letter-spacing: .02em; }
.err-chip--404 { background: var(--err-azul-l); color: var(--err-azul); }
.err-chip--403 { background: var(--err-vi-l); color: var(--err-vi); }
.err-chip--500 { background: var(--err-rojo-l); color: var(--err-rojo); }
.err-chip--503 { background: var(--err-ambar-l); color: var(--err-ambar); }
.err-cuerpo h1 { margin: 10px 0 6px; color: var(--err-tinta); font-size: 22px; max-width: 360px; line-height: 1.3; }
.err-cuerpo p { margin: 0; line-height: 1.6; color: var(--err-suave); max-width: 440px; font-size: 14px; }
.err-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0 4px; }
.err-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; padding: 0 18px;
  border-radius: 10px; border: 1px solid var(--err-azul); background: var(--err-azul); color: #fff;
  font: 700 13.5px 'Plus Jakarta Sans', system-ui, sans-serif; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.err-btn:hover { filter: brightness(1.08); }
.err-btn--g { background: #fff; color: var(--err-tinta); border-color: var(--err-linea2); }
.err-btn--g:hover { border-color: var(--err-azul); color: var(--err-azul); filter: none; }
.err-btn .ms { font-size: 18px; }
.err-pie {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  border-top: 1px solid var(--err-linea); margin-top: 16px; padding-top: 12px; font-size: 12px; color: var(--err-tenue);
}
.err-pie code { font: 700 12px ui-monospace, Consolas, monospace; color: var(--err-tinta); word-break: break-all; }
.err-ref { display: inline-flex; align-items: center; gap: 8px; color: var(--err-suave); background: #F8FAFC; border: 1px dashed var(--err-linea2); border-radius: 9px; padding: 6px 10px; }
.err-ref button { border: 0; background: none; color: var(--err-azul); font: 700 12px 'Plus Jakarta Sans', system-ui, sans-serif; cursor: pointer; padding: 0; }
.err-cuenta b { color: var(--err-tinta); }
@media (max-width: 560px) {
  .err-pag { padding: 24px 14px; align-items: start; }
  .err-marca { display: none; }
  .err-num { font-size: 46px; }
  .err-simi { width: 96px; height: 96px; bottom: -38px; right: 18px; }
  .err-cuerpo { padding: 24px 18px 18px; }
  .err-cuerpo h1 { max-width: calc(100% - 20px); }
  .err-btn { flex: 1 1 auto; }
}

/* /feriados: dónde rige un feriado (0104, feriados regionales). */
.feriados__alcance { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.feriados__alcance .campo { margin: 4px 0 0; }
.feriados__alcance .campo__ayuda { margin: 0; }

/* Aprobar o rechazar solicitudes con Excel (12-10-2026): dos pasos numerados. */
.lote-sol__paso { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.lote-sol__paso:last-child { border-bottom: 0; }
.lote-sol__num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-light); color: var(--brand); font-weight: 800; font-size: 13px; }
.lote-sol__cuerpo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lote-sol__titulo-paso { margin: 3px 0 0; font-size: 14px; font-weight: 700; color: var(--text); }
.lote-sol__cuerpo .campo__ayuda { margin: 0; }
.lote-sol__plantilla { align-self: flex-start; }
.lote-sol__resultado { display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.lote-sol__resumen { margin: 0; font-weight: 700; color: var(--text); }
.lote-sol__titulo { margin: 0; font-size: 12px; font-weight: 700; color: var(--text-soft); }
.lote-sol__errores { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.lote-sol__errores li { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--danger-light); font-size: 12.5px; color: var(--danger-dark); }
.lote-sol__errores b { color: var(--text); }

/* Estado del sistema: los últimos errores del servidor (12-10-2026). */
.inst__errores { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; }
.inst__errores li { padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.inst__err-cab { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--text-soft); }
.inst__err-cab b { color: var(--danger-dark); }
.inst__errores code { font-size: 12px; white-space: pre-wrap; word-break: break-word; color: var(--text); }
/* Plazos de conservación en /status (01-11-2026) */
.ret__lista { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.ret__fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); }
.ret__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ret__txt strong { font-size: 13px; font-weight: 600; }
.ret__txt small { font-size: 12px; color: var(--text-muted); }
.ret__fila .inst__chip { flex-shrink: 0; }
.ret__sub { font-size: 13px; margin: 14px 0 0; }
.ret__acciones { display: flex; justify-content: flex-end; margin-top: 14px; }

/* Colaboradores → RUT y centro de costo (12-10-2026). */
.cc-colab__barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 12px; }

/* Resumen de voz al ingresar (12-10-2026): el recuadro de Simi y la tarjeta iluminada. */
.voz-asistente {
  position: fixed; right: 20px; bottom: 20px; z-index: 900; width: min(380px, calc(100vw - 32px));
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 14px 16px; border-radius: 18px; background: var(--surface, #fff); color: var(--text);
  border: 1px solid var(--border); box-shadow: 0 18px 40px rgba(15, 27, 51, .18);
  opacity: 0; transform: translateY(14px); transition: opacity .3s ease, transform .3s ease;
}
.voz-asistente--visible { opacity: 1; transform: none; }
.voz-asistente__cara { width: 56px; height: 56px; object-fit: contain; }
.voz-asistente__cuerpo { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-right: 14px; }
.voz-asistente__titulo { font-size: 13px; color: var(--brand); }
.voz-asistente__texto { margin: 0; font-size: 14px; line-height: 1.45; }
.voz-asistente__botones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.voz-asistente__no { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; color: var(--text-soft); text-decoration: underline; cursor: pointer; }
.voz-asistente__cerrar { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 20px; line-height: 1; color: var(--text-soft); cursor: pointer; }
.voz-asistente__llamar { animation: voz-llamar 1.4s ease-in-out infinite; }
@keyframes voz-llamar { 0%, 100% { box-shadow: 0 0 0 0 rgba(23, 71, 162, .45); } 50% { box-shadow: 0 0 0 8px rgba(23, 71, 162, 0); } }
.voz-resalte { position: relative; z-index: 2; outline: 3px solid var(--brand); outline-offset: 4px; border-radius: 14px; animation: voz-pulso 1.1s ease-in-out infinite; }
@keyframes voz-pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(23, 71, 162, .35); } 50% { box-shadow: 0 0 0 12px rgba(23, 71, 162, 0); } }
@media (prefers-reduced-motion: reduce) { .voz-resalte, .voz-asistente__llamar { animation: none; } }
@media (max-width: 600px) { .voz-asistente { right: 16px; bottom: 16px; } }

/* Mi cuenta · Resumen con voz (12-10-2026) */
.mi-cuenta__voz-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* Grupos de aprobación · qué revisa (13-10-2026) */
.grupo-revisa { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); margin-bottom: 12px; }
.grupo-revisa > strong { font-size: .85rem; }
.campo-check--apagado { opacity: .5; }

/* Buscador dentro de las listas desplegables (13-10-2026) */
.select-ui__buscar { position: sticky; top: -6px; z-index: 1; margin: -6px -6px 6px; padding: 6px; background: var(--surface); border-bottom: 1px solid var(--border); }
.select-ui__buscar[hidden] { display: none; }
/* Le gana a «.campo input:not(...)» (el desplegable suele ir dentro de un .campo). */
.select-ui .select-ui__menu .select-ui__buscar input.select-ui__buscar-input { font-weight: 500; border-color: var(--border); width: 100%; min-width: 180px; height: 34px; padding: 0 10px 0 32px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 10px center; color: var(--text); font: inherit; font-size: 12.5px; }
.select-ui .select-ui__menu .select-ui__buscar input.select-ui__buscar-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); background-color: var(--surface); }
.select-ui__buscar-input::-webkit-search-cancel-button { cursor: pointer; }

/* ==========================================================================
   Buscador del menú · Ctrl K (13-10-2026): paleta con vista previa
   ========================================================================== */
.buscador-velo { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; background: rgba(15, 23, 42, .32); }
.buscador-velo[hidden] { display: none; }
.buscador { display: flex; flex-direction: column; width: min(980px, 100%); max-height: min(640px, 84vh); overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: 0 24px 60px rgba(15, 23, 42, .22), 0 2px 8px rgba(15, 23, 42, .08); animation: menuEntrada .16s ease-out; }
.buscador__cabeza { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.buscador__lupa { color: var(--text-muted); font-size: 20px; line-height: 1; }
.buscador .buscador__cabeza input.buscador__input { flex: 1; min-width: 0; height: 36px; padding: 0; border: 0; outline: 0; box-shadow: none; background: transparent; color: var(--text); font: inherit; font-size: 16px; }
.buscador__input::-webkit-search-cancel-button { cursor: pointer; }
.buscador__esc { padding: 2px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--text-muted); font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
.buscador__filtros { display: flex; flex-wrap: wrap; gap: 6px; padding: 9px 16px; border-bottom: 1px solid var(--border); }
.buscador__filtro { padding: 4px 11px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); color: var(--text); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.buscador__filtro:hover { border-color: var(--brand-line); }
.buscador__filtro.on { border-color: var(--brand); background: var(--brand); color: var(--on-brand); }
.buscador__cuerpo { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }
.buscador__lista { overflow-y: auto; overscroll-behavior: contain; padding: 4px 8px 10px; border-right: 1px solid var(--border); }
.buscador__previa { overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px; background: var(--surface-2); }
.buscador__grupo { margin: 10px 6px 4px; color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.buscador__grupo--ir { color: var(--brand); }
.buscador__fila { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.buscador__fila.is-activa { background: var(--brand-tint); box-shadow: inset 0 0 0 1px var(--brand-line); }
.buscador__txt { flex: 1; min-width: 0; }
.buscador__txt > b { display: block; overflow: hidden; color: var(--text); font-size: 13.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.buscador__txt > span { display: block; overflow: hidden; color: var(--text-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.buscador__txt mark { padding: 0 1px; border-radius: 3px; background: #FFF1A6; color: #1E293B; }
.buscador__ava { display: grid; flex: 0 0 34px; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand-light); color: var(--brand-dark); font-size: 12px; font-weight: 800; }
.buscador__ava--g { flex-basis: 50px; width: 50px; height: 50px; font-size: 17px; }
.buscador__tipo { display: grid; flex: 0 0 34px; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--brand-tint); color: var(--brand); font-size: 15px; }
.buscador__tipo svg { width: 17px; height: 17px; }
.buscador__tipo--he { background: var(--warning-light); color: var(--warning-dark); }
.buscador__tipo--pe { background: var(--success-light); color: var(--success-dark); }
.buscador__ir { padding: 1px 7px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--text-muted); font-family: inherit; font-size: 11px; font-weight: 600; }
.buscador__chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.buscador__chip { display: inline-block; padding: 2px 8px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); color: var(--text-muted); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.buscador__chip--he { border-color: var(--warning-line); background: var(--warning-light); color: var(--warning-dark); }
.buscador__chip--pe { border-color: var(--brand-line); background: var(--brand-tint); color: var(--brand); }
.buscador__chip--va { border-color: var(--success-line); background: var(--success-light); color: var(--success-dark); }
.buscador__ayuda, .buscador__previa-vacia { margin: 8px 6px; color: var(--text-muted); font-size: 12.5px; line-height: 1.5; }
.buscador__cargando { padding: 10px; color: var(--text-muted); font-size: 12.5px; }
.buscador__vacio { display: grid; gap: 4px; padding: 26px 12px; color: var(--text-muted); font-size: 12.5px; text-align: center; }
.buscador__vacio strong { color: var(--text); font-size: 13.5px; }
.buscador__persona { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.buscador__persona > div > strong { display: block; color: var(--text); font-size: 16px; }
.buscador__persona > div > span { display: block; color: var(--text-muted); font-size: 12.5px; }
.buscador__kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.buscador__kpi { padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); }
.buscador__kpi b { display: block; color: var(--text); font-size: 20px; line-height: 1.15; }
.buscador__kpi span { color: var(--text-muted); font-size: 11.5px; }
.buscador__kpi--he b { color: var(--warning-dark); }
.buscador__kpi--va b { color: var(--success-dark); }
.buscador__kpi--pe b { color: var(--brand); }
.buscador__sec { margin: 14px 0 6px; color: var(--text); font-size: 12.5px; font-weight: 800; }
.buscador__movs { margin: 0; padding: 0; list-style: none; }
.buscador__movs li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 12.5px; }
.buscador__movs li:last-child { border-bottom: 0; }
.buscador__movs a { color: var(--brand); text-decoration: none; }
.buscador__movs a:hover { text-decoration: underline; }
.buscador__acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.buscador__previa-simple { display: grid; justify-items: start; gap: 6px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.buscador__previa-simple strong { color: var(--text); font-size: 15px; }
.buscador__previa-simple span { color: var(--text-muted); font-size: 12.5px; }
.buscador__previa-tip { margin-top: 4px; font-style: italic; }
.buscador__volver { display: none; margin: 0 0 10px; padding: 0; border: 0; background: none; color: var(--brand); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.buscador__pie { display: flex; flex-wrap: wrap; gap: 14px; padding: 8px 16px; border-top: 1px solid var(--border); background: var(--surface-2); color: var(--text-muted); font-size: 11.5px; }
.buscador__pie kbd { padding: 0 6px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); font-family: inherit; font-size: 10.5px; font-weight: 600; }
body.buscador-abierto { overflow: hidden; }
@media (max-width: 760px) {
  .buscador-velo { padding: 10px; }
  .buscador { max-height: calc(100dvh - 20px); }
  .buscador__cuerpo { grid-template-columns: 1fr; }
  .buscador__lista { border-right: 0; }
  .buscador__previa { display: none; }
  .buscador--previa .buscador__lista { display: none; }
  .buscador--previa .buscador__previa { display: block; }
  .buscador__volver { display: inline-block; }
  .buscador__pie { display: none; }
  .buscador__chips { display: none; }
}

/* Grupos de aprobación · cuáles horas extras (13-10-2026) */
.grupo-revisa__sub { display: grid; gap: 6px; margin: -2px 0 2px 26px; padding: 8px 10px; border-left: 2px solid var(--brand-line); }
.grupo-revisa__sub[hidden] { display: none; }

/* Integraciones · tokens de la API (13-10-2026) */
.integraciones__ayuda { margin: 0; padding-left: 18px; color: var(--text); font-size: 13px; line-height: 1.6; }
.integraciones__ayuda b { color: var(--text); }
.integraciones__sub { display: block; color: var(--text-muted); font-size: 12px; }
.integraciones__acciones { display: flex; flex-wrap: wrap; gap: 6px; }
.integraciones__token { display: grid; gap: 10px; }
.integraciones__valor { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--brand-line); border-radius: 10px; background: var(--brand-tint); }
.integraciones__valor code { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--brand-dark); font-size: 13px; font-weight: 700; }
.integraciones__ejemplo { margin: 0; padding: 10px 12px; overflow-x: auto; border-radius: 10px; background: var(--surface-2); color: var(--text); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.integraciones__log { margin: 0; padding: 0; list-style: none; }
.integraciones__log li { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 8px 0; border-bottom: 1px dashed var(--border); font-size: 12.5px; }
.integraciones__log li small { grid-column: 2; color: var(--text-muted); }
.integraciones__log-ruta { overflow-wrap: anywhere; font-family: ui-monospace, Consolas, monospace; }

/* Configuración HE · áreas sin marca los fines de semana (13-10-2026) */
.he-config__areas { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; }

/* Registro de HE · «Refrescar» el turno de Talana (13-10-2026) */
.jornada-card__lado { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.jornada-card__cab:has(.jornada-card__lado) { flex-wrap: wrap; align-items: center; row-gap: 4px; }
.jornada-card__cab .jornada-card__rotulo, .jornada-card__lado .jornada-card__fuente { white-space: nowrap; }
.jornada-card__refrescar { padding: 2px 9px; border: 1px solid var(--brand-line); border-radius: 99px; background: var(--brand-tint); color: var(--brand); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.jornada-card__refrescar:hover:not(:disabled) { background: var(--brand-light); }
.jornada-card__refrescar:disabled { opacity: .6; cursor: progress; }
.jornada-card__refrescar[hidden] { display: none; }

/* Bandeja RR.HH. · aprobar en lote (13-10-2026). Reusa .apr-lote de /aprobaciones. */
.he-rrhh__lote-reposo { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 2px; }
.he-rrhh__lote-reposo .apr-lote__info span { font-size: 13px; }


/* ---------- Proyecciones · semáforo de vacaciones con probabilidad (13-10-2026) ---------- */
.semv-intro { margin: 0 0 10px; max-width: 920px; color: var(--text-soft); font-size: 13px; }
.semv-intro b { color: var(--text); }
.semv-enlace { padding: 0; border: 0; background: none; color: var(--brand); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.semv-barra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 18px; margin-bottom: 10px; }
.semv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.semv-leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--text-muted); font-size: 12px; }
.semv-leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.semv-muestra { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.semv--baja { background: var(--success-light); color: var(--success-dark); }
.semv--media { background: var(--warning-light); color: var(--warning-dark); }
.semv--alta { background: var(--danger-light); color: var(--danger-dark); }
.semv--seguro { background: var(--brand-light); color: var(--brand); }
.semv-scroll { overflow-x: auto; }
.semv-tabla { width: 100%; min-width: 820px; border-collapse: separate; border-spacing: 3px; font-variant-numeric: tabular-nums; }
.semv-tabla thead th { padding: 4px 2px; color: var(--text-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; text-align: center; }
.semv-tabla thead th:first-child, .semv-suc { text-align: left; white-space: nowrap; padding-right: 10px; }
.semv-suc { font-weight: 400; }
.semv-suc b { color: var(--text); }
.semv-suc small { color: var(--text-muted); font-size: 11.5px; }
.semv-tabla td { padding: 0; }
.semv-celda { display: block; width: 100%; min-width: 50px; padding: 7px 0; border: 1px solid transparent; border-radius: 6px; font: inherit; font-size: 12px; font-weight: 700; text-align: center; cursor: pointer; }
.semv-celda:hover { border-color: currentColor; }
.semv-celda:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.semv-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }

.semv-det-cab { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius-md); }
.semv-det-num { flex: none; font-size: 32px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.semv-det-frase { color: var(--text); font-size: 14px; line-height: 1.45; }
.semv-det-frase b { color: inherit; }
.semv-det-cab.semv--alta .semv-det-frase b { color: var(--danger-dark); }
.semv-det-cab.semv--media .semv-det-frase b { color: var(--warning-dark); }
.semv-det-cab.semv--baja .semv-det-frase b { color: var(--success-dark); }
.semv-det-explica { margin: 12px 0 0; color: var(--text-soft); font-size: 13px; }
.semv-det-bloque { margin-top: 18px; }
.semv-det-bloque h3 { margin: 0 0 8px; font-size: 14px; color: var(--text); }
.semv-pares { margin: 0; padding: 0; list-style: none; }
.semv-pares li { display: grid; grid-template-columns: minmax(0, 1fr) auto 58px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.semv-pares__quien { min-width: 0; }
.semv-pares__cuenta { color: var(--text-muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.semv-pares__p { text-align: right; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.semv-personas { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.semv-persona { min-width: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.semv-persona__fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.semv-persona__fila > :first-child { min-width: 0; flex: 1; }
.semv-persona__fila > :first-child * { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.semv-pct { flex: none; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.semv-pasos { overflow-wrap: anywhere; margin: 8px 0 0; padding: 0 0 0 18px; display: grid; gap: 4px; color: var(--text-soft); font-size: 12.5px; }
.semv-pasos li { padding-left: 2px; }
.semv-pasos li span { margin-right: 6px; }
.semv-pasos li b { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.semv-modelo { margin: 6px 0 12px; padding-left: 20px; display: grid; gap: 6px; font-size: 13.5px; }
.semv-modelo-tabla { width: 100%; border-collapse: collapse; font-size: 13px; margin: 6px 0 10px; font-variant-numeric: tabular-nums; }
.semv-modelo-tabla th { text-align: left; color: var(--text-muted); font-size: 11.5px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.semv-modelo-tabla td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-transform: capitalize; }
@media (max-width: 600px) {
  .semv-pares li { grid-template-columns: minmax(0, 1fr) 52px; }
  .semv-pares__cuenta { grid-column: 1 / -1; grid-row: 2; white-space: normal; }
  .semv-det-num { font-size: 26px; }
}

/* ---------- Módulos: encender y apagar partes de la intranet (14-10-2026) ---------- */
.modulos__ayuda { margin: 0 0 14px; max-width: 860px; color: var(--text-soft); font-size: 13.5px; }
.modulos__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px; }
.modulos__item { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.modulos__item--apagado { background: var(--zebra); border-style: dashed; }
.modulos__textos { min-width: 0; }
.modulos__cab { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.modulos__nombre { margin: 0; font-size: 15px; color: var(--text); }
.modulos__para { margin: 0 0 6px; color: var(--text); font-size: 13.5px; }
.modulos__efecto { margin: 0; color: var(--text-soft); font-size: 12.5px; }
.modulos__efecto b { color: var(--text); }
.modulos__quien { margin: 6px 0 0; color: var(--text-muted); font-size: 12px; }
.modulos__item .acceso-sw { flex: none; margin-top: 2px; }

/* Vistas Bandeja/Persona/Día: lo que va junto al buscador fijo se reparte como antes (14-10-2026). */
.vl-filtros__resto { display: contents; }

/* ---------- Multiselector con etiquetas (14-10-2026) ---------- */
.msel { position: relative; min-width: 0; }
.msel__caja { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 42px; padding: 5px 34px 5px 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.msel__caja::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: translateY(-70%) rotate(45deg); }
.msel.abierto .msel__caja, .msel__caja:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); outline: none; }
.msel__vacio { color: var(--text-muted); padding-left: 4px; font-size: 13.5px; }
.msel__chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 4px 3px 9px; border-radius: var(--radius-pill); background: var(--brand-light); color: var(--brand-dark); font-size: 12.5px; font-weight: 600; }
.msel__chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msel__chip--mas { background: var(--zebra); color: var(--text-muted); padding-right: 9px; }
.msel__quitar { border: 0; background: none; color: inherit; font-size: 15px; line-height: 1; padding: 0 5px; border-radius: var(--radius-pill); cursor: pointer; }
.msel__quitar:hover { background: color-mix(in srgb, var(--brand) 18%, transparent); }
.msel__menu { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: 0 18px 40px rgba(15, 40, 80, .18); overflow: hidden; }
.msel__buscar { width: 100%; border: 0 !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; padding: 11px 12px !important; font: inherit; background: var(--surface); color: var(--text); outline: none; box-shadow: none !important; }
.msel__acciones { display: flex; justify-content: space-between; padding: 6px 12px; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.msel__acciones button { border: 0; background: none; color: var(--brand); font: inherit; font-weight: 700; cursor: pointer; padding: 2px 0; }
.msel__lista { max-height: 240px; overflow-y: auto; padding: 4px; }
.msel__grupo { padding: 8px 10px 4px; color: var(--text-muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.msel__op { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px; color: var(--text); }
.msel__op:hover { background: var(--brand-tint); }
.msel__op input { accent-color: var(--brand); width: 16px; height: 16px; flex: none; }
.msel__op-texto { min-width: 0; }
.msel__op-texto small { display: block; color: var(--text-muted); font-size: 11.5px; overflow-wrap: anywhere; }
.msel__nada { padding: 14px; color: var(--text-muted); text-align: center; font-size: 13px; }

/* ---------- Ventana «Descargar Excel» de solicitudes (14-10-2026) ---------- */
.descsol__intro { margin: 0 0 12px; color: var(--text-soft); font-size: 13.5px; }
.descsol__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.descsol__campos { display: grid; gap: 14px; min-width: 0; }
.descsol__campo { margin: 0; min-width: 0; }
.descsol__dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.descsol__segmento { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--zebra); }
.descsol__segmento button { border: 0; background: none; padding: 6px 12px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.descsol__segmento button.on { background: var(--surface); color: var(--brand-dark); box-shadow: 0 1px 3px rgba(15, 40, 80, .14); }
.descsol__estados { display: flex; flex-wrap: wrap; gap: 6px; }
.descsol__estado { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text-muted); cursor: pointer; }
.descsol__estado i { width: 8px; height: 8px; border-radius: 99px; background: currentColor; opacity: .35; }
.descsol__estado.on i { opacity: 1; }
.descsol__estado--pend.on { background: var(--warning-light); color: var(--warning-dark); border-color: transparent; }
.descsol__estado--pre.on { background: var(--info-light); color: var(--info-dark); border-color: transparent; }
.descsol__estado--apr.on { background: var(--success-light); color: var(--success-dark); border-color: transparent; }
.descsol__estado--rec.on { background: var(--danger-light); color: var(--danger-dark); border-color: transparent; }
.descsol__estado--anu.on { background: var(--zebra); color: var(--text); border-color: var(--border-strong); }
.descsol__resumen { position: sticky; top: 0; display: grid; gap: 8px; align-content: start; padding: 16px; border: 1px solid var(--brand-line); border-radius: var(--radius-md); background: var(--brand-tint); min-width: 0; }
.descsol__num { font-size: 30px; font-weight: 800; color: var(--brand-dark); line-height: 1; font-variant-numeric: tabular-nums; }
.descsol__num-rot { margin: -4px 0 4px; color: var(--text-muted); font-size: 12.5px; }
.descsol__lineas { display: grid; gap: 6px; margin: 0; font-size: 13px; }
.descsol__lineas > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; }
.descsol__lineas dt { color: var(--text-muted); }
.descsol__lineas dd { margin: 0; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.descsol__cols-rot { margin-top: 8px; }
.descsol__cols { display: flex; flex-wrap: wrap; gap: 6px; }
.descsol__col { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 12.5px; cursor: pointer; }
.descsol__col input { accent-color: var(--brand); }
.descsol__formato { margin: 0; }
@media (max-width: 760px) {
  .descsol__grid, .descsol__dos { grid-template-columns: minmax(0, 1fr); }
  .descsol__resumen { position: static; }
}
.descsol__dos--uno { grid-template-columns: minmax(0, 1fr); }

/* ---------- Turno y marcas de una hora extra (16-10-2026) ---------- */
.turnos-he__valor { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.turnos-he__marcas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.turnos-he__marca { padding: 3px 9px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.turnos-he__checks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.turnos-he__nota { margin: 10px 0 0; font-size: 11.5px; color: var(--text-muted); }
.turnos-he__historial { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.turnos-he__historial > summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--text-soft); }
.turnos-he__lista { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.turnos-he__item { padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.turnos-he__item-cab { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text-soft); }
.turnos-he__item-cab b { color: var(--text); }
.turnos-he__item-cuerpo { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; font-size: 12.5px; color: var(--text); }
/* Sincronizar con Talana en lote (16-10-2026) */
.sinc-he__check { display: flex; align-items: center; gap: 8px; margin: 4px 0 14px; font-size: 13px; color: var(--text); cursor: pointer; }
.sinc-he__check input { width: 16px; height: 16px; accent-color: var(--brand); }
.sinc-he__check--apagado { opacity: .45; cursor: default; }
.sinc-he__avance { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.sinc-he__barra { height: 8px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; }
.sinc-he__relleno { height: 100%; width: 0; background: var(--brand); transition: width .3s ease; }
.sinc-he__texto { margin: 0; font-size: 12.5px; color: var(--text-soft); }
.sinc-he__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow: auto; }
.sinc-he__item { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 12.5px; }
.sinc-he__item b { color: var(--text); }
/* El valor con insignia va dentro de <strong>: que no lo achique la regla de rótulos (span). */
.ficha-lado__dato .turnos-he__valor { font-size: inherit; color: inherit; }
.ficha-lado__dato .turnos-he__valor .badge { font-size: 9.5px; }
.ficha-lado__dato .turnos-he__valor .badge--pendiente { color: var(--warning-dark); }
/* ==========================================================================
   Ventana de carga masiva de horas extras (modules/carga-masiva-he.js),
   19-10-2026. Diseño «A · panel de corrección siempre visible», colores
   «Media»: verde y rojo con cuerpo pero sin gritar. Va sobre el cajón
   centrado (crearCajon) y solo lo ajusta con .carga-he-modal.
   ========================================================================== */
.carga-he-modal {
  --cm-ok: #2E9E68; --cm-ok-tx: #1F7A4F; --cm-ok-bg: #E2F4EA; --cm-ok-line: #BFE5D0;
  --cm-bad: #DC5D57; --cm-bad-tx: #B53D38; --cm-bad-bg: #FCE6E4; --cm-bad-line: #F4C5C1;
  --cm-old: #A8B1C0; --cm-old-tx: #5F6A7E; --cm-old-bg: #EEF1F5;
  --cm-noche-tx: #5A49AE; --cm-noche-bg: #EFECFB;
}
.carga-he-modal .cajon__cuerpo { padding: 0; gap: 0; }
.carga-he-modal--amplio .cajon__cuerpo { overflow: hidden; }
.cm-ic { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.carga-he-modal .btn .cm-ic { width: 15px; height: 15px; margin-right: 6px; }
.carga-he-modal .btn.cm-icono { width: 32px; padding: 0; justify-content: center; }
.carga-he-modal .btn.cm-icono .cm-ic { margin: 0; }
.cm-gira { animation: cm-gira 1s linear infinite; }
@keyframes cm-gira { to { transform: rotate(360deg); } }

/* Cabecera: pasos y el archivo */
.cm-cab { display: flex; align-items: center; gap: 14px; padding: 4px 22px 14px; flex-wrap: wrap; border-bottom: 1px solid var(--border); flex: none; }
.cm-pasos { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; flex: 1; min-width: 240px; }
.cm-paso { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.cm-paso i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; border: 1.5px solid var(--border-strong); }
.cm-paso.ok { color: var(--text); }
.cm-paso.ok i { background: var(--brand); border-color: var(--brand); color: #fff; }
.cm-paso.act { color: var(--brand); }
.cm-paso.act i { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.cm-paso-sep { flex: 1; min-width: 12px; height: 1.5px; background: var(--border-strong); }
.cm-pildora { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; padding: 3px 10px; border-radius: 999px; background: var(--cm-old-bg); color: var(--cm-old-tx); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-pildora .cm-ic { width: 13px; height: 13px; }

/* Zona de contenido de los pasos cortos */
.cm-zona { padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.cm-drop { font: inherit; color: var(--text); border: 1.5px dashed var(--brand-line); background: var(--brand-tint); border-radius: 16px; padding: 34px 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; cursor: pointer; width: 100%; }
.cm-drop .cm-ic { width: 30px; height: 30px; color: var(--brand); }
.cm-drop b { font-size: 15px; }
.cm-drop small { color: var(--text-soft); }
.cm-drop:hover, .cm-drop--sobre { border-color: var(--brand); background: var(--brand-light); }
.cm-elegido { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); background: var(--surface-2); border-radius: 14px; padding: 12px 14px; }
.cm-elegido > div { flex: 1; min-width: 0; }
.cm-elegido b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-elegido small { color: var(--text-muted); }
.cm-tile { width: 40px; height: 40px; border-radius: 12px; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; flex: none; }
.cm-tile .cm-ic { width: 20px; height: 20px; }
.cm-linea-plantilla { margin: 0; text-align: center; color: var(--text-soft); font-size: 13px; }
.cm-enlace { display: inline-flex; align-items: center; gap: 4px; color: var(--brand); font-weight: 600; text-decoration: none; }
.cm-enlace:hover { text-decoration: underline; }
.cm-enlace .cm-ic { width: 14px; height: 14px; }

/* Revisión: tabla a la izquierda, panel de corrección fijo a la derecha */
.cm-a { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) 340px; height: min(560px, calc(100dvh - 230px)); min-height: 360px; }
.cm-a-izq { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cm-barra { display: flex; align-items: center; gap: 12px; padding: 12px 18px; flex-wrap: wrap; border-bottom: 1px solid var(--border); flex: none; }
.cm-barra .cm-track { flex: 1; min-width: 100px; }
.cm-a-tabla { flex: 1; overflow: auto; }
.cm-a-der { border-left: 1px solid var(--border); background: var(--surface-2); display: flex; flex-direction: column; min-height: 0; }
.cm-der-cab { padding: 16px 18px 10px; display: flex; align-items: center; gap: 10px; flex: none; }
.cm-der-cab b { display: block; font-size: 14px; }
.cm-der-cuerpo { padding: 4px 18px 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; flex: 1; }
.cm-der-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 18px; border-top: 1px solid var(--border); flex: none; }
.cm-flechas { display: flex; gap: 6px; }
.cm-puntos { display: flex; gap: 4px; flex-wrap: wrap; max-width: 150px; }
.cm-puntos i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
.cm-puntos i.ok { background: var(--cm-ok); }
.cm-puntos i.x { background: var(--cm-old); }
.cm-puntos i.act { background: var(--cm-bad); box-shadow: 0 0 0 3px var(--cm-bad-bg); }
.cm-centro { margin: auto; text-align: center; color: var(--text-soft); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; max-width: 300px; }
.cm-centro b { color: var(--text); }
.cm-centro--ancho { max-width: 440px; width: 100%; }
.cm-circ { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.cm-circ .cm-ic { width: 24px; height: 24px; }
.cm-circ--ok { background: var(--cm-ok-bg); color: var(--cm-ok-tx); }
.cm-circ--brand { background: var(--brand-tint); color: var(--brand); }
.cm-etapas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; text-align: left; width: 100%; }
.cm-etapas li { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--text-muted); }
.cm-etapas li.ok { color: var(--cm-ok-tx); }
.cm-etapas li.act { color: var(--text); font-weight: 600; }
.cm-etapas .cm-ic { width: 14px; height: 14px; }

/* Barra de avance y filtros */
.cm-track { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; display: flex; }
.cm-track--alto { height: 10px; width: 100%; }
.cm-track i { display: block; height: 100%; transition: width .4s ease; }
.cm-t-ok { background: var(--cm-ok); }
.cm-t-ya { background: var(--cm-old); }
.cm-t-bad { background: var(--cm-bad); }
.cm-seg { display: inline-flex; background: var(--bg); border-radius: 11px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.cm-seg button { font: inherit; font-size: 12.5px; font-weight: 600; border: 0; background: transparent; padding: 6px 12px; border-radius: 9px; color: var(--text-soft); cursor: pointer; display: inline-flex; gap: 7px; align-items: center; }
.cm-seg button b { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-muted); }
.cm-seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(15, 27, 45, .12); }
.cm-seg button[aria-pressed="true"] b { color: var(--text); }
.cm-seg .cm-seg-e b { color: var(--cm-bad-tx) !important; }

/* Tabla */
.cm-tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.cm-tabla th { position: sticky; top: 0; background: var(--surface); z-index: 1; text-align: left; font-weight: 600; font-size: 11.5px; color: var(--text-muted); padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.cm-tabla td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cm-tabla tr.cm-clic { cursor: pointer; }
.cm-tabla tr.cm-clic:hover td { background: var(--surface-2); }
.cm-tabla tr.cm-sel td { background: var(--brand-tint); }
.cm-tabla tr.cm-nueva td { animation: cm-entra .5s ease; }
@keyframes cm-entra { from { background: var(--brand-tint); } }
.cm-num { color: var(--text-muted); font-variant-numeric: tabular-nums; width: 1%; font-size: 12px; }
.cm-nw { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cm-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; white-space: nowrap; }
.cm-sub { display: block; color: var(--text-muted); font-size: 12px; }
.cm-motivo { max-width: 280px; white-space: normal; }
.cm-2l { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cm-motivo-fuera { min-width: 220px; }
.cm-sub-td { color: var(--text-soft); font-size: 12.5px; }
.cm-motivo-fuera { color: var(--cm-bad-tx); font-weight: 600; font-size: 12.5px; }
.cm-malo { color: var(--cm-bad-tx); text-decoration: underline wavy var(--cm-bad); text-underline-offset: 3px; }
.cm-persona { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cm-persona b { display: block; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.cm-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; flex: none; background: var(--brand-tint); color: var(--brand); }
.cm-av--e { background: var(--cm-bad-bg); color: var(--cm-bad-tx); }
.cm-estado { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.cm-estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.cm-e-v { color: var(--cm-ok-tx); }
.cm-e-e { color: var(--cm-bad-tx); }
.cm-e-r { color: var(--cm-old-tx); }
.cm-e-x { color: var(--text-muted); text-decoration: line-through; }
.cm-noche { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--cm-noche-tx); background: var(--cm-noche-bg); padding: 1px 7px; border-radius: 999px; margin-left: 6px; }
.cm-noche .cm-ic { width: 11px; height: 11px; }
.cm-vacio { margin: 0; padding: 28px 18px; text-align: center; color: var(--text-muted); font-size: 13px; }
.cm-pill { display: inline-flex; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.cm-pill--azul { background: var(--brand-tint); color: var(--brand); }
.cm-pill--ok { background: var(--cm-ok-bg); color: var(--cm-ok-tx); }
.cm-pill--gris { background: var(--cm-old-bg); color: var(--cm-old-tx); }

/* Panel de corrección */
.cm-problema { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; padding: 12px; background: var(--cm-bad-bg); color: var(--cm-bad-tx); }
.cm-problema b { display: block; font-size: 13.5px; }
.cm-problema small { display: block; color: var(--text-soft); font-size: 12.5px; margin-top: 2px; }
.cm-problema .cm-ic { margin-top: 2px; }
.cm-form { display: flex; flex-direction: column; gap: 12px; }
.cm-campo { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-soft); }
.cm-campo input[type="text"], .cm-campo textarea, .cm-buscar { font: inherit; font-size: 14px; width: 100%; padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text); font-variant-numeric: tabular-nums; }
.cm-campo textarea { min-height: 84px; resize: vertical; }
.cm-campo .cm-mal { border-color: var(--cm-bad); box-shadow: 0 0 0 3px var(--cm-bad-bg); }
.cm-dos { display: flex; gap: 10px; flex-wrap: wrap; }
.cm-dos > .cm-campo { flex: 1; min-width: 110px; }
.cm-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.carga-he-modal .cm-quitar { color: var(--cm-bad-tx); }
.cm-sugerencia { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; background: var(--brand-tint); border: 1px solid var(--brand-line); border-radius: 10px; padding: 8px 10px; color: var(--brand-dark); }
.cm-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 220px; overflow-y: auto; }
.cm-chip { font: inherit; font-size: 12.5px; padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); cursor: pointer; color: var(--text-soft); text-align: left; }
.cm-chip:hover, .cm-chip--sel { border-color: var(--brand); color: var(--brand); }
.cm-lista { display: flex; flex-direction: column; gap: 2px; max-height: 200px; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 4px; }
.cm-lista-op { font: inherit; text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; color: var(--text); }
.cm-lista-op:hover { background: var(--surface-2); }
.cm-lista-op small { color: var(--text-muted); }

/* Pie */
.carga-he-modal .cm-nota { display: inline-flex; align-items: center; gap: 6px; color: var(--text-soft); font-size: 12.5px; }
.carga-he-modal .cm-nota--e { color: var(--cm-bad-tx); }
.carga-he-modal .cm-nota--ok { color: var(--cm-ok-tx); }

/* Confirmar y listo */
.cm-tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cm-tarjeta { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.cm-tarjeta small { color: var(--text-soft); font-size: 12px; }
.cm-tarjeta b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.cm-tarjeta--ok { background: var(--cm-ok-bg); border-color: var(--cm-ok-line); }
.cm-tarjeta--ok b { color: var(--cm-ok-tx); }
.cm-resumen { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.cm-resumen-fila { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 13px; }
.cm-resumen-fila:first-child { border-top: 0; }
.cm-resumen-fila b { margin-left: auto; font-variant-numeric: tabular-nums; }
.cm-info { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; padding: 12px; background: var(--brand-tint); color: var(--brand-dark); font-size: 13px; }
.cm-info .cm-ic { margin-top: 2px; }
.carga-he-modal--amplio .cm-zona { height: min(560px, calc(100dvh - 230px)); }
.cm-listo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cm-listo .cm-circ { width: 48px; height: 48px; }
.cm-listo > div { flex: 1; min-width: 220px; }
.cm-listo h3 { margin: 0; font-size: 18px; letter-spacing: -.02em; color: var(--text); }
.cm-listo p { margin: 2px 0 0; color: var(--text-soft); font-size: 13px; }
.cm-listo-tabla { border: 1px solid var(--border); border-radius: 12px; overflow: auto; flex: 1; min-height: 120px; }

@media (max-width: 880px) {
  .cm-a { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
  .carga-he-modal--amplio .cajon__cuerpo { overflow-y: auto; }
  .cm-a-tabla { max-height: 46vh; }
  .cm-a-der { border-left: 0; border-top: 1px solid var(--border); }
  .carga-he-modal--amplio .cm-zona { height: auto; }
  .carga-he-modal .cm-zona, .cm-der-cuerpo { flex: none; }
  .cm-listo-tabla { max-height: 50vh; }
  .cm-tarjetas { grid-template-columns: minmax(0, 1fr); }
  .cm-pildora { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cm-gira { animation: none; }
  .cm-tabla tr.cm-nueva td { animation: none; }
  .cm-track i { transition: none; }
}

/* ==========================================================================
   Áreas (/areas, src/assets/js/pages/areas.js), 19-10-2026. Tarjetas con
   semáforo y el paso a paso para configurar un área. Colores «Media».
   ========================================================================== */
.ar-intro { margin: 0 0 14px; color: var(--text-soft); font-size: 13px; max-width: 80ch; }
.ar-grilla { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.ar-tarjeta { border: 1px solid var(--border); border-radius: 16px; padding: 16px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.ar-tarjeta--prep { border-style: dashed; }
.ar-cab { display: flex; align-items: center; gap: 10px; }
.ar-cab b { display: block; font-size: 15px; color: var(--text); }
.ar-cab small { color: var(--text-muted); font-size: 12px; }
.ar-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--brand-tint); color: var(--brand); flex: none; }
.ar-mods, .ar-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ar-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--brand-tint); color: var(--brand); border: 1px solid transparent; font-family: inherit; }
.ar-chip--sel { background: var(--surface); border-color: var(--brand-line); color: var(--brand-dark); }
.ar-chip--op { cursor: pointer; background: var(--surface); border-color: var(--border-strong); color: var(--text-soft); font-weight: 500; padding: 5px 12px; font-size: 12.5px; }
.ar-chip--op:hover, .ar-chip--op[aria-pressed="true"] { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
.ar-x { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 0 0 2px; }
.ar-semaforo { display: flex; flex-direction: column; gap: 5px; }
.ar-sf { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--text-soft); }
.ar-sf::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2E9E68; flex: none; }
.ar-sf--w::before { background: #E0A43B; }
.ar-sf--x::before { background: #DC5D57; }
.ar-sf--n::before { background: #A8B1C0; }
.ar-extra { display: flex; flex-direction: column; gap: 2px; }
.ar-extra small { color: var(--text-muted); font-size: 12px; }
.ar-acc { display: flex; gap: 6px; margin-top: auto; }
.ar-nueva { font: inherit; border: 1.5px dashed var(--brand-line); background: var(--brand-tint); border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 16px; cursor: pointer; color: var(--brand-dark); min-height: 200px; }
.ar-nueva b { font-size: 15px; }
.ar-nueva span { font-size: 12.5px; color: var(--text-soft); }

/* El paso a paso, sobre el cajón amplio */
.ar-asistente .cajon__cuerpo { padding: 0; gap: 0; }
.ar-pasos { display: flex; align-items: center; gap: 6px; padding: 12px 22px; margin: 0; list-style: none; border-bottom: 1px solid var(--border); overflow-x: auto; flex: none; }
.ar-pasos > li:not(.ar-sep) { flex: none; }
.ar-sep { flex: 1; min-width: 12px; height: 1.5px; background: var(--border-strong); }
.ar-paso { font: inherit; border: 0; background: transparent; display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; cursor: pointer; padding: 4px 2px; }
.ar-paso i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; border: 1.5px solid var(--border-strong); }
.ar-paso.ok { color: var(--text); }
.ar-paso.ok i { background: var(--brand); border-color: var(--brand); color: #fff; }
.ar-paso.act { color: var(--brand); }
.ar-paso.act i { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.ar-vista { flex: 1; min-height: 0; overflow-y: auto; }
.ar-vista > .cargando, .ar-vista > .aviso { margin: 20px 22px; }
.ar-cols { display: grid; grid-template-columns: minmax(0, 1fr) 290px; min-height: 100%; }
.ar-form { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ar-ayuda { border-left: 1px solid var(--border); background: var(--surface-2); padding: 18px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--text-soft); }
.ar-ayuda b { color: var(--text); }
.ar-ayuda p { margin: 0; }
.ar-antes { border: 1px dashed var(--border-strong); border-radius: 12px; padding: 10px 12px; background: var(--surface); font-size: 12.5px; }
.ar-antes strong { display: block; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px; }
.ar-campo { display: flex; flex-direction: column; gap: 7px; }
.ar-rot { font-size: 12.5px; font-weight: 700; color: var(--text-soft); }
.ar-nota { color: var(--text-muted); font-size: 12px; }
.ar-input { font: inherit; font-size: 14px; width: 100%; padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--text); }
.ar-input--sm { font-size: 13px; padding: 7px 10px; }
.ar-ops { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ar-op { font: inherit; text-align: left; border: 1.5px solid var(--border-strong); border-radius: 14px; padding: 12px; background: var(--surface); cursor: pointer; display: flex; flex-direction: column; gap: 3px; color: var(--text); }
.ar-op small { color: var(--text-soft); font-size: 12.5px; }
.ar-op[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-tint); box-shadow: 0 0 0 3px var(--brand-tint); }
.ar-op[aria-pressed="true"] b::before { content: "✓ "; color: var(--brand); }
.ar-estado { font-size: 12.5px; color: var(--text-soft); }
.ar-sel { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border); border-radius: 14px; padding: 12px; background: var(--surface-2); }
.ar-lista { display: flex; flex-direction: column; gap: 2px; max-height: 200px; overflow-y: auto; }
.ar-lista-op { font: inherit; text-align: left; border: 0; background: transparent; padding: 7px 10px; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; color: var(--text); font-size: 13px; }
.ar-lista-op:hover { background: var(--surface); }
.ar-lista-op small { color: var(--text-muted); white-space: nowrap; }
.ar-personas { display: flex; flex-direction: column; gap: 6px; }
.ar-persona { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.ar-persona > div { flex: 1; min-width: 0; }
.ar-persona b { display: block; font-size: 13px; color: var(--text); }
.ar-persona small { color: var(--text-muted); font-size: 12px; }
.ar-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; background: var(--brand-tint); color: var(--brand); flex: none; }
.ar-info { border-radius: 12px; padding: 10px 12px; background: var(--brand-tint); color: var(--brand-dark); font-size: 13px; }
.ar-info--w { background: #FDF1DC; color: #9A5B0C; }
/* Jefaturas: dos cuadros y arrastrar */
.ar-dnd { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ar-col { border: 1px solid var(--border); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); }
.ar-col-cab { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--brand-tint); }
.ar-col--sin .ar-col-cab { background: #FDF1DC; }
.ar-col-cab > div { flex: 1; min-width: 0; }
.ar-col-cab b { display: block; font-size: 13.5px; color: var(--text); }
.ar-col-cab small { color: var(--text-soft); font-size: 12px; }
.ar-cuenta { font-weight: 700; font-size: 12.5px; background: var(--surface); border-radius: 999px; padding: 1px 9px; }
.ar-zona { padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 160px; max-height: 340px; overflow-y: auto; transition: background .15s; }
.ar-zona.sobre { background: var(--brand-tint); outline: 2px dashed var(--brand-line); outline-offset: -4px; }
.ar-it { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: grab; }
.ar-it.arrastrando { opacity: .4; }
.ar-it > div { flex: 1; min-width: 0; }
.ar-it b { display: block; font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-it small { color: var(--text-muted); font-size: 11.5px; }
.ar-num { color: var(--text-muted); font-size: 12px; min-width: 22px; text-align: right; }
.ar-asistente .ar-mover { padding: 0 9px; height: 26px; font-size: 11.5px; }
.ar-vacio { margin: auto; text-align: center; color: var(--text-muted); font-size: 12.5px; padding: 16px; }
.ar-regla { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--border); border-radius: 14px; padding: 12px; background: var(--surface-2); }
.ar-regla-btn { align-self: flex-start; }
.ar-interr { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ar-interr b { display: block; font-size: 13.5px; color: var(--text); }
.ar-interr small { color: var(--text-soft); font-size: 12.5px; }
.ar-switch { width: 40px; height: 22px; border-radius: 999px; background: var(--border-strong); position: relative; border: 0; cursor: pointer; flex: none; }
.ar-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.ar-switch[aria-checked="true"] { background: var(--brand); }
.ar-switch[aria-checked="true"]::after { left: 21px; }
.ar-busca-cuenta { display: flex; flex-direction: column; gap: 4px; min-width: 240px; }
/* Resumen */
.ar-check { display: flex; flex-direction: column; gap: 6px; }
.ar-ck { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; }
.ar-ck > div { flex: 1; min-width: 0; }
.ar-ck b { display: block; font-size: 13.5px; color: var(--text); }
.ar-ck small { display: block; color: var(--text-soft); font-size: 12.5px; }
.ar-d { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: none; }
.ar-ck--ok .ar-d { background: #E2F4EA; color: #1F7A4F; }
.ar-ck--w .ar-d { background: #FDF1DC; color: #9A5B0C; }
.ar-ck--n .ar-d { background: #EEF1F5; color: #5F6A7E; }
@media (max-width: 860px) {
  .ar-cols { grid-template-columns: minmax(0, 1fr); }
  .ar-ayuda { border-left: 0; border-top: 1px solid var(--border); }
  .ar-dnd { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .ar-switch::after, .ar-zona { transition: none; } }
.ar-lista-op--off { cursor: default; color: var(--text-muted); }
.ar-lista-op--off:hover { background: transparent; }
.ar-enlace { color: var(--brand); font-weight: 600; }

/* Quién registra (20-10-2026) */
.ar-sub { font-size: 13.5px; color: var(--text); }
.ar-det summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--brand); margin-top: 6px; }
.ar-det--caja { border: 1px solid var(--border); border-radius: 14px; padding: 12px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.ar-det--caja > summary { margin: 0; font-size: 13px; color: var(--text-soft); }
.ar-det--caja[open] > summary { margin-bottom: 8px; }
.ar-ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--text-soft); max-height: 180px; overflow-y: auto; }

/* ==========================================================================
   Áreas y aprobaciones · una página por área (20-10-2026). Lista a la
   izquierda y la página del área a la derecha. La cadena usa el mismo
   dibujo de «Jefaturas y aprobadores» (Inicio → Pasos → Cierre).
   ========================================================================== */
.ar-a { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
.ar-lista-areas { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 8px; display: flex; flex-direction: column; gap: 3px; position: sticky; top: 12px; }
.ar-li { font: inherit; text-align: left; border: 0; background: transparent; padding: 9px 10px; border-radius: 10px; cursor: pointer; display: flex; justify-content: space-between; gap: 8px; align-items: center; color: var(--text); font-size: 13.5px; }
.ar-li:hover { background: var(--surface-2); }
.ar-li[aria-pressed="true"] { background: var(--brand-tint); color: var(--brand-dark); font-weight: 600; }
.ar-li--nueva { color: var(--brand); font-weight: 600; border: 1px dashed var(--brand-line); margin-top: 4px; justify-content: center; }
.ar-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ar-dot--ok { background: #2E9E68; }
.ar-dot--w { background: #E0A43B; }
.ar-pagina { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ar-pagina > .cargando, .ar-pagina > .aviso { margin: 8px 0; }
.ar-titulo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ar-titulo h2 { margin: 0; font-size: 21px; color: var(--text); }
.ar-sp { flex: 1; }
.ar-chip--w { background: #FDF1DC; color: #9A5B0C; }
.ar-chip--ok { background: #E2F4EA; color: #1F7A4F; }
.ar-sec { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ar-sec-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ar-sec-cab h3 { margin: 0; font-size: 15.5px; color: var(--text); }
.ar-sec-cab small { color: var(--text-muted); font-size: 12.5px; }
.ar-sec-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px; background: var(--brand-tint); color: var(--brand); flex: none; }
.ar-form--sec { padding: 0; }
.ar-form--cajon { padding: 0; }
.ar-equipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ar-equipo { border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); display: flex; flex-direction: column; overflow: hidden; }
.ar-equipo-cab { padding: 9px 12px; background: var(--brand-tint); display: flex; align-items: center; gap: 8px; }
.ar-equipo-cab b { font-size: 13px; flex: 1; color: var(--text); }
.ar-equipo--sin .ar-equipo-cab { background: #FDF1DC; }
.ar-equipo .ar-zona { min-height: 96px; max-height: 320px; }
.ar-equipo .ar-it { position: relative; }
.ar-mover { position: relative; flex: none; }
.ar-mover .btn { padding: 0 8px; height: 26px; font-size: 11.5px; }
.ar-mover-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 27, 45, .14); padding: 4px; display: flex; flex-direction: column; min-width: 180px; }
.ar-mover-menu[hidden] { display: none; }
.ar-mover-op { font: inherit; text-align: left; border: 0; background: transparent; padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 12.5px; color: var(--text); }
.ar-mover-op:hover { background: var(--surface-2); }
.ar-add-equipo { font: inherit; border: 1.5px dashed var(--brand-line); background: var(--brand-tint); color: var(--brand-dark); border-radius: 14px; font-weight: 600; cursor: pointer; min-height: 96px; padding: 10px; }
.ar-add-equipo--abierto { display: flex; flex-direction: column; gap: 6px; cursor: default; background: var(--surface); }
.ar-herr { display: flex; gap: 8px; flex-wrap: wrap; }
/* La cadena: el mismo dibujo de /aprobadores */
.ar-lienzo { display: flex; flex-direction: column; align-items: center; padding: 22px 12px; border: 1px solid var(--border); border-radius: 14px;
  background-color: var(--surface-2); background-image: radial-gradient(#D5DCE6 1px, transparent 1px); background-size: 14px 14px; }
.ar-cn { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; max-width: 460px; width: 100%; }
.ar-cn-c { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px; }
.ar-cn-c svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ar-cn.ini .ar-cn-c { background: #fff; border: 1.5px solid var(--border-strong); color: var(--brand); box-shadow: 0 2px 8px rgba(15, 27, 45, .08); }
.ar-cn.paso .ar-cn-c { background: #0F6B7D; color: #fff; box-shadow: 0 4px 12px rgba(15, 107, 125, .28); }
.ar-cn.paso.falta .ar-cn-c { background: #fff; border: 2px dashed #0F6B7D; color: #0F6B7D; box-shadow: none; }
.ar-cn.fin .ar-cn-c { background: #6D3FC0; color: #fff; box-shadow: 0 4px 12px rgba(109, 63, 192, .28); }
.ar-cn-et { font-size: 11.5px; color: var(--text-muted); letter-spacing: .04em; }
.ar-cn-et b { color: var(--text-soft); font-weight: 700; }
.ar-cn strong { font-size: 15px; color: var(--text); }
.ar-cn small { font-size: 12.5px; color: var(--text-soft); }
.ar-cn-acc { display: flex; gap: 6px; margin-top: 6px; }
.ar-asistente .ar-quitar, .ar-sec .ar-quitar { color: #B53D38; }
.ar-cn-lin { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; }
.ar-raya { width: 1.5px; height: 12px; background: var(--border-strong); }
.ar-cn-cond { font-size: 11.5px; color: var(--text-muted); }
.ar-cn-cond--si { color: #9A5B0C; background: #FDF1DC; border-radius: 6px; padding: 1px 7px; }
.ar-cn-mas { font: inherit; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: #fff; color: var(--text-soft); cursor: pointer; line-height: 1; font-size: 15px; padding: 0; }
.ar-cn-mas:hover { border-color: var(--brand); color: var(--brand); }
.ar-cn-edit { margin-top: 10px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--brand-line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 9px; box-shadow: 0 6px 20px rgba(15, 27, 45, .08); }
.ar-cn-edit > b { font-size: 13.5px; color: var(--text); }
.ar-ops3 { display: flex; gap: 6px; flex-wrap: wrap; }
.ar-ops3 button { font: inherit; font-size: 12.5px; border: 1.5px solid var(--border-strong); background: var(--surface); border-radius: 10px; padding: 6px 10px; cursor: pointer; color: var(--text-soft); text-align: left; }
.ar-ops3 button[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-dark); }
.ar-saltar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--text-muted); }
.ar-saltar button { font: inherit; font-size: 12px; border: 1px solid var(--border-strong); background: var(--surface); border-radius: 999px; padding: 3px 10px; cursor: pointer; color: var(--text-soft); }
.ar-saltar button[aria-pressed="true"] { background: #EEF1F5; border-color: #5F6A7E; color: var(--text); font-weight: 600; }
.ar-cadena-pie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ar-nota--w { color: #9A5B0C; font-weight: 600; }
.ar-plegada { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--text-soft); }
.ar-camino { display: flex; flex-direction: column; gap: 8px; }
.ar-camino-linea { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }
.ar-camino-linea em { font-style: normal; color: var(--text-muted); }
.ar-pill { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; }
.ar-pill--ok { background: #E2F4EA; border-color: #BFE5D0; color: #1F7A4F; font-weight: 600; }
.ar-pill--w { background: #FDF1DC; border-color: #F2DDB2; color: #9A5B0C; }
@media (max-width: 960px) {
  .ar-a { grid-template-columns: minmax(0, 1fr); }
  .ar-lista-areas { position: static; flex-direction: row; flex-wrap: wrap; }
  .ar-li { flex: 1 1 140px; }
}
.ar-equipos { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.ar-equipo .ar-it > div { min-width: 0; }
.ar-equipo .ar-it b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.ar-equipo .ar-it small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ar-aviso-fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ar-aviso-fila > div { flex: 1; min-width: 240px; }
.ar-aviso-fila b { display: block; }
.ar-aviso-fila small { display: block; font-size: 12.5px; }

/* Turno final con «Cambió» debajo (20-10-2026) */
.turno-final { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; white-space: nowrap; }

/* Carga masiva HE: forzar una fila que solo falla por un requisito (21-10-2026) */
.cm-forzar { display: grid; gap: 10px; margin-top: 10px; border-radius: 12px; padding: 12px; background: var(--surface-2, #f6f7fb); border: 1px dashed var(--border, #d9dce6); }
.cm-forzar b { display: block; font-size: 13.5px; }
.cm-forzar small { display: block; color: var(--text-soft); font-size: 12.5px; margin-top: 2px; }
.cm-forzar textarea { min-height: 56px; }
.cm-forzar .cm-acciones { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Recuperar / restablecer / primer acceso con el diseño del ingreso (22-10-2026) ---------- */
.ingreso__nota { padding: 11px 13px; border-radius: 12px; font-size: 13px; line-height: 1.45; text-align: left; border: 1px solid transparent; }
.ingreso__nota--error { background: var(--danger-light, #fdecec); border-color: var(--danger-line, #f5c2c2); color: var(--danger-dark); }
.ingreso__nota--ok    { background: var(--success-light, #e8f6ee); border-color: var(--success-line, #bfe3cd); color: var(--success-dark); }
.ingreso__nota--info  { background: var(--brand-tint); border-color: var(--brand-line); color: var(--text); }
.ingreso__ayuda { margin: -4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); text-align: center; }
.ingreso__campos .ingreso__ayuda { text-align: left; }
.ingreso__enlace { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--brand); cursor: pointer; text-decoration: underline; }
.ingreso__enlace:hover { color: var(--brand-dark); }


/* ---------- Ingreso de Halloween (25-oct al 1-nov, opción A) ----------
   Solo decoración: telarañas, araña colgando y toque naranjo. El servidor pone
   .es-halloween según la fecha; fuera de ella todo esto queda escondido. */
.ingreso__halloween { display: none; }
.ingreso.es-halloween .ingreso__halloween { display: block; }
.ingreso.es-halloween { --hw-naranjo: #F57C1F; --hw-naranjo-oscuro: #D2600A; }
.ingreso.es-halloween .ingreso__boton { background: var(--hw-naranjo); }
.ingreso.es-halloween .ingreso__boton:hover:not(:disabled) { background: var(--hw-naranjo-oscuro); }
.ingreso.es-halloween .ingreso__rasgos .ms { color: var(--hw-naranjo); }
.ingreso.es-halloween .ingreso__campo:focus { border-color: var(--hw-naranjo); box-shadow: 0 0 0 3px rgba(245,124,31,.25); }
.ingreso.es-halloween .ingreso__campo:focus + label { color: var(--hw-naranjo-oscuro); }
.ingreso__halloween.hw-insignia { display: none; margin-left: auto; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: rgba(245,124,31,.16); color: #FFB070; border: 1px solid rgba(245,124,31,.4); }
.ingreso.es-halloween .ingreso__halloween.hw-insignia { display: inline-block; }
.ingreso__halloween:not(.hw-insignia) { position: absolute; inset: 0; pointer-events: none; }
.hw-tela { position: absolute; color: rgba(255,255,255,.22); }
.hw-tela svg, .hw-tela-caja svg { width: 100%; height: 100%; display: block; }
.hw-tela--a { left: 0; top: 0; width: 260px; height: 260px; }
.hw-tela--b { right: 0; bottom: 0; width: 220px; height: 220px; transform: rotate(180deg); }
.ingreso.es-halloween .hw-tela-caja { position: absolute; inset: 0 0 auto auto; width: 110px; height: 110px; color: rgba(5,45,111,.16); transform: scaleX(-1); border-top-right-radius: var(--radius-lg); overflow: hidden; }
.ingreso.es-halloween .hw-hilo { position: absolute; inset: auto; right: 46px; top: -180px; width: 2px; height: 150px; background: rgba(255,255,255,.55); z-index: 3; animation: hwColgar 4s ease-in-out infinite; }
.hw-arana { position: absolute; left: -23px; bottom: -40px; width: 48px; }
.hw-arana svg { width: 100%; display: block; }
@keyframes hwColgar { 0%,100% { height: 150px; } 50% { height: 175px; } }
@media (prefers-reduced-motion: reduce) { .ingreso.es-halloween .hw-hilo { animation: none; } }
@media (max-width: 960px) {
  .ingreso__halloween.hw-insignia { display: none !important; }
  .hw-tela--a { width: 150px; height: 150px; } .hw-tela--b { width: 120px; height: 120px; }
}

/* Máximo de HE por local (/he-maximo): la explicación del cálculo, plegable */
.he-maximo__nota{margin:4px 0 14px;padding:10px 14px;border:1px solid var(--border);border-radius:12px;background:var(--brand-tint);font-size:.86rem;color:var(--text-soft)}
.he-maximo__nota summary{cursor:pointer;font-weight:600;color:var(--brand)}
.he-maximo__nota ul{margin:8px 0 2px;padding-left:18px;display:grid;gap:6px}
.he-maximo__pago{margin:6px 0 0;padding:8px 12px;border-radius:10px;background:var(--brand-light);color:var(--brand-dark);font-size:.86rem;font-weight:600}
.he-maximo__pago:empty{display:none}
/* «Cómo leer este informe» (27-10-2026): ejemplo arriba y cada concepto en su tarjeta. */
.he-maximo__leyenda{display:grid;gap:12px}
.he-maximo__ejemplo{padding:12px 14px;border-radius:12px;background:var(--brand-tint);border:1px solid var(--border);font-size:.9rem;line-height:1.5;color:var(--text)}
.he-maximo__conceptos{margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.he-maximo__conceptos > div{padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.he-maximo__conceptos dt{font-weight:700;color:var(--brand-dark);font-size:.88rem;margin-bottom:3px}
.he-maximo__conceptos dd{margin:0;font-size:.84rem;line-height:1.45;color:var(--text-soft)}
.he-maximo__personas{width:100%;border-collapse:collapse;font-size:.86rem;margin-top:10px}
.he-maximo__personas th,.he-maximo__personas td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.he-maximo__personas td.num{text-align:right;white-space:nowrap}
.he-maximo__subtitulo{margin:16px 0 6px;font-size:.88rem;color:var(--text-soft)}
.he-maximo__fuera{margin:0;padding-left:18px;font-size:.84rem;color:var(--text-muted);display:grid;gap:3px}
.he-maximo__barra{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end;justify-content:space-between;margin:0 0 14px}
.he-maximo__barra .campo{margin:0;min-width:200px}
.he-maximo__falta{color:var(--danger,#C62828);border-color:color-mix(in srgb,var(--danger,#C62828) 40%,transparent)}

/* Turnos SEREMI traídos del Minsal */
.turnos-seremi__minsal-resumen{margin:0 0 10px;color:var(--text-soft);font-size:.88rem}
.turnos-seremi__minsal-acciones{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.turnos-seremi__avance{margin:4px 0 12px}
.turnos-seremi__avance small{color:var(--text-soft)}
.turnos-seremi__barra{height:8px;border-radius:99px;background:var(--brand-tint);overflow:hidden;margin-bottom:4px}
.turnos-seremi__barra span{display:block;height:100%;width:0;background:var(--brand);transition:width .3s}
.turnos-seremi__acciones{display:flex;gap:6px;flex-wrap:wrap}
.turnos-seremi__liga-info p{margin:0 0 12px;color:var(--text-soft)}
.turnos-seremi__liga-info b{color:var(--text)}
.turnos-seremi__celda{display:flex;flex-direction:column;gap:2px;line-height:1.25}
.turnos-seremi__celda small{color:var(--text-muted);font-size:.78rem}
.turnos-seremi__acciones .btn{white-space:nowrap}

/* ==========================================================================
   Bonificaciones (0124): buscador de personas, detalle del bono y su cadena
   ========================================================================== */
.apr-mod--bono { background: var(--sb-bg-rosa); color: var(--sb-fg-rosa); }
.bono-persona { position: relative; }
.bono-persona input[type="search"] { width: 100%; }
.bono-persona__lista { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 28px rgba(15, 23, 42, .14); max-height: 320px; overflow: auto; }
.bono-persona__item, .bono-persona__vacio { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; }
.bono-persona__item { cursor: pointer; }
.bono-persona__item:hover, .bono-persona__item:focus { background: var(--brand-tint); outline: none; }
.bono-persona__item small, .bono-persona__vacio, .bono-persona__datos small { color: var(--text-muted); font-size: .8rem; }
.bono-persona__elegida { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--brand-line); background: var(--brand-tint); border-radius: 12px; }
.bono-persona__datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bono-concepto-ayuda:empty { display: none; }
.bono-detalle { display: flex; flex-direction: column; gap: 16px; }
.bono-detalle__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bono-detalle__monto { font-size: 1.7rem; font-weight: 700; color: var(--brand-dark); }
html.dark .bono-detalle__monto { color: var(--brand); }
.bono-detalle__rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.bono-detalle__dato { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bono-detalle__dato span, .bono-detalle__motivo span { color: var(--text-muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }
.bono-detalle__dato b { font-weight: 600; overflow-wrap: anywhere; }
.bono-detalle__motivo { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.bono-detalle__motivo p { margin: 4px 0 0; white-space: pre-wrap; }
.bono-detalle__motivo--rechazo { background: var(--danger-light); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.bono-cadena__titulo { margin: 0 0 8px; font-size: .95rem; }
.bono-cadena__pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.bono-cadena__paso { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 0 0 14px 26px; }
.bono-cadena__paso::before { content: ""; position: absolute; left: 6px; top: 4px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border-strong); }
.bono-cadena__paso:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: 18px; bottom: 0; width: 2px; background: var(--border); }
.bono-cadena__paso small { color: var(--text-muted); }
.bono-cadena__paso em { font-size: .85rem; color: var(--text-soft); }
.bono-cadena__paso--aprobado::before { background: var(--success); border-color: var(--success); }
.bono-cadena__paso--pendiente::before { background: var(--warning); border-color: var(--warning); box-shadow: 0 0 0 4px var(--warning-light); }
.bono-cadena__paso--rechazado::before { background: var(--danger); border-color: var(--danger); }
.bono-cadena__paso--omitido::before { border-style: dashed; }
@media (max-width: 560px) { .bono-detalle__rejilla { grid-template-columns: 1fr; } }

/* ⓘ en el título de una columna (tabla.js, opción `ayuda`). La tabla tiene
   desborde (scroll horizontal) y recorta lo que sale hacia arriba: el globo se
   abre HACIA ABAJO, sobre las filas, y sin las mayúsculas del encabezado. */
th .th-ayuda{ margin-left: 3px; }
/* Mientras se mira la ayuda, su encabezado pasa adelante: si no, las demás
   celdas del encabezado (pegajosas, cada una en su capa) tapan las esquinas
   de arriba del globo. */
th:has(> .th-ayuda:hover), th:has(> .th-ayuda:focus-visible){ z-index: 30 !important; }
th .th-ayuda.tip::after{
  bottom: auto; top: calc(100% + 8px); max-width: 280px;
  text-transform: none; letter-spacing: normal; font-size: 12px; font-weight: 500;
}
/* En las columnas de los bordes el globo centrado se salía de la tabla y se
   cortaba («…dividido p», 26-10-2026): en las 3 últimas se abre hacia la
   izquierda y en las 2 primeras hacia la derecha. */
th:nth-last-child(-n+3) .th-ayuda.tip::after{ left: auto; right: -8px; transform: translateY(4px); }
th:nth-child(-n+2) .th-ayuda.tip::after{ left: -8px; right: auto; transform: translateY(4px); }
th:nth-last-child(-n+3) .th-ayuda.tip:hover::after, th:nth-last-child(-n+3) .th-ayuda.tip:focus-visible::after,
th:nth-child(-n+2) .th-ayuda.tip:hover::after, th:nth-child(-n+2) .th-ayuda.tip:focus-visible::after{ transform: translateY(0); }

/* ---------- Posibles duplicados (01-11-2026) ---------- */
.dup-intro { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 16px; color: var(--text-muted); font-size: 13px; }
.dup-intro p { margin: 0; max-width: 760px; }
.dup-vista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.dup-vista > * { min-width: 0; }
.dup-ayuda { margin: 0; font-size: 13px; color: var(--text-muted); }
.dup-lado { display: grid; gap: 2px; min-width: 190px; }
.dup-lado strong { font-size: 13px; color: var(--text); font-weight: 600; }
.dup-lado small { font-size: 12px; color: var(--text-muted); }
.dup-decidir { display: grid; gap: 12px; }
.dup-pares { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dup-par { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface-2, var(--surface)); display: grid; gap: 4px; }
.dup-par__rotulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.dup-pisan { grid-column: 1 / -1; margin: 0; font-size: 13px; font-weight: 600; color: var(--danger, #b42318); }
.dup-decidir textarea { width: 100%; resize: vertical; }
.dup-excel { display: grid; gap: 12px; }
.dup-excel__resumen { margin: 0; font-weight: 600; }
.dup-excel__tabla td.celda-larga { max-width: 420px; white-space: normal; }
@media (max-width: 640px) { .dup-pares { grid-template-columns: 1fr; } }

/* ==========================================================================
   Celular (01-11-2026, auditoría UX-04)
   - Las tarjetas de cifras van de a dos: apiladas, cuatro tarjetas llenaban
     la primera pantalla y «+ Nueva solicitud» quedaba abajo.
   - El aviso flotante sale arriba: abajo tapaba los botones de los cajones
     (Guardar, Enviar) justo cuando se estaba por apretar otro.
   ========================================================================== */
@media (max-width: 600px) {
  .kpis, .kpis.kpis--cinco { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 12px 14px; gap: 8px; }
  .kpi__value { font-size: 24px; }
  .kpi__icono { width: 30px; height: 30px; flex-basis: 30px; }
  .kpi__icono svg, .kpi__icono .ms { width: 18px; height: 18px; font-size: 18px; }
  .toast-zona { top: 12px; bottom: auto; left: 12px; right: 12px; align-items: stretch; pointer-events: none; }
  .toast { max-width: none; pointer-events: auto; }
  /* El saludo del panel: el Simi chico al lado del título, no en una fila sola. */
  .tablero__hola { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 10px 12px; padding: 16px; }
  .tablero__cara { width: 44px; height: 44px; }
  .tablero__hola-texto { grid-column: 2; }
  .tablero__saludo { font-size: 18px; margin-top: 8px; }
  .tablero__periodo { grid-column: 1 / -1; }
}

/* Avisos flotantes con un cajón o confirmación abierta (01-11-2026): abajo a la
   derecha tapaban «Aplicar filtros» y los botones del pie del cajón. Mientras
   haya uno abierto (body.ui-sin-scroll) se corren a la izquierda. */
body.ui-sin-scroll .avisos__toast,
body.ui-sin-scroll .toast-zona { right: auto; left: 20px; }
@media (max-width: 600px) {
  .avisos__toast { top: 12px; bottom: auto; left: 12px; right: 12px; width: auto; transform: translateY(-16px); }
  body.ui-sin-scroll .avisos__toast { left: 12px; right: 12px; }
  body.ui-sin-scroll .toast-zona { left: 12px; right: 12px; }
}

/* Detalle de hora extra / solicitud en celular (01-11-2026): un nombre largo
   («Spalazzi Canales Constanza Valentina») ensanchaba el cajón y aparecía una
   barra horizontal. En la ficha el nombre completo se parte en dos líneas. */
.ficha-bloque .persona > div { min-width: 0; }
.ficha-bloque .persona__nom, .ficha-bloque .persona__sub { white-space: normal; overflow-wrap: anywhere; }