/* ------------------------------------------------------------------
     Regla del sistema: el chrome es ACROMATICO. Verde y celeste aparecen
     unicamente cuando significan Jumbo o Lider. Asi el color es dato, no
     decoracion, y la vista se lee de un vistazo.
     ------------------------------------------------------------------ */
  :root{
    --bg:#FAFBFA; --surface:#FFFFFF; --surface-2:#F3F5F4; --raise:#FFFFFF;
    --hair:rgba(12,22,17,.10); --hair-2:rgba(12,22,17,.055);
    --ink:#0B120E; --muted:#5C6863; --faint:#8B958F;
    --jumbo:#0B9B48; --lider:#0A87BF;
    --jumbo-bg:rgba(11,155,72,.10); --lider-bg:rgba(10,135,191,.10);
    --warn:#9A6A00; --warn-bg:rgba(154,106,0,.10);
    --r:16px; --r-sm:10px;
    --shadow:0 1px 2px rgba(12,22,17,.05), 0 8px 24px -12px rgba(12,22,17,.14);
  }
  @media (prefers-color-scheme:dark){
    :root{
      --bg:#080A09; --surface:#101413; --surface-2:#161B19; --raise:#151A18;
      --hair:rgba(255,255,255,.10); --hair-2:rgba(255,255,255,.055);
      --ink:#F1F4F2; --muted:#9AA5A0; --faint:#6B7671;
      --jumbo:#3DD07C; --lider:#4EC5F5;
      --jumbo-bg:rgba(61,208,124,.13); --lider-bg:rgba(78,197,245,.13);
      --warn:#E3AC4A; --warn-bg:rgba(227,172,74,.13);
      --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.7);
    }
  }
  :root[data-theme="dark"]{
    --bg:#080A09; --surface:#101413; --surface-2:#161B19; --raise:#151A18;
    --hair:rgba(255,255,255,.10); --hair-2:rgba(255,255,255,.055);
    --ink:#F1F4F2; --muted:#9AA5A0; --faint:#6B7671;
    --jumbo:#3DD07C; --lider:#4EC5F5;
    --jumbo-bg:rgba(61,208,124,.13); --lider-bg:rgba(78,197,245,.13);
    --warn:#E3AC4A; --warn-bg:rgba(227,172,74,.13);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -16px rgba(0,0,0,.7);
  }
  :root[data-theme="light"]{
    --bg:#FAFBFA; --surface:#FFFFFF; --surface-2:#F3F5F4; --raise:#FFFFFF;
    --hair:rgba(12,22,17,.10); --hair-2:rgba(12,22,17,.055);
    --ink:#0B120E; --muted:#5C6863; --faint:#8B958F;
    --jumbo:#0B9B48; --lider:#0A87BF;
    --jumbo-bg:rgba(11,155,72,.10); --lider-bg:rgba(10,135,191,.10);
    --warn:#9A6A00; --warn-bg:rgba(154,106,0,.10);
    --shadow:0 1px 2px rgba(12,22,17,.05), 0 8px 24px -12px rgba(12,22,17,.14);
  }

  *{box-sizing:border-box}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size:14.5px; line-height:1.45; -webkit-font-smoothing:antialiased;
  }
  .num{font-family:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;
       font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}
  .wrap{max-width:1420px; margin:0 auto; padding:0 20px 72px}
  .lab{font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}

  /* ---------- top bar ---------- */
  .top{
    position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--bg) 82%, transparent);
    backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px);
    border-bottom:1px solid var(--hair-2); margin-bottom:26px;
  }
  .top-in{max-width:1420px; margin:0 auto; padding:16px 20px; display:flex; align-items:center;
          gap:18px; flex-wrap:wrap}
  h1{margin:0; font-size:17px; font-weight:700; letter-spacing:-.02em}
  .stamp{font-size:11.5px; color:var(--faint); margin-top:2px}
  .live{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--jumbo);
        margin-right:6px; vertical-align:1px; box-shadow:0 0 0 3px var(--jumbo-bg)}

  .seg{display:flex; gap:2px; padding:3px; background:var(--surface-2);
       border:1px solid var(--hair-2); border-radius:99px; margin-left:auto}
  .seg button{
    appearance:none; border:0; background:none; cursor:pointer; font:inherit; font-weight:650;
    font-size:13px; color:var(--muted); padding:6px 16px; border-radius:99px; transition:.14s;
  }
  .seg button[aria-selected="true"]{background:var(--raise); color:var(--ink); box-shadow:var(--shadow)}
  .seg button:focus-visible{outline:2px solid var(--lider); outline-offset:2px}
  .key{display:flex; gap:13px; font-size:11.5px; color:var(--muted); align-items:center}
  .key i{width:7px;height:7px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:0}

  /* ---------- hero verdict ---------- */
  .verdict{
    display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hair-2);
    border:1px solid var(--hair); border-radius:var(--r); overflow:hidden; margin-bottom:14px;
  }
  .vc{background:var(--surface); padding:22px 24px; position:relative}
  .vc::before{content:""; position:absolute; inset:0 auto 0 0; width:3px}
  .vc.j::before{background:var(--jumbo)} .vc.l::before{background:var(--lider)}
  .vc.n::before{background:var(--hair)}
  .vc .who{font-size:12.5px; font-weight:700; letter-spacing:.02em}
  .vc.j .who{color:var(--jumbo)} .vc.l .who{color:var(--lider)} .vc.n .who{color:var(--faint)}
  .vc .head{font-size:31px; font-weight:800; letter-spacing:-.035em; margin-top:7px; line-height:1.05}
  .vc .sub{font-size:13px; color:var(--muted); margin-top:5px}

  /* ---------- metric strip ---------- */
  /* 4 o 2 columnas, nunca 3: con auto-fit el cuarto tile quedaba huerfano en una
     fila propia y la fila se veia rota. */
  .metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:22px}
  @media (max-width:1080px){ .metrics{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:520px){ .metrics{grid-template-columns:1fr} }
  .m{background:var(--surface); border:1px solid var(--hair); border-radius:var(--r-sm); padding:14px 16px}
  .m .v{font-size:25px; font-weight:750; letter-spacing:-.03em; margin-top:7px; line-height:1.05}
  .m .c{font-size:12px; color:var(--muted); margin-top:3px}
  .m .track{height:4px; border-radius:99px; background:var(--surface-2); margin-top:12px; overflow:hidden}
  .m .track i{display:block; height:100%; border-radius:99px}

  /* ---------- table ---------- */
  .card{background:var(--surface); border:1px solid var(--hair); border-radius:var(--r); overflow:hidden}
  .scroll{overflow-x:auto}
  table{border-collapse:separate; border-spacing:0; width:100%; font-size:13.5px}
  th,td{padding:11px 14px; text-align:left; white-space:nowrap}
  thead th{
    font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--faint);
    background:var(--surface); border-bottom:1px solid var(--hair); position:sticky; top:0; z-index:2;
  }
  th.j{color:var(--jumbo)} th.l{color:var(--lider)}
  tbody td{border-bottom:1px solid var(--hair-2)}
  tbody tr:last-child td{border-bottom:0}
  tbody tr{transition:background .12s}
  tbody tr:hover td{background:var(--surface-2)}
  td.k{font-weight:650; position:sticky; left:0; background:var(--surface); z-index:1}
  tbody tr:hover td.k{background:var(--surface-2)}
  .j-t{color:var(--jumbo)} .l-t{color:var(--lider)}
  .win{padding:3px 9px; border-radius:7px; font-weight:700}
  .win.j{background:var(--jumbo-bg); color:var(--jumbo)}
  .win.l{background:var(--lider-bg); color:var(--lider)}

  .tag{display:inline-block; font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:99px;
       letter-spacing:.02em}
  .tag.j{background:var(--jumbo-bg); color:var(--jumbo)}
  .tag.l{background:var(--lider-bg); color:var(--lider)}
  .tag.n{background:var(--surface-2); color:var(--faint)}
  .tag.w{background:var(--warn-bg); color:var(--warn)}
  .ago{font-size:10.5px; color:var(--warn); font-weight:650}

  .prod{display:flex; align-items:center; gap:12px; white-space:normal; min-width:270px}
  .prod img{width:38px;height:38px;object-fit:contain;border-radius:8px;background:var(--surface-2);
            border:1px solid var(--hair-2);flex:none}
  .prod .nm{font-weight:650; line-height:1.25}
  .prod .rn{font-size:11px; color:var(--faint); line-height:1.3; margin-top:2px}

  .chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px}
  .chip{appearance:none; cursor:pointer; font:inherit; font-size:12.5px; font-weight:650;
        padding:6px 13px; border-radius:99px; border:1px solid var(--hair);
        background:var(--surface); color:var(--muted); transition:.14s}
  .chip:hover{color:var(--ink)}
  .chip[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
  .chip:focus-visible{outline:2px solid var(--lider); outline-offset:2px}

  .note{margin:16px 2px 0; font-size:12.5px; color:var(--muted); line-height:1.6; max-width:104ch}
  .note b{color:var(--ink); font-weight:650}
  .hidden{display:none}
  svg.spark{display:block}
  @media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }
  @media (max-width:760px){
    .verdict{grid-template-columns:1fr} .vc .head{font-size:26px}
    .top-in{gap:12px} .seg{margin-left:0; width:100%}  .seg button{flex:1}
  }
