/* =====================================================================
   ERM 2026 — Sistema de interfaz
   ---------------------------------------------------------------------
   El contexto de uso manda sobre las decisiones de diseno:

   · El registrador digita desde el celular, de pie, en un local escolar,
     contra un acta de papel. Prioridad: campos grandes, foco evidente,
     cero ambiguedad entre una lista y la siguiente.
   · El supervisor revisa decenas de actas seguidas comparando foto contra
     cifras. Prioridad: escaneo rapido y decision binaria.
   · El personero mira resultados durante horas, de noche. Prioridad:
     jerarquia (quien gana, cuanto falta) y descanso visual.

   De ahi salen: modo oscuro real, escala tipografica corta, foco siempre
   visible y contraste AA en todo texto que porte informacion.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------- */
:root{
  /* Escala tipografica (base 14, razon ~1.2) */
  --t-xs:11.5px; --t-sm:12.5px; --t-md:13.5px; --t-base:14px;
  --t-lg:16px;   --t-xl:19px;   --t-2xl:23px;  --t-3xl:30px;

  /* Espaciado */
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:20px; --e-6:24px; --e-8:32px;

  --radio:10px; --radio-sm:7px; --radio-lg:14px;
  --lateral:248px;
  --transicion:.16s cubic-bezier(.4,0,.2,1);

  /* --- Color: claro --- */
  --fondo:#f1f4f9;
  --panel:#ffffff;
  --panel-2:#f7f9fc;
  --panel-3:#eef2f8;
  --borde:#dfe5ee;
  --borde-fuerte:#c6d0de;

  --texto:#16202f;
  --texto-2:#53627a;
  --texto-3:#626e85;          /* 5.1:1 sobre panel, 4.7:1 sobre fondo: AA en todo */
  --texto-debil:#98a4b8;      /* solo decorativo, nunca texto util */

  --primario:#1b3faf;
  --primario-2:#2458d8;
  --primario-suave:#eaf0ff;
  --primario-borde:#c7d7fb;

  --verde:#046c50; --verde-suave:#e3f5ee; --verde-borde:#b6e2d2;
  --ambar:#9a4708; --ambar-suave:#fdf1e3; --ambar-borde:#f2d6b3;
  --rojo:#ad1a1a;  --rojo-suave:#fdebeb;  --rojo-borde:#f3c4c4;
  --gris:#5b6b7c;  --gris-suave:#eaeef4;

  /* La barra lateral tiene su propio subsistema de color */
  --lat-fondo:#101a2d;
  --lat-panel:#1a2740;
  --lat-texto:#b8c5d9;
  --lat-texto-2:#8496af;
  --lat-activo:#2458d8;

  --sombra-1:0 1px 2px rgba(15,23,42,.05);
  --sombra-2:0 1px 3px rgba(15,23,42,.06), 0 6px 16px -4px rgba(15,23,42,.08);
  --sombra-3:0 8px 28px -6px rgba(15,23,42,.18);

  color-scheme:light;
}

/* --- Color: oscuro, siguiendo la preferencia del sistema --- */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --fondo:#0a1120;
    --panel:#131d30;
    --panel-2:#18243a;
    --panel-3:#1e2c46;
    --borde:#26344c;
    --borde-fuerte:#35475f;

    --texto:#e9eff8;
    --texto-2:#a7b6cc;
    --texto-3:#8fa0b8;
    --texto-debil:#6b7b93;

    --primario:#8fb2ff;
    --primario-2:#5c8dfb;
    --primario-suave:#17264a;
    --primario-borde:#2c4374;

    --verde:#4fd1a5; --verde-suave:#102f28; --verde-borde:#1e5445;
    --ambar:#f0b36b; --ambar-suave:#332310; --ambar-borde:#5c4020;
    --rojo:#f98a8a;  --rojo-suave:#33161a;  --rojo-borde:#5e2a2e;
    --gris:#93a3b8;  --gris-suave:#1e2c46;

    --lat-fondo:#070d18;
    --lat-panel:#141f34;
    --lat-texto:#aebdd3;
    --lat-texto-2:#7c8ca6;

    --sombra-1:0 1px 2px rgba(0,0,0,.4);
    --sombra-2:0 1px 3px rgba(0,0,0,.4), 0 6px 16px -4px rgba(0,0,0,.5);
    --sombra-3:0 8px 28px -6px rgba(0,0,0,.6);

    color-scheme:dark;
  }
}

/* --- Color: oscuro elegido a mano, gana sobre la preferencia del sistema --- */
:root[data-tema="oscuro"]{
  --fondo:#0a1120; --panel:#131d30; --panel-2:#18243a; --panel-3:#1e2c46;
  --borde:#26344c; --borde-fuerte:#35475f;
  --texto:#e9eff8; --texto-2:#a7b6cc; --texto-3:#8fa0b8; --texto-debil:#6b7b93;
  --primario:#8fb2ff; --primario-2:#5c8dfb; --primario-suave:#17264a; --primario-borde:#2c4374;
  --verde:#4fd1a5; --verde-suave:#102f28; --verde-borde:#1e5445;
  --ambar:#f0b36b; --ambar-suave:#332310; --ambar-borde:#5c4020;
  --rojo:#f98a8a;  --rojo-suave:#33161a;  --rojo-borde:#5e2a2e;
  --gris:#93a3b8;  --gris-suave:#1e2c46;
  --lat-fondo:#070d18; --lat-panel:#141f34; --lat-texto:#aebdd3; --lat-texto-2:#7c8ca6;
  --sombra-1:0 1px 2px rgba(0,0,0,.4);
  --sombra-2:0 1px 3px rgba(0,0,0,.4), 0 6px 16px -4px rgba(0,0,0,.5);
  --sombra-3:0 8px 28px -6px rgba(0,0,0,.6);
  color-scheme:dark;
}

