/* HUBAPP · Frontend · theme/theme.css  — LA LEY VISUAL (unica fuente del estilo).
   Tokens en 3 niveles (estandar #5): GLOBAL -> ALIAS -> COMPONENTE.
   Color por empresa = swap de la capa ALIAS segun [data-empresa] (5bis.5):
   EQUIPMOTOR rojo · ARTAGO azul · ARTEQUIP teal · SIN_VIA neutro. Agnostico del material. */

/* ===== Nivel 1 · GLOBAL ===== */
:root{
  --g-azul:#2563eb; --g-rojo:#dc2626; --g-teal:#0d9488;
  --g-ink-0:#0e1621; --g-ink-1:#15212e; --g-ink-2:#1b2937; --g-ink-3:#26384a; --g-ink-4:#1f2b3a;
  --g-fg-0:#e8eef4; --g-fg-1:#9fb0c0; --g-fg-2:#6f8295;
  --g-ok:#2ea043; --g-warn:#d29922; --g-danger:#f85149;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:22px; --sp-6:30px;
  --r-1:6px; --r-2:9px; --r-3:12px; --r-pill:999px;
  --fs-0:11.5px; --fs-1:13px; --fs-2:14px; --fs-3:18px; --fs-kpi:27px;
  --shadow:0 6px 20px rgba(0,0,0,.25);
  --maxw:1180px;
  --font: system-ui,"Segoe UI",Arial,sans-serif;
}

/* ===== Nivel 2 · ALIAS ===== */
:root{
  --bg:var(--g-ink-0); --surface:var(--g-ink-1); --surface-2:var(--g-ink-2);
  --border:var(--g-ink-3); --chip:var(--g-ink-4);
  --fg:var(--g-fg-0); --muted:var(--g-fg-1); --muted-2:var(--g-fg-2);
  --ok:var(--g-ok); --warn:var(--g-warn); --danger:var(--g-danger);
  --accent:var(--g-teal); --accent-fg:#ffffff;
}

/* ===== Ley de color de empresa (swap de la capa alias) ===== */
[data-empresa="ARTAGO"]{ --accent:var(--g-azul); }
[data-empresa="EQUIPMOTOR"]{ --accent:var(--g-rojo); }
[data-empresa="ARTEQUIP"]{ --accent:var(--g-teal); }
/* Estado "sin via"/desconocida: NEUTRO, nunca el teal de grupo (audit Codex) */
[data-empresa="SIN_VIA"]{ --accent:var(--g-fg-2); }

/* ===== Base + accesibilidad (WCAG 2.2) ===== */
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);background:var(--bg);color:var(--fg);line-height:1.45;font-size:var(--fs-2)}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-1)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ===== Nivel 3 · COMPONENTES ===== */
.empbar{height:6px;width:100%;background:var(--accent)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:var(--sp-5) var(--sp-5) 60px}
.grid{display:grid;gap:var(--sp-4)}
.k4{grid-template-columns:repeat(4,1fr)}
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
@media(max-width:860px){.k4{grid-template-columns:repeat(2,1fr)}.twocol{grid-template-columns:1fr}}
@media(max-width:520px){.k4{grid-template-columns:1fr}}
.hidden{display:none!important}

header{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;justify-content:space-between;margin:var(--sp-2) 0 var(--sp-1)}
.brand{display:flex;align-items:center;gap:var(--sp-3)}
.logo{width:38px;height:38px;border-radius:var(--r-2);background:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--accent-fg);font-size:15px}
h1{font-size:var(--fs-3);margin:0;font-weight:700}
.brand .sub{color:var(--muted);font-size:var(--fs-1);margin-top:1px}
h2{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:var(--sp-6) 0 var(--sp-3);font-weight:700}

.btn{border:1px solid var(--border);background:var(--surface-2);color:var(--fg);border-radius:var(--r-1);padding:var(--sp-2) var(--sp-4);cursor:pointer;font-size:var(--fs-1);font-weight:600}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}

.switch{display:inline-flex;flex-wrap:wrap;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:5px;margin:var(--sp-4) 0 0}
.switch button{border:0;background:transparent;color:var(--muted);font-weight:700;padding:7px 13px;border-radius:var(--r-1);cursor:pointer;font-size:12.5px;display:flex;gap:7px;align-items:center}
.switch .dot{width:9px;height:9px;border-radius:50%}
.switch .dot.a{background:var(--g-azul)} .switch .dot.e{background:var(--g-rojo)}
.switch button.on{background:var(--accent);color:var(--accent-fg)} .switch button.on .dot{background:#fff}

.statusbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:var(--sp-4) 0 var(--sp-1)}
.pill{font-size:12px;padding:4px 11px;border-radius:var(--r-pill);border:1px solid var(--border);background:var(--chip);color:var(--muted);display:inline-flex;gap:7px;align-items:center}
.pill .led{width:8px;height:8px;border-radius:50%}
.pill.live .led{background:var(--ok)} .pill.demo .led{background:var(--warn)}
.pill.empnow{border-color:var(--accent);color:var(--fg)} .pill.empnow .led{background:var(--accent)}

