/* VA_MONITOR — front estatico. Tema OSCURO azul-noche (cockpit de la flota).
   Porta la paleta del cockpit legacy (va-monitor-wc/app/main.py): fondo #0d1117,
   paneles #161b22, acento azul #58a6ff. Mismos nombres de clase que main.py para
   reutilizar sus convenciones (card, tab, ragent, alertstrip, msbtn, chart…). */
:root{
  --bg:#0d1117; --panel:#161b22; --panel2:#1c2330; --edge:#26303d;
  --tx:#e6edf3; --mut:#8b98a9; --acc:#58a6ff;
  --green:#37d67a; --amber:#ffb454; --red:#ff5b5b;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--tx);margin:0;padding:24px}
a{color:var(--acc)}
h1{font-size:22px;margin:0 0 4px;letter-spacing:.3px}
.sub{color:var(--mut);margin-bottom:16px;font-size:13px}
.topnav{display:flex;gap:12px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.topnav a{text-decoration:none}
.topnav a#logoutlink{margin-left:auto;color:var(--mut);font-size:12px}
.topnav a#logoutlink:hover{color:var(--tx)}
.cards{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.card{background:var(--panel);border:1px solid var(--edge);border-radius:12px;padding:14px 18px;min-width:150px}
.card .k{color:var(--mut);font-size:12px}
.card .v{font-size:22px;font-weight:700;margin-top:4px}
.card .ksub{color:var(--mut);font-size:11px;margin-top:4px}
.warn{color:var(--amber);font-size:11px;font-weight:400;margin-top:2px}
.badge{display:inline-block;padding:2px 8px;border-radius:6px;background:#1c2733;border:1px solid #2b4a6b;color:var(--acc);font-size:11px}
table{border-collapse:collapse;width:100%;background:var(--panel);border:1px solid var(--edge);border-radius:12px;overflow:hidden}
th,td{padding:9px 12px;text-align:right;border-bottom:1px solid var(--edge);white-space:nowrap}
th{background:var(--panel2);color:var(--mut);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
td.l,th.l{text-align:left}
td.hi{color:var(--amber)}
tr:last-child td{border-bottom:none}
.foot{color:var(--mut);font-size:12px;margin-top:16px}
h2{font-size:13px;margin:28px 0 4px;text-transform:uppercase;letter-spacing:1.5px;color:var(--mut)}
.h2sub{color:var(--mut);font-size:12px;margin-bottom:12px}
table.hosts{max-width:760px}
/* Barras (aguante/actividad). Degradado azul→verde. */
.chart{display:flex;align-items:flex-end;gap:3px;height:120px;overflow-x:auto;background:var(--panel);border:1px solid var(--edge);border-radius:12px;padding:12px 12px 6px}
.bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:16px}
.barfill{width:11px;background:linear-gradient(var(--acc),var(--green));border-radius:3px 3px 0 0}
.barlbl{font-size:9px;color:var(--mut);margin-top:4px;transform:rotate(-45deg);white-space:nowrap}
.rbtn{display:inline-block;padding:6px 14px;border-radius:8px;background:var(--acc);border:1px solid var(--acc);color:#0d1117;text-decoration:none;font-size:13px;cursor:pointer;font-weight:600}
.rbtn:hover{filter:brightness(1.08)}
/* Pestañas del monitor (mismo comportamiento que main.py). */
.tabs{display:flex;gap:10px;margin:0 0 18px;border-bottom:1px solid var(--edge);flex-wrap:wrap}
.tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--mut);padding:9px 4px;cursor:pointer;font:inherit;font-size:14px}
.tab:hover{color:var(--tx)}
.tab.on{color:var(--tx);border-bottom-color:var(--acc)}
.subtabs{display:flex;gap:8px;margin:0 0 12px;flex-wrap:wrap}
.subtab{background:var(--panel2);border:1px solid var(--edge);border-radius:999px;color:var(--mut);padding:5px 14px;cursor:pointer;font:inherit;font-size:13px}
.subtab:hover{color:var(--tx)}
.subtab.on{color:var(--tx);border-color:var(--acc);background:var(--panel)}
.view{display:none}
.view.on{display:block}
/* Tarjeta de agente (control y límites). */
.ragent{border:1px solid var(--edge);border-radius:12px;padding:14px 16px;margin-bottom:18px;background:var(--panel)}
/* #462: tarjeta accionable huérfana (sin ticket) o centinela con invariante roto:
   borde rojo para que la violación de la regla dura salte a la vista. */
.ragent.opsorphan{border-color:#f7768e;background:#1e1418}
.rhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15px;margin-bottom:12px}
.wbar{height:8px;border-radius:5px;background:var(--panel2);overflow:hidden;margin-top:8px}
.wfill{height:100%;background:var(--green);border-radius:5px}
.wfill.warn{background:var(--amber)}.wfill.crit{background:var(--red)}
.ksub{color:var(--mut);font-size:11px;margin-top:4px}
/* Tira de alerta / versión (borde izquierdo por nivel). */
.alertstrip{border:1px solid var(--edge);border-left-width:4px;border-radius:12px;padding:12px 16px;margin:0 0 18px;background:var(--panel)}
.alertstrip.ok{border-left-color:var(--green)}
.alertstrip.warn{border-left-color:var(--amber)}
.alertstrip.crit{border-left-color:var(--red)}
.alerthead{font-weight:600;font-size:14px;margin-bottom:10px}
.alertstrip.ok .alerthead{margin-bottom:0;color:var(--green)}
.alertstrip.crit .alerthead{color:var(--red)}
.alertstrip.warn .alerthead{color:var(--amber)}
.alertrow{display:flex;gap:9px;align-items:flex-start;padding:7px 0;border-top:1px solid var(--edge)}
.alertwhat{color:var(--mut);font-size:12px}
.alertdet{color:var(--tx);font-size:12px;margin-top:2px;opacity:.85}
.alertfix{margin-top:4px;font-size:11px}
.alertfix code{background:var(--panel2);border:1px solid var(--edge);border-radius:5px;padding:2px 6px;color:var(--tx)}
.alertfix a{color:var(--acc)}
/* Caja de productividad: ahora vive DENTRO de Alertas (Oliver 2026-09-11), no
   como panel fijo arriba. Borde izquierdo azul para distinguirla del semáforo. */
.prodpanel{border:1px solid var(--edge);border-left:4px solid var(--acc);border-radius:12px;padding:14px 16px;margin:0 0 18px;background:var(--panel)}
.prodpanel .alerthead{color:var(--tx)}
/* Botones de control (thinking / switch). */
.msrow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:8px 0 2px}
.mslabel{color:var(--mut);font-size:12px;min-width:64px}
.msbtn{padding:5px 12px;border-radius:8px;background:var(--panel2);border:1px solid var(--edge);color:var(--tx);font:13px system-ui,sans-serif;cursor:pointer}
.msbtn:hover{border-color:var(--acc)}
.msbtn.on{background:var(--acc);border-color:var(--acc);color:#0d1117;font-weight:700}
.msbtn:disabled{opacity:.45;cursor:wait}
.msnote{color:var(--mut);font-size:11px;margin:2px 0 4px}
.msmsg{font-size:12px;margin-top:6px;min-height:16px}
.msmsg.ok{color:var(--green)}.msmsg.err{color:var(--red)}
/* Nota de fuente caida: nunca deja el panel en blanco. */
.srcerr{border:1px solid var(--red);border-left:4px solid var(--red);background:#2a1720;color:#ffb3b3;border-radius:12px;padding:10px 14px;font-size:13px;margin:0 0 18px}
.loading{color:var(--mut);font-size:13px;padding:8px 0}
/* Costes por producto/mes (portado identico del cockpit legacy gen.py). */
.acbox{background:var(--panel2);border:1px solid var(--edge);border-radius:10px;padding:10px 13px;margin:2px 0 14px;font-size:14px;overflow-x:auto}
.acbody{display:flex;flex-direction:column;gap:2px}
.acrow{display:flex;justify-content:space-between;gap:12px;padding:2px 0;border-bottom:1px solid transparent}
.acrow .acname{color:var(--tx)}
.acrow .acusd{font-variant-numeric:tabular-nums;color:var(--tx)}
.actotal{margin-top:4px;padding-top:6px;border-top:1px solid var(--edge);font-weight:600}
.acdet>summary{list-style:none;cursor:pointer}
.acdet>summary::-webkit-details-marker{display:none}
.acdet>summary .acname::before{content:"▸";color:var(--mut);display:inline-block;width:1em;font-size:11px}
.acdet[open]>summary .acname::before{content:"▾"}
.acsvcs{display:flex;flex-direction:column;gap:1px;margin:2px 0 6px 1.1em;padding-left:8px;border-left:1px solid var(--edge)}
.acsvc{display:flex;justify-content:space-between;gap:12px;padding:1px 0;font-size:12px}
.acsvc .acsvcname{color:var(--mut)}
.acsvc .acusd{font-variant-numeric:tabular-nums;color:var(--mut)}
.acnote{color:var(--mut);font-size:12px;margin-top:6px}
.acanomhdr{color:#f0b429;font-size:12px;margin-top:8px}
.acnote code{background:var(--panel);border:1px solid var(--edge);border-radius:4px;padding:0 4px;font-size:11px}
.acnote.acwarn{color:#f0b429;background:rgba(240,180,41,.06);border:1px solid rgba(240,180,41,.25);border-radius:8px;padding:8px 10px}
.iasel{display:flex;align-items:center;gap:10px;margin:4px 0 14px}
.iasel label{font-size:12px;font-weight:600;color:var(--mut)}
.iasel select{background:var(--panel);color:var(--tx);border:1px solid var(--edge);border-radius:8px;padding:6px 10px;font:inherit;font-size:13px;cursor:pointer}
.prodpane{display:none}
.prodpane.active{display:block}
/* Forecast por nº de usuarios (portado del cockpit legacy gen.py). Una tarjeta por
   escenario, apiladas en vertical (nunca scroll horizontal): coste A/B, ingresos, neto. */
.fccards{display:flex;flex-direction:column;gap:10px;margin:8px 0 14px}
.fccard{background:var(--panel);border:1px solid var(--edge);border-radius:10px;padding:10px 13px}
.fccard-h{font-size:13px;font-weight:700;color:var(--acc);margin-bottom:6px;letter-spacing:.3px}
.fcsub{color:var(--mut);font-size:11px;font-weight:400}
.fccard .acrow{gap:10px}
.fccard .acname{flex:1 1 auto;font-size:12.5px}
.fccard .acusd{flex:0 0 auto;text-align:right;font-variant-numeric:tabular-nums}
.acrow.fca .acusd{color:#37d67a}
.acrow.fcb .acusd{color:#58a6ff}
.acrow.fcrev .acusd{color:#f0b429}
.acrow.fcnet{margin-top:6px;padding-top:7px;border-top:1px solid var(--edge)}
.acrow.fcnet .acname{font-weight:700}
.acrow.fcnet.pos .acusd{color:#37d67a;font-weight:700}
.acrow.fcnet.neg .acusd{color:#ff5b5b;font-weight:700}
/* IA's — comparativa de modelos por tier (portado identico del cockpit legacy gen.py).
   El chart legacy .chart/.bar se renombra a .iachart/.iabar: el front ya define un
   .chart/.bar propio (barras verticales de aguante) que colisionaria con estas
   barras horizontales de indice. table.cmp neutraliza el fondo/borde global de
   <table> (el borde lo pone .tblwrap) para no duplicarlo. */
.iapane{display:none}
.iapane.active{display:block}
.mcintro{color:var(--mut);font-size:12px;margin:14px 0 16px}
.mcupd{margin-left:8px;opacity:.8}
.iachart{display:block;height:auto;overflow:visible;background:var(--panel);border:1px solid var(--edge);border-radius:12px;padding:14px 16px;margin-bottom:16px}
.chartttl{font-size:12px;color:var(--mut);margin-bottom:12px}
.lg{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:middle}
.barrow{display:flex;align-items:center;gap:12px;margin:7px 0}
.barlab{flex:0 0 120px;font-size:12px;font-weight:600}
.bars{flex:1;display:grid;gap:4px}
.iabar{position:relative;background:var(--panel2);border-radius:5px;height:18px;overflow:hidden}
.fill{display:block;height:100%;border-radius:5px}
.fidx{background:linear-gradient(90deg,#37d67a,#58a6ff)}
.fref{background:repeating-linear-gradient(45deg,#6b7a90,#6b7a90 6px,#55637a 6px,#55637a 12px)}
.reftag{font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:#0d1117;background:#8b98a9;padding:1px 5px;border-radius:20px;font-weight:700}
.bval{position:absolute;top:0;left:8px;line-height:18px;font-size:10px;color:var(--tx);font-variant-numeric:tabular-nums;text-shadow:0 0 3px #0d1117}
.tblwrap{overflow-x:auto;border:1px solid var(--edge);border-radius:12px}
table.cmp{border-collapse:collapse;width:100%;font-size:12px;min-width:640px;background:transparent;border:none;border-radius:0}
table.cmp th,table.cmp td{padding:9px 10px;text-align:center;border-bottom:1px solid var(--edge);white-space:nowrap}
table.cmp thead th{background:var(--panel2);color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.5px}
table.cmp td.mname{text-align:left;font-weight:700;white-space:nowrap}
table.cmp td .mcnote{font-weight:400;color:var(--mut);font-size:11px;white-space:normal;max-width:220px;margin-top:3px}
table.cmp td.num{font-variant-numeric:tabular-nums;color:var(--tx)}
table.cmp td.acc{font-size:11px;color:var(--acc);white-space:nowrap}
table.cmp td.costc{font-weight:700;color:#f0b429;font-variant-numeric:tabular-nums}
table.cmp td.costc.plan{color:#37d67a}
table.cmp td.costc .mcnote{font-weight:400;color:var(--mut)}
table.cmp td.idxc{font-weight:700;color:#37d67a}
table.cmp td.mname .mcsub{font-weight:400;color:var(--mut);font-size:10px;text-transform:none;letter-spacing:0;margin-top:2px}
table.billtbl td.bill{text-align:left;font-size:11.5px;color:var(--tx);white-space:nowrap}
table.billtbl td.cap{text-align:left;font-size:11px;color:var(--mut);white-space:normal;max-width:230px}
table.billtbl td.mname,table.billtbl td.idxc{border-right:1px solid var(--edge)}
table.billtbl tr.planrow td{background:rgba(55,214,122,.04)}
.mcwarn{color:#f0b429;font-size:10.5px;margin-top:3px}
.capspec{color:#37d67a;font-size:9.5px;font-weight:600;white-space:nowrap}
.capemp{color:#f0b429;font-size:9.5px;font-weight:600;white-space:nowrap}
table.freetbl td.loc{text-align:left;font-size:11px;white-space:nowrap}
table.freetbl td.loc .okloc{color:#37d67a;font-weight:600}
table.freetbl td.loc .noloc{color:#4b5563}
table.freetbl td.req{text-align:left;font-size:10.5px;color:var(--mut);white-space:normal;max-width:240px}
table.cmp tbody tr:hover td{background:var(--panel)}
.mch3{font-size:14px;margin:26px 0 4px;color:var(--tx)}
.mcbasis{font-size:11px;color:var(--mut);margin:10px 0 0;padding:9px 12px;background:var(--panel2);border:1px solid var(--edge);border-radius:10px;line-height:1.5}
/* podio nº1 por tier */
.tlnote{color:var(--mut);font-size:12px;margin:0 0 12px}
.tierlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:8px}
.tlcard{background:var(--panel);border:1px solid var(--edge);border-radius:12px;padding:14px 16px;position:relative;overflow:hidden}
.tlcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#37d67a,#58a6ff)}
.tltier{font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.6px;font-weight:700}
.tlpick{font-size:18px;font-weight:700;margin:6px 0 2px}
.tlidx{font-size:12px;color:#37d67a;font-weight:700;font-variant-numeric:tabular-nums}
.tlwhy{font-size:11.5px;color:var(--mut);margin-top:6px;line-height:1.4}
/* free tier hosted (cuenta/API) */
.fhlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-top:10px}
.fhc{display:block;text-decoration:none;color:inherit;background:var(--panel);border:1px solid var(--edge);border-radius:12px;padding:14px 16px;position:relative;overflow:hidden}
.fhc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#3fb950,#58a6ff)}
.fhc:hover{border-color:var(--acc)}
.fhhead{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.fhname{font-size:16px;font-weight:700}
.fhapi{font-size:10px;font-weight:800;color:#3fb950;border:1px solid #3fb950;border-radius:5px;padding:1px 5px;text-transform:uppercase;letter-spacing:.5px}
.fhchat{font-size:10px;font-weight:800;color:var(--mut);border:1px solid var(--edge);border-radius:5px;padding:1px 5px;text-transform:uppercase;letter-spacing:.5px}
.fhmodel{font-size:11.5px;color:var(--mut);margin:4px 0 8px}
.fhcard{font-weight:700;color:#e3b341}
.fhnocard{color:#3fb950}
.fhsmart{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--bg);border:1px solid var(--edge);border-radius:8px;padding:6px 10px;margin-bottom:8px}
.fhbest{font-size:12.5px;font-weight:700;color:var(--tx)}
.fhidx{font-size:16px;font-weight:800;color:#37d67a;font-variant-numeric:tabular-nums;white-space:nowrap}
.fhidx i{font-size:9.5px;font-style:normal;color:var(--mut);text-transform:uppercase;letter-spacing:.4px;margin-left:3px}
.fhidxnote{font-size:11px}
.fhlims{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}
.fhlim{display:flex;flex-direction:column;align-items:center;background:var(--bg);border:1px solid var(--edge);border-radius:8px;padding:6px 2px;text-align:center}
.fhlim b{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.fhlim i{font-size:9.5px;color:var(--mut);font-style:normal;text-transform:uppercase;letter-spacing:.4px;margin-top:2px}
.fhnote{font-size:11.5px;color:var(--mut);line-height:1.4}
/* Componentes de cada producto (tag semver dev + estado build). Board reutilizado
   por el monitor (Productos) y el home (dentro de la tarjeta plegable de Alertas). */
.compboard{display:flex;flex-direction:column;gap:10px;margin:4px 0 18px}
.crow{background:var(--panel);border:1px solid var(--edge);border-radius:12px;padding:10px 14px}
.cprod{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:8px}
.cslug{color:var(--mut);font-size:11px}
.cact{color:var(--acc);text-decoration:none;font-size:12px;border:1px solid var(--edge);border-radius:8px;padding:2px 9px;background:var(--panel2)}
.cact:hover{text-decoration:underline}
/* Cajas por entorno (DEV/PROD): enlaces testables Web/APK/API por producto
   (#33990). DEV en todos; PROD solo en productos con dominio propio (crg, jmp),
   con acento verde para distinguir el entorno vivo del de dev. */
.cenvs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.envbox{display:flex;flex-direction:column;gap:6px;border:1px solid var(--edge);border-radius:10px;padding:6px 10px;background:var(--panel2)}
.envbox.prod{border-color:var(--green)}
.envhdr{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--mut)}
.envbox.prod .envhdr{color:var(--green)}
.envacts{display:flex;gap:8px;flex-wrap:wrap}
.cchips{display:flex;gap:8px;flex-wrap:wrap}
.ccomp{display:inline-flex;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--edge);border-radius:8px;padding:4px 9px;font-size:12px}
.ccomp .cdot{font-size:10px;line-height:1}
.ccomp .clabel{color:var(--tx);text-decoration:none}
.vtag{color:var(--acc);font-variant-numeric:tabular-nums;text-decoration:none;font-weight:600}
a.vtag:hover{text-decoration:underline}
/* Version en prod: pastilla verde diferenciada del tag de dev (acento). Comparte
   tabular-nums para que dev y prod alineen. Solo se pinta si hay deploy a prod. */
.vtagprod{color:var(--green);font-variant-numeric:tabular-nums;text-decoration:none;font-weight:600;font-size:11px;border:1px solid var(--edge);border-radius:6px;padding:1px 5px}
a.vtagprod:hover{text-decoration:underline}
/* Dentro de la tarjeta plegable del home, el board va mas compacto. */
.acdet .compboard{margin:8px 0 2px}
/* Consumo (VA_PRODUCT#333): rango de fechas custom del explorador de uso, mismos
   tonos que .loginbox input pero sin acotar a esa caja. */
input[type=date]{background:var(--panel2);border:1px solid var(--edge);border-radius:8px;
  padding:6px 10px;color:var(--tx);font:inherit;font-size:13px;color-scheme:dark}
input[type=date]:focus{outline:none;border-color:var(--acc)}
/* Login (VA_PRODUCT#327): la app ya no depende de la basicauth del edge. */
.loginbox{max-width:340px;margin:40px auto 0;background:var(--panel);border:1px solid var(--edge);border-radius:12px;padding:24px}
.loginbox label{display:block;font-size:12px;color:var(--mut);margin:14px 0 6px}
.loginbox label:first-of-type{margin-top:0}
.loginbox input{width:100%;background:var(--panel2);border:1px solid var(--edge);border-radius:8px;padding:9px 10px;color:var(--tx);font:inherit;font-size:14px}
.loginbox input:focus{outline:none;border-color:var(--acc)}
.loginbox .rbtn{width:100%;margin-top:18px;text-align:center;border:1px solid var(--acc)}
.loginerr{color:var(--red);font-size:12px;margin-top:12px;min-height:16px}