/* ==========================================================================
   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 Plus Jakarta Sans a 13px de base (antes Segoe UI a 14).

   La fuente se sirve desde Google Fonts en cada pagina; si no carga, cae a
   Segoe UI, que es lo que habia antes.
   ========================================================================== */

:root {
  /* Marca. El azul es el mismo del sistema anterior. */
  --brand:        #1A56DB;
  --brand-dark:   #1043B5;
  --brand-light:  #EEF3FF;
  --brand-tint:   #F7F8FC;
  --brand-line:   #CDDBFA;
  --on-brand:    #FFFFFF;

  /* Superficies: perla fuera, blanco dentro. */
  --bg:           #F9FAFC;
  --surface:      #FFFFFF;
  --surface-2:    #F7F8FC;
  --border:       #EDEFF5;
  --border-strong:#C9CEE0;
  --line:         #F3F4F9;

  /* Texto. */
  --text:         #1B1F2B;
  --text-soft:    #5A6178;
  --text-muted:   #6E748C;
  --text-faint:   #A9AEC2;

  /* Estados, en pares palido/tinta. */
  --danger:       #DC2626;
  --danger-dark:  #B3201F;
  --danger-light: #FDECEC;
  --danger-line:  #F5C9C9;
  --success:      #16A34A;
  --success-dark: #12833F;
  --success-light:#E7F8EE;
  --warning:      #D97706;
  --warning-dark: #9A5B06;
  --warning-light:#FFF4E0;
  --info:         #0891B2;
  --info-light:   #E8F9FC;
  --info-dark:    #087A91;
  --accent:       #6D28D9;
  --accent-light: #F1EBFF;

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

  --radius-sm: 6px;
  --radius-md: 7px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --radius-icon: 3px;
  --space-1: 4px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --shadow-sm: 0 1px 3px rgba(27, 31, 43, .08);
  --shadow-md: 0 6px 28px rgba(27, 31, 43, .06);
  --shadow-lg: 0 18px 44px rgba(27, 31, 43, .12);
  --shadow-azul: 0 4px 12px rgba(26, 86, 219, .24);
  --shadow-menu: 0 16px 34px rgba(27, 31, 43, .16);
  --focus-ring: 0 0 0 3px rgba(26, 86, 219, .12);

  --sidebar-w: 232px;
  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Roboto, 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;
  overflow: hidden;
}

.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;
}
.topbar__title { font-size: 19px; font-weight: 800; margin: 0; line-height: 1.25; letter-spacing: -.015em; }
.topbar__sub   { font-size: 12.5px; color: var(--text-muted); margin: 2px 0 0; }
.topbar__bloque-izq { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar__acciones { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

.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-sm);
  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); border-color: var(--success); box-shadow: none; }
.btn--success:hover:not(:disabled) { background: var(--success-dark); border-color: var(--success-dark); }

/* 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 { height: 30px; padding: 0 13px; font-size: 11.5px; border-radius: var(--radius-sm); }
.btn--register { white-space: nowrap; }
.btn--block { width: 100%; justify-content: center; }

/* Boton redondo de accion, para la barra superior. */
.btn--redondo {
  width: 36px; height: 36px; padding: 0; flex: 0 0 36px;
  border-radius: var(--radius-circle); box-shadow: none;
}
/* 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. */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin: 0; }
.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-faint); }

.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-sm); 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 {
  flex: 0 0 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__acciones .btn--sm,
.panel__head > .exportar-acciones .btn--sm,
.tabla-barra > .exportar-acciones .btn--sm {
  height: 36px; padding: 0 14px; font-size: 12px; border-radius: var(--radius-sm);
}
.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 ---------- */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.filtro {
  height: 34px; padding: 0 15px; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-soft); font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: inherit; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.filtro:hover { border-color: var(--brand-line); background: var(--brand-tint); color: var(--brand); }
.filtro[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 700; }
.filtro:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- 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-faint); }
/* 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%; }
}

/* Sin marco alrededor de la tabla: las lineas de fila ya la delimitan.
   overflow-y hidden a proposito: con solo overflow-x auto, el eje Y computa
   'auto' y la animacion de entrada (las filas suben unos pixeles) hacia
   aparecer una barra vertical fugaz en cada cambio de pagina. El alto del
   contenedor es automatico, asi que aqui nunca hay scroll vertical real. */
