/* ============================================================================
   MOD-276 · HUMANZ PRO v2 · shell
   ----------------------------------------------------------------------------
   TODO acotado a `#page-humanz-pro.humanz-pro-v2` y a los overlays propios
   (`#hzv2-cmd`). Ni una regla puede pintar el resto de OMNIA.

   Lenguaje visual aprobado (Notion × Linear × GitHub): bordes de 1 px, radios
   de 7–10 px, sombras mínimas, jerarquía por tamaño y color más que por peso,
   sin mayúsculas forzadas y sin convertir cada registro en una tarjeta.

   El día/noche NO es propio: se hereda de `html[data-mode="noche"]`, que es lo
   que usa el resto de OMNIA. La base es la noche y el día se pinta encima.

   Las vistas ANTIGUAS siguen viviendo dentro de `#hzp-tab-content` con su CSS
   de siempre. Aquí sólo se les da un contenedor con aire y se neutraliza la
   barra de pestañas vieja por si algún camino la repintara.
   ========================================================================== */

#page-flexwall.humanz-pro-v2, /* no aplica: evita que un typo futuro cuele */
#page-humanz-pro.humanz-pro-v2 {
    --hz-bg:#0f1115; --hz-sur:#161a20; --hz-sur2:#1d222a; --hz-sur3:#242a34;
    --hz-bd:#282e38; --hz-bd2:#39404c;
    --hz-tx:#e8eaee; --hz-tx2:#aeb6c2; --hz-mut:#7d8694;
    --hz-ac:#6b94ff; --hz-ac-soft:#1c2740;
    --hz-ok:#58c999; --hz-ok-soft:#16332a;
    --hz-warn:#e8ad5c; --hz-red:#ef7474; --hz-red-soft:#3a2024;
    --hz-r:9px;

    padding:0 !important; margin:0; overflow:hidden;
}
html:not([data-mode="noche"]) #page-humanz-pro.humanz-pro-v2 {
    --hz-bg:#f7f8fa; --hz-sur:#fff; --hz-sur2:#f4f5f7; --hz-sur3:#eef0f3;
    --hz-bd:#e2e5e9; --hz-bd2:#d2d6dc;
    --hz-tx:#17191d; --hz-tx2:#525866; --hz-mut:#858b98;
    --hz-ac:#3169e8; --hz-ac-soft:#edf3ff;
    --hz-ok:#16885b; --hz-ok-soft:#eaf7f1;
    --hz-warn:#b56c12; --hz-red:#c94040; --hz-red-soft:#fff0f0;
}

#page-humanz-pro.humanz-pro-v2 *,
#hzv2-cmd * { box-sizing:border-box; text-transform:none; letter-spacing:normal; }
#page-humanz-pro.humanz-pro-v2 button,
#hzv2-cmd button, #hzv2-cmd input { font:inherit; }

/* La barra de doce pestañas del marcado viejo no se pinta en v2; si algún
   camino la repintara, aquí se queda fuera de la vista sin romper su JS. */
#page-humanz-pro.humanz-pro-v2 > .hz-tab-bar { display:none !important; }

/* ── Estructura ───────────────────────────────────────────────────────────────
   EL ALTO NO SE CALCULA, SE HEREDA. La primera versión ponía
   `height:calc(100vh - 84px)`, y ese 84 supone un topbar y un padding
   concretos. Cuando el alto real era menor, el shell se salía del contenedor y
   el `overflow:hidden` de la página lo RECORTABA: la lista de nómina seguía
   ahí, con su scroll, pero el final quedaba por debajo del borde visible y no
   había forma de llegar. Se veía como si faltaran empleados.

   La cadena `#app` → `#main` → `#page-content` son todos flex con altura
   resuelta, así que `height:100%` da la medida exacta sin adivinar nada. Es el
   mismo patrón que `app.css` usa para Cash Flow y Sourcer.

   NO volver al `calc`. Si el shell se ve corto, el problema está en la cadena,
   no en el número. */
