/* =============================================================================
   rrhh-ui.css · Identidad visual del módulo RRHH
   -----------------------------------------------------------------------------
   Tokens y primitivas portados de CashFlow (modules/_ui.py, sección CSS).
   Identidad única navy: el color de marca es uno solo y el color SOLO significa
   estado (ok / warn / crit). Nada más lleva color.

   TODO está scopeado bajo .rrhh-ui y las clases llevan prefijo rr- para que
   este archivo no pueda filtrarse a los demás módulos de GS, que siguen
   usando Tailwind con su propia paleta.

   Adaptación deliberada respecto de CashFlow: las tablas alinean a la IZQUIERDA
   por defecto (RRHH es texto, no un libro contable) y las columnas numéricas
   se marcan con .n. En CashFlow es al revés.
   ========================================================================== */

/* LA PALETA NO ESTÁ ACÁ. Vive en src/core/tokens.css. Este módulo no se aparta
   en NADA, así que no le queda ningún token propio: sólo el fondo, que sí es
   suyo (el ABM lo pinta en `.abm-shell` y los otros dos no lo pintan).

   DOS VALORES CAMBIARON al unificar, y en los dos RRHH era el equivocado:
     · --faint iba #95a1b1 → 2,62:1 sobre blanco, no llega a AA. Ahora #6b7787.
     · --warn  iba #c76a00 → 3,83:1, alcanza para texto grande nomás. Ahora
       #a85900, que da 5,13:1.
   No eran decisiones: eran los valores originales portados de CashFlow, que
   los otros tres módulos corrigieron y este no. Se ven algo más oscuros.
   Ver docs/identidad-visual.md §2. */
.rrhh-ui{
  background:var(--canvas);
}

/* La trampa §7 (`.hidden` de Tailwind perdiendo contra las clases del módulo)
   y `.tnum` se resuelven en core/tokens.css para los cuatro módulos. */
.rrhh-ui :focus-visible{outline:2px solid var(--navy-500);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  .rrhh-ui *{transition:none!important;animation:none!important}
}

/* La cabecera del módulo (.rr-hdr) se fue a la barra superior del armazón. El
   nombre lo pone el rail, la sección la publica rrhhGo() y "Recargar datos" es
   una acción del armazón. Ver el encabezado de src/core/shell.js. */

/* Queda .rr-btn-ghost, que sigue usando rrhh_gestion.js sobre fondo navy. */
.rrhh-ui .rr-btn-ghost{display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3);
  border-radius:8px;padding:6px 13px;font:inherit;font-size:.74rem;font-weight:600;
  cursor:pointer;white-space:nowrap}
.rrhh-ui .rr-btn-ghost:hover{background:rgba(255,255,255,.22)}
.rrhh-ui .rr-btn-ghost:disabled{opacity:.5;cursor:default}
.rrhh-ui .rr-btn-ghost .material-symbols-outlined{font-size:16px}

/* ── Nivel 1 · secciones ─────────────────────────────────────────────── */
.rrhh-ui .rr-secnav{background:var(--surface);border-bottom:1px solid var(--hair);
  display:flex;gap:2px;padding:0 24px;overflow-x:auto;flex-shrink:0}
/* El subrayado NO es un border: es un ::after que crece desde el centro, así
   puede animarse. El alto total se mantiene con el padding-bottom de 11.5px. */
.rrhh-ui .rr-secnav button{position:relative;background:none;border:none;font:inherit;
  cursor:pointer;padding:11px 14px 11.5px;font-size:.79rem;font-weight:600;
  color:var(--muted);display:flex;align-items:center;gap:7px;white-space:nowrap;
  border-radius:8px 8px 0 0;
  transition:color .14s ease,background .14s ease}
.rrhh-ui .rr-secnav button::after{content:'';position:absolute;left:10px;right:10px;bottom:0;
  height:3px;border-radius:3px 3px 0 0;background:var(--navy);
  transform:scaleX(0);transform-origin:center;transition:transform .18s cubic-bezier(.2,.8,.3,1)}
.rrhh-ui .rr-secnav button .material-symbols-outlined{font-size:17px;
  transition:transform .18s cubic-bezier(.2,.8,.3,1)}
.rrhh-ui .rr-secnav button:hover,
.rrhh-ui .rr-secnav button:focus-visible{color:var(--navy);background:var(--navy-050)}
.rrhh-ui .rr-secnav button:hover::after,
.rrhh-ui .rr-secnav button:focus-visible::after{transform:scaleX(1)}
.rrhh-ui .rr-secnav button:hover .material-symbols-outlined{transform:translateY(-2px)}
.rrhh-ui .rr-secnav button[aria-selected="true"]{color:var(--navy);font-weight:700}
.rrhh-ui .rr-secnav button[aria-selected="true"]::after{transform:scaleX(1)}
.rrhh-ui .rr-secnav .rr-push{margin-left:auto}

/* ── Nivel 2 · sub-pestañas ──────────────────────────────────────────── */
/* Mismo gesto que el nivel 1: subrayado, no píldora rellena. Un solo lenguaje
   de navegación en todo el módulo, y una superficie azul menos por pantalla. */
.rrhh-ui .rr-subnav{background:var(--surface);border-bottom:1px solid var(--hair);
  padding:0 24px;display:flex;gap:4px;overflow-x:auto;align-items:center;flex-shrink:0}
.rrhh-ui .rr-subnav button{background:none;border:none;
  border-bottom:2.5px solid transparent;font:inherit;cursor:pointer;
  padding:9px 12px 8px;font-size:.75rem;font-weight:600;
  color:var(--muted);white-space:nowrap;
  transition:border-color .14s ease,color .14s ease,
             transform .14s cubic-bezier(.2,.8,.3,1)}
.rrhh-ui .rr-subnav button:hover,
.rrhh-ui .rr-subnav button:focus-visible{color:var(--navy);
  border-bottom-color:var(--hair-strong);transform:translateY(-1px)}
.rrhh-ui .rr-subnav button:active{transform:translateY(0)}
.rrhh-ui .rr-subnav button[aria-selected="true"]{color:var(--navy);font-weight:700;
  border-bottom-color:var(--navy)}
.rrhh-ui .rr-subnav button[aria-selected="true"]:hover{border-bottom-color:var(--navy)}

/* ── Encabezado de pantalla ──────────────────────────────────────────── */
.rrhh-ui .rr-ph{margin-bottom:14px}
.rrhh-ui .rr-ph h3{font-size:1.02rem;color:var(--navy);font-weight:700;margin:0}
.rrhh-ui .rr-ph p{color:var(--muted);font-size:.82rem;margin:2px 0 0;max-width:78ch}

