/* ============================================================
 * rrhh.css — Área Recursos Humanos › pestaña Nómina
 * ------------------------------------------------------------
 * RESPONSABILIDAD:
 *   Todo el estilo del área RRHH. Archivo aparte para no engordar
 *   `modulos.css`, que ya carga con Tesorería y Dirección enteras.
 *
 * DE DÓNDE SALEN ESTOS VALORES:
 *   Del documento de diseño `INSTRUCCIONES/diseño/Recursos Humanos -
 *   Nomina v2.dc.html` (+ `FichaEmpleado.dc.html`). Alturas, radios,
 *   espaciados, colores y animaciones están copiados de ahí.
 *
 * DOS DESVÍOS DELIBERADOS (decisiones A1 y A2 del plan):
 *   A1. El diseño pedía Poppins. Se usa la tipografía de la app
 *       ('Segoe UI') para no meter una dependencia de Google Fonts
 *       en una app que corre en red local.
 *   A2. El diseño tiene los colores fijos en hex y no contempla modo
 *       oscuro. Acá se declaran como VARIABLES en `:root`, y
 *       `[data-theme="dark"]` las redefine. Así RRHH funciona en
 *       oscuro como el resto del sistema.
 *
 *   Regla para editar este archivo: todo color que TENGA QUE CAMBIAR
 *   con el tema sale de una variable --rh-*. Se admiten tres hex
 *   directos, y solo esos:
 *     · `#fff` sobre superficies que son azules o navy en los dos
 *       temas (texto de botones primarios, cabeceras de grupo, barra
 *       de acciones masivas, perilla del switch).
 *     · el fondo del toast, que es oscuro en ambos temas.
 *     · los badges de turno TM/TT/TN, que llevan su propio bloque
 *       `[data-theme="dark"]` justo debajo.
 *   Cualquier otro hex suelto rompe el modo oscuro de a pedazos.
 *
 * El breakpoint mobile es 900px (decisión A4; el diseño decía 820px).
 * ============================================================ */

/* =================== TOKENS — MODO CLARO =================== */
/* Los valores son los hex literales del documento de diseño. */
:root{
  --rh-bg:#f3f5f9;           /* fondo de la pantalla            */
  --rh-card:#ffffff;         /* tarjetas, tabla, modales        */
  --rh-card2:#f7f9fc;        /* filas expandidas, zonas suaves  */
  --rh-border:#e5e9f0;       /* bordes de bloque                */
  --rh-border2:#d5dbe6;      /* bordes de control (inputs)      */
  --rh-line:#eef1f6;         /* separador de filas              */
  --rh-text:#1f2937;
  --rh-text2:#4b5563;
  --rh-text3:#6b7280;
  --rh-muted:#9ca3af;

  --rh-azul:#2f7be8;         /* primario de acción              */
  --rh-azul-h:#1f68d6;       /* primario, hover                 */
  --rh-azul2:#3b82f6;        /* cabeceras de grupo, foco        */
  --rh-link:#2f6fdb;
  --rh-link-h:#1d4ed8;
  --rh-azul-suave:#e8f1fd;   /* chips y estados activos         */
  --rh-azul-borde:#bcd3f7;
  --rh-navy:#1b2b4d;         /* barra de acciones masivas       */

  --rh-verde:#15803d;
  --rh-ambar:#b45309;
  --rh-ambar-bg:#fff4d6;
  --rh-ambar-bg2:#fffbf0;
  --rh-ambar-borde:#f3d9a4;
  --rh-rojo:#b91c1c;
  --rh-rojo-bg:#fff5f5;
  --rh-rojo-borde:#dc2626;

  --rh-skel1:#e9edf3;        /* shimmer de los skeletons        */
  --rh-skel2:#f5f7fa;
  --rh-sombra:0 1px 3px rgba(45,38,33,.08);
  --rh-sombra-alta:0 20px 50px rgba(45,38,33,.3);
  --rh-sombra-drawer:-8px 0 30px rgba(45,38,33,.18);
  --rh-velo:rgba(15,29,58,.45);
  --rh-velo-lista:rgba(255,255,255,.72);   /* velo de carga sobre la nómina */
  --rh-bulk-alto:46px;       /* alto de la barra de acciones masivas y de su hueco */
  --rh-radio:8px;
  --rh-radio2:6px;
}

/* =================== TOKENS — MODO OSCURO =================== */
/* Mismos roles, valores de la paleta oscura de la app (theme.css). */
[data-theme="dark"]{
  --rh-bg:#0f172a;
  --rh-card:#1e293b;
  --rh-card2:#263245;
  --rh-border:#334155;
  --rh-border2:#3f4c63;
  --rh-line:#2f3a4d;
  --rh-text:#e2e8f0;
  --rh-text2:#94a3b8;
  --rh-text3:#94a3b8;
  --rh-muted:#64748b;

  --rh-azul:#3b82f6;
  --rh-azul-h:#60a5fa;
  --rh-azul2:#3b82f6;
  --rh-link:#93c5fd;
  --rh-link-h:#bfdbfe;
  --rh-azul-suave:#1e3a5f;
  --rh-azul-borde:#2f4f7a;
  --rh-navy:#0f1f3d;

  --rh-verde:#34d399;
  --rh-ambar:#fbbf24;
  --rh-ambar-bg:#3a2f14;
  --rh-ambar-bg2:#2a2212;
  --rh-ambar-borde:#5a4718;
  --rh-rojo:#f87171;
  --rh-rojo-bg:#3b1f1f;
  --rh-rojo-borde:#ef4444;

  --rh-skel1:#263245;
  --rh-skel2:#334155;
  --rh-sombra:0 1px 4px rgba(0,0,0,.4);
  --rh-sombra-alta:0 20px 50px rgba(0,0,0,.6);
  --rh-sombra-drawer:-8px 0 30px rgba(0,0,0,.5);
  --rh-velo:rgba(0,0,0,.6);
  --rh-velo-lista:rgba(30,41,59,.72);
}

