/* Tipografía y tokens del propio SIM NOVA (apps/web/src/styles/sim-nova.css):
   Plus Jakarta Sans auto-hospedada (variable 400–700, OFL) y la mono del sistema del portal. */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/estaticos/fuentes/plus-jakarta-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/estaticos/fuentes/plus-jakarta-sans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0}

:root{
  --fondo:#0A111B; --sup:#0D1622; --sup-2:#15202F; --sup-3:#1C2735;
  --linea:#1C2735; --linea-2:#253142; --apagado:#253142;
  --texto:#EEF1F5; --texto-2:#B6C1CF; --texto-3:#8794A6;
  --acento:#78A6D8; --acento-t:rgba(120,166,216,.12); --acento-b:rgba(120,166,216,.40);
  --oro:#E0B063;
  --ok:#5CBC91; --degradado:#E2A25A; --caido:#D87666; --mant:#A29BFF; --sin:#1C2735; --neutro:#B6C1CF;
  --sobre-acento:#0B1624;
  --sombra:none;
  --sombra-tip:0 26px 64px -24px rgba(0,0,0,.6);
  color-scheme:dark;
  --r-sm:10px; --r:12px; --r-lg:18px;
  --t:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --m:ui-monospace,"SF Mono","Cascadia Mono",Menlo,monospace;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
  --fondo:#ECE8DF; --sup:#F4F1EA; --sup-2:#FFFFFF; --sup-3:#F3EFE6;
  --linea:#ECE7DC; --linea-2:#E3DED2; --apagado:#E3DED2;
  --texto:#0F1D2E; --texto-2:#4A5769; --texto-3:#626B78;
  --acento:#1B3A5C; --acento-t:rgba(27,58,92,.07); --acento-b:rgba(27,58,92,.32);
  --oro:#916312;
  --ok:#276B4D; --degradado:#95590F; --caido:#9A3324; --mant:#5B54E8; --sin:#E3DED2; --neutro:#4A5769;
  --sobre-acento:#FFFFFF;
  --sombra:0 1px 2px rgba(24,34,51,.04), 0 10px 26px -18px rgba(24,34,51,.16);
  --sombra-tip:0 14px 34px -14px rgba(24,34,51,.18);
  color-scheme:light;
  }
}
:root[data-theme="light"]{
  --fondo:#ECE8DF; --sup:#F4F1EA; --sup-2:#FFFFFF; --sup-3:#F3EFE6;
  --linea:#ECE7DC; --linea-2:#E3DED2; --apagado:#E3DED2;
  --texto:#0F1D2E; --texto-2:#4A5769; --texto-3:#626B78;
  --acento:#1B3A5C; --acento-t:rgba(27,58,92,.07); --acento-b:rgba(27,58,92,.32);
  --oro:#916312;
  --ok:#276B4D; --degradado:#95590F; --caido:#9A3324; --mant:#5B54E8; --sin:#E3DED2; --neutro:#4A5769;
  --sobre-acento:#FFFFFF;
  --sombra:0 1px 2px rgba(24,34,51,.04), 0 10px 26px -18px rgba(24,34,51,.16);
  --sombra-tip:0 14px 34px -14px rgba(24,34,51,.18);
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--fondo); color:var(--texto); font:400 14px/1.5 var(--t); -webkit-font-smoothing:antialiased; min-height:100vh}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); z-index:10; background:var(--sup)}
a{color:var(--acento); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--acento); outline-offset:2px; border-radius:6px}
button{font:inherit}
.mono{font-family:var(--m); font-variant-numeric:tabular-nums}
.oculto{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
svg.ic{width:14px; height:14px; flex:none; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.lado{padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
section[id]{scroll-margin-top:80px}

.etq{font:600 10.5px/1.3 var(--t); letter-spacing:.05em; text-transform:uppercase; color:var(--texto-3)}

.app{max-width:1280px; margin:0 auto; background:var(--sup); border-left:1px solid var(--linea); border-right:1px solid var(--linea); min-height:100vh}

.barra{position:sticky; top:env(safe-area-inset-top, 0px); z-index:9; background:var(--sup); border-bottom:1px solid var(--linea)}
.barra-in{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:66px; gap:16px}
.marca{display:flex; align-items:center; gap:12px; color:var(--texto); text-decoration:none!important; min-width:0}
.marca img{width:34px; height:34px}
.marca b{font:700 21px/1 var(--t); letter-spacing:-.02em; white-space:nowrap}
.marca span{font:700 21px/1 var(--t); color:var(--oro); letter-spacing:-.01em}
.pestanas{display:flex; gap:4px; list-style:none; margin:0; padding:0; height:66px}
.pestanas a{position:relative; display:flex; align-items:center; height:100%; padding:0 14px; color:var(--texto-2); font:600 13px/1 var(--t); text-decoration:none; white-space:nowrap}
.pestanas a:hover{color:var(--texto)}
.pestanas a[aria-current="true"]{color:var(--texto)}
.pestanas a[aria-current="true"]::after{content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; border-radius:2px; background:var(--acento)}
.acciones{display:flex; align-items:center; justify-content:flex-end; gap:14px}
.campana{position:relative; color:var(--texto-2); display:grid; place-items:center; width:28px; height:28px}
.campana:hover{color:var(--texto); text-decoration:none}
.campana svg{width:16px; height:16px}
.campana i{position:absolute; top:4px; right:5px; width:6px; height:6px; border-radius:50%; background:var(--degradado); box-shadow:0 0 0 2px var(--sup)}
.enlace-acento{display:inline-flex; align-items:center; gap:6px; color:var(--acento); font:600 13px/1 var(--t); white-space:nowrap}
.tema{width:30px; height:30px; border-radius:50%; border:1px solid var(--linea-2); background:var(--sup-2); color:var(--texto-2); display:grid; place-items:center; cursor:pointer}
.tema:hover{color:var(--texto)}
.tema svg{width:14px; height:14px}

.cuerpo{display:grid; grid-template-columns:minmax(0,1fr) 340px}
.principal{padding-block:26px 34px; display:flex; flex-direction:column; gap:34px; min-width:0; border-right:1px solid var(--linea)}
.lateral{min-width:0}
.lat-sec{padding-block:20px 22px; border-bottom:1px solid var(--linea)}
.lat-sec:last-child{border-bottom:0}

.cab{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap}
.cab h2{margin:0; font:700 20px/1.2 var(--t); letter-spacing:-.02em; text-wrap:balance}
.cab-lat{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px}
.cab-lat h2{margin:0; display:flex; align-items:center; gap:9px; font:700 15px/1.2 var(--t); letter-spacing:-.01em}
.cab-lat h2 svg{width:15px; height:15px; color:var(--texto-2)}
.puntos-mas{color:var(--texto-3); font:500 16px/1 var(--t); letter-spacing:1px}
.cuenta-roja{display:inline-grid; place-items:center; min-width:18px; height:17px; padding:0 6px; border-radius:30px; background:color-mix(in srgb, var(--degradado) 18%, transparent); color:var(--degradado); font:700 10px/1 var(--t)}
.sub-lat{margin:0 0 16px}
.selector{display:inline-flex; align-items:center; gap:2px; color:var(--texto-2); font:400 12.5px/1 var(--t)}

.ins{display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 10px; border-radius:30px; font:600 10px/1 var(--t); letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; color:var(--texto-2); background:var(--sup-3)}
.ins svg{width:10px; height:10px; stroke-width:2}
.ins.ok{color:var(--ok); background:color-mix(in srgb, var(--ok) 13%, transparent)}
.ins.degradado{color:var(--degradado); background:color-mix(in srgb, var(--degradado) 14%, transparent)}
.ins.caido{color:var(--caido); background:color-mix(in srgb, var(--caido) 14%, transparent)}
.ins.mant{color:var(--mant); background:color-mix(in srgb, var(--mant) 14%, transparent)}
.ins.inactivo{color:var(--texto-3); background:transparent; box-shadow:inset 0 0 0 1px var(--linea-2)}

.estado{position:relative; overflow:hidden; border-radius:var(--r); box-shadow:var(--sombra); display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:6px 18px; padding:14px 18px; border-left:3px solid var(--ce); background:color-mix(in srgb, var(--ce) 7%, var(--sup-2))}
.estado .hora{font:400 11px/1 var(--m); color:var(--ce); letter-spacing:.06em}
.estado h1{margin:0; font:700 17px/1.3 var(--t); letter-spacing:-.01em}
.estado p{margin:3px 0 0; color:var(--texto-2); font-size:13px}
.estado .nivel{font:700 10.5px/1 var(--t); letter-spacing:.06em; text-transform:uppercase; color:var(--ce); text-align:right; white-space:nowrap}

.segm{display:inline-flex; gap:2px; padding:3px; border:1px solid var(--linea-2); border-radius:var(--r-sm); background:var(--sup-2)}
.segm button{height:24px; padding:0 10px; border:0; border-radius:7px; background:transparent; color:var(--texto-2); font:600 11.5px/1 var(--t); cursor:pointer}
.segm button:hover{color:var(--texto)}
.segm button[aria-pressed="true"]{background:var(--acento); color:var(--sobre-acento)}
.vivo{position:relative; overflow:hidden; border-radius:var(--r-lg); box-shadow:var(--sombra); background-color:var(--sup-2); border:1px solid var(--linea-2); background:radial-gradient(70% 90% at 28% 70%, var(--acento-t), transparent 70%)}
.etiqueta-vivo{position:absolute; top:14px; left:14px; z-index:2; display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 10px 0 8px; border-radius:30px; background:var(--acento); color:var(--sobre-acento); font:700 10px/1 var(--t); letter-spacing:.06em; text-transform:uppercase}
.etiqueta-vivo svg{width:11px; height:11px; stroke-width:2}
.etiqueta-vivo.pausa{background:var(--texto-3)}
.vivo-in{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); min-height:236px}
.ola{position:relative; min-width:0}
#ola{position:absolute; inset:0; width:100%; height:100%; display:block; cursor:crosshair}
.kpis{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 22px; align-content:center; padding:30px 26px 24px 8px}
.kpi{display:flex; flex-direction:column; gap:6px; min-width:0}
.kpi .v{font:700 36px/1 var(--t); letter-spacing:-.03em; font-variant-numeric:tabular-nums; white-space:nowrap}
.kpi .v small{font-size:.5em; letter-spacing:0; color:var(--texto-2); margin-left:3px; font-weight:600}
.kpi:first-child .v{color:var(--acento)}
.kpi .pie{display:flex; align-items:center; gap:8px; font:400 11.5px/1.3 var(--t); color:var(--texto-2); flex-wrap:wrap}
.kpi .pie b{font-weight:400; color:var(--texto-3); padding-left:8px; border-left:1px solid var(--linea-2)}
.vivo-pie{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px 16px; border-top:1px solid var(--linea)}
.pausa-btn{display:inline-flex; align-items:center; gap:8px; border:0; background:transparent; color:var(--acento); font:600 12.5px/1 var(--t); cursor:pointer; padding:4px 2px}
.pausa-btn svg{width:11px; height:11px; fill:currentColor; stroke:none}
.vivo-der{display:flex; align-items:center; gap:16px; color:var(--texto-3)}
.actualizado{display:inline-flex; align-items:center; gap:7px; font:600 10.5px/1 var(--t); letter-spacing:.05em; text-transform:uppercase; color:var(--texto-2)}
.actualizado i{width:6px; height:6px; border-radius:50%; background:var(--acento); box-shadow:0 0 8px var(--acento)}
.actualizado.pausa i{background:var(--texto-3); box-shadow:none}

.inc{overflow:hidden; border-radius:var(--r-lg); box-shadow:var(--sombra); border:1px solid color-mix(in srgb, var(--ce) 40%, var(--linea-2)); background:var(--sup-2)}
.inc-cab{padding:16px 18px 0; display:flex; flex-direction:column; gap:10px}
.inc-cab h3{margin:0; font:700 17px/1.3 var(--t); letter-spacing:-.01em}
.inc-cab h3 a{color:var(--texto)}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.porque{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); margin-top:16px; border-top:1px solid var(--linea)}
.porque-txt{padding:16px 18px; display:flex; flex-direction:column; gap:12px; border-right:1px solid var(--linea)}
.porque-txt h4{margin:0; font:600 10.5px/1 var(--t); letter-spacing:.05em; text-transform:uppercase; color:var(--ce)}
.dato{display:grid; grid-template-columns:86px minmax(0,1fr); gap:10px; margin:0; font-size:13px}
.dato dt{font:600 10px/1.9 var(--t); letter-spacing:.05em; text-transform:uppercase; color:var(--texto-3)}
.dato dd{margin:0; color:var(--texto)}
.porque-graf{padding:16px 18px 12px; display:flex; flex-direction:column; gap:8px; min-width:0}
.graf-cab{display:flex; justify-content:space-between; align-items:flex-start; gap:8px}
.graf-cab .v{font:700 26px/1 var(--t); color:var(--ce); letter-spacing:-.03em}
.graf-cab .v small{font-size:13px; color:var(--texto-2)}
#lat{width:100%; height:auto; display:block; overflow:visible}
#lat .eje{fill:var(--texto-3); font:10px var(--m)}
#lat .reja{stroke:var(--linea-2); stroke-width:1; stroke-dasharray:1 3}
#lat .umbral{stroke:var(--ce); stroke-width:1; stroke-dasharray:4 4; opacity:.8}
#lat .umbral-txt{fill:var(--ce); font:600 9.5px var(--t); letter-spacing:.05em}
#lat .area{fill:url(#lat-relleno)}
#lat .trazo{fill:none; stroke:var(--ce); stroke-width:1.5; stroke-linejoin:round}
#lat .trazo-ok{fill:none; stroke:var(--acento); stroke-width:1.5; stroke-linejoin:round}
#lat .pf{fill:var(--ce)}
#lat .hf{fill:var(--ce); opacity:.25}
#lat .mv{stroke:var(--texto-3); stroke-width:1; stroke-dasharray:2 3}
.linea{list-style:none; margin:0; padding:14px 18px 16px; border-top:1px solid var(--linea); display:flex; flex-direction:column; gap:12px}
.linea li{display:grid; grid-template-columns:76px minmax(0,1fr); gap:12px; padding-left:12px; border-left:2px solid var(--linea-2)}
.linea li.actual{border-left-color:var(--ce)}
.linea li.auto{border-left-color:var(--acento)}
.linea .h{font:400 11px/1.6 var(--m); color:var(--texto-3)}
.linea li.actual .h{color:var(--ce)} .linea li.auto .h{color:var(--acento)}
.linea b{font-weight:700; font-size:13.5px}
.linea b em{font:600 9.5px/1 var(--t); font-style:normal; letter-spacing:.05em; text-transform:uppercase; color:var(--acento); margin-left:8px}
.linea p{margin:2px 0 0; color:var(--texto-2); font-size:13px}

.tarjetas{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
.tarjeta{display:flex; flex-direction:column; overflow:hidden; border-radius:var(--r); box-shadow:var(--sombra); border:1px solid var(--linea-2); min-width:0; background:var(--sup-2)}
.tarjeta.degradado{border-color:color-mix(in srgb, var(--degradado) 55%, transparent)}
.tarjeta.caido{border-color:color-mix(in srgb, var(--caido) 70%, transparent)}
.tarjeta.inactivo{border-style:dashed; border-color:var(--linea-2)}
.t-cuerpo{display:grid; grid-template-columns:62px minmax(0,1fr); gap:12px; padding:14px 14px 12px; flex:1}
.orbe{width:62px; height:62px}
.t-txt{display:flex; flex-direction:column; align-items:flex-start; gap:7px; min-width:0}
.t-txt h3{margin:0; font:700 14px/1.25 var(--t); letter-spacing:-.005em}
.tarjeta.inactivo h3{color:var(--texto-2)}
.t-txt p{margin:0; font-size:12px; line-height:1.4; color:var(--texto-2)}
.t-pie{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 14px; border-top:1px solid var(--linea); font:600 10.5px/1 var(--t); letter-spacing:.05em; text-transform:uppercase; color:var(--texto-2)}
.t-pie span{display:inline-flex; align-items:center; gap:6px; white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis}
.t-pie svg{width:12px; height:12px; color:var(--texto-3)}
.t-pie .alto{color:var(--degradado)}

.tabla{border-top:1px solid var(--linea)}
.tr{display:grid; align-items:center; gap:16px; padding:12px 12px; border-bottom:1px solid var(--linea)}
.tr.th{padding-block:10px}
.tr.th span{font:600 10.5px/1 var(--t); letter-spacing:.05em; text-transform:uppercase; color:var(--texto-3)}
.disp .tr{grid-template-columns:minmax(150px,1.1fr) 104px minmax(0,2.6fr) 72px 60px}
.hist .tr{grid-template-columns:96px minmax(0,2.2fr) minmax(0,1fr) 140px 52px 72px}
.der{text-align:right}
.nom{display:flex; align-items:center; gap:10px; min-width:0; font-size:13px}
.nom span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nom svg{width:14px; height:14px; color:var(--texto-3)}
.num{font:400 12px/1 var(--m); color:var(--texto); text-align:right; white-space:nowrap}
.num.alto{color:var(--degradado)}
.barra-dias{display:grid; grid-template-columns:repeat(90,minmax(0,1fr)); gap:1.5px; height:20px}
.dia{border-radius:1.5px; background:var(--sin); transition:transform .12s, filter .12s}
.dia:hover, .dia:focus-visible{transform:scaleY(1.3); filter:brightness(1.35)}
.dia.ok{background:color-mix(in srgb, var(--ok) 70%, var(--sup))}
.dia.degradado{background:var(--degradado)}
.dia.caido{background:var(--caido)}
.dia.mant{background:var(--mant)}
.leyenda{display:flex; flex-wrap:wrap; gap:8px 18px; padding:12px 12px 0; font:600 10.5px/1 var(--t); letter-spacing:.05em; text-transform:uppercase; color:var(--texto-3)}
.leyenda span{display:inline-flex; align-items:center; gap:7px}
.leyenda i{width:8px; height:8px; border-radius:2px; display:inline-block}
.leyenda i.hueco{box-shadow:inset 0 0 0 1px var(--texto-3)}
.cita{display:flex; align-items:center; gap:10px; min-width:0; font-size:13px}
.cita svg{width:14px; height:14px; color:var(--texto-3)}
.cita span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cita a{color:var(--texto)}
.fecha{font:400 11.5px/1 var(--m); color:var(--texto-2); white-space:nowrap}
.afecta{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--texto-2); min-width:0}
.afecta span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.afecta i{width:12px; height:12px; flex:none; border-radius:50%; border:1px solid var(--texto-3)}
.impacto{display:flex; align-items:flex-end; gap:2px; height:14px}
.impacto i{width:4px; border-radius:1px; background:var(--apagado)}
.impacto i:nth-child(1){height:5px} .impacto i:nth-child(2){height:8px} .impacto i:nth-child(3){height:11px} .impacto i:nth-child(4){height:14px}
.impacto i.on{background:var(--c)}
.ver-mas{display:inline-flex; align-items:center; gap:6px; color:var(--acento); font:600 12.5px/1 var(--t)}

.dist{display:flex; flex-direction:column; gap:16px}
.dist-cab{display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:8px}
.dist-cab .q{font:400 11px/1 var(--t); color:var(--texto-3); margin-left:auto}
.dist-cab .p{font:700 22px/1 var(--t); letter-spacing:-.02em; min-width:58px; text-align:right}
.dist-fila:first-child .p{color:var(--acento)}
.matriz{display:grid; grid-template-columns:repeat(60,minmax(0,1fr)); grid-auto-rows:3px; gap:2px 2px}
.matriz i{border-radius:1px; background:var(--apagado)}
.matriz i.on{background:var(--c)}

.alertas{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; max-height:372px; overflow:auto}
.alerta{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 10px; padding:10px 12px; border-radius:var(--r-sm); border-left:3px solid var(--acento); background:var(--sup-2)}
.alerta.aviso{border-left-color:var(--degradado)}
.alerta.critico{border-left-color:var(--caido); background:color-mix(in srgb, var(--caido) 9%, var(--sup-2))}
.alerta.nuevo{animation:entra .8s ease-out}
@keyframes entra{from{background:var(--acento-t)}}
.alerta .h{font:400 11px/1 var(--m); color:var(--acento)}
.alerta.aviso .h, .alerta.aviso .n{color:var(--degradado)}
.alerta.critico .h, .alerta.critico .n{color:var(--caido)}
.alerta .n{font:700 10px/1 var(--t); letter-spacing:.06em; text-transform:uppercase; color:var(--acento); text-align:right}
.alerta .x{grid-column:1/-1; font-size:13px; line-height:1.4; margin-top:4px}
.alerta .d{grid-column:1/-1; font-size:12px; color:var(--texto-2); line-height:1.4}
.nota-monitor{margin:14px 0 0; font-size:11.5px; color:var(--texto-3); line-height:1.5}

.grande{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.grande .v{font:700 38px/1 var(--t); letter-spacing:-.035em; font-variant-numeric:tabular-nums}
.grande .de{font:500 16px/1 var(--t); color:var(--texto-3)}
.marcas{display:grid; grid-template-columns:repeat(56,minmax(0,1fr)); gap:2px; height:22px; align-items:stretch}
.marcas i{border-radius:1.5px; background:var(--acento); opacity:.85}
.marcas i.resto{background:var(--apagado); opacity:1}
.marcas i.ventana{background:var(--mant); opacity:1; box-shadow:0 0 6px var(--mant)}
.marcas-pie{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; flex-wrap:wrap}
.afectados{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:10px}
.afectados li{display:grid; grid-template-columns:10px 92px minmax(0,1fr) 62px; align-items:center; gap:8px; font-size:12.5px}
.afectados .pt{width:6px; height:6px; border-radius:50%}
.afectados .ln{height:1px; background:var(--apagado); position:relative}
.afectados .ln::before{content:""; position:absolute; left:0; top:-0.5px; height:2px; width:var(--w); background:var(--c)}
.afectados .num{font-size:11.5px}
.mant-txt{margin:14px 0 0; font-size:12.5px; color:var(--texto-2)}

.form{display:flex; flex-direction:column; gap:10px}
.form p{margin:0; font-size:12.5px; color:var(--texto-2)}
.campo{display:flex; gap:6px; flex-wrap:wrap}
.campo input{flex:1 1 160px; min-width:0; height:38px; padding:0 12px; border:1px solid var(--linea-2); border-radius:var(--r-sm); background:var(--sup-2); color:var(--texto); font:400 13px var(--t)}
.campo input::placeholder{color:var(--texto-3)}
.campo button{height:38px; padding:0 15px; border:0; border-radius:var(--r-sm); background:var(--acento); color:var(--sobre-acento); font:600 13px/1 var(--t); cursor:pointer}
.aviso-form{font-size:12.5px; min-height:1em; margin:0}
.aviso-form.bien{color:var(--ok)} .aviso-form.mal{color:var(--caido)}

.pie-app{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-block:16px; border-top:1px solid var(--linea)}

.globo{position:fixed; z-index:20; pointer-events:none; max-width:270px; background:var(--sup-2); color:var(--texto); border:1px solid var(--linea-2); border-radius:var(--r-sm); padding:9px 11px; font-size:12.5px; box-shadow:var(--sombra-tip); opacity:0; transform:translateY(4px); transition:opacity .12s, transform .12s}
.globo.visible{opacity:1; transform:none}
.globo strong{display:block; font:600 10.5px/1.3 var(--t); letter-spacing:.05em; text-transform:uppercase; color:var(--texto-2); margin-bottom:5px}
.globo .lg{display:flex; align-items:center; gap:8px}
.globo .pt{width:7px; height:7px; border-radius:50%; flex:none}
.globo .nota{color:var(--texto-2); margin-top:4px}

@media (max-width:1100px){
  .cuerpo{grid-template-columns:minmax(0,1fr)}
  .principal{border-right:0}
  .lateral{border-top:1px solid var(--linea); display:grid; grid-template-columns:repeat(2,minmax(0,1fr))}
  .lat-sec{border-bottom:1px solid var(--linea)}
  .lat-sec:nth-child(odd){border-right:1px solid var(--linea)}
  .tarjetas{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .barra-in{grid-template-columns:1fr auto; height:auto; padding-block:10px 0; row-gap:4px}
  .pestanas-caja{grid-column:1/-1; grid-row:2; overflow-x:auto; scrollbar-width:none; margin-inline:-6px}
  .pestanas{height:42px}
  .pestanas a{padding:0 10px}
  section[id]{scroll-margin-top:110px}
  .vivo-in{grid-template-columns:minmax(0,1fr)}
  .ola{height:170px}
  .kpis{padding:6px 18px 22px; border-top:1px solid var(--linea)}
  .porque{grid-template-columns:minmax(0,1fr)}
  .porque-txt{border-right:0; border-bottom:1px solid var(--linea)}
  .disp .tr{grid-template-columns:minmax(0,1fr) auto; gap:8px 12px}
  .disp .barra-dias{grid-column:1/-1; grid-row:2}
  .disp .num{display:none}
  .disp .tr.th, .hist .tr.th{display:none}
  .hist .tr{grid-template-columns:minmax(0,1fr) auto; gap:8px 12px}
  .hist .afecta, .hist .impacto{display:none}
  .hist .fecha{grid-column:1/-1}
}
@media (max-width:640px){
  .enlace-acento span{display:none}
  .marca img{width:28px; height:28px}
  .marca b,.marca span{font-size:18px}
  .lateral{grid-template-columns:minmax(0,1fr)}
  .lat-sec:nth-child(odd){border-right:0}
  .tarjetas{grid-template-columns:minmax(0,1fr)}
  .estado{grid-template-columns:minmax(0,1fr)}
  .estado .nivel{text-align:left; order:-1; white-space:normal}
  .kpi .v{font-size:30px}
  .dato{grid-template-columns:minmax(0,1fr); gap:2px}
  .linea li{grid-template-columns:minmax(0,1fr); gap:2px}
  .barra-dias{grid-template-columns:repeat(30,minmax(0,1fr))}
  .barra-dias .dia:nth-child(-n+60){display:none}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .alerta.nuevo{animation:none}
}

/* ── Servicio real (F2): estados por entorno, regiones que refresca el guion y respaldo sin JS ── */
.region{display:contents}
.estado,.inc{--ce:var(--texto-3)}
.ce-ok{--ce:var(--ok)}
.ce-degradado{--ce:var(--degradado)}
.ce-caido{--ce:var(--caido)}
.ce-mant{--ce:var(--mant)}
.ce-sin{--ce:var(--texto-3)}
.entornos{display:flex; flex-wrap:wrap; gap:6px; margin-top:-22px}
.entornos a{display:inline-flex; align-items:center; height:28px; padding:0 12px; border-radius:30px; border:1px solid var(--linea-2); color:var(--texto-2); font:600 12px/1 var(--t); text-decoration:none}
.entornos a:hover{color:var(--texto)}
.entornos a[aria-current="page"]{background:var(--acento); border-color:var(--acento); color:var(--sobre-acento)}
.ola-alt{position:absolute; left:16px; right:16px; top:48px; bottom:14px; width:calc(100% - 32px); height:calc(100% - 62px)}
.ola-alt rect{fill:var(--texto-3)}
.ola-alt rect.ok{fill:var(--acento)}
.ola-alt rect.degradado{fill:var(--degradado)}
.ola-alt rect.caido{fill:var(--caido)}
.ola-alt rect.mant{fill:var(--mant)}
.con-js .ola-alt{display:none}
.vacio{margin:0; padding:14px 16px; border:1px dashed var(--linea-2); border-radius:var(--r); color:var(--texto-3); font-size:13px}
.porque.solo{grid-template-columns:minmax(0,1fr)}
.porque.solo .porque-txt{border-right:0}
.actualizado.sin-conexion{color:var(--caido)}
.actualizado.sin-conexion i{background:var(--caido); box-shadow:none}
.pie-app a{font:600 10.5px/1.3 var(--t); letter-spacing:.05em; text-transform:uppercase}

/* El atributo hidden manda sobre cualquier display (los KPI de cada periodo son grid). */
[hidden]{display:none!important}

/* Página propia de un incidente (/incidentes/:slug) y el 404 */
.barra-simple{grid-template-columns:1fr auto}
.volver{font:600 13px/1 var(--t); color:var(--texto-2); white-space:nowrap}
.volver:hover{color:var(--texto)}
.ficha{border-right:0; max-width:880px; width:100%; margin:0 auto; padding-block:28px 48px; display:flex; flex-direction:column; gap:16px}
.ficha-meta{margin:0; color:var(--texto-3); font-size:13px}
.ficha-titulo{font:700 24px/1.2 var(--t); margin:0; text-wrap:balance}