@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Syne:wght@400;700;800&family=DM+Sans:wght@300;400;500&display=swap');
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* ── TOKENS ── */
:root{
  --yellow:#FFB800; --yellow-d:#CC9200; --black:#111;
  --rp:#3b82f6; --jp:#FFB800; --fp:#ef4444; --bg-c:#10b981;
  --font-d:'Syne',sans-serif; --font-b:'DM Sans',sans-serif; --font-m:'DM Mono',monospace;
}
body.dark{
  --bg:#111; --bg2:#1a1a1a; --bg3:#222; --bg4:#2a2a2a;
  --border:#333; --border2:rgba(255,184,0,.15);
  --text:#f0f0f0; --text2:#aaa; --text3:#666;
  --card-bg:#1a1a1a; --card-border:#2a2a2a;
  --shadow:0 4px 24px rgba(0,0,0,.5);
}
body.light{
  --bg:#f4f5f7; --bg2:#fff; --bg3:#f0f1f3; --bg4:#e8eaed;
  --border:#ddd; --border2:rgba(0,82,155,.15);
  --text:#111; --text2:#555; --text3:#999;
  --card-bg:#fff; --card-border:#e5e7eb;
  --shadow:0 4px 24px rgba(0,0,0,.1);
}
body{background:var(--bg);color:var(--text);font-family:var(--font-b);font-size:14px;}
button{cursor:pointer;font-family:var(--font-b)}
a{text-decoration:none;color:inherit}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

/* ── HEADER ── */
#hdr{
  height:56px;display:flex;align-items:center;justify-content:space-between;
  padding:0 1.5rem;border-bottom:2px solid var(--yellow);
  background:var(--bg2);
}
body.light #hdr{background:#00529B;border-color:var(--yellow)}
.hdr-l{display:flex;align-items:center;gap:12px}
.hdr-logo{height:34px;object-fit:contain}
.hdr-sep{width:1px;height:26px;background:var(--border)}
body.light .hdr-sep{background:rgba(255,255,255,.3)}
.hdr-title{font-family:var(--font-d);font-weight:700;font-size:.9rem}
body.light .hdr-title{color:#fff}
.hdr-r{display:flex;align-items:center;gap:8px}
.theme-btn{background:none;border:1px solid var(--border);border-radius:6px;padding:4px 9px;font-size:.85rem;color:var(--text);transition:all .2s}
body.light .theme-btn{border-color:rgba(255,255,255,.4);color:#fff}
.theme-btn:hover{border-color:var(--yellow)}
.hdr-link{font-size:.72rem;padding:4px 12px;border-radius:20px;border:1px solid var(--border2);color:var(--text2);transition:all .2s}
.hdr-link:hover,.hdr-link.active{background:var(--yellow);color:#111;border-color:var(--yellow);font-weight:600}

/* ── HERO ── */
#hero{padding:2.5rem 2rem 1.5rem;text-align:center;border-bottom:1px solid var(--border)}
#hero h1{font-family:var(--font-d);font-size:1.8rem;font-weight:800;margin-bottom:.5rem}
#hero h1 em{color:var(--yellow);font-style:normal}
#hero p{font-size:.85rem;color:var(--text2);max-width:520px;margin:0 auto 1.2rem;line-height:1.65}
.avance-pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-m);font-size:.65rem;background:rgba(255,184,0,.1);border:1px solid rgba(255,184,0,.3);color:var(--yellow);padding:4px 12px;border-radius:20px}

/* ── CARDS GRID ── */
#cards-section{padding:2rem;max-width:1200px;margin:0 auto}
.section-title{font-family:var(--font-d);font-size:1rem;font-weight:700;margin-bottom:1.25rem;color:var(--text2);text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;gap:8px}
.section-title::after{content:'';flex:1;height:1px;background:var(--border)}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}

