/* colombiaelige.co — sitio nuevo. CERO dependencias, mobile-first, sin scroll.
   Paleta EXACTA de V2 (ñawiñawi, directora creativa — codigo/01_descenso_completo.py).
   El mapa usa escala DIVERGENTE azul->morado->fucsia (look morado/magenta).
   Las bolitas son CORAL (Cepeda) / azul (De la Espriella). El disenso vive en
   la FORMA (mezcla aleatoria), no en el color. La transición 1ª<->2ª es
   IMPLÍCITA (no hay slider): al tocar el otro botón la nube morfea y se re-baraja.
*/
:root{
  --bg:#140510;            /* vino casi negro (fondo taller) */
  --chasis:#0c0309;        /* superficies un pelo más oscuras */
  --bg2:#1c0a16;           /* botones/cards en reposo */
  --acento:#ff5e9c;        /* FG fucsia */
  --ink:#f4dfe9;           /* tipografía clara */
  --dim:#9a6b84;           /* secundaria muda */
  --ink3:#6b4b5e;          /* terciaria, casi muda */
  --coral:#ff7a5e;         /* Cepeda — el cálido (lectura literal, no estadio) */
  --azul:#3b57d6;          /* De la Espriella */
  --gold:#ffd166;          /* halo de selección / acta / abrir verificación */
  --ok:#55d6a0;            /* corregido (check verde) */
  --ambar:#e8a13e;         /* revisar (borde ámbar) */
  --nulo:#9a9a9a;          /* blancos/nulos — gris translúcido (con borde) */
  --line:#3a1730;          /* líneas tenues del taller */
  --line2:#5a2742;         /* bordes de botón */
  --mono:'SFMono-Regular',ui-monospace,'DejaVu Sans Mono',Menlo,Consolas,monospace;
  /* bandera de Colombia suavizada al taller */
  --bandera-amarillo:#e8c84e;
  --bandera-azul:#2a3d8f;
  --bandera-rojo:#c0392b;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--mono);font-size:14px;line-height:1.4;
  display:flex;flex-direction:column;
  user-select:none;
}

/* ---------- HEADER: bandera horizontal Colombia. Tocarla -> Colombia ---------- */
#bandera{display:flex;height:16px;flex:none;cursor:pointer}
#bandera i{display:block;height:100%}
#bandera .a{flex:2;background:var(--bandera-amarillo)}
#bandera .b{flex:1;background:var(--bandera-azul)}
#bandera .c{flex:1;background:var(--bandera-rojo)}

/* ---------- BARRA-LUGAR (breadcrumb + título=lugar). El título es ETIQUETA;
   tocarlo abre el selector. Tocar la barra entera = atrás. ---------- */
#barra{
  flex:none;padding:9px 14px 7px;cursor:pointer;
}
#crumb{color:var(--dim);font-size:11px;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lugar{
  display:flex;align-items:baseline;gap:8px;
  color:var(--ink);font-weight:700;font-size:19px;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;
}
#lugar .nombre{overflow:hidden;text-overflow:ellipsis;cursor:pointer}
#lugar .nombre:active{color:var(--acento)}
/* en la mesa el título no abre selector (no hay nada bajo) -> no parece tocable */
#lugar.sin-sel .nombre{cursor:default}
#lugar.sin-sel .nombre:active{color:var(--ink)}
#lugar .sub{color:var(--dim);font-size:11px;font-weight:400;flex:none}
#lugar #tot{margin-left:auto;color:var(--dim);font-size:12px;font-weight:600;flex:none;padding-left:10px}
#barra .rule{height:1px;background:var(--line);margin-top:6px}

/* ---------- LIENZO central ---------- */
#lienzo{
  flex:1;position:relative;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;
}

/* el mapa SVG ocupa el lienzo */
#mapa{width:100%;height:100%;display:block}
#mapa path{
  stroke:var(--bg);stroke-width:.4;transition:fill .55s,opacity .35s;
  cursor:pointer;
  /* FIX (ñawiñawi 2026-06-23): SIN esto el stroke se mide en unidades del viewBox;
     en viewBox chicos (depto/municipio) el borde se vuelve gigante, se come los
     polígonos y los dispersa. v1 ya lo tenía. Lo hace constante en px, como v1. */
  vector-effect:non-scaling-stroke;
}
/* el polígono elegido se queda mientras el zoom corre; los hermanos se apagan
   suaves (fundido del contexto) para que el viaje al territorio se sienta. */
