:root {
  /* Decisión 2026 — paleta multi-candidato.
     --c-primario / --c-secundario los inyecta app.js desde el branding del candidato
     (color_primario rojo Colorado, color_secundario azul). Defaults = Decisión 2026. */
  --c-primario:   #C0182C;   /* rojo Colorado (default; se sobreescribe por candidato) */
  --c-secundario: #1B3A8B;   /* azul (default; se sobreescribe por candidato) */
  /* alias hacia el branding para no reescribir todo el CSS */
  --azul-oscuro: var(--c-primario);
  --azul-medio:  var(--c-secundario);
  --fondo: #f7f8fa;
  --texto: #1d2733;
  --muted: #6b7785;
  --borde: #d9dee4;
  --verde: #1e8e4e;
  --verde-bg: #e7f6ed;
  --amarillo: #b8860b;
  --amarillo-bg: #fcf4dd;
  --rojo: #c0392b;
  --rojo-bg: #fbe9e7;
  --radio: 14px;
  --tap: 56px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.4;
}

.screen {
  display: none;
  min-height: 100dvh;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
  max-width: 520px;
  margin: 0 auto;
  flex-direction: column;
}
.screen.active { display: flex; }

.center-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.brand h1 {
  font-size: 22px;
  margin: 0;
  color: var(--azul-oscuro);
}

.logo-badge {
  width: 88px;
  height: 88px;
  border-radius: 22px;
  background: var(--azul-oscuro);
  color: #fff;
  font-weight: 800;
  font-size: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-badge.sm {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 24px;
}

h2 {
  font-size: 24px;
  margin: 0 0 6px;
  color: var(--azul-oscuro);
}
.muted { color: var(--muted); margin-top: 0; }

label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--azul-oscuro);
  margin: 18px 0 6px;
}

input {
  width: 100%;
  min-height: var(--tap);
  padding: 0 16px;
  font-size: 20px;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  background: #fff;
  color: var(--texto);
}
input:focus {
  outline: none;
  border-color: var(--azul-medio);
  box-shadow: 0 0 0 3px rgba(60,153,212,.2);
}

.btn-primary {
  width: 100%;
  min-height: var(--tap);
  margin-top: 24px;
  border: none;
  border-radius: var(--radio);
  background: var(--azul-oscuro);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
}
.btn-primary:active { filter: brightness(.85); }
.btn-primary:disabled { opacity: .55; cursor: default; }
.btn-primary.big { min-height: 68px; font-size: 23px; }

.btn-secondary {
  width: 100%;
  min-height: var(--tap);
  margin-top: 14px;
  border: 2px solid var(--c-secundario);
  border-radius: var(--radio);
  background: #fff;
  color: var(--c-secundario);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}
.btn-secondary:active { background: #eef2fb; }
.wa-ico { font-size: 22px; }

/* Espera del login passwordless (polling tras abrir WhatsApp) */
.wait-box {
  margin-top: 22px;
  text-align: center;
  color: var(--azul-medio);
  font-size: 16px;
  font-weight: 600;
}
.spinner {
  width: 38px;
  height: 38px;
  margin: 0 auto 14px;
  border: 4px solid #e5e9f4;
  border-top-color: var(--c-secundario);
  border-radius: 50%;
  animation: d26-spin 0.9s linear infinite;
}
@keyframes d26-spin { to { transform: rotate(360deg); } }

.btn-link {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 12px;
  background: none;
  border: none;
  color: var(--azul-medio);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.banner {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: var(--radio);
  font-size: 16px;
  font-weight: 600;
}
.banner.error { background: var(--rojo-bg); color: var(--rojo); }
.banner.info { background: var(--amarillo-bg); color: var(--amarillo); }

/* ---- LATIDO: banner de pausa remota ---- */
.pausa-banner {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: var(--radio);
  font-size: 17px;
  font-weight: 800;
  text-align: center;
  background: var(--amarillo-bg, #fff7e0);
  color: var(--amarillo, #8a6d00);
  border: 2px solid var(--amarillo, #d9a600);
}

/* ---- Pantalla principal ---- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--borde);
  margin-bottom: 20px;
}
.op-name { font-weight: 700; font-size: 18px; color: var(--azul-oscuro); }
.op-punto { font-size: 14px; }

/* Rol del operador en el encabezado (Registrador / Referente) */
.op-rol {
  display: inline-block;
  margin: 2px 0 1px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #fff;
}
.op-rol.rol-registrador { background: var(--c-secundario); }
.op-rol.rol-referente   { background: var(--c-primario); }

/* Homes por rol — ocupan el alto disponible entre topbar y footer */
.home { display: flex; flex-direction: column; flex: 1; }
/* El display:flex de arriba pisa el atributo hidden de la UA; forzamos ocultar. */
.home[hidden] { display: none; }

/* Hero de la lista del referente: número grande de "faltan" */
.lista-hero {
  text-align: center;
  background: #fff;
  border: 2px solid var(--c-primario);
  border-radius: var(--radio);
  padding: 22px 16px;
  margin-bottom: 8px;
}
.lista-hero-num {
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  color: var(--c-primario);
}
.lista-hero-lbl {
  font-size: 16px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 6px;
}

.cupo-chip {
  text-align: center;
  background: var(--azul-oscuro);
  color: #fff;
  border-radius: 14px;
  padding: 8px 14px;
  min-width: 72px;
}
.cupo-chip.bajo { background: var(--rojo); }
.cupo-chip.cero { background: var(--rojo); }
.cupo-num { display: block; font-size: 26px; font-weight: 800; line-height: 1; }
.cupo-lbl { font-size: 12px; opacity: .85; }

.felicitar-box label { margin-top: 0; }
.felicitar-box input { min-height: 64px; font-size: 26px; text-align: center; letter-spacing: 1px; }

.resultado {
  margin-top: 22px;
  padding: 22px 18px;
  border-radius: var(--radio);
  text-align: center;
}
.resultado .r-icon { font-size: 44px; line-height: 1; }
.resultado .r-title { font-size: 26px; font-weight: 800; margin: 8px 0 4px; }
.resultado .r-name { font-size: 24px; font-weight: 700; margin: 4px 0; }
.resultado .r-line { font-size: 17px; margin: 3px 0; }
.resultado .r-tag {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
}

.resultado.ok { background: var(--verde-bg); color: var(--verde); border: 2px solid var(--verde); }
.resultado.ok .r-tag { background: var(--verde); color: #fff; }
.resultado.ok .r-tag.habilitado { background: var(--azul-medio); }

.resultado.warn { background: var(--amarillo-bg); color: var(--amarillo); border: 2px solid var(--amarillo); }
.resultado.bad { background: var(--rojo-bg); color: var(--rojo); border: 2px solid var(--rojo); }

.mainfoot { margin-top: auto; padding-top: 20px; }

.busy { position: relative; pointer-events: none; }

/* ---- Mi lista pendiente ---- */
.faltantes-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}
.faltante-item {
  background: #fff;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.faltante-nombre { font-size: 19px; font-weight: 700; color: var(--azul-oscuro); }
.faltante-meta { font-size: 15px; color: var(--muted); margin-top: 2px; }
.faltante-vacio {
  text-align: center;
  color: var(--verde);
  font-weight: 700;
  padding: 28px 16px;
}

/* ---- Branding Decisión 2026 ---- */
.d26-logo {
  width: 120px;
  height: 120px;
  object-fit: contain;
}
.d26-logo.sm { width: 56px; height: 56px; }

.brand-stack {
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.cand-block {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  padding: 10px 14px;
  width: 100%;
}
.cand-foto {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--c-primario);
  background: #eee;
  flex: 0 0 auto;
}
.cand-foto.sm { width: 40px; height: 40px; border-width: 2px; }
.cand-text { text-align: left; min-width: 0; }
.cand-nombre { font-weight: 800; font-size: 18px; color: var(--c-primario); }
.cand-lista { font-size: 14px; }

/* ---- Topbar principal (candidato + campana) ---- */
.topbar-cand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.op-cand { font-size: 13px; }
.topbar-right { display: flex; align-items: center; gap: 10px; }

.bell-btn {
  position: relative;
  border: none;
  background: none;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}
.bell-badge {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--c-primario);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}

.main-actions { margin-top: 8px; }

/* ---- Elegí tu lista ---- */
.pick-list { list-style: none; margin: 16px 0 0; padding: 0; }
.pick-item {
  background: #fff;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px;
  margin-bottom: 12px;
  cursor: pointer;
}
.pick-item:active { border-color: var(--c-primario); background: #fff5f5; }
.pick-nombre { font-size: 19px; font-weight: 700; color: var(--c-primario); }
.pick-meta { font-size: 15px; margin-top: 2px; }

/* ---- Notificaciones ---- */
.notis-list { list-style: none; margin: 16px 0 0; padding: 0; }
.noti-item {
  background: #fff;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.noti-item.noti-nuevo { border-color: var(--c-primario); }
.noti-titulo { font-size: 18px; font-weight: 700; color: var(--texto); display: flex; align-items: center; gap: 8px; }
.noti-cuerpo { font-size: 16px; margin-top: 4px; color: var(--texto); }
.noti-fecha { font-size: 13px; margin-top: 6px; }
.noti-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c-primario);
  flex: 0 0 auto;
}

/* ---- Tags resultado / registrados ---- */
.r-tags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.r-tags .r-tag { margin-top: 0; }
.r-tag.mia    { background: var(--verde); color: #fff; }
.r-tag.otro   { background: var(--c-secundario); color: #fff; }
.r-tag.suelto { background: #e4e8ee; color: var(--muted); }

.tag-mia {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--verde-bg);
  color: var(--verde);
  font-size: 12px;
  font-weight: 700;
  vertical-align: middle;
}

/* Cota del referente: barra cumplida / total */
.cota{margin:2px 0 14px;padding:0 4px}
.cota-top{display:flex;justify-content:space-between;font-size:14px;font-weight:700;margin-bottom:5px}
.cota-bar{height:12px;background:#e6e9ef;border-radius:8px;overflow:hidden}
.cota-fill{height:100%;width:0;background:var(--c-primario,#C0182C);border-radius:8px;transition:width .4s}

/* Modal explicativo + toast de login */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}
.modal-overlay[hidden]{display:none}
.modal-card{background:#fff;border-radius:18px;padding:24px 22px;max-width:340px;width:100%;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.modal-card .modal-ic{font-size:40px}
.modal-card h3{margin:8px 0 6px;font-size:19px;color:var(--c-primario,#C0182C)}
.modal-card p{font-size:15px;color:#444;margin:0 0 16px}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:#177544;color:#fff;padding:12px 20px;border-radius:30px;font-weight:700;font-size:15px;box-shadow:0 8px 24px rgba(0,0,0,.3);opacity:0;transition:opacity .3s,transform .3s;z-index:1100}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast[hidden]{display:none}
.modal-card .modal-hint{font-size:13px;color:#888;margin:-6px 0 16px}
/* ---- Modal de AYUDA (guía contextual) ---- */
.ayuda-card{max-width:380px}
.ayuda-body{text-align:left;font-size:14px;color:#333;margin-bottom:16px}
.ayuda-body p{margin:10px 0 6px;color:var(--c-primario,#C0182C);font-weight:700;font-size:14px}
.ayuda-body ul{margin:0 0 8px;padding-left:20px}
.ayuda-body li{margin:4px 0;font-size:14px;color:#444;line-height:1.4}
.ayuda-body .ayuda-pie{background:#f4f6f9;border-radius:10px;padding:10px 12px;color:#555;font-weight:400;margin-top:12px}
.wami-fallback{margin-top:18px;padding-top:14px;border-top:1px solid var(--linea,#e3e8ef);text-align:left}
.wami-fallback .muted{font-size:13px}
.fb-msg{background:#f4f6f9;border:1px solid #e3e8ef;border-radius:10px;padding:10px 12px;font-size:13px;margin:8px 0;word-break:break-word;user-select:all;-webkit-user-select:all}

/* ---- Contador de cupo del REGISTRADOR (gastó X de Y) ---- */
.cupo-contador{
  text-align:center;
  background:#eef2fb;
  color:var(--c-secundario,#1B3A8B);
  border:2px solid var(--c-secundario,#1B3A8B);
  border-radius:var(--radio);
  padding:12px 16px;
  margin-bottom:16px;
  font-size:18px;
  font-weight:700;
}
.cupo-contador b{font-size:22px;font-weight:900}
.cupo-contador.bajo{background:#fcf4dd;color:var(--amarillo);border-color:var(--amarillo)}
.cupo-contador.cero{background:var(--rojo-bg);color:var(--rojo);border-color:var(--rojo)}

/* ---- Divisor "Mi lista" en el home del referente ---- */
.ref-divisor{
  margin:22px 0 6px;
  padding-top:18px;
  border-top:2px solid var(--borde);
  font-size:20px;
  font-weight:800;
  color:var(--c-primario,#C0182C);
}

/* ---- Bandera roja del registrador (gastó de más; se registró igual) ---- */
.r-flag-roja{
  margin:-4px 0 12px;
  padding:10px 14px;
  border-radius:var(--radio);
  background:var(--rojo,#c0392b);
  color:#fff;
  font-size:16px;
  font-weight:800;
}

/* ---- Modal de confirmación de persona ---- */
.confirm-card .confirm-name{font-size:24px;font-weight:900;color:var(--texto);margin:4px 0 2px}
.confirm-card .confirm-ci{font-size:18px;font-weight:700;color:var(--c-secundario,#1B3A8B);margin-bottom:4px}
.confirm-card .confirm-ubic{font-size:14px;margin-bottom:8px}
.confirm-avisos{margin:6px 0 14px;display:flex;flex-direction:column;gap:8px}
.confirm-aviso{padding:8px 12px;border-radius:10px;font-size:15px;font-weight:700}
.confirm-aviso.warn{background:var(--amarillo-bg);color:var(--amarillo);border:2px solid var(--amarillo)}
.confirm-aviso.otro{background:#eef2fb;color:var(--c-secundario,#1B3A8B);border:2px solid var(--c-secundario,#1B3A8B)}
.confirm-aviso.mia{background:var(--verde-bg);color:var(--verde);border:2px solid var(--verde)}

/* ---- Marca de agua anti-captura (nombre del operador, trazable) ---- */
.watermark{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  overflow:hidden;
  display:flex;
  flex-wrap:wrap;
  align-content:flex-start;
  gap:38px 26px;
  padding:60px 10px;
  transform:rotate(-24deg) scale(1.6);
  transform-origin:center;
  opacity:.10;
}
.watermark[hidden]{display:none}
.wm-cell{
  font-size:14px;
  font-weight:800;
  color:#000;
  white-space:nowrap;
  letter-spacing:.5px;
}
/* La marca de agua va detrás del contenido interactivo pero encima del fondo. */
#screen-main .topbar,
#screen-main .home,
#screen-main .mainfoot{position:relative;z-index:10}

/* ---- Escudo de blur (app a segundo plano) ---- */
.blur-shield{
  position:fixed;
  inset:0;
  z-index:1200;
  background:rgba(247,248,250,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  text-align:center;
}
.blur-shield[hidden]{display:none}
/* Respaldo: si el navegador no soporta backdrop-filter, difuminamos el contenido directamente. */
body.blurred #screen-main{filter:blur(16px)}

/* Portada: blanco TOTAL a pantalla completa (rompe la columna de 520px),
   logo grande, flotante, con glow. Mismo trato para la pantalla de carga. */
#screen-portada, #screen-loading{
  position: fixed; inset: 0; max-width: none; margin: 0;
  padding: 24px; background: #ffffff;
}
#screen-portada .center-col, #screen-loading .center-col{
  min-height: 100dvh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap: 18px;
}
#screen-portada .d26-logo, #screen-loading .d26-logo{
  width: min(82vw, 420px); height: auto; object-fit: contain;
  filter: drop-shadow(0 22px 48px rgba(27,58,139,.30));
  animation: d26-float 3.6s ease-in-out infinite;
}
@keyframes d26-float{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-18px) }
}
@media (prefers-reduced-motion: reduce){
  #screen-portada .d26-logo, #screen-loading .d26-logo{ animation: none }
}

/* Alerta de cupo bajo + botón pedir más cupo (registrador) */
.cupo-alerta{
  border-radius:11px; padding:11px 13px; font-size:14px; font-weight:600;
  margin:0 0 10px; text-align:center;
}
.cupo-alerta.bajo{ background:var(--amarillo-bg); color:var(--amarillo); border:1.5px solid var(--amarillo); }
.cupo-alerta.cero{ background:var(--rojo-bg); color:var(--rojo); border:1.5px solid var(--rojo); }
.cupo-alerta[hidden]{ display:none; }
.pedir-cupo-wrap{ text-align:center; margin-top:20px; }
.pedir-cupo-link{ font-size:13px; color:var(--muted); text-decoration:underline; }
#btn-pedir-cupo[hidden]{ display:none; }