/* ── MODEL CARD ── */
.model-card{
  background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:12px;padding:1.25rem;cursor:pointer;
  transition:all .2s;position:relative;overflow:hidden;
}
.model-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg, var(--card-accent,var(--yellow)), transparent);
}
.model-card:hover{border-color:var(--card-accent,var(--yellow));transform:translateY(-2px);box-shadow:var(--shadow)}
.card-header{display:flex;align-items:center;gap:10px;margin-bottom:.75rem}
.card-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.card-name{font-family:var(--font-d);font-weight:700;font-size:.9rem}
.card-tag{font-family:var(--font-m);font-size:.58rem;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-top:1px}
.card-desc{font-size:.75rem;color:var(--text2);line-height:1.6;margin-bottom:.9rem}
.card-footer{display:flex;align-items:center;justify-content:space-between}
.card-stat{font-family:var(--font-m);font-size:.78rem}
.card-stat strong{color:var(--card-accent,var(--yellow))}
.card-cta{font-size:.68rem;background:var(--card-accent,var(--yellow));color:#111;padding:4px 12px;border-radius:20px;font-weight:600;border:none;transition:opacity .2s}
.card-cta:hover{opacity:.85}
.card-status{display:flex;align-items:center;gap:5px;font-size:.62rem;color:var(--text3)}
.dot-ok{width:6px;height:6px;border-radius:50%;background:#22c55e;flex-shrink:0}
.dot-run{width:6px;height:6px;border-radius:50%;background:var(--yellow);flex-shrink:0;animation:blink 1.2s ease infinite}
.dot-pend{width:6px;height:6px;border-radius:50%;background:var(--text3);flex-shrink:0}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* ── MODAL WIZARD ── */
#modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:200;
  display:none;align-items:center;justify-content:center;padding:1rem;
}
#modal-overlay.open{display:flex}
#modal{
  background:var(--bg2);border:1px solid var(--border2);border-radius:16px;
  width:100%;max-width:520px;max-height:90vh;overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.modal-header{
  padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;background:var(--bg2);z-index:1;
}
.modal-header h3{font-family:var(--font-d);font-weight:700;font-size:1rem}
.modal-close{background:none;border:none;color:var(--text2);font-size:1.2rem}
.modal-close:hover{color:var(--text)}
.modal-body{padding:1.5rem}
.modal-desc{font-size:.8rem;color:var(--text2);line-height:1.65;margin-bottom:1.5rem;padding:.9rem;background:var(--bg3);border-radius:8px;border-left:3px solid var(--yellow)}
.question-block{margin-bottom:1.25rem}
.question-label{font-size:.75rem;font-weight:600;color:var(--text2);margin-bottom:.6rem;display:block}
.question-hint{font-size:.68rem;color:var(--text3);margin-bottom:.6rem}
.partido-select{
  width:100%;padding:.6rem .9rem;border-radius:8px;
  background:var(--bg3);border:1px solid var(--border);
  color:var(--text);font-family:var(--font-b);font-size:.8rem;
  appearance:none;cursor:pointer;
}
.partido-select:focus{outline:none;border-color:var(--yellow)}
.radio-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.radio-opt{
  display:flex;align-items:center;gap:8px;padding:.6rem .9rem;
  background:var(--bg3);border:1px solid var(--border);border-radius:8px;
  cursor:pointer;transition:all .18s;font-size:.78rem;
}
.radio-opt:hover,.radio-opt.sel{border-color:var(--yellow);background:rgba(255,184,0,.08)}
.radio-opt input{accent-color:var(--yellow)}
.modal-footer{padding:1rem 1.5rem;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:.75rem}
.btn-secondary{background:none;border:1px solid var(--border);color:var(--text2);padding:.55rem 1.2rem;border-radius:8px;font-size:.8rem}
.btn-primary{background:var(--yellow);color:#111;border:none;padding:.55rem 1.4rem;border-radius:8px;font-weight:700;font-size:.8rem}
.btn-primary:hover{background:var(--yellow-d)}

/* ── VISTA MAPA ── */



/* Panel mapa */
#vmap-left{background:var(--bg)}  /* layout en bloque responsive */
.vmap-toolbar{
  padding:.75rem 1rem;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;background:var(--bg2);
}
.vmap-back{background:none;border:1px solid var(--border);color:var(--text2);padding:3px 10px;border-radius:6px;font-size:.72rem;display:flex;align-items:center;gap:5px}
.vmap-back:hover{border-color:var(--yellow);color:var(--yellow)}
.vmap-model-badge{font-family:var(--font-m);font-size:.65rem;padding:3px 10px;border-radius:20px;background:rgba(255,184,0,.12);border:1px solid rgba(255,184,0,.3);color:var(--yellow)}
.vmap-stats{display:flex;gap:1rem}
.vmap-stat{font-size:.68rem;color:var(--text3)}
.vmap-stat strong{color:var(--text);font-family:var(--font-m)}

#vmap-svg-wrap:active{cursor:grabbing}
#vmap-svg{width:100%;height:100%}
.dept-path{stroke:#2a2a2a;stroke-width:.5;cursor:pointer;transition:stroke .15s,stroke-width .15s}
body.light .dept-path{stroke:#bbb}
.dept-path:hover{stroke:var(--yellow);stroke-width:1.5}
.zoom-btns{position:absolute;bottom:12px;right:12px;display:flex;flex-direction:column;gap:3px;z-index:10}
.zoom-btn{width:26px;height:26px;background:var(--bg2);border:1px solid var(--border);border-radius:5px;color:var(--text);font-size:.9rem;display:flex;align-items:center;justify-content:center;transition:all .15s}
.zoom-btn:hover{background:var(--yellow);color:#111;border-color:var(--yellow)}
.map-leyenda{position:absolute;bottom:12px;left:12px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:.62rem;color:var(--text2)}
.ley-row{display:flex;align-items:center;gap:5px;margin-bottom:3px}
.ley-row:last-child{margin-bottom:0}
.ley-swatch{width:10px;height:10px;border-radius:2px}

/* Tooltip mapa */
#vmap-tt{
  position:fixed;pointer-events:none;z-index:999;display:none;
  background:var(--bg2);border:1px solid rgba(255,184,0,.4);
  border-radius:10px;padding:10px 14px;min-width:200px;
  box-shadow:var(--shadow);font-size:.73rem;
}
#vmap-tt h4{font-family:var(--font-d);font-size:.82rem;color:var(--yellow);margin-bottom:6px}
.tt-r{display:flex;justify-content:space-between;gap:12px;margin-bottom:2px;color:var(--text2)}
.tt-r .v{font-family:var(--font-m);color:var(--text)}
.tt-sep{border:none;border-top:1px solid var(--border);margin:5px 0}

/* Panel derecho = grafo */
#vmap-right{
  background:var(--bg2);  /* layout en bloque responsive */
}

.right-placeholder .ico{font-size:2.5rem;opacity:.3}
.right-placeholder p{font-size:.78rem;line-height:1.6}

#grafo-tooltip-v{
  position:absolute;display:none;background:var(--bg2);
  border:1px solid var(--border2);border-radius:8px;
  padding:8px 12px;font-size:.72rem;pointer-events:none;z-index:50;
  min-width:150px;box-shadow:var(--shadow);
}
.gt-title{font-family:var(--font-d);font-weight:700;font-size:.75rem;color:var(--yellow);margin-bottom:4px}
.gt-r{display:flex;justify-content:space-between;gap:10px;color:var(--text2);margin-bottom:2px}
.gt-r .v{font-family:var(--font-m);color:var(--text)}

.gd-name{font-family:var(--font-d);font-weight:700;font-size:.78rem;color:var(--yellow);margin-bottom:6px}
.gd-r{display:flex;justify-content:space-between;font-size:.72rem;margin-bottom:3px}
.gd-r .k{color:var(--text2)} .gd-r .v{font-family:var(--font-m)}
.bar4{margin-top:8px}
.bar4-row{display:flex;align-items:center;gap:6px;margin-bottom:3px;font-size:.65rem}
.bar4-row .lbl{width:16px;text-align:center}
.bar4-track{flex:1;height:4px;background:var(--bg4);border-radius:2px;overflow:hidden}
.bar4-fill{height:100%;border-radius:2px}
.bar4-pct{width:34px;text-align:right;font-family:var(--font-m);color:var(--text2)}

.gli-name{font-family:var(--font-d);font-weight:700;font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px}
.gli-geo{font-size:.65rem;color:var(--text3);margin-bottom:6px}
.gli-stats{display:flex;gap:12px}
.gli-s{display:flex;flex-direction:column;align-items:center}
.gli-n{font-family:var(--font-m);font-size:.9rem;font-weight:500}
.gli-l{font-size:.58rem;color:var(--text3)}

/* ── RESPONSIVE ── */
@media(max-width:900px){ /* neutralizado — ver bloque responsive */ }
@media(max-width:600px){
  #hero h1{font-size:1.3rem}
  .cards-grid{grid-template-columns:1fr}
  #hdr{padding:0 1rem}
}

/* Tooltip del grafo creado dinámicamente */
.grafo-tt-local {
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.grafo-tt-local .gt-title {
  font-family: 'DM Mono', monospace;
  font-weight: 700;
  font-size: .75rem;
  color: var(--yellow);
  margin-bottom: 4px;
}
.grafo-tt-local .gt-r {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--text2);
  margin-bottom: 2px;
  font-size: .7rem;
}
.grafo-tt-local .gt-r .v {
  font-family: 'DM Mono', monospace;
  color: var(--text);
}

/* ================================================================
   PANEL LATERAL DE MESA (slide-in desde la derecha)
   ================================================================ */
#mesa-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 380px;
  background: var(--bg2);
  border-left: 1px solid var(--border2);
  z-index: 300;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow: -8px 0 32px rgba(0,0,0,.5);
}
#mesa-panel.open { transform: translateX(0); }

/* Header del panel */
.mp-header {
  padding: 1rem 1.25rem .75rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg3);
}
.mp-close {
  position: absolute;
  top: 10px; right: 12px;
  background: none; border: none;
  color: var(--text2); font-size: 1.1rem; cursor: pointer;
}
.mp-close:hover { color: var(--yellow); }
.mp-barcode {
  font-family: var(--font-m);
  font-size: .55rem;
  letter-spacing: .15em;
  color: var(--text3);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mp-barcode-lines {
  flex: 1;
  height: 18px;
  background: repeating-linear-gradient(
    90deg,
    var(--text) 0px, var(--text) 2px,
    transparent 2px, transparent 4px,
    var(--text) 4px, var(--text) 5px,
    transparent 5px, transparent 8px,
    var(--text) 8px, var(--text) 11px,
    transparent 11px, transparent 13px,
    var(--text) 13px, var(--text) 14px,
    transparent 14px, transparent 16px
  );
  opacity: .7;
}
.mp-local-name {
  font-family: var(--font-d);
  font-weight: 700;
  font-size: .88rem;
  color: var(--yellow);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mp-geo {
  font-size: .68rem;
  color: var(--text3);
  margin-bottom: 8px;
}
.mp-mesa-num {
  font-family: var(--font-m);
  font-size: .72rem;
  color: var(--text2);
  margin-bottom: 8px;
}

/* Badge de anomalía */
.mp-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-m);
  font-size: .62rem;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 600;
}
.mp-badge.extremo    { background:rgba(204,0,0,.15);   color:#ff4444; border:1px solid rgba(204,0,0,.4); }
.mp-badge.muy-grave  { background:rgba(180,50,50,.15);  color:#ff6666; border:1px solid rgba(180,50,50,.4); }
.mp-badge.signif     { background:rgba(120,30,90,.15);  color:#cc88ff; border:1px solid rgba(120,30,90,.4); }
.mp-badge.normal     { background:rgba(30,58,95,.15);   color:#60a5fa; border:1px solid rgba(30,58,95,.4); }

/* Stats grid */
.mp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.mp-stat {
  background: var(--bg2);
  padding: .6rem .5rem;
  text-align: center;
}
.mp-stat-n {
  font-family: var(--font-d);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  margin-bottom: 2px;
}
.mp-stat-l {
  font-size: .58rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Cuerpo del panel */
.mp-body { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; }

/* Sección resultados */
.mp-section-title {
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text3);
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mp-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Fila de partido */
.mp-partido-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  margin-bottom: .6rem;
}
.mp-partido-info { min-width: 0; }
.mp-partido-nombre {
  font-size: .72rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-partido-tag {
  font-size: .58rem;
  color: var(--text3);
}
.mp-partido-bar-wrap {
  width: 90px;
}
.mp-partido-bar-track {
  height: 5px;
  background: var(--bg4);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 2px;
}
.mp-partido-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .5s ease;
}
.mp-partido-pct {
  font-size: .6rem;
  color: var(--text3);
  font-family: var(--font-m);
}
.mp-partido-votos {
  font-family: var(--font-m);
  font-size: .78rem;
  font-weight: 500;
  text-align: right;
  min-width: 28px;
}

/* Partidos pequeños colapsados */
.mp-otros {
  font-size: .7rem;
  color: var(--text3);
  cursor: pointer;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.mp-otros:hover { color: var(--text2); }

/* Nota de anomalía */
.mp-anomalia-nota {
  background: rgba(220,38,38,.08);
  border: 1px solid rgba(220,38,38,.2);
  border-radius: 8px;
  padding: .75rem;
  margin-bottom: 1rem;
  font-size: .73rem;
  color: var(--text2);
  line-height: 1.55;
}
.mp-anomalia-nota strong { color: #f87171; }

/* Footer del panel */
.mp-footer {
  padding: .75rem 1.25rem;
  border-top: 1px solid var(--border);
  display: flex;
  gap: .6rem;
  flex-shrink: 0;
}
.mp-btn {
  flex: 1;
  padding: .55rem .75rem;
  border-radius: 8px;
  font-size: .72rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all .18s;
  border: none;
  text-decoration: none;
}
.mp-btn-primary {
  background: var(--yellow);
  color: #111;
}
.mp-btn-primary:hover { background: var(--yellow-d); }
.mp-btn-secondary {
  background: var(--bg3);
  color: var(--text2);
  border: 1px solid var(--border);
}
.mp-btn-secondary:hover { border-color: var(--yellow); color: var(--yellow); }

/* Divider */
.mp-divider {
  height: 1px;
  background: var(--border);
  margin: .75rem 0;
}

@media(max-width:600px) {
  #mesa-panel { width: 100%; }
}

/* ── Breadcrumb navegación bloom ── */
.nivel-breadcrumb {
  margin-top: 6px;
  font-size: .65rem;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.bc-activo { color: var(--yellow); font-weight: 600; }
.bc-link {
  color: var(--text2);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bc-link:hover { color: var(--yellow); }
.bc-sep { color: var(--text3); }

/* Leyenda colores locales */
.ley-local-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin-top: 4px;
  font-size: .6rem;
}

/* ================================================================
   RESIZER DRAG & DROP + LAYOUT RESPONSIVE MÁXIMO
   ================================================================ */

/* Vista mapa: columnas con resizer draggable */


/* El SVG del mapa ocupa 100% del espacio disponible */

#vmap-svg-wrap:active { cursor: grabbing; }
#vmap-svg { width:100%; height:100%; display:block; overflow:visible; }

/* Panel izquierdo — ver bloque responsive al final */
#vmap-left { background: var(--bg); }

/* ── RESIZER ── */

#map-resizer:hover,
#map-resizer.dragging {
  background: var(--yellow);
}
#map-resizer::after {
  content: '⋮';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: .9rem;
  color: var(--text3);
  letter-spacing: -2px;
}
#map-resizer:hover::after,
#map-resizer.dragging::after {
  color: var(--yellow);
}

/* Panel derecho — ver bloque responsive al final */
#vmap-right { background: var(--bg2); }

/* Grafo ocupa todo el espacio disponible */

#grafo-wrap svg {
  width: 100% !important;
  height: 100% !important;
}

/* Toolbar fija arriba */
.vmap-toolbar {
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 .75rem;
  gap: .5rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}

/* Prevenir selección de texto durante drag */



/* ── RESPONSIVE ── */
@media (max-width: 900px) { #map-resizer::after { content: '···'; letter-spacing: 2px; } }

/* @media 600px neutralizado — ver bloque responsive */

/* ================================================================
   BLOOM FILL COMPLETO — el grafo ocupa todo el panel disponible
   ================================================================ */

/* El panel derecho usa flex column */
/* #vmap-right con !important neutralizado — ver bloque responsive */

/* Info del local: altura fija, compacta */


/* Gli-stats más compacto */
.gli-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.gli-s { display: flex; flex-direction: column; align-items: center; min-width: 44px; }
.gli-n { font-family: var(--font-m); font-size: .88rem; font-weight: 500; line-height: 1.1; }
.gli-l { font-size: .56rem; color: var(--text3); margin-top: 1px; }

/* El contenedor del grafo LLENA todo el espacio restante */


/* SVG siempre 100% del container */
#grafo-wrap > svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* Detalle de mesa: altura fija abajo */


/* Placeholder centrado */

.right-placeholder .ico { font-size: 2.5rem; opacity: .3; }
.right-placeholder p { font-size: .78rem; line-height: 1.6; }

/* Toolbar compacta */
.vmap-toolbar {
  gap: .5rem;
  padding: 0 .75rem;
  flex-shrink: 0;
}
.vmap-stats { font-size: .72rem; }
.vmap-stats strong { font-family: var(--font-m); font-size: .85rem; }

/* ================================================================
   RESIZER FINAL — sobreescribe versiones anteriores
   ================================================================ */

#map-resizer:hover,
#map-resizer.dragging {
  background: var(--yellow) !important;
}
#map-resizer::after {
  content: '⋮';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  color: var(--text3);
  font-size: .85rem;
  pointer-events: none;
  line-height: 1;
}
#map-resizer:hover::after,
#map-resizer.dragging::after {
  color: var(--yellow);
}

/* Grid: NO usar var() para gridTemplateColumns — JS lo maneja */


/* Durante el drag: prevenir selección en TODA la página */
body.resizing,


/* ================================================================
   PANEL DETALLE MESA — tabs + cerrar
   ================================================================ */
#grafo-detail {
  position: relative;
}
.det-close-btn {
  position: absolute;
  top: 6px; right: 8px;
  background: none;
  border: 1px solid var(--border);
  color: var(--text2);
  border-radius: 4px;
  width: 22px; height: 22px;
  font-size: .75rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 10;
}
.det-close-btn:hover { background: var(--bg4); color: var(--text); }