#mapa.zoomando path{transition:opacity .42s ease}
/* los hermanos del territorio elegido quedan ocultos AUNQUE se quite .zoomando,
   hasta que el mapa se rehace. Si no, reaparecían un frame antes de la licuación
   (el parpadeo que veía ed). Con transición para que el apagado sea suave. */
#mapa path.saliendo{opacity:0;transition:opacity .42s ease}
#mapa path.dim{opacity:.25}
#mapa path.sel{stroke:var(--gold);stroke-width:1.6;
  vector-effect:non-scaling-stroke}
#mapa circle.burbuja{cursor:pointer;transition:fill .55s}
#mapa .etq{fill:var(--dim);font-size:8px;font-family:var(--mono);
  pointer-events:none;text-anchor:middle}

#pista{
  position:absolute;top:6px;left:14px;color:var(--ink3);
  font-size:11px;letter-spacing:.03em;pointer-events:none;z-index:3;
}
#leyenda-min{
  position:absolute;top:8px;right:14px;display:flex;gap:14px;
  font-size:11px;color:var(--dim);z-index:3;pointer-events:none;
}
#leyenda-min b{display:inline-block;width:9px;height:9px;border-radius:50%;
  margin-right:5px;vertical-align:middle}

/* tooltip emergente al tocar polígono */
#tip{
  position:absolute;display:none;background:var(--bg2);border:1px solid var(--line2);
  border-radius:8px;padding:8px 11px;font-size:12px;z-index:5;pointer-events:none;
  box-shadow:0 4px 20px #0009;max-width:60vw;
}
#tip .tn{color:var(--acento);font-weight:600;margin-bottom:3px}
#tip .tb{display:flex;gap:10px;color:var(--dim)}

/* ---------- SELECTOR bajo el mapa (al pulgar). Píldora, NO en la barra. ---------- */
#selector-pill{
  flex:none;margin:6px 14px 4px;display:none;
  align-items:center;justify-content:space-between;
  background:var(--bg2);border:1px solid var(--line2);border-radius:8px;
  padding:9px 14px;cursor:pointer;font-size:13px;color:var(--ink);
}
#selector-pill.on{display:flex}
#selector-pill .car{color:var(--acento);font-size:14px}

/* ---------- BISAGRA (municipio: mapa->gente) + mini-stats ---------- */
.bisagra-marca{
  text-align:center;color:var(--acento);font-size:11px;letter-spacing:.1em;
  padding:6px 0 2px;position:relative;
}
.bisagra-marca::before,.bisagra-marca::after{
  content:'';position:absolute;top:60%;width:22%;height:1px;background:var(--line)}
.bisagra-marca::before{left:6%}.bisagra-marca::after{right:6%}

.muni-stats{text-align:center;padding:2px 14px 0}
.muni-stats .nums{color:var(--ink3);font-size:11px;letter-spacing:.02em}
.muni-stats .nums b{color:var(--dim);font-weight:700}

/* ---------- GRILLA de mini-nubes (puesto) ---------- */
#grilla-wrap{flex:1;overflow-y:auto;overflow-x:hidden;min-height:0;
  -webkit-overflow-scrolling:touch}
.grilla-hint{text-align:center;color:var(--acento);font-size:12px;
  letter-spacing:.03em;padding:8px 0 2px}
#grilla{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  padding:8px 12px 20px}

/* SIN BALOTAJE (Amazonía profunda): donde iría el agregado de 2ª, un mensaje
   honesto sin alarma. No grita — la 1ª línea destacada, la 2ª muda. (awaq 2026-06-25) */
#grilla.sin2v-wrap{display:flex;align-items:center;justify-content:center;
  padding:24px 22px 40px}
