/* Simulador nuevo (planif.js): todo dentro de #planif para no pisar los estilos del Tablero */
#planif{--bg:#06142a;--ink:#e9f0ff;--mut:#9fb2d4;--dim:#6c7fa3;--line:#22406b;--glass:rgba(8,20,42,.92);--teal:#00C9B1;--gold:#e8cf8a;--cap:#c084fc;--ok:#4ade80;--warn:#fbbf24;--bad:#f87171}
#planif *{box-sizing:border-box}
#planif{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:"Segoe UI",Inter,system-ui,sans-serif;overflow:hidden;font-size:13px}
#planif canvas.pz-map{position:fixed;inset:0;width:100vw;height:100vh;display:block}
#planif .mono{font-family:Consolas,"IBM Plex Mono",monospace}
#planif button{font:inherit;cursor:pointer}
#planif #pztop{position:fixed;left:12px;top:10px;right:416px;display:flex;align-items:center;gap:8px;z-index:6;flex-wrap:wrap}
#planif #pztop img{width:34px;height:34px}
#planif .grp{display:flex;align-items:center;gap:6px;background:var(--glass);border:1px solid var(--line);border-radius:10px;padding:5px 7px}
#planif .grp label{font-size:10px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
#planif .grp select,#planif .grp input{background:#0a1a36;border:1px solid #2c5590;color:#fff;border-radius:6px;height:28px;padding:0 6px;font:600 12.5px Consolas,monospace}
#planif .btn{height:30px;padding:0 11px;border-radius:7px;border:1px solid #2c5590;background:#0a1a36;color:#d8e6ff;font-weight:600;font-size:12.5px;white-space:nowrap}
#planif .btn:hover{border-color:#5aa2ff;color:#fff}
#planif .btn.pri{background:var(--teal);border-color:var(--teal);color:#04121f}
#planif .btn.on{background:#13355f;border-color:#5aa2ff;color:#fff}
#planif .btn.sm{height:26px;padding:0 8px;font-size:12px}
#planif .btn.del{border-color:#6b2a2a;color:#ffb3a8}
#planif .mode{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--glass)}
#planif .mode button{height:36px;padding:0 16px;border:0;background:transparent;color:var(--mut);font-weight:700;font-size:13px}
#planif .mode button.on{background:#13355f;color:#fff;box-shadow:inset 0 -2px 0 var(--teal)}
#planif #pzhint{position:fixed;left:calc((100vw - 404px)/2);transform:translateX(-50%);top:64px;z-index:6;background:#0d2a52f0;border:1px solid #5aa2ff;border-radius:999px;padding:8px 16px;font-weight:600;display:none;white-space:nowrap;box-shadow:0 10px 30px #000a}
#planif #pzhint b{color:var(--teal)}
#planif aside{position:fixed;right:10px;top:10px;bottom:10px;width:396px;background:var(--glass);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;z-index:5;box-shadow:0 20px 50px #000b}
#planif aside .bd{flex:1;overflow:auto;padding:12px}
#planif .sec{font:700 10px "Segoe UI",sans-serif;letter-spacing:.2em;color:var(--dim);text-transform:uppercase;margin:12px 2px 8px;display:flex;justify-content:space-between;align-items:center;gap:6px}
#planif .sec:first-child{margin-top:2px}
#planif .ac{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #17325a;border-radius:9px;margin-bottom:6px;background:#0c1d38;cursor:pointer}
#planif .ac:hover{border-color:#3a6aa8}
#planif .ac.sel{border-color:var(--c);box-shadow:0 0 0 1px var(--c) inset}
#planif .ac .dot{width:10px;height:10px;border-radius:50%;background:var(--c);flex:none;box-shadow:0 0 8px var(--c)}
#planif .ac b{font-size:13.5px}
#planif .ac .m{margin-left:auto;font:600 11px Consolas,monospace;color:var(--mut);text-align:right}
#planif .empty{border:1px dashed #2c5590;border-radius:10px;padding:16px;text-align:center;color:var(--mut);line-height:1.5}
#planif .f{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#planif .f label{display:flex;flex-direction:column;gap:4px;font-size:10.5px;color:var(--dim);letter-spacing:.05em}
#planif .f .w{grid-column:1/-1}
#planif .f input,#planif .f select{height:30px;background:#0a1a36;border:1px solid #2c5590;color:#fff;border-radius:6px;padding:0 8px;font:600 12.5px Consolas,monospace;width:100%}
#planif .f input[type=color]{padding:2px}
#planif .ck{display:flex!important;flex-direction:row!important;align-items:center;gap:6px;font-size:12px!important;color:var(--ink)!important}
#planif .legs{width:100%;border-collapse:collapse;font-size:12px}
#planif .legs th{font:700 9px "Segoe UI",sans-serif;letter-spacing:.12em;color:var(--dim);text-align:left;padding:4px 3px;border-bottom:1px solid #1d3a63}
#planif .legs td{padding:4px 3px;border-bottom:1px solid #12284a;vertical-align:middle}
#planif .legs tr.pt td{background:#0b1b35}
#planif .legs tr.sel td{background:#13305a}
#planif .legs .n{font:700 11px Consolas,monospace;color:var(--teal);width:18px}
#planif .legs input{width:52px;height:24px;background:#0a1a36;border:1px solid #2c5590;color:#fff;border-radius:5px;padding:0 4px;font:600 11.5px Consolas,monospace}
#planif .legs .c{font:600 11.5px Consolas,monospace;color:#cfdaf0;white-space:nowrap}
#planif .legs .act{font:700 10px Consolas,monospace;padding:1px 5px;border-radius:4px;background:#2e1a4a;color:#e0c3ff;white-space:nowrap}
#planif .legs .act.land{background:#123a26;color:#9ff5c4}
#planif .legs .act.wait{background:#3a2e12;color:#ffe08a}
#planif .legs .x{background:none;border:0;color:#7a8fb4;font-size:14px;padding:0 3px}
#planif .legs .x:hover{color:var(--bad)}
#planif .addpt{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
#planif .warn{margin-top:8px;padding:7px 9px;border-radius:8px;border:1px solid #6b4a12;background:#3a2e1233;color:#ffd58a;font-size:12px}
#planif .tot{margin-top:8px;font:600 12px Consolas,monospace;color:var(--mut);display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap}
#planif .fc{background:#0c1d38;border:1px solid #17325a;border-radius:10px;padding:9px 11px;margin-bottom:7px}
#planif .fc .r1{display:flex;align-items:center;gap:8px}
#planif .fc .dot{width:9px;height:9px;border-radius:50%;background:var(--c)}
#planif .fc .st{margin-left:auto;font-size:11px;padding:2px 8px;border-radius:999px;background:#16305a;color:#d9e6ff;white-space:nowrap}
#planif .fc .st.air{background:#0f3a5a;color:#9be7ff}
#planif .fc .st.cap{background:#2e1a4a;color:#e0c3ff}
#planif .fc .st.gnd{background:#1b2a40;color:#b9c8e2}
#planif .fc .bar{position:relative;height:12px;border-radius:4px;background:#081428;margin-top:7px;overflow:hidden;border:1px solid #1b355c}
#planif .fc .bar i{position:absolute;left:0;top:0;bottom:0}
#planif .fc .bar u{position:absolute;top:-1px;bottom:-1px;width:2px;background:#fff;opacity:.7}
#planif .fc .r2{display:flex;justify-content:space-between;margin-top:4px;font:600 11.5px Consolas,monospace;color:#cfdaf0}
#planif .ev{display:grid;grid-template-columns:44px 1fr;gap:6px;padding:4px 4px;border-radius:6px;font-size:12px;color:#cfdaf0;cursor:pointer}
#planif .ev:hover{background:#10264a}
#planif .ev b{font:700 11.5px Consolas,monospace;color:var(--gold)}
#planif .ev.past{opacity:.5}
#planif #pzclock{position:fixed;top:56px;left:calc((100vw - 404px)/2);transform:translateX(-50%);text-align:center;z-index:6;pointer-events:none;display:none}
#planif #pzclock .d{font:700 10.5px Consolas,monospace;letter-spacing:.28em;color:var(--gold)}
#planif #pzclock .t{font:800 46px Consolas,monospace;line-height:1;text-shadow:0 4px 24px #000}
#planif #pztl{position:fixed;left:12px;right:416px;bottom:10px;z-index:6;background:var(--glass);border:1px solid var(--line);border-radius:12px;padding:9px 12px;display:none;align-items:center;gap:10px}
#planif #pztl .bar{position:relative;flex:1;height:30px;cursor:pointer}
#planif #pztl .trk{position:absolute;left:0;right:0;top:13px;height:4px;border-radius:2px;background:#1d3a63}
#planif #pztl .fill{position:absolute;left:0;top:13px;height:4px;border-radius:2px;background:var(--teal)}
#planif #pztl .kn{position:absolute;top:6px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px #00c9b155}
#planif #pztl .tk{position:absolute;top:8px;width:2px;height:14px;margin-left:-1px;background:var(--c);opacity:.8}
#planif #pztl .hr{position:absolute;top:22px;font:600 9px Consolas,monospace;color:var(--dim);transform:translateX(-50%)}
#planif #pztl select{background:#0a1a36;border:1px solid #2c5590;color:#fff;border-radius:6px;height:30px}
#planif #pzctx{position:fixed;z-index:20;background:#0b1d3a;border:1px solid #3a6aa8;border-radius:9px;padding:5px;min-width:210px;box-shadow:0 14px 40px #000c;display:none}
#planif #pzctx .h{font:700 10px "Segoe UI",sans-serif;letter-spacing:.15em;color:var(--dim);text-transform:uppercase;padding:5px 9px 6px}
#planif #pzctx button{display:flex;width:100%;text-align:left;background:none;border:0;color:#e2ecff;padding:7px 9px;border-radius:6px;gap:8px;align-items:center;font-size:13px}
#planif #pzctx button:hover{background:#163a6a}
#planif #pzctx button.del{color:#ffb3a8}
#planif #pzctx hr{border:0;border-top:1px solid #22406b;margin:4px 2px}
#planif #pzpop{position:fixed;z-index:21;background:#0b1d3a;border:1px solid #5aa2ff;border-radius:10px;padding:12px;width:270px;box-shadow:0 14px 40px #000c;display:none}
#planif #pzpop h4{margin:0 0 8px;font-size:13.5px}
#planif #pzpop .row{display:flex;gap:6px;justify-content:flex-end;margin-top:10px}
#planif #pzpop .f input,#planif #pzpop .f select{height:30px}
#planif #pztoast{position:fixed;left:calc((100vw - 404px)/2);transform:translateX(-50%);bottom:24px;z-index:30;background:#0d2a52;border:1px solid #5aa2ff;border-radius:999px;padding:8px 16px;opacity:0;transition:opacity .3s;pointer-events:none}
#planif #pzmodal{position:fixed;inset:0;z-index:25;background:#000a;display:none;align-items:center;justify-content:center;padding:20px}
#planif #pzmodal .box{width:min(1180px,100%);max-height:92vh;overflow:auto;background:#0b1d3a;border:1px solid #3a6aa8;border-radius:12px;padding:16px 18px;box-shadow:0 20px 60px #000c}
#planif #pzmodal h3{margin:0 0 4px;font-size:17px}
#planif .pt2{width:100%;border-collapse:collapse;font-size:12px;margin-top:10px}
#planif .pt2 th{font:700 9px "Segoe UI",sans-serif;letter-spacing:.1em;color:var(--dim);text-align:left;padding:5px 4px;border-bottom:1px solid #1d3a63;vertical-align:bottom}
#planif .pt2 td{padding:4px;border-bottom:1px solid #12284a}
#planif .pt2 input,#planif .pt2 select{width:100%;min-width:54px;height:26px;background:#0a1a36;border:1px solid #2c5590;color:#fff;border-radius:5px;padding:0 5px;font:600 11.5px Consolas,monospace}
#planif .pt2 input[type=color]{padding:1px;min-width:34px}
#planif .pt2 td:first-child input{min-width:104px}
#planif .pt2 select{min-width:112px}
#planif .chip{display:inline-block;font:700 10px Consolas,monospace;padding:1px 6px;border-radius:4px;margin:1px 3px 1px 0;white-space:nowrap}
#planif .chip.cap{background:#2e1a4a;color:#e0c3ff}
#planif .chip.land{background:#123a26;color:#9ff5c4}
#planif .chip.wait{background:#3a2e12;color:#ffe08a}
#planif .chip.split{background:#0f3a5a;color:#9be7ff}
#planif .chip.rel{background:#4a1a4a;color:#ffc3f5;box-shadow:0 0 0 1px #c084fc}
#planif .legs .sub td{font:600 10.5px Consolas,monospace;color:#8ea6c8;padding-top:0}
#planif .tip{font-size:11.5px;color:var(--mut);line-height:1.45;margin-top:6px}
#planif .tip b{color:#cfe0ff}
#planif{position:fixed;inset:0;z-index:9000}
#planif select,#planif input{width:auto;min-width:0;margin:0}
#planif .f input,#planif .f select{width:100%}
#planif input[type=checkbox]{width:14px;height:14px}
#planif .grp .ttl{font:800 13px "Segoe UI",sans-serif;color:#fff;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#planif .btn.dirty{background:#b45309;border-color:#fbbf24;color:#fff}
#planif .btn.x{border-color:#6b2a2a}
#planif #pzmenu{position:fixed;z-index:22;background:#0b1d3a;border:1px solid #3a6aa8;border-radius:9px;padding:5px;min-width:260px;box-shadow:0 14px 40px #000c;display:none}
#planif #pzmenu button{display:flex;width:100%;text-align:left;background:none;border:0;color:#e2ecff;padding:8px 10px;border-radius:6px;gap:8px;align-items:center;font-size:13px}
#planif #pzmenu button:hover{background:#163a6a}
#planif #pzmenu .h{font:700 10px "Segoe UI",sans-serif;letter-spacing:.15em;color:var(--dim);text-transform:uppercase;padding:6px 10px 4px}
#planif #pzmenu hr{border:0;border-top:1px solid #22406b;margin:4px 2px}
#planif #pzmenu button[disabled]{opacity:.4;cursor:default}
#planif .ro{position:fixed;left:50%;transform:translateX(-50%);bottom:64px;z-index:6;background:#3a2e12f0;border:1px solid #b45309;color:#ffd58a;border-radius:999px;padding:6px 14px;font-size:12px;pointer-events:none}
#planif .chip.join{background:#0f3a5a;color:#9be7ff;box-shadow:0 0 0 1px #5ad1ff}
#planif .chip.icpt{background:#4a1a1a;color:#ffb3a8;box-shadow:0 0 0 1px #f87171}
#planif .chip.fol{background:#3a1a2a;color:#ffc3d8}
#planif .imp label{display:flex;gap:8px;align-items:center;margin:6px 0;font-size:13px;color:var(--ink)}
#planif .tabs{display:flex;gap:4px}
#planif .tabs button{height:32px;padding:0 14px;border-radius:8px;border:1px solid var(--line);background:var(--glass);color:var(--mut);font-weight:700}
#planif .tabs button.on{background:#13355f;color:#fff;border-color:#5aa2ff;box-shadow:inset 0 -2px 0 var(--teal)}
#planif.present #pztop .ed{display:none}
#planif .phead{display:flex;align-items:center;gap:10px}
#planif .phead .k{font:700 10px Consolas,monospace;letter-spacing:.26em;color:var(--gold);text-transform:uppercase}
#planif .phead h1{margin:0;font-size:19px;font-weight:800;text-shadow:0 2px 12px #000}
@media (max-width:900px){ #planif aside{width:auto;left:10px;top:auto;height:42vh} #planif #pztop{right:12px} #planif #pztl{right:12px;bottom:calc(42vh + 18px)} }