/* Herramienta operativa: controles arriba, resumen en tarjetas, gráficos a ancho completo, tablas debajo. */
:root{
  --bg:#f5f6f8; --panel:#ffffff; --ink:#111418; --ink-2:#4a5260; --muted:#7b8494;
  --rule:#e1e4ea; --grid:#e9ecf1; --axis:#c4cad3;
  --accent:#1c5cab; --accent-soft:#e6eefb;
  --up:#c4512a; --up-bg:#fbe9e2; --down:#1c5cab; --down-bg:#e6eefb; --flat:#4a5260; --flat-bg:#eef1f5;
  --warn:#9a6700; --warn-bg:#fdf3dc;
  --w1:#b7d3f6; --w2:#86b6ef; --w3:#5598e7; --sel:#c4512a; --ref:#111418;
  --seq-lo:#eaf1fb; --seq-hi:#0b3d7a; --div-mid:#eef0f3; --sin-dato:#d9dde3; --banda:#a9c8f0; --ev-rango:#8a3ab9; --c1:#0e7f73; --c2:#b8327a; --c3:#4f7a12; --c4:#8a4b1c; --c5:#2f6f8f; --c6:#5c5f6b; --c7:#3d4fb0; --c8:#707a1c;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#111316; --panel:#1a1d21; --ink:#f2f4f7; --ink-2:#c2c8d2; --muted:#8a93a3;
  --rule:#2a2f36; --grid:#252a30; --axis:#3a4049;
  --accent:#6da7ec; --accent-soft:#1d2a3b;
  --up:#ec835a; --up-bg:#3a2218; --down:#6da7ec; --down-bg:#1d2a3b; --flat:#c2c8d2; --flat-bg:#22262c;
  --warn:#e3a21a; --warn-bg:#3a2e12;
  --w1:#184f95; --w2:#256abf; --w3:#3987e5; --sel:#ec835a; --ref:#f2f4f7;
  --seq-lo:#1c2633; --seq-hi:#9cc6f7; --div-mid:#262b31; --sin-dato:#33383f; --banda:#2a5d9c; --ev-rango:#c48be6; --c1:#3cc4b4; --c2:#ee7ab4; --c3:#9ccc5a; --c4:#d9905a; --c5:#6fb6d9; --c6:#b3b7c2; --c7:#8f9cf0; --c8:#c4cc6a; color-scheme:dark}}
*{box-sizing:border-box}
[hidden]{display:none !important}  /* las reglas display de .avisos, .cmp, etc. no deben mostrar lo oculto */
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.5}
.wrap{max-width:1180px;margin:0 auto;padding-inline:20px;padding-block:24px 56px;display:grid;gap:18px}
h1,h2{margin:0;line-height:1.2;text-wrap:balance}
h1{font-size:1.75rem} h2{font-size:1.05rem;font-weight:600}
p{margin:0}
.eyebrow{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
header{display:grid;gap:6px}
.marca{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--rule)}
.marca img{display:block;height:64px;width:auto;max-width:100%}
@media (max-width:520px){.marca img{height:46px}}
.lede{color:var(--ink-2);max-width:75ch}
.dim{color:var(--muted);font-size:.86rem}
.num,td.n{font-family:var(--mono);font-variant-numeric:tabular-nums}
.panel{background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:16px;min-width:0}
.controls{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:end}
.controls label{display:grid;gap:4px;font-weight:600;font-size:.9rem}
.controls .dim{flex-basis:100%}
.fecha{display:grid;gap:4px} .fecha>label{font-weight:600;font-size:.9rem}
select,input[type=date]{font:inherit;padding:7px 10px;border-radius:8px;border:1px solid var(--axis);background:var(--panel);color:var(--ink);max-width:100%}
.stepper{display:flex;gap:6px}
.stepper button{font:inherit;font-size:1.1rem;width:38px;border-radius:8px;border:1px solid var(--axis);background:var(--panel);color:var(--ink);cursor:pointer}
.stepper button:hover{background:var(--accent-soft)}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.estado{font-size:.9rem;color:var(--muted);min-height:1.4em}
.avisos{margin:0;padding:10px 14px 10px 30px;background:var(--warn-bg);color:var(--warn);border-radius:10px;display:grid;gap:4px;font-size:.9rem}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.kpi{background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:12px 14px;display:grid;gap:3px}
.kpi .v{font-size:1.5rem;font-weight:600}
.kpi .s{font-size:.82rem;color:var(--ink-2)}
.chip{display:inline-flex;gap:4px;align-items:center;font-size:.76rem;font-weight:600;border-radius:999px;padding:1px 8px;white-space:nowrap}
.chip.incremento{background:var(--up-bg);color:var(--up)}
.chip.disminucion{background:var(--down-bg);color:var(--down)}
.chip.estable{background:var(--flat-bg);color:var(--flat)}
.chip.aviso{background:var(--warn-bg);color:var(--warn)}
.up{color:var(--up)} .down{color:var(--down)}
.chart{position:relative}
.cmp{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:.88rem;color:var(--ink-2);flex-basis:100%}
.cmp[hidden]{display:none}
#elegidos{margin-top:12px;padding-top:12px;border-top:1px solid var(--rule)}
.cmp input{font:inherit;padding:3px 6px;border:1px solid var(--rule);border-radius:6px;background:var(--panel);color:var(--ink)}
.cmp-lista{display:contents}
.cmp-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 4px 2px 8px;border:1px solid var(--c);border-radius:999px;color:var(--ink);font-variant-numeric:tabular-nums}
.cmp-chip button{font:inherit;line-height:1;border:0;background:none;color:var(--ink-2);cursor:pointer;padding:2px 6px;border-radius:999px}
.cmp-chip button:hover{background:var(--flat-bg);color:var(--ink)}
i.sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.chart .head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;align-items:baseline;margin-bottom:8px}
.svgbox{position:relative}
.svgbox svg{display:block;width:100%;height:auto}
svg text{fill:var(--muted);font-family:var(--font);font-size:11px}
.legend{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.82rem;color:var(--ink-2);margin-top:8px}
.legend i{display:inline-block;width:18px;height:0;border-top:3px solid;vertical-align:middle;margin-right:6px}
.tip{position:absolute;pointer-events:none;background:var(--panel);border:1px solid var(--axis);border-radius:8px;padding:8px 10px;font-size:.8rem;box-shadow:0 4px 16px rgb(0 0 0 / .14);min-width:170px;z-index:5}
.tip b{display:block;margin-bottom:2px}
.tip .row{display:flex;justify-content:space-between;gap:14px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:18px}
.grid2>div{display:grid;gap:8px;align-content:start;min-width:0}
.tbl{overflow-x:auto;border:1px solid var(--rule);border-radius:10px;background:var(--panel)}
table{border-collapse:collapse;width:100%;font-size:.86rem}
th,td{padding:7px 10px;border-bottom:1px solid var(--rule);text-align:left;white-space:nowrap}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}
td.n,th.n{text-align:right}
tr:last-child td{border-bottom:0}
tr.sel td{font-weight:600}
tr.ref td{background:var(--flat-bg)}
tr.cmp-fila td:first-child{font-weight:600;white-space:nowrap}
.formula{font-family:var(--mono);font-size:.82rem;white-space:pre;overflow-x:auto;margin:10px 0 0;color:var(--ink-2)}
details summary{cursor:pointer;font-weight:600}
footer{padding-top:4px}
/* selector de puntos */
.selector{display:grid;gap:14px}
.sel-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px}
.acciones{display:flex;gap:14px}
button.link{font:inherit;font-size:.88rem;background:none;border:0;color:var(--accent);cursor:pointer;padding:2px 0;text-decoration:underline;text-underline-offset:3px}
.grupos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:12px}
.grupo{border:1px solid var(--rule);border-radius:10px;padding:10px 12px;display:grid;gap:8px;align-content:start}
.grupo-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.grupo-head label{display:flex;gap:8px;align-items:center;font-weight:600;font-size:.9rem;cursor:pointer}
.grupo-head .dim{font-size:.78rem}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip-p{font:inherit;font-size:.85rem;border:1px solid var(--axis);background:var(--panel);color:var(--ink-2);border-radius:999px;padding:4px 12px 4px 10px;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.chip-p::before{content:"";width:10px;height:10px;border-radius:3px;border:1.5px solid var(--axis);background:transparent}
.chip-p[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--ink);font-weight:600}
.chip-p[aria-pressed="true"]::before{background:var(--accent);border-color:var(--accent)}
.chip-p:hover{border-color:var(--accent)}
input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}
.sel-pie{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px}
.head2{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 12px;margin-bottom:8px}
.rapidos{display:inline-flex;flex-wrap:wrap;gap:14px;padding-right:14px;border-right:1px solid var(--rule)}
.acciones{flex-wrap:wrap}
.chip-p .kv{font-size:.72rem;color:var(--muted);font-weight:400}
.chip-p .est{font-size:.7rem;font-weight:600;text-transform:lowercase;color:var(--warn)}
.chip-p.excluido[aria-pressed="true"]{border-style:dashed;background:var(--warn-bg);border-color:var(--warn)}
.chip-p.excluido[aria-pressed="true"]::before{background:transparent;border-color:var(--warn)}
.chip-p.anomalia[aria-pressed="true"]{border-color:var(--warn)}
body.obsoleto .kpis,body.obsoleto .chart,body.obsoleto .grid2,body.obsoleto .tbl{opacity:.45;transition:opacity .15s}
.tip .sep{border-top:1px solid var(--rule);margin:4px 0}
/* bloque 2: gestión de demanda */
.ajustes{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:end}
.ajustes label{display:grid;gap:4px;font-weight:600;font-size:.9rem}
.tol{display:flex;align-items:center;gap:6px;font-weight:400;font-size:.85rem;color:var(--ink-2)}
.tol input{width:70px;font:inherit;padding:6px 8px;border-radius:8px;border:1px solid var(--axis);background:var(--panel);color:var(--ink)}
h3{margin:0 0 8px;font-size:.95rem;font-weight:600}
.kpis{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.kpi.destacado{border-color:var(--accent)}
.gd-badge{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:700;border-radius:8px;padding:3px 10px;width:max-content}
.gd-badge.alta{background:var(--down);color:var(--panel)}
.gd-badge.moderada{background:var(--down-bg);color:var(--down)}
.gd-badge.sin{background:var(--flat-bg);color:var(--flat)}
.gd-badge.incremento{background:var(--up-bg);color:var(--up)}
.conf{font-size:.78rem;font-weight:600;border-radius:999px;padding:2px 10px;border:1px solid var(--axis);color:var(--ink-2)}
.conf.ALTA{border-color:var(--down);color:var(--down)}
.conf.BAJA{border-color:var(--warn);color:var(--warn);background:var(--warn-bg)}
.rachas{margin:0;padding-left:18px;display:grid;gap:6px;font-size:.9rem}
.rachas li span.dim{margin-left:4px}
.tbl.plano{border:0}
.gd{display:grid;gap:12px}
.balance{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.balance .kpi .v{font-size:1.25rem}
.chip.interna{background:var(--flat-bg);color:var(--flat)}
.chip.externa{background:var(--up-bg);color:var(--up)}
table.ordenable th[data-k]{cursor:pointer;user-select:none}
table.ordenable th[data-k]:hover{color:var(--ink)}
table.ordenable th.orden-asc::after{content:" ▲"} table.ordenable th.orden-desc::after{content:" ▼"}
td.calor{text-align:right}
/* responsive: los hijos de una rejilla no deben estirarse al ancho mínimo de su contenido (tablas, fórmulas):
   sin esto la página entera se ensancha en pantallas angostas */
.wrap,.gd,.selector{grid-template-columns:minmax(0,1fr)}
.wrap>*,.gd>*,section,details{min-width:0}
.rachas li{overflow-wrap:anywhere}
/* responsive: tablas que no caben se apilan como tarjetas; sin scroll horizontal */
th{white-space:normal}
.tbl.apilada{overflow:visible;border:0;background:none}
.tbl.apilada table,.tbl.apilada tbody{display:block}
.tbl.apilada thead{display:none}
.tbl.apilada table.ordenable thead{display:block;margin-bottom:8px}
.tbl.apilada table.ordenable thead tr{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
.tbl.apilada table.ordenable thead tr::before{content:"Ordenar por:";font-size:.78rem;color:var(--muted);margin-right:2px}
.tbl.apilada table.ordenable thead th{border:1px solid var(--rule);border-radius:999px;padding:2px 10px;background:var(--panel);text-align:left}
.tbl.apilada tbody tr{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,130px),1fr));gap:6px 14px;
  background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:10px 12px;margin-bottom:10px}