.notice{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--warn);border-radius:var(--r-3);padding:13px 15px;margin:var(--sp-3) 0 var(--sp-5);font-size:var(--fs-1);color:var(--muted)}
.notice.live{border-left-color:var(--ok)} .notice b{color:var(--fg)}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-3);padding:var(--sp-4)}
.kpi .label{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.kpi .val{font-size:var(--fs-kpi);font-weight:800;margin-top:7px;letter-spacing:-.01em}
.kpi .val small{font-size:var(--fs-2);font-weight:600;color:var(--muted)}
.kpi .delta{font-size:12px;color:var(--muted-2);margin-top:5px}
.accentval .val{color:var(--accent)}

.bars .row{display:grid;grid-template-columns:130px 1fr 60px;gap:10px;align-items:center;padding:5px 0;font-size:var(--fs-1)}
.bars .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track{background:var(--surface-2);border-radius:var(--r-1);height:14px;overflow:hidden}
.fill{height:100%;background:var(--accent);border-radius:var(--r-1)}
.bars .num{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}

table{width:100%;border-collapse:collapse;font-size:var(--fs-1)}
th,td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:left}
th{color:var(--muted);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}

.empty{padding:var(--sp-5);text-align:center;color:var(--muted);border:1px dashed var(--border);border-radius:var(--r-3);background:var(--surface)}
.empty .ico{font-size:26px;opacity:.6}
.skeleton{background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 37%,var(--surface) 63%);background-size:400% 100%;animation:sk 1.2s ease infinite;border-radius:var(--r-1)}
@keyframes sk{0%{background-position:100% 0}100%{background-position:-100% 0}}

.login{max-width:420px;margin:8vh auto;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:26px}
.login h2{font-size:16px;text-transform:none;letter-spacing:0;color:var(--fg);margin:0 0 6px}
.login p{color:var(--muted);font-size:var(--fs-1);margin:0 0 var(--sp-4)}
.login input{width:100%;padding:11px 13px;border-radius:var(--r-2);border:1px solid var(--border);background:var(--surface-2);color:var(--fg);font-size:var(--fs-2);margin-bottom:var(--sp-3)}
.login .btn{width:100%;justify-content:center}
.login .msg{margin-top:var(--sp-3);font-size:var(--fs-1);color:var(--muted)}
.login .ok{color:#5fd07e} .login .err{color:#f08a82}

.agentbox{margin-top:var(--sp-6);border:1px solid var(--border);border-radius:var(--r-3);overflow:hidden}
.agentbox>summary{list-style:none;cursor:pointer;padding:10px 14px;font-size:12px;color:var(--muted-2);display:flex;align-items:center;gap:9px;user-select:none}
.agentbox>summary::-webkit-details-marker{display:none}
.agentbox .chev{transition:transform .15s} .agentbox[open]>summary .chev{transform:rotate(90deg)}
pre{margin:0;padding:14px 16px;background:#0b121b;color:#c6d4e2;font-size:11.5px;max-height:300px;overflow:auto;white-space:pre-wrap;word-break:break-word}

footer{margin-top:34px;color:var(--muted-2);font-size:11.5px;border-top:1px solid var(--border);padding-top:14px;line-height:1.7}
code{background:var(--chip);padding:1px 5px;border-radius:4px;font-size:12px}

.shell{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
.sidenav{background:var(--surface);border-right:1px solid var(--border);padding:var(--sp-3)}
.sidenav a{display:flex;gap:9px;align-items:center;padding:9px 11px;border-radius:var(--r-1);color:var(--muted);text-decoration:none;font-weight:600;font-size:var(--fs-1)}
.sidenav a.on,.sidenav a:hover{background:var(--surface-2);color:var(--fg)}
.sidenav a .led{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.sidenav .soon{margin-left:auto;font-size:10px;color:var(--muted-2);border:1px solid var(--border);border-radius:var(--r-pill);padding:1px 7px}
.sidenav .navsep{margin:14px 11px 6px;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2)}
@media(max-width:760px){.shell{grid-template-columns:1fr}.sidenav{display:none}}