:root{
  --bg:#05070a; --line:#26323f; --ink:#d7e4f0; --mute:#7f93a6; --amber:#ffb020; --green:#3ddc84; --cyan:#4fd1ff; --red:#ff4d4d;
  --fl:'Barlow Condensed','B612',sans-serif; --fm:'B612 Mono',ui-monospace,monospace; --fb:'B612',system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);font-family:var(--fb);overscroll-behavior:none}
body{display:flex;flex-direction:column;height:100dvh;overflow:hidden;-webkit-user-select:none;user-select:none;
  background:radial-gradient(1000px 500px at 10% -10%,#111c28 0,transparent 60%),var(--bg);
  padding:0 max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;touch-action:manipulation}
svg{touch-action:manipulation}
.rot{display:none}

/* barra superior (todo en una línea) */
.top{flex:none;display:flex;align-items:center;gap:10px;padding:6px 0;width:100%;min-height:46px}
.brand{display:flex;align-items:baseline;gap:7px}
.brand b{font:900 28px/1 'Big Shoulders Display',var(--fl);letter-spacing:.02em;color:var(--cyan)}
.brand span{font:700 13px var(--fl);letter-spacing:.3em;color:var(--mute)}
.tabs{display:flex;gap:4px}
.tab{font:700 13px var(--fl);letter-spacing:.12em;padding:5px 11px;border:1px solid var(--line);border-radius:6px;color:var(--mute)}
.tab.on{color:#05070a;background:var(--cyan);border-color:var(--cyan)}
.tab:disabled{opacity:.45}
.hint{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:500 13px var(--fb);padding:6px 10px;border-left:3px solid var(--amber);background:linear-gradient(90deg,rgba(255,176,32,.10),transparent 80%)}
.tools{display:flex;gap:6px;align-items:center}
.seg{display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.seg button{padding:0 11px;height:34px;font:600 12px var(--fl);letter-spacing:.08em;color:var(--mute);text-transform:uppercase}
.seg button.on{background:#223142;color:var(--ink)}
.ico{min-width:38px;height:36px;border:1px solid var(--line);border-radius:7px;color:var(--mute);font-size:16px}
.ico.txt{padding:0 13px;font:700 13px var(--fl);letter-spacing:.12em;text-transform:uppercase;color:var(--amber);border-color:#5a4210}
.ico.on{color:var(--cyan)}

/* pantalla completa en horizontal: techo + esquema | emergencia + mandos + ECAM */
.app{flex:1;min-height:0;display:grid;gap:8px;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr)}
.left{display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;min-width:0;min-height:0}
.right{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0}
.scroll{min-width:0}
.oh svg,.emer svg{display:block;width:100%;height:auto}
.a-sch{position:relative;min-height:0;min-width:0}
.schwrap{height:100%;background:#05080c;border-radius:10px;border:1px solid #1a2531;padding:2px}
.schwrap svg{display:block;width:100%;height:100%}
.emer{flex:none}
.ecam{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px}
.ewdw{position:relative;flex:0 1 30%;min-height:84px}
.ewd{height:100%;overflow:auto}
.sd{flex:1;min-height:0}.sd svg{display:block;width:100%;height:100%}

/* techo (SVG) */
.sk{font-family:var(--fl);font-weight:700;font-size:15px;letter-spacing:.04em;fill:#f4f8fb;pointer-events:none}
.skb{fill:none;stroke:#f4f8fb;stroke-width:1.8}
.ml{fill:none;stroke:#f4f8fb;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ma{fill:#f4f8fb}
.win rect{fill:#0d1216;stroke:#222b33;stroke-width:1}
.win text{font-family:var(--fb);font-weight:700;font-size:11.5px;fill:#33404b;text-anchor:middle;letter-spacing:.04em;pointer-events:none}
.win.lit.fault rect{fill:#4a3206;stroke:#ffb020}.win.lit.fault text{fill:#ffc04d;filter:drop-shadow(0 0 4px #ffa000)}
.win.lit.off rect{fill:#2a3238;stroke:#aab6c0}.win.lit.off text{fill:#fff;filter:drop-shadow(0 0 3px #fff)}
.win.lit.on rect{fill:#0d2d4c;stroke:#4aa8ff}.win.lit.on text{fill:#7cc4ff;filter:drop-shadow(0 0 4px #3a9cff)}
.win.lit.avail rect{fill:#0b3320;stroke:#3ddc84}.win.lit.avail text{fill:#6dffae;filter:drop-shadow(0 0 4px #3dff8a)}
.pbs{cursor:pointer}
.pbs.press .bez,.pbs.press .cap{transform:translateY(1.5px)}
.gd{transform-box:fill-box;transform-origin:50% 0;transition:transform .28s cubic-bezier(.3,1.5,.5,1)}
.gd.open{transform:translateY(-20px) scaleY(.26)}
.dsp{font-family:var(--fm);font-weight:700;font-size:30px;fill:#ff8a1a;text-anchor:middle;filter:drop-shadow(0 0 5px rgba(255,138,26,.6))}
.dsp.dim{fill:#3a2208;filter:none}
.dsp-u{font-family:var(--fm);font-size:13px;fill:#ff8a1a}

/* mandos de tierra */
.strip{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;padding:8px 10px;border:1px solid #1d2a38;border-radius:12px;background:linear-gradient(180deg,#111a23,#0c1219)}
.grp{display:flex;align-items:center;gap:6px;min-width:0}
.grp>.lab{font:600 11px var(--fl);letter-spacing:.14em;color:var(--mute);min-width:44px}
.seg2{display:flex;border:1px solid #2c3d4f;border-radius:9px;overflow:hidden;flex:none}
.seg2 button{padding:0 12px;min-height:38px;font:700 13px var(--fl);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);background:#0e151c}
.seg2 button.on{background:#12402c;color:var(--green)}
.seg2 button.on.bad{background:#4a2a05;color:var(--amber)}
.seg2 button.sel{background:#223142;color:var(--ink)}
.ro{font:700 12px var(--fm);color:var(--green);white-space:nowrap}
.ro small{color:var(--cyan)}.ro.w{color:var(--amber)}.ro.d{color:#4a5968}

/* ECAM */
.masters{position:absolute;right:8px;top:8px;display:flex;gap:6px;z-index:3}
.master{display:flex;flex-direction:column;align-items:center;padding:3px 7px;border-radius:7px;font:700 8px var(--fl);letter-spacing:.16em;background:#12171d;border:1px solid #232d38;color:#2b3641}
.master b{font-size:12px;letter-spacing:.1em}
.mw.flash{background:#3d0a0a;border-color:var(--red);color:var(--red);animation:fl .7s steps(2) infinite;box-shadow:0 0 14px rgba(255,77,77,.5)}
.mc.flash{background:#3a2a05;border-color:var(--amber);color:var(--amber);animation:fl .7s steps(2) infinite;box-shadow:0 0 14px rgba(255,176,32,.5)}
@keyframes fl{50%{opacity:.35}}
.du{position:relative;background:#000;border-radius:10px;border:6px solid #1b222a;box-shadow:inset 0 0 40px rgba(30,60,90,.25),0 14px 30px rgba(0,0,0,.6);overflow:hidden;font-family:var(--fm)}
.du::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.055),transparent 35%),repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px)}
.du.off>*{opacity:0}
.du.boot>*{animation:boot .7s steps(7)}
@keyframes boot{0%,30%{opacity:0}35%{opacity:.8}45%{opacity:.1}60%,100%{opacity:1}}
.ewd{padding:8px 56px 8px 12px;font-size:clamp(11px,1.25vw,14px);line-height:1.38}
.ewd .m{margin:0}.ewd .red{color:var(--red);font-weight:700}.ewd .amber{color:var(--amber);font-weight:700}
.ewd .act{color:var(--cyan);padding-left:14px}.ewd .memo{color:var(--green)}.ewd .sep{border-top:1px solid #333;margin:6px 0}
.sd text{font-family:var(--fm)}

/* esquema */
.schwrap text{font-family:var(--fl);fill:#cfdbe6;font-size:15px;letter-spacing:.05em;pointer-events:none}
.schwrap .small{font-size:12px;fill:#8fa3b5}.schwrap .tiny{font-size:10.5px;fill:#6f8296}
.w{fill:none;stroke:#34404d;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.w.ac.on{stroke:#55b8ff;filter:drop-shadow(0 0 3px rgba(85,184,255,.7))}
.w.dc.on{stroke:#ff9a3c;filter:drop-shadow(0 0 3px rgba(255,154,60,.7))}
.w.fl.on{stroke-dasharray:9 7;animation:flow 1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-16}}
.ct .tm{fill:#0a0f14;stroke:#6a7a8a;stroke-width:1.8}
.ct .lv{stroke:#6a7a8a;stroke-width:3;stroke-linecap:round}
.ct.closed .lv{stroke:#fff}.ct.closed .tm{fill:#fff;stroke:#fff}
.dash{fill:none;stroke:#4a5968;stroke-width:2;stroke-dasharray:6 5}
.gnd{fill:none;stroke:#8fa3b5;stroke-width:2}
.plates{fill:none;stroke:#ff9a3c;stroke-width:2.4;stroke-linecap:round}
.eng{fill:#141d27;stroke:#4a5968;stroke-width:2.2}
.bus rect{fill:#18222d;stroke:#34404d;stroke-width:2}
.bus.ac.on rect{fill:url(#gAC);stroke:#55b8ff;filter:drop-shadow(0 0 6px rgba(85,184,255,.5))}
.bus.dc.on rect{fill:url(#gDC);stroke:#ff9a3c;filter:drop-shadow(0 0 6px rgba(255,154,60,.5))}
.nb rect,.nb circle{fill:#141d27;stroke:#4a5968;stroke-width:2.2}
.nb.on rect,.nb.on circle{stroke:#3ddc84;fill:#0d2a1c;filter:drop-shadow(0 0 6px rgba(61,220,132,.5))}
.nb.on.dcn rect{stroke:#ff9a3c;fill:#3a2008;filter:drop-shadow(0 0 6px rgba(255,154,60,.5))}
.clk{cursor:pointer}
.info{position:absolute;left:10px;bottom:10px;max-width:58%;padding:7px 11px;border-left:3px solid var(--cyan);border-radius:0 8px 8px 0;background:rgba(8,14,20,.88);backdrop-filter:blur(3px)}
.info b{font:700 13px var(--fl);letter-spacing:.14em;color:var(--cyan);text-transform:uppercase}
.info p{margin:2px 0 0;font-size:12px;line-height:1.4;color:#c3d2df}

/* cajón de fallos */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);background:#0c1219;border-left:1px solid #26323f;padding:16px;overflow:auto;z-index:20;
  transform:translateX(105%);transition:transform .25s;box-shadow:-20px 0 60px rgba(0,0,0,.6)}
.drawer.open{transform:none}
.dhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.dhead b{font:700 14px var(--fl);letter-spacing:.24em;color:var(--mute)}
.drawer h3{margin:16px 0 8px;font:600 12px var(--fl);letter-spacing:.2em;color:var(--mute);text-transform:uppercase}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:10px 15px;border:1px solid #2c3d4f;border-radius:999px;font:600 13px var(--fl);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.chip.on{background:#3a0f0f;border-color:var(--red);color:var(--red);box-shadow:0 0 14px rgba(255,77,77,.3)}
.scen{display:flex;flex-direction:column;gap:8px}
.btn{width:100%;padding:12px;border:1px solid #2c3d4f;border-radius:8px;font:700 14px var(--fl);letter-spacing:.12em;text-transform:uppercase;background:#111a23;text-align:left}
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,30px);opacity:0;pointer-events:none;padding:11px 18px;border-radius:9px;background:#1a232d;border:1px solid var(--amber);color:var(--ink);font:500 14px var(--fb);transition:all .25s;max-width:90vw;z-index:30}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* pantallas muy bajas (móvil en horizontal): comprimir la barra */
@media (max-height:520px){.right{overflow-y:auto}.sd{flex:none;height:300px}.ewdw{flex:none;height:110px}.top{min-height:38px;padding:3px 0}.brand b{font-size:22px}.hint{display:none}.tab{padding:3px 9px}.seg button{height:30px}.ico{height:32px}}

/* móvil en vertical: no cabe todo, se permite bajar y deslizar el techo y el esquema */
@media (orientation:portrait) and (max-width:900px){
  body{height:auto;overflow:auto}
  .rot{display:block;margin:0 0 8px;padding:8px 12px;border-left:3px solid var(--cyan);font:500 13px var(--fb);background:rgba(79,209,255,.08)}
  .top{flex-wrap:wrap}.hint{order:9;flex-basis:100%;white-space:normal}
  .app{display:flex;flex-direction:column}
  .left{display:flex;flex-direction:column}
  .a-oh{overflow-x:auto}.oh svg{min-width:760px}
  .a-sch{overflow-x:auto}.schwrap{height:auto}.schwrap svg{min-width:700px;height:auto}
  .info{position:static;max-width:none;margin-top:8px}
  .ecam{display:flex}.ewdw{flex:none;min-height:120px}.sd{flex:none}.sd svg{height:auto}
  .strip{grid-template-columns:1fr}
}

.sg{fill:#2a1606}.sg.on{fill:#ff8a1a;filter:drop-shadow(0 0 3px rgba(255,138,26,.75))}
.sgp{fill:#2a1606}.sgp.on{fill:#ff8a1a;filter:drop-shadow(0 0 3px rgba(255,138,26,.75))}