@font-face{font-family:'Barlow';src:url('/demos/fonts/barlow-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('/demos/fonts/barlow-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow';src:url('/demos/fonts/barlow-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('/demos/fonts/barlowcondensed-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('/demos/fonts/barlowcondensed-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/demos/fonts/ibmplexmono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/demos/fonts/ibmplexmono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/demos/fonts/ibmplexmono-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
 --bg:#efece1; --board:#f5f2e8; --surface:#faf8f2;
 --text:#1d1f20; --divider:rgba(29,31,32,.18); --muted:#6f6a5f; --faint:#a49c8d;
 --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
 --head:"Barlow Condensed",system-ui,sans-serif;
 --body:"Barlow",system-ui,sans-serif;
 --navy:#1b3a5c; --accent:#4a7fb5; --warm:#9c4a3c; --gold:#bd9a24; --verde:#4a6b4f;
 --c1:#1b3a5c; --c2:#4a6b4f; --c3:#9c4a3c; --c4:#bd9a24;
 --afin:#1b3a5c;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--body);min-height:100vh;
font-size:13.5px;line-height:1.55}
h1,h2,h3,h4{font-family:var(--head);font-weight:600}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px 46px}
.blueprint{position:relative;border:1px solid var(--divider)}
.blueprint>.corner{position:absolute;width:11px;height:11px;
color:color-mix(in srgb,var(--text) 55%,transparent)}
.blueprint>.corner::before,.blueprint>.corner::after{content:"";position:absolute;background:currentColor}
.blueprint>.corner::before{left:5px;top:0;width:1px;height:100%}
.blueprint>.corner::after{top:5px;left:0;width:100%;height:1px}
.blueprint>.corner.tl{top:-6px;left:-6px}.blueprint>.corner.tr{top:-6px;right:-6px}
.blueprint>.corner.bl{bottom:-6px;left:-6px}.blueprint>.corner.br{bottom:-6px;right:-6px}
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;
padding:30px 0 14px;border-bottom:1px solid var(--divider);margin-bottom:20px}
.kick{font:400 10px/1 var(--mono);letter-spacing:.22em;color:var(--faint);text-transform:uppercase}
.top h1{font:400 32px/1.1 Georgia,'Times New Roman',serif;margin-top:7px}
.volver{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--afin);
cursor:pointer;background:none;border:1px solid var(--divider);padding:7px 11px}
.volver:hover{background:var(--surface)}
.oculto{display:none}
.intro{font:400 14px/1.65 var(--body);max-width:780px;margin-bottom:22px;text-wrap:pretty}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));gap:14px}
.opt{background:var(--surface);border:1px solid var(--divider);padding:18px;cursor:pointer;
text-align:left;font-family:var(--body);transition:border-color .15s}
.opt:hover{border-color:var(--accent)}
.opt .tg{font:400 8.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
display:block;margin-bottom:7px}
.opt h3{font:600 20px/1.1 var(--head);margin-bottom:5px}
.opt p{font:400 12.5px/1.5 var(--body);color:var(--muted)}
.blk{margin-bottom:22px}
.blk>h2{font:400 10px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--faint);
margin-bottom:9px}
.blk>.sub{font:400 12.5px/1.5 var(--body);color:var(--muted);margin-bottom:11px;max-width:760px}
.seccion-r{display:flex;align-items:baseline;gap:12px;padding:16px 0 9px}
.seccion-r .t{font:400 10px/1 var(--mono);letter-spacing:.22em;color:var(--faint)}
.seccion-r .l{flex:1;height:1px;background:var(--divider)}
/* ===== TABLERO ===== */
.zona{position:sticky;top:0;z-index:20;background:var(--bg);padding-bottom:10px;margin-bottom:14px}
.tablero{background:var(--board);padding:18px 20px 16px}
.cab{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;
padding-bottom:13px;margin-bottom:14px;border-bottom:1px solid var(--divider)}
.turnos{display:flex;align-items:center;gap:11px}
.turnos .lb{font:400 9.5px/1 var(--mono);letter-spacing:.18em;color:var(--faint)}
.galones{display:flex}
.gal{display:inline-flex;align-items:center;justify-content:center;width:23px;height:22px;
font:400 9.5px/1 var(--mono);background:rgba(29,31,32,.09);color:var(--faint);margin-right:-3px;
clip-path:polygon(0 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,0 100%,7px 50%)}
.gal.first{clip-path:polygon(0 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,0 100%)}
.acciones{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.bt{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
padding:12px 18px;border:1px solid var(--divider);background:var(--surface);color:var(--afin)}
.bt.p{background:var(--navy);color:#f5f2e8;border-color:var(--navy)}
.bt.p:hover{background:#25496e}
.bt.mini{padding:9px 12px;font-size:9.5px}
.bt:disabled{opacity:.45;cursor:default}
.pistat{font:400 10.5px/1.5 var(--mono);color:var(--muted);max-width:520px}
.panel{background:var(--surface);border:1px solid var(--divider);padding:16px 18px;margin:14px 0}
.panel h3{font:600 19px/1.1 var(--head);margin-bottom:8px}
.lectura{font:400 13px/1.6 var(--body);color:var(--text);margin:8px 0;max-width:760px}
.blk h2{font:600 26px/1.1 var(--head);margin:6px 0 8px}
.blk .sub{font:400 13.5px/1.6 var(--body);max-width:760px;margin-bottom:14px}
.cuadro{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:12px}
.cq{background:var(--surface);border:1px solid var(--divider);padding:11px 13px}
.cq .k{font:400 8.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);display:block}
.cq .v{font:600 21px/1.2 var(--mono);color:var(--afin);display:block;margin:4px 0 3px}
.cq .n{font:400 10.5px/1.45 var(--body);color:var(--muted)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.tabs button{font:500 10px/1 var(--mono);letter-spacing:.1em;padding:9px 13px;cursor:pointer;
border:1px solid var(--divider);background:var(--surface);color:var(--muted)}
.tabs button.on{background:var(--afin);color:var(--board);border-color:var(--afin)}
.plat{width:100%;border-collapse:collapse;margin:10px 0}
.plat th{font:500 9px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#f5f2e8;
background:var(--navy);text-align:left;padding:8px 10px}
.plat td{font:400 12px/1.5 var(--body);padding:8px 10px;border-bottom:1px solid var(--divider)}
.plat td.mn{font-family:var(--mono);font-size:11px}
.pn{background:var(--surface);border:1px solid var(--divider);padding:15px 17px;margin-bottom:12px;
font:400 13px/1.65 var(--body);max-width:860px}
.pn b{display:block;font:600 15px/1.2 var(--head);margin-bottom:6px}
.ec{font:400 11px/1.7 var(--mono);background:#f3f0e7;border-left:3px solid var(--navy);
padding:11px 14px;margin:9px 0;white-space:pre-wrap}
/* ===== inicio ===== */
.opts3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.optbig{background:var(--surface);border:2px solid var(--navy);padding:22px;text-align:left;
font-family:var(--body);cursor:pointer;position:relative;transition:box-shadow .15s}
.optbig:hover{box-shadow:4px 4px 0 rgba(27,58,92,.25)}
div.optbig{cursor:default}
.optbig .tg{font:500 9px/1 var(--mono);letter-spacing:.2em;color:var(--warm);display:block;margin-bottom:8px}
.optbig h3{font:600 24px/1.1 var(--head);margin-bottom:7px}
.optbig p{font:400 12.5px/1.55 var(--body);color:var(--muted)}
.optbig .cta{display:inline-block;margin-top:14px;font:500 10px/1 var(--mono);letter-spacing:.12em;
text-transform:uppercase;color:var(--board);background:var(--navy);padding:10px 14px}
.roltit{font:400 9px/1 var(--mono);letter-spacing:.18em;color:var(--faint);text-align:center;
margin:16px 0 8px}
.rolbtns{display:flex;gap:8px;justify-content:center}
.rolb{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
padding:12px 22px;border:1px solid var(--navy);background:var(--board);color:var(--navy)}
.rolb:hover,.rolb.on{background:var(--navy);color:var(--board)}
.pendiente{margin-top:18px;font:400 10px/1.5 var(--mono);color:var(--faint);
border-left:3px solid var(--gold);padding:8px 12px;background:var(--surface);max-width:560px}
/* ===== seleccion de escenario ===== */
.selwrap{max-width:860px}
.seltit{font:500 10px/1 var(--mono);letter-spacing:.2em;color:var(--afin);margin-bottom:8px}
.selayuda{font:400 12.5px/1.55 var(--body);color:var(--muted);margin-bottom:12px;max-width:680px}
.selayuda2{font:400 11.5px/1.5 var(--body);color:var(--muted);margin-top:10px;font-style:italic}
.escbtns{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.escb{text-align:left;padding:13px 15px;border:1px solid var(--divider);background:var(--surface);
cursor:pointer;font-family:var(--body)}
.escb b{display:block;font:600 16px/1.15 var(--head)}
.escb span{font:400 10.5px/1.4 var(--body);color:var(--muted)}
.escb.on{border-color:var(--navy);border-width:2px;background:#f3f5f8}
.escnums{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-top:14px}
.numcaja{background:var(--surface);border:1px solid var(--divider);padding:10px 12px}
.numcaja .k{font:400 8.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;
color:var(--faint);display:block;min-height:24px}
.numcaja .v{font:600 22px/1.1 var(--mono);color:var(--afin);display:block;margin:3px 0}
.numcaja .s{font:400 10px/1.35 var(--body);color:var(--muted)}
/* ===== marcador de situacion ===== */
.marcador{border:1px solid var(--divider);background:var(--surface);padding:14px 16px;margin-bottom:16px}
.olrow{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ollb{font:400 9px/1 var(--mono);letter-spacing:.2em;color:var(--faint)}
.olgrid{display:flex;flex:1;gap:4px}
.olg{flex:1;text-align:center;font:600 14px/1 var(--mono);padding:9px 0;background:rgba(29,31,32,.06);
color:var(--faint)}
.olg.done{background:var(--navy);color:#f5f2e8}
.olg.now{background:var(--board);color:var(--navy);border:2px solid var(--navy);font-weight:700}
.meds{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:14px;align-items:stretch}
.med{border-top:2px solid var(--divider);padding-top:8px}
.med .k{font:400 8.5px/1.25 var(--mono);letter-spacing:.1em;text-transform:uppercase;
color:var(--faint);display:block;min-height:22px}
.med .v{font:600 24px/1.15 var(--mono);color:var(--afin);display:block;white-space:nowrap}
.med .v small{font-size:13px;color:var(--muted);font-weight:400}
.med .v b{color:var(--warm)}
.med .s{font:400 9.5px/1.3 var(--body);color:var(--muted)}
.med.alarma .v{color:var(--warm)}
.med.alarma{border-top-color:var(--warm)}
/* ===== disposicion COIN ===== */
.coin{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;align-items:start}
.zp{border:1px solid var(--navy);background:var(--surface)}
.zptit{background:var(--navy);color:#f5f2e8;font:600 10px/1 var(--mono);letter-spacing:.18em;
padding:9px 13px}
.zc{border:1px solid var(--warm);background:#fbf7f4}
.zctit{background:var(--warm);color:#f5f2e8;font:600 10px/1 var(--mono);letter-spacing:.18em;
padding:9px 13px}
.zcnota{font:400 10.5px/1.5 var(--body);color:var(--muted);padding:10px 13px;
border-bottom:1px dashed var(--divider)}
.zcnota2{font:400 10px/1.5 var(--body);color:var(--muted);margin-top:8px}
.zcbloque{padding:12px 13px;border-bottom:1px solid var(--divider)}
.zcbloque:last-child{border-bottom:none}
.zcsub,.zpsub{font:500 9px/1 var(--mono);letter-spacing:.16em;color:var(--faint);margin-bottom:9px}
.zcbloque svg{display:block;width:100%;height:auto}
.zpbloque{padding:13px 14px;border-bottom:1px solid var(--divider)}
.zp .acciones{padding:13px 14px;margin-top:0}
.zpnota{font:400 10.5px/1.5 var(--body);color:var(--muted);margin:6px 0 10px}
.clsb{display:flex;gap:14px;align-items:flex-end;justify-content:center}
.cb{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:56px}
.cb .bar{width:26px;background:var(--warm);opacity:.7}
.cb .p{font:500 10px/1 var(--mono)}
.cb .n{font:400 8.5px/1.2 var(--mono);color:var(--muted)}
.zcsecs{display:flex;flex-direction:column;gap:6px}
.zcsec{background:var(--surface);border:1px solid var(--divider);padding:7px 10px;
display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.zcsec .nm{font:600 12px/1.1 var(--head)}
.zcsec .est{font:500 9.5px/1 var(--mono);color:var(--warm);margin-left:auto}
.chip{font:500 8px/1 var(--mono);letter-spacing:.1em;background:rgba(29,31,32,.08);
color:var(--muted);padding:4px 6px;white-space:nowrap}
/* mezcla deslizador discreto */
.mzslider{display:flex;gap:2px;height:26px;cursor:pointer}
.mzt{flex:1;background:rgba(29,31,32,.10)}
.mzt.fill{background:var(--warm);opacity:.55}
.mzt.cur{background:var(--warm);opacity:1;outline:2px solid var(--navy)}
.mzt:hover{outline:1px solid var(--navy)}
.mzlbl{display:flex;justify-content:space-between;font:400 11px/1 var(--mono);margin-top:7px}
.mzlbl b{color:var(--warm)}
/* reparto y sectores */
.repgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.repcol{display:grid;grid-template-rows:auto 1fr 1fr;gap:8px}
.repcab{font:600 9px/1 var(--mono);letter-spacing:.14em;color:#f7f4ec;padding:6px 8px;text-align:center}
.repsec{background:var(--board);border:1px solid var(--divider);padding:9px 10px;min-height:112px}
.repsec.ata{background:#f7ece8}
.rphd{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:7px}
.rphd .nm{font:600 13px/1.05 var(--head)}
.rpbar{position:relative;height:18px;background:rgba(29,31,32,.07);margin-bottom:7px}
.rpfill{position:absolute;left:0;top:0;bottom:0}
.rpv{position:absolute;right:5px;top:2px;font:600 11px/1.2 var(--mono)}
.rpctl{display:flex;gap:5px}
.rpctl button{flex:1;border:1px solid var(--divider);background:var(--surface);
font:500 10px/1 var(--mono);padding:7px 4px;cursor:pointer;color:var(--afin)}
.rpctl button:hover{border-color:var(--navy)}
.pvrow{display:flex;align-items:center;gap:6px;margin-bottom:7px}
.pvk{font:500 8px/1 var(--mono);color:var(--faint)}
.pvbar{flex:1;height:12px;background:rgba(29,31,32,.08);position:relative}
.pvfill{position:absolute;left:0;top:0;bottom:0;background:var(--verde)}
.pvv{font:500 9.5px/1 var(--mono);color:var(--text)}
.desp{margin:4px 0 7px}
.et{font:500 7.5px/1 var(--mono);letter-spacing:.1em;padding:3px 6px}
.et.ok{background:var(--verde);color:#f7f4ec}
.et.tr{background:var(--gold);color:#2a2205}
.et.no{background:rgba(29,31,32,.12);color:var(--muted)}
.tog{width:100%;border:1px solid var(--divider);background:var(--surface);
font:500 9px/1 var(--mono);padding:8px 5px;cursor:pointer;color:var(--muted)}
.tog.on{background:var(--navy);color:var(--board);border-color:var(--navy)}
.entra{font:400 10px/1.5 var(--mono);margin-top:4px}
.entra b{color:var(--navy)}
.entra .up{color:var(--warm);font-weight:600}
.entra .z{color:var(--faint)}
.prodbtns{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px}
.prodb{text-align:left;padding:11px 12px;border:1px solid var(--divider);background:var(--board);
cursor:pointer;font-family:var(--body)}
.prodb b{display:block;font:600 13px/1.15 var(--head)}
.prodb span{font:400 9.5px/1.35 var(--body);color:var(--muted)}
.prodb.on{border-color:var(--navy);border-width:2px;background:#f3f5f8}
.cola{font:400 10px/1.5 var(--mono);color:var(--gold);margin-top:9px;
border-top:1px dashed var(--divider);padding-top:8px}
.pctbtns{display:flex;gap:4px;margin-top:6px}
.pctb{flex:1;border:1px solid var(--divider);background:var(--surface);font:500 10px/1 var(--mono);
padding:8px 2px;cursor:pointer;color:var(--muted)}
.pctb.on{background:var(--navy);color:var(--board);border-color:var(--navy)}
.pasos{display:flex;gap:6px;flex-wrap:wrap;padding:11px 14px;border-bottom:1px solid var(--divider)}
.pasos span{font:500 9px/1 var(--mono);letter-spacing:.09em;padding:6px 10px}
.pon{background:var(--navy);color:var(--board)}
.pdone{color:var(--verde);border:1px solid var(--verde)}
.poff{color:var(--faint);border:1px solid var(--divider)}
.llegada{font:500 10.5px/1.5 var(--mono);background:var(--board);border-bottom:1px solid var(--divider);
padding:9px 14px;letter-spacing:.04em}
/* temporal */
.temporal{border:1px solid var(--divider);background:var(--surface);padding:13px 15px;margin-top:16px}
.temporal svg{display:block;width:100%;height:auto}
.tt{font:400 11px/1.55 var(--mono);background:var(--board);border:1px dashed var(--divider);
padding:9px 12px;margin-top:8px;min-height:38px}
.tt .ttp{color:var(--navy);font-weight:600}
.tt .ttc{color:var(--warm);font-weight:600}
.olhit:hover{fill:rgba(27,58,92,.06)}
@media(max-width:940px){.coin{grid-template-columns:1fr}.repgrid{grid-template-columns:1fr}}

/* ============ v5: cuerpo mayor, balanza de fiel, oleadas aflechadas ============ */
body{font-size:15px;line-height:1.6}
.wrap{max-width:1280px}
.top h1{font-size:36px}

/* --- selección de estrategia con barras --- */
.estrats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:6px 0 18px}
.estrat{background:var(--surface);border:1px solid var(--divider);padding:16px 16px 14px;
cursor:pointer;transition:border-color .12s,background .12s;text-align:left}
.estrat:hover{border-color:var(--navy)}
.estrat.on{border-color:var(--navy);border-width:2px;background:#f2f5f8;padding:15px 15px 13px}
.estrat h4{font:600 20px/1.15 var(--head);margin-bottom:3px}
.estrat .sb{font:400 12.5px/1.4 var(--mono);color:var(--muted);margin-bottom:11px;min-height:34px}
.ebar{margin-bottom:9px}
.ebar .lb{display:flex;justify-content:space-between;font:500 11px/1 var(--mono);
color:var(--muted);margin-bottom:4px}
.ebar .tr{height:16px;background:rgba(29,31,32,.08);position:relative}
.ebar .fl{height:100%}
.ebar .fl.b{background:var(--navy)} .ebar .fl.p{background:var(--warm)}
.ebar .fl.i{background:var(--verde)} .ebar .fl.r{background:var(--gold)}
.estrat .nt{font:400 12px/1.45 var(--body);color:var(--muted);margin-top:9px;
padding-top:9px;border-top:1px solid var(--divider)}

/* --- marcador de oleadas aflechado --- */
.olgrid{display:flex;gap:0;flex-wrap:nowrap;width:100%}
.olg{flex:1 1 0;position:relative;height:38px;display:flex;align-items:center;
justify-content:center;font:600 15px/1 var(--mono);background:rgba(29,31,32,.07);
color:var(--faint);clip-path:polygon(0 0,calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,0 100%,11px 50%);
margin-right:-6px}
.olg.done{background:var(--navy);color:#f5f2e8}
.olg.now{background:var(--warm);color:#fff;font-size:18px;box-shadow:0 0 0 2px var(--warm)}
.olg.fut{background:rgba(29,31,32,.07)}

/* --- balanza de fiel para la mezcla --- */
.fiel{margin:8px 0 4px;position:relative;padding:0 6px}
.fiel .viga{height:7px;background:var(--text);position:relative;margin-bottom:0}
.fiel .piv{width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;
border-top:20px solid var(--text);margin:0 auto}
.fiel .brazo{display:flex;justify-content:space-between;align-items:flex-end;
margin-bottom:7px;font:500 13px/1 var(--mono)}
.fiel .pl{text-align:center}
.fiel .pl .v{font:700 26px/1 var(--mono);display:block;margin-bottom:3px}
.fiel .pl.b .v{color:var(--navy)} .fiel .pl.p .v{color:var(--warm)}
.fiel .pl .k{font:500 11px/1.3 var(--mono);color:var(--muted);letter-spacing:.06em}
.fielctl{display:flex;gap:5px;justify-content:center;margin-top:12px}
.fielctl button{font:500 13px/1 var(--mono);padding:8px 13px;border:1px solid var(--divider);
background:var(--surface);cursor:pointer}
.fielctl button:hover{border-color:var(--navy)}

/* --- asignación de unidades --- */
.asig{display:flex;align-items:center;gap:7px;margin-top:7px;flex-wrap:wrap}
.asig .et{font:500 12px/1 var(--mono);color:var(--muted);min-width:74px}
.asig button{font:600 14px/1 var(--mono);width:32px;height:30px;border:1px solid var(--divider);
background:var(--surface);cursor:pointer}
.asig button:hover{border-color:var(--navy)}
.asig .num{font:700 18px/1 var(--mono);min-width:42px;text-align:center}
.asig .num.b{color:var(--navy)} .asig .num.p{color:var(--warm)}
.disp{font:500 13px/1.4 var(--mono);color:var(--muted);margin:9px 0 3px}
.disp b{color:var(--text);font-size:15px}

/* --- deslizadores del defensor --- */
.slid{margin:12px 0 15px}
.slid .hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.slid .hd .t{font:600 14px/1 var(--body)}
.slid .hd .v{font:700 16px/1 var(--mono);color:var(--navy)}
.slid .tr{height:22px;background:rgba(29,31,32,.10);display:flex;cursor:pointer;position:relative}
.slid .tr .a{background:var(--verde)} .slid .tr .b{background:var(--gold)}
.slid .tr .a2{background:var(--navy)} .slid .tr .b2{background:var(--accent)}
.slid .lg{display:flex;justify-content:space-between;font:500 12px/1.4 var(--mono);
color:var(--muted);margin-top:5px}
.slid .btns{display:flex;gap:5px;margin-top:8px}
.slid .btns button{font:500 12px/1 var(--mono);padding:6px 11px;border:1px solid var(--divider);
background:var(--surface);cursor:pointer}

/* --- empleo por porcentaje --- */
.pctb{display:flex;gap:4px;margin-top:7px}
.pctb button{flex:1;font:600 14px/1 var(--mono);padding:9px 0;border:1px solid var(--divider);
background:var(--surface);cursor:pointer}
.pctb button.on{background:var(--navy);color:#fff;border-color:var(--navy)}

/* --- visualización del agotamiento con detalle --- */
.vagot{background:var(--surface);border:1px solid var(--divider);padding:16px 18px;margin-top:16px}
.vagot .tt{font:500 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
color:var(--afin);margin-bottom:12px}
.detalle{margin-top:12px;border-top:1px solid var(--divider);padding-top:12px;
font:500 13px/1.65 var(--mono);min-height:92px}
.detalle .ol{font:700 16px/1 var(--mono);color:var(--navy);margin-bottom:7px}
.detalle .row{display:flex;gap:10px}
.detalle .row .k{color:var(--muted);min-width:132px}
.detalle .vacio{color:var(--faint)}

/* --- cierre en tres capas --- */
.tablaol{width:100%;border-collapse:collapse;font:500 13px/1.4 var(--mono);margin-top:10px}
.tablaol th{background:var(--navy);color:#f5f2e8;font-weight:600;padding:8px 7px;text-align:left;
font-size:11.5px;letter-spacing:.05em}
.tablaol td{padding:7px;border-bottom:1px solid var(--divider);vertical-align:top}
.tablaol tr{cursor:pointer}
.tablaol tr:hover td{background:#f2f5f8}
.tablaol tr.sel td{background:#e8eef5}
.tablaol .cru{color:var(--warm);font-weight:700}
.tablaol .ok{color:var(--verde)} .tablaol .no{color:var(--warm)}
.detol{background:var(--surface);border:1px solid var(--divider);padding:16px 18px;margin-top:14px}
.detol h4{font:600 18px/1 var(--head);margin-bottom:10px}
.detsec{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.detsec .c{border:1px solid var(--divider);padding:10px;background:var(--board)}
.detsec .c .nm{font:600 14px/1.2 var(--body);margin-bottom:5px}
.detsec .c .d{font:500 12.5px/1.55 var(--mono);color:var(--muted)}

/* --- medida: histograma y acumulada --- */
.medgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.medcard{background:var(--surface);border:1px solid var(--divider);padding:15px 16px}
.medcard h4{font:600 17px/1.1 var(--head);margin-bottom:3px}
.medcard .sb{font:500 12px/1.4 var(--mono);color:var(--muted);margin-bottom:10px}
.domtab{width:100%;border-collapse:collapse;font:500 13px/1.4 var(--mono);margin-top:8px}
.domtab td,.domtab th{padding:6px 8px;border-bottom:1px solid var(--divider);text-align:center}
.domtab th{background:var(--board);font-size:11.5px;font-weight:600}
.domtab td.rl{text-align:left;font-weight:600}
.ancla{background:#f2f5f8;border:1px solid var(--navy);padding:14px 16px;margin:14px 0}
.ancla .t{font:600 15px/1 var(--body);margin-bottom:7px}
.ancla .p{font:500 13px/1.7 var(--mono);color:var(--muted)}
/* ============ v5.1: clases que faltaban, aire interior, densidad v4 ============ */
/* --- aire entre borde y texto en TODAS las cajas --- */
.zpin,.zcin{padding:18px 20px}
.zpk,.zck{font:600 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
color:var(--afin);margin-bottom:8px}
.zck{color:var(--warm)}
.expl{font:400 13.5px/1.55 var(--body);color:var(--muted);margin-bottom:12px}
.expl2{font:400 14.5px/1.7 var(--body);color:var(--text);margin-bottom:14px}
.intro2{font:400 14.5px/1.65 var(--body);color:var(--muted);margin-bottom:16px}

/* --- secciones --- */
.seccion{display:flex;align-items:center;gap:12px;margin:26px 0 12px}
.seccion .t{font:600 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
color:var(--afin);white-space:nowrap}
.seccion .l{flex:1;height:1px;background:var(--divider)}

/* --- selectores segmentados (rol, estrategia) --- */
.seg{display:inline-flex;gap:0;border:1px solid var(--divider);background:var(--surface)}
.seg button{font:500 13.5px/1 var(--body);padding:10px 16px;border:none;background:transparent;
cursor:pointer;color:var(--muted);border-right:1px solid var(--divider)}
.seg button:last-child{border-right:none}
.seg button:hover{background:#f0eee6;color:var(--text)}
.seg button.on{background:var(--navy);color:#f5f2e8;font-weight:600}
.cfgmed{background:var(--surface);border:1px solid var(--divider);padding:18px 20px;margin-bottom:16px}
.cfgrow{display:flex;align-items:center;gap:16px;margin-bottom:12px;flex-wrap:wrap}
.cfgrow:last-child{margin-bottom:0}
.cfgrow .k{font:600 11.5px/1 var(--mono);letter-spacing:.14em;color:var(--muted);min-width:170px}

/* --- banda de segmento compacta, como en v4 --- */
.segban{font:600 11.5px/1 var(--mono);letter-spacing:.16em;color:#f7f4ec;padding:8px 12px;
margin:14px 0 8px;text-align:center}

/* --- tarjeta de sector compacta --- */
.repsec{background:var(--board);border:1px solid var(--divider);padding:12px 14px;margin-bottom:8px}
.rphd{display:flex;align-items:baseline;gap:9px;margin-bottom:8px;flex-wrap:wrap}
.rphd .nm{font:600 15px/1.15 var(--body)}
.pv{font:500 12px/1 var(--mono);color:var(--muted);margin-left:auto}
.ent{font:500 13px/1.55 var(--mono);color:var(--text)}
.ent .z{color:var(--faint)}
.av{color:var(--warm);font-weight:600}

/* --- cierre --- */
.cierre{background:var(--surface);border:1px solid var(--divider);
border-left:4px solid var(--navy);padding:18px 22px;margin-bottom:14px}
.verdic{font:400 19px/1.45 var(--head);margin-bottom:10px}
.revel{background:#f7ece8;border:1px solid var(--warm);padding:16px 20px;margin-bottom:6px}
.revel .k{font:600 11px/1 var(--mono);letter-spacing:.16em;color:var(--warm)}
.rn{font:600 20px/1.2 var(--head);margin:7px 0 4px}
.rd{font:400 14px/1.55 var(--body);color:var(--muted)}
.panelint{background:var(--surface);border:1px solid var(--divider);padding:18px 20px}
.svgb{width:100%;height:auto;display:block}
.pasoslist{margin:0 0 6px 20px;font:400 14.5px/1.75 var(--body)}
.pasoslist li{margin-bottom:5px;padding-left:5px}

/* --- aire en tablas --- */
.tablaol th{padding:11px 12px}
.tablaol td{padding:11px 12px}
.domtab th,.domtab td{padding:10px 12px}
.medcard{padding:18px 20px}
.ancla{padding:16px 20px}
.detol{padding:18px 22px}
.detsec .c{padding:13px 14px}
.detalle{padding:14px 2px 2px}

/* --- densidad v4: los segmentos en TRES COLUMNAS, no apilados --- */
.zpin .segcols{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:start}
/* --- deslizador discreto: se mueve de izquierda a derecha --- */
.mzslider{display:flex;gap:3px;margin:4px 0 7px}
.mzs{flex:1 1 0;height:26px;background:rgba(29,31,32,.10);cursor:pointer;
border:1px solid transparent;transition:background .08s}
.mzs:hover{background:rgba(29,31,32,.22)}
.mzs.fill{background:#c9a9a2}
.mzs.cur{background:var(--warm);border-color:var(--navy);border-width:2px}
.mzlbl{display:flex;justify-content:space-between;font:500 13.5px/1 var(--mono);margin-bottom:4px}
.mzlbl .li{color:var(--navy)} .mzlbl .ld{color:var(--warm);font-weight:600}
.slid{margin:12px 0 16px}
.slid .hd{margin-bottom:6px}
.slid .hd .t{font:600 14.5px/1.3 var(--body)}

/* --- filas de asignación compactas --- */
.asigfila{display:flex;align-items:center;gap:6px;margin-top:6px}
.asigfila .et{font:500 11.5px/1 var(--mono);color:var(--muted);min-width:56px}
.asigfila button{font:600 15px/1 var(--mono);width:30px;height:28px;border:1px solid var(--divider);
background:var(--surface);cursor:pointer;flex:0 0 auto}
.asigfila button:hover{border-color:var(--navy);background:#f0eee6}
.asigfila .num{font:700 17px/1 var(--mono);min-width:38px;text-align:center}
.asigfila .num.b{color:var(--navy)} .asigfila .num.p{color:var(--warm)}
.pvrow{display:flex;align-items:baseline;gap:7px;margin-bottom:5px;flex-wrap:wrap}
.pvrow .nm{font:600 13.5px/1.15 var(--body)}
.repsec .chip{font:500 10px/1 var(--mono);letter-spacing:.08em;background:rgba(29,31,32,.09);
padding:4px 6px;color:var(--muted)}
.segcol .repsec{margin-bottom:8px}
.segcol .rphd .nm{font-size:14px}
@media(max-width:1000px){.zpin .segcols,.segcols{grid-template-columns:1fr}}
/* --- layout en flex: mismo resultado, compatible con motores antiguos --- */
.coin{display:flex;gap:16px;align-items:flex-start}
.coin>.zp{flex:1 1 62%;min-width:0}
.coin>.zc{flex:1 1 34%;min-width:0}
.zpin .segcols,.segcols{display:flex;gap:12px;align-items:flex-start}
.segcol{flex:1 1 0;min-width:0}
@media(max-width:1000px){.coin,.zpin .segcols,.segcols{display:block}
 .coin>.zp,.coin>.zc{width:100%}}
/* ============ v5.2: deslizador con color, alineación, barras de asignación ============ */
/* deslizador: ambos lados en color, el vacío no gris sino tono claro del mismo color */
.mzs{background:#e3d9d5}
.mzs:hover{background:#d3c2bc}
.mzs.fill{background:#c9a9a2}
.mzs.cur{background:var(--warm);border-color:var(--navy);border-width:2px}

/* títulos de medidor más oscuros */
.med .k,.meds .k{color:var(--navy);font-weight:600}
.mg .k{color:var(--navy);font-weight:600}

/* --- barras horizontales de asignación --- */
.basigs{margin:10px 0 14px}
.basig{margin-bottom:9px}
.bahd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.bae{font:500 12.5px/1 var(--mono);color:var(--muted)}
.bav{font:500 13.5px/1 var(--mono);color:var(--muted)}
.bav b{font-size:16px}
.batr{height:14px;background:rgba(29,31,32,.10)}
.bafl{height:100%}

/* --- alineación vertical estricta en las tarjetas de sector --- */
.segcol .repsec{display:flex;flex-direction:column}
.repsec .cab2{min-height:52px}
.asigfila{display:grid;grid-template-columns:64px 30px 44px 30px;align-items:center;
gap:6px;margin-top:6px}
.asigfila .et{font:500 12px/1 var(--mono);color:var(--muted);text-align:left}
.asigfila button{width:30px;height:28px;padding:0}
.asigfila .num{min-width:0;width:44px;text-align:center}
.pvrow{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:7px;
margin-bottom:4px;min-height:22px}
.pvrow .nm{font:600 13.5px/1.15 var(--body)}
.pvrow .pv{font:500 12px/1 var(--mono);color:var(--muted);margin-left:0}
.segcol .repsec{min-height:150px}
.segcol .rphd{min-height:40px;align-items:flex-start}
.segcol .repsec{justify-content:flex-start}
/* --- alineación con flex y anchos fijos (compatible con todos los motores) --- */
.asigfila{display:flex;align-items:center;gap:6px;margin-top:6px}
.asigfila .et{flex:0 0 62px;width:62px;min-width:62px;font:500 12px/1 var(--mono);
color:var(--muted);text-align:left}
.asigfila button{flex:0 0 30px;width:30px;height:28px;padding:0}
.asigfila .num{flex:0 0 42px;width:42px;min-width:42px;text-align:center}
.pvrow{display:flex;align-items:center;gap:7px;margin-bottom:4px;min-height:22px}
.pvrow .chip{flex:0 0 auto}
.pvrow .nm{flex:1 1 auto;min-width:0}
.pvrow .pv{flex:0 0 auto;margin-left:auto}
/* --- una línea por sector: tarjetas de igual altura --- */
.pvrow{flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
.pvrow .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.pvrow .pv{font-size:11.5px;white-space:nowrap}
.segcol .repsec{min-height:196px}
.zpin .segcol .repsec{min-height:0}
.segcol .rphd{min-height:34px;white-space:nowrap;overflow:hidden}
.segcol .rphd .nm{overflow:hidden;text-overflow:ellipsis}
/* --- medgrid en flex y svg contenidos --- */
.medgrid{display:flex;gap:16px;align-items:stretch}
.medgrid>.medcard{flex:1 1 0;min-width:0}
.medcard svg{width:100%;height:auto;display:block;max-width:560px;margin:0 auto}
.panelint svg{width:100%;height:auto;display:block}
@media(max-width:1000px){.medgrid{display:block}.medgrid>.medcard{margin-bottom:14px}}
/* --- tabla numérica de oleadas --- */
.tablaol.num{font:500 13px/1.35 var(--mono)}
.tablaol.num th{padding:8px 7px;text-align:center;font-size:11px;line-height:1.25;
letter-spacing:.03em;vertical-align:bottom}
.tablaol.num tr.gr th{background:#16304c;font-size:10.5px;letter-spacing:.14em;
border-right:1px solid rgba(255,255,255,.18);padding:7px}
.tablaol.num th .u{font-weight:400;opacity:.72;font-size:10px}
.tablaol.num td{padding:9px 7px;text-align:center;font-size:14px}
.tablaol.num td.ol{font-weight:700;color:var(--navy)}
.tablaol.num td.sm{font-size:12px;color:var(--muted)}
.tablaol.num td.cru{color:var(--warm);font-weight:700}
.tablaol.num td.ok{color:var(--verde)} .tablaol.num td.no{color:var(--warm)}
.tablaol.num .rec{color:var(--warm);font-size:11px;margin-left:2px}
.tablaol tbody tr.hov td{background:#e3ecf5}
.trhit:hover{fill-opacity:.10 !important}
/* --- v6: aviso, pregunta de ventana, unidades en cabecera --- */
.aviso{background:#f7ece8;border-left:4px solid var(--warm);padding:13px 17px;margin:14px 0;
font:400 13.5px/1.6 var(--body);color:var(--text)}
.preg{font:400 13px/1.4 var(--body);color:var(--muted);font-style:italic}
.domtab th .u{font-weight:400;opacity:.7;font-size:10px}
.domtab td.no{color:var(--warm);font-weight:600}
/* --- v6.1: clases de amenaza y controles de empleo --- */
.clases{display:flex;gap:8px;margin-top:5px;flex-wrap:wrap}
.cl{font:600 11.5px/1 var(--mono);padding:4px 7px}
.cl.alta{background:rgba(156,74,60,.14);color:var(--warm)}
.cl.baja{background:rgba(27,58,92,.12);color:var(--navy)}
.ent.sm{font-size:12px}
.ent .up{color:var(--warm)}
.empcaja{background:var(--surface);border:1px solid var(--divider);padding:11px 12px;margin-top:8px}
.empcaja.res{background:#f2f5f8}
.empfila{margin-bottom:11px}
.empfila:last-child{margin-bottom:0}
.emphd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;gap:6px}
.emphd .et{font:600 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.empfila.alta .et{color:var(--warm)} .empfila.baja .et{color:var(--navy)}
.emphd .res{font:500 12px/1.3 var(--mono);color:var(--muted);text-align:right}
.emphd .res b{font-size:17px;color:var(--text)}
.empfila .pctb{display:flex;gap:3px;margin:0}
.empfila .pctb button{flex:1;font:600 12px/1 var(--mono);padding:7px 0;
border:1px solid var(--divider);background:var(--board);cursor:pointer}
.empfila .pctb button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.empfila.alta .pctb button.on{background:var(--warm);border-color:var(--warm)}
.empnota{font:400 10.5px/1.35 var(--mono);color:var(--faint);margin-top:4px}
.segban .u{opacity:.8;font-weight:400}
/* --- v7: alineación de columnas y aire bajo la barra de pasos --- */
.segban{min-height:34px;display:flex;align-items:center;justify-content:center;
line-height:1.25;padding:7px 10px}
.segcol{display:flex;flex-direction:column}
.segcol .repsec{flex:0 0 auto}
/* las dos primeras fichas de cada columna con la misma altura */
.segcol .repsec:nth-of-type(1),.segcol .repsec:nth-of-type(2){min-height:112px}
.zp .pasos{margin-bottom:18px}
.zpin>.zpk:first-child,.pasos+.zpk{margin-top:6px}
.zpk{margin-top:4px}
.zpk.sep{margin-top:14px;padding-top:2px}
.zoomctl{display:flex;align-items:center;gap:6px;margin-top:6px;justify-content:center}
.zoomctl .k{font:400 10px/1 var(--mono);color:var(--faint);margin-right:2px}
.zoomctl .v{font:500 11px/1 var(--mono);color:var(--muted);min-width:96px;text-align:center}
.zoomctl button{font:600 14px/1 var(--mono);width:28px;height:24px;padding:0;
border:1px solid var(--divider);background:var(--board);cursor:pointer;color:var(--navy)}
.zoomctl button.mini{width:auto;padding:0 9px;font:500 10.5px/1 var(--mono);color:var(--muted)}
.zoomctl button:hover{border-color:var(--navy)}
.zoombtn{display:none}
.zoombtn button{font:500 10.5px/1 var(--mono);padding:5px 9px;border:1px solid var(--divider);
background:var(--board);cursor:pointer;color:var(--muted)}
.zoombtn button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.medcard h4{overflow:hidden}
/* --- v7: cabecera de segmento de altura fija y nombres completos --- */
.segban{height:44px;min-height:44px;font-size:11px;letter-spacing:.10em;
padding:6px 8px;text-align:center;line-height:1.3}
.segcol .repsec:nth-of-type(1),.segcol .repsec:nth-of-type(2){min-height:118px}
/* el nombre del sector puede ocupar dos líneas sin recortarse */
.pvrow{flex-wrap:wrap;white-space:normal}
.pvrow .nm{white-space:normal;overflow:visible;text-overflow:clip;flex:1 1 auto;min-width:0}
.pvrow .pv{flex:0 0 auto}

/* — anadido al publicar: la vuelta a la pieza — */
.vf-back{position:fixed;top:14px;right:16px;z-index:99;font:11px/1 'Space Mono',ui-monospace,monospace;
 letter-spacing:.14em;text-decoration:none;color:#12314f;background:#faf6ef;
 border:1px solid rgba(18,49,79,.3);padding:9px 14px}
.vf-back:hover{border-color:#2f6ad6;color:#2f6ad6}