.page.active#page-humanz-pro.humanz-pro-v2 {
    display:flex; flex-direction:column; height:100%; min-height:560px;
}
#page-humanz-pro.humanz-pro-v2 .hzv2-shell {
    display:grid; grid-template-columns:236px minmax(0,1fr);
    flex:1; min-height:0;
    background:var(--hz-bg); color:var(--hz-tx);
    font-size:13.5px; line-height:1.5;
}
@media (max-width:900px){
    #page-humanz-pro.humanz-pro-v2 .hzv2-shell { grid-template-columns:1fr; }
    #page-humanz-pro.humanz-pro-v2 .hzv2-side { display:none; }
}

/* ── Barra lateral del módulo ─────────────────────────────────────────────── */
#page-humanz-pro.humanz-pro-v2 .hzv2-side {
    background:var(--hz-sur); border-right:1px solid var(--hz-bd);
    display:flex; flex-direction:column; min-width:0;
}
#page-humanz-pro.humanz-pro-v2 .hzv2-marca {
    height:60px; display:flex; align-items:center; gap:10px;
    padding:0 15px; border-bottom:1px solid var(--hz-bd);
}
#page-humanz-pro.humanz-pro-v2 .hzv2-logo {
    width:32px; height:32px; border-radius:8px; display:grid; place-items:center;
    background:var(--hz-tx); color:var(--hz-sur); font-size:14px;
}
#page-humanz-pro.humanz-pro-v2 .hzv2-marca strong { display:block; font-size:13.5px; font-weight:600; }
#page-humanz-pro.humanz-pro-v2 .hzv2-marca small { display:block; font-size:11px; color:var(--hz-mut); margin-top:1px; }

#page-humanz-pro.humanz-pro-v2 .hzv2-nav { padding:14px 9px; overflow-y:auto; flex:1; }
#page-humanz-pro.humanz-pro-v2 .hzv2-grupo {
    font-size:10px; font-weight:600; color:var(--hz-mut);
    letter-spacing:.08em; text-transform:uppercase; margin:16px 10px 6px;
}
#page-humanz-pro.humanz-pro-v2 .hzv2-link {
    width:100%; height:34px; padding:0 10px; border:0; border-radius:7px;
    background:transparent; color:var(--hz-tx2);
    display:flex; align-items:center; gap:10px; text-align:left; cursor:pointer;
    transition:background .12s, color .12s;
}
#page-humanz-pro.humanz-pro-v2 .hzv2-link:hover { background:var(--hz-sur2); color:var(--hz-tx); }
#page-humanz-pro.humanz-pro-v2 .hzv2-link.on { background:var(--hz-sur3); color:var(--hz-tx); }
#page-humanz-pro.humanz-pro-v2 .hzv2-link i { width:16px; font-size:13px; text-align:center; }
#page-humanz-pro.humanz-pro-v2 .hzv2-link b { font-weight:500; flex:1; font-size:13px; }
#page-humanz-pro.humanz-pro-v2 .hzv2-link.on b { font-weight:600; }
#page-humanz-pro.humanz-pro-v2 .hzv2-link:focus-visible,
#page-humanz-pro.humanz-pro-v2 .hzv2-sub:focus-visible { outline:2px solid var(--hz-ac); outline-offset:1px; }

#page-humanz-pro.humanz-pro-v2 .hzv2-subs { padding:2px 0 4px 34px; display:flex; flex-direction:column; gap:1px; }
#page-humanz-pro.humanz-pro-v2 .hzv2-sub {
    border:0; background:none; color:var(--hz-mut); text-align:left; cursor:pointer;
    font-size:12.5px; padding:5px 8px; border-radius:6px;
}
#page-humanz-pro.humanz-pro-v2 .hzv2-sub:hover { color:var(--hz-tx); background:var(--hz-sur2); }
#page-humanz-pro.humanz-pro-v2 .hzv2-sub.on { color:var(--hz-ac); font-weight:600; }

#page-humanz-pro.humanz-pro-v2 .hzv2-side-pie {
    border-top:1px solid var(--hz-bd); padding:12px 15px;
}
#page-humanz-pro.humanz-pro-v2 .hzv2-pie-dato { display:flex; justify-content:space-between; align-items:baseline; }
#page-humanz-pro.humanz-pro-v2 .hzv2-pie-dato span { font-size:11px; color:var(--hz-mut); }
#page-humanz-pro.humanz-pro-v2 .hzv2-pie-dato b { font-size:15px; font-weight:600; }