/* ── Tarjetas ────────────────────────────────────────────────────────── */
.rrhh-ui .rr-card{background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--r-card);box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden}
.rrhh-ui .rr-card-h{padding:10px 16px;border-bottom:1px solid var(--hair);display:flex;
  align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:#fafbfc}
.rrhh-ui .rr-card-h h4{font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.8px;color:var(--navy);margin:0;display:flex;align-items:center;gap:7px}
.rrhh-ui .rr-card-b{padding:16px}
/* La aclaración de un campo que no se explica solo. Va ARRIBA de la grilla,
   antes de que el usuario elija: una nota al pie llega tarde. */
.rrhh-ui .rr-hint{font-size:.76rem;line-height:1.5;color:var(--muted);
  margin:0 0 14px;max-width:82ch}
.rrhh-ui .rr-hint b{color:var(--navy);font-weight:700}
.rrhh-ui .rr-card-f{padding:9px 16px;border-top:1px solid var(--hair);background:#fafbfd;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ── Filtros y controles ─────────────────────────────────────────────── */
.rrhh-ui .rr-filters{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.rrhh-ui .rr-f{display:flex;flex-direction:column;gap:4px}
.rrhh-ui .rr-f > label{font-size:.62rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.7px;color:var(--faint)}
.rrhh-ui .rr-in{font:inherit;font-size:.79rem;font-weight:600;color:var(--ink);
  padding:6px 10px;border:1px solid var(--hair-strong);border-radius:8px;background:#fff;
  font-variant-numeric:tabular-nums}
.rrhh-ui .rr-in:focus{border-color:var(--navy-500);outline:none;
  box-shadow:0 0 0 3px rgba(43,82,150,.12)}

.rrhh-ui .rr-chips{display:flex;gap:6px;flex-wrap:wrap}
.rrhh-ui .rr-chip{font:inherit;font-size:.72rem;font-weight:600;padding:4px 11px;
  border-radius:99px;border:1px solid var(--hair-strong);background:#fff;color:var(--muted);
  cursor:pointer;white-space:nowrap}
.rrhh-ui .rr-chip:hover{border-color:var(--navy-500);color:var(--navy-500)}
/* Un chip activo es un ESTADO, no una acción: se marca con borde y una barra
   interior, no con un bloque de color. Cuatro filtros tildados no pueden pesar
   más que el botón que dispara la consulta. */
.rrhh-ui .rr-chip.on{background:var(--surface);border-color:var(--navy);
  color:var(--navy);font-weight:700;box-shadow:inset 3px 0 0 var(--navy)}

.rrhh-ui .rr-btn{font:inherit;font-size:.77rem;font-weight:700;padding:7px 14px;
  border-radius:8px;border:1px solid var(--navy);background:var(--navy);color:#fff;
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.rrhh-ui .rr-btn:hover{background:var(--navy-700);border-color:var(--navy-700)}
.rrhh-ui .rr-btn:disabled{opacity:.45;cursor:default}
.rrhh-ui .rr-btn .material-symbols-outlined{font-size:17px}
/* En reposo es gris: si tres botones secundarios llevan texto navy, compiten
   con el primario. Al apuntarlo recupera el color de marca. */
.rrhh-ui .rr-btn.sec{background:#fff;color:var(--muted);border-color:var(--hair-strong)}
.rrhh-ui .rr-btn.sec:hover{background:var(--navy-050);border-color:var(--navy-500);
  color:var(--navy)}
.rrhh-ui .rr-btn.ok{background:var(--ok);border-color:var(--ok)}
.rrhh-ui .rr-btn.ok:hover{background:#0b5c3e;border-color:#0b5c3e}

/* ── Grupo de acciones · UNA principal y un menú ─────────────────────── */
/* Los botones de una barra tienen que negociar el ancho COMO GRUPO. Sueltos,
   cada uno tira para su lado y el que cede es siempre el vecino que puede
   encogerse —los chips—, que terminan recortados detrás de un scroll. Con
   `margin-left:auto` el grupo se va a la derecha y con `flex:0 0 auto` no
   entrega ni un píxel. */
.rrhh-ui .rr-acts{display:flex;gap:8px;align-items:flex-end;
  margin-left:auto;flex:0 0 auto;flex-wrap:wrap}

/* El ancla del menú «···». Se llama `.rr-mas` y NO `.rr-drop` a propósito:
   ese nombre ya es la zona de soltar el CSV (más abajo en este archivo).
   Antes de esto, el único desplegable del módulo se anclaba con un
   `style="position:relative"` suelto en el JS de Liquidación. */
.rrhh-ui .rr-mas{position:relative;flex:0 0 auto}
/* Un botón de sólo ícono no lleva el padding de uno con etiqueta. Va por
   clase y no por `.rr-mas > .rr-btn`: no todos los menús son de sólo ícono
   —el historial de cierres de Liquidación lleva su nombre escrito—. */
.rrhh-ui .rr-mas > .rr-btn.solo-icono{padding:7px 9px}
.rrhh-ui .rr-mas > .rr-btn.solo-icono .material-symbols-outlined{font-size:19px}
/* Los menús que arma `menuMas()` llevan la clase «simple»: una fila es un
   ícono y un verbo, pegados. NO alcanza con escoparlo a `.rr-mas`, porque el
   historial de cierres de Liquidación vive adentro de un `.rr-mas` y sus filas
   llevan DOS datos que sí van repartidos a los extremos. */
.rrhh-ui .rr-drop-menu.simple .rr-drop-item{justify-content:flex-start}
.rrhh-ui .rr-drop-menu.simple{width:max-content;min-width:200px;max-width:280px}
/* En un pie de tarjeta el menú no tiene lugar hacia abajo: se abre arriba. */
.rrhh-ui .rr-drop-menu.arriba{top:auto;bottom:calc(100% + 6px)}

/* Una tarjeta que aloja un menú no puede recortarlo. `overflow:hidden` es lo
   que le da las esquinas limpias a las tablas, así que no se saca de todas:
   se abre SÓLO la que tiene un menú adentro. El z-index no salva de un
   recorte —el menú no se dibuja «encima», se dibuja CORTADO. */
.rrhh-ui .rr-card.aloja-menu{overflow:visible}

/* ── Tablas ──────────────────────────────────────────────────────────── */
.rrhh-ui .rr-tw{overflow:auto}
.rrhh-ui table.rr-g{width:100%;border-collapse:collapse;font-size:.79rem;
  font-variant-numeric:tabular-nums}
/* El encabezado se apoya en una regla gruesa, como en un informe impreso: una
   franja navy de ancho completo sobre una tabla de 60 filas es lo que más
   cansa la vista. Sigue siendo sticky y opaco al scrollear. */
.rrhh-ui table.rr-g th{background:var(--surface);color:var(--muted);padding:9px 11px;
  text-align:left;font-size:.64rem;text-transform:uppercase;letter-spacing:.5px;
  font-weight:700;white-space:nowrap;position:sticky;top:0;z-index:2;
  border-bottom:2px solid var(--ink)}
.rrhh-ui table.rr-g td{padding:6px 11px;text-align:left;border-bottom:1px solid #edeef2}
.rrhh-ui table.rr-g th.n,.rrhh-ui table.rr-g td.n{text-align:right}
.rrhh-ui table.rr-g th.c,.rrhh-ui table.rr-g td.c{text-align:center}
.rrhh-ui table.rr-g tbody tr:hover td{background:var(--navy-050)}
.rrhh-ui table.rr-g .nm{font-weight:600}
.rrhh-ui table.rr-g .dim{color:var(--faint)}
.rrhh-ui table.rr-g .neg{color:var(--crit);font-weight:600}
.rrhh-ui table.rr-g .pos{color:var(--ok);font-weight:600}
.rrhh-ui table.rr-g tr.tot td{border-top:2px solid var(--navy);border-bottom:none;
  font-weight:800;background:#f4f6fa}
.rrhh-ui table.rr-g .vacio{color:var(--faint);font-style:italic;padding:34px;text-align:center}

/* ── Badges de estado ────────────────────────────────────────────────── */
.rrhh-ui .rr-b{display:inline-block;font-size:.62rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;padding:2.5px 8px;border-radius:99px;
  background:#eef0f4;color:var(--muted);white-space:nowrap}
.rrhh-ui .rr-b.ok{background:var(--ok-050);color:var(--ok)}
.rrhh-ui .rr-b.wrn{background:var(--warn-050);color:var(--warn)}
.rrhh-ui .rr-b.neg{background:var(--crit-050);color:var(--crit)}
.rrhh-ui .rr-b.nav{background:var(--navy-050);color:var(--navy-500)}
.rrhh-ui .rr-b.mut{background:transparent;color:var(--faint);font-style:italic}
.rrhh-ui .rr-b-flex{display:inline-flex;align-items:center;gap:6px}

/* ── Menú desplegable ────────────────────────────────────────────────── */
.rrhh-ui .rr-drop-menu{display:block;position:absolute;top:calc(100% + 6px);right:0;
  width:280px;max-height:320px;overflow-y:auto;background:var(--surface);
  border:1px solid var(--hair);border-radius:12px;box-shadow:var(--shadow);
  padding:6px;z-index:40}
.rrhh-ui .rr-drop-menu.hidden{display:none}
.rrhh-ui .rr-drop-vacio{text-align:center;padding:18px;color:var(--faint);
  font-size:.78rem;font-style:italic}
.rrhh-ui .rr-drop-item{display:flex;width:100%;align-items:center;justify-content:space-between;
  gap:10px;background:none;border:none;font:inherit;text-align:left;cursor:pointer;
  padding:8px 10px;border-radius:8px;color:var(--ink)}
.rrhh-ui .rr-drop-item:hover{background:var(--navy-050)}
.rrhh-ui .rr-drop-item b{display:block;font-size:.8rem;font-weight:700}
.rrhh-ui .rr-drop-item span{font-size:.72rem;color:var(--muted)}
.rrhh-ui .rr-drop-item .material-symbols-outlined{font-size:17px;color:var(--faint)}
.rrhh-ui .rr-drop-item:hover .material-symbols-outlined{color:var(--navy-500)}

/* ── Overlay de carga sobre una tarjeta ──────────────────────────────── */
.rrhh-ui .rr-overlay{display:flex;position:absolute;inset:0;z-index:30;
  flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(2px);
  border-radius:var(--r-card)}
.rrhh-ui .rr-overlay.hidden{display:none}
.rrhh-ui .rr-overlay p{font-size:.8rem;font-weight:600;color:var(--navy)}

/* ── Navegación en columna (parámetros) ──────────────────────────────── */
.rrhh-ui .rr-navlist{display:block;width:100%;text-align:left;font:inherit;
  font-size:.79rem;font-weight:600;color:var(--muted);cursor:pointer;
  padding:9px 12px;border:1px solid transparent;border-radius:8px;background:none}
.rrhh-ui .rr-navlist:hover{background:var(--navy-050);color:var(--navy-500)}
.rrhh-ui .rr-navlist[aria-selected="true"]{background:var(--navy);color:#fff;
  border-color:var(--navy);font-weight:700}

/* ── Ítem de catálogo editable (competencias, tipos de turno) ────────── */
.rrhh-ui .rr-catalogo-item{display:flex;align-items:center;justify-content:space-between;
  gap:8px;border:1px solid var(--hair);border-radius:8px;padding:8px 10px;background:#fff}
.rrhh-ui .rr-catalogo-item:hover{border-color:var(--navy-500)}
.rrhh-ui .rr-catalogo-item > span{font-size:.79rem;font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Opción de una lista de selección única (motivos de sanción) ─────── */
.rrhh-ui .btn-motivo{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  font:inherit;font-size:.79rem;font-weight:600;color:var(--muted);cursor:pointer;
  padding:10px 12px;border:1px solid var(--hair);border-radius:9px;background:#fff}
.rrhh-ui .btn-motivo:hover{border-color:var(--navy-500);color:var(--navy-500)}
.rrhh-ui .btn-motivo .dot-motivo{width:8px;height:8px;border-radius:99px;flex:0 0 auto;
  background:var(--hair-strong)}
.rrhh-ui .btn-motivo.on{border-color:var(--navy);background:var(--navy-050);color:var(--navy)}
.rrhh-ui .btn-motivo.on .dot-motivo{background:var(--navy)}

/* ── Interruptor con etiqueta descriptiva ────────────────────────────── */
.rrhh-ui .rr-switch{display:flex;align-items:center;gap:10px;padding:9px 12px;
  border:1px solid var(--hair-strong);border-radius:8px;background:#fff;cursor:pointer;
  user-select:none}
.rrhh-ui .rr-switch:hover{border-color:var(--navy-500)}
.rrhh-ui .rr-switch input{width:17px;height:17px;accent-color:var(--navy);flex:0 0 auto;cursor:pointer}
.rrhh-ui .rr-switch .k{flex:1;min-width:0}
.rrhh-ui .rr-switch .k b{display:block;font-size:.8rem;font-weight:700}
.rrhh-ui .rr-switch .k span{font-size:.72rem;color:var(--muted)}

/* ── Modales ─────────────────────────────────────────────────────────── */
/* El root del modal lleva `rrhh-ui rr-modal` para entrar en el scope de la
   identidad aunque cuelgue del <body>. La regla de fondo va con doble clase
   para ganarle a `.rrhh-ui` a secas sin depender del orden de Tailwind. */
.rrhh-ui.rr-modal{display:flex;position:fixed;inset:0;z-index:10000;
  align-items:center;justify-content:center;padding:16px;
  background:rgba(20,28,44,.55);backdrop-filter:blur(2px)}
.rrhh-ui.rr-modal.hidden{display:none}
.rrhh-ui .rr-modal-panel{display:flex;flex-direction:column;width:100%;
  max-height:85vh;overflow:hidden;background:var(--surface);
  border-radius:var(--r-card);box-shadow:0 18px 50px rgba(20,40,80,.28)}
.rrhh-ui .rr-modal-h{display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:14px 18px;border-bottom:1px solid var(--hair)}
.rrhh-ui .rr-modal-h h3{font-size:.95rem;font-weight:700;color:var(--navy);margin:0}
.rrhh-ui .rr-modal-h p{font-size:.75rem;color:var(--muted);margin:2px 0 0}
.rrhh-ui .rr-modal-b{flex:1;overflow-y:auto;min-height:120px}
.rrhh-ui .rr-modal-f{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:11px 18px;border-top:1px solid var(--hair);background:#fafbfd}
.rrhh-ui .rr-x{background:none;border:none;cursor:pointer;color:var(--faint);
  display:flex;padding:4px;border-radius:6px}
.rrhh-ui .rr-x:hover{color:var(--ink);background:var(--navy-050)}

/* Cabecera de ficha: identidad a la izquierda, cifra de cabecera a la derecha */
.rrhh-ui .rr-ficha-hdr{display:flex;align-items:center;gap:16px;padding:16px 20px;
  background:var(--navy);color:#fff;flex-wrap:wrap}
.rrhh-ui .rr-ficha-hdr .av{width:46px;height:46px;border-radius:11px;flex:0 0 auto;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;font-weight:700;
  font-size:1rem;letter-spacing:.5px}
.rrhh-ui .rr-ficha-hdr h3{font-size:1.16rem;font-weight:700;margin:0;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rrhh-ui .rr-ficha-hdr .meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  margin:3px 0 0;font-size:.73rem;color:rgba(255,255,255,.66)}
.rrhh-ui .rr-ficha-hdr .meta > span:not(:last-child):not(.hidden)::after{content:'·';margin-left:8px;
  color:rgba(255,255,255,.35)}
.rrhh-ui .rr-ficha-hdr .score{text-align:right;flex:0 0 auto;padding-left:6px}
.rrhh-ui .rr-ficha-hdr .score .lab{display:block;font-size:.62rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.9px;color:rgba(255,255,255,.6)}
.rrhh-ui .rr-ficha-hdr .score .val{font-size:.95rem;color:rgba(255,255,255,.6);
  font-variant-numeric:tabular-nums}
.rrhh-ui .rr-ficha-hdr .score .val b{font-size:1.6rem;font-weight:800;color:#fff}
@media(max-width:820px){
  .rrhh-ui .rr-ficha-grid{grid-template-columns:1fr!important}
}

/* Filas de composición dentro del modal */
.rrhh-ui .rr-item{display:flex;align-items:center;gap:8px;padding:8px 18px;
  border-bottom:1px solid var(--hair);font-size:.79rem}
.rrhh-ui .rr-item:last-child{border-bottom:none}
.rrhh-ui .rr-item .fch{font-variant-numeric:tabular-nums;color:var(--muted);width:180px;flex:0 0 auto}
.rrhh-ui .rr-item .val{font-weight:700;width:88px;text-align:center;flex:0 0 auto;
  font-variant-numeric:tabular-nums}
.rrhh-ui .rr-item .mot{flex:1;color:var(--muted);min-width:0}
.rrhh-ui .rr-item .material-symbols-outlined{font-size:16px;flex:0 0 auto}
.rrhh-ui .rr-item .ico-manual{color:var(--warn)}
.rrhh-ui .rr-item .ico-auto{color:var(--faint)}
.rrhh-ui .rr-del{background:none;border:none;cursor:pointer;color:var(--faint);
  display:flex;padding:3px;border-radius:6px;flex:0 0 auto}
.rrhh-ui .rr-del:hover{color:var(--crit);background:var(--crit-050)}
.rrhh-ui .rr-in.sm{font-size:.76rem;padding:5px 8px}
.rrhh-ui .rr-txt{width:100%;font:inherit;font-size:.82rem;padding:10px 12px;
  border:1px solid var(--hair-strong);border-radius:8px;resize:vertical;color:var(--ink)}
.rrhh-ui .rr-txt:focus{border-color:var(--navy-500);outline:none;
  box-shadow:0 0 0 3px rgba(43,82,150,.12)}
.rrhh-ui .rr-txt:read-only{background:#fafbfd;color:var(--muted)}
.rrhh-ui .rr-readonly{font-size:.82rem;color:var(--ink);background:var(--navy-050);
  border:1px solid var(--hair);border-radius:9px;padding:11px 13px;min-height:44px}

/* ── Celda-bloque de la planilla de pre-liquidación ──────────────────── */
/* Toda la celda es el botón: el área de clic coincide con lo que se ve. */
.rrhh-ui table.rr-g td.p0{padding:0}
.rrhh-ui .rr-blk{display:block;width:100%;min-height:30px;padding:6px 10px;
  border:none;background:none;font:inherit;font-size:.79rem;font-weight:600;
  color:var(--ink);cursor:pointer;text-align:center;font-variant-numeric:tabular-nums}
.rrhh-ui .rr-blk:hover{background:var(--navy-050);box-shadow:inset 0 0 0 1px var(--navy-500)}
.rrhh-ui .rr-blk.l{text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rrhh-ui .rr-blk.neg{color:var(--crit);font-weight:700}
.rrhh-ui .rr-blk .ph{color:var(--faint);font-weight:400}
.rrhh-ui .rr-blk:disabled{cursor:default}
.rrhh-ui .rr-blk:disabled:hover{background:none;box-shadow:none}

/* ── Estados de asistencia ───────────────────────────────────────────── */
/* Antes había 12 familias de color para 22 estados. Ahora son 5 niveles
   semánticos: conforme / informativo / neutro / atención / problema.        */
.rrhh-ui .rr-est{font-weight:700;border-radius:6px}
.rrhh-ui .rr-est.ok{color:var(--ok);background:var(--ok-050)}
.rrhh-ui .rr-est.wrn{color:var(--warn);background:var(--warn-050)}
.rrhh-ui .rr-est.neg{color:var(--crit);background:var(--crit-050)}
.rrhh-ui .rr-est.nav{color:var(--navy-500);background:var(--navy-050)}
.rrhh-ui .rr-est.mut{color:var(--faint);font-style:italic}

/* Campos editables dentro de una fila de tabla */
.rrhh-ui .rr-cell{background:transparent;border:1px solid transparent;width:100%;
  border-radius:5px;padding:3px 5px;font:inherit;font-size:.77rem;font-weight:600;
  color:var(--ink);font-variant-numeric:tabular-nums}
.rrhh-ui .rr-cell:hover:not(:disabled){border-color:var(--hair-strong);background:#fff}
.rrhh-ui .rr-cell:focus{border-color:var(--navy-500);background:#fff;outline:none;
  box-shadow:0 0 0 3px rgba(43,82,150,.12)}
.rrhh-ui .rr-cell:disabled{opacity:.55;cursor:not-allowed}
.rrhh-ui .rr-cell.c{text-align:center}

/* Marcas de origen / estado de la fila.
   Orden importante: .rr-modificado va último para ganarle a .rr-consolidado
   cuando una fila ya guardada se toca de nuevo.                              */
.rrhh-ui table.rr-g tr.rr-consolidado td{background:var(--ok-050)}
.rrhh-ui table.rr-g tr.rr-consolidado:hover td{background:#e3f1ea}
.rrhh-ui table.rr-g tr.rr-autoreporte td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.rrhh-ui table.rr-g tr.rr-modificado td{background:var(--warn-050)}
.rrhh-ui table.rr-g tr.rr-modificado:hover td{background:#fbead1}
/* Fila que cumple el criterio que se está buscando (p. ej. días con adicionales) */
.rrhh-ui table.rr-g tr.rr-destacada td{background:var(--navy-050)}

/* ── KPIs ────────────────────────────────────────────────────────────── */
.rrhh-ui .rr-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:12px;margin-bottom:14px}
.rrhh-ui .rr-kpi{background:var(--surface);border:1px solid var(--hair);border-radius:12px;
  padding:13px 15px;box-shadow:var(--shadow);border-top:3px solid var(--navy)}
.rrhh-ui .rr-kpi.pos{border-top-color:var(--ok)}
.rrhh-ui .rr-kpi.neg{border-top-color:var(--crit)}
.rrhh-ui .rr-kpi.wrn{border-top-color:var(--warn)}
.rrhh-ui .rr-kpi .lab{font-size:.62rem;text-transform:uppercase;letter-spacing:.7px;
  color:var(--faint);font-weight:700}
.rrhh-ui .rr-kpi .val{font-size:1.4rem;font-weight:700;color:var(--navy);margin-top:5px;
  line-height:1.15;font-variant-numeric:tabular-nums}
.rrhh-ui .rr-kpi .val.pos{color:var(--ok)}
.rrhh-ui .rr-kpi .val.neg{color:var(--crit)}
.rrhh-ui .rr-kpi .val.wrn{color:var(--warn)}
.rrhh-ui .rr-kpi .sub{font-size:.71rem;color:var(--muted);margin-top:4px}
/* Variante de barra lateral: el acento va a la izquierda. Se usa dentro de
   fichas y modales, donde la tarjeta se lee en fila y no en grilla de tablero. */
.rrhh-ui .rr-kpi.side{border-top:1px solid var(--hair);border-left:4px solid var(--navy)}
.rrhh-ui .rr-kpi.side.pos{border-left-color:var(--ok)}
.rrhh-ui .rr-kpi.side.neg{border-left-color:var(--crit)}
.rrhh-ui .rr-kpi.side.wrn{border-left-color:var(--warn)}

/* ── Lista de definiciones (datos de una ficha) ──────────────────────── */
.rrhh-ui .rr-dl{display:flex;flex-direction:column}
.rrhh-ui .rr-dl > div{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;padding:9px 0;border-bottom:1px solid var(--hair)}
.rrhh-ui .rr-dl > div:last-child{border-bottom:none}
.rrhh-ui .rr-dl dt{font-size:.79rem;color:var(--muted);flex:0 0 auto}
.rrhh-ui .rr-dl dd{font-size:.82rem;font-weight:700;text-align:right;margin:0;
  min-width:0;overflow-wrap:anywhere}
.rrhh-ui .rr-dl dd.vacio{font-weight:400;color:var(--faint);font-style:italic}

/* ── Medidor con marcador (valor real vs. pactado) ───────────────────── */
.rrhh-ui .rr-gauge{margin-top:10px}
.rrhh-ui .rr-gauge .big{font-size:2rem;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--navy)}
.rrhh-ui .rr-gauge .big.pos{color:var(--ok)}
.rrhh-ui .rr-gauge .big.wrn{color:var(--warn)}
.rrhh-ui .rr-gauge .big.neg{color:var(--crit)}
.rrhh-ui .rr-gauge .head{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.rrhh-ui .rr-gauge .head .x{font-size:.79rem;color:var(--muted)}
.rrhh-ui .rr-gauge .head .dlt{font-size:.79rem;font-weight:700}
.rrhh-ui .rr-gauge .track{position:relative;height:9px;border-radius:99px;
  background:var(--navy-050);margin:12px 0 5px;overflow:visible}
.rrhh-ui .rr-gauge .fill{position:absolute;left:0;top:0;bottom:0;border-radius:99px;
  background:var(--navy)}
.rrhh-ui .rr-gauge .fill.pos{background:var(--ok)}
.rrhh-ui .rr-gauge .fill.wrn{background:var(--warn)}
.rrhh-ui .rr-gauge .fill.neg{background:var(--crit)}
/* El marcador es el compromiso: lo pactado, no lo medido. */
.rrhh-ui .rr-gauge .mark{position:absolute;top:-4px;bottom:-4px;width:2px;
  background:var(--ink);border-radius:2px}
.rrhh-ui .rr-gauge .scale{display:flex;justify-content:space-between;
  font-size:.68rem;color:var(--faint)}
.rrhh-ui .rr-gauge .nota{font-size:.74rem;color:var(--muted);margin-top:10px;line-height:1.45}

/* ── Barra apilada de distribución ───────────────────────────────────── */
.rrhh-ui .rr-stack{display:flex;height:26px;border-radius:7px;overflow:hidden;
  background:var(--navy-050)}
.rrhh-ui .rr-stack span{display:flex;align-items:center;justify-content:center;
  font-size:.68rem;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden}
.rrhh-ui .rr-stack .s-ok{background:var(--ok)}
.rrhh-ui .rr-stack .s-wrn{background:var(--warn)}
.rrhh-ui .rr-stack .s-neg{background:var(--crit)}
.rrhh-ui .rr-stack .s-nav{background:var(--navy-500)}
.rrhh-ui .rr-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;
  font-size:.75rem;color:var(--muted)}
.rrhh-ui .rr-legend span{display:flex;align-items:center;gap:6px}
.rrhh-ui .rr-legend i{width:11px;height:11px;border-radius:3px;display:inline-block;flex:0 0 auto}

/* ── Filas de lista ──────────────────────────────────────────────────── */
.rrhh-ui .rr-rows{display:flex;flex-direction:column}
.rrhh-ui .rr-row{display:flex;align-items:center;gap:13px;padding:10px 16px;
  border-bottom:1px solid var(--hair)}
.rrhh-ui .rr-row:last-child{border-bottom:none}
.rrhh-ui .rr-row:hover{background:var(--navy-050)}
.rrhh-ui .rr-row .k{flex:1;min-width:0}
.rrhh-ui .rr-row .k b{font-weight:700;font-size:.82rem;display:block}
.rrhh-ui .rr-row .k span{font-size:.74rem;color:var(--muted)}
.rrhh-ui .rr-row .v{font-size:.77rem;color:var(--muted);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.rrhh-ui .rr-av{width:38px;height:38px;border-radius:99px;flex:0 0 auto;
  background:var(--navy-050);color:var(--navy);display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:.8rem;letter-spacing:.5px}
.rrhh-ui .rr-row:hover .rr-av{background:var(--navy);color:#fff}

/* ── Avisos ──────────────────────────────────────────────────────────── */
.rrhh-ui .rr-risk{border-left:4px solid var(--hair-strong);background:#fafbfd;
  border-radius:0 9px 9px 0;padding:11px 15px;margin-bottom:12px}
.rrhh-ui .rr-risk.info{border-left-color:var(--navy-500);background:var(--navy-050)}
.rrhh-ui .rr-risk.alerta{border-left-color:var(--warn);background:var(--warn-050)}
.rrhh-ui .rr-risk.critico{border-left-color:var(--crit);background:var(--crit-050)}
.rrhh-ui .rr-risk .t{font-weight:700;font-size:.84rem;margin-bottom:2px}
.rrhh-ui .rr-risk .x{color:var(--muted);font-size:.8rem;line-height:1.5}
.rrhh-ui .rr-risk.alerta .x,.rrhh-ui .rr-risk.critico .x{color:inherit;opacity:.85}

/* ── Medidor ─────────────────────────────────────────────────────────── */
.rrhh-ui .rr-meter{background:var(--navy-050);border-radius:99px;overflow:hidden;
  width:100%;min-width:70px;height:7px}
.rrhh-ui .rr-meter span{display:block;height:100%;border-radius:99px;background:var(--navy)}
.rrhh-ui .rr-meter span.ok{background:var(--ok)}
.rrhh-ui .rr-meter span.wrn{background:var(--warn)}
.rrhh-ui .rr-meter span.neg{background:var(--crit)}

/* ── Zona de carga de archivo ────────────────────────────────────────── */
/* OJO CON EL NOMBRE: `.rr-drop` es la ZONA DE SOLTAR un archivo (el CSV del
   reloj, rrhh.js). NO es el ancla de un desplegable, aunque `.rr-drop-menu`
   de más arriba se llame parecido: el ancla de un desplegable es `.rr-mas`.
   Usar ésta para un menú lo dibuja como un cuadro de subir archivos. */
.rrhh-ui .rr-drop{border:2px dashed var(--hair-strong);border-radius:var(--r-card);
  background:#fff;padding:40px 24px;text-align:center;color:var(--muted);max-width:520px}
.rrhh-ui .rr-drop .material-symbols-outlined{font-size:42px;color:var(--navy-500);
  margin-bottom:10px}
.rrhh-ui .rr-drop .t{font-weight:700;color:var(--ink);font-size:.9rem;margin-bottom:4px}
.rrhh-ui .rr-drop .x{font-size:.79rem;max-width:44ch;margin:0 auto 14px}

/* ── Barras internas de los hubs heredados ───────────────────────────── */
/* El router externo (rrhhGo) es ahora la única navegación del módulo: las
   barras de pestañas propias de Gerencia y del hub de WhatsApp se ocultan
   para no duplicar navegación. Ver rrhh_gestion.js y rrhh_whatsapp.js.      */
.rrhh-ui .rr-nav-legacy{display:none!important}

/* ── Área de trabajo ─────────────────────────────────────────────────── */
.rrhh-ui .rr-work{flex:1;overflow:hidden;position:relative;background:var(--canvas)}
.rrhh-ui .rr-view{height:100%;overflow:auto}
.rrhh-ui .rr-pad{padding:18px 24px 28px}

/* ═══════════════════════════════════════════════════════════════════════════
   INTERACCIÓN — qué hace cada control cuando el cursor lo toca
   ---------------------------------------------------------------------------
   Cada tipo de control se mueve como corresponde a lo que hace:
     · lo que NAVEGA en columna se corre a la derecha (hacia el contenido)
     · lo que se PRESIONA se levanta con sombra y se hunde al hacer clic
     · lo que se ELIGE de una lista se corre y se tiñe
     · los íconos de acción crecen dentro de su círculo
   Todo con transform y box-shadow (compositables): no reflowean la página.
   El foco de teclado recibe el mismo trato que el hover — quien navega con
   Tab tiene que ver lo mismo que quien usa el mouse.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Botones de acción: se levantan y se hunden al presionar */
.rrhh-ui .rr-btn{transition:background .14s ease,border-color .14s ease,
  transform .12s cubic-bezier(.2,.8,.3,1),box-shadow .14s ease}
.rrhh-ui .rr-btn:hover:not(:disabled){transform:translateY(-2px);
  box-shadow:0 5px 14px rgba(0,43,107,.30)}
.rrhh-ui .rr-btn:active:not(:disabled){transform:translateY(1px);
  box-shadow:0 1px 3px rgba(0,43,107,.22)}
.rrhh-ui .rr-btn.sec:hover:not(:disabled){box-shadow:0 5px 14px rgba(0,43,107,.16)}
.rrhh-ui .rr-btn.ok:hover:not(:disabled){box-shadow:0 5px 14px rgba(15,122,82,.34)}

.rrhh-ui .rr-btn-ghost{transition:background .14s ease,
  transform .12s cubic-bezier(.2,.8,.3,1),box-shadow .14s ease}
.rrhh-ui .rr-btn-ghost:hover:not(:disabled){transform:translateY(-2px);
  background:rgba(255,255,255,.26);box-shadow:0 5px 14px rgba(0,0,0,.22)}
.rrhh-ui .rr-btn-ghost:active:not(:disabled){transform:translateY(1px);box-shadow:none}
/* El ícono de recargar gira mientras se lo apunta: anticipa lo que va a pasar */
.rrhh-ui .rr-btn-ghost .material-symbols-outlined{transition:transform .35s ease}
.rrhh-ui .rr-btn-ghost:hover:not(:disabled) .material-symbols-outlined{transform:rotate(180deg)}

/* Navegación en columna: se corre hacia el contenido y le crece una barra */
.rrhh-ui .rr-navlist{position:relative;
  transition:background .14s ease,color .14s ease,transform .14s cubic-bezier(.2,.8,.3,1)}
.rrhh-ui .rr-navlist::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;
  border-radius:0 3px 3px 0;background:var(--navy-500);transform:scaleY(0);
  transition:transform .18s cubic-bezier(.2,.8,.3,1)}
.rrhh-ui .rr-navlist:hover::before,
.rrhh-ui .rr-navlist:focus-visible::before{transform:scaleY(1)}
.rrhh-ui .rr-navlist:hover,
.rrhh-ui .rr-navlist:focus-visible{transform:translateX(4px)}
.rrhh-ui .rr-navlist[aria-selected="true"]{transform:none}
.rrhh-ui .rr-navlist[aria-selected="true"]::before{display:none}

/* Chips: se levantan y toman el color de marca */
.rrhh-ui .rr-chip{transition:background .14s ease,border-color .14s ease,color .14s ease,
  transform .12s cubic-bezier(.2,.8,.3,1),box-shadow .14s ease}
.rrhh-ui .rr-chip:hover{background:var(--navy-050);transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(0,43,107,.16)}
.rrhh-ui .rr-chip:active{transform:translateY(0);box-shadow:none}
.rrhh-ui .rr-chip.on:hover{background:var(--navy-050);border-color:var(--navy);color:var(--navy)}

/* Íconos de acción: el círculo aparece y el ícono crece */
.rrhh-ui .rr-x,.rrhh-ui .rr-del{transition:background .14s ease,color .14s ease,
  transform .12s cubic-bezier(.2,.8,.3,1)}
.rrhh-ui .rr-x:hover,.rrhh-ui .rr-del:hover{transform:scale(1.18)}
.rrhh-ui .rr-x:active,.rrhh-ui .rr-del:active{transform:scale(.96)}

/* Opciones de lista: se corren y se tiñen */
.rrhh-ui .rr-drop-item,.rrhh-ui .btn-motivo{
  transition:background .14s ease,border-color .14s ease,color .14s ease,
             transform .14s cubic-bezier(.2,.8,.3,1)}
.rrhh-ui .rr-drop-item:hover,.rrhh-ui .btn-motivo:hover{transform:translateX(4px)}
.rrhh-ui .btn-motivo:hover{background:var(--navy-050)}

/* Ítems de catálogo y competencias: se levantan */
.rrhh-ui .rr-catalogo-item,.rrhh-ui .skill-card,.rrhh-ui .rr-switch{
  transition:border-color .14s ease,background .14s ease,color .14s ease,
             transform .12s cubic-bezier(.2,.8,.3,1),box-shadow .14s ease}
.rrhh-ui .rr-catalogo-item:hover,.rrhh-ui .skill-card:hover,.rrhh-ui .rr-switch:hover{
  transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,43,107,.14)}

/* Filas de lista: barra de color a la izquierda para marcar dónde está el cursor */
.rrhh-ui .rr-row{position:relative;transition:background .14s ease}
.rrhh-ui .rr-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--navy-500);transform:scaleY(0);
  transition:transform .16s cubic-bezier(.2,.8,.3,1)}
.rrhh-ui .rr-row:hover::before{transform:scaleY(1)}

/* Celdas editables: el borde aparece completo, no apenas insinuado */
.rrhh-ui .rr-cell{transition:background .14s ease,border-color .14s ease,box-shadow .14s ease}
.rrhh-ui .rr-blk{transition:background .14s ease,box-shadow .14s ease}

/* Quien pidió menos movimiento conserva el destaque, pero sin desplazamiento:
   los cambios de color y fondo quedan, y los indicadores aparecen de golpe
   en lugar de crecer. */
@media (prefers-reduced-motion:reduce){
  .rrhh-ui .rr-btn:hover,.rrhh-ui .rr-btn:active,
  .rrhh-ui .rr-btn-ghost:hover,.rrhh-ui .rr-btn-ghost:active,
  .rrhh-ui .rr-subnav button:hover,.rrhh-ui .rr-subnav button:active,
  .rrhh-ui .rr-chip:hover,.rrhh-ui .rr-navlist:hover,
  .rrhh-ui .rr-x:hover,.rrhh-ui .rr-del:hover,
  .rrhh-ui .rr-drop-item:hover,.rrhh-ui .btn-motivo:hover,
  .rrhh-ui .rr-catalogo-item:hover,.rrhh-ui .skill-card:hover,
  .rrhh-ui .rr-switch:hover,
  .rrhh-ui .rr-btn-ghost:hover .material-symbols-outlined,
  .rrhh-ui .rr-secnav button:hover .material-symbols-outlined{transform:none!important}

  .rrhh-ui .rr-secnav button::after,
  .rrhh-ui .rr-navlist::before,
  .rrhh-ui .rr-row::before{transform:none!important;opacity:0}
  .rrhh-ui .rr-secnav button:hover::after,
  .rrhh-ui .rr-secnav button:focus-visible::after,
  .rrhh-ui .rr-secnav button[aria-selected="true"]::after,
  .rrhh-ui .rr-navlist:hover::before,
  .rrhh-ui .rr-row:hover::before{opacity:1}
}

/* =============================================================================
   DOTACIÓN DE PLANTA — Personal › Dotación, Proyección y Puestos
   -----------------------------------------------------------------------------
   Todo bajo el prefijo `dot-`, dentro del scope .rrhh-ui. No hay ni un color
   nuevo: el estado sale de los tres tokens de siempre (--ok / --warn / --crit)
   y la marca sigue siendo navy. Lo único propio es la geometría del gantt.
   ========================================================================== */

/* ── La banda de área dentro de la tabla de puestos ──────────────────── */
/* Es un encabezado de grupo, no una fila de datos: por eso no toma el hover
   de `tbody tr:hover` ni la regla inferior de las celdas. */
.rrhh-ui table.rr-g td.dot-area{background:#f4f6fa;font-size:.64rem;font-weight:800;
  letter-spacing:.6px;text-transform:uppercase;color:var(--faint);
  padding:7px 11px;border-bottom:1px solid var(--hair-strong)}
.rrhh-ui table.rr-g tbody tr:hover td.dot-area{background:#f4f6fa}

/* ── El teñido de la fila por estado ─────────────────────────────────── */
/* Sólo el rojo y el ámbar tiñen. Si el verde también pintara, la tabla sería
   un semáforo completo y no se vería cuál es el problema: el fondo blanco ES
   el estado normal. */
.rrhh-ui table.rr-g tr.dot-neg > td{background:var(--crit-050)}
.rrhh-ui table.rr-g tr.dot-wrn > td{background:var(--warn-050)}
.rrhh-ui table.rr-g tbody tr.dot-neg:hover > td{background:#fbe0e0}
.rrhh-ui table.rr-g tbody tr.dot-wrn:hover > td{background:#faead2}

/* La fila de detalle hereda el teñido de la fila que la explica: son una sola
   cosa partida en dos <tr>, y si el detalle quedara blanco se leería como otro
   puesto. */
.rrhh-ui table.rr-g tr.dot-detalle > td{padding:0 11px 11px;border-bottom:1px solid #edeef2}
.rrhh-ui table.rr-g tr.dot-neg + tr.dot-detalle > td{background:var(--crit-050)}
.rrhh-ui table.rr-g tr.dot-wrn + tr.dot-detalle > td{background:var(--warn-050)}
.rrhh-ui table.rr-g tbody tr.dot-detalle:hover > td{background:inherit}

.rrhh-ui .dot-rot{font-size:.66rem;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;color:var(--faint);margin-right:2px;align-self:center}

.rrhh-ui .dot-est{padding:2px 7px;font-size:.7rem;white-space:nowrap}

.rrhh-ui .dot-nota{font-size:.71rem;font-weight:400;color:var(--muted);
  line-height:1.4;margin-top:2px;max-width:46ch;white-space:normal}

/* ── Los seis meses de la proyección ─────────────────────────────────── */
/* Grid y no flex: las seis columnas tienen que medir lo mismo aunque un mes
   tenga un número de dos dígitos y otro de cuatro caracteres. `minmax(0,1fr)`
   porque un `1fr` pelado se estira con el contenido más largo. */
.rrhh-ui .dot-meses{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.rrhh-ui .dot-mes-rot{font-size:.62rem;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;color:var(--faint);margin-bottom:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrhh-ui .dot-delta-neg{color:var(--crit);font-weight:700}

@media (max-width:1100px){
  .rrhh-ui .dot-meses{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:620px){
  .rrhh-ui .dot-meses{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── El gantt de vencimientos ────────────────────────────────────────── */
/* La barra se posiciona en porcentaje sobre el ancho de la ventana completa,
   así que el carril tiene que ser `position:relative` y las columnas de meses
   son sólo la rejilla de fondo: no contienen las barras. Si las barras
   vivieran dentro de las celdas del mes, un contrato que cruza dos meses
   habría que partirlo en dos. */
.rrhh-ui .gantt{--cols:6;font-size:.76rem;overflow-x:auto}
.rrhh-ui .gantt .hd,
.rrhh-ui .gantt .fila{display:grid;
  grid-template-columns:13.5rem repeat(var(--cols),minmax(0,1fr));align-items:center}
.rrhh-ui .gantt .hd{border-bottom:2px solid var(--ink);padding-bottom:5px;margin-bottom:2px}
.rrhh-ui .gantt .hd > div{font-size:.6rem;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;color:var(--faint);text-align:center;min-width:0}
.rrhh-ui .gantt .hd > div:first-child{text-align:left}
.rrhh-ui .gantt .fila{border-bottom:1px solid var(--hair);min-height:34px}
.rrhh-ui .gantt .fila:last-child{border-bottom:none}
.rrhh-ui .gantt .fila:hover{background:var(--navy-050)}
.rrhh-ui .gantt .who{padding:5px 10px 5px 0;min-width:0}
.rrhh-ui .gantt .who b{display:block;font-weight:700;font-size:.77rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrhh-ui .gantt .who span{font-size:.66rem;color:var(--muted);
  display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrhh-ui .gantt .lane{position:relative;grid-column:2 / -1;height:100%;min-width:0}
.rrhh-ui .gantt .grid{position:absolute;inset:0;display:grid;
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));pointer-events:none}
.rrhh-ui .gantt .grid i{border-left:1px solid var(--hair)}
.rrhh-ui .gantt .bar{position:absolute;top:50%;transform:translateY(-50%);
  height:15px;border-radius:4px;background:var(--navy)}
.rrhh-ui .gantt .bar.plazo{background:var(--ok)}
.rrhh-ui .gantt .bar.efectivo{background:var(--warn)}
.rrhh-ui .gantt .bar.ausencia{background:var(--navy-300)}
.rrhh-ui .gantt .corte{position:absolute;top:6px;bottom:6px;width:3px;
  background:var(--crit);border-radius:2px;z-index:2}
.rrhh-ui .gantt .corte::after{content:'';position:absolute;left:-3px;top:-4px;
  width:9px;height:9px;border-radius:99px;background:var(--crit)}
.rrhh-ui .gantt .corte-rot{position:absolute;top:50%;transform:translateY(-50%);
  font-size:.64rem;font-weight:700;color:var(--crit);white-space:nowrap;
  font-variant-numeric:tabular-nums;pointer-events:none}

@media (max-width:760px){
  .rrhh-ui .gantt .hd,
  .rrhh-ui .gantt .fila{grid-template-columns:9rem repeat(var(--cols),minmax(0,1fr))}
}

/* ── El legajo: puesto titular y puestos que puede cubrir ────────────── */
.rrhh-ui .dot-puestos{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.rrhh-ui .dot-abierto{font-size:.71rem;color:var(--muted);font-style:italic;
  align-self:center}

/* =============================================================================
   TURNO DE HOY — «el semáforo de la planta» (rrhh_turno_hoy.js)
   Etapa 3b. La unidad es el PUESTO: la pantalla contesta si arranca la planta.
   =========================================================================== */

.rrhh-ui .th-cab{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
    padding:11px 15px;margin-bottom:14px;border-radius:12px;
    background:var(--navy);color:#fff}
.rrhh-ui .th-cab-t{font-weight:700;font-size:.95rem;letter-spacing:.01em;
    font-variant-numeric:tabular-nums}
.rrhh-ui .th-cab-x{font-size:.78rem;opacity:.86}
.rrhh-ui .th-cab-x b{font-weight:700;opacity:1}
/* El botón de la barra navy no puede ser el `.rr-btn sec` de fondo claro: sobre
   navy se lee como un parche blanco. Se le da su propia cara translúcida. */
.rrhh-ui .th-cab .rr-btn{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.28);
    color:#fff}
.rrhh-ui .th-cab .rr-btn:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.45);
    color:#fff}

/* Los KPI son BOTONES: tienen que verse como que se pueden apretar, y el que
   está abierto tiene que verse abierto. Un `rr-kpi` suelto no dice ninguna de
   las dos cosas. Ojo: la escala de `.rr-kpi` es pos/neg/wrn, NO ok. */
.rrhh-ui button.th-kpi{font:inherit;text-align:left;cursor:pointer;width:100%;
    transition:box-shadow .12s,transform .12s}
.rrhh-ui button.th-kpi:hover{box-shadow:0 4px 14px -6px rgba(30,39,51,.3);transform:translateY(-1px)}
.rrhh-ui button.th-kpi:focus-visible{outline:2px solid var(--navy-500);outline-offset:2px}
.rrhh-ui button.th-kpi[aria-pressed="true"]{box-shadow:0 0 0 2px var(--navy-300) inset}

/* La fila del puesto — clickeable, con su franja de estado a la izquierda. */
.rrhh-ui tr.th-fila{cursor:pointer}
.rrhh-ui tr.th-fila:hover td{background:var(--navy-050)}
.rrhh-ui tr.th-fila:focus-visible{outline:2px solid var(--navy-500);outline-offset:-2px}
.rrhh-ui tr.th-fila td:first-child{border-left:3px solid transparent}
.rrhh-ui tr.th-fila.ok  td:first-child{border-left-color:var(--ok)}
.rrhh-ui tr.th-fila.wrn td:first-child{border-left-color:var(--warn)}
.rrhh-ui tr.th-fila.neg td:first-child{border-left-color:var(--crit)}
.rrhh-ui tr.th-fila.mut td:first-child{border-left-color:var(--hair)}
.rrhh-ui .th-nom{font-weight:600;font-size:.82rem;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rrhh-ui .th-frac{font-variant-numeric:tabular-nums;white-space:nowrap}
.rrhh-ui .th-frac b{font-size:.95rem}
.rrhh-ui .th-frac span{color:var(--faint);font-size:.74rem}
.rrhh-ui .th-nodato{color:var(--faint);font-style:italic}
.rrhh-ui .th-det{font-size:.75rem;color:var(--muted);line-height:1.4}
.rrhh-ui .th-riel{height:7px;border-radius:4px;background:var(--hair);overflow:hidden}
.rrhh-ui .th-riel i{display:block;height:100%;border-radius:4px}
.rrhh-ui .th-riel i.ok{background:var(--ok)}
.rrhh-ui .th-riel i.wrn{background:var(--warn)}
.rrhh-ui .th-riel i.neg{background:var(--crit)}
.rrhh-ui .th-riel i.mut{background:var(--hair)}

/* La franja de los que no ocupan puestos de planta (Administración, Portería). */
.rrhh-ui .th-otros{display:flex;gap:9px;flex-wrap:wrap}
.rrhh-ui .th-otro{font:inherit;text-align:left;cursor:pointer;min-width:150px;
    background:var(--surface);border:1px solid var(--hair);border-top:2px solid var(--hair);
    border-radius:10px;padding:9px 12px;transition:box-shadow .12s,transform .12s}
.rrhh-ui .th-otro:hover{box-shadow:0 4px 14px -6px rgba(30,39,51,.3);transform:translateY(-1px)}
.rrhh-ui .th-otro:focus-visible{outline:2px solid var(--navy-500);outline-offset:2px}
.rrhh-ui .th-otro.ok{border-top-color:var(--ok)}
.rrhh-ui .th-otro.wrn{border-top-color:var(--warn)}
.rrhh-ui .th-otro.neg{border-top-color:var(--crit)}
.rrhh-ui .th-otro .n{font-size:.68rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.06em;color:var(--muted)}
.rrhh-ui .th-otro .v{font-size:1.15rem;font-weight:700;font-variant-numeric:tabular-nums;
    margin-top:2px;line-height:1.1}
.rrhh-ui .th-otro .v span{font-size:.78rem;color:var(--faint);font-weight:600}
.rrhh-ui .th-otro.ok  .v{color:var(--ok)}
.rrhh-ui .th-otro.wrn .v{color:var(--warn)}
.rrhh-ui .th-otro.neg .v{color:var(--crit)}
.rrhh-ui .th-otro .x{font-size:.7rem;color:var(--faint);margin-top:2px;line-height:1.35}

/* La bandeja de detalle que se abre al clic. NO es un modal a propósito: el
   detalle tiene que poder leerse SIN perder de vista la tabla que lo originó. */
.rrhh-ui .th-bandeja{border:1px solid var(--navy-300);border-radius:12px;overflow:hidden;
    background:var(--surface);margin-bottom:14px}
.rrhh-ui .th-bandeja.neg{border-color:var(--crit-hair)}
.rrhh-ui .th-bandeja.wrn{border-color:var(--warn-hair)}
.rrhh-ui .th-bandeja.ok{border-color:var(--ok-hair)}
.rrhh-ui .th-bandeja-h{display:flex;align-items:center;gap:10px;padding:9px 13px;
    background:var(--navy-050);border-bottom:1px solid var(--hair)}
.rrhh-ui .th-bandeja-n{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.rrhh-ui .th-cerrar{margin-left:auto;border:0;background:transparent;cursor:pointer;
    color:var(--muted);font:inherit;font-size:1.15rem;line-height:1;padding:2px 6px;border-radius:6px}
.rrhh-ui .th-cerrar:hover{background:var(--hair);color:var(--ink)}
.rrhh-ui .th-cerrar:focus-visible{outline:2px solid var(--navy-500);outline-offset:1px}
.rrhh-ui .th-bandeja-p{font-size:.75rem;color:var(--muted);padding:9px 13px;
    background:var(--bg);border-top:1px solid var(--hair);line-height:1.45}

/* La tira del plan del mes (3b.4): qué pide hoy el escenario vigente. Navy
   tenue como lo informativo; «sin plan» y «no se pudo leer» van en gris. */
.rrhh-ui .th-plan{display:flex;gap:9px;align-items:flex-start;font-size:.78rem;color:var(--ink);line-height:1.5;
    padding:9px 13px;margin:0 0 12px;border:1px solid var(--hair);border-radius:10px;background:var(--navy-050)}
.rrhh-ui .th-plan.mut{background:var(--bg);color:var(--muted)}
.rrhh-ui .th-plan .material-symbols-outlined{color:var(--navy-500);margin-top:1px;flex:0 0 auto}
.rrhh-ui .th-plan small{color:var(--muted)}

@media (max-width:640px){
  .rrhh-ui .th-cab{gap:8px}
  .rrhh-ui .th-otro{min-width:0;flex:1 1 46%}
}

/* =============================================================================
   TURNO DE HOY — ronda 3, propuesta A «por horario» (27/08/2026)
   El veredicto, la línea del día, la rama por puesto, la semana, el mes y el
   modal de Inicio. Cero tokens propios.
   =========================================================================== */

/* El veredicto: UNA frase, con la cifra al tamaño del KPI del ABM. */
.rrhh-ui .th-veredicto{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
    background:var(--surface);border:1px solid var(--hair);border-left:4px solid var(--hair-strong);
    border-radius:12px;padding:12px 16px;margin-bottom:14px;box-shadow:var(--shadow)}
.rrhh-ui .th-veredicto.ok{border-left-color:var(--ok)}
.rrhh-ui .th-veredicto.neg{border-left-color:var(--crit)}
.rrhh-ui .th-veredicto.nav{border-left-color:var(--navy-500)}
.rrhh-ui .th-veredicto .v{font-size:1.4rem;font-weight:700;line-height:1.1;letter-spacing:-.01em;
    font-variant-numeric:tabular-nums;color:var(--navy);white-space:nowrap}
.rrhh-ui .th-veredicto.ok .v{color:var(--ok)}
.rrhh-ui .th-veredicto.neg .v{color:var(--crit)}
.rrhh-ui .th-veredicto.mut .v{color:var(--muted)}
.rrhh-ui .th-veredicto .x{font-size:.8rem;color:var(--muted);line-height:1.4;min-width:0}
.rrhh-ui .th-veredicto .x b{color:var(--ink)}
.rrhh-ui .th-veredicto .r{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap}

/* La línea del día: una banda por horario, de 05 a 23, con la hora actual. */
.rrhh-ui .th-linea{padding:14px 16px 10px}
.rrhh-ui .th-linea-h{display:grid;grid-template-columns:150px 1fr;gap:10px;align-items:center;
    font-size:.68rem;color:var(--faint);font-variant-numeric:tabular-nums}
.rrhh-ui .th-linea-h .esc{display:grid;grid-template-columns:repeat(18,1fr)}
.rrhh-ui .th-linea-h .esc span{border-left:1px solid var(--hair);padding-left:3px;line-height:1.6}
.rrhh-ui .th-linea-f{display:grid;grid-template-columns:150px 1fr;gap:10px;align-items:center;padding:5px 0}
.rrhh-ui .th-linea-f .n{font-size:.8rem;font-weight:600;line-height:1.25}
.rrhh-ui .th-linea-f .n small{display:block;font-weight:500;color:var(--faint);font-size:.68rem;font-variant-numeric:tabular-nums}
/* TODO riel es `position:relative`: la banda es absoluta y, sin esto, se ancla
   al contenedor de toda la línea y se estira de arriba a abajo (pasó el 27/08
   con los rieles por persona). */
.rrhh-ui .th-linea .rail{position:relative;height:26px;min-width:0;
    background:repeating-linear-gradient(90deg,var(--hair) 0 1px,transparent 1px calc(100%/18))}
.rrhh-ui .th-banda{position:absolute;top:3px;bottom:3px;border-radius:7px;background:var(--navy-050);
    border:1px solid var(--navy-300);display:flex;align-items:center;padding:0 9px;font-size:.72rem;
    font-weight:700;color:var(--navy);white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums}
.rrhh-ui .th-banda i{position:absolute;left:0;top:0;bottom:0;background:var(--navy-300);opacity:.35;border-radius:6px 0 0 6px}
.rrhh-ui .th-banda span{position:relative}
.rrhh-ui .th-banda.ok{border-color:var(--ok-hair);background:var(--ok-050);color:var(--ok)}
.rrhh-ui .th-banda.ok i{background:var(--ok);opacity:.22}
.rrhh-ui .th-banda.neg{border-color:var(--crit-hair);background:var(--crit-050);color:var(--crit)}
.rrhh-ui .th-banda.neg i{background:var(--crit);opacity:.18}
.rrhh-ui .th-banda.mut{border-style:dashed;border-color:var(--hair-strong);background:transparent;color:var(--faint);font-weight:600}
.rrhh-ui .th-ahora{position:absolute;top:0;bottom:0;width:2px;background:var(--navy);z-index:2}
.rrhh-ui .th-ahora::after{content:attr(data-h);position:absolute;top:-2px;left:6px;font-size:.62rem;font-weight:700;
    color:var(--navy);background:var(--surface);padding:0 4px;border-radius:4px;border:1px solid var(--navy-300);
    font-variant-numeric:tabular-nums;white-space:nowrap}

/* La lista de nombres dentro de una celda: cada persona un chip discreto. */
.rrhh-ui .th-gente{display:flex;flex-wrap:wrap;gap:4px 5px}
.rrhh-ui .th-gente span{font-size:.7rem;font-weight:600;color:var(--ink);background:var(--navy-050);
    border-radius:6px;padding:1px 7px;white-space:nowrap}
.rrhh-ui .th-gente span.prestado{background:var(--warn-050);color:var(--warn)}
.rrhh-ui .th-gente span.falta{background:var(--crit-050);color:var(--crit)}
.rrhh-ui .th-gente span.lic{background:transparent;border:1px dashed var(--hair-strong);color:var(--muted);font-weight:500}
.rrhh-ui .th-gente span.ho{background:var(--ok-050);color:var(--ok)}
.rrhh-ui .th-gente small{color:var(--faint);font-weight:500}

/* La demanda que todavía no existe: una nota apagada, no un cero. */
.rrhh-ui .th-prox{font-size:.7rem;color:var(--faint);font-style:italic;white-space:nowrap}

/* La rama que se abre debajo de un horario: su gente, por puesto. */
.rrhh-ui tr.th-fila[aria-expanded="true"] td{background:var(--navy-050)}
.rrhh-ui tr.th-rama > td{padding:0 0 0 14px;background:#fafbfc;border-bottom:1px solid var(--hair)}
.rrhh-ui .th-rama-in{border-left:3px solid var(--navy-300);margin:8px 12px 12px 0;background:var(--surface);
    border-radius:0 10px 10px 0;overflow:hidden;border-top:1px solid var(--hair);border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.rrhh-ui tr.th-puesto td{background:var(--surface);font-size:.78rem;padding-top:8px;border-bottom:0}
.rrhh-ui tr.th-puesto td b{color:var(--navy)}

/* SEMANA: seis columnas, hoy resaltado, lo que ya pasó apagado. */
.rrhh-ui .th-sem{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--hair)}
.rrhh-ui .th-sem>div{background:var(--surface);padding:10px 12px;min-height:118px;min-width:0}
.rrhh-ui .th-sem>div.hoy{background:var(--navy-050)}
.rrhh-ui .th-sem>div.libre{background:#fafbfc}
.rrhh-ui .th-sem .d{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
    display:flex;justify-content:space-between;align-items:baseline}
.rrhh-ui .th-sem .d b{font-size:.78rem;color:var(--ink);letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
.rrhh-ui .th-sem>div.hoy .d{color:var(--navy)}
.rrhh-ui .th-sem .disp{font-size:.95rem;font-weight:700;font-variant-numeric:tabular-nums;margin-top:6px;line-height:1.1}
.rrhh-ui .th-sem .disp small{font-size:.68rem;font-weight:600;color:var(--faint)}
.rrhh-ui .th-sem .disp.wrn{color:var(--warn)}
.rrhh-ui .th-sem ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:3px}
.rrhh-ui .th-sem li{font-size:.7rem;line-height:1.35;color:var(--muted);display:flex;gap:6px;align-items:baseline;min-width:0}
.rrhh-ui .th-sem li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--hair-strong);flex:none;position:relative;top:-1px}
.rrhh-ui .th-sem li.wrn::before{background:var(--warn)}
.rrhh-ui .th-sem li.neg::before{background:var(--crit)}
.rrhh-ui .th-sem li.nav::before{background:var(--navy-300)}
.rrhh-ui .th-sem li.ok::before{background:var(--ok)}
.rrhh-ui .th-sem li b{color:var(--ink);font-weight:600}

/* MES: veintiséis días de planta como barras de disponibles, con marcas. */
.rrhh-ui .th-mes{padding:14px 16px 6px}
.rrhh-ui .th-mes-g{display:grid;grid-template-columns:repeat(26,1fr);gap:3px;align-items:end;height:86px}
.rrhh-ui .th-mes-g>div{position:relative;background:var(--navy-300);border-radius:3px 3px 0 0;min-height:4px}
.rrhh-ui .th-mes-g>div.hoy{background:var(--navy)}
.rrhh-ui .th-mes-g>div.wrn{background:var(--warn)}
.rrhh-ui .th-mes-g>div.sab{background:var(--navy-050);border:1px solid var(--navy-300);border-bottom:0}
.rrhh-ui .th-mes-g>div.sab.wrn{border-color:var(--warn);background:var(--warn-050)}
.rrhh-ui .th-mes-g>div::after{content:attr(data-d);position:absolute;top:100%;left:0;right:0;text-align:center;
    font-size:.58rem;color:var(--faint);margin-top:3px;font-variant-numeric:tabular-nums}
.rrhh-ui .th-mes-g>div.hoy::after{color:var(--navy);font-weight:700}
.rrhh-ui .th-mes-g>div i{position:absolute;top:-9px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--crit)}
.rrhh-ui .th-mes-ley{display:flex;gap:16px;flex-wrap:wrap;font-size:.68rem;color:var(--muted);margin-top:22px;padding-top:8px;border-top:1px solid var(--hair)}
.rrhh-ui .th-mes-ley i{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px;margin-right:5px}
.rrhh-ui .th-agenda{list-style:none;margin:0;padding:0}
.rrhh-ui .th-agenda li{display:grid;grid-template-columns:84px 1fr auto;gap:12px;align-items:baseline;
    padding:8px 16px;border-top:1px solid var(--hair);font-size:.78rem}
.rrhh-ui .th-agenda li .f{font-variant-numeric:tabular-nums;font-weight:700;color:var(--navy)}
.rrhh-ui .th-agenda li .q{color:var(--ink)}
.rrhh-ui .th-agenda li .q small{color:var(--muted);display:block;font-size:.7rem}

/* EL MODAL DE INICIO. La raíz lleva `.rrhh-ui` ELLA MISMA (cuelga de <body>).
   Valores calcados de abm-ui.css: fondo rgba(10,20,42,.5), blur 2px, radio 14. */
.rrhh-ui.th-modal{position:fixed;inset:0;z-index:200;background:rgba(10,20,42,.5);backdrop-filter:blur(2px);
    display:flex;align-items:flex-start;justify-content:center;padding:28px 22px;overflow:auto;animation:thFade .16s ease}
@keyframes thFade{from{opacity:0}to{opacity:1}}
@keyframes thRise{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.rrhh-ui .th-panel{background:var(--surface);border-radius:14px;box-shadow:var(--e3);width:100%;max-width:1040px;
    display:flex;flex-direction:column;overflow:hidden;animation:thRise .2s var(--curva)}
.rrhh-ui .th-panel-h{padding:13px 20px;display:flex;align-items:center;gap:10px;border-top:3px solid var(--navy-500);border-bottom:1px solid var(--hair);flex-wrap:wrap}
.rrhh-ui .th-panel-h h3{margin:0;font-size:.96rem;font-weight:800;color:var(--navy)}
.rrhh-ui .th-panel-h .s{font-size:.71rem;font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums}
.rrhh-ui .th-panel-h .x{margin-left:auto;border:0;background:transparent;font:inherit;font-size:1.25rem;line-height:1;
    color:var(--muted);padding:2px 8px;border-radius:6px;cursor:pointer}
.rrhh-ui .th-panel-h .x:hover{background:var(--hair);color:var(--ink)}
.rrhh-ui .th-panel-h .x:focus-visible{outline:2px solid var(--navy-500);outline-offset:1px}
.rrhh-ui .th-panel-b{padding:16px 20px 18px;background:var(--canvas)}
@media (prefers-reduced-motion:reduce){.rrhh-ui.th-modal,.rrhh-ui .th-panel{animation:none}}
@media (max-width:760px){
  .rrhh-ui .th-sem{grid-template-columns:repeat(3,1fr)}
  .rrhh-ui .th-linea-h,.rrhh-ui .th-linea-f{grid-template-columns:96px 1fr}
  .rrhh-ui .th-ahora{display:none}
  .rrhh-ui.th-modal{padding:10px}
}

/* La línea del día, segunda vuelta (Hernán, 27/08 a las 20:48): rieles apilados
   por horario, estados temporales, horas extra, y el sector que se abre en una
   barra por persona. */
.rrhh-ui .th-linea-f .rails{display:flex;flex-direction:column;gap:3px;min-width:0}
.rrhh-ui .th-linea-f.abrible{cursor:pointer;border-radius:8px;margin:0 -6px;padding-left:6px;padding-right:6px}
.rrhh-ui .th-linea-f.abrible:hover{background:var(--navy-050)}
.rrhh-ui .th-linea-f.abrible:focus-visible{outline:2px solid var(--navy-500);outline-offset:-2px}
.rrhh-ui .th-linea-f.abrible .n::after{content:"▸";margin-left:5px;color:var(--faint);font-size:.7rem}
.rrhh-ui .th-linea-f.abrible[aria-expanded="true"] .n::after{content:"▾"}
.rrhh-ui .th-linea-sub{margin:2px 0 10px;padding:4px 0 6px 0;border-left:3px solid var(--navy-300);background:#fafbfc;border-radius:0 8px 8px 0}
.rrhh-ui .th-linea-h2{display:grid;grid-template-columns:150px 1fr;gap:10px;font-size:.64rem;font-weight:800;text-transform:uppercase;
    letter-spacing:.06em;color:var(--muted);padding:7px 0 2px 8px}
.rrhh-ui .th-linea-h2 .th-prox{text-transform:none;letter-spacing:0;font-weight:500}
.rrhh-ui .th-linea-p{display:grid;grid-template-columns:150px 1fr;gap:10px;align-items:center;padding:2px 0 2px 8px}
.rrhh-ui .th-linea-p .n{font-size:.74rem;font-weight:600;line-height:1.2;color:var(--ink);padding-left:0}
.rrhh-ui .th-linea-p .n small{display:block;font-weight:500;color:var(--faint);font-size:.64rem}
.rrhh-ui .th-linea-p .rail{height:22px}
.rrhh-ui .th-linea-p .th-banda{font-size:.68rem;top:2px;bottom:2px}

/* Estados en el tiempo: en curso resaltado, cumplido apagado, futuro punteado. */
.rrhh-ui .th-banda.curso{border-width:2px;box-shadow:0 1px 4px rgba(20,40,80,.14)}
.rrhh-ui .th-banda.pasado{opacity:.62}
.rrhh-ui .th-banda.futuro{border-style:dashed;background:transparent;font-weight:600}
.rrhh-ui .th-banda.futuro i{display:none}
.rrhh-ui .th-banda.nav{border-color:var(--navy-300);background:var(--navy-050);color:var(--navy)}
.rrhh-ui .th-banda.ho{border-color:var(--ok-hair);background:transparent;border-style:dashed;color:var(--ok)}
.rrhh-ui .th-banda.falta{border-style:dashed;background:transparent}
/* Horas extra: el tramo pasada la salida pactada, en ámbar, pegado a la barra. */
.rrhh-ui .th-banda.extra{border-color:var(--warn);background:var(--warn-050);color:var(--warn);border-radius:0 7px 7px 0;
    background-image:repeating-linear-gradient(135deg,transparent 0 4px,rgba(168,89,0,.10) 4px 6px)}
.rrhh-ui .th-banda.extra.curso{border-width:2px}

.rrhh-ui .th-linea-ley{display:flex;gap:14px;flex-wrap:wrap;font-size:.66rem;color:var(--muted);margin-top:8px;padding-top:8px;border-top:1px solid var(--hair)}
.rrhh-ui .th-linea-ley i{display:inline-block;width:18px;height:10px;border-radius:4px;vertical-align:-1px;margin-right:5px;border:1px solid var(--hair-strong);background:var(--navy-050)}
.rrhh-ui .th-linea-ley i.ok{border-color:var(--ok-hair);background:var(--ok-050)}
.rrhh-ui .th-linea-ley i.curso{border-width:2px;border-color:var(--ok)}
.rrhh-ui .th-linea-ley i.pasado{opacity:.62}
.rrhh-ui .th-linea-ley i.mut{border-style:dashed;background:transparent}
.rrhh-ui .th-linea-ley i.extra{border-color:var(--warn);background:var(--warn-050)}
.rrhh-ui .th-linea-ley i.neg{border-color:var(--crit);border-style:dashed;background:transparent}
@media (max-width:760px){
  .rrhh-ui .th-linea-p,.rrhh-ui .th-linea-h2{grid-template-columns:96px 1fr}
}

/* =============================================================================
   BLOQUES DE PLANTA — Configuración › Bloques de planta (etapa 1d)
   -----------------------------------------------------------------------------
   Prefijo `blq-`, dentro del scope .rrhh-ui. Reusa rr-card, rr-chip, rr-b y
   rr-kpi; lo propio es la tarjeta de bloque y sus tres controles (interruptor,
   contador por máquina, y la insignia de los que se prenden solos).
   ========================================================================== */
.rrhh-ui .blq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;padding:14px 16px}
.rrhh-ui .blq-card{position:relative;border:1px solid var(--hair-strong);border-radius:10px;padding:10px 12px;
  background:var(--surface);display:flex;flex-direction:column;gap:6px;min-width:0}
.rrhh-ui .blq-card.off{background:#f7f8fb;border-style:dashed}
.rrhh-ui .blq-card.off .blq-t > span:first-child,.rrhh-ui .blq-card.off .rr-chip{color:var(--faint)}
.rrhh-ui .blq-card.siempre{border-color:#c9d7ee;background:var(--navy-050)}
.rrhh-ui .blq-t{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.86rem;color:var(--navy-700)}
.rrhh-ui .blq-t > span:first-child{flex:1;min-width:0}
.rrhh-ui .blq-r{font-size:.71rem;color:var(--muted);line-height:1.4}
.rrhh-ui .blq-chips{display:flex;flex-wrap:wrap;gap:3px}
.rrhh-ui .blq-chips .rr-chip.neg{background:var(--crit-050);color:var(--crit);border-color:var(--crit-hair)}
.rrhh-ui .blq-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;
  font-size:.72rem;color:var(--muted);padding-top:4px}
.rrhh-ui .blq-link{background:none;border:0;padding:0;color:var(--navy-500);font:600 .74rem inherit;
  font-family:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.rrhh-ui .blq-link:hover{color:var(--navy-700)}
.rrhh-ui .blq-link:focus-visible{outline:2px solid var(--navy-300);outline-offset:2px;border-radius:3px}

/* El interruptor: un botón, no un checkbox estilizado, porque el estado lo
   pinta la clase y el foco tiene que verse. */
.rrhh-ui .blq-tog{flex:0 0 auto;width:34px;height:19px;border-radius:99px;border:0;padding:0;
  background:var(--hair-strong);position:relative;cursor:pointer;transition:background .15s var(--curva)}
.rrhh-ui .blq-tog::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:99px;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s var(--curva)}
.rrhh-ui .blq-tog.on{background:var(--ok)}
.rrhh-ui .blq-tog.on::after{left:17px}
.rrhh-ui .blq-tog:focus-visible{outline:2px solid var(--navy-300);outline-offset:2px}

/* El contador por máquina: − n de máx + */
.rrhh-ui .blq-step{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;font-variant-numeric:tabular-nums}
.rrhh-ui .blq-step button{width:22px;height:22px;border-radius:6px;border:1px solid var(--hair-strong);
  background:var(--surface);color:var(--navy);font:700 .9rem inherit;font-family:inherit;line-height:1;cursor:pointer;padding:0}
.rrhh-ui .blq-step button:disabled{opacity:.35;cursor:default}
.rrhh-ui .blq-step button:focus-visible{outline:2px solid var(--navy-300);outline-offset:1px}
.rrhh-ui .blq-step b{font-size:.95rem;min-width:1ch;text-align:center}
.rrhh-ui .blq-step .x{font-size:.66rem;color:var(--faint)}

/* Editar la gente de un bloque: un input por puesto del plan. */
.rrhh-ui .blq-edit{display:grid;grid-template-columns:1fr;gap:4px}
.rrhh-ui .blq-edit label{display:grid;grid-template-columns:1fr 4.2rem;align-items:center;gap:6px;font-size:.74rem;color:var(--ink)}
.rrhh-ui .blq-edit label span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rrhh-ui .blq-acts{display:flex;gap:6px;margin-top:6px}
.rrhh-ui .blq-acts .rr-btn{padding:4px 9px;font-size:.74rem}
@media (max-width:620px){
  .rrhh-ui .blq-grid{grid-template-columns:1fr;padding:12px}
}
@media (prefers-reduced-motion:reduce){
  .rrhh-ui .blq-tog,.rrhh-ui .blq-tog::after{transition:none}
}