.sin2v{max-width:340px;text-align:center}
.sin2v-1{color:var(--ink);font-size:14px;line-height:1.5;letter-spacing:.01em}
.sin2v-2{color:var(--dim);font-size:11px;line-height:1.5;margin-top:10px;
  letter-spacing:.02em}

/* MOSAICO fractal (ed): municipio = cuadrados-puesto agrupados por zona;
   zona = rectángulos-mesa agrupados por puesto. Gap chico entre átomos, gap
   mayor entre bloques: se distingue el grupo sin perder a qué pertenece. El
   color (rampa divergente) recolorea suave al cambiar 1ª<->2ª (la transición). */
/* tope de ancho + centrado: en pantalla ancha (desktop) las 3 columnas 1fr se
   volvían gigantes y los grupos quedaban pegados a la izquierda con un vacío enorme
   a la derecha. Acotado a ~480px y centrado, el mosaico se ve como en móvil, balanceado
   (en el celular 412<480 -> no aplica, ancho completo). (ed) */
#grilla.mosaico{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 10px;
  align-items:start;justify-items:start;padding:12px 12px 24px;max-width:480px;margin-inline:auto}
/* contenido alineado a la IZQUIERDA (no centrado): así el primer átomo de cada puesto
   arranca en la misma X y las mesas mantienen su grilla alineada entre puestos, sin
   importar cuántas tenga cada uno (ed). antes align-items:center los descuadraba. */
.bloque{display:flex;flex-direction:column;align-items:flex-start;gap:5px;cursor:pointer}
.bloque .bt{font-size:9px;color:var(--dim);letter-spacing:.04em}
.bloque .ats{display:grid;gap:5px}
/* tamaño UNIFORME (ed): los átomos NO llenan el bloque — son de tamaño fijo y se
   AGRUPAN de a 3 (las 3 columnas) con aire alrededor, para que se NOTE el grupo.
   clamp escala con el ancho del celular (conservador: 3 zonas × 3 átomos = 9 por fila
   caben sin desbordar, incluso en 360px). Cuadrado=puesto, rectángulo=mesa. */
.atomo{border-radius:4px;width:clamp(22px,8.2vw,40px);height:clamp(22px,8.2vw,40px);transition:background .55s ease}  /* puesto = cuadrado */
.atomo.rect{width:clamp(24px,8.6vw,42px);height:clamp(16px,5.6vw,28px)}   /* mesa = rectángulo (más ancho que alto) */
/* tachones=AMARILLO punteado · errores=ROJO punteado, en mesa y puesto (ed) */
/* tachón/error = AUTO-detectado (crudo, incierto): PUNTITO en esquina, quieto (ed) */
.atomo{position:relative}
.atomo.est-tachon::after,.atomo.est-error::after{content:'';position:absolute;top:4px;right:4px;
  width:7px;height:7px;border-radius:50%;box-shadow:0 0 0 1.5px var(--bg)}
.mrect .mr.est-tachon::after,.mrect .mr.est-error::after{content:'';position:absolute;top:7px;right:7px;
  width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 2px var(--bg)}
