/* ═══════════════════════════════════════════════════════════════════════════
   D4 (7-ago-2026) — alineación al sistema de diseño de Apside (dueño: Sebastián
   Vega, `design-system-apside/`). Antes este panel tenía su propia paleta navy/
   steel/teal/ochre/plum (heredada de reporte-completo-v4 de Dashboard) sin
   relación con la marca. Ahora corre sobre los tokens `--ap-*` del kit.

   Por qué EMBEBIDO y no `<link>` a `tokens/apside-tokens.css`: `monitor.html`
   tiene una copia desplegada (Dashboard-data/infra/web/monitor/index.html,
   generada por tools/generar_monitor_prod.py) y `deploy_views.sh` solo sube
   ese `index.html` + este `panel-base.css` — dos archivos, sin sync de carpetas
   nuevas. Enlazar el kit real habría exigido tocar el script de deploy y AWS
   (fuera de alcance de esta unidad). El subconjunto de abajo son los MISMOS
   valores de `design-system-apside/tokens/apside-tokens.css` v1.5 (color +
   capa de temas), copiados literalmente — no inventados. Si el kit sube de
   versión, este bloque se resincroniza a mano.

   Se deja Poppins/Open Sans SIN `@font-face` (mismo motivo: el archivo de
   fuentes no viaja en el deploy de /monitor) — cae a `system-ui` si el visitante
   no las tiene instaladas, igual que antes. Donde SÍ conviene el kit completo
   (con @font-face) es en un consumo local que no dependa de este deploy; no es
   el caso de este panel compartido. */
:root{
  --ap-noche:#000717; --ap-sobre-oscuro:#ffffff; --ap-blanco:#ffffff;
  --ap-fuente-titulo:'Poppins',sans-serif; --ap-fuente-cuerpo:'Open Sans',sans-serif;
  --ap-chart-1:#9200ff; --ap-chart-2:#00918f; --ap-chart-3:#c77800;
  --ap-chart-4:#2563eb; --ap-chart-5:#c2186f; --ap-chart-6:#5b8a00;
  /* tema claro (defecto — apside-tokens.css §2bis) */
  --ap-fondo:#f7f7f8; --ap-sup-1:#ffffff; --ap-sup-2:#f7f7f8;
  --ap-borde:#e5e5e5; --ap-borde-fuerte:#d4d4d4;
  --ap-txt-fuerte:#262626; --ap-txt:#4a4a4a; --ap-txt-suave:#6e6e6e;
  --ap-accion:#9200ff; --ap-accion-sobre:#ffffff;
  --ap-exito:#1e7f4f; --ap-error:#b3191f; --ap-aviso:#9a6700;
  --ap-foco:0 0 0 3px rgba(146,0,255,.65);
}
[data-tema="oscuro"]{
  --ap-fondo:#000717; --ap-sup-1:#0b1221; --ap-sup-2:#161c2b;
  --ap-borde:rgba(255,255,255,.16); --ap-borde-fuerte:rgba(255,255,255,.24);
  --ap-txt-fuerte:#ffffff; --ap-txt:rgba(255,255,255,.86); --ap-txt-suave:rgba(255,255,255,.66);
  --ap-accion:#b46bff; --ap-accion-sobre:#000717;
  --ap-exito:#4ade80; --ap-error:#ff6b6b; --ap-aviso:#fbbf24;
  --ap-foco:0 0 0 3px rgba(180,107,255,.75);
}
/* Alias sobre los tokens de arriba: así los ~130 selectores de este archivo (y de
   index.html/monitor.html) no se reescriben uno por uno — el rol es el mismo,
   solo cambia de dónde sale el color. */
:root{
  --navy:var(--ap-noche);        /* chrome fijo: banda superior, cabecera de tabla */
  --navy2:var(--ap-accion);      /* acento: eyebrow, enlaces, bloque "read" */
  --ink:var(--ap-txt-fuerte); --muted:var(--ap-txt-suave);
  --faint:var(--ap-txt-suave);   /* el kit define 3 niveles de texto, no 4 — colapsa a "suave",
                                     igual que hace el propio snippet Chart.js del kit para ejes */
  --line:var(--ap-borde); --track:var(--ap-sup-2);
  --bg:var(--ap-fondo); --panel:var(--ap-sup-1); --band:var(--ap-noche);
  --ok:var(--ap-exito); --ok-bg:color-mix(in srgb,var(--ap-exito) 12%,transparent);
  --warn:var(--ap-aviso); --warn-bg:color-mix(in srgb,var(--ap-aviso) 12%,transparent);
  --crit:var(--ap-error); --crit-bg:color-mix(in srgb,var(--ap-error) 12%,transparent);
  --pos:var(--ap-exito); --neg:var(--ap-error);
  /* sin uso real hoy (CSS heredado de gráficos hechos a mano, hoy son Chart.js) —
     se mapean igual para que nada quede "a mano" si algo los reactiva */
  --steel:var(--ap-accion); --teal:var(--ap-chart-2); --ochre:var(--ap-chart-3);
  --plum:var(--ap-chart-4); --slate:var(--ap-txt-suave);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:14.5px/1.5 var(--ap-fuente-cuerpo),system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-variant-numeric:tabular-nums}
