/* Simulaciones · hoja de estilos propia y autocontenida.
   Define sus propias variables para poder abrirse de forma aislada. */
:root{--papel:#EDECE8;--noche:#0D0E0D;--hondo:#070807;--linea:#262922;--linea2:#171A15;
--oro:#D8B87E;--alarma:#D4574A;--alerta:#DFAA46;--verde:#7FA277;--agua:#7FA9B2;
--mono:"IBM Plex Mono",ui-monospace,monospace;--display:"Archivo",system-ui,sans-serif;--prosa:"Newsreader",Georgia,serif}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{background:var(--noche);color:var(--papel);font-family:var(--prosa);font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.env{padding:24px 16px 56px;max-width:1440px;margin:0 auto}
@media(min-width:1024px){.env{padding:64px 54px 88px}}
.rotulo{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#6B6F66}
.rotulo b{color:var(--oro);font-weight:500}
h1{font-family:var(--display);font-weight:500;font-size:clamp(25px,7vw,48px);line-height:1.04;letter-spacing:-.028em;margin:13px 0 0;max-width:18ch}
.intro{font-size:clamp(15px,4vw,18px);line-height:1.58;color:#9DA198;max-width:56ch;margin:15px 0 0}
.pestanas{display:flex;gap:6px;margin:24px -16px 14px;padding:0 16px 2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pestanas::-webkit-scrollbar{display:none}
@media(min-width:1024px){.pestanas{margin:32px 0 18px;padding:0;flex-wrap:wrap;overflow:visible}}
.tab{flex:0 0 auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;background:transparent;
color:#83887E;border:1px solid var(--linea);padding:11px 14px;cursor:pointer;transition:.3s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.tab[aria-selected="true"]{background:var(--oro);border-color:var(--oro);color:#0D0E0D}
.marco{position:relative;border:1px solid var(--linea);background:var(--hondo);overflow:hidden}
.marco svg{width:100%;height:auto;display:block}
.hud{position:absolute;font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:#8A8F86;pointer-events:none}
.hud-tl{top:9px;left:10px;display:flex;align-items:center;gap:6px}.hud-tr{top:9px;right:10px}
.hud-bl{bottom:9px;left:10px;padding:4px 8px;border:1px solid var(--linea);transition:.4s}
.hud-bl.n2{border-color:var(--alerta);color:var(--alerta)}
.hud-bl.n3{border-color:var(--alarma);color:var(--alarma);background:rgba(212,87,74,.12)}
.hud-bl.n4{border-color:var(--verde);color:var(--verde)}
.pt{width:6px;height:6px;border-radius:50%;background:var(--alarma)}
.zona{position:absolute;top:9px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:8.5px;
letter-spacing:.2em;text-transform:uppercase;color:#6B6F66;pointer-events:none;transition:opacity .5s}
.movil{position:absolute;right:10px;bottom:10px;width:min(232px,64%);border:1px solid #3A3D34;background:rgba(13,14,13,.96);
backdrop-filter:blur(8px);padding:10px 11px;opacity:0;pointer-events:none}
.movil.rojo{border-color:var(--alarma);box-shadow:0 0 24px rgba(212,87,74,.28)}
.movil .cab{display:flex;justify-content:space-between;font-family:var(--mono);font-size:7.5px;letter-spacing:.14em;
text-transform:uppercase;color:#6B6F66;margin-bottom:6px}
.movil .cab i{font-style:normal;color:var(--oro)}.movil.rojo .cab i{color:var(--alarma)}
.movil h4{font-family:var(--display);font-size:12px;font-weight:500;margin:0 0 3px;color:#E4E6E0}
.movil p{font-family:var(--mono);font-size:8.5px;line-height:1.5;color:#90968C;margin:0}
.movil .acc{display:flex;gap:5px;margin-top:8px}
.movil .acc b{flex:1;font-family:var(--mono);font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;text-align:center;
padding:5px 0;border:1px solid #33362E;color:#83887E;font-weight:400}
.movil .acc b.p{background:var(--oro);border-color:var(--oro);color:#0D0E0D}
.movil.rojo .acc b.p{background:var(--alarma);border-color:var(--alarma);color:#fff}
.obra{fill:none;stroke:#D2CFC6;stroke-width:1.15;vector-effect:non-scaling-stroke}
.fino{fill:none;stroke:#565A51;stroke-width:1;vector-effect:non-scaling-stroke}
.tenue{fill:none;stroke:#33362F;stroke-width:1;vector-effect:non-scaling-stroke}
.masa{fill:#111210}.vidrio{fill:#0A0E0C}
.mu{fill:#0C0D0B;stroke:#3E4239;stroke-width:.95;vector-effect:non-scaling-stroke}
.mu2{fill:none;stroke:#4E5248;stroke-width:.9;vector-effect:non-scaling-stroke}
.lama{fill:#23251F}.lama-l{stroke:#34372E;stroke-width:.8;vector-effect:non-scaling-stroke}
.persona{fill:#050605;stroke:#4A4E44;stroke-width:.9;vector-effect:non-scaling-stroke}
.carcasa{fill:#191B17;stroke:#8F948A;stroke-width:1;vector-effect:non-scaling-stroke}
.cono{fill:#D8B87E}.gota{stroke:#8AA0B0;stroke-width:1.1;stroke-linecap:round}
.mono{font-family:IBM Plex Mono;font-size:8.4px;letter-spacing:1px}
.panel{border:1px solid var(--linea);border-top:0;padding:17px 15px 19px}
@media(min-width:1024px){.cuerpo{display:grid;grid-template-columns:1.85fr 1fr}.panel{border-top:1px solid var(--linea);border-left:0;padding:25px}}
.panel h2{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#6B6F66;margin:0;font-weight:400}
.fase-n{font-family:var(--display);font-size:clamp(17px,5vw,23px);font-weight:500;letter-spacing:-.02em;margin:11px 0 6px;transition:color .4s}
.fase-n.peligro{color:var(--alarma)}.fase-n.seguro{color:var(--verde)}
.fase-d{font-size:14.5px;line-height:1.55;color:#9DA198;margin:0 0 15px;min-height:4.2em}
.avisos{display:flex;flex-direction:column;gap:6px;margin-bottom:13px;min-height:38px}
.aviso{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--linea);padding:8px 10px}
.aviso b{font-family:var(--display);font-size:11.5px;font-weight:500;color:#D4D6D0}
.aviso span{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.aviso.ok span{color:var(--verde)}.aviso.esp span{color:var(--alerta)}.aviso.al span{color:var(--alarma)}.aviso.inf span{color:var(--agua)}
.aviso.al{border-color:rgba(212,87,74,.4)}
.log{list-style:none;margin:0;padding:13px 0 0;border-top:1px solid var(--linea);display:flex;flex-direction:column;
max-height:170px;overflow-y:auto;-webkit-overflow-scrolling:touch}
@media(min-width:1024px){.log{max-height:228px}}
.log li{display:flex;gap:9px;padding:6px 0;border-bottom:1px solid var(--linea2)}
.log .h{font-family:var(--mono);font-size:8.5px;color:var(--oro);flex:0 0 44px;padding-top:2px}
.log .t{font-family:var(--mono);font-size:9.5px;line-height:1.5;color:#AAAFA6}
.log .t em{font-style:normal;color:#6B6F66}
.log li.rojo .h{color:var(--alarma)}.log li.verde .h{color:var(--verde)}
.nota{padding-top:13px;margin:13px 0 0;border-top:1px solid var(--linea);font-size:13.5px;line-height:1.5;color:#71766D;font-style:italic}
.barra{display:flex;gap:3px;margin:13px 0 0}
.barra span{flex:1;height:2px;background:var(--linea2);position:relative;overflow:hidden}
.barra span i{position:absolute;top:0;left:0;bottom:0;width:0;background:var(--oro)}
.mandos{display:flex;gap:7px;margin-top:13px;flex-wrap:wrap}
.btn{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;background:transparent;color:#83887E;
border:1px solid var(--linea);padding:10px 14px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn:active{border-color:var(--oro);color:var(--oro)}
#err{display:none;margin:15px 0;padding:12px;border:1px solid var(--alarma);font-family:var(--mono);font-size:10px;color:#E3A79E}
.cierre{margin-top:32px;padding-top:22px;border-top:1px solid var(--linea);display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:end}
.cierre p{font-family:var(--display);font-weight:500;font-size:clamp(18px,5vw,27px);line-height:1.16;letter-spacing:-.02em;margin:0;max-width:24ch}

.cab-sup{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--linea)}
h1 em{font-style:normal;color:#6F746A}
.ficha{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--linea);
  border:1px solid var(--linea);margin-top:26px}
@media(min-width:700px){.ficha{grid-template-columns:repeat(4,1fr)}}
.ficha div{background:var(--noche);padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.ficha b{font-family:var(--display);font-size:clamp(20px,4.4vw,26px);font-weight:500;letter-spacing:-.02em;color:#E4E6E0}
.ficha span{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:#5E6259}
.marco::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 90px rgba(0,0,0,.55)}
.tab:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.pestanas{position:relative}
.pie-mod{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:14px}
.pie-mod span{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:#4E5248}

.navbar{position:sticky;top:0;z-index:60;display:flex;justify-content:space-between;align-items:center;
  gap:16px;padding:0 16px;height:54px;background:rgba(13,14,13,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea)}
@media(min-width:1024px){.navbar{padding:0 54px}}
.navbar .marca{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--papel);text-decoration:none;display:flex;align-items:baseline;gap:12px}
.navbar .marca span{font-family:var(--mono);font-size:8.5px;letter-spacing:.15em;color:#5E6259;font-weight:400;
  border-left:1px solid var(--linea);padding-left:12px;display:none}
@media(min-width:760px){.navbar .marca span{display:inline}}
.navbar .volver{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:#6B6F66;text-decoration:none;transition:color .25s}
.navbar .volver:hover{color:var(--oro)}
.env{padding-top:18px}