.tabla-scroll { overflow-x: auto; overflow-y: hidden; border: none; border-radius: 0; }
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);
}
/* Fila de filtros bajo la cabecera (filtros-fila.js): un campo por columna,
   con el nombre de la columna como placeholder. Va dentro del thead, asi que
   deshace las mayusculas y el espaciado que hereda de thead th. */
.filtros-fila th {
  background: var(--surface); padding: 6px 8px;
  border-top: none; border-bottom: 1px solid var(--border);
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
.filtro-celda {
  width: 100%; min-width: 44px; height: 28px; padding: 0 9px;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 12px; font-weight: 400;
  text-transform: none; letter-spacing: normal;
}
.filtro-celda::placeholder { color: var(--text-faint); font-weight: 400; }
/* El nativo necesita sitio para dd-mm-aaaa y el icono del calendario. */
.filtro-celda[type="date"] { min-width: 124px; padding: 0 6px; color: var(--text-soft); }
.filtro-celda:hover { border-color: var(--border-strong); }
.filtro-celda:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }
/* Un filtro puesto se reconoce sin leerlo: es lo que explica que la tabla
   muestre menos filas de las que dice el listado completo. */
.filtro-celda--activa { border-color: var(--brand-line); background: var(--brand-light); color: var(--brand-dark); font-weight: 600; }
/* Escrito pero inservible -texto en una columna de numeros-: no se manda al
   servidor, y el campo lo dice en lugar de dejar la tabla como si filtrara. */