/* ---------------------------------------------------------------------
   2. Base
   --------------------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Segoe UI",system-ui,-apple-system,Inter,Roboto,Arial,sans-serif;
  font-size:var(--t-base);
  line-height:1.5;
  color:var(--texto);
  background:var(--fondo);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--primario-2);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0;font-weight:640;letter-spacing:-.011em;line-height:1.3}
svg{display:block}

/* Foco visible en todo elemento interactivo: sin esto, navegar con el
   teclado es navegar a ciegas. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--primario-2);
  outline-offset:2px;
  border-radius:var(--radio-sm);
}
:where(a,button,input,select,textarea):focus:not(:focus-visible){outline:none}

/* Salto al contenido, para teclado y lectores de pantalla */
.saltar{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--primario-2);color:#fff;padding:10px 16px;
  border-radius:0 0 var(--radio-sm) 0;font-weight:600;font-size:var(--t-md);
}
.saltar:focus{left:0;text-decoration:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------------------------------------------------------------------
   3. Estructura
   --------------------------------------------------------------------- */
.app{display:flex;min-height:100vh}

.lateral{
  width:var(--lateral);flex:0 0 var(--lateral);
  background:var(--lat-fondo);color:var(--lat-texto);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
  border-right:1px solid rgba(255,255,255,.06);
}
.marca{
  display:flex;align-items:center;gap:var(--e-3);
  padding:var(--e-5) var(--e-4) var(--e-4);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.marca__logo{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,#2458d8,#7c3aed);color:#fff;
  font-weight:800;font-size:var(--t-sm);letter-spacing:.04em;flex:0 0 38px;
  box-shadow:0 2px 8px rgba(36,88,216,.4);
}
.marca strong{display:block;color:#fff;font-size:var(--t-lg);line-height:1.1}
.marca small{color:var(--lat-texto-2);font-size:var(--t-xs)}

.nav{padding:var(--e-3) var(--e-2);flex:1;overflow-y:auto}
.nav__item{
  display:flex;align-items:center;gap:var(--e-3);
  padding:9px var(--e-3);margin-bottom:2px;border-radius:var(--radio-sm);
  color:var(--lat-texto);font-size:var(--t-md);font-weight:500;
  transition:background var(--transicion),color var(--transicion);
}
.nav__item:hover{background:var(--lat-panel);color:#fff;text-decoration:none}
.nav__item.is-activo{background:var(--lat-activo);color:#fff;font-weight:600}
.nav__item.is-activo:hover{background:var(--lat-activo)}
.nav__ico{flex:0 0 18px;width:18px;height:18px;opacity:.72}
.nav__item:hover .nav__ico,.nav__item.is-activo .nav__ico{opacity:1}

.lateral__pie{padding:var(--e-3);border-top:1px solid rgba(255,255,255,.07)}
.usuario{display:flex;gap:var(--e-3);align-items:center;margin-bottom:var(--e-2)}
.usuario__avatar{
  width:34px;height:34px;border-radius:50%;flex:0 0 34px;
  background:linear-gradient(135deg,#3a5488,#25365a);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:var(--t-md);
}
.usuario__datos{min-width:0}
.usuario__datos strong{display:block;color:#fff;font-size:var(--t-md);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.usuario__datos small{color:var(--lat-texto-2);font-size:var(--t-xs)}
.usuario__ambito{
  font-size:var(--t-xs);color:var(--lat-texto);background:var(--lat-panel);
  border:1px solid rgba(255,255,255,.07);
  padding:7px var(--e-2);border-radius:var(--radio-sm);
  margin-bottom:var(--e-2);line-height:1.4;
}
.salir{
  display:block;text-align:center;font-size:var(--t-sm);color:var(--lat-texto);
  padding:8px;border:1px solid rgba(255,255,255,.1);border-radius:var(--radio-sm);
  transition:background var(--transicion);
}
.salir:hover{background:var(--lat-panel);color:#fff;text-decoration:none}

.principal{flex:1;min-width:0;display:flex;flex-direction:column}
.barra{
  display:flex;justify-content:space-between;align-items:center;
  gap:var(--e-3);flex-wrap:wrap;
  padding:var(--e-4) var(--e-6);
  background:var(--panel);border-bottom:1px solid var(--borde);
  position:sticky;top:0;z-index:30;
}
.barra h1{font-size:var(--t-xl)}
.barra__sub{margin:2px 0 0;color:var(--texto-2);font-size:var(--t-sm)}
.barra__acciones{display:flex;align-items:center;gap:var(--e-2);flex-wrap:wrap}
.reloj{
  font-variant-numeric:tabular-nums;color:var(--texto-2);font-size:var(--t-sm);
  background:var(--panel-3);padding:6px 11px;border-radius:99px;font-weight:500;
}
.contenido{padding:var(--e-5) var(--e-6);flex:1}
.pie{padding:var(--e-4) var(--e-6);color:var(--texto-3);font-size:var(--t-sm);
  border-top:1px solid var(--borde)}

/* Conmutador de tema */
.tema{
  display:inline-grid;place-items:center;width:34px;height:34px;
  border:1px solid var(--borde-fuerte);border-radius:var(--radio-sm);
  background:var(--panel);color:var(--texto-2);cursor:pointer;
  transition:background var(--transicion),color var(--transicion);
}
.tema:hover{background:var(--panel-3);color:var(--texto)}
.tema svg{width:17px;height:17px}
.tema__luna{display:none}
:root[data-tema="oscuro"] .tema__sol{display:none}
:root[data-tema="oscuro"] .tema__luna{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) .tema__sol{display:none}
  :root:not([data-tema="claro"]) .tema__luna{display:block}
}

/* ---------------------------------------------------------------------
   4. Tarjetas y rejillas
   --------------------------------------------------------------------- */
.tarjeta{
  background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);
  box-shadow:var(--sombra-1);margin-bottom:var(--e-4);
}
.tarjeta__cab{
  display:flex;justify-content:space-between;align-items:center;gap:var(--e-3);
  padding:var(--e-3) var(--e-4);border-bottom:1px solid var(--borde);flex-wrap:wrap;
}
.tarjeta__cab h2{font-size:var(--t-lg);letter-spacing:-.012em}
.tarjeta__cab p{margin:2px 0 0;font-size:var(--t-sm);color:var(--texto-2)}
.tarjeta__cuerpo{padding:var(--e-4)}
.tarjeta__cuerpo--plano{padding:0}

.rejilla{display:grid;gap:var(--e-4)}
.rejilla--4{grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr))}
.rejilla--3{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.rejilla--2{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.rejilla--2a{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
@media(max-width:980px){.rejilla--2a{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------
   5. Indicadores
   --------------------------------------------------------------------- */
.kpi{
  background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);
  padding:var(--e-4);box-shadow:var(--sombra-1);position:relative;overflow:hidden;
}
.kpi__etq{
  font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.06em;
  color:var(--texto-3);font-weight:680;
}
.kpi__val{
  font-size:var(--t-2xl);font-weight:700;margin:var(--e-2) 0 2px;
  font-variant-numeric:tabular-nums;letter-spacing:-.025em;line-height:1.05;
}
.kpi__nota{font-size:var(--t-sm);color:var(--texto-2);line-height:1.4}
.kpi--azul  .kpi__val{color:var(--primario)}
.kpi--verde .kpi__val{color:var(--verde)}
.kpi--ambar .kpi__val{color:var(--ambar)}
.kpi--rojo  .kpi__val{color:var(--rojo)}

.progreso{height:7px;background:var(--gris-suave);border-radius:99px;
  overflow:hidden;margin-top:10px}
.progreso__barra{height:100%;background:var(--primario-2);border-radius:99px;
  transition:width .6s cubic-bezier(.4,0,.2,1)}
.progreso--verde .progreso__barra{background:var(--verde)}
.progreso--fina{height:5px}

/* ---------------------------------------------------------------------
   6. Resultados
   --------------------------------------------------------------------- */
.res{display:flex;flex-direction:column;gap:var(--e-3)}
.res__fila{display:grid;grid-template-columns:1fr auto;gap:var(--e-1) var(--e-3);
  align-items:center}
.res__nom{display:flex;align-items:center;gap:var(--e-2);min-width:0}
.res__sigla{
  font-weight:640;line-height:1.3;min-width:0;font-size:var(--t-md);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.res__cifras{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.res__pct{font-weight:700;font-size:var(--t-lg);letter-spacing:-.02em}
.res__votos{font-size:var(--t-xs);color:var(--texto-2)}
.res__pista{grid-column:1/-1;height:9px;background:var(--gris-suave);
  border-radius:99px;overflow:hidden}
.res__barra{height:100%;border-radius:99px;transition:width .6s cubic-bezier(.4,0,.2,1)}
.res__fila--lider .res__sigla::after{
  content:"PUNTERO";font-size:9px;font-weight:800;color:var(--verde);
  background:var(--verde-suave);border:1px solid var(--verde-borde);
  padding:2px 6px;border-radius:99px;margin-left:8px;letter-spacing:.06em;
  vertical-align:middle;white-space:nowrap;
}

/* ---------------------------------------------------------------------
   7. Tablas
   --------------------------------------------------------------------- */
.tabla-env{overflow-x:auto;position:relative}
table.tabla{width:100%;border-collapse:collapse;font-size:var(--t-md)}
.tabla th{
  text-align:left;padding:10px var(--e-4);background:var(--panel-2);
  border-bottom:1px solid var(--borde);color:var(--texto-2);
  font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.05em;
  font-weight:680;white-space:nowrap;
}
.tabla td{padding:11px var(--e-4);border-bottom:1px solid var(--borde);
  vertical-align:middle}
.tabla tbody tr{transition:background var(--transicion)}
.tabla tbody tr:hover{background:var(--panel-2)}
.tabla tbody tr:last-child td{border-bottom:0}
.tabla .num{text-align:right;font-variant-numeric:tabular-nums}
.tabla .cen{text-align:center}

.vacio{
  padding:var(--e-8) var(--e-4);text-align:center;color:var(--texto-2);
  font-size:var(--t-md);line-height:1.6;
}
.vacio strong{display:block;color:var(--texto);font-size:var(--t-lg);
  margin-bottom:var(--e-1)}

/* ---------------------------------------------------------------------
   8. Etiquetas de estado
   --------------------------------------------------------------------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;
  font-size:var(--t-xs);font-weight:680;letter-spacing:.01em;white-space:nowrap;
  border:1px solid transparent;
}
/* El punto evita que el estado dependa unicamente del color */
.badge::before{content:"";width:6px;height:6px;border-radius:50%;
  background:currentColor;flex:0 0 6px}
.badge--gris {background:var(--gris-suave);color:var(--gris);border-color:var(--borde)}
.badge--verde{background:var(--verde-suave);color:var(--verde);border-color:var(--verde-borde)}
.badge--ambar{background:var(--ambar-suave);color:var(--ambar);border-color:var(--ambar-borde)}
.badge--rojo {background:var(--rojo-suave);color:var(--rojo);border-color:var(--rojo-borde)}
.badge--azul {background:var(--primario-suave);color:var(--primario);border-color:var(--primario-borde)}

/* ---------------------------------------------------------------------
   9. Formularios
   --------------------------------------------------------------------- */
.campo{margin-bottom:var(--e-4)}
.campo label{display:block;font-size:var(--t-sm);font-weight:620;
  color:var(--texto-2);margin-bottom:6px}
.campo .ayuda{font-size:var(--t-xs);color:var(--texto-3);margin-top:5px;line-height:1.45}
input[type=text],input[type=password],input[type=email],input[type=number],
input[type=date],input[type=file],select,textarea{
  width:100%;padding:10px 12px;
  border:1px solid var(--borde-fuerte);border-radius:var(--radio-sm);
  font-size:var(--t-md);font-family:inherit;color:var(--texto);
  background:var(--panel);
  transition:border-color var(--transicion),box-shadow var(--transicion);
}
input::placeholder,textarea::placeholder{color:var(--texto-debil)}
input:hover,select:hover,textarea:hover{border-color:var(--gris)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--primario-2);
  box-shadow:0 0 0 3px var(--primario-suave);
}
input[readonly]{background:var(--panel-3);color:var(--texto-2);border-style:dashed}
textarea{resize:vertical;min-height:72px}
.fila-campos{display:grid;gap:var(--e-4);
  grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}

.btn{
  display:inline-flex;align-items:center;gap:7px;justify-content:center;
  padding:10px 16px;border-radius:var(--radio-sm);border:1px solid transparent;
  background:var(--primario-2);color:#fff;font-size:var(--t-md);font-weight:620;
  cursor:pointer;font-family:inherit;line-height:1.2;white-space:nowrap;
  transition:background var(--transicion),border-color var(--transicion),
             transform var(--transicion);
}
.btn:hover{background:var(--primario);text-decoration:none;color:#fff}
.btn:active{transform:translateY(1px)}
.btn--claro{background:var(--panel);color:var(--texto);border-color:var(--borde-fuerte)}
.btn--claro:hover{background:var(--panel-3);color:var(--texto);border-color:var(--gris)}
.btn--verde{background:var(--verde);color:#fff}
.btn--verde:hover{background:var(--verde);filter:brightness(.9)}
.btn--rojo{background:var(--rojo);color:#fff}
.btn--rojo:hover{background:var(--rojo);filter:brightness(.9)}
.btn--sm{padding:7px 12px;font-size:var(--t-sm)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn svg{width:15px;height:15px;flex:0 0 15px}
.acciones{display:flex;gap:var(--e-2);flex-wrap:wrap;align-items:center}

/* En oscuro, verde y rojo son colores claros: el texto encima va oscuro */
:root[data-tema="oscuro"] .btn--verde,
:root[data-tema="oscuro"] .btn--rojo{color:#0a1120}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) .btn--verde,
  :root:not([data-tema="claro"]) .btn--rojo{color:#0a1120}
}

/* ---------------------------------------------------------------------
   10. Filtros
   --------------------------------------------------------------------- */
.filtros{
  display:flex;gap:var(--e-3);flex-wrap:wrap;align-items:flex-end;
  background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);
  padding:var(--e-3) var(--e-4);margin-bottom:var(--e-4);box-shadow:var(--sombra-1);
}
.filtros .campo{margin:0;min-width:165px;flex:1 1 165px}
.filtros .campo--auto{flex:0 0 auto;min-width:0}

.conmutador{display:inline-flex;border:1px solid var(--borde-fuerte);
  border-radius:var(--radio-sm);overflow:hidden;background:var(--panel)}
.conmutador a{padding:9px 14px;font-size:var(--t-sm);color:var(--texto-2);
  font-weight:620;transition:background var(--transicion)}
.conmutador a:hover{background:var(--panel-3);text-decoration:none}
.conmutador a.is-activo{background:var(--primario-2);color:#fff}

/* ---------------------------------------------------------------------
   11. Alertas
   --------------------------------------------------------------------- */
.alerta{
  margin:var(--e-4) var(--e-6) 0;padding:12px var(--e-4);
  border-radius:var(--radio-sm);font-size:var(--t-md);
  border:1px solid;line-height:1.5;border-left-width:4px;
}
.alerta--exito{background:var(--verde-suave);border-color:var(--verde-borde);color:var(--verde)}
.alerta--error{background:var(--rojo-suave);border-color:var(--rojo-borde);color:var(--rojo)}
.alerta--aviso{background:var(--ambar-suave);border-color:var(--ambar-borde);color:var(--ambar)}
.alerta--info {background:var(--primario-suave);border-color:var(--primario-borde);color:var(--primario)}
.alerta a{color:inherit;text-decoration:underline;font-weight:620}
.contenido .alerta{margin:0 0 var(--e-4)}

/* ---------------------------------------------------------------------
   12. Acceso
   --------------------------------------------------------------------- */
.acceso{min-height:100vh;display:grid;place-items:center;padding:var(--e-5);
  background:linear-gradient(145deg,#0a1120 0%,#152a5e 55%,#1b3faf 100%)}
.acceso__caja{width:100%;max-width:400px;background:var(--panel);
  border-radius:var(--radio-lg);padding:var(--e-8) var(--e-6);box-shadow:var(--sombra-3)}
.acceso__marca{text-align:center;margin-bottom:var(--e-6)}
.acceso__logo{width:58px;height:58px;border-radius:var(--radio-lg);margin:0 auto var(--e-3);
  display:grid;place-items:center;font-weight:800;color:#fff;font-size:var(--t-lg);
  background:linear-gradient(135deg,#2458d8,#7c3aed);box-shadow:0 4px 14px rgba(36,88,216,.4)}
.acceso__marca h1{font-size:var(--t-xl)}
.acceso__marca p{margin:6px 0 0;font-size:var(--t-sm);color:var(--texto-2)}
@media(max-width:480px){
  .acceso{padding:var(--e-3)}
  .acceso__caja{padding:var(--e-6) var(--e-5)}
  .acceso__caja input{font-size:16px;padding:12px}
}

/* ---------------------------------------------------------------------
   13. Etiquetas de bloque
   --------------------------------------------------------------------- */
.etq-bloque{display:block;font-size:var(--t-sm);font-weight:640;
  color:var(--texto-2);margin-bottom:var(--e-2)}

.totalizador__etq{display:block;font-size:var(--t-xs);text-transform:uppercase;
  letter-spacing:.06em;color:var(--texto-3);font-weight:680;margin-bottom:3px}

/* ---------------------------------------------------------------------
   14. Visor del acta
   --------------------------------------------------------------------- */
.tarjeta--visor{display:flex;flex-direction:column;overflow:hidden}
.visor{
  position:relative;background:#0a1120;border-top:1px solid var(--borde);
  border-bottom:1px solid var(--borde);
  height:min(62vh,620px);overflow:auto;
  display:flex;align-items:flex-start;justify-content:center;
}
.visor__img{width:100%;height:auto;display:block}
.visor__pdf{width:100%;height:100%;border:0;background:#fff}
.visor__vacio{margin:auto;text-align:center;color:#94a8c4;padding:var(--e-8);
  display:flex;flex-direction:column;gap:6px;align-items:center}
.visor__vacio svg{width:38px;height:38px;opacity:.45;margin-bottom:var(--e-1)}
.visor__vacio strong{color:#d3dded;font-size:var(--t-base)}
.visor__vacio span{font-size:var(--t-sm);max-width:260px}

/* ---------------------------------------------------------------------
   15. Simbolo de la organizacion
   --------------------------------------------------------------------- */
.simbolo{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  background:#fff;border:1px solid var(--borde);border-radius:var(--radio-sm);
  overflow:hidden;vertical-align:middle;
}
.simbolo img{width:100%;height:100%;object-fit:contain;display:block}
.simbolo--texto{color:#fff;font-weight:800;letter-spacing:.02em;
  border-color:transparent;font-size:9px;line-height:1;text-align:center;padding:2px}
.simbolo--sm{width:26px;height:26px}
.simbolo--sm.simbolo--texto{font-size:8px}
.simbolo--md{width:40px;height:40px}
.simbolo--lg{width:54px;height:54px}
.simbolo--lg.simbolo--texto{font-size:var(--t-sm)}

/* ---------------------------------------------------------------------
   16. Matriz acta x organizacion
   --------------------------------------------------------------------- */
.leyenda{display:grid;gap:var(--e-2) var(--e-4);
  grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}
.leyenda__item{display:flex;align-items:center;gap:var(--e-2);min-width:0}
.leyenda__nro{width:20px;height:20px;border-radius:5px;flex:0 0 20px;
  display:grid;place-items:center;background:var(--gris-suave);color:var(--texto-2);
  font-size:var(--t-xs);font-weight:700}
.leyenda__nombre{font-size:var(--t-sm);font-weight:620;line-height:1.25}

.tabla--matriz{font-size:var(--t-sm);border-collapse:separate;border-spacing:0}
.tabla--matriz th,.tabla--matriz td{border-bottom:1px solid var(--borde)}
.tabla--matriz .col-org{padding:7px 4px;min-width:46px}
.tabla--matriz .col-org__nro{display:block;font-size:10px;color:var(--texto-3);
  margin-top:3px;font-weight:700}
.tabla--matriz td.num{padding-left:6px;padding-right:6px;white-space:nowrap}
.tabla--matriz tfoot td{background:var(--panel-2);border-top:2px solid var(--borde-fuerte);
  border-bottom:0;position:sticky;bottom:0}
.tabla--matriz .col-fija{position:sticky;left:0;z-index:3;background:var(--panel);
  box-shadow:1px 0 0 var(--borde);min-width:112px}
.tabla--matriz thead .col-fija,.tabla--matriz tfoot .col-fija{z-index:4;background:var(--panel-2)}
.tabla--matriz tbody tr:hover .col-fija{background:var(--panel-2)}
.celda--lider{background:var(--verde-suave);font-weight:700;color:var(--verde)}

/* ---------------------------------------------------------------------
   17. Varios
   --------------------------------------------------------------------- */
.mini{font-size:var(--t-xs);color:var(--texto-3);line-height:1.4}
.mono{font-family:"Cascadia Mono",Consolas,"SF Mono",monospace;
  font-size:var(--t-sm);font-variant-numeric:tabular-nums}
.sep{height:1px;background:var(--borde);margin:var(--e-4) 0}
.pila{display:flex;flex-direction:column;gap:2px;min-width:0}
.pulso{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:currentColor;margin-right:6px;animation:pulso 2s infinite}
@keyframes pulso{0%,100%{opacity:1}50%{opacity:.25}}

.acciones--guardar{margin-top:var(--e-4)}
.acciones--guardar .btn{flex:1}

/* ---------------------------------------------------------------------
   18. Pantallas pequenas
   --------------------------------------------------------------------- */
@media(max-width:1100px){
  .tarjeta--visor{position:sticky;top:0;z-index:20;margin-bottom:var(--e-3);
    box-shadow:var(--sombra-3)}
  .tarjeta--visor .visor{height:38vh;transition:height var(--transicion)}
  .tarjeta--visor .tarjeta__cuerpo{padding:var(--e-3)}
}

@media(max-width:820px){
  .app{flex-direction:column}
  .lateral{width:100%;height:auto;position:static;flex:0 0 auto;border-right:0}
  .nav{display:flex;overflow-x:auto;padding:var(--e-2);gap:var(--e-1)}
  .nav__item{white-space:nowrap;margin:0}
  .lateral__pie{display:flex;gap:var(--e-2);align-items:center;flex-wrap:wrap}
  .usuario__ambito{margin:0;flex:1 1 100%}
  .barra{position:static}

  /* iOS hace zoom al enfocar un campo de menos de 16px: eso descoloca la
     pantalla justo cuando el registrador esta digitando cifras. */
  input[type=text],input[type=password],input[type=email],input[type=number],
  input[type=date],select,textarea{font-size:16px;padding:11px 12px}
  .btn{padding:11px 16px}
  .btn--sm{padding:9px 13px}
  .barra h1{font-size:var(--t-lg)}
  .filtros{padding:var(--e-3);gap:var(--e-2)}
  .filtros .campo{min-width:140px;flex:1 1 140px}
  .tarjeta__cuerpo{padding:var(--e-3)}
  .rejilla{gap:var(--e-3)}
  .tabla--matriz{font-size:var(--t-xs)}
  .tabla--matriz .col-fija{min-width:92px}
  .tabla--matriz .col-org{min-width:40px}
  .simbolo--sm{width:22px;height:22px}
}

@media(max-width:560px){
  .contenido,.barra,.pie{padding-left:var(--e-3);padding-right:var(--e-3)}
  .alerta{margin-left:var(--e-3);margin-right:var(--e-3)}
  .kpi__val{font-size:var(--t-xl)}
  .acciones--guardar{position:sticky;bottom:0;background:var(--panel);
    padding:var(--e-3) 0;border-top:1px solid var(--borde);z-index:10}
  .tabla th,.tabla td{padding:10px var(--e-3)}
  .simbolo--lg{width:44px;height:44px}
  .tabla-env::after{content:"";position:absolute;top:0;right:0;bottom:0;width:20px;
    background:linear-gradient(90deg,transparent,var(--panel));pointer-events:none}
}

/* ---------------------------------------------------------------------
   19. Panel principal del dashboard
   ---------------------------------------------------------------------
   Responde de un vistazo a las dos preguntas de la noche electoral:
   cuanto se ha contado y quien va ganando. Todo lo demas es secundario y
   va debajo, en indicadores mas pequenos.
   --------------------------------------------------------------------- */
.panel-jefe{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px;
  background:var(--borde);border:1px solid var(--borde);
  border-radius:var(--radio);overflow:hidden;margin-bottom:var(--e-4);
  box-shadow:var(--sombra-2);
}
.panel-jefe__avance,.panel-jefe__puntero{background:var(--panel);padding:var(--e-5)}
.panel-jefe__etq{
  display:block;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.07em;
  color:var(--texto-3);font-weight:700;margin-bottom:var(--e-2);
}
.panel-jefe__cifra{
  font-size:46px;font-weight:760;line-height:1;letter-spacing:-.035em;
  color:var(--primario);font-variant-numeric:tabular-nums;
}
.panel-jefe__cifra small{font-size:24px;font-weight:700;margin-left:2px;opacity:.65}
.panel-jefe__nota{margin:10px 0 0;font-size:var(--t-sm);color:var(--texto-2);line-height:1.45}

.puntero{display:flex;align-items:center;gap:var(--e-3)}
.puntero__datos{min-width:0}
.puntero__datos strong{
  display:block;font-size:var(--t-md);font-weight:640;line-height:1.3;
  color:var(--texto);
}
.puntero__pct{
  font-size:30px;font-weight:750;line-height:1.1;letter-spacing:-.03em;
  color:var(--verde);font-variant-numeric:tabular-nums;
}
.puntero--vacio{
  min-height:62px;align-items:center;color:var(--texto-3);font-size:var(--t-md);
}

@media(max-width:820px){
  .panel-jefe{grid-template-columns:1fr}
  .panel-jefe__avance,.panel-jefe__puntero{padding:var(--e-4)}
  .panel-jefe__cifra{font-size:38px}
  .panel-jefe__cifra small{font-size:20px}
  .puntero__pct{font-size:25px}
}

/* ---------------------------------------------------------------------
   21. Tablero del local (padron)
   ---------------------------------------------------------------------
   Reproduce el orden del material fisico: el local, sus mesas y las cuatro
   columnas de la cedula con su color. Los checks de arriba dejan a la vista
   solo las columnas que se van a digitar en el turno.
   --------------------------------------------------------------------- */
.columnas-check{
  display:grid;gap:var(--e-2);
  grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
}
.col-check{
  display:flex;align-items:center;gap:var(--e-2);cursor:pointer;
  border:1px solid var(--borde);border-radius:var(--radio-sm);
  padding:9px var(--e-3);background:var(--panel);
  transition:border-color var(--transicion),background var(--transicion);
}
.col-check:hover{border-color:var(--borde-fuerte);background:var(--panel-2)}
.col-check input{width:auto;flex:0 0 auto;margin:0}
.col-check__color{
  width:5px;align-self:stretch;border-radius:99px;flex:0 0 5px;
  background:var(--color-cedula);
}
.col-check__texto{min-width:0}
.col-check__texto strong{display:block;font-size:var(--t-md);font-weight:620;line-height:1.25}
.col-check__texto small{display:block;font-size:var(--t-xs);color:var(--texto-3);line-height:1.3}
.col-check--bloqueada{opacity:.45;cursor:not-allowed;background:var(--panel-3)}
.col-check--bloqueada:hover{border-color:var(--borde);background:var(--panel-3)}

.tabla--padron .col-cedula{position:relative;padding-top:13px}
.tabla--padron .col-cedula__barra{
  position:absolute;top:0;left:0;right:0;height:4px;background:var(--color-cedula);
}
.tabla--padron .col-fija{
  position:sticky;left:0;z-index:3;background:var(--panel);
  box-shadow:1px 0 0 var(--borde);
}
.tabla--padron thead .col-fija{z-index:4;background:var(--panel-2)}
.tabla--padron tbody tr:hover .col-fija{background:var(--panel-2)}

.celda-acta{
  display:inline-flex;flex-direction:column;align-items:center;gap:3px;
  text-decoration:none;padding:3px 6px;border-radius:var(--radio-sm);
  transition:background var(--transicion);
}
.celda-acta:hover{background:var(--panel-3);text-decoration:none}

/* Columnas apagadas por el filtro del turno */
.col-cedula.is-oculta,.celda-cedula.is-oculta{display:none}

/* ---------------------------------------------------------------------
   22. Aviso de cuadre por columna
   ---------------------------------------------------------------------
   Unico resto util del maquetado anterior en tarjetas: la grilla `cg-*`
   (seccion 25) reutiliza este aviso al pie de cada columna.
   --------------------------------------------------------------------- */
.cedula__aviso{font-size:var(--t-xs);font-weight:650;text-align:right;flex:1 1 auto}
.cedula__aviso.es-ok{color:var(--verde)}
.cedula__aviso.es-mal{color:var(--rojo)}

/* ---------------------------------------------------------------------
   23. Buscador sobre listas largas
   ---------------------------------------------------------------------
   Mejora progresiva sobre un <select>: si no hay JavaScript, el desplegable
   original sigue ahi y funciona. Con JavaScript, se escribe y se filtra.
   --------------------------------------------------------------------- */
.buscador{position:relative}
.buscador__oculto{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.buscador__campo{width:100%}
.buscador__conteo{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font-size:var(--t-xs);color:var(--texto-3);pointer-events:none;
  background:var(--panel);padding-left:6px;
}
.buscador__lista{
  position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);
  margin:0;padding:4px;list-style:none;max-height:min(46vh,320px);overflow-y:auto;
  background:var(--panel);border:1px solid var(--borde-fuerte);
  border-radius:var(--radio-sm);box-shadow:var(--sombra-3);
}
.buscador__opcion{
  padding:8px 10px;border-radius:5px;font-size:var(--t-md);cursor:pointer;
  line-height:1.35;
}
.buscador__opcion:hover,.buscador__opcion.es-activa{background:var(--primario-suave)}
.buscador__opcion[aria-selected="true"]{font-weight:650;color:var(--primario)}
.buscador__vacio{padding:12px 10px;font-size:var(--t-sm);color:var(--texto-3);text-align:center}

/* ---------------------------------------------------------------------
   24. Varias hojas de acta en el visor
   --------------------------------------------------------------------- */
.visor--multiple{display:block;padding:0}
.visor__hoja{margin:0;border-bottom:3px solid rgba(255,255,255,.12);scroll-margin-top:8px}
.visor__hoja:last-child{border-bottom:0}
.visor__etq{
  display:flex;align-items:center;gap:var(--e-2);flex-wrap:wrap;
  padding:6px 10px;background:rgba(10,17,32,.92);color:#cbd5e1;
  font-size:var(--t-xs);font-weight:650;position:sticky;top:0;z-index:2;
}
.visor__etq .mini{color:#8da2c0;font-weight:400}
.visor__etq a{margin-left:auto;color:#9ec5ff}
.visor--multiple .visor__pdf{height:min(58vh,560px)}

.respaldos{display:flex;gap:var(--e-2);flex-wrap:wrap}
.respaldo{
  display:flex;align-items:center;gap:var(--e-2);
  border:1px solid var(--borde);border-radius:var(--radio-sm);
  padding:6px 10px;background:var(--panel-2);
}
.respaldo__ir{font-size:var(--t-sm);font-weight:640}

/* ---------------------------------------------------------------------
   25. Seleccion multiple de ambitos
   ---------------------------------------------------------------------
   Asignar veinte mesas de una en una es inviable el dia de la eleccion, asi
   que el ultimo nivel se marca con checks, con filtro y atajos.
   --------------------------------------------------------------------- */
.seleccion{
  border:1px solid var(--borde-fuerte);border-radius:var(--radio-sm);
  background:var(--panel);overflow:hidden;
}
.seleccion__barra{
  display:flex;gap:6px;padding:8px;border-bottom:1px solid var(--borde);
  background:var(--panel-2);align-items:center;
}
.seleccion__filtro{flex:1;min-width:0;padding:7px 10px;font-size:var(--t-sm)}
.seleccion__lista{max-height:min(38vh,290px);overflow-y:auto;padding:4px}
.seleccion__item{
  display:flex;align-items:center;gap:var(--e-2);
  padding:7px 9px;border-radius:5px;cursor:pointer;font-size:var(--t-md);
  line-height:1.35;
}
.seleccion__item:hover{background:var(--panel-3)}
.seleccion__item input{width:auto;flex:0 0 auto;margin:0}
.seleccion__item span{min-width:0}
.seleccion__vacio{
  padding:var(--e-5);text-align:center;color:var(--texto-3);
  font-size:var(--t-sm);margin:0;
}
.seleccion__pie{
  padding:7px 10px;border-top:1px solid var(--borde);background:var(--panel-2);
  font-size:var(--t-xs);color:var(--texto-2);font-weight:650;
}

/* ---------------------------------------------------------------------
   26. La cedula como grilla
   ---------------------------------------------------------------------
   Asi es la cedula de papel: cada organizacion ocupa una franja horizontal
   y sus casillas quedan alineadas en las cuatro columnas. Donde no presenta
   lista, el espacio se conserva vacio para que la fila no se descuadre.
   --------------------------------------------------------------------- */
.cedula-grid{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--t-sm)}
.cedula-grid th,.cedula-grid td{border-bottom:1px solid var(--borde)}

/* Cabecera de cada columna, con su color y su check */
.cedula-grid .cg-col{
  position:relative;padding:14px 10px 10px;vertical-align:top;min-width:240px;
  background:var(--panel-2);text-align:left;
}
.cg-col__barra{position:absolute;top:0;left:0;right:0;height:5px;background:var(--color-cedula)}
.cg-col__check{
  display:flex;align-items:flex-start;gap:7px;cursor:pointer;
  font-size:var(--t-sm);font-weight:660;color:var(--texto);line-height:1.25;
  text-transform:none;letter-spacing:0;
}
.cg-col__check input{width:auto;flex:0 0 auto;margin:2px 0 0}
.cg-col__estado{margin-top:6px}

/* Primera columna: la organizacion, fija al desplazarse */
.cedula-grid .cg-org{
  position:sticky;left:0;z-index:3;background:var(--panel);
  box-shadow:1px 0 0 var(--borde);
  min-width:230px;max-width:300px;width:230px;padding:7px 10px;
  text-align:left;vertical-align:middle;
  font-weight:500;text-transform:none;letter-spacing:0;font-size:var(--t-sm);
}
/* El flex va dentro de la celda, nunca sobre ella: display:flex en un <th>
   o <td> lo saca del layout de tabla y las columnas dejan de alinearse. */
.cg-org__caja{display:flex;align-items:center;gap:var(--e-2);min-width:0}
.cedula-grid thead .cg-org,.cedula-grid tfoot .cg-org{background:var(--panel-2);z-index:4}
.cedula-grid tbody tr:hover .cg-org{background:var(--panel-2)}
.cg-org__nro{
  width:20px;height:20px;border-radius:5px;flex:0 0 20px;display:grid;place-items:center;
  background:var(--gris-suave);color:var(--texto-2);font-size:10.5px;font-weight:700;
}
.cg-org__txt{
  min-width:0;line-height:1.25;font-weight:620;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* Cada casilla: el simbolo y el campo, como en la cedula */
.cedula-grid .cg-celda{
  padding:5px 8px;text-align:right;white-space:nowrap;vertical-align:middle;
}
.cg-celda__caja{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.cg-celda__entrada{display:flex;align-items:center;gap:7px;justify-content:flex-end;min-width:0}
.cg-celda__candidato{
  width:clamp(110px,12vw,180px);white-space:normal;text-align:left;line-height:1.2;
  font-size:var(--t-xs);font-weight:620;color:var(--texto-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.cg-celda input{
  width:70px;flex:0 0 70px;text-align:right;font-variant-numeric:tabular-nums;font-weight:700;
  font-size:var(--t-md);padding:5px 7px;
}
.cg-celda .simbolo{opacity:.85}
.cg-celda--sin{background:repeating-linear-gradient(45deg,
  transparent,transparent 6px,var(--panel-3) 6px,var(--panel-3) 12px)}
.cg-celda--sin .simbolo{opacity:.3;filter:grayscale(1)}
.cg-celda__vacia{
  width:70px;text-align:center;color:var(--texto-debil);font-weight:700;
}

.cedula-grid tbody tr:nth-child(even) td{background:var(--panel-2)}
.cedula-grid tbody tr:nth-child(even) .cg-org{background:var(--panel-2)}
.cedula-grid tr:focus-within .cg-org{background:var(--primario-suave)}
.cg-celda:focus-within{background:var(--primario-suave)}

/* Pie: blancos, nulos, impugnados, total y control */
.cedula-grid .cg-extra td,.cedula-grid .cg-extra th{background:var(--panel-3)}
.cedula-grid .cg-extra .cg-org__txt{font-weight:600;color:var(--texto-2)}
.cedula-grid .cg-total td,.cedula-grid .cg-total th{
  background:var(--primario-suave);border-top:2px solid var(--primario-borde);
}
.cedula-grid .cg-total strong{font-size:var(--t-lg);font-variant-numeric:tabular-nums;
  color:var(--primario)}
.cedula-grid .cg-aviso-fila td,.cedula-grid .cg-aviso-fila th{
  background:var(--panel-2);border-bottom:0;
}
.cedula-grid .cg-aviso-fila .cedula__aviso{text-align:right;white-space:normal;font-size:10.5px}

/* Columna desactivada por el check: se atenua, nunca se vacia */
.cedula-grid .is-apagada{opacity:.35}
.cedula-grid .cg-col.is-apagada .cg-col__check{opacity:1}

@media(max-width:820px){
  .cedula-grid{font-size:var(--t-xs)}
  .cedula-grid .cg-org{min-width:150px;max-width:190px}
  .cedula-grid .cg-col{min-width:210px}
  .cg-celda__candidato{width:120px}
  .cg-celda input{width:58px;flex-basis:58px;font-size:16px}
  .cg-celda__vacia{width:58px}
}

/* ---------------------------------------------------------------------
   27. Avance de una tarea larga (simulacro)
   ---------------------------------------------------------------------
   Reutiliza .progreso del dashboard y le pone encima la cifra y el estado.
   --------------------------------------------------------------------- */
.avance{
  margin-top:var(--e-4);padding:var(--e-3) var(--e-4);
  border:1px solid var(--borde);border-radius:var(--radio);background:var(--panel-2);
}
.avance__cab{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--e-3);
  font-size:var(--t-sm);
}
.avance__txt{color:var(--texto-2);min-width:0}
.avance__pct{
  font-weight:700;font-variant-numeric:tabular-nums;color:var(--primario);
  font-size:var(--t-md);flex:0 0 auto;
}
.avance__nota{margin:8px 0 0;color:var(--texto-3)}

.avance--ok{border-color:var(--verde-borde);background:var(--verde-suave)}
.avance--ok .avance__pct{color:var(--verde)}
.avance--ok .progreso__barra{background:var(--verde)}
.avance--ok .avance__nota{display:none}

.avance--error{border-color:var(--rojo-borde);background:var(--rojo-suave)}
.avance--error .avance__pct{color:var(--rojo)}
.avance--error .progreso__barra{background:var(--rojo)}
.avance--error .avance__nota{display:none}

/* Mientras corre, la barra respira para que no parezca congelada */
.avance:not(.avance--ok):not(.avance--error) .progreso__barra{
  background-image:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  background-size:120px 100%;animation:avanceBrillo 1.1s linear infinite;
}
@keyframes avanceBrillo{from{background-position:-120px 0}to{background-position:260px 0}}
@media(prefers-reduced-motion:reduce){
  .avance .progreso__barra{animation:none;transition:none}
}

/* ---------------------------------------------------------------------
   28. Pestanas por nivel de eleccion
   ---------------------------------------------------------------------
   Los votos de las cuatro columnas de la cedula no son sumables, asi que
   el dashboard siempre muestra una eleccion concreta. Cada pestana lleva
   el color de su columna en la cedula.
   --------------------------------------------------------------------- */
.niveles{
  display:flex;gap:var(--e-2);margin-bottom:var(--e-4);padding-bottom:2px;
  /* el desplazamiento lo gobierna `.desliza` */
}
.nivel{
  flex:1 1 0;min-width:148px;position:relative;
  display:flex;flex-direction:column;gap:2px;
  padding:11px 13px 10px;text-decoration:none;
  border:1px solid var(--borde);border-radius:var(--radio);
  background:var(--panel-2);color:var(--texto-2);
  transition:background .15s,border-color .15s,color .15s;
}
.nivel__barra{
  position:absolute;top:-1px;left:-1px;right:-1px;height:4px;
  border-radius:var(--radio) var(--radio) 0 0;
  background:var(--color-nivel);opacity:.45;
}
.nivel__nom{font-size:var(--t-sm);font-weight:660;line-height:1.25}
.nivel__av{
  font-size:var(--t-xs);color:var(--texto-3);
  display:flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums;
}
.nivel__actas{color:var(--texto-debil)}

.nivel:hover{background:var(--panel);border-color:var(--texto-debil);color:var(--texto)}
.nivel:focus-visible{outline:2px solid var(--primario);outline-offset:2px}

.nivel.is-activo{
  background:var(--panel);border-color:var(--texto-3);color:var(--texto);
  box-shadow:var(--sombra-1);
}
.nivel.is-activo .nivel__barra{opacity:1;height:5px}
.nivel.is-activo .nivel__nom{font-weight:720}
.nivel.is-activo .nivel__av{color:var(--texto-2);font-weight:650}

/* Punto del color de la columna junto al titulo de resultados */
.punto-nivel{
  display:inline-block;width:10px;height:10px;border-radius:3px;
  margin-right:7px;vertical-align:baseline;
}

/* Cifras que llevan a una lista (actas que faltan) */
.enlace-cifra{
  color:var(--primario);font-weight:650;text-decoration:none;
  border-bottom:1px dashed currentColor;
}
.enlace-cifra:hover{border-bottom-style:solid}

@media(max-width:820px){
  .nivel{min-width:132px;padding:9px 11px}
}

/* Aviso: aqui no se suman votos porque son varias elecciones a la vez */
.aviso-sumar{
  display:flex;gap:10px;align-items:flex-start;
  margin:0 0 var(--e-4);padding:11px 13px;
  border:1px solid var(--ambar-borde);border-radius:var(--radio);
  background:var(--ambar-suave);color:var(--texto-2);
  font-size:var(--t-sm);line-height:1.45;
}
.aviso-sumar svg{flex:0 0 auto;margin-top:1px;color:var(--ambar)}
.aviso-sumar strong{color:var(--texto)}
.aviso-sumar a{color:var(--primario);font-weight:650;white-space:nowrap}

/* Barra de ambito: sobre que territorio son las cifras de la pantalla */
.ambito{
  display:flex;align-items:center;gap:var(--e-3);flex-wrap:wrap;
  margin-bottom:var(--e-3);padding:9px 13px;
  border:1px solid var(--borde);border-radius:var(--radio);
  background:var(--panel-2);font-size:var(--t-sm);
}
.ambito__etq{
  text-transform:uppercase;letter-spacing:.05em;font-size:var(--t-xs);
  font-weight:700;color:var(--texto-3);
}
.ambito__ruta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
.ambito__ruta a{color:var(--texto-2);text-decoration:none;border-bottom:1px solid transparent}
.ambito__ruta a:hover{color:var(--primario);border-bottom-color:currentColor}
.ambito__ruta strong{color:var(--texto);font-weight:720;font-size:var(--t-md)}
.ambito__sep{color:var(--texto-debil)}
.ambito__cuenta{
  margin-left:auto;color:var(--texto-3);font-size:var(--t-xs);
  padding:3px 9px;border-radius:99px;background:var(--gris-suave);
}
.ambito__cuenta--ok{background:var(--verde-suave);color:var(--verde)}
.ambito__quitar{color:var(--primario);font-weight:650;white-space:nowrap}

@media(max-width:820px){
  .ambito__cuenta{margin-left:0;order:3;width:100%}
}

/* Desglose geografico: bajar de nivel desde el propio nombre del ambito.
   La tabla tiene nueve columnas y el boton "Detalle" de la ultima se sale de
   la pantalla en cuanto se estrecha; el nombre, en cambio, siempre se ve. */
.ambito-baja{
  display:inline-flex;align-items:center;gap:5px;
  color:var(--texto);text-decoration:none;border-bottom:1px solid transparent;
}
.ambito-baja:hover{color:var(--primario);border-bottom-color:currentColor}
.ambito-baja:focus-visible{outline:2px solid var(--primario);outline-offset:2px;border-radius:3px}
.ambito-baja__flecha{color:var(--texto-debil);font-size:var(--t-lg);line-height:1}
.ambito-baja:hover .ambito-baja__flecha{color:var(--primario)}

/* La primera columna se queda fija al desplazar la tabla en horizontal */
.tabla-env .celda-ambito,
.tabla-env th:first-child{
  position:sticky;left:0;z-index:2;background:var(--panel);
  box-shadow:1px 0 0 var(--borde);
}
.tabla-env th:first-child{background:var(--panel-2);z-index:3}
.tabla tbody tr:hover .celda-ambito{background:var(--panel-2)}

/* ---------------------------------------------------------------------
   29. Acciones al pie de cada columna de la cedula
   ---------------------------------------------------------------------
   Todo lo que hace falta para cerrar un acta queda debajo de su columna:
   estado, subir la hoja, guardar y aprobar. Antes estaban repartidos entre
   una rejilla aparte y el pie de la pagina.
   --------------------------------------------------------------------- */
.cedula-grid .cg-acciones td,
.cedula-grid .cg-acciones th{
  background:var(--panel-2);border-top:2px solid var(--borde);
  vertical-align:top;padding:10px 8px;
}
.cg-acc{min-width:132px}
.acc{display:flex;flex-direction:column;gap:6px;align-items:stretch}
.acc__estado{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.acc__foto{
  display:inline-flex;align-items:center;gap:3px;
  font-size:var(--t-xs);font-weight:650;color:var(--texto-3);
}
.acc__foto--si{color:var(--verde)}
.acc__foto svg{width:13px;height:13px}

/* El campo de archivo va oculto dentro del boton */
.acc__subir{cursor:pointer;text-align:center}
.acc__guardar{width:100%}
.acc .btn{width:100%;justify-content:center}
.acc__obs{
  margin:2px 0 0;font-size:var(--t-xs);line-height:1.35;
  color:var(--rojo);background:var(--rojo-suave);
  border:1px solid var(--rojo-borde);border-radius:var(--radio-sm);padding:5px 7px;
}

/* La columna apagada atenua tambien sus acciones */
.cedula-grid .cg-acc.is-apagada .acc{opacity:.45}

/* Etiqueta del acta a la que pertenece cada hoja del visor */
.visor__cargo{
  display:inline-block;padding:2px 8px;border-radius:99px;
  background:var(--color-cedula);color:#14213a;
  font-size:var(--t-xs);font-weight:700;
}

@media(max-width:820px){
  .cg-acc{min-width:118px}
  .acc .btn{font-size:var(--t-xs);padding:6px 6px}
}
.acc__foto--falta{color:var(--ambar)}

/* ---------------------------------------------------------------------
   26. Un acta por mesa en los listados
   ---------------------------------------------------------------------
   El acta de papel es una hoja con cuatro columnas, y asi se lista: una
   fila por mesa, con el avance de cada columna a la vista. Cada chip
   lleva el color de su columna en la cedula y el estado en el fondo, de
   modo que el color nunca es el unico indicio.
   --------------------------------------------------------------------- */
/* Punto con el color de la columna, para nombrarla sin depender del color */
.col-punto{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--color-cedula,var(--borde));margin-right:5px;
  border:1px solid rgba(0,0,0,.12);vertical-align:baseline;
}

.cols-mesa{display:flex;flex-wrap:wrap;gap:5px}
.cols-mesa__col{
  display:inline-flex;flex-direction:column;gap:1px;
  padding:3px 8px 3px 6px;border-radius:var(--radio-sm);
  border:1px solid var(--borde);border-left:4px solid var(--color-cedula,var(--borde));
  background:var(--panel-2);min-width:74px;
}
.cols-mesa__etq{font-size:10px;font-weight:700;color:var(--texto-3);
  text-transform:uppercase;letter-spacing:.04em;line-height:1.2;white-space:nowrap}
.cols-mesa__est{font-size:var(--t-xs);font-weight:680;line-height:1.25}
.cols-mesa__col--gris  .cols-mesa__est{color:var(--gris)}
.cols-mesa__col--gris  {background:var(--gris-suave)}
.cols-mesa__col--ambar .cols-mesa__est{color:var(--ambar)}
.cols-mesa__col--ambar{background:var(--ambar-suave);
  border-top-color:var(--ambar-borde);border-right-color:var(--ambar-borde);
  border-bottom-color:var(--ambar-borde)}
.cols-mesa__col--rojo  .cols-mesa__est{color:var(--rojo)}
.cols-mesa__col--rojo{background:var(--rojo-suave);
  border-top-color:var(--rojo-borde);border-right-color:var(--rojo-borde);
  border-bottom-color:var(--rojo-borde)}
.cols-mesa__col--verde .cols-mesa__est{color:var(--verde)}
.cols-mesa__col--verde{background:var(--verde-suave);
  border-top-color:var(--verde-borde);border-right-color:var(--verde-borde);
  border-bottom-color:var(--verde-borde)}
/* Columna que no se vota en esa mesa: ni color de cedula ni estado */
.cols-mesa__col--no{opacity:.4;border-left-color:var(--borde)}
.cols-mesa__col--no .cols-mesa__est{color:var(--texto-3)}

/* ---------------------------------------------------------------------
   27. Tablas que se apilan en el movil
   ---------------------------------------------------------------------
   Una tabla de seis columnas en un telefono obliga a barrer de lado para
   leer una sola fila, y lo que queda a la derecha no se encuentra solo
   bajando. Con `tabla--apilable` cada fila se vuelve una ficha: los
   datos quedan uno debajo de otro, con el nombre de la columna delante
   (viene de data-etq), y la pantalla solo se desplaza hacia abajo.
   --------------------------------------------------------------------- */
@media(max-width:760px){
  .tabla--apilable thead{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  .tabla--apilable,
  .tabla--apilable tbody,
  .tabla--apilable tr,
  .tabla--apilable td{display:block;width:100%}
  .tabla--apilable tr{
    border:1px solid var(--borde);border-radius:var(--radio);
    margin:0 0 var(--e-3);padding:var(--e-2) var(--e-3);background:var(--panel);
  }
  .tabla--apilable tbody tr:last-child{margin-bottom:0}
  .tabla--apilable td{
    border:0;padding:4px 0;display:flex;gap:var(--e-3);
    align-items:baseline;justify-content:space-between;text-align:left;
  }
  /* El nombre de la columna, delante del dato */
  .tabla--apilable td[data-etq]:not([data-etq=""])::before{
    content:attr(data-etq);flex:0 0 auto;
    font-size:var(--t-xs);font-weight:700;color:var(--texto-3);
    text-transform:uppercase;letter-spacing:.04em;
  }
  .tabla--apilable td.num{text-align:right}
  .tabla--apilable td.cen{justify-content:stretch}
  .tabla--apilable td.cen .btn{width:100%;justify-content:center}
  .tabla--apilable .cols-mesa{justify-content:flex-end}
  /* Con la fila convertida en ficha, la columna fija ya no tiene de que
     quedarse fija: no hay desplazamiento lateral del que sobrevivir. */
  .tabla--apilable .col-fija{position:static;box-shadow:none;min-width:0;width:auto}
  /* El estado de cada columna de la cedula, con su color delante */
  .tabla--apilable .celda-cedula{justify-content:space-between}
  .tabla--apilable .celda-cedula[data-col]::before{
    border-left:4px solid var(--color-cedula,var(--borde));padding-left:5px;
  }
  .tabla--apilable .celda-acta{display:inline-flex;gap:6px;align-items:center}
  /* La ficha ya no necesita scroll lateral ni el degradado que lo anuncia.
     Se marca en el contenedor en vez de usar :has(), que falta en los Chrome
     de Android anteriores a 2022 -- justo los telefonos de mesa. */
  .tabla-env--fichas{overflow-x:visible}
  .tabla-env--fichas::after{display:none}
}

/* ---------------------------------------------------------------------
   28. La cedula, columna por columna en el movil
   ---------------------------------------------------------------------
   Las cuatro columnas juntas piden unos 1100 px: en un telefono hay que
   barrer de lado para llegar a la distrital, y el boton de guardar de
   cada columna queda fuera de la vista. Con el selector de arriba se
   digita una columna a la vez, a todo el ancho, bajando y nada mas. La
   idea del acta no cambia: sigue siendo una sola hoja, y lo tecleado en
   las demas columnas se conserva porque los campos siguen en el
   formulario, solo ocultos.

   Sin JavaScript el selector no aparece y la tabla se ve completa, como
   siempre.
   --------------------------------------------------------------------- */
.selector-col{display:none}
.selector-col__lista{
  display:flex;gap:5px;
  padding:var(--e-2);border-bottom:1px solid var(--borde);
  background:var(--panel-2);
}
.selector-col__lista.desliza{background-color:var(--panel-2)}
.selector-col__btn{
  /* Los cuatro caben repartiendose el ancho, sin barra de desplazamiento:
     el nombre parte en dos lineas antes que obligar a arrastrar. */
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px;
  padding:6px 7px;border:1px solid var(--borde);border-radius:var(--radio-sm);
  border-top:4px solid var(--color-cedula);background:var(--panel);
  font-family:inherit;font-size:11px;font-weight:650;color:var(--texto-2);
  cursor:pointer;line-height:1.2;text-align:left;hyphens:auto;
}
.selector-col__btn small{font-size:9.5px;font-weight:600;color:var(--texto-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.selector-col__btn[aria-pressed="true"]{
  background:var(--primario-suave);border-color:var(--primario-borde);
  color:var(--primario);box-shadow:inset 0 0 0 1px var(--primario-borde);
}
.selector-col__btn[aria-pressed="true"] small{color:var(--primario)}

@media(max-width:760px){
  .selector-col.is-activo{display:block}

  /* Solo la columna elegida. Los campos de las demas siguen en el DOM:
     ocultos, no eliminados, para no perder lo que ya estaba escrito. */
  .cedula-grid[data-solo] th[data-col],
  .cedula-grid[data-solo] td[data-col]{display:none}
  .cedula-grid[data-solo] th[data-col].is-sola,
  .cedula-grid[data-solo] td[data-col].is-sola{display:table-cell}

  /* Con una sola columna sobra el ancho minimo pensado para cuatro */
  .cedula-grid[data-solo] .cg-org{min-width:0;width:auto;max-width:none;
    position:static;box-shadow:none}
  .cedula-grid[data-solo] .cg-col,
  .cedula-grid[data-solo] .cg-celda,
  .cedula-grid[data-solo] .cg-acc{min-width:0}
  .cedula-grid[data-solo] .cg-celda__candidato{width:auto;max-width:42vw}
  .cedula-grid[data-solo] .cg-acc .acc{align-items:stretch}
  .cedula-grid[data-solo] .cg-acc .btn{width:100%;justify-content:center}
}

/* ---------------------------------------------------------------------
   29. Dashboard: el resultado primero
   ---------------------------------------------------------------------
   La noche electoral se pregunta cuatro cosas y en este orden: quien gana,
   cuanto se ha contado, donde falta y quien esta trabajando. Antes las
   cuatro pesaban igual y el resultado quedaba en media columna, al lado de
   un registro de actividad. Ahora el resultado ocupa el ancho completo
   arriba, el estado se reduce a una cinta de cifras, y lo operativo baja al
   final plegado.
   --------------------------------------------------------------------- */
.res-hero{
  background:var(--panel);border:1px solid var(--borde);
  border-radius:var(--radio);box-shadow:var(--sombra-2);
  margin-bottom:var(--e-4);overflow:hidden;
}
.res-hero__cab{
  display:flex;align-items:center;justify-content:space-between;gap:var(--e-3);
  padding:var(--e-4);border-bottom:1px solid var(--borde);background:var(--panel-2);
}
.res-hero__ident{display:flex;align-items:center;gap:var(--e-3);min-width:0}
/* La marca de color es la misma columna de la cedula que se esta mirando */
.res-hero__marca{
  width:6px;align-self:stretch;min-height:38px;border-radius:99px;flex:0 0 6px;
}
.res-hero__cab h2{font-size:var(--t-lg);margin:0;line-height:1.2}
.res-hero__cab p{margin:2px 0 0;font-size:var(--t-sm);color:var(--texto-2)}
.res-hero__cuerpo{padding:var(--e-4)}

/* El puntero: la unica cifra que todos buscan al abrir la pantalla */
.puntero-grande{
  display:flex;align-items:center;gap:var(--e-4);flex-wrap:wrap;
  padding:var(--e-4);margin-bottom:var(--e-4);
  border:1px solid var(--borde);border-radius:var(--radio);
  background:linear-gradient(105deg,var(--primario-suave),transparent 60%);
}
.puntero-grande__datos{flex:1 1 220px;min-width:0}
.puntero-grande__etq{
  display:block;font-size:var(--t-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--texto-3);margin-bottom:3px;
}
.puntero-grande__nom{
  display:block;font-size:var(--t-lg);font-weight:660;line-height:1.25;color:var(--texto);
}
.puntero-grande__cand{
  display:block;margin-top:2px;font-size:var(--t-md);font-weight:550;
  color:var(--texto-2);line-height:1.3;
}
.puntero-grande__ventaja{
  display:block;margin-top:4px;font-size:var(--t-sm);color:var(--texto-2);
}
.puntero-grande__pct{
  font-size:52px;font-weight:760;line-height:1;letter-spacing:-.04em;
  color:var(--primario);font-variant-numeric:tabular-nums;text-align:right;
}
.puntero-grande__pct small{font-size:24px;font-weight:700;opacity:.65;margin-left:1px}
.puntero-grande__votos{
  display:block;font-size:var(--t-sm);font-weight:500;letter-spacing:0;
  color:var(--texto-2);margin-top:4px;
}

/* Marcador: una fila por organizacion, barra al ancho de su porcentaje */
.marcador{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.marcador__fila{
  display:grid;grid-template-columns:22px auto minmax(0,1fr) auto;
  align-items:center;gap:var(--e-3);
  padding:7px 9px;border-radius:var(--radio-sm);
}
.marcador__fila--lider{background:var(--panel-2)}
.marcador__pos{
  font-size:var(--t-xs);font-weight:700;color:var(--texto-3);
  text-align:right;font-variant-numeric:tabular-nums;
}
.marcador__datos{min-width:0}
.marcador__nom{
  display:block;font-size:var(--t-sm);font-weight:560;line-height:1.3;
  color:var(--texto);margin-bottom:5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.marcador__fila--lider .marcador__nom{font-weight:650}
/* El nombre de quien encabeza la lista, bajo el de su organizacion */
.marcador__cand{
  display:block;font-size:var(--t-xs);color:var(--texto-3);line-height:1.3;
  margin:-3px 0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.marcador__pista{height:8px;border-radius:99px;background:var(--panel-3);overflow:hidden}
.marcador__barra{height:100%;border-radius:99px;transition:width .5s ease}
.marcador__cifras{text-align:right;min-width:74px}
.marcador__pct{
  display:block;font-size:var(--t-md);font-weight:700;line-height:1.1;
  font-variant-numeric:tabular-nums;color:var(--texto);
}
.marcador__pct small{font-size:11px;font-weight:600;opacity:.6}
.marcador__fila--lider .marcador__pct{font-size:var(--t-lg);color:var(--primario)}
.marcador__sub{
  display:block;font-size:var(--t-xs);color:var(--texto-3);
  font-variant-numeric:tabular-nums;
}

.res-hero__pie{
  display:flex;flex-wrap:wrap;gap:var(--e-4);
  margin-top:var(--e-4);padding-top:var(--e-3);border-top:1px solid var(--borde);
  font-size:var(--t-sm);color:var(--texto-2);
}
.res-hero__pie b{color:var(--texto);font-variant-numeric:tabular-nums}
.res-hero__pie small{color:var(--texto-3)}

/* ---------------------------------------------------------------------
   31. Arbol territorial
   ---------------------------------------------------------------------
   Region > provincia > distrito > local > mesa, abriendose en el sitio.
   Antes habia que recargar la pagina con otro filtro para bajar un nivel,
   asi que comparar dos distritos obligaba a ir y volver. Cada tramo se pide
   al abrirlo: el arbol entero de una region son miles de mesas.
   --------------------------------------------------------------------- */
.arb{--sangria:22px}
.arb__cabecera,
.arb__fila{
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px 92px 180px;
  align-items:center;gap:var(--e-3);
  padding:9px var(--e-4);
}
.arb__cabecera{
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--texto-3);background:var(--panel-2);
  border-bottom:1px solid var(--borde);position:sticky;top:0;z-index:2;
}
.arb__cabecera span:nth-child(2),
.arb__cabecera span:nth-child(3){text-align:right}
.arb__fila{border-bottom:1px solid var(--borde);transition:background var(--transicion)}
.arb__fila:hover{background:var(--panel-2)}
.arb__fila--cerrada .arb__cifra{color:var(--verde)}

.arb__nombre{
  display:flex;align-items:center;gap:7px;min-width:0;
  /* La sangria marca la profundidad sin necesidad de lineas ni iconos */
  padding-left:calc(var(--prof,0) * var(--sangria));
}
.arb__abrir{
  flex:0 0 22px;width:22px;height:22px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:1px solid transparent;border-radius:var(--radio-sm);
  cursor:pointer;color:var(--texto-3);
}
.arb__abrir:hover{background:var(--panel-3);border-color:var(--borde);color:var(--texto)}
.arb__abrir--hoja{cursor:default}
.arb__chevron{
  width:0;height:0;border-left:5px solid currentColor;
  border-top:4px solid transparent;border-bottom:4px solid transparent;
  transition:transform var(--transicion);
}
.arb__abrir[aria-expanded="true"] .arb__chevron{transform:rotate(90deg)}
.arb__abrir.is-cargando .arb__chevron{
  border:0;width:11px;height:11px;border-radius:50%;
  border:2px solid var(--borde-fuerte);border-top-color:var(--primario);
  animation:girar .7s linear infinite;
}
@keyframes girar{to{transform:rotate(360deg)}}
.arb__etiqueta{
  min-width:0;font-size:var(--t-sm);font-weight:560;color:var(--texto);
  text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border-bottom:1px solid transparent;
}
.arb__etiqueta:hover{border-bottom-color:var(--primario);color:var(--primario)}
/* Cuanto mas hondo, mas discreto: la jerarquia tambien se lee en el peso */
.arb__fila[data-prof="0"] .arb__etiqueta{font-weight:650;font-size:var(--t-md)}
.arb__fila[data-prof="3"] .arb__etiqueta,
.arb__fila[data-prof="4"] .arb__etiqueta{font-weight:500;color:var(--texto-2)}

.arb__avance{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.arb__pista{
  flex:1 1 auto;min-width:0;height:7px;border-radius:99px;
  background:var(--panel-3);overflow:hidden;
}
.arb__barra{
  height:100%;border-radius:99px;background:var(--primario);
  transition:width .5s ease;
}
.arb__fila--cerrada .arb__barra{background:var(--verde)}
.arb__cifra{
  flex:0 0 auto;min-width:34px;text-align:right;
  font-size:var(--t-sm);font-weight:680;font-variant-numeric:tabular-nums;
  color:var(--texto-2);
}
.arb__cifra small{font-size:10px;opacity:.6}
.arb__actas{
  text-align:right;font-size:var(--t-sm);color:var(--texto-2);
  font-variant-numeric:tabular-nums;
}
.arb__de{color:var(--texto-3)}
.arb__completo{color:var(--verde);font-weight:650;white-space:nowrap}
.arb__lider{display:flex;align-items:center;gap:7px;min-width:0}
.arb__lider-txt{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.arb__lider-nom{
  font-size:var(--t-xs);font-weight:600;color:var(--texto);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.arb__lider-pct{font-size:10.5px;color:var(--texto-3);font-variant-numeric:tabular-nums}
.arb__sin{font-size:var(--t-xs);color:var(--texto-3);font-style:italic}
.arb__hijos{background:var(--panel-2)}
.arb__hijos .arb__fila{background:transparent}
.arb__hijos .arb__fila:hover{background:var(--panel-3)}
.arb__vacio{
  padding:10px var(--e-4);font-size:var(--t-sm);color:var(--texto-3);
  padding-left:calc(var(--prof,1) * 22px + var(--e-4));
}
.arb__leyenda{
  display:flex;gap:var(--e-3);align-items:center;
  font-size:var(--t-xs);color:var(--texto-3);
}
.arb__muestra{
  display:inline-block;width:22px;height:7px;border-radius:99px;
  background:var(--primario);margin-right:5px;vertical-align:middle;
}

/* ---------------------------------------------------------------------
   32. Bloque plegable
   --------------------------------------------------------------------- */
.plegable{margin-bottom:var(--e-4)}
.plegable__cab{
  display:flex;align-items:baseline;gap:var(--e-3);flex-wrap:wrap;
  padding:11px var(--e-4);cursor:pointer;list-style:none;
  background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);
  transition:background var(--transicion);
}
.plegable__cab::-webkit-details-marker{display:none}
.plegable__cab:hover{background:var(--panel-2)}
.plegable__cab::before{
  content:"";width:0;height:0;flex:0 0 auto;
  border-left:5px solid var(--texto-3);
  border-top:4px solid transparent;border-bottom:4px solid transparent;
  transition:transform var(--transicion);
}
.plegable[open] > .plegable__cab::before{transform:rotate(90deg)}
.plegable__titulo{font-size:var(--t-md);font-weight:650;color:var(--texto)}
.plegable__nota{font-size:var(--t-sm);color:var(--texto-3)}

@media(max-width:820px){
  .res-hero__cuerpo,.res-hero__cab{padding:var(--e-3)}
  .puntero-grande{padding:var(--e-3);gap:var(--e-3)}
  .puntero-grande__pct{font-size:40px;text-align:left}
  .puntero-grande__pct small{font-size:19px}

  /* El arbol se reordena en dos lineas: nombre arriba, cifras debajo.
     Con cuatro columnas en 390 px el nombre se perdia en una elipsis. */
  .arb__cabecera{display:none}
  .arb__fila{
    /* Proporcional, no al contenido: con `auto` una cifra como 3,820/4,210 se
       llevaba 165 de los 345 px y al nombre le quedaban 120, insuficientes
       para el chevron y una palabra. */
    grid-template-columns:1.55fr 1fr;
    grid-template-areas:"nombre actas" "avance lider";
    gap:6px var(--e-3);padding:10px var(--e-3);
  }
  .arb{--sangria:14px}
  /* Rejilla en vez de flex: con flex-wrap, el nombre largo y el aviso de
     observadas se empujaban entre si de formas distintas segun el texto --a
     veces el chevron acababa solo en una linea--. Con dos celdas fijas el
     chevron y el nombre van siempre juntos, y el aviso cae debajo alineado
     con el nombre. */
  .arb__nombre{
    grid-area:nombre;display:grid;align-items:center;
    grid-template-columns:22px minmax(0,1fr);
    grid-template-areas:"chevron nombre" ". aviso";
    gap:3px 7px;
  }
  .arb__abrir{grid-area:chevron}
  .arb__etiqueta{grid-area:nombre;white-space:normal;line-height:1.3;min-width:0}
  .arb__nombre .badge{grid-area:aviso;justify-self:start}
  .arb__actas{grid-area:actas;font-size:var(--t-xs)}
  .arb__avance{grid-area:avance;justify-content:flex-start}
  .arb__lider{grid-area:lider;justify-content:flex-end}
  .arb__pista{max-width:120px}
}
@media(max-width:560px){
  .marcador__fila{grid-template-columns:18px auto minmax(0,1fr) auto;gap:8px;padding:6px}
  .marcador__cifras{min-width:58px}
  .res-hero__pie{gap:var(--e-3);font-size:var(--t-xs)}
}

/* ---------------------------------------------------------------------
   30. Panel de avance del escrutinio
   ---------------------------------------------------------------------
   La disposicion de los tableros oficiales de resultados: un anillo con el
   porcentaje de actas procesadas y, al lado, las cifras que explican ese
   porcentaje. El anillo es la pieza que se lee desde lejos; las cifras,
   la letra pequena de esa misma frase.

   El anillo son dos circunferencias SVG y una cuenta con stroke-dasharray.
   Sin librerias: una dependencia de graficos para dibujar un circulo seria
   cargar 90 KB para no ganar nada.
   --------------------------------------------------------------------- */
.avance-panel{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--e-5);align-items:center;
  background:var(--panel);border:1px solid var(--borde);
  border-radius:var(--radio);box-shadow:var(--sombra-2);
  padding:var(--e-5);margin-bottom:var(--e-4);
}
/* Rotulo del ambito: ocupa toda la primera fila de la rejilla */
.avance-panel__ambito{
  grid-column:1 / -1;margin:0 0 calc(var(--e-2) * -1);
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:var(--t-sm);color:var(--texto-2);
}
.avance-panel__ambito .ico{color:var(--texto-3);flex:0 0 auto}
.avance-panel__ambito--amplio{color:var(--ambar)}
.avance-panel__ambito .mini-todo{
  background:none;border:0;padding:0;font-size:inherit;color:inherit;font-weight:650;
}
.avance-panel__ambito b{
  color:var(--texto);font-weight:650;
  padding:2px 8px;border-radius:99px;background:var(--panel-2);
  border:1px solid var(--borde);font-size:var(--t-xs);
}
.avance-panel__anillo{position:relative;width:160px;height:160px;flex:0 0 auto}
.avance-panel__anillo svg{width:100%;height:100%;transform:rotate(-90deg)}
.anillo__fondo{
  fill:none;stroke:var(--panel-3);stroke-width:11;
}
.anillo__trazo{
  fill:none;stroke:var(--primario);stroke-width:11;stroke-linecap:round;
  transition:stroke-dasharray .6s ease;
}
.avance-panel__centro{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;pointer-events:none;
}
.avance-panel__centro strong{
  font-size:34px;font-weight:760;line-height:1;letter-spacing:-.03em;
  color:var(--texto);font-variant-numeric:tabular-nums;
}
.avance-panel__centro strong small{font-size:17px;font-weight:700;opacity:.6}
.avance-panel__centro span{
  margin-top:5px;font-size:10.5px;font-weight:650;text-transform:uppercase;
  letter-spacing:.05em;color:var(--texto-3);max-width:104px;line-height:1.25;
}

.avance-panel__cifras{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--borde);
  border:1px solid var(--borde);border-radius:var(--radio-sm);overflow:hidden;
}
.cifra{background:var(--panel);padding:var(--e-3) var(--e-4)}
.cifra--alerta{background:var(--rojo-suave)}
.cifra--alerta .cifra__val{color:var(--rojo)}
.cifra__etq{
  display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--texto-3);margin-bottom:4px;
}
.cifra__val{
  display:block;font-size:25px;font-weight:740;line-height:1.05;
  letter-spacing:-.02em;color:var(--texto);font-variant-numeric:tabular-nums;
}
.cifra__val small{font-size:15px;font-weight:700;opacity:.6}
.cifra__nota{
  display:block;margin-top:3px;font-size:var(--t-xs);color:var(--texto-2);
  line-height:1.35;
}

/* ---------------------------------------------------------------------
   30b. Votos emitidos
   ---------------------------------------------------------------------
   Validos, blancos, nulos e impugnados como cajas propias y no como un pie
   de pagina: en un escrutinio la cifra de nulos se vigila tanto como la del
   primero.
   --------------------------------------------------------------------- */
.votos-emitidos{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;
  background:var(--borde);border:1px solid var(--borde);
  border-radius:var(--radio);overflow:hidden;margin-bottom:var(--e-4);
}
.voto-caja{background:var(--panel);padding:var(--e-3) var(--e-4);text-align:center}
.voto-caja--validos{background:var(--verde-suave)}
.voto-caja--validos .voto-caja__val{color:var(--verde)}
.voto-caja--total{background:var(--panel-2)}
.voto-caja__etq{
  display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--texto-3);margin-bottom:4px;
}
.voto-caja__val{
  display:block;font-size:23px;font-weight:740;line-height:1.1;
  color:var(--texto);font-variant-numeric:tabular-nums;
}
.voto-caja__nota{
  display:block;margin-top:2px;font-size:var(--t-xs);color:var(--texto-2);
}

@media(max-width:980px){
  .avance-panel{grid-template-columns:1fr;justify-items:center;gap:var(--e-4)}
  .avance-panel__cifras{width:100%;grid-template-columns:repeat(2,minmax(0,1fr))}
  .votos-emitidos{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:560px){
  .avance-panel{padding:var(--e-3)}
  .avance-panel__anillo{width:132px;height:132px}
  .avance-panel__centro strong{font-size:28px}
  .cifra__val{font-size:21px}
  .votos-emitidos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .voto-caja--total{grid-column:1 / -1}
}

/* ---------------------------------------------------------------------
   33. Impresion (y PDF)
   ---------------------------------------------------------------------
   El PDF se obtiene con «Guardar como PDF» en el propio dialogo de
   impresion, asi que esta hoja decide como queda el documento.

   Dos cosas importan mas que el resto: forzar la paleta clara -- el tema
   oscuro en papel es una mancha de tinta y en pantalla de un tercero es
   ilegible-- y que nada se parta por la mitad entre dos paginas.
   --------------------------------------------------------------------- */
@media print{
  /* Paleta clara pase lo que pase, aunque el equipo este en modo oscuro.
     El selector repite `:not([data-tema="claro"])` a proposito: la regla de
     `prefers-color-scheme: dark` usa esa forma, y con menos especificidad
     ganaria ella y el PDF saldria en negro. */
  :root,
  :root[data-tema="oscuro"],
  :root:not([data-tema="claro"]){
    --fondo:#fff; --panel:#fff; --panel-2:#f6f8fb; --panel-3:#eef2f7;
    --texto:#101828; --texto-2:#3b4757; --texto-3:#667085;
    --borde:#d7dee8; --borde-fuerte:#b9c4d2;
    --primario:#1a4fd6; --primario-suave:#eef3ff; --primario-borde:#c3d4fb;
    --verde:#046c50; --verde-suave:#eaf7f2; --verde-borde:#b6e2d2;
    --ambar:#9a4708; --ambar-suave:#fdf4ea; --ambar-borde:#f2d6b3;
    --rojo:#ad1a1a; --rojo-suave:#fdeeee; --rojo-borde:#f3c4c4;
    --gris:#5b6b7c; --gris-suave:#eef1f6;
    --sombra-1:none; --sombra-2:none;
  }
  html,body{background:#fff !important;color:#101828 !important}

  /* Fuera lo que no es contenido */
  .lateral,.barra__acciones,.filtros,.pie,.plegable,
  #btnImprimir,.arb__abrir,.conmutador,.acciones,
  .badge--azul,.pulso{display:none !important}

  .app,.contenido{display:block;padding:0;margin:0;max-width:none}
  .barra{position:static;padding:0 0 8pt;border:0}
  .barra h1{font-size:15pt}

  /* Que las cajas no se partan entre paginas */
  .avance-panel,.res-hero,.votos-emitidos,.tarjeta,
  .marcador__fila,.arb__fila,.voto-caja,.cifra{
    break-inside:avoid;page-break-inside:avoid;
  }
  .avance-panel,.res-hero,.votos-emitidos,.tarjeta{
    border:1px solid #d7dee8 !important;box-shadow:none !important;
    margin-bottom:10pt;
  }

  /* El anillo se imprime: los fondos de color se pierden por defecto */
  .anillo__fondo{stroke:#e6ebf2 !important}
  .anillo__trazo{stroke:#1a4fd6 !important}
  .marcador__barra,.arb__barra,.progreso__barra,.gcol__barra,.retrato,
  .voto-caja--validos,.cifra--alerta,.res-hero__marca,.simbolo{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }

  /* El arbol se imprime tal como quedo en pantalla: lo desplegado, desplegado */
  .arb__hijos[hidden]{display:none !important}
  .arb__fila{border-bottom:1px solid #e6ebf2}
  .tabla-env{overflow:visible !important}

  a{color:inherit;text-decoration:none}
  /* Un enlace en papel no lleva a ningun sitio: se marca con su cifra y basta */
  .enlace-cifra{border:0;font-weight:650}

  @page{margin:12mm}
}

/* ---------------------------------------------------------------------
   34. Resultado en columnas
   ---------------------------------------------------------------------
   De mayor a menor, con el simbolo al pie: la silueta del conjunto dice
   quien gana y por cuanto distancia antes de leer una cifra. Debajo queda
   el marcador con el detalle, que es donde se van a buscar los numeros
   exactos.

   Las alturas se escalan contra la mayor y no contra el 100 %: con el
   primero en 34 % todas las columnas quedarian aplastadas y no se
   distinguiria la segunda de la quinta. El porcentaje escrito encima
   impide que esa escala relativa confunda.
   --------------------------------------------------------------------- */
.grafico-col{
  display:flex;align-items:flex-end;justify-content:center;gap:var(--e-2);
  padding:var(--e-4) var(--e-2) 0;margin-bottom:var(--e-4);
  border-bottom:1px solid var(--borde);
}
/* Con cuatro organizaciones, repartir todo el ancho daria columnas enormes y
   la silueta dejaria de leerse como un grafico. Se les pone techo y el
   conjunto se centra. */
.gcol{
  flex:1 1 0;min-width:62px;max-width:104px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
/* Retrato del cabeza de lista */
.retrato{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;overflow:hidden;flex:0 0 auto;
  border:2px solid var(--panel);box-shadow:0 0 0 1px var(--borde);
  background:var(--panel-2);
}
.retrato img{width:100%;height:100%;object-fit:cover;display:block}
.retrato--sin{
  color:#fff;font-weight:700;letter-spacing:.02em;
  text-shadow:0 1px 1px rgba(0,0,0,.25);
}
.retrato--sm{width:28px;height:28px;font-size:11px}
.retrato--md{width:44px;height:44px;font-size:15px}
.retrato--lg{width:64px;height:64px;font-size:21px}

.gcol__cand{
  font-size:9.5px;color:var(--texto-3);line-height:1.25;text-align:center;
  max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
  /* Dos lineas siempre, tenga nombre o no: asi todos los pies miden igual y
     las barras arrancan del mismo sitio. */
  min-height:calc(9.5px * 1.25 * 2);
}
.gcol__pct{
  font-size:var(--t-sm);font-weight:700;color:var(--texto-2);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.gcol__pct small{font-size:10px;font-weight:600;opacity:.6}
.gcol--lider .gcol__pct{font-size:var(--t-md);color:var(--primario)}
.gcol__pista{
  width:100%;height:150px;display:flex;align-items:flex-end;
  border-radius:var(--radio-sm) var(--radio-sm) 0 0;background:var(--panel-2);
}
.gcol__barra{
  width:100%;border-radius:var(--radio-sm) var(--radio-sm) 0 0;
  transition:height .55s cubic-bezier(.22,.8,.3,1);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.12);
}
.gcol--lider .gcol__barra{box-shadow:inset 0 -1px 0 rgba(0,0,0,.12),0 0 0 2px var(--primario-borde)}
.gcol__pie{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 2px 9px;width:100%;
}
.gcol__sigla{
  font-size:10.5px;font-weight:700;color:var(--texto-2);letter-spacing:.02em;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gcol__votos{
  font-size:10px;color:var(--texto-3);font-variant-numeric:tabular-nums;
}

@media(max-width:820px){
  /* En el telefono no caben catorce columnas repartidas: se fija un ancho
     comodo para el pulgar y la tira se desplaza de lado. Es el unico sitio
     del tablero donde el desplazamiento lateral es el gesto correcto,
     porque la tira ES la escala. */
  .grafico-col{gap:6px;padding:var(--e-3) 4px 0}
  .gcol{flex:0 0 auto;min-width:62px;width:62px}
  .gcol__pista{height:110px}
  .retrato--md{width:36px;height:36px;font-size:13px}
  .gcol__cand{display:none}      /* el nombre completo vive en el marcador */
  .gcol__pct{font-size:var(--t-xs)}
  .gcol--lider .gcol__pct{font-size:var(--t-sm)}
}

/* ---------------------------------------------------------------------
   35. Boton unico de guardado del acta
   ---------------------------------------------------------------------
   Antes cada columna tenia el suyo y cerrar una mesa pedia cuatro envios.
   Ahora hay uno solo y el servidor guarda lo que haya cambiado; el boton
   dice cuantas columnas son, para que el registrador no tenga que fiarse
   de algo que no ve.
   --------------------------------------------------------------------- */
.btn--grande{
  font-size:var(--t-md);font-weight:650;padding:12px 22px;
  display:inline-flex;align-items:center;gap:8px;
}
.btn__nota{
  font-size:var(--t-xs);font-weight:500;opacity:.85;
}
.btn--pendiente{
  box-shadow:0 0 0 3px var(--primario-borde);
}
/* El boton de guardar manda: queda a la derecha y separado del resto.
   Vive dentro de la tarjeta de la cedula, justo bajo la tabla, asi que lleva
   su propio borde y relleno en vez de flotar suelto en la pagina. */
.acciones--guardar{
  display:flex;gap:var(--e-3);align-items:center;
  padding:var(--e-3) var(--e-4);
  border-top:1px solid var(--borde);background:var(--panel-2);
}
.acciones--guardar .btn--grande{margin-left:auto}

@media(max-width:560px){
  .acciones--guardar{flex-wrap:wrap}
  .acciones--guardar .btn--grande{margin-left:0;width:100%;justify-content:center}
  .btn__nota{display:block;width:100%;text-align:center}
}

/* ---------------------------------------------------------------------
   36. Tiras que se deslizan de lado
   ---------------------------------------------------------------------
   Las pestañas de cargo, el gráfico de columnas y las tablas anchas no
   caben en un teléfono y se desplazan en horizontal. Hasta ahora eso lo
   resolvía la barra de desplazamiento del sistema: fea, y en un móvil
   invisible hasta que ya estás arrastrando, así que nadie descubre que
   hay más contenido a la derecha.

   Aquí la barra se oculta y en su lugar aparece una sombra en el borde
   por el que queda contenido, que desaparece sola al llegar al final.
   Es el truco de los cuatro fondos con `background-attachment: local`:
   los dos degradados del color del panel viajan con el contenido y tapan
   la sombra cuando no hace falta. CSS puro, sin JavaScript que escuche
   el scroll en cada fotograma.
   --------------------------------------------------------------------- */
.desliza{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;              /* Firefox */
  -ms-overflow-style:none;           /* Edge antiguo */
  background-image:
    linear-gradient(90deg, var(--panel) 40%, rgba(255,255,255,0)),
    linear-gradient(90deg, rgba(255,255,255,0), var(--panel) 60%),
    radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,.16), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.16), rgba(0,0,0,0));
  background-position:left center, right center, left center, right center;
  background-repeat:no-repeat;
  background-size:36px 100%, 36px 100%, 13px 100%, 13px 100%;
  background-attachment:local, local, scroll, scroll;
  /* Se frena en cada elemento: el dedo suelta y queda una pestaña entera
     a la vista, no media. */
  scroll-snap-type:x proximity;
  scroll-padding-left:var(--e-2);
}
.desliza::-webkit-scrollbar{height:0;width:0;display:none}
.desliza > *{scroll-snap-align:start}

/* En las tiras cuyo fondo no es el del panel, el degradado que tapa la
   sombra tiene que ser del color de debajo o se ve un corte. */
.niveles.desliza{background-color:transparent}
.niveles.desliza{
  background-image:
    linear-gradient(90deg, var(--fondo) 40%, rgba(255,255,255,0)),
    linear-gradient(90deg, rgba(255,255,255,0), var(--fondo) 60%),
    radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,.16), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.16), rgba(0,0,0,0));
}

/* ---------------------------------------------------------------------
   37. Revision del acta
   ---------------------------------------------------------------------
   Debajo del guardado, porque es el paso siguiente, y fuera de las
   columnas porque se aprueba la hoja entera. Solo la ven supervisores y
   administradores: un registrador digita, no da por buena su propia
   digitacion.
   --------------------------------------------------------------------- */
.acciones--revision{
  display:flex;gap:var(--e-3);align-items:center;flex-wrap:wrap;
  padding:var(--e-3) var(--e-4);
  border-top:1px solid var(--borde);background:var(--panel);
}
.revision__texto{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:2px}
.revision__texto strong{font-size:var(--t-sm);font-weight:650;color:var(--texto)}
.revision__nota{font-size:var(--t-xs);color:var(--texto-2);line-height:1.35}
.revision__nota--espera{color:var(--ambar)}
.revision__nota--ok{color:var(--verde)}
.acciones--revision .btn[disabled]{
  opacity:.45;cursor:not-allowed;pointer-events:none;
}

@media(max-width:560px){
  .acciones--revision{flex-direction:column;align-items:stretch}
  .acciones--revision .btn{width:100%;justify-content:center}
}

/* Electores habiles de la mesa, editables por el registrador */
.electores{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.electores__valor{font-size:var(--t-xl);font-variant-numeric:tabular-nums}
.electores__campo{
  width:118px;text-align:right;font-size:var(--t-lg);font-weight:700;
  font-variant-numeric:tabular-nums;padding:6px 10px;
}
.electores__aviso{
  font-size:var(--t-xs);color:var(--ambar);line-height:1.3;max-width:230px;text-align:right;
}
@media(max-width:560px){
  .electores{align-items:stretch;text-align:left}
  .electores__campo{width:100%;text-align:left}
  .electores__aviso{text-align:left;max-width:none}
}