/* Tabs del detalle */
.det-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.det-tab {
  flex: 1;
  padding: 5px 8px;
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  border: none;
  background: none;
  color: var(--text2);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all .15s;
}
.det-tab.active { color: var(--yellow); border-bottom-color: var(--yellow); }
.det-tab:hover:not(.active) { color: var(--text); }

.det-pane { display: none; }
.det-pane.active { display: block; }

/* Panel de explicación */
.det-explicacion {
  font-size: .72rem;
  line-height: 1.65;
  color: var(--text2);
}
.det-explicacion .exp-modelo {
  font-family: var(--font-m);
  font-size: .65rem;
  background: rgba(255,184,0,.1);
  border: 1px solid rgba(255,184,0,.25);
  color: var(--yellow);
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 8px;
}
.det-explicacion .exp-valor {
  background: var(--bg4);
  border-radius: 6px;
  padding: 6px 10px;
  margin: 6px 0;
  font-family: var(--font-m);
  font-size: .7rem;
}
.exp-valor .ev-label { color: var(--text3); font-size: .62rem; display: block; margin-bottom: 2px; }
.exp-valor .ev-val   { color: var(--text); font-size: .85rem; }
.det-explicacion .exp-texto { color: var(--text2); font-size: .72rem; }
.det-explicacion .exp-alerta {
  background: rgba(239,68,68,.08);
  border-left: 3px solid #ef4444;
  padding: 6px 10px;
  border-radius: 0 6px 6px 0;
  margin-top: 8px;
  font-size: .7rem;
  color: #fca5a5;
}
.det-explicacion .exp-ok {
  background: rgba(34,197,94,.08);
  border-left: 3px solid #22c55e;
  padding: 6px 10px;
  border-radius: 0 6px 6px 0;
  margin-top: 8px;
  font-size: .7rem;
  color: #86efac;
}