/* =================== ANIMACIONES =================== */
/* Copiadas tal cual del documento de diseño (mismos nombres y tiempos). */
@keyframes rlaSlideIn  { from{transform:translateX(100%)}  to{transform:translateX(0)} }
@keyframes rlaSlideUp  { from{transform:translateY(100%)}  to{transform:translateY(0)} }
@keyframes rlaFade     { from{opacity:0}                   to{opacity:1} }
@keyframes rlaPop      { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
/* Variante para los elementos CENTRADOS con transform (modales).
 *
 * `rlaPop` anima `transform`, así que mientras dura la animación PISA el
 * `translate(-50%,-50%)` que centra el modal: se veía aparecer abajo a la
 * derecha y saltar al medio al terminar. Era un problema heredado del
 * documento de diseño. Esta variante lleva el centrado adentro de los
 * keyframes, así el modal nace centrado. */
@keyframes rlaPopCentro{
  from{opacity:0;transform:translate(-50%,-50%) translateY(8px)}
  to  {opacity:1;transform:translate(-50%,-50%)}
}
@keyframes rlaShimmer  { from{background-position:-400px 0} to{background-position:400px 0} }
@keyframes rlaBar      { from{transform:translateX(-100%)}  to{transform:translateX(260%)} }
/* Destello breve al llegar una fila nueva o recién guardada. */
@keyframes rlaFlash    { from{background:var(--rh-azul-suave)} to{background:transparent} }
/* Apertura de la ficha desplegable: baja y aparece, en vez de saltar de golpe. */
@keyframes rlaDesplegar{ from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }
/* Entrada de la notificación flotante, desde el borde derecho. */
@keyframes rlaEntraDerecha{ from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:none} }
/* Spinner del velo de carga. */
@keyframes rlaGirar{ to{transform:rotate(360deg)} }