.tbl.apilada td{display:grid;gap:1px;border:0;padding:0;white-space:normal;text-align:left!important;min-width:0}
.tbl.apilada td::before{content:attr(data-label);font-family:var(--font);font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.tbl.apilada td:first-child,.tbl.apilada td[colspan]{grid-column:1/-1;font-weight:600}
.tbl.apilada td:first-child::before,.tbl.apilada td[colspan]::before{content:none}
.tbl.apilada td:empty{display:none}
.tbl.apilada tr.ref td,.tbl.apilada tr.ref{background:var(--flat-bg)}
@media (max-width:640px){
  .wrap{padding-inline:12px;gap:14px}
  h1{font-size:1.4rem}
  .panel{padding:12px}
  .formula{white-space:pre-wrap;overflow-x:visible}
  .rapidos{border-right:0;padding-right:0}
  .ajustes{display:grid;grid-template-columns:1fr;width:100%}
  .ajustes select{width:100%}
  .kpi .v{font-size:1.3rem}
  .tip{max-width:calc(100% - 8px)}
}
.apilado{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.apilado>div{display:grid;gap:8px;align-content:start;min-width:0}
#c-aporte .svgbox{max-width:760px}
body.obsoleto .apilado{opacity:.45;transition:opacity .15s}
tr.ref td[colspan]{white-space:normal;min-width:16em}
/* bloque 4: eventos */
.ev-opc{display:flex;gap:8px;align-items:center;font-size:.88rem;margin-bottom:10px;cursor:pointer}
.eventos{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.eventos li{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;font-size:.9rem;padding:6px 0;border-bottom:1px solid var(--rule)}
.eventos li:last-child{border-bottom:0}
.eventos li.conj{font-weight:600}
.eventos .hora{min-width:3.4em;color:var(--ink-2)}
.eventos li>span:last-child{flex:1 1 20em;overflow-wrap:anywhere}
.chip.ev-nivel{background:var(--accent-soft);color:var(--accent)}
.chip.ev-rampa{background:var(--warn-bg);color:var(--warn)}
.chip.ev-rango{background:color-mix(in srgb,var(--ev-rango) 14%,transparent);color:var(--ev-rango)}
/* bloque 4b: evolución semanal y mapa de calor */
.sem-opc{display:flex;gap:8px;align-items:center;font-size:.88rem;font-weight:600}
.vista{display:inline-flex;gap:12px}
.vista button[aria-pressed="true"]{color:var(--ink);text-decoration:none;font-weight:700}
.legend i.calor-ley{display:inline-block;width:160px;height:10px;border:0;border-radius:3px;vertical-align:middle;margin:0 6px}
.gd-badge.cambio{background:var(--warn-bg);color:var(--warn)}
.legend i.ev-punto,.tip i.ev-punto{display:inline-block;width:10px;height:10px;border:3px solid;border-radius:50%;margin-right:6px;vertical-align:-1px;background:var(--panel)}
.tip .tip-ev{max-width:280px;white-space:normal;color:var(--ink-2)}
.tip .row b{display:inline}
/* pestañas Demanda / Red */
.pestanas{display:flex;gap:4px;border-bottom:1px solid var(--rule);margin-top:6px}
.pestanas a{padding:8px 14px;color:var(--ink-2);text-decoration:none;font-weight:600;border-bottom:3px solid transparent;margin-bottom:-1px}
.pestanas a:hover{color:var(--ink)}
.pestanas a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}
/* pestaña Red */
.barra{position:relative;height:10px;border-radius:3px;background:var(--flat-bg);min-width:90px}
.barra>span{position:absolute;inset:0 auto 0 0;border-radius:3px;background:var(--w3)}
.barra>span.alto{background:var(--warn)} .barra>span.excede{background:var(--up)}
.barra>i{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink-2)}
tr.elegible{cursor:pointer} tr.elegible:hover td{background:var(--accent-soft)} tr.elegido td{background:var(--accent-soft);font-weight:600}
.chip.dudoso{background:var(--warn-bg);color:var(--warn)}
.ok{color:var(--down)} .alerta{color:var(--up);font-weight:600}
/* Estado de los datos */
.franja-estado{padding:10px 14px;border-radius:10px;font-size:.9rem;background:var(--warn-bg);color:var(--warn)}
.franja-estado.critico,.avisos.critico{background:var(--up-bg);color:var(--up)}
.franja-estado a{color:inherit;font-weight:600}
.punto-estado{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:4px;vertical-align:2px;background:var(--warn)}
.punto-estado.critico{background:var(--up)}
.kpi.aviso{border-color:var(--warn)} .kpi.critico{border-color:var(--up)}
.kpi.critico .v{color:var(--up)}
.chip.est-ok{background:var(--down-bg);color:var(--down)} .chip.est-info{background:var(--flat-bg);color:var(--flat)}
.chip.est-aviso{background:var(--warn-bg);color:var(--warn)} .chip.est-critico{background:var(--up-bg);color:var(--up)}
table.clicable tbody tr[data-id]{cursor:pointer}
table.clicable tbody tr[data-id]:hover td{background:var(--flat-bg)}
table.clicable tbody tr.sel td{background:var(--accent-soft)}
/* Botón principal (descarga del reporte) */
a.boton,button.boton{display:inline-flex;font:inherit;border:0;cursor:pointer;align-items:center;gap:6px;align-self:end;padding:9px 16px;border-radius:8px;background:var(--accent);color:#fff;font-weight:600;text-decoration:none}
a.boton:hover,button.boton:hover{filter:brightness(1.08)}
button.boton:disabled{opacity:.6;cursor:progress}
a.boton.secundario{background:var(--panel);color:var(--accent);border:1px solid var(--accent)}
@media (prefers-color-scheme: dark){a.boton,button.boton{color:#0b1220}}
/* Ingreso y administración */
.wrap.acceso{max-width:460px;min-height:100vh;align-content:center}
.tarjeta-acceso{display:grid;gap:14px;padding:24px}
.tarjeta-acceso .marca{border:0;padding:0;justify-content:center}
.tarjeta-acceso h1{font-size:1.3rem;text-align:center}
.tarjeta-acceso .vista{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.vista [aria-selected="true"]{font-weight:700;text-decoration-thickness:2px}
.form-acceso{display:grid;gap:6px}
.form-acceso input,.form-acceso textarea{font:inherit;padding:8px 10px;border:1px solid var(--rule);border-radius:8px;background:var(--panel);color:var(--ink)}
.form-acceso .boton{margin-top:8px;justify-content:center}
.sesion-barra{display:flex;gap:10px;align-items:center;font-size:.85rem;color:var(--ink-2);margin-left:auto}
.lista-invitados{display:grid;gap:12px}
.invitado .head h3{margin:0;font-size:1rem}
.permisos{border:1px solid var(--rule);border-radius:8px;display:flex;flex-wrap:wrap;gap:6px 16px;padding:8px 12px}
.permisos legend{font-size:.8rem;color:var(--ink-2);padding:0 4px}
.acciones-inv{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:8px}
tr.alerta-fila td{color:var(--up)}
.fila-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.fila-form label{flex-basis:100%;font-size:.88rem;color:var(--ink-2)}
.fila-form input{font:inherit;padding:7px 10px;border:1px solid var(--rule);border-radius:8px;background:var(--panel);color:var(--ink);min-width:220px}