/* ================================================================
   TOOLBAR CONTROLES EXTRA
   ================================================================ */
.vmap-toolbar {
  flex-wrap: wrap;
  gap: 6px;
  height: auto;
  min-height: 44px;
  padding: 6px .75rem;
}
.tb-group {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
}
.tb-label {
  font-size: .6rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
.tb-select {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: .68rem;
  font-family: var(--font-b);
  cursor: pointer;
  outline: none;
  padding: 1px 2px;
}
.tb-select option { background: var(--bg2); }

/* Chips de severidad */
.sev-chip {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: .65rem;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: all .15s;
  user-select: none;
}
.sev-chip input { display: none; }
.sev-chip.sev-alto  { color: #f87171; }
.sev-chip.sev-medio { color: #fbbf24; }
.sev-chip.sev-bajo  { color: #60a5fa; }
.sev-chip.active    { background: var(--bg4); border-color: var(--border); }

/* Toggle drill-down */
.tb-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
}
.toggle-track {
  width: 28px;
  height: 14px;
  background: var(--bg4);
  border-radius: 7px;
  position: relative;
  transition: background .2s;
  flex-shrink: 0;
}
.toggle-track::after {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  background: var(--text3);
  border-radius: 50%;
  top: 2px; left: 2px;
  transition: all .2s;
}
#toggle-drilldown:checked ~ .toggle-track {
  background: var(--yellow);
}
#toggle-drilldown:checked ~ .toggle-track::after {
  left: 16px;
  background: #111;
}
#toggle-drilldown { display: none; }

/* Breadcrumb de nivel multi */
.breadcrumb-trail {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
  font-size: .63rem;
  padding: 4px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg3);
  min-height: 26px;
}
.bc-item { color: var(--text2); cursor: pointer; }
.bc-item:hover { color: var(--yellow); }
.bc-item.current { color: var(--yellow); font-weight: 600; cursor: default; }
.bc-arrow { color: var(--text3); font-size: .55rem; }