.filtro-celda--invalida { border-color: var(--danger-line); background: var(--danger-light); color: var(--danger-dark); }
@media print { .filtros-fila { display: none; } }
.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; }
tbody tr:nth-child(even) { background: #FBFCFE; }
tbody tr:hover { background: var(--brand-tint); }
/* 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-faint); 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;
}
.campo__ayuda { font-size: 11.5px; color: var(--text-faint); }

/* ---------- 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-faint); 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. */
.config-acceso {
  margin: -2px 0 18px; padding: 15px;
  border: 1px solid var(--brand-line); border-radius: var(--radius-lg);
  background: var(--brand-light);
}
.config-acceso__cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.config-acceso__eyebrow {
  margin: 0 0 3px; color: var(--brand); font-size: 9.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
}
.config-acceso__titulo { margin: 0; color: var(--text); font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
 .config-acceso__marca {
  flex: 0 0 auto; padding: 5px 8px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill); background: var(--surface); color: var(--text-soft);
  font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.config-acceso__marca--modular { border-color: var(--brand-line); background: var(--brand-light); color: var(--brand-dark); }
.config-acceso__introduccion { margin: 7px 0 12px; color: var(--text-muted); font-size: 11.5px; line-height: 1.45; }
.config-acceso__modos { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.config-acceso__modo-opcion {
  display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding: 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.config-acceso__modo-opcion:has(input:checked) {
  border-color: var(--brand); background: var(--brand-light);
}
.config-acceso__modo-opcion input,
.config-acceso__check input { width: 15px; height: 15px; flex: 0 0 15px; margin: 1px 0 0; accent-color: var(--brand); }
.config-acceso__modo-textos,
.config-acceso__check-textos { display: grid; gap: 2px; min-width: 0; }
.config-acceso__modo-textos strong,
.config-acceso__check-textos strong { color: var(--text); font-size: 11px; line-height: 1.25; }
.config-acceso__modo-textos small,
.config-acceso__check-textos small { color: var(--text-muted); font-size: 10px; line-height: 1.35; }
.config-acceso__contenido { display: grid; gap: 9px; margin-top: 10px; }
.config-acceso__grupo {
  min-width: 0; margin: 0; padding: 11px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--surface);
}
.config-acceso__grupo--he { display: grid; gap: 10px; }
.config-acceso__grupo-titulo { padding: 0 5px; color: var(--text-soft); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.config-acceso__grupo-ayuda { margin: 3px 0 9px; color: var(--text-muted); font-size: 10.5px; line-height: 1.4; }
.config-acceso__check { display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding: 7px 8px; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: background .15s, border-color .15s; }
.config-acceso__check:hover { border-color: var(--border); background: var(--surface-2); }
.config-acceso__check--destacado { margin-bottom: 8px; border-color: var(--brand-line); background: var(--brand-tint); }
.config-acceso__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.config-acceso__campo-select label { display: grid; gap: 5px; color: var(--text-soft); font-size: 10.5px; font-weight: 800; }
.config-acceso__campo-select select { width: 100%; }
.config-acceso__campo-select small { color: var(--text-muted); font-size: 10px; font-weight: 400; line-height: 1.35; }
.config-acceso__resumen {
  padding: 11px; border-left: 3px solid var(--brand); border-radius: var(--radius-sm);
  background: var(--brand-light); color: var(--text);
}
.config-acceso__resumen > strong { font-size: 11px; }
.config-acceso__resumen-texto { margin: 3px 0 8px; color: var(--text-muted); font-size: 10px; line-height: 1.35; }
.config-acceso__resumen-contenido { display: grid; gap: 6px; }
.config-acceso__resumen-fila { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: start; gap: 7px; }
.config-acceso__resumen-label { padding-top: 3px; color: var(--text-soft); font-size: 9.5px; font-weight: 800; }
.config-acceso__resumen-chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.config-acceso__resumen-chip { padding: 3px 6px; 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; }
.config-acceso__resumen-vacio { color: var(--text-faint); font-size: 9.5px; line-height: 1.35; }

/* ---------- 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 { 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-faint); }

/* 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; }
}

.perfiles-extra {
  min-width: 0; margin: 0 0 18px; padding: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2);
}
.perfiles-extra__titulo { display: block; padding: 0; color: var(--text-soft); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.perfiles-extra__ayuda { margin: 5px 0 11px; color: var(--text-muted); font-size: 11.5px; line-height: 1.45; }
.perfiles-extra__lista { display: grid; gap: 8px; }
.perfil-extra {
  display: flex; align-items: flex-start; gap: 9px; padding: 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--text); font-size: 12px; cursor: pointer; transition: border-color .15s, background .15s;
}
.perfil-extra:hover, .perfil-extra:focus-within { border-color: var(--brand-line); background: var(--brand-tint); }
.perfil-extra__check { margin: 2px 0 0; accent-color: var(--brand); }
.perfil-extra__textos { min-width: 0; line-height: 1.4; }
.perfil-extra__nombre { display: block; font-weight: 800; }
.perfil-extra__descripcion { display: block; margin-top: 2px; color: var(--text-muted); font-size: 10.5px; }
.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-faint); }
/* 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); }
.campo__error { font-size: 11.5px; color: var(--danger-dark); font-weight: 600; }

/* ---------- 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-faint); 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; }
.select-ui > select, .date-time-ui > input { 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; }
.select-ui__menu { max-height: 280px; overflow-y: auto; }
.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);
}
.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; }
.date-picker__day.is-today:not(.is-selected) { 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-faint); }
.date-time-ui__panel .date-picker__action { font-size: 12px; }
/* En la fila de filtros el selector mide lo que un .filtro-celda y, sin
   fecha, muestra el titulo de la columna como los demas campos. */
.filtros-fila .date-time-ui { min-width: 124px; }
.filtros-fila .select-ui { min-width: 132px; }
.filtros-fila .select-ui__trigger { height: 28px; padding: 0 9px; gap: 7px; border-radius: 4px; font-size: 12px; font-weight: 400; color: var(--text-soft); }
.filtros-fila .select-ui__search-input { height: 28px; padding: 0 30px 0 9px; border-radius: 4px; font-size: 12px; font-weight: 400; color: var(--text-soft); }
.filtros-fila .select-ui:has(> .filtro-celda--activa) .select-ui__trigger { border-color: var(--brand-line); background: var(--brand-light); color: var(--brand-dark); font-weight: 600; }
.filtros-fila .select-ui:has(> .filtro-celda--activa) .select-ui__search-input { border-color: var(--brand-line); background: var(--brand-light); color: var(--brand-dark); font-weight: 600; }
.filtros-fila .select-ui__menu { min-width: 180px; }
.filtros-fila .date-time-ui__trigger { height: 28px; padding: 0 9px; gap: 7px; border-radius: 4px; font-size: 12px; font-weight: 400; color: var(--text); }
.filtros-fila .date-time-ui__trigger > span:last-child { color: var(--text-faint); }
.filtros-fila .date-time-ui:has(> .filtro-celda--activa) .date-time-ui__trigger { border-color: var(--brand-line); background: var(--brand-light); color: var(--brand-dark); }
.filtros-fila .date-time-ui:has(> .filtro-celda--activa) .date-time-ui__trigger > span:last-child { color: var(--brand-dark); font-weight: 600; }
.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(230px, 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);
}
/* 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; }
.cajon__cuerpo .ficha { width: 100%; max-width: none; gap: 0 14px; }
.confirmacion-lateral__fondo {
  position: fixed; inset: 0; z-index: 130;
  display: flex; justify-content: flex-end; 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; }
.confirmacion-lateral__fondo--visible {
  background: rgba(15, 23, 42, .22);
  pointer-events: auto;
}
.confirmacion-lateral {
  width: min(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);
  transform: translateX(calc(100% + var(--cajon-margen, 14px)));
  transition: transform .26s cubic-bezier(.32, .72, 0, 1);
}
.confirmacion-lateral__fondo--visible .confirmacion-lateral { transform: translateX(0); }
.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); }
.confirmacion-lateral__cuerpo { padding: 20px 22px 24px; }
.confirmacion-lateral__mensaje {
  margin: 0 0 22px; color: var(--text-muted); font-size: 12.5px;
  line-height: 1.55; white-space: pre-line;
}
.confirmacion-lateral__acciones { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

.detalle-solicitud__estado {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 4px; padding: 12px 14px;
  border: 1px solid var(--brand-line); border-radius: var(--radius-sm); background: var(--brand-tint);
}
.detalle-solicitud__estado .campo__label { margin: 0; }
.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;
}
.detalle-solicitud__acciones,
.detalle-hora-extra__acciones {
  display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--border);
}
.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(120px, 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 ---------- */
.doble-cajon__fondo { position: fixed; inset: 0; z-index: 85; background: rgba(15,23,42,0); transition: background .22s ease; pointer-events: none; }
.doble-cajon__fondo[hidden] { display: none; }
.doble-cajon__panel[hidden] { display: none; }
.doble-cajon__fondo--visible { background: rgba(15,23,42,.22); pointer-events: auto; }
.doble-cajon__panel { position: absolute; top: var(--cajon-margen,14px); bottom: var(--cajon-margen,14px); right: var(--cajon-margen,14px); 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; transform: translateX(calc(100% + var(--cajon-margen,14px))); transition: transform .26s cubic-bezier(.32,.72,0,1); }
.doble-cajon__panel--visible, .doble-cajon__fondo--visible .doble-cajon__panel--principal { transform: translateX(0); }
.doble-cajon__panel--secundario { right: calc(var(--doble-cajon-ancho-principal, 360px) + var(--cajon-margen,14px)); z-index: 2; }
.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; }
/* El secundario se separa del principal solo en horizontal. Ambos conservan
   el mismo margen superior e inferior para quedar completos y alineados. */
.doble-cajon__panel--secundario {
  --doble-cajon-ancho-principal: 440px;
  right: calc(
    var(--doble-cajon-ancho-principal, 440px)
    + (var(--cajon-margen, 14px) * 2)
  );
}

@media (max-width: 900px) {
  /* En el panel embebido ambos niveles deben conservarse visibles: el
     principal ocupa la franja izquierda y el detalle la derecha. */
  .doble-cajon__panel--principal {
    left: var(--cajon-margen,14px); right: auto;
    width: calc(38% - 28px);
  }
  .doble-cajon__panel--secundario {
    right: var(--cajon-margen,14px);
    width: calc(62% - 7px);
  }
  .doble-cajon__fondo--visible .doble-cajon__panel--principal { transform: translateX(0); }
}
@media (max-width: 560px) {
  .doble-cajon__panel { top: 0; bottom: 0; right: 0; width: 100%; border-radius: 0; }
  .doble-cajon__fondo--visible .doble-cajon__panel--principal { transform: translateX(-18px); }
  .doble-cajon__panel--secundario { right: 0; }
}

@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-faint); }
.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__validar { margin-top: 4px; }
.formulario-solicitud__distintivos { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 8px; }
.formulario-solicitud__enviar { margin-top: 8px; }
.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(300px, 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; }
.he-indicadores__fila { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin-bottom: 7px; }
.he-indicadores__nombre { margin-bottom: 3px; color: var(--text-soft); font-size: 12px; }
.he-indicadores__barra { height: 6px; overflow: hidden; border-radius: var(--radius-pill); background: var(--brand-light); }
.he-indicadores__relleno { width: var(--porcentaje); height: 100%; background: var(--brand); }

