/* ============================================================================
   MOD-282 · ASISTENCIA v2 — la hoja de estilos
   ----------------------------------------------------------------------------
   Antes esto vivía dentro de `143-humanz-asistencia.js`, escrito a mano en una
   cadena de JavaScript inyectada en un `<style>`. Dos problemas de los que ya
   nos mordieron antes: no pasa por el `?v=` que estampa `build.js` —así que un
   cambio de estilo podía tardar una hora en llegar al navegador— y editar el
   aspecto obligaba a tocar el archivo de la lógica de nómina.

   El lenguaje es el de siempre: Notion, Linear y GitHub. Jerarquía por tamaño
   y color, bordes de 1 px, nada de sombras dramáticas.

   TODO va acotado a `.asi-v2` (la pantalla) y a `#asi-velo` (el editor de día,
   que cuelga de <body>). Las variables se toman del skin de HUMANZ cuando
   existen; el valor de respaldo es sólo para que nada quede invisible si esta
   hoja llegara a cargarse sola.
   ========================================================================== */

.asi-v2{
    --asi-bg:   var(--hz-sur,  #0d1117);
    --asi-bg2:  var(--hz-sur2, #161b22);
    --asi-bd:   var(--hz-bd,   #30363d);
    --asi-tx:   var(--hz-tx,   #e6edf3);
    --asi-tx2:  var(--hz-tx2,  #9aa4b2);
    --asi-mut:  var(--hz-mut,  #6e7781);
    --asi-ac:   var(--hz-ac,   #6f7dff);
    --asi-ok:   #3fb950;
    --asi-ret:  #d29922;
    --asi-rev:  #f0883e;
    --asi-mal:  #f85149;
    --asi-aus:  #58a6ff;
    --asi-asu:  #a371f7;

    display:flex; flex-direction:column; gap:12px;
    /* El alto se HEREDA. Nunca `calc(100vh - algo)`: esa cuenta ya recortó la
       nómina una vez y a Xplod otra. */
    height:100%; min-height:0;
    padding:16px 18px;
    color:var(--asi-tx); font-size:13px;
    text-transform:none; letter-spacing:0;
    box-sizing:border-box;
}
.asi-v2 *{ box-sizing:border-box; text-transform:none; letter-spacing:0; }
.asi-v2 button, .asi-v2 input, .asi-v2 select{ font-family:inherit; }

/* ── Barra de herramientas ───────────────────────────────────────────────── */
.asi-v2 .asi-bar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; }
.asi-v2 .asi-bar-izq, .asi-v2 .asi-bar-der{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.asi-v2 .asi-sel, .asi-v2 .asi-q{
    height:32px; padding:0 10px; font-size:12.5px;
    background:var(--asi-bg2); color:var(--asi-tx);
    border:1px solid var(--asi-bd); border-radius:8px; outline:none;
}
.asi-v2 .asi-sel-w{ min-width:250px; }
.asi-v2 .asi-q{ width:190px; }
.asi-v2 .asi-q:focus, .asi-v2 .asi-sel:focus{ border-color:var(--asi-ac); }

.asi-v2 .asi-b{
    height:32px; padding:0 12px; font-size:12.5px; font-weight:500; cursor:pointer;
    display:inline-flex; align-items:center; gap:7px;
    background:var(--asi-bg2); color:var(--asi-tx2);
    border:1px solid var(--asi-bd); border-radius:8px;
    transition:border-color .12s, color .12s, background .12s;
}
.asi-v2 .asi-b:hover:not(:disabled){ color:var(--asi-tx); border-color:var(--asi-mut); }
.asi-v2 .asi-b:disabled{ opacity:.45; cursor:not-allowed; }
.asi-v2 .asi-b-pri{ background:var(--asi-ac); border-color:var(--asi-ac); color:#fff; font-weight:600; }
.asi-v2 .asi-b-pri:hover:not(:disabled){ filter:brightness(1.1); color:#fff; }
.asi-v2 .asi-chk{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--asi-tx2); cursor:pointer; }

/* ── Avisos ─────────────────────────────────────────────────────────────── */
.asi-v2 .asi-nota{
    display:flex; gap:10px; align-items:flex-start;
    padding:11px 13px; border-radius:10px; font-size:12.5px; line-height:1.55;
    background:var(--asi-bg2); border:1px solid var(--asi-bd); color:var(--asi-tx2);
}
.asi-v2 .asi-nota i{ margin-top:2px; color:var(--asi-tx2); }
.asi-v2 .asi-nota b{ color:var(--asi-tx); font-weight:600; }
.asi-v2 .asi-nota-ok{ background:rgba(63,185,80,.08); border-color:rgba(63,185,80,.30); }
.asi-v2 .asi-nota-ok i{ color:var(--asi-ok); }
.asi-v2 .asi-nota-rev{ background:rgba(240,136,62,.09); border-color:rgba(240,136,62,.32); }
.asi-v2 .asi-nota-rev i{ color:var(--asi-rev); }

/* ── Cifras de arriba ───────────────────────────────────────────────────── */
.asi-v2 .asi-kpis{ display:flex; gap:9px; flex-wrap:wrap; }
.asi-v2 .asi-kpi{
    flex:1 1 130px; min-width:120px; padding:10px 13px;
    background:var(--asi-bg2); border:1px solid var(--asi-bd); border-radius:10px;
}
.asi-v2 .asi-kpi b{ display:block; font-size:21px; font-weight:600; line-height:1.15; }
.asi-v2 .asi-kpi span{ display:block; margin-top:2px; font-size:11px; color:var(--asi-tx2); }
.asi-v2 .asi-kpi-ret b{ color:var(--asi-ret); }
.asi-v2 .asi-kpi-mal b{ color:var(--asi-mal); }
.asi-v2 .asi-kpi-rev b{ color:var(--asi-rev); }

/* ── La tabla ───────────────────────────────────────────────────────────── */
.asi-v2 .asi-scroll{
    flex:1; min-height:0; overflow:auto;
    border:1px solid var(--asi-bd); border-radius:11px; background:var(--asi-bg);
}
.asi-v2 .asi-tbl{ width:100%; border-collapse:separate; border-spacing:0; font-size:12.5px; }
.asi-v2 .asi-tbl thead th{
    position:sticky; top:0; z-index:2;
    background:var(--asi-bg2); color:var(--asi-tx2);
    font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
    padding:9px 8px; text-align:center; white-space:nowrap;
    border-bottom:1px solid var(--asi-bd);
}
/* La columna del nombre se congela: con seis días y dos totales, al hacer
   scroll horizontal se perdía de vista de quién era cada fila. */
.asi-v2 .asi-tbl th.asi-emp, .asi-v2 .asi-tbl td.asi-emp{
    position:sticky; left:0; z-index:1;
    background:var(--asi-bg); text-align:left; min-width:210px;
    border-right:1px solid var(--asi-bd);
}
.asi-v2 .asi-tbl thead th.asi-emp{ z-index:3; background:var(--asi-bg2); }
.asi-v2 .asi-tbl tbody tr:hover td{ background:var(--asi-bg2); }
.asi-v2 .asi-tbl tbody tr:hover td.asi-emp{ background:var(--asi-bg2); }
.asi-v2 .asi-tbl td{ padding:7px 8px; border-bottom:1px solid var(--asi-bd); vertical-align:middle; }
.asi-v2 .asi-tbl tbody tr:last-child td{ border-bottom:0; }

.asi-v2 .asi-emp-n{ font-weight:550; font-size:12.5px; line-height:1.3; }
.asi-v2 .asi-emp-p{ display:block; font-size:10.5px; color:var(--asi-mut); margin-top:1px; }
.asi-v2 .asi-perfil{
    display:inline-block; margin-top:3px; padding:1px 7px;
    font-size:9.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
    border-radius:20px; cursor:pointer; border:1px solid var(--asi-bd);
    background:transparent; color:var(--asi-mut);
}
.asi-v2 .asi-perfil:hover{ border-color:var(--asi-ac); color:var(--asi-ac); }
.asi-v2 .asi-p-campo{ color:var(--asi-rev); border-color:rgba(240,136,62,.40); }
.asi-v2 .asi-p-especial{ color:var(--asi-asu); border-color:rgba(163,113,247,.40); }

/* ── Las celdas ─────────────────────────────────────────────────────────── */
.asi-v2 .asi-c{ text-align:center; min-width:96px; cursor:pointer; }
.asi-v2 .asi-c-fut, .asi-v2 .asi-c-off{ cursor:default; background:transparent; }
.asi-v2 .asi-c-off{ background:repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,.025) 5px, rgba(255,255,255,.025) 10px); }
.asi-v2 .asi-ent{ font-size:13.5px; font-weight:600; line-height:1.2; display:flex; align-items:center; justify-content:center; gap:5px; }
.asi-v2 .asi-res{ font-size:10px; color:var(--asi-mut); margin-top:2px; line-height:1.2; }
.asi-v2 .asi-res-vacia{ opacity:.4; }
.asi-v2 .asi-src{ font-size:9px; opacity:.5; }
.asi-v2 .asi-src-man{ color:var(--asi-ac); opacity:.85; }
.asi-v2 .asi-warn{ font-size:10px; color:var(--asi-rev); }

.asi-v2 .asi-c-ok  .asi-ent{ color:var(--asi-ok); }
.asi-v2 .asi-c-ret .asi-ent{ color:var(--asi-ret); }

/* Etiquetas de los días que no son una hora. Fondo tenue y texto del color,
   nunca un bloque saturado: son estados, no alarmas. */
.asi-v2 .asi-tag{
    display:inline-block; padding:2px 9px; border-radius:20px;
    font-size:10.5px; font-weight:600; line-height:1.5;
}
.asi-v2 .asi-c-aus   .asi-tag{ background:rgba(88,166,255,.13);  color:var(--asi-aus); }
.asi-v2 .asi-c-asu   .asi-tag{ background:rgba(163,113,247,.13); color:var(--asi-asu); }
.asi-v2 .asi-c-rev   .asi-tag{ background:rgba(240,136,62,.14);  color:var(--asi-rev); }
/* HOY: la jornada no ha terminado. Se puede tocar para capturar por
   adelantado, pero no se juzga — ni falta ni revisión pendiente. */
.asi-v2 .asi-c-hoy   .asi-tag{ background:rgba(255,255,255,.06);  color:var(--asi-mut); }
.asi-v2 .asi-c-falta .asi-tag,
.asi-v2 .asi-c-sin   .asi-tag{ background:rgba(248,81,73,.12);   color:var(--asi-mal); }

.asi-v2 .asi-tot{ text-align:center; font-variant-numeric:tabular-nums; color:var(--asi-mut); min-width:54px; }
.asi-v2 .asi-tot-ret{ color:var(--asi-ret); font-weight:600; }
.asi-v2 .asi-tot-mal{ color:var(--asi-mal); font-weight:600; }

/* ── Estado vacío ───────────────────────────────────────────────────────── */
.asi-v2 .asi-vacio{
    flex:1; min-height:200px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:7px; text-align:center;
    border:1px dashed var(--asi-bd); border-radius:11px; padding:40px 20px;
}
.asi-v2 .asi-vacio i{ font-size:24px; color:var(--asi-mut); margin-bottom:4px; }
.asi-v2 .asi-vacio b{ font-size:14px; font-weight:600; }
.asi-v2 .asi-vacio span{ font-size:12.5px; color:var(--asi-tx2); max-width:420px; line-height:1.55; }
.asi-v2 .asi-vacio-mal{ border-color:rgba(248,81,73,.35); }
.asi-v2 .asi-vacio-mal i, .asi-v2 .asi-vacio-mal b{ color:var(--asi-mal); }

/* ── Leyenda ────────────────────────────────────────────────────────────── */
.asi-v2 .asi-leyenda{ display:flex; gap:16px; flex-wrap:wrap; font-size:11px; color:var(--asi-mut); }
.asi-v2 .asi-leyenda span{ display:inline-flex; align-items:center; gap:6px; }
.asi-v2 .asi-ll{ width:9px; height:9px; border-radius:3px; display:inline-block; }
.asi-v2 .asi-leyenda .asi-c-ok{ background:var(--asi-ok); }
.asi-v2 .asi-leyenda .asi-c-ret{ background:var(--asi-ret); }
.asi-v2 .asi-leyenda .asi-c-rev{ background:var(--asi-rev); }
.asi-v2 .asi-leyenda .asi-c-sin{ background:var(--asi-mal); }
.asi-v2 .asi-leyenda .asi-c-aus{ background:var(--asi-aus); }
.asi-v2 .asi-leyenda .asi-c-asu{ background:var(--asi-asu); }

/* ══ EL EDITOR DE DÍA ═══════════════════════════════════════════════════════
   Cuelga de <body>, así que no puede heredar las variables de `.asi-v2`. */
#asi-velo{
    position:fixed; inset:0; z-index:100700;
    background:rgba(10,12,18,.55);
    display:flex; align-items:center; justify-content:center; padding:20px;
}
#asi-velo *{ box-sizing:border-box; text-transform:none; letter-spacing:0; }
#asi-velo button, #asi-velo input{ font:inherit; }
#asi-velo .asi-dlg{
    width:min(470px,100%); max-height:88vh; overflow:auto;
    background:var(--hz-sur, #0d1117); color:var(--hz-tx, #e6edf3);
    border:1px solid var(--hz-bd, #30363d); border-radius:14px;
    box-shadow:0 24px 64px rgba(0,0,0,.45);
    font-size:13px;
}
#asi-velo header{
    display:flex; align-items:flex-start; gap:12px;
    padding:16px 18px 13px; border-bottom:1px solid var(--hz-bd, #30363d);
}
#asi-velo header > div{ flex:1; min-width:0; }
#asi-velo header b{ font-size:14.5px; font-weight:600; }
#asi-velo header small{ display:block; margin-top:2px; font-size:11.5px; color:var(--hz-tx2, #9aa4b2); }
#asi-velo header button{ background:none; border:0; color:var(--hz-mut, #6e7781); font-size:15px; cursor:pointer; }
#asi-velo header button:hover{ color:var(--hz-tx, #e6edf3); }
#asi-velo .asi-dlg-b{ padding:16px 18px; }

#asi-velo .asi-dlg-real{
    margin-bottom:14px; padding:10px 12px; border-radius:9px; font-size:12px; line-height:1.5;
    background:rgba(63,185,80,.08); border:1px solid rgba(63,185,80,.28); color:var(--hz-tx2, #9aa4b2);
}
#asi-velo .asi-dlg-real i{ color:#3fb950; margin-right:5px; }
#asi-velo .asi-dlg-real b{ color:var(--hz-tx, #e6edf3); }

#asi-velo .asi-4{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
#asi-velo .asi-f{ display:block; }
#asi-velo .asi-f > span{
    display:block; margin-bottom:6px;
    font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
    color:var(--hz-tx2, #9aa4b2);
}
#asi-velo .asi-f input{
    width:100%; padding:9px 11px; font-size:14px;
    font-variant-numeric:tabular-nums;
    background:var(--hz-sur2, #161b22); color:var(--hz-tx, #e6edf3);
    border:1px solid var(--hz-bd, #30363d); border-radius:9px;
}
#asi-velo .asi-f input:focus{ border-color:var(--hz-ac, #6f7dff); outline:none; }
/* La entrada real se ve, pero no se toca: es la única marca que la nómina usa. */
#asi-velo .asi-f input[readonly]{ opacity:.65; cursor:not-allowed; }
#asi-velo .asi-f > small{ display:block; margin-top:4px; font-size:10.5px; color:var(--hz-mut, #6e7781); }

#asi-velo .asi-dlg-acc{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
#asi-velo .asi-b{
    height:32px; padding:0 12px; font-size:12.5px; cursor:pointer;
    display:inline-flex; align-items:center; gap:7px;
    background:var(--hz-sur2, #161b22); color:var(--hz-tx2, #9aa4b2);
    border:1px solid var(--hz-bd, #30363d); border-radius:8px;
}
#asi-velo .asi-b:hover{ color:var(--hz-tx, #e6edf3); border-color:var(--hz-mut, #6e7781); }
#asi-velo .asi-b-pri{ background:var(--hz-ac, #6f7dff); border-color:var(--hz-ac, #6f7dff); color:#fff; font-weight:600; }
#asi-velo .asi-b-pri:hover{ filter:brightness(1.1); color:#fff; }
#asi-velo .asi-b-del:hover{ color:#f85149; border-color:rgba(248,81,73,.45); }

#asi-velo .asi-dlg-pie{ margin:14px 0 0; font-size:11.5px; line-height:1.55; color:var(--hz-mut, #6e7781); }
#asi-velo footer{
    display:flex; justify-content:flex-end; gap:9px;
    padding:14px 18px; border-top:1px solid var(--hz-bd, #30363d);
}

@media (prefers-reduced-motion: reduce){
    .asi-v2 .asi-b{ transition:none; }
}