.est-tachon::after{background:#ffcf4d} .est-error::after{background:#ff6b5a}
/* corregido = VERIFICADO por revisor: marco PUNTEADO (intrusivo). manip-rojo > ocr-amarillo */
.atomo.est-cor-ocr{outline:2px dotted #ffd166;outline-offset:1px}
.atomo.est-cor-manip{outline:2px dotted #ed1c24;outline-offset:1px}
.mrect .mr.est-cor-ocr{outline:3px dotted #ffd166;outline-offset:2px}
.mrect .mr.est-cor-manip{outline:3px dotted #ed1c24;outline-offset:2px}
.bloque:active{transform:scale(.97)}
/* vista de puesto: una mesa = un rectángulo grande con su color (recolorea al 1ª↔2ª) */
#grilla.mesas-rect{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:10px 14px 24px}
.mrect{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer}
.mrect .mr{width:100%;height:150px;border-radius:9px;transition:background .55s ease;position:relative}
.mrect .pn{font-size:12px;color:var(--dim)}
/* insignia de mesa corregida (✓ dorado / ⚠ rojo) + dirección (ed) */
.cor-badge{position:absolute;top:7px;right:7px;width:26px;height:26px;border-radius:50%;
  background:var(--gold);color:#2a1a05;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.45);z-index:2}
.cor-badge.adu{background:#ed1c24;color:#fff}  /* rojo bandera vivo, ⚠ blanco (ed) */
.cor-dir{position:absolute;bottom:7px;left:7px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;z-index:2}
.cor-dir.cep{background:var(--acento);color:#2a0a16}
.cor-dir.dle{background:var(--azul);color:#fff}
.mrect:active{transform:scale(.98)}
.nubecita{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer}
.nubecita svg{width:100%;max-width:150px;display:block}
.nubecita .pn{font-size:10px;color:var(--dim);text-align:center;line-height:1.2;
  max-width:150px;overflow:hidden}
.nubecita .pm{font-size:9px;color:var(--ink3)}

/* ---------- MESA: las bolitas (la pieza estrella) ---------- */
#mesa-wrap{flex:1;display:flex;flex-direction:column;min-height:0}
.mesa-titulo{display:flex;align-items:baseline;justify-content:space-between;
  padding:6px 16px 0}
.mesa-titulo .mt{font-size:20px;font-weight:700}
.mesa-titulo .ms{color:var(--ink3);font-size:11px;letter-spacing:.02em}
#nube-wrap{flex:1;min-height:0;position:relative}
#nube{width:100%;height:100%;display:block}
#nube circle{transition:opacity .5s}
/* media línea de estado (mock 05): mini-frase, nunca números */
.estado-linea{text-align:center;font-size:11px;padding:2px 0;min-height:16px}
.estado-linea.ambar{color:var(--ambar)}
.estado-linea.forense{color:var(--gold)}
.estado-linea.ok{color:var(--ok)}
.estado-linea.nodata{color:var(--acento)}

/* tarjeta "nuestra lectura" (mock 05) */
.lectura{margin:4px 16px;background:#1a0814;border:1px solid var(--line);
  border-radius:8px;padding:8px 12px}
.lectura .lh{color:var(--dim);font-size:10px;margin-bottom:5px}
.lectura .row{display:flex;align-items:center;gap:8px;margin:3px 0}
.lectura .row b{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}
.lectura .row .nm{flex:1;color:var(--ink);font-size:13px}
.lectura .row .vv{font-weight:700;font-size:15px}
.lectura .resto{color:var(--dim);font-size:10px;margin-top:4px}
.lectura .row.cep b{background:var(--acento)} .lectura .row.cep .vv{color:var(--acento)}
.lectura .row.dle b{background:var(--azul)}  .lectura .row.dle .vv{color:#7e92e8}
/* corrección de revisor: antes/después + motivo + firma (transparencia total, ed) */
.lectura .vv .old{color:var(--ink3);text-decoration:line-through;font-weight:400;font-size:13px;margin-right:3px}
.lectura .vv .arr{color:var(--gold);margin:0 4px;font-weight:400}
.lectura .vv .dlt{font-size:10px;padding:1px 7px;border-radius:20px;margin-left:6px;font-weight:700;
  background:rgba(255,94,156,.18);color:var(--acento)}
.lectura .row.dle .vv .dlt{background:rgba(59,87,214,.22);color:#9fb0ee}
.lectura .motivo{margin-top:8px;border-top:1px dashed var(--line);padding-top:7px;
  font-size:10px;color:var(--dim);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lectura .chip{display:inline-flex;align-items:center;gap:4px;border-radius:20px;padding:1px 8px;
  font-size:9px;border:1px solid}
.lectura .chip.c-ocr{background:rgba(123,146,232,.12);border-color:#7e92e8;color:#9fb0ee}
.lectura .chip.c-adu{background:rgba(255,90,90,.16);border-color:var(--rojo);color:#ff8a8a}
.lectura .chip.c-otro{background:rgba(154,138,149,.12);border-color:var(--dim);color:var(--dim)}
.lectura .firma-cor{color:var(--gold);font-size:9px;margin-top:5px}

/* fila de fuentes + acta + aportar (mock 05) */
.fuentes{display:flex;align-items:center;gap:8px;padding:6px 16px 2px;
  font-size:10px;color:var(--dim);justify-content:center}
.fuentes .src{display:flex;align-items:center;gap:5px;border:1px solid var(--line);
  border-radius:6px;padding:5px 9px}
.fuentes .src.on{border-color:var(--acento);color:var(--ink)}
.fuentes .src .dot{width:6px;height:6px;border-radius:50%;background:var(--ink3)}
.fuentes .src.on .dot{background:var(--ok)}
/* chip-fuente como LINK al acta de la registraduría (ed): dorado, clicable */
.fuentes a.src{cursor:pointer;text-decoration:none;color:var(--dim)}
.fuentes a.src.on{border-color:var(--gold);color:var(--gold)}
.fuentes a.src.on .dot{background:var(--gold)}
.fuentes a.src:active{transform:scale(.96)}
.acta-link{text-align:center;padding:4px 0 2px}
.acta-link a{color:var(--gold);font-size:11px;text-decoration:none;
  border-bottom:1px dotted var(--gold)}

/* ---------- FOOTER de pulgar: ‹ atrás · 1ª · 2ª (+ iconito vista en mesa) ---------- */
#pulgar{
  display:flex;align-items:center;gap:10px;flex:none;
  padding:9px 14px 11px;border-top:1px solid var(--line);background:var(--bg);
}
#p-volver{
  flex:1;height:40px;border-radius:8px;   /* 50% del footer (ed) · +25% alto */
  background:var(--bg2);border:1px solid var(--line);color:var(--ink);
  font-family:var(--mono);font-size:17px;cursor:pointer;
}
.vueltas{display:flex;gap:8px;flex:1;justify-content:stretch}   /* el otro 50% */
.vueltas button{
  flex:1;min-width:0;padding:11px 8px;border-radius:8px;cursor:pointer;  /* 25% c/u · +25% alto */
  background:var(--bg2);border:1px solid var(--line2);color:var(--ink);
  font-family:var(--mono);font-size:14px;font-weight:700;
  transition:background .25s,color .25s,border-color .25s;
}
.vueltas button.activa{background:var(--acento);color:var(--chasis);
  border-color:var(--acento)}
.vueltas button.morphing{border-color:var(--acento);color:var(--acento)}
#vista-toggle{
  width:36px;height:38px;flex:none;border-radius:8px;display:none;
  align-items:center;justify-content:center;
  background:var(--bg2);border:1px solid var(--line2);cursor:pointer;color:var(--dim);
}
#vista-toggle.on{display:none}   /* botón ▦ de comparación retirado (nacional e internacional) */
#vista-toggle.activa{background:var(--acento);color:var(--chasis)}

/* medidor de marea (al morfear / en comparar) — gradiente divergente */
#marea{display:none;padding:4px 16px 0}
#marea.on{display:block}
#marea .bar{height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--azul),#2a1430,var(--acento))}
#marea .txt{text-align:center;color:var(--dim);font-size:10px;padding-top:4px}

/* vista "las dos al tiempo" (mock 04): mayo arriba, junio abajo */
#dos-wrap{flex:1;display:none;flex-direction:column;min-height:0;padding:6px 14px}
#dos-wrap.on{display:flex}
.dos-row{flex:1;display:flex;align-items:center;gap:12px;min-height:0}
.dos-row svg{height:100%;max-height:38vh;flex:none}
.dos-row .lbl{color:var(--dim);font-size:12px;line-height:1.5}
.dos-delta{text-align:center;color:var(--gold);font-size:12px;padding:2px 0}

/* ---------- SELECTOR (overlay alfabético / buscador) ---------- */
#selector{
  position:fixed;inset:0;background:#140510f2;z-index:20;display:none;
  flex-direction:column;padding:18px 14px;backdrop-filter:blur(3px);
}
#selector.on{display:flex}
#selector input{
  background:var(--bg2);border:1px solid var(--line2);color:var(--ink);
  font-family:var(--mono);font-size:15px;padding:12px;border-radius:10px;
  margin-bottom:12px;outline:none;
}
#selector input:focus{border-color:var(--acento)}
#sel-lista{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
#sel-lista .item{padding:13px 10px;border-bottom:1px solid var(--line);
  cursor:pointer;font-size:14px}
#sel-lista .item .sub{color:var(--ink3);font-size:11px}
#sel-lista .item:active{background:var(--bg2)}
#sel-cerrar{align-self:flex-end;background:none;border:none;color:var(--dim);
  font-size:22px;cursor:pointer;margin-bottom:6px}
#cor-cerrar{position:absolute;top:8px;right:14px;background:none;border:none;
  color:var(--dim);font-size:22px;line-height:1;cursor:pointer;padding:0}

/* ---------- FLUJO TESTIGO (overlay) — gateado por estado de la mesa ---------- */
#testigo{
  position:fixed;inset:0;background:var(--bg);z-index:25;display:none;
  flex-direction:column;padding:22px 18px;text-align:center;
}
#testigo.on{display:flex}
/* corregir lectura (revisor) — form gateado por la cookie del backend */
/* popup centrado (modal) sobre un velo — el contenido va igual (ed) */
#corregir{position:fixed;inset:0;background:rgba(10,2,8,.72);z-index:26;display:none;
  align-items:center;justify-content:center;padding:18px}
#corregir.on{display:flex}
.cor-card{background:#1a0814;border:1px solid var(--line);border-radius:16px;padding:24px 20px 20px;
  width:100%;max-width:380px;max-height:88vh;overflow-y:auto;position:relative;
  box-shadow:0 24px 70px rgba(0,0,0,.55);display:flex;flex-direction:column}
#cor-cuerpo{display:flex;flex-direction:column}
#corregir h2{color:var(--gold);font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;margin:6px 0 16px;text-align:center}
#corregir .fila{display:flex;align-items:center;gap:10px;margin:9px 0;max-width:360px;width:100%;align-self:center}
#corregir .fila label{flex:1;text-align:left;color:var(--ink);font-size:14px}
#corregir .fila input{width:96px;font-family:var(--mono);font-size:16px;padding:9px;
  border-radius:8px;background:var(--bg2);border:1px solid var(--line);color:var(--ink);text-align:center}
#corregir .fila.cep input{border-color:var(--acento)} #corregir .fila.dle input{border-color:var(--azul)}
#corregir .cor-motivo-row{display:flex;align-items:center;gap:10px;margin:12px 0 2px;max-width:360px;width:100%;align-self:center}
#corregir .cor-motivo-row label{flex:none;color:var(--ink);font-size:14px}
#corregir select{flex:1;font-family:var(--mono);font-size:14px;padding:9px;border-radius:8px;
  background:var(--bg2);border:1px solid var(--line);color:var(--ink)}
#corregir textarea{max-width:360px;width:100%;align-self:center;margin:10px 0;min-height:54px;
  font-family:var(--mono);font-size:13px;padding:9px;border-radius:8px;background:var(--bg2);
  border:1px solid var(--line);color:var(--ink);resize:vertical}
#corregir .enviar{max-width:360px;width:100%;align-self:center;font-family:var(--mono);
  font-size:14px;padding:13px;border-radius:10px;background:var(--gold);color:#2a1a05;border:none;
  font-weight:700;cursor:pointer;margin-top:6px}