/* ---------- 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: #092564; }
.grafico-dona__seg--pendiente { stroke: #587BCB; }
.grafico-dona__seg--rechazada { stroke: #071C4B; }
.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: #092564; }
.grafico-dona__chip--pendiente { background: #587BCB; }
.grafico-dona__chip--rechazada { background: #071C4B; }
.grafico-dona__valor { margin-left: auto; font-weight: 700; color: var(--text); }

/* 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(--brand); 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: #EEF1F8; }
.mapa-calor__celda--n1 { background: #C9D8F8; }
.mapa-calor__celda--n2 { background: #93B2F0; }
.mapa-calor__celda--n3 { background: #4E7FE5; }
.mapa-calor__celda--n4 { background: #1A56DB; }
.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 { grid-template-columns: repeat(10, 1fr); }
.he-indicadores__bloques--informe > .he-indicadores__bloque { grid-column: span 10; }
.he-indicadores__bloques--informe > .he-indicadores__bloque--70 { grid-column: span 7; }
.he-indicadores__bloques--informe > .he-indicadores__bloque--30 { grid-column: span 3; }
@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. */
.grafico-columnas--rotado { height: 250px; }
.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(--brand); 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(--brand); }
.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-faint); }
.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; }
.panel__head-accion { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.he-rrhh__control { margin-bottom: 0; }
.he-rrhh__acciones { display: flex; gap: 6px; }
.he-rrhh { background: #f5f6f9; }
.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; }
.he-rrhh__tabla thead th { background: var(--surface-2); color: var(--text-muted); border-bottom: 1px solid var(--border); 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 { border-top: 1px solid var(--border); padding: 16px 22px; display: flex; gap: 12px; justify-content: space-between; flex-shrink: 0; background: var(--surface); }
.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; }
}
.colacion__config-fila { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.colacion__config-campo { margin-bottom: 0; }
.colacion__minutos { max-width: 140px; }
.colacion__nota { flex: 1 1 260px; margin: 0; color: var(--text-muted); font-size: 13px; }
.colacion__relojes { display: grid; gap: 8px; }
.colacion__reloj { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-size: 13px; }
.colacion__reloj > div:first-child { flex: 1 1 220px; }
.colacion__reloj-visto { color: var(--text-muted); font-size: 12px; }
.colacion__reloj-ip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.colacion__reloj-ip input { width: 140px; max-width: 100%; }
.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 { display: flex; gap: 8px; margin-bottom: 14px; }
.feriados__buscador { flex: 1; height: 40px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }
.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(190px, 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); }
.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; }
.usuarios__filtro-rol { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 8px; }
.panel__acciones .usuarios__filtro-rol { margin-bottom: 0; flex: 0 0 auto; }
.usuarios__filtro-rol-label { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 13px; }
.usuarios__filtro-rol-select { min-width: 130px; }
/* 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; }
.aprobadores__columnas { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; align-items: start; gap: 18px; }
.aprobadores__izquierda { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.aprobadores__buscador { min-width: 0; }
.aprobadores__cargos { display: flex; flex-direction: column; gap: 5px; max-height: 520px; overflow-y: auto; padding-right: 4px; }
.aprobadores__derecha { min-width: 0; }
.aprobadores__cargo { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.aprobadores__cargo.is-activo { border-color: var(--brand); background: var(--brand-light); color: var(--brand-dark); }
.aprobadores__cargo-textos, .aprobadores__aprobador-textos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aprobadores__cargo-nombre { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.aprobadores__cargo-detalle, .aprobadores__aprobador-detalle { color: var(--text-muted); font-size: 11.5px; }
.aprobadores__nivel { margin-bottom: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.aprobadores__nivel.is-fallback { background: var(--brand-tint); }
.aprobadores__nivel-cabecera, .aprobadores__detalle-cabecera { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.aprobadores__nivel-titulo { margin: 0; color: var(--text-muted); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.aprobadores__nivel-lista { display: flex; flex-direction: column; gap: 7px; }
.aprobadores__aprobador { 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); background: var(--surface); }
.aprobadores__aprobador-nombre { font-size: 13px; font-weight: 600; }
.aprobadores__cierre { padding: 14px 16px; border: 1px solid var(--success); border-radius: var(--radius-sm); background: var(--success-light); }
.aprobadores__cierre-titulo { margin: 0 0 4px; color: var(--success-dark); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.aprobadores__cierre-quien { margin: 0 0 2px; color: var(--success-dark); font-size: 14px; font-weight: 700; }
.aprobadores__cierre-nota { margin: 0; color: var(--success-dark); font-size: 12.5px; }
.aprobadores__alta { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.aprobadores__alta .campo { margin-bottom: 0; }
.aprobadores__alta-usuario { min-width: 220px; flex: 1; }
.aprobadores__alta-nivel { min-width: 110px; }
.aprobadores__alta-paso { min-width: 180px; }
.aprobadores__detalle-titulo { margin: 0; font-size: 16px; font-weight: 700; }
.aprobadores__detalle-resumen { margin: 0 0 16px; color: var(--text-muted); font-size: 13px; }
.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; }
.flujo__evidencia-fila { display: flex; align-items: center; gap: 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. */
  .tabla-scroll { overflow: visible; }
  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(#D8DCEA 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 #F2DFB8;
  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;
}
.cajon__pie-botones { display: flex; gap: 8px; flex-wrap: wrap; }

