/* Sistema de diseño "Arrastre Electoral" (Plan) — tokens y piezas comunes
   para proyeccion.html y simulador_actas.html. Fuente: artifact Design System. */
:root{
  --paper:#f7f5f0; --paper-deep:#e9e7e1; --ink:#16202c; --ink-2:#3d4754; --ink-muted:#6b7480;
  --rule:#d9d5cc; --rule-strong:#16202c; --neutral-bar:#a9a59b;
  --zone-norte:#2a78d6; --zone-este:#eb6834; --zone-sur:#1baf7a; --zone-centro:#eda100; --zone-extra:#e87ba4;
  --font-display:"Archivo","Arial Narrow",Arial,sans-serif; --font-text:"Archivo",Arial,sans-serif;
  --mx:clamp(16px,5vw,64px);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#131a22; --paper-deep:#0d1218; --ink:#eef1f4; --ink-2:#c3cad3; --ink-muted:#98a2ae;
  --rule:#2c3642; --rule-strong:#eef1f4; --neutral-bar:#6f7782;
  --zone-norte:#3987e5; --zone-este:#d95926; --zone-sur:#199e70; --zone-centro:#c98500; --zone-extra:#d55181;
 color-scheme:dark;}}
:root[data-theme="dark"]{
  --paper:#131a22; --paper-deep:#0d1218; --ink:#eef1f4; --ink-2:#c3cad3; --ink-muted:#98a2ae;
  --rule:#2c3642; --rule-strong:#eef1f4; --neutral-bar:#6f7782;
  --zone-norte:#3987e5; --zone-este:#d95926; --zone-sur:#199e70; --zone-centro:#c98500; --zone-extra:#d55181;
 color-scheme:dark;}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper)}
body{background:var(--paper);color:var(--ink);font:400 15px/1.5 var(--font-text);min-height:100vh}
.num{font-variant-numeric:tabular-nums}
b,strong{font-weight:700}
a{color:inherit}

/* franja de zonas: firma del sistema */
.band{display:grid;grid-template-columns:repeat(4,1fr);height:14px;position:sticky;top:0;z-index:30}
.band i:nth-child(1){background:var(--zone-norte)}.band i:nth-child(2){background:var(--zone-este)}
.band i:nth-child(3){background:var(--zone-sur)}.band i:nth-child(4){background:var(--zone-centro)}
.simbar{display:none;background:var(--ink);color:var(--paper);font:700 13px/1 var(--font-text);letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:9px var(--mx)}
body.sim .simbar{display:block}

