/* styles.css — Sistema de diseño WorkClock.
   Capa 1: tokens (biblioteca-design, paleta "esmeralda-reloj", dark-first).
   Capa 2: aliases legacy (--brand/--accent/--bg/...) = canal de override por cliente (emp.colores).
   Capa 3: layout (shell con sidebar) y componentes. Sin build, sin framework. */

/* ---------- Fuentes (biblioteca-design, OFL; subset latin) ---------- */
@font-face { font-family:'Inter'; src:url('../assets/fonts/inter-latin.woff2') format('woff2'); font-weight:100 900; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('../assets/fonts/jetbrainsmono-latin.woff2') format('woff2'); font-weight:100 800; font-display:swap; }

:root {
  /* Tipografía */
  --font-sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;
  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem; --text-xl:1.375rem;

  /* Espaciado (escala 4px) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px;

  /* Radios y sombras */
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-full:999px;
  --shadow-1:0 1px 2px rgba(0,0,0,.25);
  --shadow-2:0 4px 12px rgba(0,0,0,.30);
  --shadow-3:0 12px 32px rgba(0,0,0,.35);

  /* Paleta esmeralda-reloj (biblioteca-design/disenos/paletas.json) */
  --background:#0d1210; --foreground:#e6ece8; --card:#131b16; --card-2:#0f1712;
  --muted-foreground:#93a39a; --border:#26332c; --border-soft:#1d2822;
  --accent:#2fbf71; --accent-hover:#45d384; --accent-foreground:#062415;
  --success:#34c77b; --warning:#f5b544; --danger:#ef5b5b; --info:#4f9cf9;

  /* Aliases legacy — canal de override por cliente (emp.colores / settings) */
  --brand:#10241b;            /* sidebar / topbar */
  /* Texto sobre superficies brand: SIEMPRE claro. --brand es oscuro por diseño
     (default #10241b y los overrides de cliente p.ej. bocore #1f3864), así que
     este texto NO puede seguir a --foreground, que se voltea en modo claro. */
  --brand-foreground:#e6ece8; --brand-muted:#9fb2a6;
  --bg:var(--background); --text:var(--foreground); --muted:var(--muted-foreground);
  --ok:var(--success); --err:var(--danger); --radius:var(--radius-md);
  --sidebar-w:230px;
}

* { box-sizing:border-box; }
/* dark-first: se declara soporte para ambos esquemas (dark preferido) para que
   los controles nativos (date/time) sigan la preferencia del sistema o la elección
   manual (data-tema). */
html { color-scheme: dark light; } /* dark-first; el bloque claro de abajo lo cambia a light */
:root[data-tema="oscuro"] { color-scheme:dark; } /* elección manual: no sigue al sistema */

/* ---------- Modo claro: manual (data-tema) o automático del sistema ----------
   Dos caminos comparten EXACTAMENTE el mismo bloque (deben mantenerse idénticos;
   CSS no permite un selector común a través de @media, así que el bloque está
   escrito una vez por camino y nada más):
   1) manual: el switch fija :root[data-tema="claro"] (localStorage "wc:tema");
   2) automático: sin atributo guardado y sistema en claro (prefers-color-scheme).
   Sin atributo y sistema oscuro (o data-tema="oscuro") → tema oscuro de :root.
   Solo se redefinen vars de color y sombras; los aliases legacy y el canal
   de override por cliente (emp.colores, inline style) siguen intactos y ganan. */
