:root {
    --bg: #f3f6fb;
    --surface: #ffffff;
    --text: #172033;
    --muted: #667085;
    --line: #d9deea;
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --danger: #dc2626;
    --success: #0f766e;
    --navy: #101828;
    --cyan: #0891b2;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

.topbar {
    align-items: center;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    padding: 16px clamp(18px, 5vw, 56px);
    position: sticky;
    top: 0;
    z-index: 5;
}

.brand {
    font-size: 20px;
    font-weight: 800;
}

.nav {
    align-items: center;
    display: flex;
    gap: 16px;
}

.page {
    margin: 0 auto;
    max-width: 1180px;
    padding: 32px 20px 56px;
}

.active-project-context {
    align-items: center;
    background: #eef4ff;
    border-bottom: 1px solid #d6e2f5;
    color: #213451;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    padding: 10px clamp(18px, 5vw, 56px);
}

.active-project-context div {
    align-items: baseline;
    display: flex;
    gap: 9px;
    min-width: 0;
}

.active-project-context span {
    color: #6b7c96;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.active-project-context strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.active-project-context a {
    color: #4169e1;
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 800;
}

.disabled-action {
    cursor: not-allowed;
    opacity: .58;
    pointer-events: none;
}

.account-password-panel {
    margin-inline: auto;
    max-width: 760px;
}
.account-password-panel form { display: grid; gap: 18px; }
.account-password-panel .panel-title p { margin-bottom: 0; }
.security-alert-nav.has-alerts { color: #b42318; font-weight: 900; }
.security-alert-unread { background: rgba(239,68,68,.055); }
.security-alert-unread td:first-child { border-left: 3px solid #ef4444; }
.security-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 650px) { .security-metrics { grid-template-columns: 1fr; } }

@media (max-width: 600px) {
    .active-project-context {
        align-items: flex-start;
        gap: 7px;
        padding-block: 9px;
    }

    .active-project-context div {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }
}

.import-hero {
    align-items: flex-end;
    background: linear-gradient(135deg, #101828 0%, #1e3a8a 55%, #0f766e 100%);
    border-radius: 12px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    margin-bottom: 22px;
    padding: 28px;
}

.import-hero .eyebrow,
.import-hero p {
    color: #dbeafe;
}

.import-hero h1 {
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.02;
    margin: 0 0 10px;
    max-width: 760px;
}

.import-steps {
    display: flex;
    gap: 8px;
}

.import-steps span,
.status-pill {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    color: #fff;
    font-weight: 800;
    padding: 8px 12px;
    white-space: nowrap;
}

.import-engine-grid { display: grid; gap: 18px; grid-template-columns: minmax(520px,1.6fr) minmax(280px,.7fr); margin-bottom: 20px; }
.import-engine-grid .form-panel { margin: 0; }
.automation-list { background: #f7f9fd; border: 1px solid #e2eaf4; border-radius: 14px; display: grid; gap: 10px; margin: 18px 0; padding: 16px; }
.automation-list span { color: #526174; font-size: 13px; font-weight: 700; }
.import-safety-card { background: linear-gradient(145deg,#0c1833,#193a79); color: #fff; }
.import-safety-card h2 { color: #fff; }
.import-safety-card p { color: #c8d8ee; }
.import-stat { border-top: 1px solid rgba(255,255,255,.16); margin-top: 26px; padding-top: 22px; }
.import-stat strong { color: #61e7d0; display: block; font-size: 42px; }
.import-stat span { color: #c8d8ee; font-size: 12px; }

.hero,
.section-head {
    align-items: center;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin-bottom: 26px;
}

.dashboard-hero,
.landing-hero {
    align-items: flex-end;
    background:
        linear-gradient(135deg, rgba(16, 24, 40, 0.96), rgba(30, 58, 138, 0.88)),
        radial-gradient(circle at 85% 20%, rgba(20, 184, 166, 0.35), transparent 30%);
    border-radius: 12px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
    min-height: 260px;
    padding: 30px;
}

.dashboard-hero {
    align-items: center;
    background:
        radial-gradient(circle at 75% 25%, rgba(74, 222, 203, .22), transparent 25%),
        radial-gradient(circle at 90% 85%, rgba(139, 92, 246, .35), transparent 30%),
        linear-gradient(125deg, #0c1833 0%, #193a79 52%, #6541a5 100%);
    min-height: 370px;
    overflow: hidden;
    padding: clamp(34px, 5vw, 56px);
    position: relative;
}

.dashboard-hero::before {
    background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 34px 34px;
    content: "";
    inset: 0;
    mask-image: linear-gradient(90deg, transparent, #000);
    position: absolute;
}

.dashboard-copy { max-width: 650px; position: relative; z-index: 2; }
.dashboard-hero h1 { font-size: clamp(46px, 6vw, 72px); letter-spacing: -.045em; line-height: .94; margin: 0 0 20px; }
.dashboard-hero h1 em { color: #61e7d0; display: block; font-style: normal; }
.dashboard-hero .hero-lead { color: rgba(255,255,255,.82); font-size: 18px; line-height: 1.55; max-width: 600px; }
.dashboard-visual { height: 310px; min-width: 310px; position: relative; width: 36%; z-index: 1; }
.dashboard-visual .ring-one { height: 250px; width: 250px; }
.dashboard-visual .ring-two { height: 165px; width: 165px; }
.dashboard-visual .radar-sweep { height: 250px; left: calc(50% - 125px); top: calc(50% - 125px); width: 250px; }

.landing-hero {
    min-height: 360px;
}

.dashboard-hero .eyebrow,
.dashboard-hero p,
.landing-hero .eyebrow,
.landing-hero p {
    color: #dbeafe;
}

.dashboard-hero h1,
.landing-hero h1 {
    font-size: clamp(34px, 5vw, 58px);
    line-height: 1.02;
    margin: 0 0 12px;
    max-width: 780px;
}

.hero-button {
    background: #14b8a6;
    color: #062923;
}

.hero-button:hover {
    background: #2dd4bf;
}

.hero h1,
.section-head h1 {
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.05;
    margin: 0;
}

.eyebrow {
    color: var(--success);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.card,
.row-card,
.form-panel,
.result-card,
.empty {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(23, 32, 51, 0.06);
}

.card {
    padding: 22px;
}

.card h2,
.row-card h2,
.result-card h2 {
    margin: 0 0 8px;
}

.muted,
.card p,
.row-card p,
.section-head p {
    color: var(--muted);
}

.button,
button.button {
    background: var(--primary);
    border: 0;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-weight: 800;
    justify-content: center;
    padding: 11px 16px;
}

.button:hover {
    background: var(--primary-dark);
}

.button.small {
    padding: 8px 12px;
}

.user-pill {
    background: #f1f5f9;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    padding: 7px 10px;
}

.muted-button {
    background: #eef2ff;
    color: #1e3a8a;
}

.muted-button:hover {
    background: #dbe4ff;
}

.danger {
    background: var(--danger);
}

.list {
    display: grid;
    gap: 14px;
}

.row-card {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 18px;
}

.actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.actions form {
    margin: 0;
}

.form-panel {
    display: grid;
    gap: 18px;
    padding: 22px;
}

.pro-panel {
    border-top: 4px solid var(--primary);
    box-shadow: 0 14px 34px rgba(16, 24, 40, 0.08);
}

.panel-title {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.panel-title h2 {
    margin: 0;
}

.panel-title .status-pill {
    background: #ecfeff;
    border-color: #bae6fd;
    color: #0e7490;
}

.auth-panel {
    display: grid;
    gap: 18px;
    margin: 0 auto;
    max-width: 520px;
}

.login-help {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    padding: 14px 16px;
}

.login-help p {
    margin: 6px 0 0;
}

.form-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

label {
    display: grid;
    font-weight: 700;
    gap: 8px;
}

input,
select,
textarea {
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--text);
    font: inherit;
    padding: 11px 12px;
    width: 100%;
}

.questions-title {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.question-block {
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 14px;
    margin-bottom: 14px;
    padding: 16px;
}

.question-toolbar {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.check-row {
    align-items: center;
    align-self: end;
    display: flex;
    gap: 10px;
    min-height: 44px;
}

.check-row input {
    width: auto;
}

fieldset.question-block {
    margin: 0;
}

legend {
    font-weight: 800;
    padding: 0 8px;
}

.options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.option {
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 6px;
    display: flex;
    gap: 8px;
    padding: 10px 12px;
}

.option input {
    width: auto;
}

.alert,
.notice,
.empty {
    margin-bottom: 16px;
    padding: 14px 16px;
}

.alert {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.notice {
    background: #ecfdf5;
    border: 1px solid #99f6e4;
    border-radius: 8px;
    color: #115e59;
}

.badge {
    color: var(--muted);
    font-weight: 800;
}

.link-button {
    background: transparent;
    border: 0;
    color: var(--danger);
    cursor: pointer;
    font-weight: 800;
    justify-self: start;
    padding: 0;
}

.hint {
    color: var(--muted);
    font-size: 13px;
    margin: -6px 0 0;
}

.result-card {
    margin-bottom: 18px;
    padding: 22px;
}

.metric-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-bottom: 18px;
}

.metric-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 18px;
}

.executive-grid .metric-card {
    border-top: 4px solid var(--primary);
    box-shadow: 0 12px 26px rgba(16, 24, 40, 0.08);
}

.metric-card.accent-blue { border-top-color: #2563eb; }
.metric-card.accent-green { border-top-color: #16a34a; }
.metric-card.accent-cyan { border-top-color: #0891b2; }
.metric-card.accent-orange { border-top-color: #f59e0b; }

.metric-card span {
    color: var(--muted);
    display: block;
    font-weight: 800;
    margin-bottom: 10px;
}

.metric-card strong {
    display: block;
    font-size: 28px;
}

.command-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin-bottom: 18px;
}

.command-card,
.table-card,
.pro-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.07);
    padding: 20px;
}

.command-card h2 {
    margin: 0 0 8px;
}

.table-card {
    display: grid;
    gap: 16px;
}

.table-status {
    background: #ecfdf5;
    border-color: #bbf7d0;
    color: #166534;
}

.insights-section {
    background: #fff;
    border: 1px solid #e6edf5;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(36, 54, 79, 0.06);
    display: grid;
    gap: 18px;
    margin-bottom: 18px;
    padding: 20px;
}

.insight-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.territory-filter { align-items: start; background: #f7f9fd; border: 1px solid #e2eaf4; border-radius: 14px; display: grid; gap: 12px; grid-template-columns: repeat(3,minmax(170px,1fr)) auto auto; margin: 16px 0 20px; padding: 16px; }
.territory-filter label { color: #526174; font-size: 12px; font-weight: 800; }
.territory-filter select { margin-top: 6px; }
.territory-filter > .button { align-self: start; margin-top: 25px; }
.global-report-filter { background: #fff; border: 1px solid #dfe8f4; border-radius: 18px; box-shadow: 0 12px 30px rgba(28,55,96,.06); margin: 0 0 20px; padding: 18px; }
.global-report-filter .territory-filter { margin: 14px 0 0; }
.live-loading-overlay { align-items: center; background: rgba(238,243,252,.76); backdrop-filter: blur(5px); bottom: 0; display: flex; justify-content: center; left: 0; opacity: 0; padding: 20px; position: fixed; right: 0; top: 0; transition: opacity .18s ease; z-index: 2000; }
.live-loading-overlay[hidden] { display: none; }
.live-loading-overlay.is-visible { opacity: 1; }
.live-loading-card { align-items: center; background: rgba(255,255,255,.96); border: 1px solid #dbe6f5; border-radius: 20px; box-shadow: 0 24px 70px rgba(30,54,98,.2); display: flex; flex-direction: column; max-width: 360px; padding: 26px 30px 22px; text-align: center; width: 100%; }
.live-loading-card strong { color: #203451; font-size: 17px; margin-top: 13px; }
.live-loading-card small { color: #718198; font-size: 11px; margin-top: 5px; }
.live-loading-spinner { animation: live-spin .75s linear infinite; border: 3px solid #dce7fb; border-radius: 50%; border-top-color: #5278ed; height: 38px; width: 38px; }
.live-loading-progress { background: #e9eef8; border-radius: 999px; height: 5px; margin-top: 18px; overflow: hidden; width: 100%; }
.live-loading-progress i { animation: live-progress 1.15s ease-in-out infinite; background: linear-gradient(90deg,#5278ed,#8258dc,#49d7c5); border-radius: inherit; display: block; height: 100%; width: 42%; }
@keyframes live-spin { to { transform: rotate(360deg); } }
@keyframes live-progress { 0% { transform: translateX(-110%); } 100% { transform: translateX(270%); } }
@media (prefers-reduced-motion: reduce) { .live-loading-spinner,.live-loading-progress i { animation-duration: 2.4s; } }
.territory-import-settings { background: #f7f9fd; border: 1px solid #dfe7f3; border-radius: 16px; display: grid; gap: 10px; margin: 18px 0; padding: 16px; }
.territory-import-settings legend { color: #203651; font-size: 14px; font-weight: 900; padding: 0 7px; }
.territory-mode-option { align-items: flex-start; background: #fff; border: 1px solid #e1e8f2; border-radius: 12px; cursor: pointer; display: flex; gap: 10px; padding: 12px; }
.territory-mode-option input { flex: 0 0 auto; margin-top: 4px; width: auto; }
.territory-mode-option span { display: grid; gap: 3px; }
.territory-mode-option strong { color: #253c5a; }
.territory-mode-option small { color: #718198; font-weight: 500; line-height: 1.35; }
.territory-fallback-grid { display: grid; gap: 12px; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 6px; transition: opacity .2s ease; }
.territory-fallback-grid.is-disabled { opacity: .45; }
.import-error-detail summary { color: #4068de; cursor: pointer; font-size: 11px; font-weight: 800; white-space: nowrap; }
.import-error-detail p { color: #64748b; font-size: 11px; line-height: 1.45; margin: 8px 0 0; min-width: 240px; }

.insight-card {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #e6edf5;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(36, 54, 79, 0.05);
    display: grid;
    gap: 14px;
    padding: 18px;
}

.insight-head {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.insight-head span {
    color: #738196;
    display: block;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.insight-head h3 {
    color: #24364f;
    font-size: 17px;
    line-height: 1.25;
    margin: 0;
}

.insight-head strong {
    background: #eef3ff;
    border-radius: 12px;
    color: #537aef;
    min-width: 54px;
    padding: 10px;
    text-align: center;
}

.leader-box {
    background: linear-gradient(135deg, #537aef, #8c57d1);
    border-radius: 14px;
    color: #fff;
    padding: 16px;
}

.leader-box span {
    color: rgba(255, 255, 255, 0.78);
    display: block;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.leader-box strong {
    display: block;
    font-size: 22px;
    line-height: 1.1;
    margin-top: 8px;
}

.leader-box em {
    display: block;
    font-size: 30px;
    font-style: normal;
    font-weight: 900;
    margin-top: 10px;
}

.mini-stat {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(120px, 1fr) 1.4fr 58px;
}

.mini-stat span {
    color: #4a5a6b;
    font-weight: 700;
}

.mini-stat strong {
    color: #24364f;
    text-align: right;
}

.survey-calculator-hero {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 22px;
    padding: 22px 28px; margin-bottom: 18px; color: #fff; border-radius: 22px;
    background: radial-gradient(circle at 87% 20%,rgba(78,224,205,.2),transparent 24%),linear-gradient(125deg,#102348,#244b91 60%,#6544b9);
    box-shadow: 0 18px 42px rgba(35,65,126,.16);
}
.survey-calculator-hero h1 { margin: 2px 0 5px; font-size: clamp(1.75rem,3vw,2.55rem); letter-spacing: -.04em; }
.survey-calculator-hero p:not(.eyebrow) { max-width: 720px; margin: 0; color: rgba(255,255,255,.78); }
.survey-calculator-hero .eyebrow { color: #62e1cf; }
.calculator-source { flex: 0 0 auto; padding: 8px 12px; color: #dffdf8; border: 1px solid rgba(98,225,207,.38); border-radius: 999px; background: rgba(6,24,57,.28); font-size: .86rem; font-weight: 800; }
.calculator-control-panel,.calculator-results { padding: 28px; margin-bottom: 22px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: var(--shadow); }
.calculator-control-panel { display: block; }
.calculator-form label { display: block; margin-bottom: 12px; }
.calculator-form label span { display: block; color: var(--ink); font-size: 1.05rem; font-weight: 900; }
.calculator-form label small { display: block; margin-top: 3px; color: var(--muted); }
.calculator-input-group { display: grid; grid-template-columns: minmax(160px,1fr) auto; gap: 10px; }
.calculator-input-group input { min-width: 0; font-size: 1.2rem; font-weight: 900; }
.calculator-presets { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; color: var(--muted); font-size: .88rem; font-weight: 800; }
.calculator-presets a { padding: 6px 11px; color: var(--primary); border-radius: 999px; background: #edf2ff; }
.calculator-presets a.active { color: #fff; background: var(--primary); }
.calculator-table th:last-child,.calculator-table td:last-child { text-align: right; }
.calculator-weight { display: grid; grid-template-columns: minmax(130px,1fr) 76px; align-items: center; gap: 12px; }
.calculator-weight > span { height: 9px; overflow: hidden; border-radius: 999px; background: #e8eef7; }
.calculator-weight i { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: linear-gradient(90deg,#4e79ef,#8c55db); }
.calculator-weight b { color: var(--ink); font-size: .9rem; text-align: right; }
.calculator-quota { color: var(--primary); font-size: 1.15rem; }
.calculator-table tfoot td { color: var(--ink); border-top: 2px solid var(--line); background: #f4f7fc; font-weight: 900; }
.calculator-note { margin: 18px 0 0; color: var(--muted); font-size: .9rem; }
.calculator-filter-form { min-width: 0; }
.calculator-filter-grid { display: grid; grid-template-columns: repeat(3,minmax(170px,1fr)); gap: 12px; }
.calculator-filter-grid label { margin: 0; }
.calculator-filter-grid select,.calculator-filter-grid input { width: 100%; }
.calculator-filter-grid [hidden] { display: none; }
.calculator-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
.calculator-method-hint { max-width: 680px; margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.calculator-percent-input { position: relative; }
.calculator-percent-input input { padding-right: 58px; }
.calculator-percent-input b { position: absolute; top: 50%; right: 17px; color: var(--primary); transform: translateY(-50%); }
.calculator-statistical-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); overflow: hidden; margin-bottom: 22px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--shadow); }
.calculator-statistical-summary article { min-width: 0; padding: 20px 22px; border-right: 1px solid var(--line); }
.calculator-statistical-summary article:last-child { border-right: 0; }
.calculator-statistical-summary article.featured { background: linear-gradient(135deg,#edf3ff,#f3edff); }
.calculator-statistical-summary span,.calculator-statistical-summary small { display: block; color: var(--muted); font-size: .75rem; font-weight: 900; text-transform: uppercase; }
.calculator-statistical-summary strong { display: inline-block; margin-top: 5px; color: var(--ink); font-size: clamp(1.55rem,3vw,2.35rem); line-height: 1; }
.calculator-statistical-summary small { display: inline-block; margin-left: 6px; text-transform: none; }
.calculator-presets button { padding: 6px 11px; color: var(--primary); border: 0; border-radius: 999px; background: #edf2ff; font: inherit; cursor: pointer; }
.calculator-presets button.active { color: #fff; background: var(--primary); }
.calculator-territory-group { overflow: hidden; margin-top: 18px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.calculator-territory-group > header { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 18px 20px; background: linear-gradient(110deg,#f5f8ff,#edf4ff); }
.calculator-territory-group > header span,.calculator-territory-group dt { color: var(--muted); font-size: .7rem; font-weight: 900; text-transform: uppercase; }
.calculator-territory-group h3 { margin: 2px 0 0; color: var(--ink); font-size: 1.35rem; }
.calculator-territory-group dl { display: flex; gap: 28px; margin: 0; }
.calculator-territory-group dl div { text-align: right; }
.calculator-territory-group dd { margin: 3px 0 0; color: var(--ink); font-size: 1.05rem; font-weight: 900; }
.calculator-territory-group .responsive-table { border: 0; border-radius: 0; box-shadow: none; }
.calculator-territory-group .calculator-table { margin: 0; }
.calculator-loading { position: fixed; z-index: 3000; inset: 0; display: grid; place-items: center; padding: 22px; visibility: hidden; opacity: 0; background: rgba(15,35,73,.28); backdrop-filter: blur(3px); transition: opacity .18s ease,visibility .18s ease; }
.calculator-loading.visible { visibility: visible; opacity: 1; }
.calculator-loading-card { display: flex; align-items: center; gap: 16px; min-width: min(390px,100%); padding: 20px 22px; border: 1px solid rgba(255,255,255,.65); border-radius: 20px; background: #fff; box-shadow: 0 22px 60px rgba(16,35,72,.24); transform: translateY(8px) scale(.98); transition: transform .2s ease; }
.calculator-loading.visible .calculator-loading-card { transform: translateY(0) scale(1); }
.calculator-loading-card strong,.calculator-loading-card small { display: block; }
.calculator-loading-card strong { color: var(--ink); font-size: 1.05rem; }
.calculator-loading-card small { margin-top: 3px; color: var(--muted); }
.calculator-spinner { width: 34px; height: 34px; flex: 0 0 34px; border: 4px solid #dfe7fb; border-top-color: var(--primary); border-radius: 50%; animation: calculator-spin .7s linear infinite; }
.calculator-is-loading { cursor: progress; }
@keyframes calculator-spin { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
    .calculator-filter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .calculator-statistical-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .calculator-statistical-summary article:nth-child(2) { border-right: 0; }
    .calculator-statistical-summary article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 700px) {
    .survey-calculator-hero { align-items: flex-start; flex-direction: column; gap: 14px; padding: 20px 18px; border-radius: 18px; }
    .calculator-control-panel,.calculator-results { padding: 20px 16px; border-radius: 20px; }
    .calculator-input-group { grid-template-columns: 1fr; }
    .calculator-input-group .button { width: 100%; }
    .calculator-weight { min-width: 220px; }
    .calculator-filter-grid { grid-template-columns: 1fr; }
    .calculator-statistical-summary { grid-template-columns: 1fr 1fr; border-radius: 18px; }
    .calculator-statistical-summary article { padding: 16px; }
    .calculator-statistical-summary strong { font-size: 1.55rem; }
    .calculator-form-actions,.calculator-territory-group > header { align-items: stretch; flex-direction: column; }
    .calculator-form-actions .button { width: 100%; }
    .calculator-territory-group dl { justify-content: space-between; gap: 12px; }
}

/* Lectura ejecutiva compacta de preguntas. */
.insights-section {
    gap: 14px;
    padding: 24px;
}

.insights-section .panel-title {
    border-bottom: 1px solid #e8eef6;
    padding-bottom: 18px;
}

.insights-section .panel-title .muted {
    font-size: 13px;
    margin: 6px 0 0;
}

.insight-list {
    border: 1px solid #dfe7f2;
    border-radius: 16px;
    overflow: hidden;
}

.insight-row {
    background: #fff;
    border-bottom: 1px solid #e8eef6;
}

.insight-row:last-child {
    border-bottom: 0;
}

.insight-row summary {
    align-items: center;
    cursor: pointer;
    display: grid;
    gap: 16px;
    grid-template-columns: 38px minmax(240px, 2fr) minmax(150px, 1fr) 76px 105px 22px;
    list-style: none;
    min-height: 86px;
    padding: 15px 18px;
    transition: background .16s ease;
}

.insight-row summary::-webkit-details-marker {
    display: none;
}

.insight-row summary:hover {
    background: #f8faff;
}

.insight-row[open] summary {
    background: #f4f7fd;
}

.insight-number {
    align-items: center;
    background: #edf2ff;
    border-radius: 10px;
    color: #5275e9;
    display: inline-flex;
    font-size: 11px;
    font-weight: 900;
    height: 34px;
    justify-content: center;
    width: 34px;
}

.insight-question,
.insight-result {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.insight-question small,
.insight-result small,
.insight-base {
    color: #8090a5;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.insight-question strong {
    color: #263a56;
    font-size: 15px;
    line-height: 1.3;
}

.insight-result strong {
    color: #4f6076;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.insight-percentage {
    color: #315fdb;
    font-size: 22px;
    font-weight: 900;
    text-align: right;
}

.insight-base {
    text-align: right;
}

.insight-chevron {
    border-bottom: 2px solid #8090a5;
    border-right: 2px solid #8090a5;
    height: 8px;
    transform: rotate(45deg);
    transition: transform .18s ease;
    width: 8px;
}

.insight-row[open] .insight-chevron {
    transform: rotate(225deg);
}

.insight-row-detail {
    background: #fbfcff;
    border-top: 1px solid #e3eaf4;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 20px 60px 22px 72px;
}

.insight-distribution {
    display: grid;
    gap: 12px;
}

/* Interruptor global pastel/barras: por defecto se ven las barras; al elegir
   pastel, todas las preguntas de la pagina cambian a la vez. */
[data-chart-panel="donut"] {
    display: none;
}

body[data-chart-view="donut"] [data-chart-panel="donut"] {
    display: flex;
}

body[data-chart-view="donut"] [data-chart-panel="bars"] {
    display: none;
}

.mini-donut-panel {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 2px 0 8px;
}

.mini-donut {
    border-radius: 50%;
    flex-shrink: 0;
    height: 92px;
    position: relative;
    width: 92px;
}

.mini-donut::after {
    background: #fff;
    border-radius: 50%;
    content: '';
    inset: 20px;
    position: absolute;
}

.mini-donut-legend {
    display: grid;
    flex: 1;
    gap: 6px;
    min-width: 160px;
}

.mini-donut-legend-row {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: 10px 1fr auto;
}

.mini-donut-legend-row > i {
    border-radius: 50%;
    height: 10px;
    width: 10px;
}

.mini-donut-legend-row span {
    color: #334155;
    font-size: 13px;
}

.mini-donut-legend-row b {
    color: #315fdb;
    font-size: 13px;
}

.insight-row-detail .button {
    align-self: end;
    white-space: nowrap;
}

.territory-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.territory-tabs button {
    background: #edf2fa;
    border: 0;
    border-radius: 999px;
    color: #475569;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 16px;
}

.territory-tabs button.active {
    background: #315fdb;
    color: #fff;
}

/* .insight-grid trae su propio display:grid con la misma especificidad que
   la regla del navegador para [hidden], y gana la de aquí por ir despues:
   sin esto, el panel se sigue viendo aunque el JS marque hidden=true. */
[data-territory-panel][hidden] {
    display: none;
}

@media (max-width: 900px) {
    .insight-row summary {
        grid-template-columns: 34px minmax(180px, 2fr) minmax(120px, 1fr) 65px 20px;
    }
    .insight-base { display: none; }
    .insight-row-detail { padding-left: 68px; }
}

/* Seguimiento de la estructura territorial de campaña. */
.structure-hero { align-items:center; background:linear-gradient(120deg,#102143 0%,#214f8d 58%,#6846bd 100%); border-radius:24px; color:#fff; display:flex; justify-content:space-between; margin-bottom:18px; overflow:hidden; padding:30px 34px; position:relative; }
.structure-hero::after { border:1px solid rgba(91,226,209,.32); border-radius:50%; content:""; height:190px; position:absolute; right:5%; top:-90px; width:190px; }
.structure-hero .eyebrow { color:#7ce9dc; margin:0 0 7px; }
.structure-hero h1 { color:#fff; font-size:clamp(31px,4vw,52px); margin:0 0 5px; }
.structure-hero p { color:#dbe7fb; margin:0; }
.structure-hero > span { background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.2); border-radius:999px; font-size:12px; font-weight:800; padding:10px 15px; position:relative; z-index:1; }
.structure-metrics { display:grid; gap:12px; grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:18px; }
.structure-metrics article { background:#fff; border:1px solid #dfe7f2; border-radius:17px; padding:18px 20px; }
.structure-metrics small { color:#718198; display:block; font-size:10px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.structure-metrics strong { color:#243750; display:block; font-size:29px; margin-top:5px; }
.structure-create,.structure-panel { background:#fff; border:1px solid #dfe7f2; border-radius:20px; box-shadow:0 10px 28px rgba(35,54,91,.05); margin-bottom:18px; padding:22px; }
.structure-create > summary { align-items:center; cursor:pointer; display:flex; gap:13px; list-style:none; }
.structure-create > summary::-webkit-details-marker { display:none; }
.structure-create > summary > span { align-items:center; background:#edf2ff; border-radius:12px; color:#5278ed; display:flex; font-size:23px; height:42px; justify-content:center; width:42px; }
.structure-create > summary strong,.structure-create > summary small { display:block; }
.structure-create > summary small { color:#7a899d; margin-top:2px; }
.structure-form { border-top:1px solid #e7edf5; display:grid; gap:16px; margin-top:18px; padding-top:18px; }
.structure-form label,.coordinator-tools label { color:#465a74; display:grid; font-size:12px; font-weight:800; gap:6px; }
.structure-form label small { color:#8694a7; font-weight:600; }
.structure-form-group { background:#f9fbfe; border:1px solid #e2e9f3; border-radius:16px; margin:0; padding:18px; }
.structure-form-group legend { align-items:center; background:#fff; border-radius:12px; color:#2c405b; display:flex; gap:10px; padding:5px 12px 5px 5px; }
.structure-form-group legend > span { align-items:center; background:#eaf0ff; border-radius:9px; color:#5278ed; display:flex; font-size:12px; font-weight:900; height:30px; justify-content:center; width:30px; }
.structure-form-group legend strong,.structure-form-group legend small { display:block; }
.structure-form-group legend small { color:#8391a5; font-size:10px; font-weight:600; margin-top:1px; }
.structure-form-grid { display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.structure-notes { grid-column:1 / -1; }
.structure-form-actions { display:flex; justify-content:flex-end; }
.structure-form .button { align-self:end; min-height:45px; }
.structure-panel .panel-title { border-bottom:1px solid #e7edf5; margin-bottom:14px; padding-bottom:14px; }
.structure-panel h2 { margin:2px 0 0; }
.structure-empty { background:#f7f9fc; border:1px dashed #cdd9e8; border-radius:15px; color:#52657c; padding:22px; text-align:center; }
.structure-empty p { margin:5px 0 0; }
.structure-list { display:grid; gap:10px; }
.coordinator-card { align-items:center; background:#fbfcfe; border:1px solid #e0e8f3; border-radius:15px; display:grid; gap:15px; grid-template-columns:155px minmax(0,1fr) 90px auto; padding:15px 17px; }
.coordinator-level { background:#eaf0ff; border-radius:999px; color:#426be2; font-size:10px; font-weight:900; padding:8px 10px; text-align:center; text-transform:uppercase; }
.coordinator-main h3 { color:#273a54; font-size:17px; margin:0; }
.coordinator-main p { color:#6b7d94; font-size:12px; margin:3px 0; }
.coordinator-main small { color:#8795a8; }
.coordinator-summary { border-left:1px solid #e2e9f2; display:grid; padding-left:16px; text-align:center; }
.coordinator-summary strong { color:#263a55; font-size:22px; }
.coordinator-summary small { color:#7d8ba0; font-size:9px; }
.coordinator-actions summary { color:#426be2; cursor:pointer; font-size:12px; font-weight:900; list-style:none; white-space:nowrap; }
.coordinator-tools { background:#fff; border:1px solid #dfe7f2; border-radius:14px; box-shadow:0 16px 40px rgba(24,44,81,.14); display:grid; gap:16px; grid-template-columns:repeat(3,minmax(220px,1fr)); margin-top:12px; padding:16px; position:absolute; right:3.5%; width:min(980px,90vw); z-index:8; }
.coordinator-tools form { align-content:start; display:grid; gap:9px; }
.coordinator-tools h4 { color:#293c57; margin:0; }
.coordinator-tools p { color:#718198; font-size:11px; margin:0; }
.deactivate-form { align-self:end; }
.structure-bottom-grid { display:grid; gap:18px; grid-template-columns:1.1fr .9fr; }
.activity-timeline,.structure-history { display:grid; gap:0; }
.activity-timeline article { display:grid; gap:14px; grid-template-columns:72px 1fr; padding:12px 0; }
.activity-timeline article + article,.structure-history article + article { border-top:1px solid #e7edf5; }
.activity-timeline time { color:#5278ed; font-size:11px; font-weight:900; }
.activity-timeline strong,.structure-history strong { color:#293c57; }
.activity-timeline p { color:#667991; font-size:12px; margin:3px 0; }
.activity-timeline small,.structure-history small { color:#8795a8; display:block; font-size:10px; }
.structure-history article { align-items:center; display:flex; gap:15px; justify-content:space-between; padding:12px 0; }
.structure-history span { color:#667991; display:block; font-size:11px; margin:2px 0; }
.structure-history b { color:#b36b20; display:block; font-size:10px; text-align:right; text-transform:uppercase; }

@media (max-width: 1000px) {
    .structure-metrics { grid-template-columns:1fr 1fr; }
    .structure-form-grid { grid-template-columns:1fr 1fr; }
    .coordinator-card { grid-template-columns:140px 1fr auto; }
    .coordinator-summary { display:none; }
    .structure-bottom-grid { grid-template-columns:1fr; }
    .coordinator-tools { grid-template-columns:1fr; position:static; width:100%; }
}
@media (max-width: 620px) {
    .structure-hero { align-items:flex-start; flex-direction:column; gap:14px; padding:24px 20px; }
    .structure-metrics { grid-template-columns:1fr 1fr; }
    .structure-metrics article { padding:14px; }
    .structure-metrics strong { font-size:24px; }
    .structure-create,.structure-panel { border-radius:16px; padding:16px; }
    .structure-form-grid { grid-template-columns:1fr; }
    .structure-form-group { padding:14px; }
    .structure-form-group legend small { display:none; }
    .structure-notes { grid-column:auto; }
    .structure-form-actions .button { width:100%; }
    .coordinator-card { align-items:start; grid-template-columns:1fr; gap:8px; }
    .coordinator-level { justify-self:start; }
    .coordinator-actions { border-top:1px solid #e5ebf4; padding-top:9px; width:100%; }
}

@media (max-width: 620px) {
    .insights-section { padding: 16px; }
    .insight-row summary {
        gap: 10px;
        grid-template-columns: 34px minmax(0, 1fr) 60px 18px;
        min-height: 78px;
        padding: 13px 12px;
    }
    .insight-result { display: none; }
    .insight-question small { display: none; }
    .insight-question strong { font-size: 14px; }
    .insight-percentage { font-size: 18px; }
    .insight-row-detail {
        grid-template-columns: 1fr;
        padding: 16px;
    }
    .mini-stat {
        grid-template-columns: minmax(95px, 1fr) 1.2fr 48px;
    }
}

.chart-head {
    align-items: center;
    display: flex;
    gap: 24px;
    justify-content: space-between;
}

.percent-row {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(160px, 1fr) 2fr 70px 48px;
    margin-top: 12px;
}

.percent-row strong {
    text-align: right;
}

.percent-row em {
    color: var(--muted);
    font-style: normal;
    text-align: right;
}

.text-answer {
    background: #f8fafc;
    border-left: 4px solid var(--primary);
    margin: 10px 0 0;
    padding: 10px 12px;
}

.vote-executive-card { background:#fff; border:1px solid #dbe4f1; border-radius:18px; box-shadow:0 14px 34px rgba(36,54,79,.07); margin:0 0 26px; padding:24px; }
.vote-executive-head { align-items:flex-start; display:flex; gap:20px; justify-content:space-between; }
.vote-executive-head h2 { color:#203651; font-size:28px; margin:3px 0 6px; }
.vote-executive-head p:not(.eyebrow) { color:#6c7d93; margin:0; }
.vote-executive-metrics { display:grid; gap:12px; grid-template-columns:repeat(3,minmax(0,1fr)); margin:20px 0 16px; }
.vote-executive-metrics article { background:linear-gradient(145deg,#f7f9fd,#eef3fb); border:1px solid #e0e8f3; border-radius:13px; display:grid; gap:5px; padding:14px 16px; }
.vote-executive-metrics span { color:#718096; font-size:10px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.vote-executive-metrics strong { color:#253a57; font-size:17px; line-height:1.2; }
.vote-executive-metrics b { color:#4169e1; font-size:13px; }
.executive-vote-bars { align-items:end; background:repeating-linear-gradient(to top,#e5eaf2 0 1px,transparent 1px 52px); border-bottom:2px solid #c7d1df; display:flex; gap:clamp(12px,2.4vw,28px); height:340px; justify-content:space-around; overflow-x:auto; padding:12px 14px 0; }
.executive-vote-bar { display:grid; flex:1 0 82px; grid-template-rows:42px 230px 40px 18px; height:326px; justify-items:center; max-width:140px; min-width:82px; }
.executive-vote-value { align-self:start; color:#263b58; text-align:center; }
.executive-vote-value strong { display:block; font-size:14px; }
.executive-vote-value span { color:#718096; display:block; font-size:10px; font-weight:700; margin-top:2px; white-space:nowrap; }
.executive-vote-column { align-items:end; display:flex; height:230px; justify-content:center; width:100%; }
.executive-vote-column i { border-radius:8px 8px 2px 2px; box-shadow:inset 0 1px rgba(255,255,255,.35); display:block; min-height:4px; width:min(62px,72%); }
.executive-vote-bar > span { color:#304560; display:-webkit-box; font-size:11px; font-weight:800; line-height:1.15; overflow:hidden; padding-top:7px; text-align:center; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.executive-vote-bar > small { color:#8a98aa; font-size:9px; font-weight:800; text-transform:uppercase; }
.executive-vote-bar.non-candidate { opacity:.82; }
@media (max-width:720px) {
    .vote-executive-card { padding:18px 14px; }
    .vote-executive-head { flex-direction:column; gap:10px; }
    .vote-executive-metrics { grid-template-columns:1fr; }
    .executive-vote-bars { justify-content:flex-start; }
    .executive-vote-bar { flex-basis:76px; }
}

.inline-filter {
    align-items: center;
    display: flex;
    gap: 10px;
}

.map-panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    height: min(70vh, 620px);
    min-height: 500px;
    width: 100%;
    margin-bottom: 18px;
    overflow: hidden;
}

.map-preload-shell {
    border-radius: 8px;
    margin-bottom: 18px;
    overflow: hidden;
    overscroll-behavior: contain;
    position: relative;
}

.map-preload-shell .map-panel {
    margin-bottom: 0;
}

.map-preload-cover {
    align-items: center;
    background:
        radial-gradient(circle at 72% 30%, rgba(79, 209, 197, .13), transparent 26%),
        linear-gradient(135deg, #f7f9fd 0%, #eef3fb 100%);
    color: #23344b;
    display: flex;
    flex-direction: column;
    gap: 7px;
    inset: 0;
    justify-content: center;
    opacity: 1;
    pointer-events: none;
    position: absolute;
    text-align: center;
    transition: opacity .16s ease, visibility .16s ease;
    visibility: visible;
    z-index: 1001;
}

.map-preload-cover::after {
    animation: map-skeleton-pulse 1.15s ease-in-out infinite;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
    content: "";
    inset: 0;
    position: absolute;
    transform: translateX(-100%);
}

@keyframes map-skeleton-pulse {
    to { transform: translateX(100%); }
}

.map-preload-shell:not(.map-is-ready) .map-panel {
    opacity: 0;
}

.map-preload-shell .map-panel {
    transition: opacity .18s ease;
}

.map-panel .leaflet-tile {
    transition: opacity .18s ease-out !important;
}

.map-panel .leaflet-zoom-animated {
    transition-timing-function: cubic-bezier(.22, .61, .36, 1) !important;
}

.map-preload-shell.map-is-ready .map-preload-cover {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}


.legend {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: -6px 0 18px;
}

.legend span {
    align-items: center;
    color: var(--muted);
    display: inline-flex;
    font-weight: 800;
    gap: 7px;
}

.dot {
    border-radius: 999px;
    display: inline-block;
    height: 12px;
    width: 12px;
}

.dot.green { background: #16a34a; }
.dot.yellow { background: #f59e0b; }
.dot.orange { background: #f97316; }
.dot.comparison-a { background: #2563eb; }
.dot.comparison-b { background: #7c3aed; }
.map-sample-summary { align-items: center; background: #fff; border: 1px solid #dbe5f3; border-radius: 14px; color: #64748b; display: flex; flex-wrap: wrap; font-size: .88rem; gap: 7px 12px; margin: 10px 0 12px; padding: 8px 13px; }
.map-page-head { align-items: flex-end; margin-bottom: 10px; }
.map-page-head > div { min-width: 260px; }
.map-page-head .inline-filter { flex: 1; flex-wrap: wrap; justify-content: flex-end; }
.map-filter-button { border: 1px solid #d7e2f5; box-shadow: none; white-space: nowrap; }
@media (max-width: 1180px) {
    .map-page-head { align-items: stretch; flex-direction: column; }
    .map-page-head .inline-filter { justify-content: flex-start; }
}
.map-sample-summary-candidate { color: #24344d; font-weight: 850; }
.map-sample-summary-separator { background: #dbe5f3; height: 20px; width: 1px; }
.map-sample-summary strong { color: #24344d; }
.map-sample-summary-percentage { background: #edf3ff; border-radius: 999px; color: #4169e1; font-size: .82rem; font-weight: 800; margin-left: auto; padding: 6px 10px; }
@media (max-width: 640px) {
    .map-sample-summary { align-items: flex-start; flex-direction: column; }
    .map-sample-summary-separator { display: none; }
    .map-sample-summary-percentage { margin-left: 0; }
}
.comparison-preview { align-items: center; background: #fff; border: 1px solid #dbe5f3; border-radius: 14px; display: grid; gap: 12px; grid-template-columns: auto minmax(0, 1fr); margin: 0 0 14px; padding: 9px 12px; }
.comparison-preview-head { align-items: center; display: flex; gap: 8px; white-space: nowrap; }
.comparison-preview-head > span { color: #748198; font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.comparison-mode-switch { background: #eef3fb; border-radius: 10px; display: flex; padding: 3px; }
.comparison-mode-button { background: transparent; border: 0; border-radius: 8px; color: #64748b; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 800; padding: 7px 10px; }
.comparison-mode-button.active { background: #fff; box-shadow: 0 4px 12px rgba(31, 54, 99, .1); color: #4169e1; }
.comparison-preview-fields { align-items: end; display: grid; gap: 8px; grid-template-columns: minmax(145px, 1fr) auto minmax(145px, 1fr) auto; min-width: 0; }
.comparison-preview-fields[hidden] { display: none; }
.comparison-preview-fields label { color: #64748b; display: grid; font-size: .72rem; font-weight: 800; gap: 4px; text-transform: uppercase; }
.comparison-preview-fields select { min-width: 0; padding: 8px 32px 8px 10px; width: 100%; }
.comparison-versus { align-self: center; background: #eaf0ff; border-radius: 999px; color: #4169e1; font-size: .72rem; font-weight: 900; margin-top: 17px; padding: 6px 8px; }
.comparison-preview-note { align-self: center; color: #94a3b8; font-size: .75rem; font-weight: 700; margin-top: 17px; }
.comparison-apply-button { min-height: 38px; padding: 8px 14px; white-space: nowrap; }
@media (max-width: 1080px) {
    .comparison-preview-head > span { display: none; }
}
@media (max-width: 700px) {
    .comparison-preview { align-items: stretch; grid-template-columns: 1fr; }
    .comparison-mode-switch { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .comparison-preview-fields { grid-template-columns: 1fr auto 1fr; }
    .comparison-apply-button { grid-column: 1 / -1; }
    .comparison-versus { align-self: end; margin-bottom: 9px; margin-top: 0; }
    .comparison-preview-note { align-self: flex-start; margin-top: 0; }
}
@media (max-width: 500px) {
    .comparison-preview-fields { grid-template-columns: 1fr; }
    .comparison-versus { align-self: center; justify-self: start; margin: -2px 0; }
    .comparison-apply-button { grid-column: auto; }
}
.dot.red { background: #dc2626; }
.dot.target { background: #537aef; box-shadow: 0 0 0 4px rgba(83,122,239,.16); }

.territory-marker-wrap { background: transparent; border: 0; }
.territory-marker {
    align-items: center;
    backdrop-filter: blur(3px);
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 5px 16px rgba(15,23,42,.32), 0 0 0 7px rgba(255,255,255,.25);
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: var(--marker-size);
    justify-content: center;
    isolation: isolate;
    position: relative;
    transition: background .3s ease, border .3s ease, filter .2s ease, transform .3s ease;
    width: var(--marker-size);
}
.territory-marker::before {
    border: 2px solid currentColor;
    border-radius: 50%;
    content: "";
    inset: -9px;
    opacity: .3;
    position: absolute;
}
.territory-marker::after {
    background: radial-gradient(circle, rgba(var(--heat-rgb), .48) 0%, rgba(var(--heat-rgb), .28) 32%, rgba(var(--heat-rgb), .12) 58%, rgba(var(--heat-rgb), 0) 76%);
    border-radius: 50%;
    content: "";
    height: calc(var(--marker-size) * 2.7);
    left: 50%;
    opacity: .58;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: height .35s ease, opacity .35s ease, width .35s ease;
    width: calc(var(--marker-size) * 2.7);
    z-index: -1;
}
.territory-marker:hover { filter: brightness(1.08); transform: scale(1.1); }
.territory-marker .marker-core { background: rgba(255,255,255,.9); border-radius: 50%; box-shadow: 0 0 12px rgba(255,255,255,.75); height: 9px; width: 9px; }
.territory-marker.support-high { --heat-rgb: 34,197,94; background: linear-gradient(145deg, rgba(34,197,94,.88), rgba(21,128,61,.9)); color: #86efac; }
.territory-marker.support-medium { --heat-rgb: 245,158,11; background: linear-gradient(145deg, rgba(251,191,36,.9), rgba(217,119,6,.9)); color: #fde68a; }
.territory-marker.support-low { --heat-rgb: 239,68,68; background: linear-gradient(145deg, rgba(239,68,68,.88), rgba(185,28,28,.9)); color: #fca5a5; }
.territory-marker.target-record { --heat-rgb: 83,122,239; background: linear-gradient(145deg, rgba(97,231,208,.88), rgba(64,104,222,.9)); color: #a7f3d0; }
.territory-count-tooltip {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    padding: 0;
    pointer-events: none;
}
.territory-count-tooltip::before { display: none; }
.map-panel.map-zoom-far .territory-marker {
    border-width: 2px;
    box-shadow: 0 3px 12px rgba(15,23,42,.2), 0 0 0 5px rgba(255,255,255,.14);
    transform: scale(.48);
}
.map-panel.map-zoom-far .territory-marker:hover { transform: scale(.56); }
.map-panel.map-zoom-far .territory-marker::before { opacity: .16; }
.map-panel.map-zoom-far .territory-marker::after {
    height: calc(var(--marker-size) * 2.4);
    opacity: .38;
    width: calc(var(--marker-size) * 2.4);
}
.map-panel.map-zoom-far .territory-marker .marker-core { height: 8px; width: 8px; }
.map-panel.map-zoom-mid .territory-marker::after {
    height: calc(var(--marker-size) * 2.1);
    opacity: .42;
    width: calc(var(--marker-size) * 2.1);
}
.map-panel.map-zoom-near .territory-marker::after { opacity: .34; }
.map-display-controls {
    align-items: end;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin: 0 0 12px;
}
.map-view-toolbar {
    background: #eaf0fa;
    border: 1px solid #d9e3f2;
    border-radius: 14px;
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    max-width: 440px;
    padding: 5px;
}
.map-basemap-control {
    color: #64748b;
    display: grid;
    font-size: 11px;
    font-weight: 800;
    gap: 4px;
    min-width: 180px;
    text-transform: uppercase;
}
.map-basemap-control select {
    background: #fff;
    border: 1px solid #d9e3f2;
    border-radius: 10px;
    color: #334155;
    font: inherit;
    font-size: 13px;
    padding: 10px 34px 10px 12px;
    text-transform: none;
}
.map-view-button {
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: #64748b;
    cursor: pointer;
    font: inherit;
    font-weight: 800;
    padding: 10px 16px;
}
.map-view-button.active {
    background: #fff;
    box-shadow: 0 4px 14px rgba(30,64,175,.12);
    color: #4169e1;
}
.heat-map-legend {
    align-items: center;
    background: #fff;
    border: 1px solid #dbe5f3;
    border-radius: 14px;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(260px, 430px) 1fr;
    margin: 12px 0 22px;
    padding: 15px 18px;
}
.heat-map-legend[hidden] { display: none; }
.map-legend[hidden] { display: none; }
.heat-map-legend strong { color: #23344f; display: block; font-size: 13px; margin-bottom: 8px; }
.heat-gradient { background: linear-gradient(90deg, #ef4444, #f97316, #16a34a); border-radius: 999px; display: block; height: 12px; }
.heat-gradient.comparison { background: linear-gradient(90deg, #2563eb, #f97316, #7c3aed); }
.heat-scale { color: #718096; display: flex; font-size: 11px; font-weight: 700; justify-content: space-between; margin-top: 4px; }
.heat-map-legend p { color: #64748b; font-size: 12px; line-height: 1.5; margin: 0; }
@media (max-width: 700px) {
    .map-display-controls { align-items: stretch; flex-direction: column; }
    .map-view-toolbar { max-width: none; }
    .map-basemap-control { min-width: 0; }
    .heat-map-legend { gap: 12px; grid-template-columns: 1fr; }
}
.territory-popup-shell .leaflet-popup-content-wrapper { border-radius: 16px; box-shadow: 0 14px 38px rgba(15,23,42,.22); padding: 0; }
.territory-popup-shell .leaflet-popup-content { margin: 0; width: auto !important; }
.territory-popup { padding: 18px; }
.territory-popup > strong { color: #172033; display: block; font-size: 30px; line-height: 1; margin: 12px 0 5px; }
.territory-popup > span { color: #64748b; display: block; font-size: 12px; }
.popup-status { border-radius: 999px; color: #fff; display: inline-block; font-size: 10px; font-weight: 900; padding: 5px 9px; text-transform: uppercase; }
.popup-status.support-high { background: #15803d; }.popup-status.support-medium { background: #d97706; }.popup-status.support-low { background: #b91c1c; }
.popup-status.comparison-a { background: #1d4ed8; }
.popup-status.comparison-b { background: #6d28d9; }
.popup-status.target-record { background: linear-gradient(90deg, #4068de, #6541a5); }
.territory-popup dl { border-top: 1px solid #e5e7eb; margin: 14px 0 0; padding-top: 8px; }
.territory-popup dl div { display: flex; font-size: 11px; justify-content: space-between; padding: 5px 0; }
.territory-popup dt { color: #94a3b8; }.territory-popup dd { color: #334155; font-weight: 800; margin: 0; text-align: right; }
.popup-breakdown { border-top: 1px solid #e5e7eb; margin-top: 9px; padding-top: 10px; }
.popup-breakdown h4 { color: #64748b; font-size: 10px; letter-spacing: .05em; margin: 0 0 7px; text-transform: uppercase; }
.popup-breakdown-row { align-items: center; background: #f8fafc; border-radius: 8px; display: flex; gap: 10px; justify-content: space-between; margin-top: 5px; padding: 7px 8px; }
.popup-breakdown-row span { color: #475569; font-size: 10px; line-height: 1.2; max-width: 52%; }
.popup-breakdown-row b { color: #334155; font-size: 10px; text-align: right; }
.popup-breakdown-row.selected { background: #eef3ff; box-shadow: inset 3px 0 #537aef; }
.popup-breakdown-row.selected span,.popup-breakdown-row.selected b { color: #315fdb; font-weight: 800; }

.table-wrap {
    overflow-x: auto;
}

table {
    border-collapse: collapse;
    min-width: 100%;
}

th,
td {
    border-bottom: 1px solid var(--line);
    padding: 10px 12px;
    text-align: left;
    white-space: nowrap;
}

th {
    background: #f8fafc;
    font-size: 13px;
}

.bar-row {
    align-items: center;
    display: grid;
    gap: 12px;
    grid-template-columns: 70px 1fr 42px;
    margin-top: 12px;
}

.bar-label {
    color: var(--muted);
    font-weight: 800;
}

.bar-track {
    background: #e5e7eb;
    border-radius: 999px;
    height: 14px;
    overflow: hidden;
}

.bar-fill {
    background: var(--primary);
    height: 100%;
}

.footer {
    background: linear-gradient(135deg,#0d1b35,#18376c);
    border-top: 1px solid rgba(255,255,255,.08);
    color: #c9d6e9;
    margin-top: 28px;
    padding: 30px 24px;
    text-align: center;
}
.footer-brand { align-items: center; display: flex; gap: 9px; justify-content: center; }
.footer-mark { align-items: center; background: linear-gradient(135deg,#5b7cf6,#6b4fc0); border-radius: 8px; color: #fff; display: inline-flex; font-size: 11px; font-weight: 900; height: 29px; justify-content: center; width: 29px; }
.footer-brand strong { color: #fff; font-size: 16px; }
.footer p { font-size: 13px; margin: 12px 0 6px; }
.footer p strong { color: #61e7d0; }
.footer small { color: #8295af; font-size: 11px; }

@media (max-width: 720px) {
    .topbar,
    .hero,
    .section-head,
    .row-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .nav {
        flex-wrap: wrap;
    }

    .actions {
        width: 100%;
    }
}

/* Tapeli-inspired visual theme */
:root {
    --bg: #f4f7fb;
    --surface: #ffffff;
    --text: #293847;
    --muted: #6b7a8c;
    --line: #e2e8f1;
    --primary: #537aef;
    --primary-dark: #4068de;
    --danger: #ef4444;
    --success: #1bb394;
    --navy: #24364f;
    --cyan: #3bc5d8;
}

body {
    background:
        linear-gradient(180deg, #f7f9fd 0%, #eef3fb 100%);
    color: var(--text);
    font-size: 14px;
}

.topbar {
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid #e6edf5;
    box-shadow: 0 4px 18px rgba(36, 54, 79, 0.06);
    min-height: 68px;
}

.brand {
    color: #1f2f46;
    font-size: 18px;
    letter-spacing: 0;
}

.brand {
    align-items: center;
    display: inline-flex;
    gap: 10px;
}

.brand-mark {
    align-items: center;
    background: linear-gradient(135deg, #537aef, #8c57d1);
    border-radius: 10px;
    box-shadow: 0 6px 14px rgba(83, 122, 239, 0.28);
    color: #fff;
    display: inline-flex;
    font-size: 12px;
    height: 34px;
    justify-content: center;
    letter-spacing: .04em;
    width: 34px;
}

.nav a {
    color: #526174;
    font-weight: 700;
}

.nav a:hover {
    color: var(--primary);
}

.page {
    max-width: 1240px;
}

.card,
.row-card,
.form-panel,
.result-card,
.empty,
.command-card,
.table-card,
.pro-card,
.metric-card {
    border: 1px solid #e6edf5;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(36, 54, 79, 0.06);
}

.dashboard-hero,
.landing-hero,
.import-hero {
    background:
        linear-gradient(135deg, rgba(83, 122, 239, 0.95), rgba(140, 87, 209, 0.92)),
        linear-gradient(45deg, rgba(59, 197, 216, 0.25), transparent);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(83, 122, 239, 0.22);
}

.dashboard-hero h1,
.landing-hero h1,
.import-hero h1 {
    color: #fff;
    font-weight: 800;
}

.dashboard-hero p,
.landing-hero p,
.import-hero p,
.dashboard-hero .eyebrow,
.landing-hero .eyebrow,
.import-hero .eyebrow {
    color: rgba(255, 255, 255, 0.82);
}

.eyebrow {
    color: #537aef;
    font-size: 12px;
    letter-spacing: 0.04em;
}

.button,
button.button {
    background: var(--primary);
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(83, 122, 239, 0.22);
    min-height: 40px;
}

.button:hover {
    background: var(--primary-dark);
}

.hero-button {
    background: #ffffff;
    color: #4068de;
}

.hero-button:hover {
    background: #eef3ff;
}

.landing-hero {
    align-items: center;
    background:
        radial-gradient(circle at 75% 25%, rgba(74, 222, 203, .22), transparent 25%),
        radial-gradient(circle at 90% 85%, rgba(139, 92, 246, .35), transparent 30%),
        linear-gradient(125deg, #0c1833 0%, #193a79 52%, #6541a5 100%);
    min-height: 430px;
    overflow: hidden;
    padding: clamp(34px, 5vw, 62px);
    position: relative;
}

.landing-hero::before {
    background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 34px 34px;
    content: "";
    inset: 0;
    mask-image: linear-gradient(90deg, transparent, #000);
    position: absolute;
}

.landing-copy { max-width: 700px; position: relative; z-index: 2; }
.hero-kicker { align-items: center; color: #b9d8ff; display: flex; font-size: 12px; font-weight: 800; letter-spacing: .08em; margin-bottom: 18px; text-transform: uppercase; }
.hero-kicker span { background: #45e1c2; border-radius: 999px; box-shadow: 0 0 14px #45e1c2; height: 8px; margin-right: 10px; width: 8px; }
.landing-hero h1 { font-size: clamp(50px, 7vw, 82px); letter-spacing: -.045em; line-height: .92; margin-bottom: 22px; max-width: 700px; }
.landing-hero h1 em { color: #61e7d0; display: block; font-style: normal; }
.landing-hero .hero-lead { color: rgba(255,255,255,.82); font-size: clamp(17px, 2vw, 20px); line-height: 1.6; max-width: 650px; }
.hero-secondary { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); box-shadow: none; color: #fff; }
.hero-secondary:hover { background: rgba(255,255,255,.18); }
.hero-features { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; }
.hero-features span { color: #cbd9f1; font-size: 12px; font-weight: 700; }

.landing-value-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 24px;
}
.landing-value-card {
    background: #fff;
    border: 1px solid #e2eaf4;
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(36,54,79,.07);
    padding: 26px;
}
.landing-value-card > span { color: #537aef; font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.landing-value-card h2 { color: #24364f; font-size: 20px; margin: 14px 0 8px; }
.landing-value-card p { color: #738196; line-height: 1.6; margin: 0; }

.control-hero { align-items: center; background: linear-gradient(125deg, #0c1833, #193a79 58%, #0f766e); border-radius: 20px; box-shadow: 0 18px 42px rgba(25,58,121,.22); color: #fff; display: flex; justify-content: space-between; margin-bottom: 20px; overflow: hidden; padding: 38px; position: relative; }
.control-hero::after { border: 1px solid rgba(97,231,208,.35); border-radius: 50%; content: ""; height: 230px; position: absolute; right: -35px; top: -80px; width: 230px; }
.control-hero h1 { color: #fff; font-size: clamp(38px, 6vw, 64px); margin: 4px 0 10px; }
.control-hero p { color: #c8d8ee; max-width: 680px; }
.control-seal { background: rgba(97,231,208,.14); border: 1px solid rgba(97,231,208,.45); border-radius: 999px; color: #8df3df; font-size: 11px; font-weight: 900; letter-spacing: .08em; padding: 10px 14px; position: relative; z-index: 1; }
.control-workspace { display: grid; gap: 18px; grid-template-columns: minmax(260px,.7fr) minmax(500px,1.5fr); margin-bottom: 20px; }
.control-workspace.single-control-workspace { grid-template-columns: 1fr; }
.control-workspace .form-panel { margin: 0; }
.control-act-form, #actas-registradas { scroll-margin-top: 92px; }
.control-act-form:target { box-shadow: 0 0 0 3px rgba(83,122,239,.16), 0 18px 42px rgba(36,54,79,.1); }
.act-capture-layout { align-items: start; display: grid; gap: 22px; grid-template-columns: minmax(360px,.85fr) minmax(520px,1.35fr); }
.act-simple-guide { background: #f5f8ff; border: 1px solid #dce6f5; border-radius: 16px; display: grid; gap: 8px; grid-template-columns: repeat(4,1fr); margin: 20px 0; padding: 10px; }
.act-simple-guide a { align-items: center; border-radius: 11px; color: #24364f; display: flex; gap: 10px; padding: 10px; text-decoration: none; }
.act-simple-guide a:hover { background: #fff; box-shadow: 0 7px 20px rgba(36,54,79,.08); }
.act-simple-guide b,.act-step-number { align-items: center; background: linear-gradient(135deg,#537aef,#7554d9); border-radius: 50%; color: #fff; display: inline-flex; flex: 0 0 auto; font-size: 13px; height: 30px; justify-content: center; width: 30px; }
.act-simple-guide span,.act-simple-guide strong,.act-simple-guide small { display: block; }.act-simple-guide strong { font-size: 12px; }.act-simple-guide small { color: #7b8ba1; font-size: 10px; margin-top: 2px; }
.act-step-card { scroll-margin-top: 95px; }
.act-data-pane { display: grid; gap: 16px; }
.act-data-pane .act-step-card { background: #fff; border: 1px solid #dce6f2; border-radius: 16px; box-shadow: 0 8px 24px rgba(36,54,79,.05); padding: 18px; }
.act-step-title { align-items: center; border-bottom: 1px solid #e6edf6; display: flex; gap: 12px; margin-bottom: 16px; padding-bottom: 14px; }
.act-step-title .act-step-number { height: 36px; width: 36px; }.act-step-title p { color: #537aef; font-size: 9px; font-weight: 900; letter-spacing: .08em; margin: 0 0 2px; text-transform: uppercase; }.act-step-title h3 { color: #24364f; font-size: 19px; margin: 0; }.act-step-title small { color: #718198; display: block; font-size: 11px; margin-top: 3px; }
.act-field-group + .act-field-group { border-top: 1px dashed #dce6f2; margin-top: 18px; padding-top: 18px; }.act-field-group h4 { color: #47637f; font-size: 11px; letter-spacing: .03em; margin: 0 0 11px; text-transform: uppercase; }
.act-location-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.act-location-grid label:last-child { grid-column: 1 / -1; }
.act-table-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.act-data-pane label > small { color: #8a99ad; font-size: 10px; font-weight: 600; margin-left: 4px; }
.act-preview-pane { background: #f7f9fd; border: 1px solid #dbe5f1; border-radius: 16px; padding: 16px; position: sticky; top: 90px; }
.act-preview-head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 12px; }
.act-preview-head > strong { color: #47637f; font-size: 11px; text-transform: uppercase; }
.act-preview-head > span { background: #eef3ff; border-radius: 999px; color: #537aef; font-size: 10px; font-weight: 800; max-width: 150px; overflow: hidden; padding: 6px 9px; text-overflow: ellipsis; white-space: nowrap; }
.act-preview-stage { align-items: center; background: #e9eef7; border: 1px dashed #b8c7db; border-radius: 12px; display: flex; height: min(68vh,720px); justify-content: center; margin-bottom: 12px; overflow: auto; position: relative; }
.act-preview-empty { color: #64748b; max-width: 240px; padding: 30px; text-align: center; }
.act-preview-empty strong,.act-preview-empty span { display: block; }.act-preview-empty span { font-size: 12px; line-height: 1.5; margin-top: 7px; }
.act-preview-stage img { cursor: zoom-in; max-height: 100%; max-width: 100%; object-fit: contain; transition: width .2s ease; }
.act-preview-stage img.zoomed { cursor: zoom-out; max-height: none; max-width: none; width: 180%; }
.act-preview-stage iframe { border: 0; height: 100%; width: 100%; }
.act-upload-button { background: #537aef; border-radius: 10px; color: #fff; cursor: pointer; display: block; font-weight: 800; padding: 11px 14px; text-align: center; }
.act-upload-button input { display: none; }
.act-image-progress { background: #dfe8f5; border-radius: 999px; height: 6px; margin: 10px 4px 0; overflow: hidden; }
.act-image-progress span { background: linear-gradient(90deg,#537aef,#35c6aa); border-radius: inherit; display: block; height: 100%; transition: width .25s ease; width: 0; }
.act-help-note { color: #718198; font-size: 10px; line-height: 1.5; margin: 10px 4px 0; text-align: center; }
.act-data-pane { min-width: 0; }
.control-workspace h2 { color: #24364f; margin-top: 5px; }
.compact-form { display: grid; gap: 13px; }
.vote-entry-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); margin-bottom: 18px; }
.vote-entry-grid label { background: #f7f9fd; border: 1px solid #e2eaf4; border-radius: 12px; padding: 12px; }
.candidate-entry { display: grid; gap: 7px; }
.candidate-entry > span { color: #64748b; font-size: 11px; font-weight: 800; }
.remove-candidate-row { background: transparent; border: 0; color: #dc2626; cursor: pointer; font-size: 11px; font-weight: 800; justify-self: start; padding: 0; }
.add-candidate-row { margin: 0 0 18px; }
.special-votes { border-top: 1px solid #e2eaf4; padding-top: 18px; }
.candidate-vote-list { display: grid; gap: 8px; }
.candidate-vote-list .candidate-entry { background: #f7f9fd; border: 1px solid #e0e8f3; border-radius: 12px; padding: 12px; }
.candidate-vote-row { align-items: center; background: #f7f9fd; border: 1px solid #e0e8f3; border-radius: 12px; display: grid; gap: 12px; grid-template-columns: 32px minmax(0,1fr) 110px; padding: 10px 12px; }
.candidate-order { align-items: center; background: #e8eeff; border-radius: 50%; color: #537aef; display: flex; font-size: 11px; font-weight: 900; height: 28px; justify-content: center; width: 28px; }
.candidate-vote-name strong,.candidate-vote-name small { display: block; }.candidate-vote-name strong { color: #24364f; font-size: 13px; }.candidate-vote-name small { color: #8594a8; font-size: 10px; margin-top: 3px; }
.candidate-vote-field { align-items: center; display: grid; gap: 3px; grid-template-columns: auto 72px; }.candidate-vote-field small { color: #64748b; font-size: 10px; font-weight: 800; }.candidate-vote-field input { font-size: 17px; font-weight: 900; padding: 9px; text-align: center; }
.special-vote-list { border-top: 1px dashed #dce6f2; display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-top: 16px; padding-top: 16px; }.special-vote-list label { align-items: center; background: #fffaf0; border: 1px solid #fde4ae; border-radius: 12px; display: flex; justify-content: space-between; padding: 10px 12px; }.special-vote-list span strong,.special-vote-list span small { display: block; }.special-vote-list span strong { color: #394b63; font-size: 12px; }.special-vote-list span small { color: #8a99ad; font-size: 9px; margin-top: 2px; }.special-vote-list input { font-size: 17px; font-weight: 900; padding: 9px; text-align: center; width: 82px; }
.act-final-step { background: linear-gradient(180deg,#fff,#f8fbff) !important; }.act-observation-field { display: block; margin-bottom: 14px; }.act-observation-field textarea { margin-top: 7px; }.act-primary-save { display: block; font-size: 15px; padding: 14px 20px; text-align: center; width: 100%; }
.act-primary-save:disabled { cursor: wait; opacity: .72; }
.act-balance { align-items: center; background: #f7f9fd; border: 1px solid #dbe5f1; border-radius: 14px; display: grid; gap: 14px; grid-template-columns: repeat(2,minmax(150px,1fr)) 2fr; margin: 4px 0 18px; padding: 16px; transition: .2s ease; }
.act-balance div span { color: #738196; display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.act-balance div strong { color: #24364f; display: block; font-size: 28px; margin-top: 3px; }
.act-balance p { color: #64748b; font-weight: 700; margin: 0; }
.act-balance.balanced { background: #ecfdf5; border-color: #86efac; }.act-balance.balanced p { color: #15803d; }
.act-balance.unbalanced { background: #fff7ed; border-color: #fdba74; }.act-balance.unbalanced p { color: #c2410c; }
.ranking-row > b small { color: #64748b; display: block; font-size: 10px; margin-top: 3px; }
.vote-entry-grid small,.result-ranking small { color: #94a3b8; display: block; font-size: 10px; margin: 3px 0 8px; }
.result-ranking { display: grid; gap: 13px; }
.electoral-dashboard { display: grid; gap: 18px; grid-template-columns: minmax(440px,1.35fr) minmax(300px,.65fr); margin-bottom: 20px; }
.electoral-chart-card { margin: 0; }
.electoral-chart-wrap { height: 430px; margin: 0 auto; max-width: 650px; }
.leader-card { background: linear-gradient(145deg,#0c1833,#193a79 62%,#6541a5); border-radius: 18px; box-shadow: 0 18px 42px rgba(25,58,121,.2); color: #fff; padding: 28px; }
.leader-card > span { color: #b9c9df; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.leader-card h2 { color: #fff; font-size: 30px; margin: 12px 0 5px; }.leader-card > strong { color: #61e7d0; display: block; font-size: 58px; }.leader-card > p { color: #c8d8ee; line-height: 1.5; }
.leader-breakdown { border-top: 1px solid rgba(255,255,255,.15); display: grid; gap: 10px; margin-top: 22px; padding-top: 18px; }
.leader-breakdown div { display: flex; justify-content: space-between; }.leader-breakdown span { color: #b9c9df; }.leader-breakdown b { color: #fff; }
.candidate-metric-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); margin-bottom: 20px; }
.candidate-metric { background: #fff; border: 1px solid #e2eaf4; border-radius: 16px; box-shadow: 0 10px 28px rgba(36,54,79,.06); padding: 18px; }
.candidate-metric h3 { color: #24364f; margin: 10px 0 3px; }.candidate-metric > strong { color: #537aef; display: block; font-size: 34px; }.candidate-metric p { color: #738196; font-size: 12px; }.candidate-rank { background: #eef3ff; border-radius: 999px; color: #537aef; font-size: 10px; font-weight: 900; padding: 5px 8px; }
.ranking-row { align-items: center; display: grid; gap: 12px; grid-template-columns: 30px minmax(180px,1fr) minmax(180px,3fr) 60px; }
.ranking-row > strong { align-items: center; background: #eef3ff; border-radius: 50%; color: #4068de; display: flex; height: 30px; justify-content: center; }
.ranking-row > b { color: #24364f; text-align: right; }
.status-form select { min-width: 125px; padding: 7px; }
.act-observation summary { color: #4068de; cursor: pointer; font-size: 11px; font-weight: 800; white-space: nowrap; }
.act-observation p { color: #64748b; font-size: 11px; line-height: 1.45; margin: 8px 0 0; min-width: 220px; }
.project-selector-grid { display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-bottom:24px; }
.project-choice-card { background:#fff;border:1px solid #dfe7f3;border-radius:18px;box-shadow:0 12px 30px rgba(36,54,79,.07);display:grid;gap:10px;padding:22px;text-align:left; }
.project-choice-card > span { color:#5274d9;font-size:11px;font-weight:900;text-transform:uppercase; }.project-choice-card h2{color:#203651;margin:0}.project-choice-card p,.project-choice-card small{color:#718198;margin:0}.project-choice-card .button{margin-top:8px}.project-create-panel{margin-top:22px}
.project-card-top { align-items: center; display: flex; justify-content: space-between; }.project-card-top > span:first-child { color: #5274d9; font-size: 11px; font-weight: 900; text-transform: uppercase; }.project-state-badge { border-radius: 999px; font-size: 9px; font-weight: 900; padding: 6px 9px; text-transform: uppercase; }.project-state-badge.state-activo { background: #dcfce7; color: #15803d; }.project-state-badge.state-preparacion { background: #e8eeff; color: #4668d1; }.project-state-badge.state-inactivo { background: #fff3cd; color: #9a6700; }.project-state-badge.state-archivado,.project-state-badge.state-cerrado { background: #eef1f5; color: #64748b; }
.project-choice-card.project-state-inactivo,.project-choice-card.project-state-archivado,.project-choice-card.project-state-cerrado { background: #f8fafc; box-shadow: none; }.project-open-button { width: 100%; }.project-access-blocked { background: #fff8e7; border-radius: 9px; color: #866414 !important; font-size: 10px; line-height: 1.45; padding: 9px; }
.project-management { border-top: 1px solid #e4eaf3; margin-top: 6px; padding-top: 10px; }.project-management summary { color: #47637f; cursor: pointer; font-size: 11px; font-weight: 900; }.project-management-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }.project-management-actions form { margin: 0; }.project-management-actions .button { margin: 0; }
.project-delete-zone { background: #fff7f7; border: 1px solid #fee2e2; border-radius: 11px; margin-top: 12px; padding: 11px; }.project-delete-zone > strong { color: #991b1b; font-size: 11px; }.project-delete-zone p { font-size: 10px; margin: 4px 0 9px; }.project-delete-zone form { display: grid; gap: 8px; }.project-delete-zone label { color: #7f1d1d; font-size: 10px; }.project-delete-zone input { margin-top: 5px; padding: 8px; }.danger-button { background: #dc2626 !important; color: #fff !important; }
.project-delete-dialog { border: 0; border-radius: 20px; box-shadow: 0 26px 80px rgba(15,23,42,.3); max-width: 460px; padding: 0; width: calc(100% - 32px); }.project-delete-dialog::backdrop { background: rgba(15,23,42,.62); backdrop-filter: blur(3px); }.project-delete-dialog form { display: grid; gap: 14px; padding: 28px; }.delete-dialog-icon { align-items: center; background: #fee2e2; border-radius: 50%; color: #dc2626; display: flex; font-size: 24px; font-weight: 900; height: 52px; justify-content: center; width: 52px; }.project-delete-dialog h3 { color: #7f1d1d; font-size: 23px; margin: 0; }.project-delete-dialog p { color: #64748b; line-height: 1.55; margin: 0; }.project-delete-dialog label { color: #334155; }.project-delete-dialog input { margin-top: 7px; }.delete-dialog-actions { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-top: 4px; }.delete-dialog-actions .button { margin: 0; }
.project-candidate-panel { scroll-margin-top: 90px; }
.project-candidate-help { align-items: flex-start; background: #f3f7ff; border: 1px solid #dce7fa; border-radius: 13px; color: #62748d; display: flex; gap: 12px; line-height: 1.5; margin-bottom: 16px; padding: 13px 15px; }.project-candidate-help strong { color: #3f63cf; flex: 0 0 auto; }
.project-candidate-list { display: grid; gap: 9px; }.project-candidate-row { align-items: end; background: #f8faff; border: 1px solid #e1e8f3; border-radius: 13px; display: grid; gap: 10px; grid-template-columns: minmax(190px,1.4fr) minmax(160px,1fr) 130px 100px auto; padding: 12px; }.project-candidate-row label { margin: 0; }.project-candidate-row input,.project-candidate-row select { padding: 9px 10px; }.candidate-history-count { align-self: center; text-align: center; }.candidate-history-count strong,.candidate-history-count small { display: block; }.candidate-history-count strong { color: #24364f; font-size: 19px; }.candidate-history-count small { color: #8190a5; font-size: 9px; }
.project-add-candidate { align-items: end; border-top: 1px dashed #dce5f0; display: grid; gap: 12px; grid-template-columns: minmax(170px,.8fr) minmax(190px,1fr) minmax(170px,1fr) auto; margin-top: 18px; padding-top: 18px; }.project-add-candidate h3 { color: #24364f; margin: 2px 0 0; }
.project-initial-candidates { border-top: 1px solid #e4ebf4; margin: 20px 0; padding-top: 18px; }.project-initial-candidates .panel-title { margin-bottom: 10px; }.project-initial-candidates h3 { color: #24364f; margin: 3px 0; }.project-initial-candidate-row { align-items: end; background: #f8faff; border: 1px solid #e1e8f3; border-radius: 12px; display: grid; gap: 10px; grid-template-columns: 1fr 1fr auto; margin-bottom: 8px; padding: 11px; }.remove-project-candidate { background: transparent; border: 0; color: #dc2626; cursor: pointer; font-weight: 800; padding: 12px 6px; }
.compact-inline-form{align-items:center;display:flex;gap:7px;min-width:420px}.compact-inline-form select,.compact-inline-form input{padding:8px}
.module-checklist { border: 1px solid #dfe7f3; border-radius: 14px; margin: 14px 0; padding: 14px; }.module-checklist legend { color: #334155; font-weight: 900; padding: 0 7px; }.module-checklist > p { color: #718198; font-size: 11px; margin: 0 0 10px; }.module-checklist > div { display: grid; gap: 8px; grid-template-columns: repeat(2,minmax(0,1fr)); }.module-checklist label { align-items: center; background: #f6f8fd; border: 1px solid #e3e9f3; border-radius: 10px; cursor: pointer; display: flex; gap: 8px; margin: 0; padding: 10px; }.module-checklist input { height: 17px; margin: 0; width: 17px; }.module-checklist span { color: #41546d; font-size: 11px; font-weight: 800; }.module-checklist.compact { margin: 0; }.module-checklist.compact > div { grid-template-columns: 1fr; }
.user-project-access { border: 1px solid #e1e8f3; border-radius: 11px; margin-bottom: 7px; padding: 9px; }.user-project-access strong,.user-project-access small { display: block; }.user-project-access small { color: #718198; margin: 2px 0 7px; }.user-project-access span { display: flex; flex-wrap: wrap; gap: 4px; }.user-project-access b { background: #eef3ff; border-radius: 999px; color: #4d6ed0; font-size: 8px; padding: 4px 6px; }
.user-access-editor summary { color: #4568d3; cursor: pointer; font-size: 11px; font-weight: 900; }.module-access-form { background: #f8faff; border: 1px solid #e1e8f3; border-radius: 12px; display: grid; gap: 9px; margin-top: 8px; min-width: 280px; padding: 11px; }.module-access-form label { margin: 0; }.module-access-form select { padding: 8px; }

@media (max-width: 900px) {
    .control-workspace { grid-template-columns: 1fr; }
    .control-seal { display: none; }
    .import-engine-grid { grid-template-columns: 1fr; }
    .territory-fallback-grid { grid-template-columns: 1fr; }
    .territory-filter { grid-template-columns: 1fr; }
    .territory-filter > .button { margin-top: 0; }
    .act-balance { grid-template-columns: 1fr 1fr; }.act-balance p { grid-column: 1 / -1; }
    .act-capture-layout { grid-template-columns: 1fr; }.act-preview-pane { position: static; }.act-preview-stage { height: 480px; }
    .act-simple-guide { grid-template-columns: 1fr 1fr; }
    .electoral-dashboard { grid-template-columns: 1fr; }
    .project-candidate-row { grid-template-columns: 1fr 1fr; }.project-add-candidate { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .act-simple-guide { grid-template-columns: 1fr; }.act-simple-guide a { padding: 7px; }
    .act-location-grid,.act-table-grid,.special-vote-list { grid-template-columns: 1fr; }.act-location-grid label:last-child { grid-column: auto; }
    .candidate-vote-row { grid-template-columns: 28px minmax(0,1fr) 80px; gap: 8px; padding: 9px; }.candidate-vote-field { display: block; }.candidate-vote-field small { display: block; margin-bottom: 3px; }.candidate-vote-field input { width: 100%; }
    .act-preview-stage { height: 380px; }
    .project-candidate-row,.project-add-candidate,.project-initial-candidate-row { grid-template-columns: 1fr; }.candidate-history-count { text-align: left; }
    .delete-dialog-actions { grid-template-columns: 1fr; }
    .module-checklist > div { grid-template-columns: 1fr; }
}

.territory-visual { height: 350px; min-width: 330px; position: relative; width: 38%; z-index: 1; }
.visual-ring { border: 1px solid rgba(97,231,208,.35); border-radius: 50%; left: 50%; position: absolute; top: 50%; transform: translate(-50%,-50%); }
.ring-one { height: 280px; width: 280px; }
.ring-two { height: 190px; width: 190px; }
.radar-sweep { background: conic-gradient(from 20deg, transparent 0 68%, rgba(97,231,208,.36) 82%, transparent 90%); border-radius: 50%; height: 280px; left: calc(50% - 140px); position: absolute; top: calc(50% - 140px); }
.map-point { background: #61e7d0; border: 5px solid rgba(97,231,208,.18); border-radius: 50%; box-shadow: 0 0 18px #61e7d0; height: 17px; position: absolute; width: 17px; }
.point-one { left: 24%; top: 32%; }.point-two { right: 22%; top: 44%; }.point-three { bottom: 25%; left: 46%; }
.visual-card { backdrop-filter: blur(10px); background: rgba(11,24,54,.68); border: 1px solid rgba(255,255,255,.18); border-radius: 16px; bottom: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.24); color: #fff; padding: 18px 20px; position: absolute; right: 0; width: 210px; }
.visual-card small,.visual-card span { color: #a9bddb; display: block; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.visual-card strong { display: block; font-size: 36px; margin: 5px 0; }

/* El panel comparte la identidad visual de la portada. */
.dashboard-hero {
    align-items: center;
    background:
        radial-gradient(circle at 75% 25%, rgba(74, 222, 203, .22), transparent 25%),
        radial-gradient(circle at 90% 85%, rgba(139, 92, 246, .35), transparent 30%),
        linear-gradient(125deg, #0c1833 0%, #193a79 52%, #6541a5 100%);
    min-height: 370px;
    overflow: hidden;
    padding: clamp(34px, 5vw, 56px);
    position: relative;
}
.dashboard-hero::before {
    background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 34px 34px;
    content: "";
    inset: 0;
    mask-image: linear-gradient(90deg, transparent, #000);
    position: absolute;
}
.dashboard-hero h1 { font-size: clamp(46px, 6vw, 72px); letter-spacing: -.045em; line-height: .94; margin: 0 0 20px; }
.dashboard-hero h1 em { color: #61e7d0; display: block; font-style: normal; }
.dashboard-hero .hero-lead { color: rgba(255,255,255,.82); font-size: 18px; line-height: 1.55; max-width: 600px; }

.muted-button {
    background: #eef3ff;
    color: #4068de;
    box-shadow: none;
}

.muted-button:hover {
    background: #dde7ff;
}

.danger {
    background: #ef4444;
}

.user-pill,
.status-pill,
.table-status {
    background: #eef3ff;
    border-color: #d7e2ff;
    border-radius: 999px;
    color: #537aef;
}

.metric-card {
    position: relative;
    overflow: hidden;
}

.metric-card::after {
    background: rgba(83, 122, 239, 0.08);
    border-radius: 999px;
    content: "";
    height: 86px;
    position: absolute;
    right: -24px;
    top: -30px;
    width: 86px;
}

.metric-card span {
    color: #738196;
    font-size: 12px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.metric-card strong {
    color: #24364f;
    font-size: 30px;
}

.executive-grid .metric-card {
    border-top-width: 0;
}

.metric-card.accent-blue { box-shadow: inset 4px 0 0 #537aef, 0 10px 30px rgba(36, 54, 79, 0.06); }
.metric-card.accent-green { box-shadow: inset 4px 0 0 #1bb394, 0 10px 30px rgba(36, 54, 79, 0.06); }
.metric-card.accent-cyan { box-shadow: inset 4px 0 0 #3bc5d8, 0 10px 30px rgba(36, 54, 79, 0.06); }
.metric-card.accent-orange { box-shadow: inset 4px 0 0 #f59e0b, 0 10px 30px rgba(36, 54, 79, 0.06); }

input,
select,
textarea {
    background: #fff;
    border-color: #dbe5f1;
    border-radius: 10px;
    color: #293847;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #537aef;
    box-shadow: 0 0 0 3px rgba(83, 122, 239, 0.12);
    outline: none;
}

table {
    color: #4a5a6b;
}

th {
    background: #f7f9fd;
    color: #6b7a8c;
    font-size: 12px;
    text-transform: uppercase;
}

td {
    background: #fff;
}

.bar-track {
    background: #edf2f7;
}

.bar-fill {
    background: linear-gradient(90deg, #537aef, #8c57d1);
}

.compact-result {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(120px, 1fr) 58px;
    min-width: 210px;
}

.compact-result strong {
    color: #24364f;
    text-align: right;
}

.auth-shell {
    align-items: center;
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(280px, 1fr) minmax(320px, 460px);
    margin: 28px auto;
    max-width: 1080px;
    min-height: 58vh;
}

.auth-copy {
    align-items: flex-end;
    background:
        radial-gradient(circle at 72% 30%, rgba(74, 222, 203, .24), transparent 25%),
        linear-gradient(135deg, #0c1833 0%, #193a79 55%, #6541a5 100%);
    border-radius: 24px;
    box-shadow: 0 22px 52px rgba(25, 58, 121, .28);
    color: #fff;
    display: flex;
    min-height: 430px;
    overflow: hidden;
    padding: 42px;
    position: relative;
}

.auth-copy::after {
    background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 30px 30px;
    content: "";
    inset: 0;
    mask-image: linear-gradient(90deg, transparent, #000);
    position: absolute;
}

.auth-copy .eyebrow,
.auth-copy p {
    color: rgba(255, 255, 255, 0.82);
}

.auth-copy h1 {
    color: #fff;
    font-size: clamp(38px, 6vw, 66px);
    line-height: 0.96;
    margin: 0;
}

.auth-copy h1 em { color: #61e7d0; display: block; font-style: normal; }
.auth-brand-lockup { position: relative; z-index: 2; }
.auth-signal { background: #61e7d0; border-radius: 999px; box-shadow: 0 0 16px #61e7d0; display: block; height: 8px; margin-bottom: 18px; width: 42px; }
.auth-territory { height: 280px; position: absolute; right: -18px; top: -12px; width: 300px; }
.auth-ring { border: 1px solid rgba(97,231,208,.35); border-radius: 50%; position: absolute; }
.auth-ring-one { height: 240px; right: -10px; top: 5px; width: 240px; }
.auth-ring-two { height: 145px; right: 38px; top: 52px; width: 145px; }
.auth-point { background: #61e7d0; border: 4px solid rgba(97,231,208,.18); border-radius: 50%; box-shadow: 0 0 14px #61e7d0; height: 15px; position: absolute; width: 15px; }
.auth-point-one { right: 65px; top: 45px; }.auth-point-two { right: 180px; top: 110px; }.auth-point-three { right: 90px; top: 190px; }

.auth-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.auth-badges span {
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    color: #fff;
    font-weight: 800;
    padding: 9px 13px;
}

.auth-card {
    background: #fff;
    border: 1px solid #e6edf5;
    border-radius: 18px;
    box-shadow: 0 18px 46px rgba(36, 54, 79, 0.1);
    display: grid;
    gap: 18px;
    padding: 28px;
}

.auth-card h2 {
    color: #24364f;
    font-size: 30px;
    margin: 0;
}

.auth-form {
    border: 0;
    box-shadow: none;
    padding: 0;
}

.compact-form {
    border: 0;
    box-shadow: none;
    padding: 0;
}

.role-guide {
    align-content: start;
}

.role-list {
    display: grid;
    gap: 12px;
}

.role-list p {
    background: #f7f9fd;
    border: 1px solid #e6edf5;
    border-radius: 12px;
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 14px;
}

.role-list span {
    color: #64748b;
}

.map-panel {
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(36, 54, 79, 0.08);
}

.notice {
    background: #ecfdf8;
    border-color: #b8f1df;
    border-radius: 12px;
}

.alert {
    border-radius: 12px;
}

@media (max-width: 720px) {
    .dashboard-hero,
    .landing-hero,
    .import-hero {
        padding: 22px;
    }

    .auth-shell {
        grid-template-columns: 1fr;
        margin-top: 10px;
    }

    .auth-copy,
    .auth-card {
        border-radius: 16px;
        padding: 24px;
    }

    .auth-copy h1 {
        font-size: 40px;
    }

    .territory-visual { display: none; }
    .dashboard-visual { display: none; }
    .landing-hero { min-height: 460px; }
    .dashboard-hero { min-height: 430px; }
    .landing-hero h1 { font-size: 54px; }
    .landing-value-grid { grid-template-columns: 1fr; }
}
.control-subnav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 18px 0 24px;
    padding: 8px;
    border: 1px solid #dce6f5;
    border-radius: 20px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 14px 35px rgba(38, 59, 97, .08);
}
.control-subnav.editor-only { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.control-subnav a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 58px;
    padding: 10px 16px;
    border-radius: 14px;
    color: #53657d;
    font-weight: 800;
    text-decoration: none;
    transition: .2s ease;
}

.control-subnav a span {
    color: #8fa1ba;
    font-size: .72rem;
    letter-spacing: .08em;
}

.control-subnav a:hover {
    background: #f1f5ff;
    color: #315fdb;
}

.control-subnav a.active {
    color: #fff;
    background: linear-gradient(135deg, #315fdb, #7655d9);
    box-shadow: 0 10px 24px rgba(49, 95, 219, .24);
}

.control-subnav a.active span { color: rgba(255, 255, 255, .7); }

.distribution-dashboard-note { margin-bottom: 18px; }
.distribution-panel { margin-bottom: 24px; }
.distribution-panel-title { align-items: flex-start; }
.distribution-panel-title form { margin: 0; }
.distribution-panel-title .button { margin: 0; white-space: nowrap; }
.distribution-empty { display: grid; gap: 6px; text-align: left; }
.distribution-empty strong { color: #334155; font-size: 17px; }
.distribution-empty span { color: #718198; line-height: 1.55; }
.distribution-warning {
    align-items: flex-start;
    background: #fff8e7;
    border: 1px solid #f7df9b;
    border-radius: 14px;
    color: #7c631b;
    display: flex;
    gap: 12px;
    line-height: 1.5;
    margin: 14px 0 18px;
    padding: 14px 16px;
}
.distribution-warning strong { color: #805d00; flex: 0 0 auto; }
.distribution-metrics { margin-bottom: 24px; }
.distribution-coverage-title { border-top: 1px solid #e3eaf3; margin-top: 4px; padding-top: 22px; }
.distribution-filter-form,.extra-board-form { align-items: end; background: #f6f9fe; border: 1px solid #dce6f2; border-radius: 14px; display: grid; gap: 12px; grid-template-columns: repeat(4,minmax(150px,1fr)) auto auto; margin: 20px 0; padding: 14px; }
.distribution-filter-form label,.extra-board-form label { margin: 0; }
.extra-board-form { grid-template-columns: repeat(3,minmax(150px,.7fr)) minmax(260px,1.4fr) auto; }
.extra-board-panel { background: #f8faff; border-color: #bcd0ff; }
.extra-board-reason { min-width: 0; }
@media (max-width: 1050px) {
    .distribution-filter-form,.extra-board-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
    .distribution-filter-form,.extra-board-form { grid-template-columns: 1fr; }
}
.distribution-table td { white-space: nowrap; }
.distribution-table td:first-child { white-space: normal; }
.distribution-table td small { color: #718198; }
.distribution-coverage { align-items: center; display: grid; gap: 8px; grid-template-columns: minmax(90px,1fr) 42px; }
.distribution-coverage > span { background: #edf2f8; border-radius: 999px; height: 8px; overflow: hidden; }
.distribution-coverage i { background: linear-gradient(90deg,#36c8a6,#5277ef); border-radius: inherit; display: block; height: 100%; }
.distribution-coverage strong { color: #334155; font-size: 11px; text-align: right; }
.distribution-detail { border-top: 1px solid #e3eaf3; margin-top: 22px; padding-top: 18px; }
.distribution-detail summary { color: #4068de; cursor: pointer; font-weight: 900; margin-bottom: 14px; }
.act-distribution-reference {
    background: linear-gradient(145deg,#f3f7ff,#fff);
    border: 1px solid #dce6f5;
    border-radius: 14px;
    margin-top: 14px;
    padding: 14px 16px;
}
.act-distribution-reference > div span { color: #537aef; display: block; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.act-distribution-reference > div strong { color: #253c5a; display: block; margin-top: 3px; }
.act-distribution-reference dl { display: grid; gap: 8px; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 13px 0 8px; }
.act-distribution-reference dl div { background: #fff; border: 1px solid #e1e8f3; border-radius: 10px; padding: 10px; }
.act-distribution-reference dt { color: #7b8ba0; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.act-distribution-reference dd { color: #24364f; font-size: 16px; font-weight: 900; margin: 4px 0 0; }
.act-distribution-reference p { color: #718198; font-size: 10px; margin: 0; }

@media (max-width: 700px) {
    .control-subnav, .control-subnav.editor-only { grid-template-columns: 1fr; }
    .control-subnav a { justify-content: flex-start; min-height: 50px; }
}

@media (max-width: 720px) {
    .distribution-warning { display: grid; }
    .act-distribution-reference dl { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 430px) {
    .act-distribution-reference dl { grid-template-columns: 1fr; }
}

.public-results-hero {
    align-items: center; background: radial-gradient(circle at 82% 18%,rgba(60,220,190,.3),transparent 24%),linear-gradient(125deg,#07162e,#163b7b 56%,#6040a1);
    border-radius: 26px; color: #fff; display: flex; justify-content: space-between; min-height: 250px; overflow: hidden; padding: clamp(30px,5vw,58px); position: relative;
}
.public-results-hero h1 { font-size: clamp(42px,6vw,72px); letter-spacing: -.05em; line-height: .95; margin: 0 0 16px; }
.public-results-hero h1 em { color: #61e7d0; display: block; font-style: normal; }
.public-results-hero p { color: #d9e6fa; font-size: 17px; }
.live-indicator { align-items: center; background: rgba(6,18,42,.48); border: 1px solid rgba(255,255,255,.18); border-radius: 18px; display: grid; gap: 4px; grid-template-columns: auto 1fr; padding: 16px 20px; }
.live-indicator i { animation: livePulse 1.5s infinite; background: #43e6a7; border-radius: 50%; grid-row: span 2; height: 12px; margin-right: 8px; width: 12px; }
.live-indicator span { color: #dce9fb; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.live-indicator strong { font-size: 22px; }
@keyframes livePulse { 50% { box-shadow: 0 0 0 8px rgba(67,230,167,0); } 0%,100% { box-shadow: 0 0 0 2px rgba(67,230,167,.35); } }
.public-result-filters { align-items: end; background: #fff; border: 1px solid #dce5f3; border-radius: 18px; display: grid; gap: 12px; grid-template-columns: 1fr 1fr auto; margin: 18px 0; padding: 16px; }
.public-result-filters label { color: #53657d; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.public-result-filters select { margin-top: 6px; }
.public-hero-actions { align-items: stretch; display: grid; gap: 10px; min-width: min(100%, 270px); }
.public-transmission-link { align-items: center; background: #fff; border: 1px solid rgba(255,255,255,.32); border-radius: 15px; color: #234ec2; display: flex; justify-content: space-between; gap: 18px; padding: 11px 15px; box-shadow: 0 12px 28px rgba(5,20,56,.16); }
.public-transmission-link span { color: #657692; font-size: 11px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.public-transmission-link strong { font-size: 14px; white-space: nowrap; }
.public-transmission-link:hover { background: #f6f9ff; transform: translateY(-1px); }
.public-live-metrics { display: grid; gap: 14px; grid-template-columns: repeat(4,1fr); margin-bottom: 18px; }
.public-live-metrics article { background: #fff; border: 1px solid #dce5f3; border-radius: 18px; padding: 21px; }
.public-live-metrics span { color: #687a92; display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.public-live-metrics strong { color: #172a45; display: block; font-size: 36px; margin-top: 7px; }
.public-results-grid { display: grid; gap: 18px; grid-template-columns: 1fr; margin-bottom: 18px; }
.public-donut-card,.public-leader-card { background: #fff; border: 1px solid #dce5f3; border-radius: 22px; min-height: 430px; padding: 26px; }
.chart-view-switch { background: #edf2fa; border-radius: 12px; display: grid; gap: 4px; grid-template-columns: 1fr 1fr; margin: 16px auto 4px; max-width: 260px; padding: 4px; }
.chart-view-switch button { background: transparent; border: 0; border-radius: 9px; color: #687a92; cursor: pointer; font: inherit; font-size: 13px; font-weight: 800; padding: 9px 18px; }
.chart-view-switch button.active { background: #fff; box-shadow: 0 4px 12px rgba(30,54,90,.12); color: #315fdb; }
.public-chart-view[hidden] { display: none; }
.public-donut { align-items: center; border-radius: 50%; display: flex; height: 280px; justify-content: center; margin: 22px auto 0; position: relative; width: 280px; }
.public-donut::after { background: #fff; border-radius: 50%; content: ''; inset: 56px; position: absolute; }
.public-donut div { display: grid; position: relative; text-align: center; z-index: 1; }
.public-donut strong { color: #152844; font-size: 34px; }
.public-donut span { color: #75859a; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.public-pie-layout { align-items: center; display: grid; gap: clamp(50px,8vw,130px); grid-template-columns: minmax(460px,1.05fr) minmax(380px,.95fr); min-height: 610px; padding: 28px clamp(28px,5vw,78px) 0; }
.public-pie-layout .public-donut { height: min(520px,38vw); margin: 0 auto; min-height: 410px; min-width: 410px; width: min(520px,38vw); }
.public-pie-layout .public-donut::after { inset: 20%; }
.public-pie-layout .public-donut div strong { font-size: clamp(42px,4vw,64px); }
.public-pie-layout .public-donut div span { font-size: 15px; margin-top: 4px; }
.public-pie-legend { display: grid; gap: 18px; }
.public-pie-legend-row { align-items: center; background: #f4f7fc; border: 1px solid #dbe5f2; border-radius: 18px; display: grid; gap: 18px; grid-template-columns: 16px 1fr auto; min-height: 92px; padding: 20px 26px; }
.public-pie-legend-row > i { border-radius: 50%; height: 16px; width: 16px; }
.public-pie-legend-row span strong,.public-pie-legend-row span small { display: block; }
.public-pie-legend-row span strong { color: #253b58; font-size: 22px; }
.public-pie-legend-row span small { color: #718198; font-size: 16px; margin-top: 6px; }
.public-pie-legend-row > b { color: #315fdb; font-size: 22px; }
.public-bars-chart { align-items: end; background: repeating-linear-gradient(to top,#dfe6f0 0 1px,transparent 1px 52px); border-bottom: 2px solid #bdc9d8; display: flex; gap: clamp(12px,3vw,28px); height: 300px; justify-content: space-around; margin: 26px 0 8px; padding: 0 12px; }
.public-chart-bar { align-items: center; display: grid; grid-template-rows: 34px 210px 42px; height: 286px; justify-items: center; min-width: 70px; width: min(120px,18%); }
.public-chart-bar > strong { color: #203651; font-size: 13px; line-height: 1.05; text-align: center; white-space: nowrap; }
.public-chart-bar > strong small { color: #63758d; display: block; font-size: 12px; margin-top: 3px; }
.public-chart-bar > div { align-items: end; display: flex; height: 210px; justify-content: center; width: 100%; }
.public-chart-bar i { border-radius: 8px 8px 2px 2px; box-shadow: inset 0 1px rgba(255,255,255,.35); display: block; min-height: 3px; transition: height .5s ease; width: min(58px,82%); }
.public-chart-bar > span { color: #304560; display: -webkit-box; font-size: 11px; font-weight: 800; line-height: 1.15; overflow: hidden; padding-top: 7px; text-align: center; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.electoral-dashboard { grid-template-columns: 1fr; }
.dashboard-bars-chart { height: 360px; margin-top: 28px; }
.dashboard-bars-chart .public-chart-bar { grid-template-rows: 38px 270px 46px; height: 354px; width: min(140px,18%); }
.dashboard-bars-chart .public-chart-bar > div { height: 270px; }
.dashboard-bars-chart .public-chart-bar i { width: min(70px,82%); }
.dashboard-chart-panel[hidden] { display: none; }
.dashboard-chart-switch { margin-top: 18px; }
.dashboard-donut-layout { align-items: center; display: grid; gap: clamp(28px,6vw,80px); grid-template-columns: minmax(300px,1fr) minmax(280px,.8fr); min-height: 390px; padding: 20px clamp(20px,5vw,70px); }
.dashboard-donut { height: 330px; margin: 0 auto; min-height: 0; min-width: 0; width: 330px; }
.dashboard-donut::after { inset: 66px; }
.dashboard-donut-legend { display: grid; gap: 11px; }
.dashboard-donut-legend > div { align-items: center; background: #f7f9fd; border: 1px solid #e2e9f3; border-radius: 12px; display: grid; gap: 11px; grid-template-columns: 12px 1fr; min-height: 0; padding: 12px 14px; }
.dashboard-donut-legend i { border-radius: 50%; height: 12px; width: 12px; }
.dashboard-donut-legend span strong,.dashboard-donut-legend span small { display: block; }
.dashboard-donut-legend span strong { color: #253b58; font-size: 16px; }
.dashboard-donut-legend span small { color: #718198; font-size: 13px; margin-top: 3px; }
@media (max-width: 760px) {
    .dashboard-donut-layout { grid-template-columns: 1fr; min-height: 0; padding: 20px 8px; }
    .dashboard-donut { height: 250px; min-height: 250px; min-width: 250px; width: 250px; }
    .dashboard-donut::after { inset: 50px; }
    .dashboard-donut-legend > div { min-height: 72px; padding: 15px 18px; }
    .dashboard-donut-legend span strong { font-size: 17px; }
    .dashboard-donut-legend span small { font-size: 13px; }
}
.public-chart-footer { align-items: center; background: #f5f8fd; border-radius: 12px; color: #687a92; display: flex; font-size: 12px; font-weight: 700; justify-content: space-between; margin-top: 20px; padding: 13px 16px; }
.public-chart-footer span:last-child { color: #9a6815; text-align: right; text-transform: uppercase; }
.public-territorial-card { margin-top: 18px; }
.territorial-candidate-filter { align-items: end; background: #f3f7fd; border: 1px solid #dfe7f3; border-radius: 14px; display: grid; gap: 16px; grid-template-columns: minmax(240px,420px) 1fr; margin-bottom: 18px; padding: 14px 16px; }
.territorial-candidate-filter label { color: #53657d; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.territorial-candidate-filter select { margin-top: 6px; }
.territorial-candidate-filter > span { color: #718198; font-size: 13px; padding-bottom: 13px; }
.territorial-public-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); }
.territorial-public-card { background: linear-gradient(145deg,#f8faff,#fff); border: 1px solid #dfe7f3; border-radius: 16px; padding: 18px; position: relative; }
.territorial-public-card > div:first-child span { color: #5274d9; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.territorial-public-card h3 { color: #203651; font-size: 21px; margin: 4px 0 14px; }
.territorial-public-card > small { color: #73849a; position: absolute; right: 18px; top: 19px; }
.territorial-public-card p { color: #65768c; font-size: 13px; margin: 0 0 12px; }
.territorial-public-card p strong { color: #253c5a; }
.territorial-public-result { align-items: baseline; display: flex; justify-content: space-between; margin-bottom: 9px; }
.territorial-public-result b { color: #253c5a; }
.territorial-public-result strong { color: #315fdb; font-size: 22px; }
.public-leader-card { background: linear-gradient(150deg,#112a56,#6341a5); color: #fff; display: flex; flex-direction: column; justify-content: center; }
.public-leader-card > span,.public-leader-card > p { color: #ccdaee; }
.public-leader-card h2 { font-size: clamp(30px,4vw,48px); line-height: 1; margin: 12px 0; }
.public-leader-card > strong { color: #61e7d0; font-size: 68px; line-height: 1; margin: 20px 0; }
.leader-public-detail { border-top: 1px solid rgba(255,255,255,.18); display: flex; justify-content: space-between; padding-top: 18px; }
.public-empty-results { align-items: center; color: #60738c; display: flex; flex-direction: column; justify-content: center; min-height: 280px; }
.public-empty-results strong { color: #263b59; font-size: 22px; }
.public-ranking-row { align-items: center; border-top: 1px solid #e6edf6; display: grid; gap: 14px; grid-template-columns: 32px 10px minmax(180px,1fr) minmax(180px,2fr) 90px; padding: 17px 4px; }
.public-ranking-row > b { color: #8696aa; }
.public-ranking-row > i { border-radius: 999px; height: 10px; width: 10px; }
.public-ranking-row span strong,.public-ranking-row span small { display: block; }
.public-ranking-row span small { color: #8290a3; margin-top: 3px; }
.public-vote-total { text-align: right; }
.public-vote-total strong { font-size: 20px; }
.last-update { color: #718198; font-size: 13px; }
.preliminary-warning { background: #fff8e7; border-radius: 12px; color: #9a6815; font-size: 12px; font-weight: 800; margin-top: 18px; padding: 13px; text-align: center; text-transform: uppercase; }

@media (max-width: 850px) {
    .public-results-hero { align-items: flex-start; flex-direction: column; gap: 20px; }
    .public-hero-actions { width: 100%; }
    .public-result-filters { grid-template-columns: 1fr 1fr; }
    .public-live-metrics { grid-template-columns: 1fr 1fr; }
    .public-results-grid { grid-template-columns: 1fr; }
    .public-ranking-row { grid-template-columns: 28px 8px 1fr 80px; }
    .public-ranking-row .bar-track { display: none; }
    .public-pie-layout { grid-template-columns: 1fr; min-height: 0; padding: 24px 10px 0; }
    .public-pie-layout .public-donut { height: 360px; min-height: 360px; min-width: 360px; width: 360px; }
}
@media (max-width: 520px) {
    .public-result-filters,.public-live-metrics { grid-template-columns: 1fr; }
    .public-donut { height: 230px; width: 230px; }
    .public-donut::after { inset: 46px; }
    .public-pie-layout .public-donut { height: 250px; min-height: 250px; min-width: 250px; width: 250px; }
    .public-pie-layout .public-donut::after { inset: 50px; }
    .public-pie-legend-row { min-height: 72px; padding: 15px 18px; }
    .public-pie-legend-row span strong { font-size: 17px; }
    .public-pie-legend-row span small { font-size: 13px; }
    .public-pie-legend-row > b { font-size: 18px; }
    .public-bars-chart { gap: 7px; overflow-x: auto; justify-content: flex-start; }
    .public-chart-bar { flex: 0 0 62px; }
    .public-chart-footer { align-items: flex-start; flex-direction: column; gap: 8px; }
    .public-chart-footer span:last-child { text-align: left; }
    .territorial-candidate-filter { grid-template-columns: 1fr; }
    .territorial-candidate-filter > span { padding-bottom: 0; }
}

/* Encabezado ejecutivo compacto del módulo de encuestas. */
.dashboard-hero {
    border-radius: 18px;
    min-height: 245px;
    padding: 30px 38px;
}
.dashboard-copy { position: relative; z-index: 2; }
.dashboard-hero .hero-kicker { font-size: 10px; margin-bottom: 12px; }
.dashboard-hero h1 { font-size: clamp(38px,4.5vw,56px); line-height: .92; margin: 0; }
.dashboard-visual { height: 205px; min-width: 240px; width: 31%; }
.dashboard-visual .ring-one { height: 180px; width: 180px; }
.dashboard-visual .ring-two { height: 118px; width: 118px; }
.dashboard-visual .radar-sweep { height: 180px; left: calc(50% - 90px); top: calc(50% - 90px); width: 180px; }
.dashboard-visual .map-point { border-width: 3px; height: 12px; width: 12px; }
.dashboard-visual .visual-card { border-radius: 12px; bottom: 4px; padding: 12px 14px; width: 154px; }
.dashboard-visual .visual-card strong { font-size: 27px; margin: 3px 0; }
.dashboard-visual .visual-card small,
.dashboard-visual .visual-card span { font-size: 8px; }

@media (max-width: 720px) {
    .dashboard-hero { min-height: 230px; padding: 28px; }
    .dashboard-visual { display: none; }
}

/* Navegación y contenido optimizados para teléfonos. */
@media (max-width: 720px) {
    .topbar { align-items: stretch; gap: 12px; padding: 12px 14px; }
    .brand { align-self: flex-start; }
    .nav { flex-wrap: nowrap; gap: 8px; max-width: 100%; overflow-x: auto; padding-bottom: 5px; scrollbar-width: thin; width: 100%; }
    .nav a,.nav .button,.user-pill { flex: 0 0 auto; white-space: nowrap; }
    .nav a { padding: 8px 9px; }
    .page { padding: 18px 12px 42px; width: 100%; }
    .form-panel,.table-card,.pro-card { padding-left: 16px; padding-right: 16px; }
    .table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .panel-title { align-items: flex-start; flex-direction: column; gap: 10px; }
    .metric-grid,.executive-grid { grid-template-columns: 1fr 1fr; }
    .map-panel { min-width: 0; }
}

@media (max-width: 430px) {
    .metric-grid,.executive-grid { grid-template-columns: 1fr; }
    .dashboard-hero h1 { font-size: 38px; }
}

.update-status-strip { align-items: center; background: #fff; border: 1px solid #dfe7f2; border-radius: 16px; box-shadow: 0 10px 26px rgba(36,54,79,.06); display: flex; justify-content: space-between; margin: 18px 0 26px; padding: 17px 22px; }
.update-status-strip > div { align-items: center; display: flex; gap: 14px; }
.update-status-strip .status-signal { background: #35c9a5; border-radius: 50%; box-shadow: 0 0 0 6px rgba(53,201,165,.12); height: 10px; width: 10px; }
.update-status-strip .eyebrow { font-size: 9px; margin-bottom: 2px; }
.update-status-strip h2 { color: #293d59; font-size: 17px; margin: 0; }
.update-status-strip > strong { color: #52657d; font-size: 14px; }
@media (max-width: 600px) {
    .update-status-strip { align-items: flex-start; flex-direction: column; gap: 12px; }
    .update-status-strip > strong { padding-left: 24px; }
}

/* Banners compactos de los módulos: misma identidad visual con menor altura. */
.dashboard-hero,
.import-hero,
.control-hero,
.survey-calculator-hero,
.structure-hero,
.public-results-hero {
    border-radius: 16px;
    margin-bottom: 14px;
    min-height: 0;
    padding: 18px 24px;
}

.dashboard-hero { min-height: 190px; padding: 22px 28px; }
.dashboard-hero h1 { font-size: clamp(32px, 4vw, 46px); }
.dashboard-hero .hero-lead { font-size: 15px; }
.dashboard-visual { height: 160px; min-width: 205px; }
.dashboard-visual .ring-one { height: 145px; width: 145px; }
.dashboard-visual .ring-two { height: 94px; width: 94px; }
.dashboard-visual .radar-sweep { height: 145px; left: calc(50% - 72px); top: calc(50% - 72px); width: 145px; }

.import-hero h1,
.control-hero h1,
.survey-calculator-hero h1,
.structure-hero h1,
.public-results-hero h1 {
    font-size: clamp(27px, 3.4vw, 40px);
    line-height: 1;
    margin-bottom: 5px;
}

.import-hero p,
.control-hero p,
.survey-calculator-hero p:not(.eyebrow),
.structure-hero p,
.public-results-hero p {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 0;
}

.control-hero::after { height: 160px; top: -70px; width: 160px; }
.structure-hero::after { height: 145px; top: -75px; width: 145px; }
.public-results-hero { min-height: 150px; }
.live-indicator { border-radius: 14px; padding: 11px 15px; }
.live-indicator strong { font-size: 18px; }

@media (max-width: 720px) {
    .dashboard-hero,
    .import-hero,
    .control-hero,
    .survey-calculator-hero,
    .structure-hero,
    .public-results-hero {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        min-height: 0;
        padding: 17px 18px;
    }

    .dashboard-hero h1,
    .import-hero h1,
    .control-hero h1,
    .survey-calculator-hero h1,
    .structure-hero h1,
    .public-results-hero h1 {
        font-size: 30px;
    }
}

/* Navegación lateral principal. */
:root { --sidebar-width: 218px; --sidebar-collapsed-width: 64px; }
.has-sidebar .topbar { justify-content: flex-start; gap: 14px; z-index: 40; }
.topbar-session { align-items: center; display: flex; gap: 12px; margin-left: auto; min-width: 0; }
.topbar-project { color: #64748b; font-size: 12px; font-weight: 800; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-toggle { align-items: center; background: #f2f6fc; border: 1px solid #dce5f1; border-radius: 10px; cursor: pointer; display: inline-flex; flex-direction: column; gap: 4px; height: 38px; justify-content: center; padding: 0; width: 38px; }
.sidebar-toggle span { background: #354861; border-radius: 8px; display: block; height: 2px; transition: transform .2s ease; width: 17px; }
.app-sidebar { background: linear-gradient(180deg,#101f3d 0%,#193568 62%,#3c2f78 100%); bottom: 0; box-shadow: 6px 0 22px rgba(24,37,78,.13); color: #e2e8fa; left: 0; overflow-x: hidden; overflow-y: auto; position: fixed; top: 68px; transition: width .22s ease, transform .22s ease; width: var(--sidebar-width); z-index: 30; }
.sidebar-project { border-bottom: 1px solid rgba(255,255,255,.08); padding: 17px 16px 14px; }
.sidebar-project span { color: #9aadd5; display: block; font-size: 9px; font-weight: 900; letter-spacing: .11em; margin-bottom: 6px; text-transform: uppercase; }
.sidebar-project strong { color: #f2f8f8; display: block; font-size: 12px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-nav { display: grid; gap: 3px; padding: 10px 9px 20px; }
.sidebar-section-title { color: #8fa3cf; font-size: 8px; font-weight: 800; letter-spacing: .13em; margin: 11px 9px 3px; text-transform: uppercase; }
.sidebar-link { align-items: center; border-radius: 8px; color: #d4dcf2; display: flex; gap: 10px; min-height: 38px; padding: 6px 9px; position: relative; transition: background .16s ease,color .16s ease; }
.sidebar-link:hover { background: rgba(255,255,255,.09); color: #fff; }
.sidebar-link.active { background: rgba(255,255,255,.1); box-shadow: inset 3px 0 #57dfd0; color: #fff; }
.sidebar-icon { align-items: center; background: transparent; border: 0; color: #bfcbed; display: inline-flex; flex: 0 0 26px; font-family: Arial,sans-serif; font-size: 16px; font-weight: 400; height: 26px; justify-content: center; }
.sidebar-link.active .sidebar-icon { color: #62e2d3; }
.sidebar-label { font-size: 12px; font-weight: 600; letter-spacing: .005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-count { align-items: center; background: #ef4444; border-radius: 99px; color: #fff; display: inline-flex; font-size: 9px; height: 19px; justify-content: center; margin-left: auto; min-width: 19px; padding: 0 5px; }
.sidebar-logout { color: #ffc7c7; }
.sidebar-overlay { display: none; }
.has-sidebar .page { margin-left: var(--sidebar-width); margin-right: 0; max-width: none; transition: margin-left .22s ease,width .22s ease; width: calc(100% - var(--sidebar-width)); }
.has-sidebar .active-project-context { margin-left: var(--sidebar-width); transition: margin-left .22s ease; }
.has-sidebar .footer { margin-left: var(--sidebar-width); transition: margin-left .22s ease; }
.sidebar-collapsed .app-sidebar { width: var(--sidebar-collapsed-width); }
.sidebar-collapsed .sidebar-project { padding-inline: 12px; text-align: center; }
.sidebar-collapsed .sidebar-project span,.sidebar-collapsed .sidebar-project strong,.sidebar-collapsed .sidebar-label,.sidebar-collapsed .sidebar-section-title,.sidebar-collapsed .sidebar-count { display: none; }
.sidebar-collapsed .sidebar-link { justify-content: center; padding-inline: 8px; }
.sidebar-collapsed .has-sidebar .page,
.sidebar-collapsed.has-sidebar .page { margin-left: var(--sidebar-collapsed-width); width: calc(100% - var(--sidebar-collapsed-width)); }
.sidebar-collapsed.has-sidebar .active-project-context,
.sidebar-collapsed.has-sidebar .footer { margin-left: var(--sidebar-collapsed-width); }

@media (max-width: 900px) {
    .has-sidebar .topbar { align-items: center; flex-direction: row; min-height: 64px; padding: 11px 14px; }
    .has-sidebar .brand { align-self: auto; }
    .has-sidebar .brand > span:last-child { display: none; }
    .topbar-project { display: none; }
    .topbar-session .user-pill { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .app-sidebar { max-width: 86vw; top: 64px; transform: translateX(-105%); width: 280px; }
    .sidebar-collapsed .app-sidebar { width: 280px; }
    .sidebar-collapsed .sidebar-project { padding: 22px 20px 18px; text-align: left; }
    .sidebar-collapsed .sidebar-project span,.sidebar-collapsed .sidebar-project strong,.sidebar-collapsed .sidebar-label,.sidebar-collapsed .sidebar-section-title,.sidebar-collapsed .sidebar-count { display: initial; }
    .sidebar-collapsed .sidebar-link { justify-content: flex-start; padding-inline: 10px; }
    .sidebar-open .app-sidebar { transform: translateX(0); }
    .sidebar-overlay { background: rgba(10,22,43,.46); border: 0; bottom: 0; cursor: pointer; display: block; left: 0; opacity: 0; pointer-events: none; position: fixed; right: 0; top: 64px; transition: opacity .2s ease; z-index: 25; }
    .sidebar-open .sidebar-overlay { opacity: 1; pointer-events: auto; }
    .has-sidebar .page,.sidebar-collapsed.has-sidebar .page { margin-left: 0; width: 100%; }
    .has-sidebar .active-project-context,.sidebar-collapsed.has-sidebar .active-project-context,
    .has-sidebar .footer,.sidebar-collapsed.has-sidebar .footer { margin-left: 0; }
}

/* Tendencia electoral: gráfica independiente de las vistas de pastel y barras. */
.trend-demo-notice{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:18px 0;padding:15px 18px;border:1px solid #bcd5ff;border-radius:16px;background:#eef5ff;color:#23416e}.trend-demo-notice div{display:flex;flex-direction:column;gap:3px}.trend-demo-notice span{color:#617694;font-size:.86rem}.trend-demo-notice a{flex:0 0 auto;padding:9px 13px;border-radius:10px;background:#fff;color:#3565d5;font-weight:800}
.electoral-trend-card{position:relative;margin:24px 0;padding:28px;border:1px solid #dce5f2;border-radius:24px;background:linear-gradient(145deg,#fff 0%,#f8fbff 100%);box-shadow:0 18px 50px rgba(25,49,91,.08);overflow:hidden}
.public-electoral-trend{background:linear-gradient(145deg,#fff 0%,#f4f7ff 72%,#eef1ff 100%)}
.electoral-trend-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:18px}
.electoral-trend-heading h2{margin:3px 0 7px;font-size:clamp(1.55rem,2.4vw,2.2rem);color:#172944}
.electoral-trend-heading p:not(.eyebrow){margin:0;color:#687a94}
.trend-cutoff{display:flex;flex-direction:column;align-items:flex-end;gap:5px;padding:12px 16px;border:1px solid #d9e5f7;border-radius:15px;background:#fff;color:#667994;white-space:nowrap}
.trend-cutoff span{font-weight:800;color:#315fc9}.trend-cutoff strong{font-size:.84rem}
.trend-axis-switch{display:inline-flex;padding:4px;margin-bottom:10px;border-radius:13px;background:#edf2fa}
.trend-axis-switch button{border:0;border-radius:10px;padding:9px 15px;background:transparent;color:#657893;font:inherit;font-weight:800;cursor:pointer}
.trend-axis-switch button.active{background:#fff;color:#3465dc;box-shadow:0 5px 14px rgba(39,83,170,.13)}
.trend-stage{min-height:350px;width:100%;overflow:hidden}.trend-stage svg{display:block;width:100%;height:auto;min-height:350px}
.trend-grid-line{stroke:#dbe4f0;stroke-width:1}.trend-axis-label{fill:#7888a0;font-size:12px;font-weight:700}
.trend-candidate-line{stroke-width:4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 3px 4px rgba(33,62,112,.12));transition:opacity .2s}
.trend-last-point{stroke:#fff;stroke-width:3}.trend-overlay{cursor:crosshair}
.trend-tooltip{position:absolute;z-index:8;width:min(285px,calc(100% - 24px));padding:11px 12px;border:1px solid rgba(166,185,216,.7);border-radius:12px;background:rgba(15,34,68,.96);box-shadow:0 14px 34px rgba(5,20,49,.24);color:#fff;pointer-events:none;transition:left .12s ease}
.trend-tooltip>small,.trend-tooltip>b,.trend-tooltip>em{display:block}.trend-tooltip>small{color:#a9bce0;font-size:.72rem}.trend-tooltip>b{margin:2px 0 8px;font-size:.88rem}.trend-tooltip>em{margin-top:8px;padding-top:7px;border-top:1px solid rgba(255,255,255,.16);color:#b8c9e8;font-size:.7rem}
.trend-tooltip span{display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:center;gap:7px;margin:5px 0;font-size:.74rem}.trend-tooltip span i{width:8px;height:8px;border-radius:50%}.trend-tooltip span b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.trend-tooltip span strong{font-size:.72rem;white-space:nowrap}
.trend-state{min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px dashed #d5e0ef;border-radius:18px;color:#6d7f98;text-align:center}.trend-state strong{font-size:1.05rem;color:#263b5a}.trend-state span:not(.trend-loader){max-width:420px}.trend-error{background:#fff8f8;color:#a34747}
.trend-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-top:12px}.trend-legend>div{display:grid;grid-template-columns:11px 1fr auto;align-items:center;gap:10px;padding:11px 13px;border:1px solid #dde7f4;border-radius:14px;background:rgba(255,255,255,.84)}.trend-legend i{width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 4px rgba(90,124,246,.08)}.trend-legend span{display:flex;min-width:0;flex-direction:column}.trend-legend b{overflow:hidden;color:#213754;text-overflow:ellipsis;white-space:nowrap}.trend-legend small{color:#7889a0}.trend-legend strong{color:#1b3151;font-size:1.05rem}
.trend-loader{width:30px;height:30px;border:3px solid #dce6f7;border-top-color:#5278ed;border-radius:50%;animation:trend-spin .8s linear infinite}@keyframes trend-spin{to{transform:rotate(360deg)}}
@media(max-width:720px){.trend-demo-notice{align-items:stretch;flex-direction:column}.trend-demo-notice a{text-align:center}.electoral-trend-card{padding:18px 12px;border-radius:18px}.electoral-trend-heading{display:block}.trend-cutoff{align-items:flex-start;margin-top:14px;white-space:normal}.trend-axis-switch{display:grid;grid-template-columns:1fr 1fr;width:100%}.trend-axis-switch button{padding:9px 7px;font-size:.78rem}.trend-stage{min-height:330px;overflow-x:auto}.trend-stage svg{min-width:720px}.trend-tooltip{position:fixed!important;left:12px!important;right:12px;top:auto!important;bottom:12px;width:auto}.trend-candidate-line{stroke-width:5}}

/* Pantalla pública de transmisión */
body:has(.electoral-broadcast){overflow-x:hidden;background:#eef3fb}
body:has(.electoral-broadcast)>.topbar,
body:has(.electoral-broadcast)>.app-sidebar,
body:has(.electoral-broadcast)>.sidebar-overlay,
body:has(.electoral-broadcast)>.active-project-context,
body:has(.electoral-broadcast)>.footer{display:none!important}
body:has(.electoral-broadcast)>.page{width:100%;max-width:none;margin:0!important;padding:0!important}
.electoral-broadcast{min-height:100vh;margin:-28px max(-28px,calc((100vw - 100%) / -2)) 0;padding:24px clamp(22px,3vw,52px) 18px;background:radial-gradient(circle at 85% 0,rgba(105,75,205,.2),transparent 30%),linear-gradient(145deg,#eef4ff 0%,#f8fbff 48%,#eef2ff 100%);color:#172944}
.broadcast-header{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:18px;padding:2px 4px}
.broadcast-header h1{margin:2px 0 0;font-size:clamp(2rem,3.5vw,4rem);line-height:.94;letter-spacing:-.055em}.broadcast-header h1 em{color:#5275ef;font-style:normal}.broadcast-header .eyebrow{margin:0}
.broadcast-header-actions{display:flex;align-items:center;gap:10px}.broadcast-progress{display:grid;min-width:190px;padding:10px 17px;border:1px solid #d4dff1;border-radius:15px;background:rgba(255,255,255,.88);box-shadow:0 10px 24px rgba(28,52,92,.07)}.broadcast-progress span,.broadcast-progress small{color:#718199;font-size:.7rem;font-weight:800;text-transform:uppercase}.broadcast-progress strong{margin:2px 0;color:#1d3555;font-size:1.35rem}.broadcast-icon-button{display:grid;place-items:center;width:46px;height:46px;border:1px solid #d5e0f1;border-radius:14px;background:#fff;color:#395fcf;font-size:1.5rem;font-weight:600;text-decoration:none;cursor:pointer;box-shadow:0 8px 22px rgba(32,56,95,.08)}
.broadcast-bars-card,.broadcast-trend{border:1px solid #d6e1f1;border-radius:22px;background:rgba(255,255,255,.94);box-shadow:0 16px 42px rgba(28,52,92,.09)}.broadcast-bars-card{padding:20px 28px 15px}.broadcast-section-title{display:flex;align-items:center;justify-content:space-between;gap:20px}.broadcast-section-title span{color:#5372d9;font-size:.72rem;font-weight:900;text-transform:uppercase}.broadcast-section-title h2{margin:2px 0 0;font-size:clamp(1.35rem,2vw,2rem)}.broadcast-section-title p{margin:0;color:#6d7e95;font-size:.8rem;font-weight:700}.broadcast-section-title p i,.live-dot{display:inline-block;width:8px;height:8px;margin-right:5px;border-radius:50%;background:#31c8a3;box-shadow:0 0 0 5px rgba(49,200,163,.13)}
.broadcast-bars{display:grid;grid-template-columns:repeat(var(--candidate-count),minmax(105px,1fr));align-items:end;gap:clamp(14px,3vw,44px);height:min(40vh,390px);min-height:285px;margin:8px auto 0;padding:0 clamp(10px,3vw,54px);overflow-x:auto}.broadcast-bar-item{display:grid;grid-template-rows:44px 1fr auto 16px;align-items:end;justify-items:center;height:100%;min-width:105px;text-align:center}.broadcast-bar-value{align-self:start}.broadcast-bar-value strong,.broadcast-bar-value span{display:block}.broadcast-bar-value strong{font-size:clamp(1.25rem,2vw,2rem);line-height:1}.broadcast-bar-value span{margin-top:3px;color:#708198;font-size:.75rem;font-weight:800}.broadcast-bar-column{display:flex;align-items:end;justify-content:center;width:100%;height:100%;border-bottom:2px solid #cbd6e6;background:repeating-linear-gradient(to top,#e4eaf3 0 1px,transparent 1px 25%)}.broadcast-bar-column i{display:block;width:min(78px,62%);min-height:3px;border-radius:12px 12px 2px 2px;box-shadow:inset 0 1px rgba(255,255,255,.45),0 7px 18px rgba(50,72,120,.15);transition:height .6s ease}.broadcast-bar-item h3{align-self:start;display:-webkit-box;max-width:160px;margin:8px 0 0;overflow:hidden;color:#253b58;font-size:clamp(.8rem,1.25vw,1.08rem);line-height:1.05;-webkit-box-orient:vertical;-webkit-line-clamp:2}.broadcast-bar-item small{align-self:start;color:#8795a8;font-size:.62rem}.broadcast-bars-card>footer{display:flex;justify-content:space-between;gap:16px;margin-top:10px;padding-top:10px;border-top:1px solid #e2e9f3;color:#708198;font-size:.76rem;font-weight:750}
.broadcast-trend{margin:18px 0 0;padding:19px 24px}.broadcast-trend .electoral-trend-heading{margin-bottom:8px}.broadcast-trend .electoral-trend-heading h2{font-size:clamp(1.3rem,1.8vw,1.8rem)}.broadcast-trend .electoral-trend-heading p:not(.eyebrow){font-size:.8rem}.broadcast-trend .trend-stage{min-height:270px}.broadcast-trend .trend-legend{padding-top:8px}.broadcast-footer{display:flex;justify-content:space-between;gap:20px;padding:13px 5px 0;color:#718198;font-size:.72rem;text-transform:uppercase}.broadcast-empty{display:grid;place-items:center;min-height:55vh;border:1px solid #d6e1f1;border-radius:22px;background:#fff;text-align:center}.broadcast-empty strong{font-size:clamp(1.6rem,3vw,3rem)}.broadcast-empty p{margin:0;color:#718198}
@media(max-width:900px){.electoral-broadcast{margin-top:-18px;padding:18px 14px}.broadcast-header{align-items:flex-start}.broadcast-progress{min-width:150px}.broadcast-bars{gap:12px;padding:0;height:340px}.broadcast-bars-card{padding:18px 14px}.broadcast-trend{padding:18px 12px}.broadcast-footer{flex-direction:column;gap:4px}.broadcast-bars-card>footer{flex-direction:column;gap:4px}}
@media(max-width:620px){.broadcast-header{display:block}.broadcast-header-actions{margin-top:12px}.broadcast-progress{flex:1}.broadcast-section-title{align-items:flex-start;flex-direction:column;gap:5px}.broadcast-bars{grid-template-columns:repeat(var(--candidate-count),92px);justify-content:flex-start;height:320px}.broadcast-bar-item{min-width:92px}.broadcast-bar-column i{width:50px}.broadcast-header h1{font-size:2.3rem}}