/* ================================================================
   CONTROLES DEL BLOOM (panel derecho)
   ================================================================ */
#bloom-controls {
  flex-shrink: 0;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg3);
  display: none; /* visible solo cuando hay bloom */
}
#bloom-controls.visible { display: block; }

.bc-ctrl-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.bc-ctrl-group {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 7px;
}
.bc-ctrl-label {
  font-size: .58rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
}
.bc-select {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: .66rem;
  font-family: var(--font-b);
  cursor: pointer;
  outline: none;
  max-width: 90px;
}
.bc-select option { background: var(--bg2); }

/* Chips severidad */
.bc-sev-group { gap: 5px; }
.bc-sev-chip {
  font-size: .63rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: all .15s;
  user-select: none;
  opacity: .45;
}
.bc-sev-chip input { display: none; }
.bc-sev-chip.active { opacity: 1; border-color: currentColor; }
.bc-sev-alto  { color: #f87171; }
.bc-sev-medio { color: #fbbf24; }
.bc-sev-bajo  { color: #60a5fa; }

/* Toggle drill-down */
.bc-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 7px;
  margin-left: auto;
}
.bc-toggle-track {
  width: 26px; height: 13px;
  background: var(--bg4);
  border-radius: 7px;
  position: relative;
  transition: background .2s;
  flex-shrink: 0;
}
.bc-toggle-track::after {
  content: '';
  position: absolute;
  width: 9px; height: 9px;
  background: var(--text3);
  border-radius: 50%;
  top: 2px; left: 2px;
  transition: all .2s;
}
#toggle-drilldown { display: none; }
#toggle-drilldown:checked ~ .bc-toggle-track { background: var(--yellow); }
#toggle-drilldown:checked ~ .bc-toggle-track::after { left: 15px; background: #111; }

/* Ajuste toolbar — siempre una sola línea limpia */
.vmap-toolbar {
  flex-wrap: nowrap !important;
  height: 44px !important;
  padding: 0 .75rem !important;
  gap: 8px !important;
}
.vmap-stats {
  font-size: .72rem;
  color: var(--text2);
  white-space: nowrap;
}
.vmap-stats strong {
  font-family: var(--font-m);
  color: var(--text);
}

/* ================================================================
   REPORTES: RESULTADOS E INCIDENCIAS
   ================================================================ */

/* Cards especiales (primeras 2) */
.model-card.card-featured {
  border-width: 2px;
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg3) 100%);
}
.model-card.card-featured::before { height: 4px; }

