:root{--bg:#0a1f26;--pan:#0f2c35;--pan2:#143a45;--lin:#2c6273;--tx:#eaf3f6;--tx2:#a9c6d0;--acc:#ffc46b;--foco:#8fe3ff}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--tx);font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
#app{display:grid;grid-template-rows:auto auto minmax(0,1fr);height:100vh;height:100dvh}
header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 16px;border-bottom:1px solid var(--lin)}
h1{margin:0;font-size:20px;font-weight:750;display:inline}header small{color:var(--tx2);margin-left:8px}.marca{color:var(--tx2);font-size:13px;white-space:nowrap}
#sel{display:flex;gap:6px;padding:8px 16px;overflow-x:auto;border-bottom:1px solid var(--lin)}
button{font:inherit;color:var(--tx);background:var(--pan2);border:1px solid var(--lin);border-radius:8px;padding:7px 11px;min-height:36px;cursor:pointer}
button:hover{background:#1b4a57}button[aria-pressed=true],button[aria-selected=true]{background:var(--acc);border-color:var(--acc);color:#1a1206;font-weight:650}
:focus-visible{outline:3px solid var(--foco);outline-offset:2px}
#sel button{white-space:nowrap;flex:none}
main{display:grid;grid-template-columns:minmax(0,1fr) 340px;min-height:0}
#esc{position:relative;min-height:0;min-width:0;overflow:hidden;background:#0d2b35}
#lienzo,#capa{position:absolute;inset:0;width:100%;height:100%;display:block}#capa{pointer-events:none}
#hs{position:absolute;inset:0;pointer-events:none}
.hs{position:absolute;width:26px;height:26px;min-height:0;margin:-13px 0 0 -13px;padding:0;border-radius:50%;background:rgba(11,38,48,.55);border:2.5px solid #fff;pointer-events:auto}
.hs::after{content:"";position:absolute;inset:6px;border-radius:50%;background:#fff}.hs[aria-expanded=true]{border-color:var(--acc)}.hs[aria-expanded=true]::after{background:var(--acc)}
.tag{position:absolute;padding:3px 8px;border-radius:7px;background:rgba(11,38,48,.93);border:1.5px solid #dfeaee;font-size:13px;font-weight:600;white-space:nowrap;pointer-events:none}
#avi{position:absolute;left:50%;transform:translateX(-50%);top:8px;max-width:calc(100% - 20px);padding:5px 10px;border-radius:8px;background:rgba(11,38,48,.94);border:1px solid var(--acc);font-size:14px;font-weight:650;pointer-events:none;text-align:center}
aside{overflow-y:auto;padding:12px 14px;background:var(--pan);border-left:1px solid var(--lin);display:flex;flex-direction:column;gap:10px}
h2{margin:0;font-size:17px}h3{margin:0 0 3px;font-size:13px;color:var(--tx2);font-weight:600}
.fila{display:flex;flex-wrap:wrap;gap:6px}.fila button{flex:1 1 auto}
#ficha{background:var(--pan2);border:1px solid var(--acc);border-radius:10px;padding:9px 11px;position:relative}#ficha[hidden]{display:none}#ficha h4{margin:0 26px 3px 0;color:var(--acc);font-size:15px}#ficha p{margin:0}
#ficha button{position:absolute;right:6px;top:6px;min-height:28px;padding:1px 8px}
#res{margin:0}#lim{margin:0;color:var(--tx2);font-size:13px}#fue{margin:0;color:var(--tx2);font-size:12px}
input[type=range]{width:100%;accent-color:var(--acc);min-height:28px}
dialog{max-width:520px;background:var(--pan);color:var(--tx);border:1px solid var(--lin);border-radius:12px}dialog::backdrop{background:rgba(0,0,0,.6)}dialog ul{padding-left:18px;margin:8px 0}
@media (max-width:820px){#app{height:auto;min-height:100dvh}header{padding:6px 12px}h1{font-size:16px}header small{display:none}#sel{padding:6px 12px}
main{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto}#esc{height:52vh;height:52dvh}aside{border-left:0;border-top:1px solid var(--lin);overflow:visible}.tag{font-size:11.5px;padding:2px 5px}#avi{top:auto;bottom:6px;font-size:12.5px}}
/* V2 */
#avi{top:auto;bottom:8px}
#barra{position:absolute;left:8px;top:8px;display:flex;align-items:center;gap:8px;padding:3px 8px 3px 3px;border-radius:9px;background:rgba(11,38,48,.93);border:1px solid var(--lin);max-width:calc(100% - 16px);z-index:2}#barra[hidden]{display:none}
#barra button{min-height:32px;padding:3px 9px;white-space:nowrap}#mig{font-size:13px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#loc{position:relative;flex:none;width:92px;height:8px;border-radius:4px;background:#2c6273}#locb{position:absolute;top:-2px;bottom:-2px;background:var(--acc);border-radius:3px}
#nav button{flex:1 1 46%}#nav button:disabled,#bc:disabled,#acer button:disabled{opacity:.55;cursor:not-allowed}
#ficha .chips{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 5px}.chips span{font-size:12px;padding:1px 7px;border-radius:9px;background:#0b2630;border:1px solid var(--lin)}#fm{color:var(--acc);border-color:var(--acc)!important}
#fq{margin-bottom:4px}#fo{color:var(--tx2);font-size:13px}#fi{font-size:13px;margin-top:5px}#fi button{position:static;min-height:30px;margin-left:4px}#fo[hidden],#fi[hidden]{display:none}
#ops{display:flex;flex-direction:column;gap:8px}#ops>div[hidden],#compo[hidden],#movi[hidden],#cn[hidden]{display:none}#cn{margin:0;color:var(--tx2);font-size:13px}
#lista{display:flex;flex-direction:column;gap:4px;margin-top:6px}#lista button{text-align:left;min-height:34px;padding:4px 10px}
.oculta{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
button:disabled:hover{background:var(--pan2)}
@media (max-width:820px){#barra button{font-size:13px}#mig{display:none}#loc{width:60px}#nav button{flex:1 1 46%;font-size:14px}}
/* V2 · Operación */
#oper{background:#0b2630;border:1px solid var(--lin);border-radius:10px;padding:9px 11px;display:flex;flex-direction:column;gap:7px}#oper[hidden],#osec[hidden],#mas[hidden],#nred[hidden]{display:none}#oper p{margin:0}
#oind{color:var(--acc);font-weight:700}#onota,#nred{color:var(--tx2);font-size:12.5px;margin:0}button:disabled{opacity:.55;cursor:not-allowed}.chk{display:flex;align-items:center;gap:7px;min-height:30px;font-size:14px}.chk input{width:18px;height:18px;accent-color:var(--acc)}
#ley{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px}#ley:empty{display:none}#ley i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:5px;vertical-align:-1px;border:1px solid #fff}
#mas{position:absolute;right:8px;top:8px;z-index:2;min-height:32px;padding:3px 9px;font-size:13px;background:rgba(11,38,48,.93)}
@media (max-width:820px){#mas{font-size:12px;padding:2px 7px}}
#capa text{paint-order:stroke;stroke:#06181f;stroke-width:3.5px;stroke-linejoin:round}
main>#avi{position:static;transform:none;max-width:none;width:100%;border-radius:0;border-width:1px 0;font-size:13px;padding:5px 12px;min-height:30px}
@media (max-width:820px){main{grid-template-rows:auto auto auto}}
#foco{position:absolute;left:8px;bottom:8px;z-index:2;display:flex;gap:4px;padding:3px;border-radius:10px;background:rgba(11,38,48,.93);border:1px solid var(--lin)}#foco[hidden]{display:none}#foco button{min-height:40px;min-width:40px;padding:3px 9px;font-size:13px}
@media (max-width:820px){.hs{width:40px;height:40px;margin:-20px 0 0 -20px;background:transparent;border:0}.hs::before{content:"";position:absolute;inset:7px;border-radius:50%;background:rgba(11,38,48,.55);border:2.5px solid #fff}.hs::after{inset:13px}.hs[aria-expanded=true]::before{border-color:var(--acc)}}
#foco:not([hidden])~#avi{bottom:58px}
/* V2 · Correcciones de operación: controles del paso juntos y escena útil. */
button[aria-disabled=true]{opacity:.55;cursor:not-allowed}button[aria-disabled=true]:hover{background:var(--pan2)}
#tran{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}#tran .fila{flex:1 1 170px}.velt{font-size:12.5px;color:var(--tx2);flex:none}#tran input[type=range]{flex:1 1 90px;width:auto;min-width:80px}#nred{flex:1 1 100%}
#ocor{font-size:13.5px;color:var(--acc)}#ocor[hidden]{display:none}#ocor button{min-height:30px;padding:2px 8px;margin-left:4px}
#onotad{font-size:12.5px;color:var(--tx2)}#onotad summary{cursor:pointer;min-height:24px}
.en-oper #res{display:none}
main>#foco{position:static;border-radius:0;border-width:1px 0 0;width:100%;justify-content:center;background:var(--pan)}main>#foco button{min-height:40px}
@media (max-width:820px){main{grid-template-rows:auto auto auto auto}.en-oper aside>#oper{order:-2}.en-mec aside>#movi{order:-2}.en-mec aside>#ficha{order:-1}.en-oper aside>#ficha{order:-1}.en-oper #oper>h3{display:none}.en-oper #osec{order:5}.en-oper #ley{order:6}.en-oper #onotad{order:7}.en-oper #ocor{order:4}}
/* Los botones del paso no se mueven entre pasos: aviso y barra de visores reservan su espacio. */
@media (max-width:820px){.en-oper main>#foco[hidden]{display:flex;visibility:hidden}.en-oper main>#avi{display:block!important;min-height:32px}}
@media (max-width:559px){.en-oper main>#avi{min-height:50px}}
@media (max-width:559px){.en-oper header,.en-mec header{display:none}.en-oper #esc,.en-mec #esc{height:44vh;height:44dvh}.embed-uno.embed .en-oper #esc{height:46dvh}}