#corregir .enviar:active{transform:scale(.98)}
#corregir .msg{text-align:center;margin-top:12px;font-size:13px;min-height:18px}
#corregir .msg.ok{color:var(--ok)} #corregir .msg.err{color:var(--acento)}
#testigo h2{color:var(--acento);font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;margin:6px 0 14px}
#testigo .estado{margin:14px 0;color:var(--dim);font-size:13px;line-height:1.6}
#testigo .estado b{display:block;font-size:15px;margin-bottom:4px}
#testigo .estado.ambar b{color:var(--ambar)} #testigo .estado.ok b{color:var(--ok)}
#testigo .dropzone{
  border:2px dashed var(--acento);border-radius:14px;padding:30px 18px;
  margin:14px 0;color:var(--acento);font-size:13px;cursor:pointer;
}
#testigo .dropzone.has{border-color:var(--ok);color:var(--ink)}
#testigo .nota{color:var(--ink3);font-size:10px;margin-top:10px;line-height:1.5}
#testigo button{
  font-family:var(--mono);font-size:13px;padding:13px;border-radius:10px;
  cursor:pointer;border:none;margin-top:12px;font-weight:700;
}
#testigo .primario{background:var(--acento);color:var(--chasis)}
#testigo .gold{background:var(--bg2);border:1px solid var(--gold);color:var(--gold)}
#testigo .bloqueado{background:#160611;border:1px solid #3a2030;color:var(--ink3);
  cursor:not-allowed}
