/* Issue #82: sistema visual del prototipo aprobado (documentacion/diseno/consola-v1); variables exactas de los 4 ambientes. */
.amb{--blur:blur(14px)}
.amb-noche{--bg:#060A11;--fx:radial-gradient(900px 520px at 8% -10%,rgba(34,211,238,.18),transparent 60%),radial-gradient(820px 520px at 95% 0%,rgba(167,139,250,.18),transparent 60%),linear-gradient(rgba(148,163,184,.05) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,rgba(148,163,184,.05) 1px,transparent 1px) 0 0/44px 44px;--p1:rgba(20,30,46,.72);--p2:rgba(11,17,28,.84);--bd:rgba(120,150,190,.16);--bd2:rgba(120,150,190,.26);--tx:#E7EDF5;--tx2:#C2CDDA;--tx3:#AEB9C7;--mu:#8A97A8;--mu2:#6B788A;--sb:rgba(103,232,249,.07);--sbd:rgba(103,232,249,.16);--hd:rgba(6,10,17,.66);--ch:rgba(255,255,255,.05);--ia:rgba(11,17,28,.92);--in:#0E1522;--h0:rgba(148,163,184,.08);--cy:#67E8F9;--cy2:#A5F3FC;--ve:#6EE7B7;--am:#FCD34D;--ro:#FDA4AF;--na:#FDBA74;--vi:#C4B5FD;--az:#93C5FD;--nav-on:rgba(103,232,249,.14);--hov:rgba(255,255,255,.07);--brillo:1}
.amb-bosque{--bg:#04130E;--fx:radial-gradient(1000px 560px at 0% -10%,rgba(16,185,129,.24),transparent 60%),radial-gradient(800px 560px at 100% 10%,rgba(250,204,21,.12),transparent 60%),radial-gradient(700px 500px at 50% 120%,rgba(45,212,191,.14),transparent 60%);--p1:rgba(12,38,29,.70);--p2:rgba(6,24,18,.84);--bd:rgba(110,231,183,.15);--bd2:rgba(110,231,183,.26);--tx:#ECFDF5;--tx2:#C7E9DA;--tx3:#A7D3C0;--mu:#86B8A3;--mu2:#5F8F7B;--sb:rgba(110,231,183,.08);--sbd:rgba(110,231,183,.18);--hd:rgba(4,19,14,.66);--ch:rgba(255,255,255,.05);--ia:rgba(6,24,18,.94);--in:#0B241B;--h0:rgba(110,231,183,.07);--cy:#5EEAD4;--cy2:#99F6E4;--ve:#6EE7B7;--am:#FDE68A;--ro:#FDA4AF;--na:#FDBA74;--vi:#C4B5FD;--az:#93C5FD;--nav-on:rgba(110,231,183,.16);--hov:rgba(255,255,255,.07);--brillo:1}
.amb-aurora{--bg:#F6F2FF;--fx:radial-gradient(900px 600px at 0% 0%,rgba(134,239,172,.55),transparent 60%),radial-gradient(900px 640px at 100% 0%,rgba(253,164,175,.55),transparent 60%),radial-gradient(900px 640px at 60% 100%,rgba(165,180,252,.55),transparent 60%),radial-gradient(700px 500px at 20% 90%,rgba(103,232,249,.45),transparent 60%);--p1:rgba(255,255,255,.66);--p2:rgba(255,255,255,.56);--bd:rgba(255,255,255,.75);--bd2:rgba(30,27,75,.14);--tx:#1E1B3A;--tx2:#3B3760;--tx3:#4C4875;--mu:#625D8C;--mu2:#8783A8;--sb:rgba(255,255,255,.6);--sbd:rgba(99,102,241,.18);--hd:rgba(255,255,255,.55);--ch:rgba(255,255,255,.55);--ia:rgba(255,255,255,.78);--in:rgba(255,255,255,.85);--h0:rgba(30,27,75,.07);--cy:#0E7490;--cy2:#155E75;--ve:#047857;--am:#B45309;--ro:#BE123C;--na:#C2410C;--vi:#6D28D9;--az:#1D4ED8;--nav-on:rgba(255,255,255,.85);--hov:rgba(255,255,255,.6);--brillo:0}
.amb-grafito{--bg:#EEF0F3;--fx:linear-gradient(180deg,#F7F8FA,#EBEEF2);--p1:#FFFFFF;--p2:#FFFFFF;--bd:rgba(15,23,42,.09);--bd2:rgba(15,23,42,.16);--tx:#0F172A;--tx2:#334155;--tx3:#475569;--mu:#64748B;--mu2:#94A3B8;--sb:#F4F6F9;--sbd:rgba(15,23,42,.08);--hd:rgba(255,255,255,.86);--ch:rgba(15,23,42,.04);--ia:#FFFFFF;--in:#FFFFFF;--h0:rgba(15,23,42,.05);--cy:#0E7490;--cy2:#0E7490;--ve:#047857;--am:#B45309;--ro:#BE123C;--na:#C2410C;--vi:#6D28D9;--az:#1D4ED8;--nav-on:#E8F4F6;--hov:rgba(15,23,42,.05);--brillo:0}
.amb-aurora .dsp,.amb-grafito .dsp{text-shadow:none!important}.amb-aurora .bar,.amb-grafito .bar{box-shadow:none!important}
.amb-aurora .panel,.amb-grafito .panel{box-shadow:0 1px 2px rgba(30,27,75,.04),0 10px 30px rgba(30,27,75,.07)}
.amb-aurora .ia-borde,.amb-grafito .ia-borde{box-shadow:0 10px 30px rgba(30,27,75,.08)}
.tam-g{zoom:1.12}
/* Tipografías: Space Grotesk (cifras y títulos), Inter (texto), JetBrains Mono (códigos), con respaldo del sistema. */
:root{--f-dsp:'Space Grotesk',system-ui,sans-serif;--f-txt:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--f-mono:'JetBrains Mono',ui-monospace,Consolas,monospace;--on-ac:#06222A}
html.amb-aurora,html.amb-grafito{--on-ac:#FFFFFF;color-scheme:light}
html.amb-noche,html.amb-bosque{color-scheme:dark}
/* Alias: las variables viejas de app.css apuntan a las nuevas. */
html{--fondo:var(--bg);--tarjeta:var(--p1);--texto:var(--tx);--suave:var(--mu);--borde:var(--bd2);--acento:var(--cy);--acento-txt:var(--on-ac);--aviso:var(--ro);--alerta:var(--h0);--alerta-borde:var(--am);--hover:var(--hov);--foco:var(--az);
--c-pend:var(--h0);--t-pend:var(--tx2);--c-curso:color-mix(in srgb,var(--az) 18%,transparent);--t-curso:var(--az);--c-esp:color-mix(in srgb,var(--am) 18%,transparent);--t-esp:var(--am);--c-hecha:color-mix(in srgb,var(--ve) 18%,transparent);--t-hecha:var(--ve);--c-desc:var(--h0);--t-desc:var(--mu);
--c-manual:color-mix(in srgb,var(--vi) 18%,transparent);--t-manual:var(--vi);--c-asist:color-mix(in srgb,var(--cy) 18%,transparent);--t-asist:var(--cy);--c-fab:color-mix(in srgb,var(--ro) 18%,transparent);--t-fab:var(--ro);--c-auto:color-mix(in srgb,var(--ve) 18%,transparent);--t-auto:var(--ve);
--ok:var(--ve);--atencion:var(--am);--riesgo:var(--na);--alerta-roja:var(--ro);--sin:var(--mu);--info:var(--az)}
/* Componentes base del prototipo. */
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}70%{box-shadow:0 0 0 9px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
@keyframes barrido{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.vivo{display:inline-block;width:8px;height:8px;border-radius:50%;background:#34D399;animation:latido 1.8s infinite}
.panel{background:linear-gradient(180deg,var(--p1),var(--p2));border:1px solid var(--bd);border-radius:24px;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.kpi{padding:24px 24px 20px;display:flex;flex-direction:column;gap:10px;min-width:0;text-decoration:none;color:var(--tx);transition:border-color .2s,transform .2s}
.kpi:hover{border-color:var(--bd2);transform:translateY(-2px)}
.lbl{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mu)}
.dsp{font-family:var(--f-dsp);font-variant-numeric:tabular-nums}
.bar{flex:1;border-radius:6px 6px 2px 2px;cursor:pointer;min-height:4px;transition:opacity .15s}
.bar:hover,.bar:focus{outline:2px solid var(--tx);outline-offset:2px}
.story{font-size:14px;color:var(--tx2);background:var(--sb);border:1px solid var(--sbd);border-radius:10px;padding:9px 11px;line-height:1.5;min-height:40px}
.navl{font-size:15px;font-weight:500;color:var(--tx3);text-decoration:none;padding:11px 16px;border-radius:12px}
.navl:hover{background:var(--hov);color:var(--tx)}
.seg{font:inherit;font-size:14px;border:0;background:transparent;padding:10px 16px;min-height:44px;border-radius:10px;color:var(--tx3);cursor:pointer}
.seg[aria-pressed=true]{background:var(--nav-on);color:var(--tx)}
.heat{height:26px;border-radius:5px;cursor:pointer;background:var(--h0)}
.heat:hover,.heat:focus{outline:2px solid var(--tx)}
.ia-borde{background:linear-gradient(90deg,#22D3EE,#A78BFA,#34D399,#22D3EE);background-size:200% 100%;animation:barrido 6s linear infinite;padding:1px;border-radius:19px}
.btn{font:inherit;font-size:14.5px;font-weight:600;border-radius:12px;padding:12px 20px;min-height:44px;cursor:pointer}
/* Semáforo único (documentacion/SEMAFORO.md): el color sale de --sem. */
.sem-ok{--sem:var(--ve)}.sem-atencion{--sem:var(--am)}.sem-riesgo{--sem:var(--na)}.sem-alerta{--sem:var(--ro)}.sem-sin{--sem:var(--mu)}
/* Barra, selector de ambiente y tarjeta de historia. */
body .barra{background:var(--hd);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);position:relative}
.barra-herramientas{display:flex;gap:8px;align-items:center}
button.amb-btn{background:var(--ch);color:var(--tx);border:1px solid var(--bd2);border-radius:10px;font-weight:500;padding:4px 12px;min-height:44px;min-width:44px}
#amb-panel{position:absolute;right:16px;top:100%;z-index:70;display:flex;gap:6px;padding:12px;margin-top:6px;background:var(--ia);border:1px solid var(--bd2);border-radius:16px;max-width:calc(100vw - 16px);flex-wrap:wrap}
#amb-panel[hidden]{display:none}
button.selamb{display:flex;flex-direction:column;gap:6px;align-items:center;border:2px solid transparent;background:transparent;border-radius:16px;padding:6px;color:var(--tx);font-size:13px;font-weight:600;min-height:44px}
button.selamb:hover{background:var(--hov)}
button.selamb[aria-pressed=true]{border-color:var(--cy)}
.selamb-muestra{display:block;width:64px;height:40px;border-radius:10px;border:1px solid var(--bd2)}
.historia-tarjeta{position:fixed;z-index:80;width:max-content;max-width:min(320px,calc(100vw - 16px));background:var(--ia);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.historia-tarjeta[hidden]{display:none}
.historia-tarjeta strong{display:block;color:var(--tx)}
.historia-tarjeta a{display:inline-block;margin-top:4px}
[data-historia]{cursor:pointer}
body dialog.ventana,body .mas-cuerpo{background:var(--ia)}
.punto-proy{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:baseline}
/* Panel lateral reutilizable. */
.panel-velo{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.45)}
.panel-velo[hidden],.panel-lateral[hidden]{display:none}
.panel-lateral{position:fixed;top:0;right:0;bottom:0;z-index:100;width:min(560px,100vw);display:flex;flex-direction:column;background:var(--ia);border-left:1px solid var(--bd2);box-shadow:-10px 0 30px rgba(0,0,0,.25)}
.panel-cab{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--bd)}
.panel-cab strong{flex:1 1 140px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel-cab a.amb-btn{display:inline-flex;align-items:center;text-decoration:none}
.panel-cuerpo{flex:1;overflow:auto;padding:12px 16px;outline:none}
/* Sin animaciones si la persona lo pide. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}