:root{
  --bg:#f6f7fa; --panel:#fff; --borde:#e2e6ef; --borde2:#cbd2e0;
  --ink:#121a33; --ink2:#3d4762; --muted:#6b7490;
  --acento:#1d4ed8; --acento-sw:#eef2ff;
  --bien:#0a7c5a; --alerta:#b45309; --mal:#b3261e;
  --dato:#0a7c5a; --estimacion:#b45309; --hipotesis:#b3261e;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0e1424; --panel:#161e33; --borde:#263050; --borde2:#36426a;
    --ink:#e9edf7; --ink2:#c2cadf; --muted:#8f9ab5;
    --acento:#6b9bff; --acento-sw:#1b2444;
    --bien:#3fb28c; --alerta:#d99a3c; --mal:#e8716a;
    --dato:#3fb28c; --estimacion:#d99a3c; --hipotesis:#e8716a;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}

/* ---------------------------------------------------------------------------
   `hidden` TIENE QUE GANARLE A CUALQUIER `display` DE AQUI
   ---------------------------------------------------------------------------
   El navegador esconde los elementos con `hidden` poniendoles `display:none`,
   pero eso viene de su hoja de estilos por defecto — y CUALQUIER regla escrita
   aqui le gana, por poco especifica que sea.
   Paso de verdad: `.login{display:grid}` dejaba el formulario de entrada
   visible DESPUES de entrar, con el programa dibujado debajo. La pantalla no
   estaba rota, solo tenia dos cosas encima de la otra, que es peor: parece que
   el boton no hizo nada.
--------------------------------------------------------------------------- */
[hidden]{display:none !important}

body{margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.01em}
h2{font-size:19px} h3{font-size:15px}
button{font:inherit;cursor:pointer}
a{color:var(--acento)}
.muted{color:var(--muted)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{width:min(360px,100%);display:flex;flex-direction:column;gap:14px}
.login-card h1{font-size:26px}
.login-card h1 span{color:var(--acento)}
label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;font-weight:600;color:var(--ink2)}
input,select,textarea{font:inherit;padding:8px 10px;border:1px solid var(--borde2);
  border-radius:5px;background:var(--panel);color:var(--ink);min-width:0}
input:focus,select:focus,button:focus-visible{outline:2px solid var(--acento);outline-offset:1px}
button.primary{background:var(--acento);color:#fff;border:0;border-radius:5px;padding:9px 14px;font-weight:600}
button.ghost{background:transparent;border:1px solid var(--borde2);border-radius:5px;padding:7px 12px;color:var(--ink)}
button.link{background:none;border:0;color:var(--acento);padding:4px}
.error{color:var(--mal);font-size:13px;margin:0}

/* estructura */
.top{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:10px 16px;
  background:var(--panel);border-bottom:1px solid var(--borde);position:sticky;top:0;z-index:5}
.marca{font-weight:800;letter-spacing:-.02em}
.marca span{color:var(--acento)}
#nav{display:flex;gap:2px;flex-wrap:wrap;flex:1;min-width:0}
#nav button{background:none;border:0;padding:7px 11px;border-radius:5px;color:var(--ink2);font-weight:600;font-size:13px}
#nav button.activo{background:var(--acento-sw);color:var(--acento)}
.top-der{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
main{padding:18px 16px 40px;max-width:1240px;margin:0 auto}
.pie{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 16px;border-top:1px solid var(--borde);color:var(--muted);font-size:12px}

.card{background:var(--panel);border:1px solid var(--borde);border-radius:7px;padding:16px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.fila{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sep{height:1px;background:var(--borde);margin:14px 0}

/* tiles */
.tile .k{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.tile .v{font-family:var(--mono);font-size:25px;font-weight:600;margin-top:6px;letter-spacing:-.02em}
.tile .n{font-size:12px;color:var(--muted);margin-top:4px}

/* tablas */
.tw{overflow-x:auto;border:1px solid var(--borde);border-radius:7px;background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:13.5px}
th,td{padding:8px 12px;text-align:right;border-bottom:1px solid var(--borde);white-space:nowrap}
th:first-child,td:first-child{text-align:left;white-space:normal}
thead th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  background:var(--bg);position:sticky;top:0}
tbody tr:last-child td{border-bottom:0}
tr.total td{font-weight:700;border-top:2px solid var(--borde2);background:var(--bg)}
tr.sub td{font-weight:600;background:var(--bg)}
td.num,th.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* =====================================================================
   EL PANORAMA
   Puntaje al centro, cuatro pilares alrededor. Misma forma que el de
   Control Total, para que quien ya sabe leer aquel no tenga que aprender
   nada aqui.
   En el celular la rueda no cabe: se vuelve el puntaje arriba y los
   pilares en dos columnas. Es la misma informacion, no una version
   recortada.
===================================================================== */
.panorama{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;
  justify-items:center;margin:22px 0 0}
.p-arriba{grid-column:2;grid-row:1} .p-izq{grid-column:1;grid-row:2}
.p-der{grid-column:3;grid-row:2} .p-abajo{grid-column:2;grid-row:3}
.centro{grid-column:2;grid-row:2;position:relative;width:min(300px,62vw);aspect-ratio:1;
  display:grid;place-items:center}
.anillos{position:absolute;inset:0;color:var(--acento);pointer-events:none}
.anillos svg{width:100%;height:100%;display:block}
.centro-caja{text-align:center;z-index:1;padding:20px;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--acento) 12%,transparent),transparent)}
.centro-v{font-family:var(--mono);font-size:clamp(34px,8vw,52px);font-weight:600;
  color:var(--acento);letter-spacing:-.03em;line-height:1}
.centro-n{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-top:6px}

.pil{text-align:center;max-width:220px;min-width:0}
.pil.pendiente{opacity:.62}
.pil-q{font-size:12.5px;font-weight:700;color:var(--ink2);line-height:1.3}
.pil-v{font-family:var(--mono);font-size:clamp(22px,4.4vw,30px);font-weight:600;
  margin-top:5px;letter-spacing:-.02em;line-height:1.05}
.pil-u{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.35}
.pil-p{font-size:10.5px;color:var(--muted);margin-top:5px}
.nota-centro{text-align:center;font-size:12.5px;color:var(--muted);margin:16px auto 0;max-width:62ch}

.pil-card .pil-filas{margin-top:11px;border-top:1px solid var(--borde);padding-top:9px;
  display:flex;flex-direction:column;gap:5px}
.pf{display:flex;justify-content:space-between;gap:12px;font-size:12.5px}
.pf span:first-child{color:var(--muted);min-width:0}

@media (max-width:700px){
  .panorama{grid-template-columns:1fr 1fr;justify-items:stretch}
  .centro{grid-column:1 / -1;grid-row:1;width:min(240px,58vw);justify-self:center}
  .p-arriba{grid-column:1;grid-row:2} .p-izq{grid-column:2;grid-row:2}
  .p-der{grid-column:1;grid-row:3} .p-abajo{grid-column:2;grid-row:3}
  .pil{max-width:none}
}

/* pills */
.pill{display:inline-block;font-size:11px;font-weight:700;padding:1px 8px;border-radius:99px}
.p-bien{color:var(--bien);background:color-mix(in srgb,var(--bien) 14%,transparent)}
.p-alerta{color:var(--alerta);background:color-mix(in srgb,var(--alerta) 16%,transparent)}
.p-mal{color:var(--mal);background:color-mix(in srgb,var(--mal) 14%,transparent)}
.f-dato{color:var(--dato)} .f-estimacion{color:var(--estimacion)} .f-hipotesis{color:var(--hipotesis)}

/* avisos */
.avisos{display:flex;flex-direction:column;gap:1px;background:var(--borde)}
.aviso{padding:9px 16px;font-size:13px;display:flex;gap:9px;align-items:flex-start}
.aviso.alta{background:color-mix(in srgb,var(--mal) 10%,var(--panel))}
.aviso.media{background:color-mix(in srgb,var(--alerta) 10%,var(--panel))}
.aviso b{flex:none}

/* barras del flujo */
.semanas{display:grid;grid-template-columns:repeat(13,1fr);gap:3px;margin-top:12px}
.sem{text-align:center;min-width:0}
.sem .barra{height:84px;position:relative}
.sem .b{position:absolute;left:0;right:0;border-radius:2px}
.sem .cero{position:absolute;left:0;right:0;height:1px;background:var(--borde2)}
.sem .lab{font-family:var(--mono);font-size:9px;color:var(--muted);margin-top:4px}
.sem .val{font-family:var(--mono);font-size:9px;font-weight:600}
.sem.critica .lab{color:var(--mal);font-weight:700}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
  background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:6px;font-size:13px;z-index:20;max-width:90vw}
.toast.mal{background:var(--mal);color:#fff}

@media (max-width:620px){
  .semanas{grid-template-columns:repeat(7,1fr)}
  main{padding:14px 12px 40px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}