#testigo .secundario{background:none;border:1px solid var(--line2);color:var(--dim)}
#testigo .cookie{display:inline-block;border:1px solid var(--acento);
  border-radius:5px;padding:4px 10px;color:var(--acento);font-size:11px;margin:8px 0}

.oculto{display:none!important}

/* ---------- FLUIDEZ entre capas (AJUSTE 2, Sonqo 2026-06-23) ----------
   El viaje entre niveles (Colombia→depto→muni→puesto→mesa y al volver) se
   anima: no hay cortes secos. Dos técnicas, ambas vanilla y baratas en móvil
   porque solo tocan opacity+transform (el compositor las maneja en GPU, sin
   reflow):
   - cross-fade entre las vistas mapa/muni/mesa (.fx-*).
   - en la bisagra muni el mapa "se licúa" y las bolitas emergen (.licua).
   El zoom continuo del mapa (viewBox interpolado) lo hace app.js por rAF. */

/* las tres vistas se superponen en el lienzo para poder fundir una sobre otra.
   #mapa ya es position estático ocupando el lienzo; muni/mesa van absolutas. */
#muni-view,#mesa-view{
  position:absolute;inset:0;display:flex;flex-direction:column;min-height:0;
}
/* will-change solo durante la transición (lo pone/quita app.js con .fx-anim)
   para no clavar capas de compositor de más en móviles modestos. */