/* Regla 8 del kit: foco visible siempre. No existía ninguna regla de foco en este panel. */
.zbtn:focus-visible,.preset:focus-visible,.chipm:focus-visible,.msel:focus-visible,
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:none;box-shadow:var(--ap-foco);border-radius:6px}
/* Regla del kit: Poppins en títulos/UI, Open Sans en cuerpo (ya es el default del body). */
.brand,.eyebrow,h2,.card h3,.kpi .k,.kpi .v,.tile .tk,.tile .tv,thead th,.pill,.preset,
.zbtn,.msel,.chipm,.conf,.kbadge,.estado,.chip,.read h4,summary,.mrow .tk,.mrow .mv{
  font-family:var(--ap-fuente-titulo),system-ui,sans-serif}
.wrap{max-width:1060px;margin:0 auto;padding:0 0 60px}
.band{background:var(--band);color:var(--ap-sobre-oscuro);position:sticky;top:0;z-index:20;padding:14px 30px;
  display:flex;justify-content:space-between;align-items:center;box-shadow:0 1px 0 rgba(255,255,255,.08)}
.brand{font-weight:800;letter-spacing:.14em;font-size:17px}
.brand span{display:block;font-weight:400;letter-spacing:.02em;font-size:11px;opacity:.7;margin-top:1px}
.bmeta{text-align:right;font-size:10.5px;line-height:1.7;opacity:.8}
.conf{border:1px solid rgba(255,255,255,.4);border-radius:3px;padding:0 7px;font-size:9.5px;letter-spacing:.14em}
.periodbar{background:var(--panel);border-bottom:1px solid var(--line);padding:11px 30px;display:flex;align-items:center;gap:14px;position:sticky;top:56px;z-index:19}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--track);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-weight:600;font-size:13px;color:var(--ink)}
.pill .car{color:var(--muted);font-size:11px}
.pcap{font-size:11.5px;color:var(--muted)} .pcap b{color:var(--navy2)}
.disc{background:var(--warn-bg);color:var(--warn);font-size:11.5px;padding:8px 30px;text-align:center}
.sec{padding:30px 30px 6px}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--navy2);font-weight:700}
h2{font-size:21px;margin:3px 0 3px;letter-spacing:-.01em;text-wrap:balance}
.lede{color:var(--muted);font-size:13px;margin:0 0 18px;max-width:74ch}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.grid2{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin-bottom:16px}
.card h3{margin:0 0 3px;font-size:14.5px}
.card .cnote{color:var(--muted);font-size:12px;margin:0 0 14px}
.kpigrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:760px){.kpigrid{grid-template-columns:1fr}}
.kpi{background:var(--panel);border:1px solid var(--line);border-left-width:4px;border-radius:10px;padding:14px 16px 13px;position:relative}
.kpi.ok{border-left-color:var(--ok)} .kpi.warn{border-left-color:var(--warn)} .kpi.crit{border-left-color:var(--crit)}
.kpi .k{font-size:12px;font-weight:700}
.kpi .v{font-size:33px;font-weight:800;line-height:1.15;letter-spacing:-.02em;margin:2px 0}
.kpi .v small{font-size:14px;font-weight:600;color:var(--muted);margin-left:2px}
.kbadge{position:absolute;top:14px;right:14px;font-size:9.5px;font-weight:800;border-radius:999px;padding:2px 8px;letter-spacing:.03em}
.ok .kbadge{background:var(--ok-bg);color:var(--ok)} .warn .kbadge{background:var(--warn-bg);color:var(--warn)} .crit .kbadge{background:var(--crit-bg);color:var(--crit)}
.kmeta{font-size:11.5px;color:var(--muted);margin:1px 0 7px}
.kexp{font-size:11.5px;color:var(--muted);border-top:1px dashed var(--line);padding-top:7px;line-height:1.45}
.read{background:color-mix(in srgb,var(--navy2) 7%,var(--panel));border:1px solid var(--line);border-left:4px solid var(--navy2);border-radius:10px;padding:15px 20px;margin-top:16px}
.read h4{margin:0 0 8px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--navy2)}
.read ul{margin:0;padding-left:18px} .read li{margin:6px 0;font-size:13.2px} .read b{color:var(--ink)}
.tblwrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13px}
thead th{background:var(--navy);color:var(--ap-sobre-oscuro);text-align:left;padding:9px 12px;font-weight:600;font-size:11.5px;letter-spacing:.03em}
tbody td{padding:8px 12px;border-bottom:1px solid var(--line)}
tbody td.num,thead th.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:nth-child(even){background:color-mix(in srgb,var(--track) 45%,transparent)}
.rowhi{font-weight:700}
td .pos{color:var(--pos);font-weight:700} td .neg{color:var(--neg);font-weight:700}
.chip{display:inline-block;font-size:10.5px;font-weight:700;border-radius:999px;padding:1px 8px}
.chip.ok{background:var(--ok-bg);color:var(--ok)} .chip.warn{background:var(--warn-bg);color:var(--warn)} .chip.crit{background:var(--crit-bg);color:var(--crit)}
.bars{display:flex;flex-direction:column;gap:8px}
.brow{display:grid;grid-template-columns:150px 1fr 120px;gap:12px;align-items:center;font-size:12.8px}
.blab{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btrack{background:var(--track);border-radius:4px;height:18px;overflow:hidden}
.bfill{height:100%;border-radius:4px;background:var(--steel)}
.bval{color:var(--muted);font-size:12px;text-align:right}
.vwrap{overflow-x:auto}
.vbars{display:flex;align-items:flex-end;gap:12px;height:170px;padding-top:8px;min-width:min-content}
.vcol{flex:1;min-width:34px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;height:100%}
.vbar{width:60%;min-height:2px;background:var(--steel);border-radius:4px 4px 0 0}
.vbar.hl{background:var(--navy2)}
.vlab{font-size:10.5px;color:var(--muted);white-space:nowrap}
.vval{font-size:10px;color:var(--faint)}
.gcol{flex:1;min-width:52px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;height:100%}
.gbars{display:flex;gap:2px;align-items:flex-end;height:100%;width:82%}
.gbar{flex:1;min-height:2px;border-radius:3px 3px 0 0}
.legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:11.5px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.stackrow{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:center;margin:7px 0;font-size:12.5px}
.stack{display:flex;height:20px;border-radius:4px;overflow:hidden}
.seg{height:100%}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:760px){.tiles{grid-template-columns:1fr 1fr}}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:12px 14px}
.tile.mini{padding:10px 12px}
.tile .tk{font-size:11.5px;color:var(--muted)} .tile .tv{font-size:24px;font-weight:800}
.tile.mini .tv{font-size:19px} .tile .tv small{font-size:12px;color:var(--muted);font-weight:600}
.src{font-size:10.5px;color:var(--faint);margin-top:11px;padding-top:8px;border-top:1px solid var(--line)}
.src b{color:var(--muted);font-weight:600}
.src a{color:var(--navy2);text-decoration:underline;text-underline-offset:2px}
.msel{font:600 13px/1.2 inherit;color:var(--ink);background:var(--track);border:1px solid var(--line);border-radius:8px;padding:7px 12px;cursor:pointer}
.mrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0 4px}
.mrow .tk{font-size:11px;color:var(--muted)} .mrow .mv{font-size:22px;font-weight:800}
.mrow .cell{flex:1;min-width:110px;border-left:3px solid var(--line);padding:2px 0 2px 12px}
.distbar{display:flex;height:22px;border-radius:5px;overflow:hidden;margin-top:6px}
.distbar div{display:flex;align-items:center;justify-content:center;color:var(--ap-sobre-oscuro);font-size:11px;font-weight:700}
.mctl{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:6px 0}
.mctl label{font-size:12px;color:var(--muted)}
.mchips{display:flex;gap:6px;flex-wrap:wrap}
.chipm{font:600 12px/1 inherit;padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--muted);cursor:pointer;user-select:none}
.chipm.on{background:var(--navy2);border-color:var(--navy2);color:var(--ap-accion-sobre)}
.chipm.all{border-style:dashed}
.catdef{display:flex;flex-wrap:wrap;gap:14px;margin:12px 0;font-size:11.5px;color:var(--muted)}
.catdef b{font-weight:700} .c-g{color:var(--ok)} .c-y{color:var(--ochre)} .c-r{color:var(--crit)} .c-w{color:var(--slate)}
.foot{color:var(--faint);font-size:11px;text-align:center;padding:26px 30px 0;border-top:1px solid var(--line);margin-top:20px}
details{margin-top:6px} summary{cursor:pointer;color:var(--navy2);font-size:12.5px;font-weight:600}
.okr-obj{font-weight:700;color:var(--navy2)}
/* ── Portada + impresión ── */
.cover{display:none}
@media print{
  @page{margin:14mm}
  body{background:var(--ap-blanco)}
  .band{position:static;box-shadow:none} .periodbar,.disc{display:none}
  .cover{display:flex;flex-direction:column;justify-content:center;min-height:88vh;break-after:page;padding:40px}
  .cover .clogo{font-size:34px;font-weight:800;letter-spacing:.14em;color:var(--navy)}
  .cover h1{font-size:30px;margin:18px 0 6px;color:var(--ink)}
  .cover .csub{font-size:15px;color:var(--muted)}
  .cover .cconf{margin-top:24px;font-size:12px;letter-spacing:.16em;color:var(--crit)}
  .sec{break-before:page;padding:6mm 0}
  .card,.kpi,.read{break-inside:avoid}
  .grid2{grid-template-columns:1fr 1fr}
}