@media (prefers-reduced-motion: reduce){
  .rh *,.rh-modal *,.rh-drawer *,.rh-sheet *{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* =================== BASE DEL PANEL =================== */
.rh{ color:var(--rh-text); font-size:14px }
.rh *{ box-sizing:border-box }

/* Cabecera de la pestaña: los botones Recargar y Configuración.
   El diseño los ponía en un <header> propio; acá van dentro del panel
   porque la app ya tiene su topbar (decisión A3). */
.rh-topo{ display:flex; align-items:center; gap:8px }

/* ---- Botones ---- */
.rh-btn{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:8px;
  height:38px; padding:0 14px; border-radius:var(--rh-radio2);
  border:1px solid var(--rh-border2); background:var(--rh-card); color:var(--rh-text);
  font-family:inherit; font-weight:500; font-size:14px; white-space:nowrap; cursor:pointer;
}
.rh-btn:hover{ background:var(--rh-card2) }
.rh-btn:disabled{ cursor:not-allowed; opacity:.55 }
/* `wait` SOLO mientras hay una operacion en curso. Un boton deshabilitado por
   una condicion (ej. "Eliminar" hasta que se tipee el nombre) no esta
   esperando nada, y el cursor de reloj confundia. */
.rh-btn.rh-ocupado:disabled{ cursor:wait; opacity:.7 }
.rh-btn-pri{ border:none; background:var(--rh-azul); color:#fff; font-weight:600 }
.rh-btn-pri:hover{ background:var(--rh-azul-h) }
.rh-btn-sm{ height:34px; padding:0 12px; font-size:13px }
.rh-btn-ico{ width:34px; height:34px; padding:0; justify-content:center }

/* Barra de progreso inferior de los botones ocupados (animación rlaBar del diseño). */
.rh-btn .rh-bar{ position:absolute; left:0; bottom:0; height:3px; width:40%;
  background:rgba(255,255,255,.7); animation:rlaBar .9s infinite linear }
.rh-btn:not(.rh-btn-pri) .rh-bar{ height:2px; background:var(--rh-azul) }

/* ---- Tarjeta de resumen ---- */
.rh-card{ background:var(--rh-card); border-radius:var(--rh-radio); box-shadow:var(--rh-sombra);
  padding:16px 22px; margin-bottom:14px }
.rh-card-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.rh-card-top h2{ margin:0; font-size:18px; font-weight:600 }
.rh-stats{ display:flex; gap:18px; flex-wrap:wrap; margin-top:12px; padding:10px 14px;
  border:1px solid var(--rh-border); border-radius:var(--rh-radio2); font-size:13px; color:var(--rh-text2) }
.rh-stats b{ color:var(--rh-text) }
.rh-stats .rh-ok{ color:var(--rh-verde) }
.rh-stats .rh-baja{ color:var(--rh-ambar) }
/* Los emojis 👥 ✅ ⏸ se reemplazaron por iconos SVG (Lucide). Un emoji se
   alineaba solo con el texto; un <svg> no, así que cada chip pasa a ser flex.
   El color lo pone el contenedor y el SVG lo hereda con `currentColor`; el
   número conserva el suyo con `.rh-ok` / `.rh-baja`, como antes. */
.rh-stats > span{ display:inline-flex; align-items:center; gap:6px }
.rh-stats .rh-st-ok svg{ color:var(--rh-verde) }
.rh-stats .rh-st-baja svg{ color:var(--rh-ambar) }

/* ---- Filtros ---- */
.rh-filtros{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:10px }
.rh-in, .rh-sel{
  height:36px; padding:0 10px; border:1px solid var(--rh-border2); border-radius:var(--rh-radio2);
  background:var(--rh-card); color:var(--rh-text); font-family:inherit; font-size:14px;
}
.rh-in:focus, .rh-sel:focus, .rh-ta:focus{ outline:2px solid var(--rh-azul2); outline-offset:-1px }
.rh-busca{ position:relative }
.rh-busca .rh-lupa{ position:absolute; left:10px; top:10px; color:var(--rh-text3); pointer-events:none }
.rh-busca .rh-in{ width:240px; padding-left:32px }

/* Segmentado Vigentes / Bajas / Todos */
.rh-seg{ display:flex; border:1px solid var(--rh-border2); border-radius:var(--rh-radio2);
  overflow:hidden; height:36px; background:var(--rh-card) }
.rh-seg button{ padding:0 14px; border:none; background:var(--rh-card); color:var(--rh-text2);
  font-family:inherit; font-size:13px; font-weight:500; cursor:pointer }
.rh-seg button + button{ border-left:1px solid var(--rh-border2) }
.rh-seg button.on{ background:var(--rh-azul); color:#fff }

/* Chips de filtros activos */
.rh-chips{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px }
.rh-chip{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 6px 0 10px;
  border-radius:14px; border:1px solid var(--rh-azul-borde); background:var(--rh-azul-suave);
  color:var(--rh-link-h); font-family:inherit; font-size:12px; font-weight:500; cursor:pointer }
.rh-chip .rh-chip-k{ color:var(--rh-text2); font-weight:400 }
.rh-chip-limpiar{ height:28px; padding:0 10px; border:none; background:transparent;
  color:var(--rh-link); font-family:inherit; font-size:12px; font-weight:500; cursor:pointer }

/* Panel de fechas desplegable */
.rh-fechas{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:10px;
  padding:10px 14px; background:var(--rh-card); border:1px solid var(--rh-border);
  border-radius:var(--rh-radio2); font-size:13px; color:var(--rh-text2); animation:rlaPop .15s ease-out }
.rh-fechas b{ color:var(--rh-text) }
.rh-fechas .rh-in{ height:32px; padding:0 8px }
.rh-sep{ width:1px; height:22px; background:var(--rh-border) }

/* ---- Barra de acciones masivas ---- */
/* EL HUECO ESTÁ SIEMPRE.
 *
 * La barra va arriba de la tabla, pegada a ella, pero dentro de un contenedor
 * de altura fija que existe con o sin selección. Así tildar una fila no empuja
 * la lista hacia abajo ni destildarla la sube de vuelta: ese salto hacía perder
 * de vista la fila con la que se estaba trabajando.
 *
 * `--rh-bulk-alto` tiene que coincidir con la altura real de la barra: 30px de
 * controles + 8px de padding arriba y abajo. */
/* `overflow:hidden` recorta lo que sobre: el hueco nunca crece de alto ni
   asoma por los costados. */
.rh-bulk-slot{ min-height:var(--rh-bulk-alto); max-width:100%; overflow:hidden }

.rh-bulk{ display:flex; align-items:center; gap:10px; height:var(--rh-bulk-alto);
  /* ⚠️ `width:0` + `min-width:100%` NO es un truco decorativo: es lo que impide
     que la barra ensanche la PÁGINA ENTERA en pantallas angostas.
     `<body>` es `display:flex` y `.main` es un ítem flex con el `min-width:auto`
     que traen los ítems por defecto, así que .main NO puede encogerse por debajo
     del ancho de su contenido: crece hasta que entre. La barra mide lo que miden
     sus controles (~545px con los dos <select> de sede y turno), así que al
     tildar un empleado la página pasaba de 375px a 559px — el síntoma que se
     veía como "se cambia el ancho de la página". Y `overflow-x:auto` no alcanza:
     si .main ya creció, la barra tiene todo el lugar y nunca necesita desplazarse.
     Con `width:0` la barra aporta 0 al ancho que .main tiene que respetar, y
     `min-width:100%` la devuelve a ocupar todo el ancho disponible (los
     porcentajes no cuentan para ese cálculo). Medido: 559px → 375px.
     El arreglo de fondo sería `min-width:0` en `.main` (layout.css), pero eso
     afecta a Tesorería y Dirección, que están en producción. */
  width:0; min-width:100%; max-width:100%;
  padding:8px 14px; background:var(--rh-navy); color:#fff;
  border-radius:var(--rh-radio) var(--rh-radio) 0 0;
  font-size:13px; animation:rlaPop .15s ease-out;
  /* Una sola fila SIEMPRE: si envolviera, crecería de alto y volvería a
     desplazar la tabla. Lo que no entra se desplaza en horizontal. */
  flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden }

/* Los controles conservan su tamaño natural; lo que no entra se alcanza
   desplazando la barra en horizontal (`overflow-x:auto` de arriba). */
.rh-bulk > *{ flex:0 0 auto }
.rh-bulk b{ overflow:hidden; text-overflow:ellipsis }
.rh-bulk select, .rh-bulk button{
  height:30px; padding:0 10px; border-radius:var(--rh-radio2); font-family:inherit; font-size:13px;
  border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff; cursor:pointer }
.rh-bulk select option{ color:#1f2937; background:#fff }
.rh-bulk button:hover{ background:rgba(255,255,255,.1) }
.rh-bulk .rh-bulk-x{ margin-left:auto; border:none; color:#aab6cc }
.rh-bulk .rh-bulk-x:hover{ color:#fff; background:transparent }

/* ---- Tabla (desktop) ---- */
.rh-tabla-wrap{ background:var(--rh-card); border-radius:var(--rh-radio);
  box-shadow:var(--rh-sombra); overflow:auto; position:relative;
  /* Mismo motivo que en `.rh-bulk`: sin esto el `overflow:auto` de acá arriba
     no sirve de nada. `.main` es un ítem flex con `min-width:auto`, así que se
     ensancha hasta que la tabla entre y el contenedor nunca llega a desplazarse.
     Medido en 1280px: la página medía 1448px; con esto, 1280px. */
  width:0; min-width:100% }
/* ⚠️ NO volver a poner un `min-width` fijo acá.
   Tenía `min-width:1180px`, un piso copiado del documento de diseño que no se
   correspondía con lo que la tabla necesita: medida con datos reales, su ancho
   mínimo es 946px. Con el piso de 1180 la tabla solo entraba a partir de un
   monitor de ~1450px; en un portátil de 1366 (el caso más común) quedaba
   cortada, con una barra de desplazamiento horizontal adentro del marco.
   El ancho útil es `viewport - 224 (barra lateral) - 44 (padding)`. */
.rh-tabla{ width:100%; border-collapse:collapse }

/* ⚠️ La columna del nombre lleva `width:100%` Y `max-width:0`, que parece una
   contradicción y no lo es: es la receta para "esta columna se queda con lo que
   sobre, y si no sobra nada, recorta".
     · `width:100%`  → el reparto automático le da TODO el espacio libre, así
                       que el resto de las columnas se quedan con el ancho que
                       pide su contenido y nunca se recortan si hay lugar.
     · `max-width:0` → le permite encogerse por debajo de su contenido cuando no
                       queda espacio; sin eso, un nombre largo ensancha la tabla
                       y vuelve el scroll horizontal.
   Se probó con `table-layout:fixed` y los anchos declarados: era predecible pero
   las columnas no podían CRECER, así que en un monitor de 1920 el CUIT y la
   unidad se recortaban con puntos suspensivos mientras a la columna del nombre
   le sobraban cientos de píxeles. Los `width` de cada `<th>` quedan como
   preferencia, no como ley. */
.rh-tabla .rh-c-nom{ width:100%; max-width:0 }

/* Las columnas de texto no envuelven: una función como "Mucama/o de piso"
   partía en dos líneas y estiraba el alto de la fila, que es fijo (50px).
   Recortan con puntos suspensivos; el valor completo está en la ficha. */
.rh-tabla td, .rh-tabla th{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
/* Las celdas que llevan un CONTROL (casilla, badge de turno, interruptor de
   vigencia, botón de la ficha) no llevan puntos suspensivos: no hay texto que
   recortar, así que lo único que puede hacer el ellipsis es dibujar unos puntos
   de más si al control le falta un píxel. `clip` recorta y se calla. */
.rh-tabla .rh-c-ctrl{ text-overflow:clip }
/* La del nombre lleva `title` con el nombre entero, que es la que más se recorta. */
.rh-tabla .rh-c-nom .rh-nom{ overflow:hidden; text-overflow:ellipsis }
.rh-tabla thead tr{ font-size:12px; color:var(--rh-text2); text-transform:uppercase; letter-spacing:.03em }
.rh-tabla thead th{ padding:12px 8px; text-align:left; white-space:nowrap; font-weight:600 }
.rh-tabla thead th:first-child{ padding-left:16px; width:40px }
/* 60px, no 52: el botón de la ficha mide 34 y la celda suma 8 de padding a la
   izquierda y 16 a la derecha, o sea 58 de mínimo. Con 52 el botón se salía de
   la celda; antes no se notaba porque la celda no recortaba, y al agregarle
   `overflow:hidden` quedó a la vista (el navegador dibujaba unos puntos
   suspensivos al lado de la flecha). */
.rh-tabla thead th:last-child{ padding-right:16px; width:60px }
.rh-tabla tbody tr.rh-fila{ border-top:1px solid var(--rh-line); height:50px }

/* ---- Columnas que se retiran cuando la pantalla no da ----
 *
 * Por debajo de cierto ancho no entran doce columnas, y la alternativa —dejar
 * la barra de desplazamiento horizontal— obliga a arrastrar para leer una fila.
 * Se retiran de a tandas, siempre las MISMAS y en el MISMO orden, y siempre
 * datos que están completos en la ficha del empleado (un click en el botón de
 * la última columna), así que no se pierde información, solo deja de estar en
 * el listado.
 *
 * El orden sale de qué tan útil es cada columna para BARRER la lista con la
 * vista, que es para lo que sirve una tabla:
 *   1. Unidad  → se deduce de la sede, y cuando "Agrupar por unidad" está
 *                activo la cabecera del grupo ya la dice. Es la más redundante.
 *   2. CUIT    → dato de referencia; nadie busca a alguien leyendo CUITs.
 *   3. Alta    → una fecha; se lee en la ficha.
 *   4. Función → dato informativo, editable en la ficha.
 *
 * ⚠️ LA COLUMNA "BAJA" NO SE OCULTA NUNCA, aunque con el filtro por defecto
 * ("Vigentes") esté vacía en todas las filas y parezca la primera candidata.
 * Es la única que lleva una ACCIÓN sin alternativa: el botón que edita la fecha
 * y el motivo de una baja ya hecha. En la ficha esos dos campos están
 * `disabled` y su propio `title` dice "Se cambia desde el botón de la columna
 * Baja". Ocultarla dejaría esa edición sin ningún camino. Por eso el cuarto
 * escalón se lleva Función —que es información recuperable— y no Baja.
 *
 * Los umbrales salen de medir el ancho mínimo real de cada juego de columnas
 * contra el ancho útil (`viewport - 268`):
 *   ≥1220px → las 12 (necesita 946, hay 952)
 *   1060px  → sin Unidad ni CUIT (hay 792)
 *   <1060px → sin Unidad, CUIT, Alta ni Función (hay 632 a 902px)
 */
@media(max-width:1219.98px){
  .rh-tabla .rh-c-unidad, .rh-tabla .rh-c-cuit{ display:none }
}
@media(max-width:1059.98px){
  .rh-tabla .rh-c-alta, .rh-tabla .rh-c-funcion{ display:none }
}
.rh-tabla tbody tr.rh-fila > td{ transition:background .18s ease }
.rh-tabla tbody tr.rh-fila:hover{ background:var(--rh-card2) }
.rh-tabla tbody tr.rh-fila.rh-sel{ background:var(--rh-azul-suave) }
.rh-tabla tbody tr.rh-fila.rh-abierta{ background:var(--rh-azul-suave) }
.rh-tabla tbody tr.rh-fila.rh-nova > td{ animation:rlaFlash 1.1s cubic-bezier(.22,.61,.36,1) }
.rh-tabla td{ padding:0 8px; font-size:13px }
.rh-tabla td:first-child{ padding-left:16px }
.rh-tabla td:last-child{ padding-right:16px; text-align:right }
.rh-nom{ font-weight:600; font-size:14px; color:var(--rh-text) }
.rh-fila.rh-inactivo .rh-nom{ color:var(--rh-text3) }
.rh-num{ font-variant-numeric:tabular-nums; color:var(--rh-text2) }
.rh-vacio{ color:var(--rh-muted) }

/* Cabecera de grupo por unidad de negocio */
.rh-grupo{ display:flex; align-items:center; gap:12px; padding:9px 16px;
  background:var(--rh-azul2); color:#fff; font-weight:700; font-size:14px; letter-spacing:.02em }
.rh-grupo .rh-pill{ background:rgba(255,255,255,.22); padding:2px 10px; border-radius:10px;
  font-size:12px; font-weight:600; white-space:nowrap }
.rh-grupo .rh-detalle{ font-size:12px; font-weight:500; opacity:.9; white-space:nowrap }

/* Badges de turno */
.rh-turno{ display:inline-block; min-width:36px; text-align:center; padding:3px 8px;
  border-radius:10px; font-size:12px; font-weight:700 }
.rh-turno-TM{ background:#e8f1fd; color:#1d4ed8 }
.rh-turno-TT{ background:#fff1cc; color:#8a5a00 }
.rh-turno-TN{ background:#e9e7f5; color:#4b3f8f }
[data-theme="dark"] .rh-turno-TM{ background:#1e3a5f; color:#bfdbfe }
[data-theme="dark"] .rh-turno-TT{ background:#3a2f14; color:#fcd34d }
[data-theme="dark"] .rh-turno-TN{ background:#2e2a45; color:#c4b5fd }

/* Ícono de ficha incompleta (decisión B7-ter). No estaba en el diseño. */
/* Antes era el emoji ⚠️, que traía su propio color. El SVG hereda, así que el
   ámbar se declara acá. `inline-flex` lo centra con el nombre del empleado. */
.rh-warn{ display:inline-flex; align-items:center; margin-left:6px; cursor:help;
  line-height:1; color:var(--rh-ambar); vertical-align:-2px }

/* Switch de vigencia */
.rh-sw{ width:40px; height:22px; border-radius:11px; border:none; padding:2px;
  background:var(--rh-border2); transition:background .26s cubic-bezier(.22,.61,.36,1);
  cursor:pointer; display:block }
.rh-sw.on{ background:var(--rh-azul) }
.rh-sw:disabled{ opacity:.5; cursor:wait }
.rh-sw span{ display:block; width:18px; height:18px; border-radius:50%; background:#fff;
  box-shadow:0 1px 2px rgba(45,38,33,.3); transform:translateX(0);
  transition:transform .26s cubic-bezier(.22,.61,.36,1) }
.rh-sw.on span{ transform:translateX(18px) }
.rh-sw-sm{ width:36px; height:20px }
.rh-sw-sm span{ width:16px; height:16px }
.rh-sw-sm.on span{ transform:translateX(16px) }

/* Botón de la fecha de baja (abre el popover de edición) */
.rh-baja-btn{ border:none; background:transparent; padding:4px 6px; border-radius:4px;
  color:var(--rh-ambar); font-family:inherit; font-weight:600; font-size:13px;
  font-variant-numeric:tabular-nums; display:inline-flex; align-items:center; gap:5px; cursor:pointer }
.rh-baja-btn:hover{ background:var(--rh-ambar-bg) }

/* Chevron de abrir ficha */
.rh-chev{ transition:transform .15s }
.rh-chev.abierto{ transform:rotate(180deg) }

/* Popover de baja */
/* `position:fixed` y montado fuera de la tabla: con pocas filas, el contenedor
   de la tabla es mas bajo que el popover y su `overflow:auto` lo recortaba.
   Va por encima de todo menos de los modales (1100+). */
.rh-pop{ position:fixed; z-index:1050; width:300px;
  background:var(--rh-card); border:1px solid var(--rh-border2); border-radius:var(--rh-radio);
  box-shadow:0 10px 30px rgba(45,38,33,.2); padding:14px; text-align:left; animation:rlaPop .15s ease-out }
.rh-pop-t{ font-weight:600; font-size:14px; margin-bottom:10px }

/* ---- Ficha expandida ---- */
.rh-ficha-td{ padding:14px 16px 18px 56px; border-bottom:2px solid var(--rh-azul2);
  background:var(--rh-card2) }
.rh-ficha{ display:flex; flex-direction:column; gap:14px }
/* La ficha aparecía de golpe, con toda su altura. Ahora entra con un
   desplazamiento corto y un fundido: mismo tiempo, sensación mucho más suave. */
.rh-ficha-td .rh-ficha, .rh-tarjeta-ficha .rh-ficha{
  animation:rlaDesplegar .24s cubic-bezier(.22,.61,.36,1) }
.rh-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px 16px;
  align-items:end }                                  /* todos los controles apoyan en la misma linea */
.rh-campo{ display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--rh-text2); min-width:0 }
/* La etiqueta ocupa SIEMPRE un renglon. Sin esto, "Piso (opcional)" o un
   asterisco de obligatorio empujaban el input un renglon mas abajo que el de
   al lado y la fila quedaba despareja. */
.rh-lbl{ display:block; min-height:16px; line-height:16px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
/* El horario son DOS inputs: necesita el ancho de dos columnas para leerse. */
.rh-campo-horario{ grid-column:span 2 }
@media(max-width:560px){ .rh-campo-horario{ grid-column:span 1 } }
.rh-campo .rh-in, .rh-campo .rh-sel{ height:36px; font-size:13px }
.rh-campo.rh-full{ grid-column:1/-1 }
.rh-ta{ padding:8px 10px; border:1px solid var(--rh-border2); border-radius:var(--rh-radio2);
  background:var(--rh-card); color:var(--rh-text); font-family:inherit; font-size:13px; resize:vertical }
.rh-err{ border-color:var(--rh-rojo-borde) !important }
.rh-req{ color:var(--rh-rojo) }
.rh-bloque{ grid-column:1/-1; display:flex; flex-direction:column; gap:8px; padding:12px;
  border:1px solid var(--rh-border); border-radius:var(--rh-radio); background:var(--rh-card2) }
.rh-bloque-t{ font-size:12px; font-weight:600; color:var(--rh-text) }
.rh-grid-dom{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px }
.rh-campo-baja{ color:var(--rh-ambar) }
.rh-campo-baja .rh-in{ border-color:var(--rh-ambar-borde); background:var(--rh-ambar-bg2) }
.rh-acciones{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.rh-editado{ font-size:12px; color:var(--rh-text3); margin-left:auto }

/* Segmentado de turno dentro de la ficha */
.rh-seg-turno{ display:flex; border:1px solid var(--rh-border2); border-radius:var(--rh-radio2);
  overflow:hidden; height:36px; background:var(--rh-card) }
.rh-seg-turno button{ flex:1; border:none; background:var(--rh-card); color:var(--rh-text2);
  font-family:inherit; font-size:12px; font-weight:600; cursor:pointer }
.rh-seg-turno button + button{ border-left:1px solid var(--rh-border2) }
.rh-seg-turno button.on{ background:var(--rh-azul); color:#fff }

/* Carga horaria con sufijo "hs" */
.rh-hs{ display:flex; align-items:center; border:1px solid var(--rh-border2);
  border-radius:var(--rh-radio2); background:var(--rh-card); height:36px; overflow:hidden }
.rh-hs input{ flex:1; min-width:0; height:100%; padding:0 10px; border:none; background:transparent;
  color:var(--rh-text); font-family:inherit; font-size:13px }
.rh-hs input:focus{ outline:none }
.rh-hs span{ padding:0 10px; color:var(--rh-text3); font-size:12px;
  border-left:1px solid var(--rh-border); height:100%; display:flex; align-items:center }

/* Aviso de conflicto de edición (decisión R3). No estaba en el diseño. */
/* El ⚠️ del aviso de conflicto y los dos contadores del resumen de importación:
   mismo caso que arriba, el SVG necesita alinearse a mano. */
.rh-conflicto svg{ vertical-align:-3px }
.rh-imp-ok, .rh-imp-mal{ display:inline-flex; align-items:center; gap:6px }
.rh-imp-ok{ color:var(--rh-verde) }
.rh-imp-mal{ color:var(--rh-rojo) }

.rh-conflicto{ grid-column:1/-1; display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap;
  padding:12px 14px; border:1px solid var(--rh-ambar-borde); background:var(--rh-ambar-bg2);
  border-radius:var(--rh-radio); font-size:13px; color:var(--rh-text); animation:rlaPop .15s ease-out }

/* Zona de peligro de la ficha: eliminar (decisión B8). No estaba en el diseño. */
.rh-peligro{ grid-column:1/-1; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 14px; border:1px solid var(--rh-ambar-borde); border-radius:var(--rh-radio);
  background:transparent; font-size:12px; color:var(--rh-text3) }
.rh-btn-del{ border-color:var(--rh-rojo-borde); color:var(--rh-rojo); background:transparent }
.rh-btn-del:hover{ background:var(--rh-rojo-bg) }

/* ---- Skeletons ---- */
.rh-sk{ display:block; border-radius:4px;
  background:linear-gradient(90deg,var(--rh-skel1) 25%,var(--rh-skel2) 50%,var(--rh-skel1) 75%);
  background-size:400px 100%; animation:rlaShimmer 1.2s infinite linear }

/* ---- Vacío ---- */
.rh-empty{ padding:48px; text-align:center; color:var(--rh-text3); font-size:14px }
.rh-empty button{ border:none; background:none; color:var(--rh-link); font-family:inherit;
  font-weight:600; font-size:14px; cursor:pointer }

/* ---- Toast ---- */
.rh-toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  max-width:calc(100vw - 32px); background:#1f2937; color:#fff; padding:12px 18px;
  border-radius:var(--rh-radio); box-shadow:0 6px 20px rgba(45,38,33,.3);
  display:flex; gap:16px; align-items:center; font-size:13px; animation:rlaPop .18s ease-out; z-index:1200 }
.rh-toast button{ border:none; background:transparent; color:#8fb6ff; font-family:inherit;
  font-weight:700; font-size:13px; cursor:pointer }

/* ---- Notificación de Realtime (decisión R2). No estaba en el diseño. ----
 *
 * FLOTANTE, no en el flujo del documento. Antes se insertaba arriba de la
 * tarjeta de resumen y, si el usuario ya había scrolleado la lista, no se veía:
 * justamente el caso en el que más hace falta. Ahora es una notificación fija
 * en la esquina, visible en cualquier posición de scroll.
 *
 * z-index 1000: por encima de la tabla y de la topbar (50), pero POR DEBAJO de
 * los modales y el drawer (1100+), para no taparlos. */
.rh-aviso{ position:fixed; top:72px; right:20px; z-index:1000;
  display:flex; align-items:center; gap:10px; max-width:min(380px, calc(100vw - 32px));
  padding:12px 14px; border:1px solid var(--rh-azul-borde); background:var(--rh-azul-suave);
  color:var(--rh-link-h); border-radius:var(--rh-radio); box-shadow:var(--rh-sombra-alta);
  font-size:13px; line-height:1.45; animation:rlaEntraDerecha .22s cubic-bezier(.22,.61,.36,1) }
.rh-aviso .rh-aviso-txt{ flex:1; min-width:0 }
.rh-aviso .rh-btn{ flex:none }
/* Cerrar sin recargar: la notificación no se va sola y puede molestar si estás
   en medio de algo. El botón Recargar de la topbar queda siempre disponible. */
.rh-aviso .rh-aviso-x{ flex:none; width:26px; height:26px; padding:0; border:none;
  background:transparent; color:var(--rh-link-h); border-radius:var(--rh-radio2);
  display:grid; place-items:center; cursor:pointer }
.rh-aviso .rh-aviso-x:hover{ background:var(--rh-azul-borde) }

@media(max-width:899.98px){
  /* Arriba también en mobile: es donde el usuario espera una notificación, y
     abajo chocaba con la barra de acciones masivas y con el toast. */
  .rh-aviso{ top:64px; left:12px; right:12px; max-width:none }
}

/* ---- Drawer de configuración ---- */
.rh-velo{ position:fixed; inset:0; background:var(--rh-velo); animation:rlaFade .15s; z-index:1100 }
.rh-drawer{ position:fixed; top:0; right:0; bottom:0; width:460px; max-width:100vw;
  background:var(--rh-card); box-shadow:var(--rh-sombra-drawer); display:flex; flex-direction:column;
  z-index:1101 }
.rh-drawer.rh-anim{ animation:rlaSlideIn .2s ease-out }
.rh-drawer-top{ display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--rh-border) }
.rh-drawer-top .rh-t{ font-weight:600; font-size:16px }
.rh-drawer-top .rh-s{ font-size:12px; color:var(--rh-text3) }
.rh-dtabs{ display:flex; border-bottom:1px solid var(--rh-border); padding:0 8px; overflow-x:auto }
.rh-dtabs button{ padding:12px; border:none; background:transparent; font-family:inherit;
  font-size:13px; font-weight:600; color:var(--rh-text2); border-bottom:2px solid transparent;
  white-space:nowrap; cursor:pointer }
.rh-dtabs button.on{ color:var(--rh-link); border-bottom-color:var(--rh-azul2) }
.rh-dtabs button i{ color:var(--rh-muted); font-weight:500; font-style:normal }
.rh-dalta{ padding:14px 20px; display:flex; flex-direction:column; gap:8px;
  border-bottom:1px solid var(--rh-border); background:var(--rh-card2) }
.rh-dalta .rh-in, .rh-dalta .rh-sel{ height:38px }
.rh-dlista{ flex:1; overflow:auto }
.rh-dgrupo{ display:flex; align-items:center; gap:8px; padding:8px 20px;
  background:var(--rh-azul-suave); color:var(--rh-link-h); font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--rh-border) }
.rh-dgrupo i{ color:var(--rh-text3); font-weight:500; font-style:normal; text-transform:none }
.rh-item{ display:flex; align-items:center; gap:10px; padding:10px 20px;
  border-bottom:1px solid var(--rh-line) }
.rh-item.rh-sangria{ padding-left:32px }
.rh-item.rh-off{ opacity:.55 }
.rh-item .rh-item-txt{ flex:1; min-width:0 }
.rh-item .rh-item-n{ font-weight:500; font-size:14px }
.rh-item .rh-item-s{ font-size:12px; color:var(--rh-text3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.rh-item .rh-edit{ flex:1; display:flex; flex-direction:column; gap:6px; min-width:0 }
.rh-drawer-pie{ padding:12px 20px; border-top:1px solid var(--rh-border);
  font-size:12px; color:var(--rh-text3) }

/* ---- Modales propios de RRHH ---- */
.rh-modal{ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  width:820px; max-width:calc(100vw - 24px); max-height:calc(100vh - 32px);
  display:flex; flex-direction:column;              /* el cuerpo scrollea, no el modal */
  background:var(--rh-card); border-radius:10px; box-shadow:var(--rh-sombra-alta);
  z-index:1101 }
/* La animacion se agrega SOLO al montar (clase `rh-anim` puesta por el JS), para
   que un repintado por cambio de estado no la vuelva a disparar. */
.rh-modal.rh-anim{ animation:rlaPopCentro .18s ease-out }
.rh-modal-sm{ width:760px }
.rh-modal-xs{ width:520px }
.rh-modal-top{ display:flex; align-items:center; justify-content:space-between; flex:none;
  padding:16px 22px; border-bottom:1px solid var(--rh-border); background:var(--rh-card) }
.rh-modal-top .rh-t{ font-weight:600; font-size:17px }
.rh-modal-top .rh-s{ font-size:12px; color:var(--rh-text3) }
.rh-modal-body{ padding:18px 22px 22px; overflow:auto; min-height:0; flex:1 }
.rh-x{ width:36px; height:36px; border-radius:var(--rh-radio2); border:none; background:transparent;
  display:grid; place-items:center; color:var(--rh-text2); cursor:pointer }
.rh-x:hover{ background:var(--rh-card2) }

/* ---- Importar ---- */
.rh-drop{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  min-height:220px; border:2px dashed var(--rh-azul-borde); border-radius:10px;
  background:var(--rh-card2); cursor:pointer; text-align:center; padding:24px;
  transition:background .15s,border-color .15s }
.rh-drop.rh-drag{ border-color:var(--rh-azul); background:var(--rh-azul-suave) }
.rh-drop-t{ font-weight:600; font-size:15px; color:var(--rh-text) }
.rh-drop-s{ font-size:13px; color:var(--rh-text3) }
.rh-modelo{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:16px; padding:12px 14px; border:1px solid var(--rh-border);
  border-radius:var(--rh-radio); background:var(--rh-card2); font-size:13px; color:var(--rh-text2) }
.rh-prev{ border:1px solid var(--rh-border); border-radius:var(--rh-radio); overflow:auto; max-height:44vh }
.rh-prev table{ width:100%; border-collapse:collapse; min-width:560px; font-size:13px }
.rh-prev thead tr{ font-size:11px; color:var(--rh-text2); text-transform:uppercase;
  letter-spacing:.03em; background:var(--rh-card2) }
.rh-prev th{ padding:10px 12px; text-align:left; font-weight:600; white-space:nowrap }
.rh-prev td{ padding:10px 12px; border-top:1px solid var(--rh-line) }
.rh-prev tr.rh-mal{ background:var(--rh-rojo-bg) }
.rh-prev .rh-estado-ok{ color:var(--rh-verde); font-weight:500 }
.rh-prev .rh-estado-mal{ color:var(--rh-rojo); font-weight:500 }

/* ---- Tarjetas (mobile) ---- */
.rh-cards{ display:flex; flex-direction:column; gap:10px; position:relative }
.rh-tarjeta{ background:var(--rh-card); border-radius:var(--rh-radio); box-shadow:var(--rh-sombra);
  border-left:3px solid var(--rh-azul); overflow:visible; position:relative }
.rh-tarjeta.rh-inactivo{ border-left-color:var(--rh-border2) }
.rh-tarjeta-top{ display:flex; align-items:flex-start; gap:10px; padding:12px 12px 10px }
.rh-tarjeta-nom{ font-weight:600; font-size:15px; line-height:1.3; color:var(--rh-text) }
.rh-tarjeta.rh-inactivo .rh-tarjeta-nom{ color:var(--rh-text3) }
.rh-tarjeta-sub{ font-size:12px; color:var(--rh-text3); margin-top:2px }
.rh-tags{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:0 12px 12px 40px }
.rh-tag{ padding:3px 10px; border-radius:10px; font-size:12px;
  background:var(--rh-line); color:var(--rh-text) }
[data-theme="dark"] .rh-tag{ background:var(--rh-card2) }
.rh-tarjeta-ficha{ padding:12px; border-top:1px solid var(--rh-line); background:var(--rh-card2);
  border-radius:0 0 var(--rh-radio) var(--rh-radio) }
.rh-pop-card{ margin:0 12px 12px; background:var(--rh-ambar-bg2); border:1px solid var(--rh-ambar-borde);
  border-radius:var(--rh-radio); padding:12px; animation:rlaPop .15s ease-out }

/* Sheet inferior de filtros (mobile) */
.rh-sheet{ position:fixed; left:0; right:0; bottom:0; max-height:88vh; overflow:auto;
  background:var(--rh-card); border-radius:14px 14px 0 0; box-shadow:0 -8px 30px rgba(45,38,33,.2);
  z-index:1101; padding:8px 18px 20px }
.rh-sheet.rh-anim{ animation:rlaSlideUp .22s ease-out }
.rh-sheet-asa{ width:40px; height:4px; border-radius:2px; background:var(--rh-border2); margin:4px auto 12px }
.rh-sheet-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px }
.rh-sheet-top .rh-t{ font-weight:600; font-size:16px }
.rh-sheet-campos{ display:flex; flex-direction:column; gap:12px }
.rh-sheet-campos .rh-in, .rh-sheet-campos .rh-sel, .rh-sheet-campos .rh-seg{ height:40px }
.rh-sheet-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px }

/* =================== MOBILE ( < 900px ) =================== */
/* Decisión A4 (el documento de diseño usaba 820px).
 * El umbral es el MISMO que el de `_RRHH_MQ_MOBILE` en el JS. Antes el CSS
 * cortaba en `max-width:900px` y el complemento en `min-width:901px`, así que
 * justo en 900px el CSS se comportaba como mobile pero el JS dibujaba la tabla
 * de escritorio. */
@media(max-width:899.98px){
  .rh-solo-desktop{ display:none !important }
  /* En pantalla angosta los controles se reparten el ancho disponible en lugar
     de exigir el suyo. Los `<select>` recortan solos el texto que no entra. */
  .rh-bulk{ gap:6px; padding:8px }
  .rh-bulk select{ flex:1 1 0; min-width:72px; max-width:34vw }
  .rh-bulk button{ padding:0 8px }
  .rh-bulk .rh-bulk-x{ margin-left:2px; padding:0 4px }
  .rh-topo{ margin:10px 0 }
  .rh-card{ padding:14px }
  .rh-drawer{ width:92vw }
  /* Controles más grandes para el dedo, como pide el diseño. */
  .rh-btn{ height:40px }
  .rh-in, .rh-sel{ height:40px }
  .rh-modal{ width:calc(100vw - 16px) }
  .rh-sw{ width:44px; height:24px }
  .rh-sw span{ width:20px; height:20px }
  .rh-sw.on span{ transform:translateX(20px) }
}
@media(min-width:900px){
  .rh-solo-mobile{ display:none !important }
}

/* =================== IMPRESIÓN =================== */
@media print{
  .rh-topo, .rh-filtros, .rh-chips, .rh-bulk, .rh-aviso, .rh-toast,
  .rh-drawer, .rh-velo, .rh-modal, .rh-sheet{ display:none !important }
  .rh-tabla-wrap{ box-shadow:none }
}

/* =================== BLOQUEO DE SCROLL DE FONDO =================== */
/* Con un overlay abierto, el fondo no tiene que scrollear: si no, la rueda
 * mueve la tabla de atrás mientras mirás el modal. Lo pone y lo saca el JS
 * (`_rrhhSincronizarScroll`). */
body.rh-sin-scroll{ overflow:hidden }

/* =================== DETALLES DE LA FICHA =================== */
/* El asterisco de obligatorio, en línea con la etiqueta. */
.rh-lbl .rh-req{ font-weight:700 }
/* Los dos inputs de horario necesitan un mínimo legible. */
.rh-campo-horario input{ min-width:86px }

/* =================== VELO DE CARGA SOBRE LA NÓMINA =================== */
/* Las acciones masivas y la importación pueden tardar. Sin nada que lo
 * muestre, la pantalla parece colgada. El velo cubre la lista entera, la
 * vuelve inoperable y deja claro que hay algo en curso. */
.rh-velo-lista{
  position:absolute; inset:0; z-index:5;
  background:var(--rh-velo-lista);
  border-radius:var(--rh-radio);
  cursor:wait;
}
/* El bloque del spinner va `sticky`: con una lista larga, un centrado normal
 * lo dejaría a mitad de una tabla de 3000px, o sea fuera de la pantalla.
 * Así queda siempre a la vista, en cualquier posición de scroll. */
.rh-velo-lista .rh-velo-caja{
  position:sticky; top:38vh;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:16px 22px;
}
.rh-spinner{
  width:34px; height:34px; border-radius:50%;
  border:3px solid var(--rh-border2); border-top-color:var(--rh-azul);
  animation:rlaGirar .8s linear infinite;
}
.rh-velo-lista span{ font-size:13px; font-weight:500; color:var(--rh-text2) }