.page{max-width:1320px;margin:0 auto;padding:40px var(--mx) 32px}
.kicker{font:700 13px/1.3 var(--font-text);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
h1.title{font:800 clamp(30px,4.2vw,44px)/1.04 var(--font-display);font-stretch:88%;letter-spacing:-.01em;margin-top:10px;text-wrap:balance}
.lede{font:400 18px/1.45 var(--font-text);color:var(--ink-2);margin-top:12px;max-width:70ch}
.lede b{color:var(--ink)}
.topline{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.src{font:400 14px/1.4 var(--font-text);color:var(--ink-2);display:flex;align-items:center;gap:8px;white-space:nowrap}
.src .dot{width:10px;height:10px;border-radius:9999px;border:2px solid var(--neutral-bar)}
.src .dot.live{background:var(--zone-sur);border-color:var(--zone-sur)}

/* bloques: abren con filete de 2px, sin tarjetas ni sombras */
.block{border-top:2px solid var(--rule-strong);padding-top:14px}
.block-h{font:700 13px/1.3 var(--font-text);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:12px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.block-h .aside{letter-spacing:0;text-transform:none;font-weight:400}
.grid{display:grid;gap:44px;margin-top:36px}
.g-2{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.g-map{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
@media(max-width:980px){.g-2,.g-map{grid-template-columns:1fr}}

/* cifras resumen en fila */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:26px;margin-top:30px}
.stat{border-top:2px solid var(--rule-strong);padding-top:10px}
.stat .v{font:800 28px/1.1 var(--font-display);font-stretch:88%}
.stat .l{font:400 14px/1.35 var(--font-text);color:var(--ink-2);margin-top:4px}

/* HeroStat */
.hero{display:flex;align-items:center;gap:30px;padding:16px 0;border-bottom:1px solid var(--rule)}
.hero .n{font:800 clamp(64px,8vw,96px)/.9 var(--font-display);font-stretch:85%;letter-spacing:-.03em}
.hero .t{font:600 19px/1.3 var(--font-text)}
.hero .t span{display:block;font:400 15px/1.35 var(--font-text);color:var(--ink-2);margin-top:6px}

/* PairedBars: referencia (neutral) arriba, dato (color) abajo */
.pb{padding:9px 0 10px;border-bottom:1px solid var(--rule)}
.pb:last-child{border-bottom:none}
.pb-h{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center}
.pb-n{font:700 16px/1.25 var(--font-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-d{font:800 20px/1 var(--font-display);font-stretch:88%}
.pb-b{display:flex;align-items:center;gap:8px;height:16px;margin-top:4px}
.pb-b .b{height:12px;border-radius:0 4px 4px 0;min-width:2px}
.pb-b .ref{background:var(--neutral-bar)}
.pb-b .v{font:600 13px/1 var(--font-text);color:var(--ink-2);white-space:nowrap}
.legend{display:flex;gap:18px;flex-wrap:wrap;font:400 13px/1.3 var(--font-text);color:var(--ink-2);margin-top:10px}
.legend i{display:inline-block;width:18px;height:8px;border-radius:0 3px 3px 0;margin-right:6px;vertical-align:1px}

/* logo de partido (símbolo oficial) */
.lg{width:22px;height:22px;border-radius:3px;background-size:cover;background-position:center;display:inline-block;vertical-align:middle;flex:none}

/* estado: lleno = firme, anillo = en proceso */
.st{font:600 13px/1 var(--font-text);color:var(--ink-2);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.st i{width:10px;height:10px;border-radius:9999px;box-sizing:border-box;border:2px solid var(--ink)}
.st.definido i{background:var(--ink)}
.st.ganador i{background:var(--ink);box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink)}
.st.temprano i{border-style:dashed}
.st.sin_datos i{border-color:var(--neutral-bar)}

/* DotTally por zona */
.zc{border-top:2px solid var(--rule-strong);padding-top:10px;margin-bottom:22px}
.zn{font:800 19px/1.15 var(--font-display);display:flex;align-items:center;gap:9px}
.zn > i{width:13px;height:13px;border-radius:9999px;flex:none}
.zw{font:400 14px/1.35 var(--font-text);color:var(--ink-2);margin-top:4px}
.dots{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.dots i{width:18px;height:18px;border-radius:9999px;box-sizing:border-box;display:block;cursor:pointer}

/* tabla */
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{font:700 12px/1.3 var(--font-text);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);text-align:left;padding:8px 10px 8px 0;border-bottom:2px solid var(--rule-strong);white-space:nowrap;cursor:pointer}
td{padding:8px 10px 8px 0;border-bottom:1px solid var(--rule);white-space:nowrap;font-size:14.5px}
td.r,th.r{text-align:right}
tbody tr{cursor:pointer}
tbody tr:hover td{background:var(--paper-deep)}
tr.sel td{background:var(--paper-deep)}
tr.zrow td{font:800 16px/1.2 var(--font-display);border-bottom:2px solid var(--rule-strong);padding-top:20px;cursor:default;background:none!important}
tr.zrow i{display:inline-block;width:11px;height:11px;border-radius:9999px;margin-right:8px;vertical-align:0}
.who{display:inline-flex;align-items:center;gap:8px;vertical-align:middle}

/* mapa */
.map svg{width:100%;height:auto;display:block}
.dist{stroke:var(--paper);stroke-width:1;stroke-opacity:.75;cursor:pointer}
.dist:hover{stroke:var(--ink);stroke-width:2;stroke-opacity:1}
.zb{fill:none;stroke:var(--paper);stroke-width:4;stroke-linejoin:round;pointer-events:none}
.lbl{font:700 15px var(--font-text);fill:var(--ink-2)}
.sea{font:italic 400 17px var(--font-text);fill:var(--neutral-bar)}
.seg{display:inline-flex;border:1px solid var(--rule-strong)}
.seg button{background:none;border:none;font:600 13px/1 var(--font-text);color:var(--ink);padding:7px 12px;cursor:pointer}
.seg button.on{background:var(--ink);color:var(--paper)}

/* pie de fuente con logo Plan */
.foot{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;border-top:2px solid var(--rule);padding-top:20px;margin-top:48px;font:400 14px/1.45 var(--font-text);color:var(--ink-2)}
.foot .br{display:flex;align-items:center;gap:20px}
.foot img{height:40px;display:block}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .foot img{filter:invert(1)}}
:root[data-theme="dark"] .foot img{filter:invert(1)}
.foot .pg{font:700 15px/1 var(--font-text);color:var(--ink)}

/* controles */
.btn{font:700 14px/1 var(--font-text);background:var(--ink);color:var(--paper);border:none;padding:11px 16px;cursor:pointer}
.btn.sec{background:none;color:var(--ink);border:1px solid var(--rule-strong)}
.btn:disabled{opacity:.45;cursor:wait}
input[type=number],input[type=password],select{font:400 15px var(--font-text);color:var(--ink);background:var(--paper);border:1px solid var(--rule-strong);padding:8px 10px;width:100%}
input[type=range]{width:100%;accent-color:var(--ink)}
input[type=checkbox],input[type=radio]{accent-color:var(--ink)}
:focus-visible{outline:2px solid var(--zone-norte);outline-offset:2px}
details summary{cursor:pointer;font:700 13px/1.3 var(--font-text);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.note{font:400 15px/1.55 var(--font-text);color:var(--ink-2);max-width:75ch}
.note p+p{margin-top:8px}
.note b{color:var(--ink)}
.muted{color:var(--ink-2)}
canvas{max-height:300px}