/* 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. */
.cajon--secundario { margin-right: calc(440px + var(--cajon-margen, 14px)); }
/* 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); }

/* 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; }
.fila-abrir { font-size: 12px; font-weight: 700; color: var(--text-faint); }
/* 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. */
.fila-abrir--nota { white-space: nowrap; font-weight: 500; }

/* ---------- 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. */
.panel__acciones input[type="date"] { width: 150px; }
/* `.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. */
.panel__acciones .select-ui,
.panel__acciones .date-time-ui { width: auto; min-width: 132px; 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); }
.badge--probable { background: var(--accent-light); color: var(--accent); }
.num-predicho { color: var(--accent); font-weight: 700; }
.ausencias__modelo { color: var(--text-faint); font-size: 12px; }

/* ---------- Mapa de la semana ----------
   Los dias son COLUMNAS. Una fila por punto de cobertura -sucursal y cargo-
   deja ver el patron: dos sucursales que caen el mismo jueves se ven caer
   juntas, cosa que una lista de fecha, sucursal y cargo no ensena nunca. */
.mapa { width: 100%; border-collapse: collapse; font-size: 12.5px; }
/* Misma cabecera clara que el resto de tablas: sin banda azul. */
.mapa thead th { background: var(--surface-2); color: var(--text-muted); text-align: center; padding: 9px 6px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.mapa thead th:first-child { text-align: left; padding-left: 12px; }
.mapa tbody td { border-top: 1px solid var(--line); padding: 8px 6px; text-align: center; }
.mapa tbody td:first-child { text-align: left; padding-left: 12px; white-space: nowrap; }
.celda { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 26px; padding: 0 9px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.celda--vacia { color: var(--text-faint); font-weight: 600; }
.celda--confirmada { background: var(--warning-light); color: var(--warning-dark); }
.celda--riesgo { background: var(--accent-light); color: var(--accent); }
/* El hueco rodea al dato en vez de taparlo: casi todo punto es de una sola
   persona, y como bloque rojo el mapa era una alarma continua. */
.celda--corto { box-shadow: inset 0 0 0 1.5px var(--danger); }

/* La fila de totales es tambien el selector del dia: hace de tira de dias sin
   gastar una banda propia de la pantalla. */
.mapa__totales td { padding: 0 4px 10px; border-top: none; }
.mapa__totales td:first-child { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); padding-left: 12px; }
.total { width: 100%; min-height: 34px; padding: 5px 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-family: inherit; font-size: 15px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.total:hover { border-color: var(--brand-line); background: var(--brand-tint); }
.total[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
/* La columna elegida sigue tenida mientras se lee el detalle: es lo que ata
   el mapa con la tabla de abajo. */
.es-dia { background: var(--brand-light); }

.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; }
.leyenda-mapa__muestra { width: 12px; height: 12px; border-radius: var(--radius-pill); }
.leyenda-mapa__muestra--confirmada { background: var(--warning-light); }
.leyenda-mapa__muestra--riesgo { background: var(--accent-light); }
.leyenda-mapa__muestra--corto { background: transparent; box-shadow: inset 0 0 0 1.5px var(--danger); }
.leyenda-mapa__cuenta { margin-left: auto; color: var(--text-faint); }

.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-faint); 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-faint); 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, #E4D8FA 0 5px, #FFFFFF 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-faint); }