/* ── Zona de trabajo ──────────────────────────────────────────────────────── */
/* `min-height:0` es lo que permite que `.hzv2-view` tenga su propio scroll en
   vez de estirar la columna: sin él, una lista larga empuja el shell hacia
   abajo y el final queda fuera del recorte. */
#page-humanz-pro.humanz-pro-v2 .hzv2-work { min-width:0; min-height:0; display:flex; flex-direction:column; }
#page-humanz-pro.humanz-pro-v2 .hzv2-top {
    height:58px; flex:0 0 auto; padding:0 22px;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    border-bottom:1px solid var(--hz-bd); background:var(--hz-bg);
}
#page-humanz-pro.humanz-pro-v2 .hzv2-ruta { display:flex; align-items:center; gap:8px; font-size:12.5px; min-width:0; }
#page-humanz-pro.humanz-pro-v2 .hzv2-ruta span { color:var(--hz-mut); }
#page-humanz-pro.humanz-pro-v2 .hzv2-ruta i { font-style:normal; color:var(--hz-bd2); }
#page-humanz-pro.humanz-pro-v2 .hzv2-ruta b { font-weight:600; color:var(--hz-tx); }
#page-humanz-pro.humanz-pro-v2 .hzv2-acciones { display:flex; align-items:center; gap:8px; }

#page-humanz-pro.humanz-pro-v2 .hzv2-busca {
    height:32px; width:210px; border:1px solid var(--hz-bd); border-radius:7px;
    background:var(--hz-sur); color:var(--hz-mut); cursor:pointer;
    display:flex; align-items:center; gap:8px; padding:0 9px; font-size:12px;
}
#page-humanz-pro.humanz-pro-v2 .hzv2-busca:hover { border-color:var(--hz-bd2); color:var(--hz-tx2); }
#page-humanz-pro.humanz-pro-v2 .hzv2-busca span { flex:1; text-align:left; }
#page-humanz-pro.humanz-pro-v2 .hzv2-busca kbd {
    font-size:9.5px; border:1px solid var(--hz-bd); background:var(--hz-sur2);
    border-radius:4px; padding:2px 5px; color:var(--hz-mut);
}
#page-humanz-pro.humanz-pro-v2 .hzv2-ibtn {
    width:32px; height:32px; border:1px solid var(--hz-bd); border-radius:7px;
    background:var(--hz-sur); color:var(--hz-tx2); cursor:pointer;
    display:grid; place-items:center;
}
#page-humanz-pro.humanz-pro-v2 .hzv2-ibtn:hover { border-color:var(--hz-bd2); color:var(--hz-tx); }
#page-humanz-pro.humanz-pro-v2 .hzv2-ibtn:disabled { opacity:.55; cursor:default; }
#page-humanz-pro.humanz-pro-v2 .hzv2-ibtn.girando i { animation:hzv2Giro .9s linear infinite; }
@keyframes hzv2Giro { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){
    #page-humanz-pro.humanz-pro-v2 .hzv2-ibtn.girando i { animation:none; }
    #page-humanz-pro.humanz-pro-v2 * { transition:none !important; }
}

/* El contenedor de la vista. `#hzp-tab-content` conserva su id: las vistas
   antiguas siguen pintando dentro con su propio CSS. */
#page-humanz-pro.humanz-pro-v2 .hzv2-view { flex:1; min-height:0; overflow-y:auto; }
#page-humanz-pro.humanz-pro-v2 #hzp-tab-content { padding:24px 22px 48px; max-width:1500px; margin:0 auto; }

/* ── Cabecera de vista ────────────────────────────────────────────────────── */
#page-humanz-pro.humanz-pro-v2 .hzv2-head { margin-bottom:22px; }
#page-humanz-pro.humanz-pro-v2 .hzv2-eyebrow {
    font-size:10px; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
    color:var(--hz-mut); margin:0;
}
#page-humanz-pro.humanz-pro-v2 .hzv2-head h1 {
    font-size:25px; letter-spacing:-.03em; margin:5px 0 5px; font-weight:600; color:var(--hz-tx);
}
#page-humanz-pro.humanz-pro-v2 .hzv2-sub { margin:0; color:var(--hz-mut); font-size:12.5px; }

