/* ESCRUTA - Control Electoral */
:root {
    --es-navy: #0E2A47;
    --es-navy-2: #081A2E;
    --es-teal: #14B8A6;
    --es-teal-2: #0F9488;
    --es-bg: #F3F6FA;
    --es-card: #FFFFFF;
    --es-muted: #5B7089;
    --es-border: #E2E8F0;
    --bs-primary: #0E2A47;
    --bs-primary-rgb: 14, 42, 71;
    --bs-font-sans-serif: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --bs-body-color: #1E293B;
}

body { background: var(--es-bg); font-size: .925rem; }
h1, h2, h3, h4, h5, .font-display { font-family: "Montserrat", "Segoe UI", sans-serif; letter-spacing: -.01em; }

.btn-primary { --bs-btn-bg: var(--es-navy); --bs-btn-border-color: var(--es-navy); --bs-btn-hover-bg: #143a61; --bs-btn-hover-border-color: #143a61; --bs-btn-active-bg: var(--es-navy-2); }
.btn-teal { --bs-btn-color: #fff; --bs-btn-bg: var(--es-teal); --bs-btn-border-color: var(--es-teal); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--es-teal-2); --bs-btn-hover-border-color: var(--es-teal-2); --bs-btn-active-bg: var(--es-teal-2); --bs-btn-active-color: #fff; }
.text-teal { color: var(--es-teal) !important; }
.bg-navy { background: var(--es-navy) !important; }
a { color: #0F6E8C; }

/* ---------- Layout ---------- */
.layout { display: flex; min-height: 100vh; }
.sidebar { width: 260px; background: linear-gradient(180deg, var(--es-navy) 0%, var(--es-navy-2) 100%); color: #CBD5E1; display: flex; flex-direction: column; }
@media (min-width: 992px) { .sidebar { position: sticky; top: 0; height: 100vh; flex-shrink: 0; } }
.sidebar-brand { padding: 1.1rem 1.2rem .8rem; display: flex; align-items: center; justify-content: space-between; }
.sidebar-brand img { height: 46px; }
.sidebar-nav { padding: .5rem .75rem; overflow-y: auto; flex: 1; }
.nav-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: #7F93AB; margin: 1.1rem .75rem .35rem; font-weight: 600; }
.sidebar .nav-link { color: #CBD5E1; display: flex; align-items: center; gap: .7rem; padding: .55rem .8rem; border-radius: .6rem; margin-bottom: 2px; font-weight: 500; }
.sidebar .nav-link i { font-size: 1.05rem; opacity: .85; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar .nav-link.active { background: rgba(20,184,166,.16); color: #fff; box-shadow: inset 3px 0 0 var(--es-teal); }
.sidebar .nav-link.active i { color: var(--es-teal); opacity: 1; }
.sidebar-foot { padding: 1rem 1.2rem; color: #7F93AB; font-size: .72rem; border-top: 1px solid rgba(255,255,255,.07); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { background: #fff; border-bottom: 1px solid var(--es-border); padding: .7rem 1.5rem; display: flex; align-items: center; position: sticky; top: 0; z-index: 1020; }
.topbar-title { font-size: 1.15rem; margin: 0; font-weight: 700; color: var(--es-navy); }
.user-chip { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: #1E293B; line-height: 1.1; }
.user-chip small { color: var(--es-muted); }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--es-teal); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.content { padding: 1.5rem; }
@media (max-width: 576px) { .content { padding: 1rem .75rem; } .topbar { padding: .6rem 1rem; } }

/* ---------- Componentes ---------- */
.card { border: 1px solid var(--es-border); border-radius: .9rem; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.card-header { background: transparent; border-bottom: 1px solid var(--es-border); font-weight: 600; padding: .85rem 1.1rem; }
.kpi { padding: 1rem 1.1rem; }
.kpi .kpi-label { color: var(--es-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.kpi .kpi-value { font-family: "Montserrat", sans-serif; font-size: 1.7rem; font-weight: 800; color: var(--es-navy); line-height: 1.15; }
.kpi .kpi-sub { color: var(--es-muted); font-size: .8rem; }
.kpi-icon { width: 42px; height: 42px; border-radius: .7rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.table > :not(caption) > * > * { padding: .6rem .75rem; }
.table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--es-muted); font-weight: 600; background: #F8FAFC; }
.form-label { font-weight: 600; font-size: .85rem; color: #334155; }

/* Barras de candidatos */
.cand-row { display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; padding: .7rem 0; border-bottom: 1px dashed var(--es-border); }
.cand-row:last-child { border-bottom: 0; }
.cand-name { font-weight: 600; }
.cand-name small { color: var(--es-muted); font-weight: 500; }
.cand-votes { text-align: right; font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 1.15rem; }
.cand-votes small { display: block; font-family: "Inter", sans-serif; font-weight: 500; font-size: .75rem; color: var(--es-muted); }
.cand-bar { grid-column: 1 / -1; height: 10px; background: #EEF2F7; border-radius: 6px; overflow: hidden; }
.cand-bar > span { display: block; height: 100%; border-radius: 6px; transition: width .6s ease; }
.cand-propio { background: linear-gradient(90deg, rgba(20,184,166,.08), transparent); border-radius: .5rem; padding-left: .5rem; padding-right: .5rem; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: .4rem; vertical-align: middle; }

.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #22C55E; display: inline-block; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 70% { box-shadow: 0 0 0 9px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

#mapa { height: 420px; border-radius: .75rem; }
.leaflet-popup-content { font-size: .82rem; }

/* Captura de acta */
.acta-preview { background: #0B1726; border-radius: .75rem; min-height: 320px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.acta-preview img { max-width: 100%; max-height: 70vh; cursor: zoom-in; }
.acta-preview.zoom img { max-height: none; max-width: none; width: 180%; cursor: zoom-out; }
.acta-preview .placeholder-txt { color: #7F93AB; text-align: center; padding: 2rem; }
.campo-ocr { border-color: #F59E0B !important; background: #FFFBEB !important; }
.campo-ocr-ok { border-color: var(--es-teal) !important; background: #F0FDFA !important; }
.cuadre { border-radius: .6rem; padding: .65rem .9rem; font-weight: 600; }
.cuadre.ok { background: #ECFDF5; color: #047857; }
.cuadre.mal { background: #FEF2F2; color: #B91C1C; }

/* Login */
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-hero { background: radial-gradient(circle at 20% 20%, #143a61 0%, var(--es-navy) 45%, var(--es-navy-2) 100%); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; }
.login-hero h2 { font-weight: 800; font-size: 2.2rem; line-height: 1.15; }
.login-hero .feat { display: flex; gap: .8rem; margin-bottom: 1rem; color: #CBD5E1; }
.login-hero .feat i { color: var(--es-teal); font-size: 1.3rem; }
.login-form { display: flex; align-items: center; justify-content: center; padding: 2rem; background: #fff; }
.login-card { width: 100%; max-width: 380px; }
@media (max-width: 900px) { .login-wrap { grid-template-columns: 1fr; } .login-hero { display: none; } }

.opcion-sondeo .btn { text-align: left; padding: .8rem 1rem; font-weight: 600; }
.opcion-sondeo .btn-check:checked + .btn { box-shadow: 0 0 0 .2rem rgba(20,184,166,.35); }
.mini { font-size: .78rem; color: var(--es-muted); }
.table-sm-text td { font-size: .85rem; }

/* Barra apilada 100% (parroquias) con separación de 2px entre segmentos */
.stack { display: flex; gap: 2px; height: 26px; border-radius: 6px; overflow: hidden; background: #fff; }
.stack > span { display: flex; align-items: center; justify-content: center; color: #fff; font-size: .72rem; font-weight: 600; white-space: nowrap; overflow: hidden; min-width: 2px; }
.stack > span:first-child { border-radius: 6px 0 0 6px; }
.stack > span:last-child { border-radius: 0 6px 6px 0; }