/* 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. */
.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(112px, 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 { color: var(--brand); }
tbody tr.is-elegida .fila-abrir { 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-faint); }
.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-faint); }
.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 { font-size: 14.5px; font-weight: 700; color: var(--text); margin-top: 2px; }
/* Mas espacio ENTRE grupos que dentro de ellos: la seccion se separa del campo
   anterior con el doble de aire que sus propios campos entre si. */
.inicio__seccion { margin: 28px 0 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.inicio__seccion-titulo {
  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 #e5eaf4; border-radius: 7px; background: #fff; }
.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: #66718d; }
.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);
  height: auto; width: min(780px, calc(100vw - 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); }
.usuario-editor__campos { overflow-y:auto; flex:1; min-height:0; padding:0 10px 20px 0; }
.usuario-editor__campos > * { margin-bottom:18px; }
.usuario-editor__acciones { flex:none; padding:16px 0 0; background:#fff; border-top:1px solid #e8edf7; }
.usuario-editor details summary { cursor:pointer; padding:12px 0; font-size:12px; color:#657394; }
.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; }
.usuario-editor .acceso-rol { display:none; }
.usuario-personalizado { background:#f6f7fc; border:1px solid #e7eaf3; border-radius:9px; padding:18px; }
.usuario-personalizado__switch { display:flex; justify-content:space-between; align-items:center; cursor:pointer; margin-bottom:12px; }
.usuario-personalizado__switch input { appearance:none; width:42px; height:24px; border-radius:10px; background:#cbd2e4; padding:3px; cursor:pointer; }
.usuario-personalizado__switch input::after { content:''; display:block; width:18px; height:18px; border-radius:50%; background:white; transition:transform .15s; }
.usuario-personalizado__switch input:checked { background:#2056e5; }
.usuario-personalizado__switch input:checked::after { transform:translateX(17px); }
.usuario-seccion { background:#fff; border:1px solid #e5e9f3; border-radius:7px; padding:14px; margin:14px 0; }
.usuario-seccion__top { display:flex; align-items:center; justify-content:space-between; color:#6d7692; 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 #e4e9f3; border-radius:10px; overflow:hidden; background:white; box-shadow:0 12px 40px #18357009; }
.usuario-preview__head { display:flex; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid #edf0f7; color:#7b849d; font-size:10px; }
.usuario-preview__eyebrow { color:#2056e5; 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 #edf0f7; display:flex; align-items:stretch; flex-direction:column; gap:10px; padding:22px 12px; font-size:11px; }
.usuario-preview__nav small { color:#78819a; overflow-wrap:anywhere; margin-bottom:20px; }
.usuario-preview__brand { background:#2056e5; color:white; 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:#64708c; padding:10px; cursor:pointer; font:inherit; }
.usuario-preview__link.is-active { color:#2056e5; background:#edf2ff; 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 #e5eaf7; border-radius:4px; padding:7px 10px; font-size:10px; color:#526484; }
.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:#647495; padding-bottom:16px; border-bottom:1px solid #edf0f7; }
.usuario-preview__table { border:1px solid #edf0f7; border-radius:6px; overflow:hidden; margin-top:18px; }
.usuario-preview__columns { padding:12px; background:#2056e5; color:#fff; font-size:9px; word-spacing:10px; }
.usuario-preview__table p { padding:65px 12px; text-align:center; color:#9aa2b6; font-size:11px; }
.usuario-preview__foot { color:#8b94a9; font-size:10px; line-height:1.8; margin-top:24px; }
.usuario-preview__notice { padding:12px; background:#fff4de; border-radius:5px; color:#735116; 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; } }
@media(max-width:760px) { .cajon.usuario-editor { width:100vw; } .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; }
.solicitud-filtros__pie { display:flex; gap:12px; padding:16px 22px; border-top:1px solid var(--border); flex-shrink:0; background:var(--surface); }
.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; }
/* `--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,.filtros-columnas__ayuda { color:var(--text-muted); font-size:12px; line-height:1.6; }
/* Una condicion es UNA LINEA que se lee de izquierda a derecha -columna,
   condicion, valor- como en el editor de reglas. Antes era una tarjeta de dos
   columnas donde el boton de quitar caia en el hueco libre, asi que cambiaba
   de sitio segun el operador elegido. La equis va fija en la ultima celda. */
.filtros-columnas__reglas { display:flex; flex-direction:column; gap:10px; margin:16px 0; }
.filtros-columnas__regla {
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr) 34px;
  gap:10px; align-items:end;
}
/* Solo las columnas de numero y fecha ofrecen «esta entre»; las de texto no,
   y ahi la cuarta pista seria un vano. */
.filtros-columnas__regla--rango { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 34px; }
.filtros-columnas__regla .campo { min-width:0; margin:0; }
/* Un campo que no aplica al operador elegido pierde la vista, no el sitio. Con
   display:none su columna de la rejilla se colapsa y todo lo que va detras
   -incluida la equis- se corre: el mando de quitar cambiaba de posicion segun
   el operador, que es justo lo que no puede hacer. */
.filtros-columnas__regla .campo--no-aplica { visibility:hidden; }
/* Siempre en la ultima pista, sea cual sea el numero de pistas. */
.filtros-columnas__quitar { grid-column:-2 / -1; width:34px; height:34px; padding:0; font-size:17px; }
.filtros-columnas__vacio {
  margin:16px 0; padding:14px 16px; border:1px dashed var(--border-strong);
  border-radius:var(--radius-md); background:var(--surface-2);
  color:var(--text-muted); font-size:12px; line-height:1.6;
}
.filtros-columnas__pie { display:flex; gap:12px; padding:16px 22px; border-top:1px solid var(--border); flex-shrink:0; background:var(--surface); }
.filtros-columnas__pie .btn { flex:1; }
@media(max-width:640px) {
  .filtros-columnas__regla,
  .filtros-columnas__regla--rango { grid-template-columns:minmax(0,1fr) minmax(0,1fr) 34px; }
  .filtros-columnas__regla > .campo:nth-child(3) { grid-column:1 / -1; }
  .filtros-columnas__regla--rango > .campo:nth-child(4) { grid-column:1 / 3; }
}