/* ── KPI ──────────────────────────────────────────────────────────────────── */
#page-humanz-pro.humanz-pro-v2 .hzv2-kpis {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-bottom:18px;
}
#page-humanz-pro.humanz-pro-v2 .hzv2-kpi {
    background:var(--hz-sur); border:1px solid var(--hz-bd); border-radius:var(--hz-r); padding:15px 16px;
}
#page-humanz-pro.humanz-pro-v2 .hzv2-kpi-n {
    font-size:26px; font-weight:600; letter-spacing:-.035em; color:var(--hz-tx);
    font-variant-numeric:tabular-nums;
}
#page-humanz-pro.humanz-pro-v2 .hzv2-kpi-n.gris { color:var(--hz-mut); }
#page-humanz-pro.humanz-pro-v2 .hzv2-kpi-l { font-size:12.5px; color:var(--hz-tx2); margin-top:6px; }
#page-humanz-pro.humanz-pro-v2 .hzv2-kpi-d { font-size:11px; color:var(--hz-mut); margin-top:3px; }

/* ── Paneles ──────────────────────────────────────────────────────────────── */
#page-humanz-pro.humanz-pro-v2 .hzv2-cols {
    display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr); gap:14px;
}
@media (max-width:1100px){ #page-humanz-pro.humanz-pro-v2 .hzv2-cols { grid-template-columns:1fr; } }
#page-humanz-pro.humanz-pro-v2 .hzv2-panel {
    background:var(--hz-sur); border:1px solid var(--hz-bd); border-radius:var(--hz-r); min-width:0;
}
#page-humanz-pro.humanz-pro-v2 .hzv2-panel-h {
    padding:14px 17px; border-bottom:1px solid var(--hz-bd);
    display:flex; align-items:center; justify-content:space-between; gap:12px;
}
#page-humanz-pro.humanz-pro-v2 .hzv2-panel-h h2 { font-size:13.5px; font-weight:600; margin:0; }
#page-humanz-pro.humanz-pro-v2 .hzv2-panel-h span { font-size:11px; color:var(--hz-mut); }
#page-humanz-pro.humanz-pro-v2 .hzv2-panel-b { padding:14px 17px; }

#page-humanz-pro.humanz-pro-v2 .hzv2-barra {
    display:grid; grid-template-columns:minmax(90px,1.1fr) minmax(80px,2fr) 34px 44px;
    align-items:center; gap:10px; padding:6px 0; font-size:12px;
}
#page-humanz-pro.humanz-pro-v2 .hzv2-barra > span { color:var(--hz-tx2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#page-humanz-pro.humanz-pro-v2 .hzv2-track { height:6px; border-radius:4px; background:var(--hz-sur3); overflow:hidden; }
#page-humanz-pro.humanz-pro-v2 .hzv2-track i { display:block; height:100%; background:var(--hz-ac); border-radius:4px; }
#page-humanz-pro.humanz-pro-v2 .hzv2-barra b { text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
#page-humanz-pro.humanz-pro-v2 .hzv2-barra em { font-style:normal; text-align:right; color:var(--hz-mut); font-size:11px; }

#page-humanz-pro.humanz-pro-v2 .hzv2-rapidos { display:flex; flex-direction:column; gap:2px; padding:8px; }
#page-humanz-pro.humanz-pro-v2 .hzv2-rapido {
    display:flex; align-items:center; gap:10px; width:100%; border:0; background:none;
    color:var(--hz-tx2); padding:9px 10px; border-radius:7px; cursor:pointer; text-align:left;
}
#page-humanz-pro.humanz-pro-v2 .hzv2-rapido:hover { background:var(--hz-sur2); color:var(--hz-tx); }
#page-humanz-pro.humanz-pro-v2 .hzv2-rapido b { flex:1; font-weight:500; font-size:12.5px; }
#page-humanz-pro.humanz-pro-v2 .hzv2-rapido i:last-child { font-size:10px; color:var(--hz-mut); }