/* Leyenda de candidatos en header */
#cand-legend {
  display: none;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 8px;
}
#cand-legend.visible { display: flex; }
.cand-leg-item {
  display: flex; align-items: center; gap: 3px;
  font-size: .63rem; color: var(--text2); cursor: pointer;
  padding: 2px 6px; border-radius: 4px;
  border: 1px solid transparent;
  transition: all .15s;
  user-select: none;
}
.cand-leg-item.active { border-color: currentColor; }
.cand-leg-item:hover  { background: var(--bg4); }
.cand-leg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Panel de resultados (tab lateral) */
#panel-resultados {
  display: none;
  flex-direction: column;
  position: fixed;
  top: 56px; right: 0; bottom: 0;
  width: 380px;
  background: var(--bg2);
  border-left: 1px solid var(--border);
  z-index: 80;
  box-shadow: -4px 0 20px rgba(0,0,0,.4);
  overflow-y: auto;
}
#panel-resultados.open { display: flex; }

.pr-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg2);
  position: sticky; top: 0; z-index: 1;
}
.pr-title {
  font-family: var(--font-d); font-weight: 700; font-size: .9rem;
  margin-bottom: 2px;
}
.pr-sub { font-size: .65rem; color: var(--text3); }
.pr-close {
  position: absolute; top: 10px; right: 10px;
  background: none; border: 1px solid var(--border);
  color: var(--text2); border-radius: 4px;
  width: 22px; height: 22px; font-size: .75rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}

/* Stats de participación */
.pr-stats {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 0; border-bottom: 1px solid var(--border);
}
.pr-stat {
  padding: 10px 12px; text-align: center;
  border-right: 1px solid var(--border);
}
.pr-stat:last-child { border-right: none; }
.pr-stat-val { font-family: var(--font-d); font-size: 1.1rem; font-weight: 700; line-height: 1; }
.pr-stat-lbl { font-size: .58rem; color: var(--text3); margin-top: 3px; text-transform: uppercase; letter-spacing: .07em; }

/* Lista de candidatos */
.pr-cand-list { padding: 10px; flex: 1; }
.pr-cand-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 4px; border-bottom: 1px solid var(--border);
}
.pr-cand-row:last-child { border-bottom: none; }
.pr-pos { font-family: var(--font-m); font-size: .65rem; color: var(--text3); width: 14px; text-align: right; }
.pr-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pr-nombre { flex: 1; font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-bar-wrap { width: 100px; height: 5px; background: var(--bg4); border-radius: 3px; overflow: hidden; }
.pr-bar-fill { height: 100%; border-radius: 3px; }
.pr-pct { font-family: var(--font-m); font-size: .7rem; width: 38px; text-align: right; }
.pr-votos { font-size: .62rem; color: var(--text3); width: 60px; text-align: right; }

/* Panel de incidencias */
.inc-tipo-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; cursor: pointer;
  background: var(--bg3); border-bottom: 1px solid var(--border);
  font-size: .78rem; font-weight: 600;
  transition: background .15s;
}
.inc-tipo-header:hover { background: var(--bg4); }
.inc-tipo-header .inc-count {
  font-family: var(--font-m); font-size: .65rem;
  background: var(--bg4); padding: 1px 6px; border-radius: 10px;
  margin-left: auto;
}
.inc-tipo-body { display: none; }
.inc-tipo-body.open { display: block; }
.inc-desc {
  font-size: .72rem; color: var(--text2); padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg); line-height: 1.55;
}
.inc-item {
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .15s; font-size: .75rem;
}
.inc-item:hover { background: var(--bg3); }
.inc-item.sel   { background: var(--bg3); border-left: 3px solid var(--yellow); padding-left: 9px; }
.inc-local { font-weight: 500; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inc-geo   { font-size: .65rem; color: var(--text3); margin-bottom: 4px; }
.inc-badges { display: flex; gap: 4px; }
.inc-badge { font-size: .6rem; padding: 2px 6px; border-radius: 3px; font-family: var(--font-m); }

/* Comparación de mesas en detalle */
.mesa-comparacion {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.mc-title { font-size: .65rem; color: var(--text3); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 6px; }
.mc-row {
  display: flex; align-items: center; gap: 6px;
  font-size: .68rem; margin-bottom: 3px;
}
.mc-label { width: 80px; color: var(--text2); font-size: .62rem; }
.mc-bar   { flex: 1; height: 4px; background: var(--bg4); border-radius: 2px; overflow: hidden; }
.mc-bar-fill { height: 100%; border-radius: 2px; }
.mc-val   { width: 36px; text-align: right; font-family: var(--font-m); font-size: .65rem; }
.mc-highlight { color: var(--yellow); font-weight: 600; }

/* Primeras 2 cards = reportes principales */
#cards-grid .model-card:nth-child(1),
#cards-grid .model-card:nth-child(2) {
  border-color: var(--card-accent, var(--yellow));
  border-width: 2px;
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg3) 100%);
}
#cards-grid .model-card:nth-child(1)::before,
#cards-grid .model-card:nth-child(2)::before {
  height: 4px;
}
/* Grid: 2 columnas para los reportes, luego normal */
#cards-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ── Panel lateral resultados — botones de acción ── */
.det-action-btn {
  flex: 1;
  padding: 6px 8px;
  background: var(--bg4);
  border: 1px solid var(--border);
  color: var(--text2);
  border-radius: 5px;
  font-size: .68rem;
  cursor: pointer;
  transition: all .15s;
  font-family: var(--font-b);
  text-align: center;
}
.det-action-btn:hover { background: var(--bg3); color: var(--text); }
.det-action-primary {
  background: rgba(255,184,0,.12);
  border-color: rgba(255,184,0,.3);
  color: #FFB800;
}
.det-action-primary:hover { background: rgba(255,184,0,.2); }

