/* =====================================================================
   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);
  overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;
}
.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)}