.fx-anim{will-change:opacity,transform}
/* entrando: arranca translúcida y un pelo adentro/afuera según la dirección */
.fx-enter{opacity:0}
.fx-enter-bajando{transform:scale(.94)}     /* bajo de capa: la nueva crece al entrar */
.fx-enter-subiendo{transform:scale(1.06)}   /* subo de capa: la nueva se asienta desde el zoom */
.fx-in{opacity:1;transform:none;
  transition:opacity .4s ease,transform .4s cubic-bezier(.22,.61,.36,1)}
/* saliendo: se desvanece y se va en la dirección inversa */
.fx-exit{opacity:1;transform:none}
.fx-out{opacity:0;
  transition:opacity .34s ease,transform .34s cubic-bezier(.55,.06,.68,.19)}
.fx-out-bajando{transform:scale(1.08)}       /* la vieja se aleja hacia el zoom */
.fx-out-subiendo{transform:scale(.92)}       /* la vieja se encoge al subir */

/* bisagra: el mapa se licúa (blur+fade) cuando deja paso a las bolitas */
/* municipio se LICÚA en gente: desvanecimiento largo y suave (ed) — no desaparece
   de golpe, se va deshaciendo (blur creciente + fade-out con ease-out). */
/* fade MÁS RÁPIDO que el respiro (240ms) de la grilla: así el vector llega a
   opacity 0 ANTES de que la grilla lo tape / se oculte -> sin pop al desaparecer (ed). */
#mapa.licua{transition:opacity .24s ease-out,filter .24s ease-out,transform .24s ease-out;
  opacity:0;filter:blur(11px);transform:scale(1.16)}

/* respeto a quien pide menos movimiento */
@media (prefers-reduced-motion:reduce){
  .fx-in,.fx-out{transition:opacity .2s ease}
  .fx-enter-bajando,.fx-enter-subiendo,.fx-out-bajando,.fx-out-subiendo{transform:none}
  #mapa.licua{filter:none;transform:none}
}

/* respiración de las bolitas minoritarias (donde el bastión ahoga) */
@keyframes respira{0%,100%{opacity:.85}50%{opacity:1}}