/* Tooltip del mapa de resultados */
#vmap-tt {
  position: fixed;
  display: none;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: .72rem;
  pointer-events: none;
  z-index: 200;
  min-width: 200px;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
}
#vmap-tt h4 {
  font-family: var(--font-d);
  font-weight: 700;
  font-size: .85rem;
  margin: 0 0 6px;
}
#vmap-tt .tt-sep {
  border: none;
  border-top: 1px solid var(--border);
  margin: 5px 0;
}
#vmap-tt .tt-r {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3px;
}
#vmap-tt .tt-r .v { font-family: var(--font-m); }
#vmap-tt .k { color: var(--text3); }

/* ================================================================
   ROUTER — breadcrumb en header + share button
   ================================================================ */
.hdr-title a {
  color: var(--text2);
  text-decoration: none;
  transition: color .15s;
}
.hdr-title a:hover { color: var(--yellow); }

/* Share button */
#btn-share {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text2);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: .68rem;
  cursor: pointer;
  display: none;
  align-items: center;
  gap: 5px;
  transition: all .15s;
}
#btn-share.visible { display: flex; }
#btn-share:hover { background: var(--bg4); color: var(--text); }
#btn-share.copied { color: #4ade80; border-color: #4ade80; }

/* Indicador de ruta activa en cards */
.model-card.route-active {
  outline: 2px solid var(--card-accent, var(--yellow));
  outline-offset: 2px;
}

/* Transición suave entre vistas */
#cards-section, #vista-mapa, #hero {
  transition: opacity .2s ease;
}

/* ================================================================
   FIX: Header siempre oscuro (modo claro y oscuro)
   ================================================================ */
#hdr {
  background: #0a0a0a !important;
  border-bottom-color: #222 !important;
}
body.light #hdr {
  background: #0a0a0a !important;
  border-bottom-color: #222 !important;
}
body.light #hdr .hdr-title,
body.light #hdr .hdr-title em,
body.light #hdr .hdr-title a,
body.light #hdr .hdr-title span { color: #fff !important; }
body.light #hdr .hdr-logo-text { color: #fff !important; }
body.light #hdr .hdr-sep { background: rgba(255,255,255,.2) !important; }
body.light #hdr .hdr-link { color: rgba(255,255,255,.7) !important; }
body.light #hdr .hdr-link:hover { color: #FFB800 !important; }
body.light #hdr .theme-btn { border-color: rgba(255,255,255,.3) !important; color: rgba(255,255,255,.8) !important; }
body.light #hdr #btn-share { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.2) !important; color: rgba(255,255,255,.8) !important; }
body.light #hdr #btn-share:hover { background: rgba(255,255,255,.2) !important; }

/* ================================================================
   SELECTOR PARTIDOS — dropdown compacto en toolbar
   ================================================================ */
#partido-selector-wrap {
  position: relative;
  display: none;
}
#partido-selector-wrap.visible { display: inline-flex; }

#partido-selector-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text2);
  font-size: .68rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
  height: 28px;
}
#partido-selector-btn:hover { background: var(--bg4); color: var(--text); }
#partido-selector-btn .ps-dots {
  display: flex; gap: 2px; align-items: center;
}
#partido-selector-btn .ps-dot {
  width: 6px; height: 6px; border-radius: 50%;
}
#partido-selector-btn .ps-arrow {
  font-size: .5rem; margin-left: 2px; opacity: .6;
}

/* El panel desplegable */
#partido-selector-panel {
  display: none;
  position: fixed;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  z-index: 9998;
  min-width: 220px;
  padding: 8px 0;
  max-height: 360px;
  overflow-y: auto;
}
#partido-selector-panel.open { display: block; }

.ps-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 12px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.ps-header-title {
  font-size: .6rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.ps-header-actions {
  display: flex; gap: 6px;
}
.ps-action {
  font-size: .6rem;
  color: var(--yellow);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.ps-action:hover { text-decoration: underline; }

.ps-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background .1s;
  font-size: .72rem;
  color: var(--text);
  user-select: none;
}
.ps-item:hover { background: var(--bg3); }
.ps-item.active { background: var(--bg3); }

.ps-check {
  width: 14px; height: 14px;
  border: 1.5px solid var(--border);
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all .15s;
  font-size: .55rem;
}
.ps-item.active .ps-check {
  background: var(--yellow);
  border-color: var(--yellow);
  color: #111;
}
.ps-dot-item {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ps-nombre { flex: 1; }
.ps-votos {
  font-family: var(--font-m);
  font-size: .62rem;
  color: var(--text3);
}

/* Overlay para cerrar al click fuera */
#partido-selector-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 299;
}
#partido-selector-overlay.open { display: block; }

/* ================================================================
   BLOOM CONTROLS — header del panel derecho (resultados)
   ================================================================ */

/* El header del bloom usa flex row para que los controles queden
   a la derecha sin ocupar línea extra */
#grafo-local-info {
  display: flex !important;
  flex-direction: column !important;
}

/* Fila superior: nombre + controles a la derecha */
.gli-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.gli-top-row .gli-name {
  flex: 1;
  min-width: 0;
}