:root[data-tema="claro"] {
  --background:#f4f7f5; --foreground:#16211b; --card:#ffffff; --card-2:#f6f9f7;
  --muted-foreground:#5c6b63; --border:#dbe5df; --border-soft:#e5ece7;
  --shadow-1:0 1px 2px rgba(16,33,26,.06);
  --shadow-2:0 4px 12px rgba(16,33,26,.08);
  --shadow-3:0 12px 32px rgba(16,33,26,.10);
  color-scheme:light;
  /* rgba hardcodeados: ajuste de legibilidad en claro */
  button:hover { background:#e9f2ec; border-color:var(--accent); }
  input:focus,select:focus,textarea:focus { box-shadow:0 0 0 3px rgba(47,191,113,.25); }
  input[type="date"], input[type="time"] { color-scheme:light; }
  ::placeholder { color:#7a8a81; }
  tbody tr:hover { background:rgba(47,191,113,.07); }
  .msg.err { color:#b3261e; }
  .msg.ok { color:#1d7a4d; }
  .badge.programadas { color:#1d5fae; }
  .badge.warn, .badge-warn, .badge-suspendido { color:#b3261e; }
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema]) {
    --background:#f4f7f5; --foreground:#16211b; --card:#ffffff; --card-2:#f6f9f7;
    --muted-foreground:#5c6b63; --border:#dbe5df; --border-soft:#e5ece7;
    --shadow-1:0 1px 2px rgba(16,33,26,.06);
    --shadow-2:0 4px 12px rgba(16,33,26,.08);
    --shadow-3:0 12px 32px rgba(16,33,26,.10);
    color-scheme:light;
    /* rgba hardcodeados: ajuste de legibilidad en claro */
    button:hover { background:#e9f2ec; border-color:var(--accent); }
    input:focus,select:focus,textarea:focus { box-shadow:0 0 0 3px rgba(47,191,113,.25); }
    input[type="date"], input[type="time"] { color-scheme:light; }
    ::placeholder { color:#7a8a81; }
    tbody tr:hover { background:rgba(47,191,113,.07); }
    .msg.err { color:#b3261e; }
    .msg.ok { color:#1d7a4d; }
    .badge.programadas { color:#1d5fae; }
    .badge.warn, .badge-warn, .badge-suspendido { color:#b3261e; }
  }
}

body { margin:0; font:15px/1.5 var(--font-sans); background:var(--background); color:var(--foreground);
  -webkit-font-smoothing:antialiased; }
h2,h3,h4 { font-weight:650; letter-spacing:-.01em; }
h3 { font-size:var(--text-lg); margin:0 0 var(--space-4); }
h4 { font-size:var(--text-base); margin:var(--space-6) 0 var(--space-2); }
a { color:var(--accent); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-sm); }

/* ---------- Shell: sidebar + contenido (vista admin / super-admin) ---------- */
.shell { display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:100vh;
  transition:grid-template-columns .18s ease; }
.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:var(--space-2);
  background:var(--brand); border-right:1px solid var(--border-soft); padding:var(--space-4) var(--space-3);
  color:var(--brand-foreground); }
.sidebar .brand { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-2) var(--space-4);
  font-weight:700; border-bottom:1px solid var(--border-soft); margin-bottom:var(--space-2); min-height:48px; }
.sidebar .brand img { height:28px; border-radius:var(--radius-sm); }
.sidebar nav { display:flex; flex-direction:column; gap:2px; overflow-y:auto; flex:1; }
.sidebar nav::-webkit-scrollbar { width:6px; } .sidebar nav::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
.side-foot { padding:var(--space-2); border-top:1px solid var(--border-soft); }
.side-foot .muted { font-size:var(--text-xs); color:var(--brand-muted); }

/* Ítem del menú (patrón APG: aria-current="page" es la única fuente del estado activo) */
.sidebar nav button { display:flex; align-items:center; gap:var(--space-3); width:100%;
  padding:var(--space-2) var(--space-3); border:0; border-radius:var(--radius-sm); background:transparent;
  color:var(--brand-muted); font:inherit; font-size:var(--text-sm); text-align:left; cursor:pointer;
  transition:background .15s, color .15s; }
.sidebar nav button:hover { background:rgba(255,255,255,.06); color:var(--brand-foreground); }
.sidebar nav button[aria-current="page"] { background:rgba(47,191,113,.14); color:var(--accent); font-weight:600;
  box-shadow:inset 2px 0 0 var(--accent); }
.sidebar nav button.logout { color:var(--danger); margin-top:var(--space-2); }
.sidebar nav button.logout:hover { background:rgba(239,91,91,.10); color:var(--danger); }
.icon { width:18px; height:18px; flex:none; stroke-width:1.8; }

.content { min-width:0; display:flex; flex-direction:column; }
.content main { width:100%; max-width:1180px; margin:0 auto; padding:var(--space-6) var(--space-6) var(--space-12);
  flex:1; }

/* ---------- Kiosco (punto de venta y login, sin sidebar) ---------- */
.kiosk { min-height:100vh; display:flex; flex-direction:column; }
.kiosk main { flex:1; display:flex; flex-direction:column; justify-content:center; }
.top { display:flex; gap:var(--space-4); align-items:center; padding:var(--space-3) var(--space-6);
  background:var(--brand); border-bottom:1px solid var(--border-soft); flex-wrap:wrap;
  color:var(--brand-foreground); }
.top nav { margin-left:auto; display:flex; gap:var(--space-2); }
.top .muted { color:var(--brand-muted); font-size:var(--text-sm); }
/* Switch de tema (T1): fila de marca del sidebar y topbar del kiosco (no en login).
   Vive sobre superficie --brand, así que siempre usa --brand-foreground. */
.btn-tema { display:inline-flex; align-items:center; gap:var(--space-1); margin-left:auto;
  padding:var(--space-1) var(--space-2); border:0; border-radius:var(--radius-sm); background:transparent;
  color:var(--brand-foreground); font:inherit; font-size:var(--text-sm); cursor:pointer; }
.btn-tema:hover { background:rgba(255,255,255,.08); border-color:transparent; }

/* ---------- Sidebar en riel de iconos (T2): <html data-sidebar="riel"> ----------
   --sidebar-w baja a 56px y las etiquetas se ocultan VISUALMENTE con el patrón
   sr-only (absolute + clip-path) — NO display:none — para que los ítems sigan
   accesibles a lectores de pantalla; el tooltip nativo (title) suple el texto.
   El ítem activo conserva su barra lateral (aria-current, sin cambios).
   Solo aplica ≥861px: en <860px la barra es horizontal y el botón no existe. */
:root[data-sidebar="riel"] { --sidebar-w:56px; }
.btn-sidebar { display:inline-flex; align-items:center; justify-content:center; flex:none;
  padding:var(--space-1); border:0; border-radius:var(--radius-sm); background:transparent;
  color:var(--brand-foreground); font:inherit; cursor:pointer;
  transition:background .15s, color .15s; }
.btn-sidebar:hover { background:rgba(255,255,255,.08); border-color:transparent; }

@media (min-width:861px) {
  :root[data-sidebar="riel"] .sidebar { padding:var(--space-4) var(--space-1); }
  :root[data-sidebar="riel"] .sidebar .brand { flex-direction:column; gap:var(--space-1); }
  /* sr-only: fuera del flujo y recortado, pero presente para el árbol de accesibilidad */
  :root[data-sidebar="riel"] .sidebar .brand-nombre,
  :root[data-sidebar="riel"] .sidebar nav button span,
  :root[data-sidebar="riel"] .side-foot .muted {
    position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
  :root[data-sidebar="riel"] .sidebar nav button { justify-content:center; gap:0; padding:var(--space-2) 0; }
  :root[data-sidebar="riel"] .btn-tema { margin-left:0; }
}

/* ---------- Componentes ---------- */
.card { background:var(--card); border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  padding:var(--space-6); margin-bottom:var(--space-4); box-shadow:var(--shadow-1); }
.narrow { max-width:430px; margin:var(--space-8) auto; width:100%; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:var(--space-3); align-items:end; }
label { display:flex; flex-direction:column; gap:var(--space-1); font-size:var(--text-sm); color:var(--muted-foreground); }
input,select,textarea { padding:.55rem .65rem; background:var(--card-2); border:1px solid var(--border);
  border-radius:var(--radius-sm); font:inherit; color:var(--foreground); }
input:focus,select:focus,textarea:focus { border-color:var(--accent); outline:none; box-shadow:0 0 0 3px rgba(47,191,113,.15); }
input[type="date"], input[type="time"] { color-scheme:dark; }
::placeholder { color:#5d6b63; }

button { padding:.5rem .9rem; border:1px solid var(--border); background:var(--card-2); border-radius:var(--radius-sm);
  cursor:pointer; font:inherit; font-size:var(--text-sm); color:var(--foreground);
  transition:background .15s, border-color .15s; }
button:hover { background:#182219; border-color:var(--accent); }
button.on, button.primary { background:var(--accent); color:var(--accent-foreground); border-color:var(--accent); font-weight:600; }
button.on:hover, button.primary:hover { background:var(--accent-hover); }
button.big { width:100%; padding:1rem; font-size:1.1rem; margin:var(--space-4) 0; font-weight:650; }
button[disabled] { opacity:.45; cursor:not-allowed; }

.scroll { overflow-x:auto; border:1px solid var(--border-soft); border-radius:var(--radius-md); }
table { width:100%; border-collapse:collapse; font-size:var(--text-sm); }
th,td { padding:.5rem .65rem; border-bottom:1px solid var(--border-soft); text-align:left; white-space:nowrap; }
thead th { position:sticky; top:0; background:var(--card-2); color:var(--muted-foreground);
  font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.04em; z-index:1; }
tbody tr:hover { background:rgba(47,191,113,.04); }
.muted { color:var(--muted-foreground); }
.num { text-align:right; font-variant-numeric:tabular-nums; font-family:var(--font-mono); font-size:var(--text-sm); }

.msg { max-width:1180px; margin:var(--space-3) auto 0; padding:.6rem 1rem; border-radius:var(--radius-sm); font-size:var(--text-sm); }
.content .msg, .kiosk .msg { margin:var(--space-3) var(--space-6) 0; max-width:none; }
.msg.err { background:rgba(239,91,91,.12); color:#ff9b9b; border:1px solid rgba(239,91,91,.3); }
.msg.ok { background:rgba(52,199,123,.12); color:#7fe0ac; border:1px solid rgba(52,199,123,.3); }
.ok { color:var(--success); font-weight:600; }

.demo { background:rgba(245,181,68,.10); border:1px solid rgba(245,181,68,.35); color:var(--warning);
  padding:.5rem .75rem; border-radius:var(--radius-sm); font-size:var(--text-sm); }
.punches { list-style:none; padding:0; margin:var(--space-4) 0; }
.punches li { display:flex; justify-content:space-between; padding:.45rem 0; border-bottom:1px dashed var(--border); }
.file input { display:none; }
.file { display:inline-block; padding:.5rem .9rem; border:1px solid var(--border); border-radius:var(--radius-sm);
  cursor:pointer; background:var(--card-2); font-size:var(--text-sm); }
.logo { height:28px; vertical-align:middle; margin-right:.5rem; border-radius:var(--radius-sm); }

table.resumen td { vertical-align:top; } table.resumen tr.bloque td { border-top:2px solid var(--border); }
th.total,td.total { background:rgba(245,181,68,.10); font-weight:700; text-align:right; color:var(--warning); }
.badge { display:inline-block; padding:.1rem .55rem; border-radius:var(--radius-full); background:var(--card-2);
  border:1px solid var(--border); font-size:var(--text-xs); color:var(--muted-foreground); }
.badge.programadas { background:rgba(79,156,249,.12); border-color:rgba(79,156,249,.35); color:#8cc2ff; }
.badge.operativa { background:rgba(245,181,68,.12); border-color:rgba(245,181,68,.35); color:var(--warning); }
.badge.warn { background:rgba(239,91,91,.12); border-color:rgba(239,91,91,.35); color:#ff9b9b; }
.badge-activo { background:rgba(52,199,123,.12); color:var(--success); } .badge-suspendido { background:rgba(239,91,91,.12); color:#ff9b9b; }
.badge-cerrado { background:var(--card-2); color:var(--muted-foreground); }
.badge-ok { background:rgba(52,199,123,.12); color:var(--success); }
.badge-atencion { background:rgba(245,181,68,.12); color:var(--warning); }
.badge-warn { background:rgba(239,91,91,.12); color:#ff9b9b; }

/* KPI cards */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:var(--space-3); }
.kpi { background:var(--card-2); border:1px solid var(--border-soft); border-radius:var(--radius-md);
  padding:var(--space-4); display:flex; flex-direction:column; gap:.2rem; }
.kpi span { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.05em; color:var(--muted-foreground); }
.kpi b { font-size:1.45rem; font-weight:700; font-variant-numeric:tabular-nums; }
.kpi small { font-size:var(--text-xs); opacity:.8; line-height:1.35; }
.kpi.main { background:linear-gradient(135deg, rgba(47,191,113,.18), rgba(47,191,113,.06));
  border-color:rgba(47,191,113,.35); }
.kpi.main b { color:var(--accent); }

.dias { border:1px dashed var(--border); border-radius:var(--radius-sm); display:flex; gap:var(--space-3);
  flex-wrap:wrap; align-items:center; padding:var(--space-2) var(--space-3); grid-column:1/-1; }
label.chk { flex-direction:row; align-items:center; gap:.35rem; color:var(--foreground); }
.clavebox code { font-family:var(--font-mono); font-size:1.05rem; background:var(--card-2); padding:.2rem .5rem;
  border-radius:var(--radius-sm); word-break:break-all; border:1px solid var(--border-soft); }
.logo-preview { max-height:64px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--card-2); padding:2px; }
.bar { height:10px; border-radius:var(--radius-full); background:var(--card-2); overflow:hidden; margin:.5rem 0; }
.bar-fill { height:100%; background:var(--accent); transition:width .3s ease; }
.bar-indet { height:100%; width:33%; background:var(--accent); animation:bar-indet 1.2s infinite linear; }
@keyframes bar-indet { 0% { margin-left:-33%; } 100% { margin-left:100%; } }
.imp p { margin:.3rem 0; }
.tenant-banner { padding:.6rem 1rem; background:rgba(245,181,68,.10); border-bottom:1px solid rgba(245,181,68,.3);
  color:var(--warning); display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; font-size:var(--text-sm); }
.tenant-banner button { margin-left:auto; }
.sec-head { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--space-2); }
.sec-head h3 { margin:0; }

/* ---------- Consola super-admin (T3): fichas de empresa, detalle y breadcrumb ---------- */
.fichas { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--space-3); }
.ficha { display:flex; flex-direction:column; gap:var(--space-2); background:var(--card-2);
  border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:var(--space-4);
  cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.ficha:hover { border-color:var(--accent); box-shadow:var(--shadow-2); }
.ficha:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.ficha-head { display:flex; justify-content:space-between; align-items:center; gap:var(--space-2); }
.ficha-head b { font-size:var(--text-base); }
.ficha-datos { display:flex; gap:var(--space-6); margin:0; flex-wrap:wrap; }
.ficha-datos div { display:flex; flex-direction:column; }
.ficha-datos dt { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.05em; color:var(--muted-foreground); }
.ficha-datos dd { margin:0; font-weight:650; font-variant-numeric:tabular-nums; }
.ficha-acciones { display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:auto; }
.breadcrumb { display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm);
  color:var(--muted-foreground); margin-bottom:var(--space-3); }
.breadcrumb button { padding:.25rem .6rem; }
.detalle-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:var(--space-2); }
.detalle-grid div { display:flex; flex-direction:column; gap:.15rem; background:var(--card-2);
  border:1px solid var(--border-soft); border-radius:var(--radius-sm); padding:var(--space-2) var(--space-3); }
.detalle-grid span { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.05em; color:var(--muted-foreground); }
.detalle-grid b { font-size:var(--text-lg); font-weight:700; font-variant-numeric:tabular-nums; }
.detalle-listas { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--space-4);
  font-size:var(--text-sm); line-height:1.6; }

/* ---------- Gráficos (Chart.js vendido; degradación elegante a tablas) ---------- */
.chart-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--space-4); margin:var(--space-3) 0; }
.chart-box { margin:0; background:var(--card-2); border:1px solid var(--border-soft); border-radius:var(--radius-md);
  padding:var(--space-4); }
.chart-box canvas { max-height:240px; max-width:100%; }
.chart-box figcaption { font-size:var(--text-xs); color:var(--muted-foreground); margin-top:var(--space-2); text-align:center; }
.no-charts .chart-grid { display:none; }

/* ---------- Responsive: el sidebar pasa a barra superior horizontal ---------- */
@media (max-width: 860px) {
  .shell { grid-template-columns:1fr; }
  .sidebar { position:sticky; top:0; height:auto; z-index:10; padding:var(--space-2) var(--space-3); }
  .sidebar .brand { border-bottom:0; margin-bottom:0; padding-bottom:var(--space-1); }
  .sidebar nav { flex-direction:row; overflow-x:auto; padding-bottom:var(--space-1); gap:var(--space-1); }
  .sidebar nav button { width:auto; white-space:nowrap; padding:.45rem .7rem; box-shadow:none !important; }
  .sidebar nav button[aria-current="page"] { box-shadow:none; border:1px solid rgba(47,191,113,.4); }
  .side-foot { display:none; }
  /* En móvil el sidebar es SIEMPRE la barra horizontal completa: sin toggle
     (y sin riel, aunque localStorage diga "riel"). */
  .sidebar .btn-sidebar { display:none; }
  .sidebar .brand { flex-direction:row; }
  .sidebar .brand-nombre, .sidebar nav button span { position:static; width:auto; height:auto;
    margin:0; overflow:visible; clip:auto; clip-path:none; white-space:normal; }
  .content main { padding:var(--space-4) var(--space-3) var(--space-8); }
  .content .msg, .kiosk .msg { margin:var(--space-2) var(--space-3) 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } }