:root{
  --azul: #1e3a5f;
  --azul-claro: #2c5282;
  --fondo: #f4f6f8;
  --texto: #1a1a1a;
  --borde: #d8dde3;
  --verde: #276749;
  --rojo: #9b2c2c;
}
*{box-sizing:border-box}
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  margin:0;
  padding:0;
  line-height:1.5;
}
.wrap{
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 18px 60px;
}
header.top{
  background: var(--azul);
  color: #fff;
  padding: 18px 20px;
  text-align:center;
}
header.top h1{margin:0;font-size:1.05rem;font-weight:600;letter-spacing:.3px}
h2{color:var(--azul);font-size:1.3rem;margin-top:0}
.card{
  background:#fff;
  border:1px solid var(--borde);
  border-radius:10px;
  padding:22px;
  margin-bottom:18px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
label{display:block;font-weight:600;margin:14px 0 6px;font-size:.92rem}
input[type=text], input[type=password], textarea, select{
  width:100%;
  padding:11px 12px;
  border:1px solid var(--borde);
  border-radius:7px;
  font-size:16px;
  font-family:inherit;
}
textarea{min-height:130px;resize:vertical}
button, .btn{
  display:inline-block;
  background: var(--azul);
  color:#fff;
  border:none;
  padding:12px 22px;
  border-radius:7px;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  margin-top:14px;
  text-align:center;
}
button:hover, .btn:hover{background:var(--azul-claro)}
.btn.secundario{background:#fff;color:var(--azul);border:1px solid var(--azul)}
.btn.peligro{background:var(--rojo)}
.btn.ancho{display:block;width:100%}
.opcion-voto{
  display:block;
  border:2px solid var(--borde);
  border-radius:8px;
  padding:16px;
  margin-bottom:10px;
  cursor:pointer;
  font-size:17px;
}
.opcion-voto:hover{border-color: var(--azul-claro)}
.opcion-voto input{margin-right:10px;transform:scale(1.3)}
.alert{
  padding:14px 16px;
  border-radius:8px;
  margin-bottom:16px;
  font-size:.95rem;
}
.alert.ok{background:#e6f4ea;color:var(--verde);border:1px solid #b7e0c3}
.alert.error{background:#fdecea;color:var(--rojo);border:1px solid #f3c1bc}
.alert.info{background:#eaf1fb;color:var(--azul);border:1px solid #c3d6f0}
table{width:100%;border-collapse:collapse;margin-top:10px;font-size:.9rem}
th,td{padding:8px 6px;border-bottom:1px solid var(--borde);text-align:left}
th{color:var(--azul);font-weight:600}
.tag{
  display:inline-block;
  padding:3px 10px;
  border-radius:12px;
  font-size:.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.tag.borrador{background:#f0e6d2;color:#8a6d1a}
.tag.abierta{background:#d3f0d8;color:var(--verde)}
.tag.cerrada{background:#e2e2e2;color:#555}
.barra{background:#e8edf3;border-radius:6px;overflow:hidden;height:26px;margin:6px 0}
.barra-fill{background:var(--azul);height:100%;color:#fff;font-size:.8rem;display:flex;align-items:center;padding-left:8px;white-space:nowrap}
.resultado-fila{margin-bottom:14px}
.muted{color:#666;font-size:.85rem}
a{color:var(--azul)}
.footer-nota{text-align:center;margin-top:30px;font-size:.8rem;color:#888}
code{background:#eee;padding:2px 6px;border-radius:4px;font-size:.85em}

/* Barras en vivo */
.live-dot{
  display:inline-block;width:9px;height:9px;border-radius:50%;
  background:#e53e3e;margin-right:6px;
  animation: pulse 1.4s infinite;
}
@keyframes pulse{0%{opacity:1}50%{opacity:.3}100%{opacity:1}}
.resultado-fila .opcion-nombre{font-size:1.15rem;font-weight:700;color:var(--azul)}
.resultado-fila .opcion-num{font-size:1.4rem;font-weight:800;float:right}
.barra{height:34px;margin:6px 0 4px}
.barra-fill{font-size:.95rem;font-weight:700}