/* Controles compactos */
.bloom-ctrl-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.bloom-ctrl-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.bloom-ctrl-lbl {
  font-size: .48rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
.bloom-ctrl-select {
  background: var(--bg4);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  font-size: .6rem;
  padding: 1px 4px;
  cursor: pointer;
  max-width: 90px;
  font-family: var(--font-b);
  height: 18px;
}
.bloom-ctrl-select:focus { outline: 1px solid var(--yellow); }
.bloom-ctrl-select option { background: var(--bg2); font-size: .7rem; }

/* Separador vertical */
.bloom-ctrl-sep {
  width: 1px;
  height: 24px;
  background: var(--border);
  margin: 0 2px;
}

/* Selector de partidos en bloom (reemplaza el del toolbar) */
.bloom-partido-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  background: var(--bg4);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text2);
  font-size: .6rem;
  cursor: pointer;
  height: 18px;
  white-space: nowrap;
}
.bloom-partido-btn:hover { background: var(--bg3); color: var(--text); }

/* ================================================================
   FILTRO MESAS 9x
   ================================================================ */
#filtro-mesas9-wrap {
  display: none;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: .65rem;
  height: 28px;
}
#filtro-mesas9-wrap.visible { display: flex; }

.filtro9-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
  color: var(--text2);
  transition: color .15s;
}
.filtro9-toggle:hover { color: var(--text); }

/* Mini toggle switch */
.f9-track {
  width: 24px; height: 12px;
  background: var(--bg4);
  border-radius: 6px;
  position: relative;
  transition: background .2s;
  flex-shrink: 0;
}
.f9-track::after {
  content: '';
  position: absolute;
  width: 8px; height: 8px;
  background: var(--text3);
  border-radius: 50%;
  top: 2px; left: 2px;
  transition: all .2s;
}
#filtro9-chk { display: none; }
#filtro9-chk:checked ~ .f9-track { background: #f59e0b; }
#filtro9-chk:checked ~ .f9-track::after { left: 14px; background: #111; }

/* Badge activo */
.f9-badge {
  background: rgba(245,158,11,.15);
  border: 1px solid rgba(245,158,11,.3);
  color: #f59e0b;
  border-radius: 4px;
  padding: 1px 5px;
  font-family: var(--font-m);
  font-size: .6rem;
  display: none;
}
#filtro9-chk:checked ~ .f9-badge { display: inline; }

/* Mapa: outline amarillo cuando filtro activo */
body.filtro9-activo #vmap-svg .dept-path.sin-data9 {
  opacity: .2;
}
body.filtro9-activo .vmap-leyenda-filtro9 { display: flex !important; }
.vmap-leyenda-filtro9 {
  display: none;
  position: absolute;
  bottom: 80px; left: 8px;
  background: rgba(0,0,0,.7);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: .62rem;
  color: #f59e0b;
  gap: 4px;
  align-items: center;
  pointer-events: none;
}

/* Tooltip del mapa más ancho para mostrar los 2 bloques */
#vmap-tt { min-width: 230px !important; }

/* ================================================================
   RESPONSIVE COMPLETO — vista-mapa
   ================================================================ */

/* Layout base desktop: GRID con resizer draggable */
#vista-mapa {
  display: grid;
  grid-template-columns: 55% 6px 1fr;
  width: 100%;
  height: calc(100vh - 56px);
  overflow: hidden;
}

#vmap-left {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#vmap-right {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Tablet (≤860px): apila vertical, ambos visibles ── */
@media (max-width: 860px) {
  #vista-mapa {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: calc(100vh - 56px);
    overflow-y: auto;
  }
  #vmap-left {
    flex: 0 0 auto;
    max-width: 100%;
    min-width: 0;
    height: 48vh;
    min-height: 280px;
  }
  #vmap-right {
    flex: 0 0 auto;
    min-height: 340px;
    border-left: none;
    border-top: 1px solid var(--border);
    display: flex !important;
  }
  #map-resizer { display: none !important; }
}

/* ── Mobile (≤520px): solo mapa al inicio, bloom aparece al clicar ── */
@media (max-width: 520px) {
  #vista-mapa {
    display: flex;
    flex-direction: column;
    height: auto;
  }
  #vmap-left {
    height: calc(100vh - 56px);
    min-height: 320px;
    flex: 0 0 auto;
    max-width: 100%;
  }
  /* Bloom oculto por defecto en mobile — se muestra al seleccionar depto */
  #vmap-right {
    display: none !important;
  }
  /* Al seleccionar un depto, body recibe clase "bloom-activo" */
  body.bloom-activo #vmap-left {
    height: 35vh;
    min-height: 180px;
  }
  body.bloom-activo #vmap-right {
    display: flex !important;
    flex: 1 1 auto;
    min-height: 320px;
  }
  .vmap-toolbar {
    flex-wrap: wrap;
    height: auto;
    padding: .3rem .5rem;
    gap: .25rem;
  }
  .vmap-model-badge { font-size: .55rem; }
  .bloom-ctrl-bar   { flex-wrap: wrap; gap: 3px; }
  .bloom-ctrl-select{ max-width: 75px; }
  .gli-stats        { gap: 6px; flex-wrap: wrap; }
  .gli-n            { font-size: .75rem; }
  .gli-l            { font-size: .5rem; }
}

/* Bloom selector preview — texto siempre visible */
.bloom-ps-label {
  color: var(--text) !important;
  font-size: .6rem;
}
.bloom-ps-dots {
  gap: 2px;
  align-items: center;
}

/* Z-index hierarchy fix */
#hdr { position: relative; z-index: 100; }
.grafo-tt-local { z-index: 9999 !important; }
#vmap-tt { z-index: 9999 !important; }