#page-humanz-pro.humanz-pro-v2 .hzv2-nota {
    margin-top:16px; font-size:11.5px; color:var(--hz-mut); line-height:1.6;
    border-left:2px solid var(--hz-bd2); padding-left:11px;
}
#page-humanz-pro.humanz-pro-v2 .hzv2-vacio { color:var(--hz-mut); font-size:12px; padding:12px 0; }

/* ── Estados ──────────────────────────────────────────────────────────────── */
#page-humanz-pro.humanz-pro-v2 .hzv2-estado {
    display:flex; flex-direction:column; align-items:center; gap:8px;
    padding:64px 24px; text-align:center; color:var(--hz-mut);
}
#page-humanz-pro.humanz-pro-v2 .hzv2-estado > i { font-size:24px; opacity:.55; margin-bottom:6px; }
#page-humanz-pro.humanz-pro-v2 .hzv2-estado b { color:var(--hz-tx); font-size:14px; font-weight:600; }
#page-humanz-pro.humanz-pro-v2 .hzv2-estado span { font-size:12px; max-width:420px; }
#page-humanz-pro.humanz-pro-v2 .hzv2-error > i { color:var(--hz-red); opacity:1; }
#page-humanz-pro.humanz-pro-v2 .hzv2-btn {
    margin-top:10px; height:32px; padding:0 14px; border-radius:7px; cursor:pointer;
    border:1px solid var(--hz-bd2); background:var(--hz-sur); color:var(--hz-tx); font-size:12.5px;
}
#page-humanz-pro.humanz-pro-v2 .hzv2-btn:hover { border-color:var(--hz-ac); color:var(--hz-ac); }

/* ── Paleta de comandos (cuelga de <body>) ────────────────────────────────── */
#hzv2-cmd {
    position:fixed; inset:0; z-index:100055; display:grid; place-items:start center;
    padding-top:12vh; background:rgba(8,10,14,.5); backdrop-filter:blur(3px);
    font-family:var(--font);
}
#hzv2-cmd .hzv2-cmd-box {
    width:min(560px,calc(100vw - 30px));
    background:var(--bg2); border:1px solid var(--border); border-radius:12px;
    box-shadow:0 22px 70px rgba(0,0,0,.45); overflow:hidden; color:var(--text);
}
#hzv2-cmd .hzv2-cmd-in {
    height:54px; padding:0 15px; display:flex; align-items:center; gap:11px;
    border-bottom:1px solid var(--border);
}
#hzv2-cmd .hzv2-cmd-in i { color:var(--dim); font-size:15px; }
#hzv2-cmd .hzv2-cmd-in input {
    flex:1; border:0; outline:0; background:transparent; color:var(--text);
    font-size:14px; text-transform:none; letter-spacing:normal;
}
#hzv2-cmd .hzv2-cmd-in kbd {
    font-size:9.5px; border:1px solid var(--border); background:var(--bg3);
    border-radius:4px; padding:2px 6px; color:var(--dim);
}
#hzv2-cmd .hzv2-cmd-res { padding:8px; max-height:56vh; overflow-y:auto; }
#hzv2-cmd .hzv2-cmd-it {
    width:100%; height:38px; border:0; border-radius:7px; background:none; cursor:pointer;
    display:flex; align-items:center; gap:11px; padding:0 10px; color:var(--text2); text-align:left;
}
#hzv2-cmd .hzv2-cmd-it:hover, #hzv2-cmd .hzv2-cmd-it.on { background:var(--bg3); color:var(--text); }
#hzv2-cmd .hzv2-cmd-it i { width:16px; text-align:center; font-size:12px; }
#hzv2-cmd .hzv2-cmd-it b { flex:1; font-weight:500; font-size:13px; }
#hzv2-cmd .hzv2-cmd-it span { font-size:10.5px; color:var(--dim); }
#hzv2-cmd .hzv2-cmd-vacio { padding:26px; text-align:center; color:var(--dim); font-size:12.5px; }