/* ---------- botones, estados de carga y login ---------- */
.btn{
  appearance:none; cursor:pointer; font:inherit; font-weight:650; font-size:13px;
  padding:8px 16px; border-radius:99px; border:1px solid var(--hair);
  background:var(--ink); color:var(--bg); transition:.14s;
}
.btn:hover{opacity:.9}
.btn:focus-visible{outline:2px solid var(--lider); outline-offset:2px}
.btn.ghost{background:transparent; color:var(--muted); border-color:var(--hair)}
.btn.ghost:hover{color:var(--ink)}
#logout{margin:0}

.state{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:72px 20px; text-align:center;
}
.state-t{margin:0; color:var(--muted); font-size:14px}

/* ---------- login ---------- */
.login-page{
  min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px;
}
.login-card{
  width:100%; max-width:380px; background:var(--surface); border:1px solid var(--hair);
  border-radius:var(--r); padding:32px 30px; box-shadow:var(--shadow);
}
.login-card h1{font-size:19px; margin:0 0 4px}
.login-card .lead{color:var(--muted); font-size:13px; margin:0 0 22px}
.login-card label{display:block; margin-bottom:7px}
.login-card input{
  width:100%; font:inherit; font-size:15px; padding:11px 13px; border-radius:var(--r-sm);
  border:1px solid var(--hair); background:var(--surface-2); color:var(--ink);
}
.login-card input:focus{outline:2px solid var(--lider); outline-offset:1px; border-color:transparent}
.login-card .btn{width:100%; margin-top:16px; padding:11px}
.err{
  background:var(--warn-bg); color:var(--warn); font-size:12.5px; font-weight:600;
  padding:9px 12px; border-radius:var(--r-sm); margin:0 0 16px;
}
.foot{margin-top:20px; font-size:11.5px; color:var(--faint); text-align:center; line-height:1.5}