:root {

  color-scheme: dark;

  --bg: #111414;

  --surface: #202626;

  --surface-raised: #293130;

  --surface-soft: #19201f;

  --line: #3d4b47;

  --text: #f3f4f0;

  --muted: #b5c3bd;

  --mint: #b8efda;

  --blue: #8ebce9;

  --red: #eea294;

  --gold: #e7c58d;

  --shadow: 0 18px 48px rgba(0,0,0,.15);

}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { margin: 0; color: var(--text); background: radial-gradient(ellipse 850px 460px at 95% -200px,#2d4841 0,transparent 75%),var(--bg); font: 15px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }

button,input,select,textarea { font: inherit; }

button { cursor: pointer; }

a { color: inherit; }

[hidden] { display: none!important; }

.wrap { width: min(1260px,calc(100% - 52px)); margin-inline: auto; }

.site-header { background: #1b1e1d; border-bottom: 1px solid #35413d; }

.header-inner { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; min-width: 185px; }

.brand img { height: 45px; width: 45px; object-fit: cover; border-radius: 5px; }

.brand span { display: flex; flex-direction: column; line-height: 1.1; }

.brand strong { font-size: 21px; letter-spacing: .12em; }

.brand small { margin-top: 5px; font-size: 9px; letter-spacing: .13em; color: var(--mint); font-weight: 800; }

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

nav a { text-decoration: none; color: var(--muted); font-size: 13px; font-weight: 650; white-space: nowrap; }

nav a:hover,nav a:focus-visible { color: var(--mint); }

nav .nav-admin { border: 1px solid #647b70; color: var(--mint); border-radius: 7px; padding: 9px 13px; }

.dashboard-head { padding-top: 38px; padding-bottom: 33px; display: grid; grid-template-columns: minmax(0,1fr) 295px; gap: 60px; align-items: center; }

.eyebrow,.kicker { color: var(--mint); font-size: 11px; letter-spacing: .15em; font-weight: 800; }

.eyebrow { margin: 0 0 12px; }

.kicker { margin: 0 0 7px; }

.dot { display: inline-block; height: 7px; width: 7px; margin-right: 8px; background: var(--mint); border-radius: 50%; box-shadow: 0 0 12px var(--mint); }

h1,h2,h3,h4,p { margin-top: 0; }

h1 { margin-bottom: 10px; font-size: clamp(35px,4.4vw,57px); line-height: 1.08; letter-spacing: -.05em; }

h1 em { font-style: normal; color: var(--mint); }

h2 { margin-bottom: 0; line-height: 1.15; letter-spacing: -.035em; font-size: clamp(25px,2.7vw,34px); }

.hero-copy > p:not(.eyebrow) { max-width: 690px; color: var(--muted); font-size: 16px; margin-bottom: 0; }

.hero-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 19px; font-size: 12px; color: var(--muted); }

.hero-meta b { color: var(--text); }

.hero-meta > span { padding: 7px 12px; border: 1px solid var(--line); border-radius: 30px; }

.hero-meta .pill-outline { color: var(--mint); }

.focus-card { background: linear-gradient(138deg,#283631,#202624); border: 1px solid #4c675b; padding: 18px; border-radius: 10px; display: flex; align-items: center; gap: 15px; min-height: 133px; }

.focus-symbol img { width: 63px; height: 63px; object-fit: cover; border-radius: 5px; }

.focus-card .mini-label { color: var(--mint); font-size: 10px; font-weight: 800; letter-spacing: .09em; }

.focus-card strong { display: block; font-size: 21px; margin: 2px 0 3px; }

.focus-card small { display: block; font-size: 11px; color: var(--muted); line-height: 1.35; }

.summary { padding-bottom: 25px; }

.section-heading,.section-head,.workspace-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 15px; }

.section-tag,.count-pill { border: 1px solid var(--line); color: var(--mint); border-radius: 30px; font-size: 12px; font-weight: 700; padding: 7px 12px; white-space: nowrap; }

.stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }

.stat-card { background: #242c29; border: 1px solid #46554d; padding: 14px 17px; border-radius: 9px; min-height: 96px; display: flex; flex-direction: column; justify-content: center; }

.stat-card strong { font-size: 33px; letter-spacing: -.04em; color: var(--mint); line-height: 1; }

.stat-card span { color: var(--muted); font-size: 12px; margin-top: 9px; }

.state-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.state-chip { border: 1px solid #4c6358; border-radius: 30px; background: #1c2924; color: #d9e8df; font-size: 12px; padding: 6px 11px; }

.state-chip:hover,.state-chip.selected { background: var(--mint); color: #14221b; }

.small-note { color: #9fb0a7; font-size: 11px; margin: 10px 0 0; }

.map-section { border-top: 1px solid #38443e; padding-top: 28px; padding-bottom: 32px; }

.map-intro { max-width: 900px; color: var(--muted); margin: 0 0 16px; font-size: 13px; }

.map-intro b { color: var(--text); }

.map-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }

.map-reset { border: 1px solid #5f7969; background: #1e2d25; color: var(--mint); border-radius: 7px; padding: 8px 12px; font-size: 12px; font-weight: 700; }

.map-reset:hover { background: #304439; }

.map-layout { display: grid; grid-template-columns: minmax(0,1.9fr) minmax(265px,1fr); gap: 13px; align-items: stretch; }

.map-canvas-wrap,.map-detail { border: 1px solid #405a4c; border-radius: 11px; background: radial-gradient(ellipse 550px 340px at 65% 35%,#22382d,#18211c 75%); }

.map-canvas-wrap { padding: 15px 12px 11px; min-width: 0; }

#us-map { display: block; width: 100%; height: auto; min-height: 290px; }

.map-state { fill: #3a4941; stroke: #16231b; stroke-width: 1.7; cursor: pointer; transition: fill .15s,stroke .15s; }

.map-state.coverage { fill: #65977b; }

.map-state.democrat { fill: #739fce; }

.map-state.republican { fill: #d38273; }

.map-state.other { fill: #d6b178; }

.map-state:hover,.map-state:focus-visible { stroke: #f4f7e8; stroke-width: 3.2; outline: none; }

.map-state.selected { stroke: #f7f6d8; stroke-width: 3.8; filter: drop-shadow(0 0 6px #dfffe0); }

.map-state-code { pointer-events: none; text-anchor: middle; dominant-baseline: middle; fill: #14201a; font-size: 16px; font-weight: 850; paint-order: stroke; stroke: #d3e8d5; stroke-width: 1.8px; letter-spacing: .02em; }

.map-new-marker { pointer-events: none; fill: #f8e3a3; stroke: #1c2a20; stroke-width: 2; }

.map-instructions { font-size: 11px; color: var(--muted); margin: 5px 8px 0; }

.map-detail { padding: 22px 20px; min-height: 320px; }

.map-detail-kicker { color: var(--mint); font-size: 10px; font-weight: 800; letter-spacing: .13em; }

.map-detail h3 { margin: 6px 0 9px; font-size: 27px; letter-spacing: -.04em; }

.map-detail > p { color: var(--muted); font-size: 13px; }

.map-detail-stat { display: inline-block; margin-top: 11px; color: #17271e; background: var(--mint); padding: 8px 11px; border-radius: 6px; font-size: 12px; font-weight: 750; }

.map-detail .map-detail-summary { color: #d6e4d9; border-bottom: 1px solid #496052; padding-bottom: 13px; margin-bottom: 0; }

.map-see-cards { display: inline-block; margin-top: 16px; }

.map-auto-link { display: block; margin-top: 11px; color: var(--gold); font-size: 12px; }

.map-no-data { margin: 17px 0; }

.score-section { border-top: 1px solid #38443e; padding-top: 35px; padding-bottom: 42px; }

.score-intro { max-width: 1050px; margin-bottom: 18px; color: var(--muted); font-size: 13px; line-height: 1.65; }

.score-intro strong { color: var(--text); }

.score-tabs { margin-bottom: 18px; }

.score-highlights { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; margin-bottom: 33px; }

.score-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 123px; background: linear-gradient(140deg,#25382f,#202925); border: 1px solid #527160; border-radius: 9px; padding: 17px; }

.score-card-label { color: var(--mint); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }

.score-card strong { font-size: 19px; line-height: 1.2; overflow-wrap: anywhere; }

.score-card small { color: var(--muted); font-size: 11px; }

.score-explorer-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 15px; border-top: 1px solid var(--line); padding-top: 23px; }

.score-explorer-head h3 { font-size: 23px; margin: 0; letter-spacing: -.025em; }

.score-explorer-head p:last-child { color: var(--muted); font-size: 12px; max-width: 425px; margin: 0; }

.score-controls { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; margin-bottom: 9px; }

.score-categories { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }

.score-categories button { border: 1px solid #52685a; background: #1b2520; border-radius: 7px; padding: 9px 12px; color: var(--muted); font-size: 12px; font-weight: 750; white-space: nowrap; }

.score-categories button:hover,.score-categories button[aria-pressed="true"] { border-color: var(--mint); background: #2c4838; color: #e6fff0; }

.score-controls label { color: var(--muted); font-size: 11px; }

.score-controls select,.score-controls input { display: block; min-width: 155px; margin-top: 4px; border: 1px solid #52685a; border-radius: 7px; background: #1b2520; color: var(--text); padding: 8px 9px; }

.score-controls input { width: 185px; }

.score-visible { color: var(--muted); font-size: 12px; margin: 7px 0 14px; }

.score-chart-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; align-items: stretch; }

.score-state-code { display: block; color: var(--mint); font-size: 10px; letter-spacing: .09em; font-weight: 800; }

.score-bars { display: grid; gap: 13px; }

.score-bar-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 5px; font-size: 13px; }

.score-bar-heading span { min-width: 0; overflow-wrap: anywhere; }

.score-bar-heading strong { font-size: 20px; letter-spacing: -.04em; white-space: nowrap; }

.score-progress { display: block; width: 100%; height: 12px; appearance: none; -webkit-appearance: none; border: 0; border-radius: 10px; overflow: hidden; background: #3d5145; }

.score-progress::-webkit-progress-bar { background: #3d5145; border-radius: 10px; }

.score-progress::-webkit-progress-value { background: var(--gold); border-radius: 10px; }

.score-progress.democrat::-webkit-progress-value { background: var(--blue); }

.score-progress.republican::-webkit-progress-value { background: var(--red); }

.score-progress::-moz-progress-bar { background: var(--gold); border-radius: 10px; }

.score-progress.democrat::-moz-progress-bar { background: var(--blue); }

.score-progress.republican::-moz-progress-bar { background: var(--red); }

.score-margin { color: var(--gold); font-size: 12px; font-weight: 750; margin: 15px 0 11px; }

.score-race-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; border-top: 1px solid #415648; padding-top: 11px; font-size: 11px; color: var(--muted); }

.score-race-meta a { color: var(--mint); font-weight: 750; white-space: nowrap; }

.score-stale { display: inline-block; margin-top: 10px; background: #493f2d; color: #f1d4a0; border-radius: 5px; padding: 3px 7px; font-size: 10px; }

.score-method { border-top: 1px solid #405447; margin-top: 12px; padding-top: 10px; }

.score-method summary { cursor: pointer; color: #cae8d5; font-size: 11px; font-weight: 750; }

.score-method-content { color: var(--muted); font-size: 11px; padding-top: 8px; }

.score-method-content p { margin: 0 0 6px; }

.score-table-details { margin-top: 24px; border: 1px solid #496453; background: #1b2520; border-radius: 9px; }

.score-table-details > summary { cursor: pointer; padding: 16px 18px; color: var(--mint); font-weight: 800; }

.score-table-details > p { color: var(--muted); font-size: 12px; margin: 0 18px 13px; }

.score-table-wrap { border: 1px solid #486052; border-radius: 9px; overflow-x: auto; background: #1b2420; }

.score-table-details .score-table-wrap { border: 0; border-top: 1px solid #486052; border-radius: 0 0 9px 9px; }

.score-table { width: 100%; min-width: 1030px; border-collapse: collapse; font-size: 12px; }

.score-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

.score-table th,.score-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #3c5143; vertical-align: top; }

.score-table thead th { color: var(--mint); font-size: 10px; letter-spacing: .045em; text-transform: uppercase; background: #29392f; white-space: nowrap; }

.score-table tbody tr:last-child > * { border-bottom: 0; }

.score-table tbody th { color: var(--text); white-space: nowrap; }

.score-table tbody td { color: #dbe8dc; }

.score-table .score-difference { color: var(--gold); font-weight: 800; white-space: nowrap; }

.score-table td:last-child span,.score-table td:last-child a { display: block; }

.score-table .score-empty { padding: 20px; color: var(--muted); }

.score-empty { grid-column: 1/-1; color: var(--muted); background: #202925; border: 1px dashed #526b5b; border-radius: 8px; padding: 22px; }

.score-footnote { margin: 15px 0 0; color: #aabcb1; font-size: 11px; line-height: 1.6; }

.score-footnote strong { color: #e8f0e8; }

.internal-scores { margin: 19px 0; }

.map-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 14px; }

.legend-item { display: inline-flex; gap: 7px; align-items: center; color: #d6e0d8; font-size: 11px; }

.legend-swatch { width: 14px; height: 14px; border: 1px solid #7d9281; border-radius: 3px; background: #3a4941; }

.legend-swatch.coverage { background: #65977b; }

.legend-swatch.democrat { background: #739fce; }

.legend-swatch.republican { background: #d38273; }

.legend-swatch.other { background: #d6b178; }

.legend-marker { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: #f8e3a3; border: 2px solid #283429; }

.map-footnote { max-width: 1060px; margin: 13px 0 0; color: #9fb0a7; font-size: 11px; line-height: 1.5; }

.automatic { border-top: 1px solid #38443e; padding: 26px 0 30px; }

.automatic .helper { max-width: 900px; margin: 0 0 10px; line-height: 1.55; }

.automatic .helper a { color: var(--mint); }

.auto-status { border-left: 3px solid var(--mint); padding: 8px 12px; color: var(--muted); background: #1b2420; font-size: 12px; margin: 13px 0 16px; }

.automatic-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }

.automatic-card { border: 1px solid #51675a; border-radius: 9px; background: #202c26; padding: 15px; min-width: 0; }

.automatic-card h3 { margin: 9px 0 2px; font-size: 18px; }

.automatic-card .poll-meta { margin-bottom: 10px; }

.auto-answers { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }

.auto-answers li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding: 6px 0; font-size: 12px; }

.auto-answers li strong { color: var(--mint); }

.automatic-card .source-link { display: inline-block; margin-top: 9px; font-size: 12px; }

.auto-admin { padding: 19px 21px; margin: 19px 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }

.auto-admin h2 { font-size: 23px; }

.auto-admin .helper { max-width: 900px; }

.auto-admin-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; max-height: 410px; overflow: auto; }

.auto-admin-item { display: grid; gap: 6px; border: 1px solid #435c4c; border-radius: 7px; background: #1a2420; padding: 11px; min-width: 0; font-size: 12px; }

.auto-admin-item span { color: var(--muted); overflow-wrap: anywhere; }

.auto-admin-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

.auto-admin-actions small { color: var(--muted); }

.races { border-top: 1px solid #38443e; padding-top: 26px; padding-bottom: 54px; }

.filter-bar { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 17px; }

.office-tabs { display: flex; flex-wrap: wrap; gap: 6px; }

.tab { color: var(--muted); border: 1px solid var(--line); background: #1b211f; border-radius: 7px; padding: 9px 15px; font-size: 12px; font-weight: 700; }

.tab:hover,.tab.active { color: #112018; border-color: var(--mint); background: var(--mint); }

.filter-bar label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 700; font-size: 12px; }

.filter-bar select { min-width: 175px; }

select,input,textarea { background: #151c1a; border: 1px solid #5a6c61; color: var(--text); border-radius: 7px; padding: 10px 11px; width: 100%; }

select:focus-visible,input:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

.poll-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }

.race-card { min-width: 0; border: 1px solid #4a5e52; background: linear-gradient(155deg,#293730 0%,#1c2321 80%); box-shadow: var(--shadow); border-radius: 10px; padding: 18px 18px 12px; }

.card-top { display: flex; justify-content: space-between; align-items: center; color: var(--mint); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.state-code { border: 1px solid #688575; padding: 2px 7px; border-radius: 4px; }

.race-card h3 { font-size: 25px; margin: 8px 0 1px; line-height: 1.14; letter-spacing: -.035em; }

.poll-meta { color: var(--muted); font-size: 12px; margin-bottom: 14px; }

.candidates { border-top: 1px solid #405046; padding-top: 2px; }

.candidate { margin-top: 11px; }

.candidate-line { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 13px; }

.candidate-line strong:first-child { overflow-wrap: anywhere; line-height: 1.3; }

.party { font-weight: 500; color: var(--muted); }

.number { font-size: 20px; white-space: nowrap; }

.number.democrat { color: var(--blue); }

.number.republican { color: var(--red); }

.number.other { color: var(--gold); }

.track { display: block; width: 100%; height: 5px; margin-top: 5px; border: 0; border-radius: 9px; appearance: none; background: #4b5952; overflow: hidden; }

.track::-webkit-progress-bar { background: #4b5952; }

.track.democrat::-webkit-progress-value { background: var(--blue); }

.track.republican::-webkit-progress-value { background: var(--red); }

.track.other::-webkit-progress-value { background: var(--gold); }

.track.democrat::-moz-progress-bar { background: var(--blue); }

.track.republican::-moz-progress-bar { background: var(--red); }

.track.other::-moz-progress-bar { background: var(--gold); }

.card-strip { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 7px; border-top: 1px solid #405046; margin-top: 15px; padding-top: 10px; font-size: 11px; color: var(--muted); }

.source-link { text-decoration: none; color: var(--mint); font-weight: 800; }

.source-link:hover { text-decoration: underline; }

.card-details { border-top: 1px solid #405046; margin-top: 10px; padding-top: 9px; color: var(--muted); font-size: 11px; }

.card-details summary { cursor: pointer; color: #d5e5d9; font-weight: 650; }

.detail-body { padding-top: 10px; }

.detail-body p { margin: 0 0 7px; }

.empty { border: 1px dashed #587262; border-radius: 9px; padding: 35px; text-align: center; color: var(--muted); }

.empty span { color: var(--mint); font-size: 30px; }

.empty h3 { color: var(--text); margin: 3px 0; }

.empty p { margin-bottom: 0; }

.notice:not(:empty) { margin: 13px 0; padding: 10px 13px; color: var(--mint); border-radius: 7px; border: 1px solid #526a5a; background: #24352b; }

.notice.error:not(:empty) { color: #ffd0c5; border-color: #80594e; background: #3a2925; }

.methodology { border-top: 1px solid #38443e; display: grid; grid-template-columns: minmax(220px,1fr) minmax(0,2fr); gap: 35px; padding-top: 32px; padding-bottom: 45px; }

.method-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; }

.method-list p { font-size: 12px; color: var(--muted); line-height: 1.6; }

.method-list b { color: var(--text); }

.footer { border-top: 1px solid #38443e; color: #9aaca2; font-size: 11px; padding-top: 20px; padding-bottom: 30px; display: flex; justify-content: space-between; gap: 18px; }

/* Sala interna */

.internal { padding-top: 34px; padding-bottom: 65px; }

.internal h1 { margin-top: 8px; margin-bottom: 9px; font-size: clamp(34px,4vw,52px); }

.lead { color: var(--muted); max-width: 750px; font-size: 15px; margin-bottom: 22px; }

.login-card,.list-panel,.form-panel,.quality-panel,.import-panel,.audit-panel,.coverage-panel,.race-work-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }

.coverage-panel { padding: 20px 21px; margin: 19px 0; }

.coverage-panel .helper { margin-bottom: 13px; max-width: 930px; }

.coverage-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }

.coverage-item { border: 1px solid #4c6254; background: #1a2420; border-radius: 8px; padding: 14px; min-width: 0; }

.coverage-heading { display: flex; justify-content: space-between; align-items: center; gap: 9px; }

.coverage-heading h3 { font-size: 17px; margin: 0; }

.coverage-badge { border: 1px solid #6c8a78; color: var(--mint); font-size: 10px; border-radius: 16px; padding: 3px 7px; white-space: nowrap; }

.coverage-item p { font-size: 12px; margin: 7px 0; }

.coverage-label { color: var(--gold); }

.coverage-dates { color: var(--muted); }

.coverage-linked { color: var(--mint); font-weight: 700; }

.coverage-details { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 9px; }

.coverage-details summary { color: #d7e7dc; font-size: 12px; font-weight: 700; cursor: pointer; }

.coverage-editor { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 12px; }

.coverage-editor label { min-width: 0; }

.coverage-editor label:nth-child(4) { grid-column: 1/-1; }

.coverage-editor textarea { resize: vertical; }

.coverage-editor button { justify-self: start; grid-column: 1/-1; }

.race-work-panel { padding: 20px 21px; margin: 19px 0; }

.race-work-panel > .helper { max-width: 930px; }

.race-work-toolbar { display: flex; gap: 16px; justify-content: space-between; align-items: end; margin: 16px 0; }

.race-work-toolbar label { min-width: 230px; }

.unassigned-areas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }

.unassigned-areas strong { color: var(--text); }

.new-race-form { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 11px; padding: 16px; margin: 0 0 17px; border: 1px solid #526b59; border-radius: 8px; background: #1b2a22; align-items: end; }

.new-race-form strong { color: var(--mint); font-size: 14px; }

.new-race-form .helper { margin: 4px 0 0; }

.new-race-form button { justify-self: start; }

.race-work-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }

.race-work-item { border: 1px solid #4c6254; background: #1a2420; border-radius: 8px; padding: 14px; min-width: 0; }

.race-work-item h3 { font-size: 17px; margin: 0; }

.race-work-item p { font-size: 12px; margin: 7px 0; }

.race-work-item .helper { color: var(--muted); }

.race-scope { border-radius: 16px; padding: 3px 7px; font-size: 10px; white-space: nowrap; font-weight: 800; }

.race-scope.unconfirmed { background: var(--gold); color: #2b2111; }

.race-scope.confirmed { background: var(--mint); color: #14261b; }

.race-scope.excluded { border: 1px solid #68746b; color: var(--muted); }

.race-next-action { color: var(--text); }

.race-source-list { list-style: none; margin: 7px 0; padding: 0; display: grid; gap: 5px; max-height: 150px; overflow-y: auto; }

.race-source-list li { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--muted); }

.race-work-editor { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 12px; }

.race-work-editor label { min-width: 0; }

.race-work-editor label:nth-child(5),.race-work-editor label:nth-child(6),.race-work-editor button { grid-column: 1/-1; }

.race-work-editor textarea { resize: vertical; }

.race-work-editor button { justify-self: start; }

.stale-badge { display: inline-block; color: #2b2111; background: var(--gold); border-radius: 4px; padding: 2px 6px; font-size: 10px; font-weight: 800; margin-bottom: 7px; }

.login-card { max-width: 420px; padding: 25px; }

.login-card h2 { font-size: 23px; }

.login-card p,.helper { color: var(--muted); font-size: 12px; }

.login-card form { display: grid; gap: 14px; }

label { color: #d7e3dc; font-size: 12px; font-weight: 650; }

label input,label select,label textarea { display: block; margin-top: 5px; font-weight: 400; }

.button { border: 1px solid #719780; color: var(--mint); background: #25372c; padding: 9px 13px; border-radius: 7px; font-size: 12px; font-weight: 750; text-decoration: none; display: inline-block; text-align: center; }

.button:hover { background: #334c3b; }

.button.primary { background: var(--mint); color: #18271e; border-color: var(--mint); }

.button.primary:hover { background: #d5ffe9; }

.button.secondary { color: #e2eee5; background: transparent; border-color: #65796b; }

.button.secondary:hover { background: #334038; }

.button.small { font-size: 11px; padding: 6px 9px; }

.button:disabled { opacity: .45; cursor: not-allowed; }

.internal-overview,.quality-panel,.import-panel,.audit-panel { margin-bottom: 19px; }

.internal-overview .section-head { margin-top: 21px; }

.internal .stat-card { min-height: 91px; }

.briefing { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 10px; }

.briefing > div { padding: 13px; background: #222b26; border: 1px solid var(--line); border-radius: 8px; }

.briefing strong { display: block; color: var(--mint); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 5px; }

.briefing span { font-size: 12px; color: #e3e9e2; }

.quality-panel,.import-panel,.audit-panel { padding: 19px 21px; }

.quality-panel h2,.import-panel h2,.audit-panel h2 { font-size: 23px; }

.quality-panel .helper,.import-panel .helper { margin: 6px 0 11px; }

.quality-panel ul,.audit-panel ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }

.quality-panel li,.audit-panel li { background: #1b2520; border: 1px solid #415748; border-radius: 7px; padding: 9px 11px; font-size: 12px; color: var(--muted); }

.quality-panel li strong,.audit-panel li strong { color: var(--text); }

.quality-panel li button { border: 0; background: transparent; color: var(--mint); font-size: 12px; font-weight: 700; padding: 0; margin-left: 8px; }

.import-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 9px; }

.import-controls label { min-width: 235px; flex: 1; max-width: 360px; }

.import-controls input { padding: 6px; }

.import-result { margin-top: 12px; color: var(--muted); font-size: 12px; }

.import-result p { margin: 4px 0; }

.import-result strong { color: var(--text); }

.import-result .import-error { color: #ffbbaa; }

.workspace-head { margin: 23px 0 13px; }

.editor-layout { display: grid; grid-template-columns: minmax(300px,370px) minmax(0,1fr); gap: 14px; align-items: start; }

.list-panel,.form-panel { padding: 19px; }

.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 13px; }

.panel-heading h3 { margin: 0; font-size: 20px; }

.poll-list { display: grid; gap: 8px; max-height: 1100px; overflow-y: auto; padding-right: 3px; }

.list-item { border: 1px solid #44594c; background: #1a2420; padding: 12px; border-radius: 7px; }

.list-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.list-top small { color: var(--muted); }

.status { border-radius: 25px; padding: 3px 8px; font-size: 10px; font-weight: 800; }

.status.published { color: #14261b; background: var(--mint); }

.status.draft { color: #2b2111; background: var(--gold); }

.list-item h4 { margin: 9px 0 2px; font-size: 16px; }

.list-item p { font-size: 12px; margin-bottom: 4px; }

.list-item .source-name { color: var(--muted); }

.list-item .source-link { display: block; font-size: 11px; margin-top: 4px; }

.item-actions { display: flex; gap: 8px; margin-top: 11px; }

.form-panel .helper { margin-bottom: 13px; }

.form-panel h4 { color: var(--mint); border-top: 1px solid var(--line); padding-top: 12px; margin: 18px 0 9px; font-size: 13px; }

.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px 13px; margin-bottom: 10px; }

.form-panel label { display: block; margin-bottom: 10px; }

.form-panel textarea { resize: vertical; }

.form-actions { display: flex; gap: 8px; margin-top: 15px; }

.audit-panel { margin-top: 23px; }

.audit-panel ol { max-height: 260px; overflow: auto; }

.audit-panel li { display: flex; justify-content: space-between; gap: 12px; }

.audit-panel time { white-space: nowrap; color: #9aafa2; }

@media (max-width: 1000px) { .poll-grid,.automatic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .methodology { grid-template-columns: 1fr; gap: 15px; } .dashboard-head { gap: 20px; } }

@media (max-width: 1000px) { .score-highlights { grid-template-columns: repeat(2,minmax(0,1fr)); } }

@media (max-width: 880px) { .score-chart-grid { grid-template-columns: 1fr; } .score-explorer-head { align-items: start; flex-direction: column; } }

@media (max-width: 900px) { .map-layout { grid-template-columns: 1fr; } .map-detail { min-height: 0; } }

@media (max-width: 1050px) { .new-race-form { grid-template-columns: repeat(2,minmax(0,1fr)); } .new-race-form > div:first-child { grid-column: 1/-1; } }

@media (max-width: 780px) { .header-inner { align-items: start; flex-wrap: wrap; padding-block: 10px; gap: 10px; } nav { width: 100%; overflow-x: auto; gap: 13px; padding-bottom: 4px; } .dashboard-head { grid-template-columns: 1fr; padding-top: 27px; } .focus-card { min-height: unset; } .stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .method-list { grid-template-columns: 1fr; gap: 3px; } .editor-layout,.coverage-grid,.race-work-grid,.auto-admin-list { grid-template-columns: 1fr; } .poll-list { max-height: 450px; } }

@media (max-width: 570px) { .wrap { width: min(100% - 26px,1260px); } .poll-grid,.automatic-grid { grid-template-columns: 1fr; } .section-heading,.section-head,.workspace-head,.filter-bar,.race-work-toolbar { align-items: start; flex-wrap: wrap; } .filter-bar label,.race-work-toolbar label { width: 100%; } .filter-bar select { flex: 1; } .stat-card { padding: 12px; } .stat-card strong { font-size: 28px; } .map-state-code { display: none; } .map-canvas-wrap { padding: 5px; } #us-map { min-height: 190px; } .briefing { grid-template-columns: 1fr; } .form-grid,.coverage-editor,.race-work-editor,.new-race-form { grid-template-columns: 1fr; } .coverage-editor label:nth-child(4),.coverage-editor button,.race-work-editor label:nth-child(5),.race-work-editor label:nth-child(6),.race-work-editor button,.new-race-form > div:first-child { grid-column: 1; } .footer { flex-direction: column; } .audit-panel li { display: block; } }

@media (max-width: 570px) { .score-highlights { grid-template-columns: 1fr; } }

@media (max-width: 570px) { .score-controls label,.score-controls select,.score-controls input { width: 100%; } .score-controls label { flex: 1 1 100%; } }

/* Corrección v9: retrato circular y gráfico de porcentaje lado a lado. */

.score-photo-credit a { color: var(--mint); }

/* Sistema visual ODYSSEUS: editorial claro, marca negra y acento verde agua. */
:root {
  color-scheme: light;
  --bg: #f3f3ef;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-soft: #ecece7;
  --line: #d6d6ce;
  --text: #181818;
  --muted: #5e625e;
  --mint: #0a3161;
  --blue: #276ca7;
  --red: #c6473f;
  --gold: #9a6b13;
  --other: #7b5cc4;
  --shadow: 0 16px 38px rgba(18, 18, 18, .08);
}

body {
  color: var(--text);
  background: linear-gradient(180deg, #f8f8f5 0, #f1f1ed 100%);
}
/* Fondo de la página pública (ilustración propia, en tonos muy claros): mapa de EE. UU. en matriz
   de puntos como una muestra de encuestados, una gráfica de tendencia con su margen de error y
   estrellas como el cantón de la bandera. Es una capa fija aparte, así el navegador no la vuelve a
   pintar al desplazarse. */
.page-backdrop::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #f1f4f9 url("bg_polls.webp") center / cover no-repeat;
  pointer-events: none;
  transform: translateZ(0);
}
@media (max-width: 760px) and (orientation: portrait) {
  .page-backdrop::before { background-image: url("bg_polls_m.webp"); }
}

.site-header {
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid #d9d9d2;
  box-shadow: 0 3px 18px rgba(18, 18, 18, .04);
}

.brand { min-width: 0; }

.brand img {
  width: 188px;
  height: 64px;
  object-fit: contain;
  object-position: left center;
  border-radius: 0;
}

nav a { color: #383a38; }
nav a:hover, nav a:focus-visible { color: #0a3161; }
nav .nav-admin { background: #0b2a55; border-color: #0b2a55; color: #fff; }
nav .nav-admin:hover, nav .nav-admin:focus-visible { background: #0a3161; border-color: #0a3161; color: #fff; }

.dashboard-head {
  margin-top: 30px;
  padding: 44px;
  border: 1px solid #0b2a55;
  border-radius: 20px;
  background: #0b2a55;
  box-shadow: 0 22px 44px rgba(18, 18, 18, .13);
}

.dashboard-head h1, .dashboard-head h2, .dashboard-head h3,
.dashboard-head .hero-meta b { color: #fff; }
.dashboard-head h1 em, .dashboard-head .eyebrow, .dashboard-head .pill-outline { color: #ffffff; }
.dashboard-head .dot { background: #ffffff; box-shadow: none; }
.dashboard-head .hero-copy > p:not(.eyebrow), .dashboard-head .hero-meta { color: #d3d7d2; }
.dashboard-head .hero-meta > span { border-color: #4f5550; }

.focus-card {
  background: #fff;
  border-color: #fff;
  color: #0b2a55;
  border-radius: 13px;
}

.focus-symbol {
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #0b2a55;
  color: #ffffff;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .05em;
}

.focus-card .mini-label { color: #0a3161; }
.focus-card strong { color: #0b2a55; }
.focus-card small { color: #626662; }

.projection-card {
  overflow: hidden;
  padding: 18px;
  border: 1px solid #fff;
  border-radius: 13px;
  background: #fff;
  color: #0b2a55;
}
.projection-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.projection-card .mini-label { display: block; color: #0a3161; font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.projection-card h2 { margin: 4px 0 0; color: #0b2a55; font-size: 21px; }
.projection-year { display: grid; flex: 0 0 46px; width: 46px; height: 46px; place-items: center; border-radius: 50%; background: #0b2a55; color: #ffffff; font-size: 10px; font-weight: 850; letter-spacing: .05em; }
.projection-card-intro { margin: 10px 0 11px; color: #626662; font-size: 11px; line-height: 1.4; }
.projection-rows { display: grid; gap: 7px; }
.projection-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid #e2e2dc; }
.projection-place { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: #e3e6e1; color: #383c38; font-size: 10px; font-weight: 850; }
.projection-row:first-child .projection-place { background: #0a3161; color: #fff; }
.projection-copy { min-width: 0; }
.projection-scope { display: block; overflow: hidden; color: #0a3161; font-size: 9px; font-weight: 850; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.projection-copy strong { display: block; overflow: hidden; margin: 1px 0; color: #0b2a55; font-size: 13px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.projection-copy small { display: block; overflow: hidden; color: #686c68; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.projection-score { text-align: right; }
.projection-score strong { display: block; color: #0b2a55; font-size: 17px; line-height: 1; }
.projection-score span { display: block; max-width: 58px; margin-top: 2px; color: #686c68; font-size: 8px; line-height: 1.1; }
.projection-card-footer { display: flex; justify-content: space-between; gap: 8px; margin-top: 11px; padding-top: 9px; border-top: 1px solid #e2e2dc; color: #686c68; font-size: 9px; }
.projection-card-footer a { color: #0a3161; font-weight: 850; text-decoration: none; white-space: nowrap; }
.projection-card-footer a:hover, .projection-card-footer a:focus-visible { text-decoration: underline; }
.projection-loading { margin: 0; color: #626662; font-size: 11px; }

.eyebrow, .kicker { color: #0a3161; }
.section-tag, .count-pill { border-color: #bfc4be; color: #0a3161; background: #fff; }
.summary, .map-section, .score-section, .automatic, .races, .methodology { border-color: #d8d8d0; }

.stat-card {
  background: #fff;
  border-color: #d8d8d0;
  box-shadow: 0 8px 18px rgba(18, 18, 18, .035);
}

.stat-card strong { color: #0b2a55; }
.stat-card span, .small-note, .helper { color: #666a66; }
.state-chip { border-color: #c7ccc5; background: #fff; color: #303331; }
.state-chip:hover, .state-chip.selected { border-color: #0a3161; background: #e3eaf5; color: #0a3161; }

.map-toolbar { margin-top: 19px; }
.dashboard-head + .map-section { margin-top: 18px; border-top: 0; padding-top: 0; }
.map-section + .summary { border-top: 1px solid #d8d8d0; padding-top: 28px; }
.map-reset { border-color: #0b2a55; background: #0b2a55; color: #fff; }
.map-reset:hover { background: #0a3161; border-color: #0a3161; }
.map-layout { grid-template-columns: minmax(0, 1.18fr) minmax(430px, .95fr); gap: 18px; align-items: start; }

.map-side { order: 2; display: grid; gap: 14px; min-width: 0; align-content: start; }

.map-canvas-wrap {
  order: initial;
  padding: 16px 13px 12px;
  border-color: #0b2a55;
  background: radial-gradient(ellipse 600px 340px at 65% 35%, #17396b, #0a2147 74%);
  box-shadow: 0 14px 30px rgba(18, 18, 18, .12);
}

#us-map { min-height: 345px; }
.map-state { fill: #3d5070; stroke: #071a33; }
.map-state.coverage { fill: #c2c7cf; }
.map-state.democrat { fill: #6c9fd1; }
.map-state.republican { fill: #d88479; }
.map-state.other { fill: #a58bd6; }
.map-state:hover, .map-state:focus-visible { stroke: #fff; }
.map-state.selected { stroke: #fff; filter: drop-shadow(0 0 7px #ffffff); }
.map-state-code { fill: #fff; stroke: #0b2a55; }
.map-instructions { color: #e3e5df; }

.map-detail {
  order: 1;
  min-height: 445px;
  padding: 0;
  overflow: hidden;
  border-color: #0b2a55;
  background: #fff;
  box-shadow: 0 14px 30px rgba(18, 18, 18, .08);
}

.map-detail-placeholder, .map-detail-empty { padding: 30px; }
.map-detail-placeholder { min-height: 445px; display: grid; align-content: center; gap: 8px; background: linear-gradient(145deg, #fff 0%, #f0f1ed 100%); }
.map-detail-placeholder h3, .map-detail-header h3 { margin: 0; color: #0b2a55; font-size: 28px; }
.map-detail-placeholder p, .map-detail-empty p { margin: 0; color: #666a66; font-size: 13px; line-height: 1.6; }
.map-detail-kicker { color: #0a3161; }

.map-detail-header { padding: 18px 20px 17px; color: #fff; background: #0b2a55; }
.map-detail-header h3 { margin: 5px 0 6px; color: #fff; }
.map-detail-header p { margin: 0; color: #d5d9d4; font-size: 12px; line-height: 1.5; }
.map-detail-header .map-detail-kicker { color: #ffffff; }
.map-detail-charts { display: grid; gap: 12px; padding: 14px; }

.map-detail .score-state-code { color: #0a3161; }

.map-detail .score-margin { margin: 11px 0 9px; color: #76520d; }
.map-detail .score-race-meta { border-color: #e1e1db; color: #666a66; }
.map-detail .score-race-meta a, .map-detail .score-method summary { color: #0a3161; }
.map-detail .score-method { border-color: #e1e1db; margin-top: 9px; }
.map-detail .score-method-content { color: #5c605d; }
.map-detail-empty { background: #f7f8f5; }
.map-detail-empty strong { display: block; margin-bottom: 7px; color: #0b2a55; }

.map-ranking {
  overflow: hidden;
  border: 1px solid #0b2a55;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(18, 18, 18, .08);
}

.map-ranking-header { padding: 18px 20px 16px; color: #fff; background: #0b2a55; }
.map-ranking-kicker { display: block; color: #ffffff; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.map-ranking-header h3, .map-ranking-empty h3 { margin: 5px 0 6px; color: inherit; font-size: 23px; letter-spacing: -.035em; }
.map-ranking-header p, .map-ranking-empty p { margin: 0; color: #d5d9d4; font-size: 12px; line-height: 1.5; }
.map-ranking-empty { min-height: 146px; padding: 24px 20px; display: grid; align-content: center; gap: 6px; background: linear-gradient(145deg, #fff 0%, #f0f1ed 100%); }
.map-ranking-empty .map-ranking-kicker, .map-ranking-empty h3, .map-ranking-empty strong { color: #0a3161; }
.map-ranking-empty p { color: #666a66; }
.ranking-avatar { position: relative; display: grid; place-items: center; width: 29px; height: 29px; overflow: hidden; border-radius: 50%; color: #0b2a55; background: #e4e8e3; font-size: 10px; font-weight: 800; }
.ranking-avatar.democrat { background: #e6f0fa; }
.ranking-avatar.republican { background: #f9e8e5; }
.ranking-avatar.other { background: #efe9fa; }
.ranking-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.map-ranking-note { margin: 0; padding: 0 16px 14px; color: #666a66; font-size: 10px; line-height: 1.45; }

.map-legend { color: #555a56; }
.legend-item { color: #555a56; }
.legend-swatch { border-color: #6d7d99; background: #3d5070; }
.legend-swatch.coverage { background: #c2c7cf; }
.legend-swatch.democrat { background: #6c9fd1; }
.legend-swatch.republican { background: #d88479; }
.legend-swatch.other { background: #a58bd6; }
.map-footnote { color: #656963; }

.score-card, .score-table-details, .automatic-card, .auto-admin,
.login-card, .list-panel, .form-panel, .quality-panel, .import-panel, .audit-panel, .coverage-panel, .race-work-panel {
  background: #fff;
  border-color: #d7d7cf;
  box-shadow: 0 8px 20px rgba(18, 18, 18, .04);
}

.score-card { background: #fff; }
.score-card-label, .score-state-code { color: #0a3161; }
.score-card small, .score-explorer-head p:last-child, .score-intro, .score-visible, .score-footnote { color: #606560; }

.score-margin { color: #76520d; }
.score-race-meta, .score-method-content { border-color: #e1e1db; color: #606560; }
.score-race-meta a, .score-photo-credit a, .source-link { color: #0a3161; }
.score-method { border-color: #e1e1db; }
.score-method summary { color: #0a3161; }
.score-stale { background: #f6ecd7; color: #76520d; }
.score-table-details, .score-table-wrap { background: #fff; border-color: #d7d7cf; }
.score-table-details > summary, .score-table thead th { color: #0a3161; background: #f3f5f1; }
.score-table-details > p, .score-table tbody td { color: #606560; }
.score-table th, .score-table td { border-color: #e2e2dc; }
.score-table .score-difference { color: #76520d; }
.score-empty { background: #f7f8f5; border-color: #c8cec7; color: #606560; }

.score-categories button, .tab { border-color: #c9cec8; background: #fff; color: #424642; }
.score-categories button:hover, .score-categories button[aria-pressed="true"], .tab:hover, .tab.active { border-color: #0a3161; background: #0a3161; color: #fff; }
.score-controls label { color: #5e625e; }
.score-controls select, .score-controls input, select, input, textarea { border-color: #c6cbc5; background: #fff; color: #0b2a55; }
select:focus-visible, input:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline-color: #0a3161; }

.auto-status { border-color: #0a3161; background: #f2f5fa; color: #4c544f; }
.automatic-card { background: #fff; }
.automatic .helper a { color: #0a3161; }
.auto-answers { border-color: #e1e1db; }
.auto-answers li { border-color: #e1e1db; }
.auto-answers li strong { color: #0a3161; }

.button { border-color: #0b2a55; background: #0b2a55; color: #fff; }
.button:hover { border-color: #0a3161; background: #0a3161; }
.button.primary { background: #0a3161; border-color: #0a3161; color: #fff; }
.button.primary:hover { background: #06234a; }
.button.secondary { border-color: #aeb4ad; background: #fff; color: #272a27; }
.button.secondary:hover { background: #f0f2ee; }
.status.published { background: #e3eaf5; color: #0a3161; }
.status.draft { background: #f6ecd7; color: #76520d; }

.coverage-item, .race-work-item, .list-item, .quality-panel li, .audit-panel li, .briefing > div, .auto-admin-item {
  border-color: #dce0da;
  background: #f8f9f6;
}

.coverage-badge, .coverage-linked, .form-panel h4, .briefing strong, .new-race-form strong { color: #0a3161; }
.coverage-label, .stale-badge { color: #76520d; }
.new-race-form { border-color: #d7dcd5; background: #edf1f8; }
.race-scope.confirmed { background: #e3eaf5; color: #0a3161; }
.race-scope.unconfirmed { background: #f6ecd7; color: #76520d; }
.quality-panel li button { color: #0a3161; }
label { color: #393d39; }

.notice:not(:empty) { border-color: #c3cfe2; background: #f2f5fa; color: #0a3161; }
.notice.error:not(:empty) { color: #9f332c; border-color: #e5b9b3; background: #fbeeea; }
.method-list p, .footer { color: #656963; }
.method-list b, .footer strong { color: #0b2a55; }
.footer { border-color: #d8d8d0; }

@media (max-width: 1080px) {
  .map-layout { grid-template-columns: 1fr; }
  .map-detail, .map-side, .map-canvas-wrap { order: initial; }
  .map-detail-placeholder { min-height: 260px; }
}

@media (max-width: 780px) {
  .brand img { width: 160px; height: 54px; }
  .dashboard-head { margin-top: 18px; padding: 28px 24px; }
}

@media (max-width: 570px) {
  .map-detail-header, .map-detail-placeholder, .map-detail-empty { padding: 20px; }

}
/* Portada animada a todo lo ancho: constelación de EE. UU. (hero.js) y entrada escalonada. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse 900px 520px at 78% 48%, rgba(64, 118, 196, .2), transparent 70%),
    radial-gradient(ellipse 700px 420px at 8% 0%, rgba(255, 255, 255, .07), transparent 70%),
    #071a33;
  border-bottom: 1px solid #2a251c;
}
.hero-canvas { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; pointer-events: none; }
/* Velo lateral: mantiene el titular legible sobre la red. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7, 26, 51, .92) 0%, rgba(7, 26, 51, .7) 34%, rgba(7, 26, 51, 0) 62%),
    linear-gradient(0deg, rgba(7, 26, 51, .85) 0%, rgba(7, 26, 51, 0) 22%);
}

.hero .dashboard-head {
  min-height: min(680px, calc(100vh - 74px));
  margin-top: 0;
  padding: 72px 0 104px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  /* Texto a la izquierda, constelación a la derecha (dibujada en el canvas), proyección abajo. */
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas: "copy art" "card card";
  align-content: center;
  row-gap: 48px;
}
.hero .hero-copy { grid-area: copy; }
.hero h1 { font-size: clamp(40px, 5vw, 70px); line-height: 1.02; letter-spacing: -.055em; max-width: 12ch; margin-bottom: 18px; }
.hero h1 em {
  color: #ffffff;
  background: linear-gradient(100deg, #ffffff 0%, #ffffff 40%, #ffffff 50%, #ffffff 60%, #ffffff 100%) 100% 0 / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero .hero-copy > p:not(.eyebrow) { max-width: 520px; font-size: 17px; line-height: 1.6; color: #d3dbe8; }
.hero .eyebrow { display: flex; align-items: center; letter-spacing: .2em; }
.hero .dot { position: relative; }
.hero .dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  opacity: 0;
}
.hero .hero-meta > span { border-color: rgba(255, 255, 255, .22); background: rgba(7, 26, 51, .45); }

/* Proyección como franja de vidrio oscuro: encabezado a la izquierda y los tres escenarios en fila. */
.hero .projection-card {
  grid-area: card;
  display: grid;
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
  grid-template-areas: "top rows" "intro rows" "foot foot";
  column-gap: 28px;
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 16px;
  background: rgba(12, 36, 72, .62);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  color: #fff;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.hero .projection-card .mini-label, .hero .projection-scope, .hero .projection-card-footer a { color: #ffffff; }
.hero .projection-card h2, .hero .projection-copy strong, .hero .projection-score strong { color: #fff; }
.hero .projection-year { background: #ffffff; color: #071a33; }
.hero .projection-card-intro, .hero .projection-loading { color: #aab6c9; }
.hero .projection-copy small, .hero .projection-score span, .hero .projection-card-footer { color: #8f9db3; }
.hero .projection-row, .hero .projection-card-footer { border-color: rgba(255, 255, 255, .09); }
.hero .projection-place { background: rgba(255, 255, 255, .08); color: #e3e9f2; }
.hero .projection-row:first-child .projection-place { background: #ffffff; color: #071a33; }
.hero .projection-card-top { grid-area: top; }
.hero .projection-card-intro { grid-area: intro; margin-bottom: 0; }
.hero .projection-rows { grid-area: rows; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; align-items: center; }
.hero .projection-row { padding: 6px 18px; border-top: 0; border-left: 1px solid rgba(255, 255, 255, .09); }
.hero .projection-copy strong { font-size: 15px; }
.hero .projection-score strong { font-size: 20px; }
.hero .projection-card-footer { grid-area: foot; margin-top: 14px; }
.hero .projection-loading { grid-column: 1 / -1; padding: 0 18px; }

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  color: #d3dbe8;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  letter-spacing: .02em;
}
.hero-scroll span { display: inline-block; color: #ffffff; }
.hero-scroll:hover, .hero-scroll:focus-visible { color: #fff; }

.hero + .map-section { margin-top: 56px; border-top: 0; padding-top: 0; }

/* Entrada: cada pieza aparece en secuencia mientras la constelación se forma. */
@media (prefers-reduced-motion: no-preference) {
  .site-header { animation: hero-fade .6s ease-out both; }
  .hero .eyebrow { animation: hero-rise .8s cubic-bezier(.2, .7, .2, 1) .25s both; }
  .hero h1 { animation: hero-rise .9s cubic-bezier(.2, .7, .2, 1) .4s both; }
  .hero h1 em { animation: hero-shine 2.2s ease-in-out 1.5s both; }
  .hero .hero-copy > p:not(.eyebrow) { animation: hero-rise .8s cubic-bezier(.2, .7, .2, 1) .6s both; }
  .hero .hero-meta { animation: hero-rise .8s cubic-bezier(.2, .7, .2, 1) .75s both; }
  .hero .projection-card { animation: hero-card 1s cubic-bezier(.2, .7, .2, 1) .9s both; }
  .hero-scroll { animation: hero-fade .8s ease-out 1.8s both; }
  .hero-scroll span { animation: hero-nudge 2s ease-in-out 2.6s infinite; }
  .hero .dot::after { animation: hero-pulse 2.4s ease-out 1.2s infinite; }
}

@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
@keyframes hero-card {
  from { opacity: 0; transform: translateY(28px) scale(.97); }
  to { opacity: 1; transform: none; }
}
@keyframes hero-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes hero-nudge { 0%, 100% { transform: none; } 50% { transform: translateY(4px); } }
@keyframes hero-pulse {
  0% { opacity: .8; transform: scale(.6); }
  100% { opacity: 0; transform: scale(2.2); }
}

@media (max-width: 1000px) {
  .hero .projection-card { grid-template-columns: 1fr; grid-template-areas: "top" "intro" "rows" "foot"; }
  .hero .projection-rows { margin-top: 12px; }
  .hero .projection-row:first-child { border-left: 0; padding-left: 0; }
}

@media (max-width: 780px) {
  /* El hueco "art" reserva el alto donde el canvas dibuja el mapa, entre el texto y la proyección. */
  .hero .dashboard-head {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "art" "card";
    grid-template-rows: auto 230px auto;
    row-gap: 0;
    min-height: 0;
    padding: 40px 0 76px;
  }
  .hero h1 { max-width: none; }
  .hero .projection-rows { grid-template-columns: 1fr; }
  .hero .projection-row, .hero .projection-row:first-child { padding: 8px 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .09); }
  .hero::after {
    background:
      linear-gradient(180deg, rgba(7, 26, 51, .85) 0%, rgba(7, 26, 51, .4) 38%, rgba(7, 26, 51, 0) 50%),
      linear-gradient(0deg, rgba(7, 26, 51, .7) 0%, rgba(7, 26, 51, 0) 15%);
  }
  .hero + .map-section { margin-top: 36px; }
}

/* Encabezado oscuro y fijo: se une a la portada y sigue visible al bajar. */
html { scroll-padding-top: 88px; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 26, 51, .97);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  box-shadow: none;
}
nav a { color: #d3dbe8; }
nav a:hover, nav a:focus-visible { color: #ffffff; }
nav .nav-admin { background: #ffffff; border-color: #ffffff; color: #071a33; }
nav .nav-admin:hover, nav .nav-admin:focus-visible { background: #ffffff; border-color: #ffffff; color: #071a33; }
.site-header :focus-visible { outline-color: #ffffff; }

/* Emblema del caballo como marca de agua detrás del titular. Orden de capas:
   canvas (-3) < velo de legibilidad (-2) < emblema (-1) < contenido. */
.hero-canvas { z-index: -3; }
.hero::after { z-index: -2; }
.hero::before {
  content: "";
  position: absolute;
  top: 50%;
  left: max(-180px, calc((100% - 1260px) / 2 - 220px));
  z-index: -1;
  width: 640px;
  aspect-ratio: 1;
  transform: translateY(-54%);
  background: url("odysseus_emblem.svg") center / contain no-repeat;
  opacity: .07;
  pointer-events: none;
}

/* "Otro partido / empate" en morado: distinto de los partidos y del gris de "sin datos". */

.number.other { color: var(--other); }
.track.other::-webkit-progress-value { background: var(--other); }
.track.other::-moz-progress-bar { background: var(--other); }
/* Las etiquetas de partido heredaban colores claros del tema oscuro anterior y casi no se leían. */

@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: hero-emblem 2.4s ease-out .3s both; }
}
@keyframes hero-emblem {
  from { opacity: 0; transform: translateY(-50%) scale(.94); }
  to { opacity: .07; transform: translateY(-54%); }
}

@media (max-width: 780px) {
  html { scroll-padding-top: 0; }
  .site-header { position: static; }
  .hero::before { top: 0; left: -140px; width: 420px; transform: none; }
  @keyframes hero-emblem { from { opacity: 0; } to { opacity: .07; } }
}

/* Tipografía editorial: títulos con serif clásica, en eco del logotipo ODYSSEUS.
   Sólo fuentes del sistema (la política de seguridad no permite fuentes externas). */
:root { --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; }
h1, h2, .map-detail-header h3, .map-detail-placeholder h3,
.map-ranking-header h3, .map-ranking-empty h3, .score-explorer-head h3, .stat-card strong {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -.015em;
}
.hero h1 { letter-spacing: -.025em; line-height: 1.04; }
.hero h1 em { font-style: italic; font-weight: 500; }
.projection-card h2 { letter-spacing: -.01em; }
.hero h1 { max-width: 16ch; font-size: clamp(40px, 4.7vw, 66px); }

/* Diferencias entre candidaturas en tinta negra, como el resto del texto editorial. */
.score-margin, .map-detail .score-margin, .score-table .score-difference { color: #0a3161; }

/* Colores de la bandera: azul marino como base, blanco y rojo como detalle.
   El rojo nunca va solo ni como color principal, para no sugerir un partido;
   los colores de partido de las gráficas no cambian. */
:root { --flag-blue: #0a3161; --flag-red: #b31942; }
/* Franja inferior blanco y rojo, en el borde para que el velo de la portada no la cubra. */
.hero { border-bottom: 5px solid var(--flag-red); border-image: linear-gradient(180deg, rgba(255, 255, 255, .9) 0 40%, var(--flag-red) 40% 100%) 1; }
.hero .dot, .hero .dot::after { background: #e0314f; border-color: #e0314f; }
.hero .dot::after { background: transparent; }
.hero h1 em {
  text-decoration: underline;
  text-decoration-color: var(--flag-red);
  text-decoration-thickness: 3px;
  text-underline-offset: 12px;
}
.kicker, .eyebrow { color: var(--flag-red); }
.hero .eyebrow { color: #ffffff; }
h2, .score-explorer-head h3, .map-detail-placeholder h3 { color: var(--flag-blue); }
nav .nav-admin:hover, nav .nav-admin:focus-visible { background: var(--flag-red); border-color: var(--flag-red); color: #fff; }
.button:hover, .button.primary:hover, .map-reset:hover { background: var(--flag-red); border-color: var(--flag-red); color: #fff; }

/* Ranking del mapa: tarjeta por contienda con barra de enfrentamiento, nivel de competencia
   y porcentajes animados. Sin estado elegido muestra las contiendas más cerradas del país. */
.rank-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rank-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #e3e9f2;
  font-size: 11px;
  font-weight: 700;
}
.rank-chip.democrat::before, .rank-chip.republican::before, .rank-chip.other::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--chip-dot);
}
.rank-chip.democrat { --chip-dot: #7fb2e8; }
.rank-chip.republican { --chip-dot: #ef8a7e; }
.rank-chip.other { --chip-dot: #b9a3ea; }

.rank-list { display: grid; gap: 12px; padding: 14px; }
.rank-race {
  --party: #0a3161;
  position: relative;
  overflow: hidden;
  padding: 16px 16px 12px 19px;
  border: 1px solid #dfe3ea;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(10, 49, 97, .06);
}
.rank-race::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--party); }
.rank-race.democrat { --party: #276ca7; }
.rank-race.republican { --party: #c6473f; }
.rank-race.other { --party: var(--other); }
.rank-race.tie { --party: #8f9db3; }

.rank-race-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.rank-race-title h4 { margin: 0 0 6px; color: #0a3161; font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.1; }
.rank-margin { text-align: right; }
.rank-margin strong { display: block; color: #0a3161; font-family: var(--serif); font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; }
.rank-margin small { color: #5c687d; font-size: 10px; }

/* Nivel de competencia: escala de azul marino, nunca colores de partido. */
.rank-tier { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.rank-tier.tie { border: 1px solid #0a3161; color: #0a3161; }
.rank-tier.close { background: #0a3161; color: #fff; }
.rank-tier.lean { background: #dfe7f3; color: #0a3161; }
.rank-tier.safe { background: #eef1f6; color: #5b6780; }

.rank-people { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.rank-person {
  --ring: #8f9db3;
  --tint: #f1f4f8;
  display: grid;
  grid-template-columns: 28px 50px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
}
.rank-person.democrat { --ring: #276ca7; --tint: #eaf2fb; }
.rank-person.republican { --ring: #c6473f; --tint: #fbeceb; }
.rank-person.other { --ring: var(--other); --tint: #f1ecfb; }
.rank-person.leader { background: linear-gradient(90deg, var(--tint), rgba(255, 255, 255, 0) 90%); }
.rank-place { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #eef1f6; color: #46536b; font-size: 11px; font-weight: 850; }
.rank-person.leader .rank-place { background: #0a3161; color: #fff; }
.rank-person-copy { display: grid; min-width: 0; }
.rank-name { overflow: hidden; color: #0b2a55; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.rank-party { color: var(--ring); font-size: 11px; font-weight: 650; }
.rank-pct { color: #0b2a55; font-family: var(--serif); font-size: 25px; font-variant-numeric: tabular-nums; }
.rank-person:not(.leader) .rank-pct { color: #5b6780; font-size: 21px; }

.rank-source { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #edf0f5; color: #5c687d; font-size: 10.5px; line-height: 1.4; }
.rank-source a { color: #0a3161; font-weight: 800; text-decoration: none; white-space: nowrap; }
.rank-source a:hover, .rank-source a:focus-visible { color: var(--flag-red); }

.rank-national { display: grid; gap: 10px; margin: 0; padding: 14px; list-style: none; }
.rank-national-item {
  display: grid;
  gap: 9px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #dfe3ea;
  border-radius: 12px;
  background: #fff;
  text-align: left;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.rank-national-item:hover, .rank-national-item:focus-visible { transform: translateY(-2px); border-color: #0a3161; box-shadow: 0 12px 24px rgba(10, 49, 97, .1); }
.rank-national-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rank-national-race { color: #0a3161; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.rank-national-item .versus { padding-top: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .rank-enter { animation: rank-in .6s cubic-bezier(.2, .7, .2, 1) var(--delay, 0ms) both; }
}
@keyframes rank-in { from { opacity: 0; transform: translateY(14px); } }

@media (max-width: 570px) {
  .rank-person { grid-template-columns: 26px 50px minmax(0, 1fr) auto; gap: 8px; padding: 7px 6px; }
  .rank-pct { font-size: 21px; }
}

/* Panorama nacional del panel izquierdo (sin estado elegido). */
.nation-body { display: grid; gap: 12px; padding: 14px; }
.nation-block { padding: 16px; border: 1px solid #dfe3ea; border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(10, 49, 97, .05); }
.nation-block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.nation-block-head h4 { margin: 0; color: #0a3161; font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; }
.nation-block-head small { color: #5c687d; font-size: 12px; line-height: 1.5; }

/* Qué partido va adelante: una barra por cargo, con el número de contiendas dentro de cada color. */
.nation-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -2px 0 14px; }
.nation-key-item { display: inline-flex; align-items: center; gap: 6px; color: #3d4a5e; font-size: 13px; font-weight: 650; }
.nation-key-item i { width: 10px; height: 10px; border-radius: 3px; background: var(--seg); }
.nation-key-item.democrat, .nation-bar-seg.democrat { --seg: #276ca7; }
.nation-key-item.republican, .nation-bar-seg.republican { --seg: #c6473f; }
.nation-key-item.other, .nation-bar-seg.other { --seg: var(--other); }
.nation-bars { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.nation-bar-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.nation-bar-label { color: #0a3161; font-size: 15px; font-weight: 700; line-height: 1.4; }
.nation-bar-total { color: #5c687d; font-size: 12px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.nation-bar { display: flex; gap: 3px; height: 30px; }
.nation-bar-seg {
  display: grid;
  place-items: center;
  flex: 1 1 0;
  min-width: 30px;
  border-radius: 6px;
  background: var(--seg);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference) {
  .nation-bar-seg { animation: bar-grow .8s cubic-bezier(.2, .7, .2, 1) var(--delay, 0ms) both; }
}

.nation-tiers { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; }
/* Si la tarjeta es angosta, la dona va arriba y la leyenda debajo (sin partir los rótulos). */
.nation-block { container-type: inline-size; }
@container (max-width: 360px) {
  .nation-tiers { grid-template-columns: 1fr; justify-items: center; }
  .nation-tier-legend { width: 100%; }
}
.nation-tier-legend { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.nation-tier { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 9px; color: #0a3161; }
.nation-tier-dot { width: 12px; height: 12px; border-radius: 50%; background: #c3cfe2; }
.nation-tier.close .nation-tier-dot { background: #0a3161; }
.nation-tier.lean .nation-tier-dot { background: #6c8fc4; }
.nation-tier-copy { display: grid; min-width: 0; }
.nation-tier-copy span { font-size: 14px; font-weight: 700; line-height: 1.35; }
.nation-tier-copy small { color: #5c687d; font-size: 12px; line-height: 1.4; }
.nation-tier strong { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.nation-tiers .donut-center small { font-size: 12px; line-height: 1.3; }

.nation-widest { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nation-widest-item {
  --ring: #8f9db3;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #e4e8ef;
  border-radius: 10px;
  background: #f8fafc;
  text-align: left;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.nation-widest-item.democrat { --ring: #276ca7; }
.nation-widest-item.republican { --ring: #c6473f; }
.nation-widest-item.other { --ring: var(--other); }
.nation-widest-item:hover, .nation-widest-item:focus-visible { transform: translateY(-2px); border-color: #0a3161; box-shadow: 0 10px 20px rgba(10, 49, 97, .08); }
.nation-widest-copy { display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.nation-widest-copy small { color: #5c687d; font-size: 12px; font-weight: 600; line-height: 1.35; }
.nation-widest-copy strong { color: #0b2a55; font-size: 16px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.nation-widest-pct { color: var(--ring); font-size: 12px; font-weight: 600; line-height: 1.4; }
.nation-widest-margin { display: grid; justify-items: end; color: #0a3161; font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1; }
.nation-widest-margin small { margin-top: 3px; color: #5c687d; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
@container (max-width: 260px) {
  .nation-widest-item { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; padding: 10px; }
  .nation-widest-item .photo-ring.sm { --size: 44px; }
}

/* ===== Sección del mapa: mapa amplio + ranking arriba, gráficas a todo lo ancho abajo ===== */
.map-section { padding-bottom: 56px; }
.map-intro { max-width: 980px; margin-bottom: 24px; font-size: 14px; line-height: 1.65; }
.map-stage { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(340px, 1fr); gap: 24px; align-items: start; }

.map-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #0b2a55;
  border-radius: 16px;
  background: radial-gradient(ellipse 760px 460px at 58% 42%, #183d72, #0a2147 72%);
  box-shadow: 0 24px 50px rgba(10, 33, 71, .22);
}
.map-card-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 18px 20px 0; }
.map-card .tab { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: #d3dbe8; }
.map-card .tab:hover, .map-card .tab.active { border-color: #fff; background: #fff; color: #0a3161; }
.map-card .map-reset { padding: 8px 15px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; background: transparent; color: #fff; font-size: 12px; font-weight: 750; }
.map-card .map-reset:hover, .map-card .map-reset:focus-visible { border-color: #fff; background: #fff; color: #0a3161; }
.map-card .map-canvas-wrap { position: relative; padding: 10px 16px 6px; border: 0; border-radius: 0; background: none; box-shadow: none; }
#us-map { display: block; width: 100%; height: auto; min-height: 0; aspect-ratio: 5 / 3; }
.map-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 12px 20px 18px; border-top: 1px solid rgba(255, 255, 255, .08); }
.map-card .map-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; }
.map-card .legend-item { display: inline-flex; align-items: center; gap: 7px; color: #d3dbe8; font-size: 11.5px; }
.map-card .legend-swatch { width: 12px; height: 12px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 3px; background: #3d5070; }
.map-card .legend-swatch.coverage { background: #c2c7cf; }
.map-card .legend-swatch.democrat { background: #6c9fd1; }
.map-card .legend-swatch.republican { background: #d88479; }
.map-card .legend-swatch.other { background: #a58bd6; }
.map-card .map-instructions { margin: 0; color: #aab6c9; font-size: 11px; }

/* Estados: trazo fino constante al acercar, transiciones suaves de color y atenuado. */
.map-state {
  stroke: #071a33;
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
  outline: none;
  cursor: pointer;
  transition: fill .45s ease, opacity .45s ease, stroke .2s ease, filter .2s ease;
}
.map-state:hover { stroke: #fff; stroke-width: 1.8; filter: brightness(1.12); }
.map-state:focus-visible { stroke: #fff; stroke-width: 2.6; }
.map-state.selected { stroke: #fff; stroke-width: 2.6; filter: drop-shadow(0 0 10px rgba(255, 255, 255, .5)); }
#us-map.is-focused .map-state:not(.selected) { opacity: .38; }
#us-map.is-focused .map-state:not(.selected):hover { opacity: .8; }
.map-state-code {
  font-size: calc(13px * var(--map-scale, 1));
  stroke-width: calc(1.8px * var(--map-scale, 1));
  pointer-events: none;
  transition: opacity .45s ease;
}
#us-map.is-focused .map-state-code:not(.selected) { opacity: .3; }

.map-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  display: grid;
  gap: 6px;
  min-width: 220px;
  max-width: 290px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 18px 40px rgba(4, 16, 36, .35);
  color: #0b2a55;
  font-size: 12px;
  pointer-events: none;
  transform: translate(var(--x, 0), var(--y, 0));
}
.map-tooltip-title { color: #0a3161; font-family: var(--serif); font-size: 17px; font-weight: 600; }
.map-tooltip-row { display: grid; gap: 1px; padding-left: 9px; border-left: 3px solid #8f9db3; }
.map-tooltip-row.democrat { border-left-color: #276ca7; }
.map-tooltip-row.republican { border-left-color: #c6473f; }
.map-tooltip-row.other { border-left-color: var(--other); }
.map-tooltip-office { color: #5c687d; font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.map-tooltip-empty { color: #5c687d; font-size: 11px; }
.map-tooltip-hint { margin-top: 2px; color: #0a3161; font-size: 10.5px; font-weight: 750; }

.rank-jump { display: inline-block; margin-top: 12px; border-bottom: 1px solid rgba(255, 255, 255, .4); color: #fff; font-size: 12px; font-weight: 800; text-decoration: none; }
.rank-jump:hover, .rank-jump:focus-visible { border-bottom-color: #fff; }

/* Gráficas y panorama a todo lo ancho bajo el mapa. */
.map-detail {
  order: initial;
  min-height: 0;
  margin-top: 28px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #dfe3ea;
  border-radius: 16px;
  background: #f7f9fc;
  box-shadow: 0 18px 40px rgba(10, 33, 71, .08);
}
.map-detail .map-detail-header { padding: 26px 30px 24px; }
.map-detail .map-detail-header h3 { font-size: 32px; }
.map-detail .map-detail-header p { font-size: 13px; }
.map-detail-charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr)); align-items: start; gap: 20px; padding: 26px 30px 30px; }
.nation-body { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 20px; padding: 26px 30px 30px; }
.nation-block { padding: 20px; }
.map-detail-empty { padding: 30px; }

/* Tarjeta de contienda: enfrentamiento con barras de 0 a 100%. */
.race-card {
  --party: #0a3161;
  min-width: 0;
  padding: 22px 22px 16px;
  border: 1px solid #dfe3ea;
  border-top: 4px solid var(--party);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(10, 49, 97, .06);
}
.race-card.democrat { --party: #276ca7; }
.race-card.republican { --party: #c6473f; }
.race-card.other { --party: var(--other); }
.race-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.race-card-title h3 { margin: 4px 0 8px; color: #0a3161; font-family: var(--serif); font-size: 25px; font-weight: 600; line-height: 1.1; }
.duel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.duel-person {
  --ring: #8f9db3;
  --tint: #f4f6fa;
  display: grid;
  justify-items: center;
  gap: 3px;
  min-width: 0;
  padding: 18px 10px 14px;
  border-radius: 14px;
  background: var(--tint);
  text-align: center;
}
.duel-person.democrat { --ring: #276ca7; --tint: #eef4fb; }
.duel-person.republican { --ring: #c6473f; --tint: #fcf0ee; }
.duel-person.other { --ring: var(--other); --tint: #f4f0fc; }
.duel-person .photo-ring { margin-bottom: 8px; }
.duel-pct { color: #0b2a55; font-family: var(--serif); font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.duel-person:not(.leader) .duel-pct { color: #5b6780; font-size: 26px; }
.duel-name { max-width: 100%; overflow: hidden; color: #0b2a55; font-size: 14px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.duel-party { color: var(--ring); font-size: 11px; font-weight: 650; }
.duel-vs { color: #5c687d; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.race-verdict { margin: 18px 0 0; padding: 11px 13px; border-radius: 10px; background: #f4f6fa; color: #46536b; font-size: 12.5px; line-height: 1.5; }
.race-verdict strong { color: #0b2a55; }
.race-card .score-race-meta { margin-top: 16px; }

.trend { margin: 16px 0 0; padding: 12px 14px; border: 1px solid #edf0f5; border-radius: 10px; }
.trend figcaption { margin-bottom: 6px; color: #5c687d; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.trend-chart { display: block; width: 100%; height: auto; }
.trend-grid { stroke: #e6eaf1; stroke-width: 1; }
.trend-axis { fill: #5c687d; font-size: 9px; }
.trend-axis.end { text-anchor: end; }
.trend-line { fill: none; stroke: #8f9db3; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.trend-line.democrat, .trend-dot.democrat { stroke: #276ca7; }
.trend-line.republican, .trend-dot.republican { stroke: #c6473f; }
.trend-line.other, .trend-dot.other { stroke: var(--other); }
.trend-dot { fill: #fff; stroke-width: 2; }

@media (prefers-reduced-motion: no-preference) {
  /* Entrada del mapa: barrido de oeste a este la primera vez que se ve. */
  #us-map:not(.is-visible) .map-state, #us-map:not(.is-visible) .map-state-code { opacity: 0; }
  #us-map.is-visible:not(.settled) .map-state { transform-box: fill-box; transform-origin: center; animation: map-state-in .7s cubic-bezier(.2, .7, .2, 1) var(--i, 0ms) both; }
  #us-map.is-visible:not(.settled) .map-state-code { animation: hero-fade .6s ease-out .9s both; }
  .trend-line { animation: trend-draw 1.3s ease-out calc(var(--delay, 0ms) + 400ms) both; }
  .map-detail-header, .map-ranking-header { animation: rank-in .5s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes map-state-in { from { opacity: 0; transform: translateY(10px) scale(.92); } }
@keyframes trend-draw { from { stroke-dashoffset: 1; } }

@media (max-width: 1080px) {
  .map-stage { grid-template-columns: 1fr; }
  .nation-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .map-card-bar, .map-card-foot { padding-inline: 14px; }
  .map-card .map-canvas-wrap { padding-inline: 6px; }
  .map-detail .map-detail-header { padding: 20px; }
  .map-detail .map-detail-header h3 { font-size: 26px; }
  .map-detail-charts, .nation-body { grid-template-columns: 1fr; padding: 16px; gap: 14px; }
  .race-card { padding: 18px 16px 14px; }
  .duel { gap: 6px; }
  .duel-person { padding-inline: 6px; }
  .map-tooltip { display: none; }
}
/* En escritorio el mapa acompaña al ranking al desplazarse, sin dejar huecos. */
@media (min-width: 1081px) {
  .map-card { position: sticky; top: 96px; }
}

/* Etapa 1: cuenta regresiva y compartir. */
.hero .hero-meta > .countdown { display: inline-flex; align-items: center; white-space: pre; border-color: rgba(224, 49, 79, .55); background: rgba(179, 25, 66, .16); color: #fff; }
.countdown::before { content: ""; margin-right: 8px; width: 7px; height: 7px; border-radius: 50%; background: #e0314f; }
.countdown b { color: #fff; }
.rank-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.rank-actions .rank-jump { margin-top: 0; }
.rank-share { padding: 6px 13px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; background: transparent; color: #fff; font-size: 12px; font-weight: 750; }
.rank-share:hover, .rank-share:focus-visible { border-color: #fff; background: #fff; color: #0a3161; }
@media (prefers-reduced-motion: no-preference) {
  .countdown::before { animation: hero-pulse-dot 2s ease-in-out infinite; }
}
@keyframes hero-pulse-dot { 50% { opacity: .35; } }

/* ===== Etapa 2 ===== */

/* Mapa por margen: claro = muy cerrada, medio = competitiva, intenso = ventaja amplia. */
.map-state.democrat.tier-close, .legend-swatch.democrat.tier-close { fill: #a9c7e8; background: #a9c7e8; }
.map-state.democrat.tier-lean, .legend-swatch.democrat.tier-lean { fill: #6c9fd1; background: #6c9fd1; }
.map-state.democrat.tier-safe, .legend-swatch.democrat.tier-safe { fill: #3b78bd; background: #3b78bd; }
.map-state.republican.tier-close, .legend-swatch.republican.tier-close { fill: #efb7ae; background: #efb7ae; }
.map-state.republican.tier-lean, .legend-swatch.republican.tier-lean { fill: #d88479; background: #d88479; }
.map-state.republican.tier-safe, .legend-swatch.republican.tier-safe { fill: #bd4f44; background: #bd4f44; }
.map-card .legend-ramp { display: inline-flex; gap: 2px; }
.map-card .legend-ramp .legend-swatch { width: 11px; border-radius: 2px; }
.map-card .legend-note { color: #8f9db3; font-size: 11px; font-style: italic; }

/* Buscador dentro de la barra del mapa. */
.map-card-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.map-finder input {
  width: 200px;
  padding: 8px 14px 8px 34px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23d3dbe8' stroke-width='2'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath d='M9.5 9.5 13 13'/%3E%3C/svg%3E") 13px center no-repeat,
    rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 12.5px;
}
.map-finder input::placeholder { color: #aab6c9; }
.map-finder input:focus { border-color: #fff; background-color: rgba(255, 255, 255, .14); outline: none; }

/* Novedades. */
.latest-section { padding-block: 8px 48px; }
.latest-intro { max-width: 860px; margin: 0 0 22px; color: #606560; font-size: 14px; line-height: 1.6; }
.latest-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.latest-card {
  --party: #0a3161;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 16px;
  padding: 18px 18px 14px;
  border: 1px solid #dfe3ea;
  border-top: 4px solid var(--party);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(10, 49, 97, .06);
}
.latest-card.democrat { --party: #276ca7; }
.latest-card.republican { --party: #c6473f; }
.latest-card.tie { --party: #8f9db3; }
.latest-date { display: grid; align-self: start; align-content: start; justify-items: center; padding: 10px 0 9px; border-radius: 10px; background: #0a3161; color: #fff; }
.latest-date strong { font-family: var(--serif); font-size: 26px; line-height: 1; }
.latest-date span { margin-top: 3px; color: #c3cfe2; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.latest-body { display: grid; gap: 9px; min-width: 0; }
.latest-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.latest-scope { color: #0a3161; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.latest-body h3 { margin: 0; color: #0a3161; font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.1; }
.latest-change { margin: 0; padding: 7px 10px; border-radius: 8px; background: #f4f6fa; color: #46536b; font-size: 11.5px; line-height: 1.4; }
.latest-change.up { background: #e3eaf5; color: #0a3161; font-weight: 700; }
.latest-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 9px; border-top: 1px solid #edf0f5; color: #5c687d; font-size: 11px; }
.latest-open { flex: 0 0 auto; padding: 0; border: 0; background: none; color: #0a3161; font-size: 12px; font-weight: 800; }
.latest-open:hover, .latest-open:focus-visible { color: var(--flag-red); }

/* Las tarjetas esperan en pausa hasta que la sección aparece en pantalla. */
.latest-grid.is-waiting .rank-enter,
.latest-grid.is-waiting .photo-ring-arc,
.latest-grid.is-waiting .photo-ring .ranking-avatar,
.latest-grid.is-waiting .photo-ring-badge { animation-play-state: paused; }

@media (max-width: 1080px) {
  .latest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .latest-grid { grid-template-columns: 1fr; }
  .map-card-tools, .map-finder, .map-finder input { width: 100%; }
}

/* ===== Gráficas circulares ===== */

/* Anillo con retrato: el arco recorre de 0 a 100% el porcentaje de la candidatura. */
.photo-ring {
  --ring: #8f9db3;
  --size: 58px;
  position: relative;
  display: inline-grid;
  flex: 0 0 var(--size);
  place-items: center;
  width: var(--size);
  height: var(--size);
}
.photo-ring.sm { --size: 50px; }
.photo-ring.md { --size: 62px; }
.photo-ring.lg { --size: 116px; }
.photo-ring.democrat { --ring: #276ca7; }
.photo-ring.republican { --ring: #c6473f; }
.photo-ring.other { --ring: var(--other); }
.photo-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.photo-ring-track, .photo-ring-arc { fill: none; stroke-width: 8; }
.photo-ring-track { stroke: #e6eaf1; }
.photo-ring-arc { stroke: var(--ring); stroke-linecap: round; }
.photo-ring .ranking-avatar,
.rank-person .photo-ring .ranking-avatar,
.nation-widest-item .photo-ring .ranking-avatar {
  width: calc(100% - 15px);
  height: calc(100% - 15px);
  font-size: calc(var(--size) * .24);
  box-shadow: 0 0 0 2px #fff;
}
.photo-ring.lg .ranking-avatar { width: calc(100% - 24px); height: calc(100% - 24px); }
.photo-ring-badge {
  position: absolute;
  bottom: -9px;
  left: 50%;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--ring);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px #fff;
  transform: translateX(-50%);
}

/* Dona de conteo. */
.donut { position: relative; width: 132px; max-width: 100%; aspect-ratio: 1; }
.donut-svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.donut-track, .donut-seg { fill: none; stroke-width: 15; }
.donut-track { stroke: #eef1f6; }
.donut-seg.democrat { stroke: #276ca7; }
.donut-seg.republican { stroke: #c6473f; }
.donut-seg.other { stroke: var(--other); }
.donut-seg.close { stroke: #0a3161; }
.donut-seg.lean { stroke: #6c8fc4; }
.donut-seg.safe { stroke: #c3cfe2; }
.donut-center { position: absolute; inset: 0; display: grid; place-content: center; gap: 2px; text-align: center; }
.donut-center strong { color: #0a3161; font-family: var(--serif); font-size: 32px; line-height: 1; font-variant-numeric: tabular-nums; }
.donut-center small { color: #5c687d; font-size: 10.5px; font-weight: 700; }

@media (prefers-reduced-motion: no-preference) {
  .photo-ring-arc { animation: ring-fill 1.1s cubic-bezier(.2, .7, .2, 1) calc(var(--delay, 0ms) + 250ms) both; }
  .photo-ring .ranking-avatar { animation: ring-pop .55s cubic-bezier(.2, .7, .2, 1.3) calc(var(--delay, 0ms) + 100ms) both; }
  .photo-ring-badge { animation: hero-fade .5s ease-out calc(var(--delay, 0ms) + 700ms) both; }
  .donut-seg { animation: ring-fill .9s cubic-bezier(.2, .7, .2, 1) var(--delay, 0ms) both; }
}
@keyframes ring-fill { from { stroke-dasharray: 0 100; } }
@keyframes ring-pop { from { opacity: 0; transform: scale(.6); } }

/* Enfrentamiento compacto: dos anillos y la diferencia en medio. */
.versus { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.versus-side { display: flex; align-items: center; gap: 10px; min-width: 0; padding-bottom: 6px; }
.versus-side.end { flex-direction: row-reverse; text-align: right; }
.versus-name { overflow: hidden; font-size: 13.5px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.versus-side.democrat .versus-name { color: #1d5c91; }
.versus-side.republican .versus-name { color: #a73831; }
.versus-side.other .versus-name { color: #5b3f99; }
.versus-mid { display: grid; justify-items: center; min-width: 42px; }
.versus-mid strong { color: #0a3161; font-family: var(--serif); font-size: 20px; line-height: 1; }
.versus-mid small, .versus-vs { color: #5c687d; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 700px) {
  .duel-person .photo-ring.lg { --size: 88px; }
  .nation-tiers { grid-template-columns: 1fr; justify-items: center; }
  .nation-tier-legend { width: 100%; }
}
/* En Novedades la tarjeta es angosta: el apellido va debajo de su anillo. */
.latest-card .versus { gap: 4px; }
.latest-card .versus-side, .latest-card .versus-side.end { flex-direction: column; gap: 12px; padding-bottom: 0; text-align: center; }
.latest-card .versus-name { max-width: 100%; }@media (max-width: 570px) {
  .versus-side, .versus-side.end { flex-direction: column; gap: 12px; padding-bottom: 0; text-align: center; }
  .versus-name { max-width: 100%; }
}
/* ===== Sección del mapa: banda animada, cifras vivas, mapa amplio y ranking a un lado ===== */
.map-section.map-band {
  position: relative;
  /* clip (no hidden) para no romper el mapa fijo al desplazarse. */
  overflow: clip;
  isolation: isolate;
  margin-top: 0;
  padding: 52px 0 84px;
  border-top: 0;
  border-bottom: 0;
  background: linear-gradient(135deg, #eaf2fd 0%, #f7faff 42%, #edf4fd 100%);
}
/* Retícula cartográfica: capa vectorial independiente del contenido. */
.map-backdrop {
  position: absolute;
  inset: -44px 0 auto;
  z-index: -2;
  height: clamp(800px, 72vw, 1250px);
  pointer-events: none;
  will-change: transform;
}
.map-band-inner { position: relative; }
/* El velo claro mantiene la lectura del encabezado entre las franjas. */
.map-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 34% 7%, rgba(247, 250, 255, .94), transparent 50%),
    linear-gradient(180deg, transparent 520px, rgba(247, 250, 255, .72) 1150px);
  pointer-events: none;
}
.hero + .map-section.map-band { margin-top: 0; padding-top: 52px; }
.map-band-inner { width: min(1480px, calc(100% - 52px)); margin-inline: auto; }
.map-band .map-footnote {
  width: fit-content;
  max-width: 100%;
  margin-top: 16px;
  padding: 10px 14px;
  border: 1px solid #dfe3ea;
  border-radius: 10px;
  background: #fff;
  color: #0b2a55;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.map-band.map-motion-paused .map-backdrop,
.map-band.map-motion-paused .map-backdrop * { animation-play-state: paused !important; }

/* Encabezado: poco texto, cifras que se mueven y pasos con íconos. */
.map-band-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px 48px;
  align-items: end;
  margin-bottom: 28px;
}
.map-band-head .kicker { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .18em; }
.live-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--flag-red); }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--flag-red); opacity: 0; }
.map-band-head h2 { margin: 8px 0 10px; font-size: clamp(32px, 2.9vw, 46px); line-height: 1.05; }
.map-band .map-intro { max-width: 640px; margin: 0; color: #24324a; font-size: 18px; font-weight: 600; line-height: 1.5; }
.map-band .map-intro span { color: #5c687d; font-size: 15px; font-weight: 500; }

.map-steps { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.map-steps li {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 7px;
  border: 1px solid #d3dcea;
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  color: #0a3161;
  font-size: 14px;
  font-weight: 750;
}
.map-steps li + li::before { content: ""; position: absolute; top: 50%; left: -12px; width: 12px; height: 2px; background: #c3cfe2; }
.map-steps svg {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 50%;
  background: #0a3161;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.map-stats { display: grid; grid-template-columns: repeat(4, auto); gap: 12px; }
@media (max-width: 1600px) { .map-stats { grid-template-columns: repeat(2, auto); } }
.map-stat {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px 12px;
  min-width: 0;
  overflow: hidden;
  padding: 14px 16px;
  border: 1px solid #d9e1ec;
  border-radius: 18px;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 14px 30px rgba(10, 49, 97, .08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.map-stat::after { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: #0a3161; }
.map-stat.hot::after { background: var(--flag-red); }
.map-stat:hover { transform: translateY(-3px); box-shadow: 0 20px 36px rgba(10, 49, 97, .13); }
.map-stat svg {
  width: 36px;
  height: 36px;
  grid-row: span 2;
  padding: 8px;
  border-radius: 11px;
  background: #e6edf7;
  fill: none;
  stroke: #0a3161;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.map-stat.hot svg { background: #fbe8ed; stroke: var(--flag-red); }
.map-stat strong { align-self: end; color: #0a3161; font-family: var(--serif); font-size: 32px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.map-stat.hot strong { color: var(--flag-red); }
.map-stat span { align-self: start; color: #5b6780; font-size: 12px; white-space: nowrap; font-weight: 700; line-height: 1.3; }

@media (prefers-reduced-motion: no-preference) {
  .live-dot::after { animation: live-pulse 1.8s ease-out infinite; }
  /* Los pasos se iluminan al aparecer en pantalla. */
  .map-steps li.map-revealed svg { animation: step-icon 7.5s ease-in-out 2; }
  .map-steps li:nth-child(2).map-revealed svg { animation-delay: 2.5s; }
  .map-steps li:nth-child(3).map-revealed svg { animation-delay: 5s; }
  .map-stat.bump { animation: stat-bump .7s cubic-bezier(.2, .7, .2, 1); }
}
@keyframes live-pulse { 0% { opacity: .55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(3.2); } }
@keyframes step-icon { 0%, 30% { background-color: var(--flag-red); } 36%, 100% { background-color: #0a3161; } }
@keyframes stat-bump { 40% { transform: translateY(-5px); box-shadow: 0 22px 38px rgba(10, 49, 97, .16); } }

/* La entrada se activa por scroll; sin JavaScript el contenido queda visible. */
@media (prefers-reduced-motion: no-preference) {
  .map-band.motion-ready [data-map-reveal] {
    opacity: 0;
    translate: 0 24px;
    transition: opacity .7s ease, translate .85s cubic-bezier(.16, 1, .3, 1);
    transition-delay: var(--map-reveal-delay, 0ms);
  }
  .map-band.motion-ready [data-map-reveal].map-revealed {
    opacity: 1;
    translate: none;
  }
  .map-band.motion-ready .map-ranking-header,
  .map-band.motion-ready .map-detail-header,
  .map-band.motion-ready .rank-enter { animation: none; }
  .map-band.motion-ready [data-map-reveal]:focus-within { opacity: 1; translate: none; transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) {
  .map-backdrop { transform: none; }
  .map-band [data-map-reveal] { opacity: 1; translate: none; transition: none; }
  .map-band .map-stat { transition: none; }
}

/* Mapa amplio a la izquierda; ranking con gráficas a la derecha. */
.map-band .map-stage { grid-template-columns: minmax(0, 1.65fr) minmax(420px, 1fr); gap: 28px; }
.map-band .map-ranking { order: 2; }
.map-band .map-card { order: 1; border-radius: 20px; box-shadow: 0 30px 60px rgba(10, 33, 71, .25); }
.map-band .map-card-bar { padding: 22px 26px 0; }
.map-band .map-card .map-canvas-wrap { padding: 18px 22px 12px; }
.map-band .map-card-foot { padding: 14px 26px 20px; }
.map-band .map-card .legend-item { font-size: 12.5px; }
.map-band .map-card .map-instructions { font-size: 12px; }

.map-band .map-ranking { border-radius: 20px; box-shadow: 0 30px 60px rgba(10, 33, 71, .16); }
.map-band .map-ranking-header {
  padding: 28px 30px 26px;
  border-bottom: 3px solid var(--flag-red);
  background: linear-gradient(135deg, #0a3161 0%, #0b2a55 55%, #143f78 100%);
}
.map-band .map-ranking-kicker { font-size: 11px; letter-spacing: .16em; }
.map-band .map-ranking-header h3 { margin: 8px 0 8px; font-size: 34px; }
.map-band .map-ranking-header p { font-size: 14px; }
/* Panorama nacional: la misma escala editorial que el ranking del mapa. */
.map-band .nation-header .map-detail-kicker { font-size: 11px; letter-spacing: .16em; }
.map-band .nation-header h3 { margin: 8px 0 10px; font-size: 34px; line-height: 1.15; }
.map-band .nation-header p { font-size: 14px; line-height: 1.6; }
.map-band .rank-national, .map-band .rank-list { gap: 14px; padding: 20px; background: #f3f6fa; }
.map-band .map-ranking-note { margin: 0; padding: 0 20px 20px; background: #f3f6fa; font-size: 12px; }
.map-band .rank-national-item { gap: 16px; padding: 20px 24px; border-radius: 16px; box-shadow: 0 6px 16px rgba(10, 49, 97, .06); }
.rank-national-label { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rank-national-place {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  height: 34px;
  border-radius: 50%;
  background: #0a3161;
  color: #fff;
  font-family: var(--serif);
  font-size: 17px;
}
li:first-child > .rank-national-item .rank-national-place { background: var(--flag-red); }
.rank-national-item .rank-national-race { display: grid; min-width: 0; line-height: 1.2; }
.rank-national-race strong { overflow: hidden; color: #0a3161; font-family: var(--serif); font-size: 21px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.rank-national-race small { color: #5c687d; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.rank-national-item .photo-ring { --size: 70px; }
.rank-national-item .photo-ring-badge { font-size: 12px; }
.rank-national-item .versus-name { font-size: 16px; }
.rank-national-item .versus-mid strong { font-size: 30px; }
.map-band .rank-race { padding: 22px 24px 16px 27px; border-radius: 16px; }
.map-band .rank-race-title h4 { font-size: 24px; }
.map-band .rank-person { grid-template-columns: 30px 58px minmax(0, 1fr) auto; padding: 10px 12px; }
.map-band .rank-person .photo-ring { --size: 58px; }
.map-band .rank-name { font-size: 16px; }
.map-band .rank-pct { font-size: 30px; }
.map-band .rank-person:not(.leader) .rank-pct { font-size: 25px; }

@media (max-width: 1240px) {
  .map-band-head { grid-template-columns: 1fr; }
}
@media (max-width: 1080px) {
  .map-band .map-stage { grid-template-columns: 1fr; }
  .map-band .map-card { order: 0; }
  .map-band .map-ranking { order: 1; }
}
@media (max-width: 760px) {
  .map-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 570px) {
  .map-section.map-band, .hero + .map-section.map-band { padding: 48px 0 56px; }
  .map-band-inner { width: calc(100% - 32px); }
  .map-band .map-intro { font-size: 17px; }
  .map-steps { gap: 8px; }
  .map-steps li { padding-right: 12px; font-size: 12.5px; }
  .map-steps li + li::before { display: none; }
  .map-stat { padding: 14px; }
  .map-stat strong { font-size: 32px; }
  .map-band .map-card-bar { padding: 16px 14px 0; }
  .map-band .map-card .map-canvas-wrap { padding: 12px 6px 8px; }
  .map-band .map-card-foot { padding: 12px 14px 16px; }
  .map-band .map-ranking-header { padding: 22px 20px 20px; }
  .map-band .map-ranking-header h3 { font-size: 27px; }
  .map-band .nation-header h3 { font-size: 27px; }
  .nation-block-head h4 { font-size: 20px; }
  .map-band .rank-national, .map-band .rank-list { padding: 12px; }
  .map-band .rank-national-item { padding: 14px; }
  .rank-national-item .photo-ring { --size: 62px; }
  .rank-national-item .versus-name { font-size: 14.5px; }
  .map-band .rank-person { grid-template-columns: 26px 50px minmax(0, 1fr) auto; padding: 8px 6px; }
  .map-band .rank-person .photo-ring { --size: 50px; }
  .map-band .rank-pct { font-size: 23px; }
}

@media (max-width: 570px) {
  /* En el teléfono las abreviaturas se ven más grandes; las de los estados pequeños
     del noreste aparecen al acercar el mapa para no encimarse. */
  #us-map .map-state-code { display: inline; font-size: calc(25px * var(--map-scale, 1)); stroke-width: calc(3.2px * var(--map-scale, 1)); }
  #us-map:not(.is-focused) .map-state-code.tiny { display: none; }
}

/* ===== Mapa claro, estilo editorial: tarjeta blanca, estados sin datos en gris y bordes blancos ===== */
.map-band .map-card {
  border: 1px solid #dfe3ea;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  box-shadow: 0 24px 50px rgba(10, 33, 71, .12);
}
.map-band .map-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 4px;
  background: linear-gradient(90deg, #0a3161 0 72%, #fff 72% 74%, var(--flag-red) 74%);
}
.map-card .tab { border-color: #d5dce8; background: #f3f6fa; color: #33415c; }
.map-card .tab:hover, .map-card .tab.active { border-color: #0a3161; background: #0a3161; color: #fff; }
.map-card .map-reset { border-color: #0a3161; background: #fff; color: #0a3161; }
.map-card .map-reset:hover, .map-card .map-reset:focus-visible { border-color: #0a3161; background: #0a3161; color: #fff; }
.map-finder input {
  border-color: #d5dce8;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%236b778c' stroke-width='2'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath d='M9.5 9.5 13 13'/%3E%3C/svg%3E") 13px center no-repeat,
    #f3f6fa;
  color: #0b2a55;
}
.map-finder input::placeholder { color: #5c687d; }
.map-finder input:focus { border-color: #0a3161; background-color: #fff; }

.map-state { fill: #e3e7ee; stroke: #fff; stroke-width: 1.2; }
.map-state.coverage { fill: #7f8ca3; }
.map-state:hover { stroke: #0a3161; stroke-width: 1.8; filter: brightness(.97); }
.map-state:focus-visible { stroke: #0a3161; stroke-width: 2.6; }
.map-state.selected { stroke: #0a3161; stroke-width: 2.6; filter: drop-shadow(0 6px 12px rgba(10, 49, 97, .35)); }
.map-state-code { fill: #0b2a55; stroke: #fff; }

.map-card-foot { border-top-color: #edf0f5; }
.map-card .legend-item { color: #46536b; }
.map-card .legend-swatch { border-color: rgba(10, 49, 97, .14); background: #e3e7ee; }
.map-card .legend-swatch.coverage { background: #7f8ca3; }
.map-card .legend-note, .map-card .map-instructions { color: #5c687d; }
.map-tooltip { border: 1px solid #dfe3ea; box-shadow: 0 16px 34px rgba(10, 33, 71, .18); }

/* ===== Vista "Todas": estados divididos con franjas e insignias por cargo ===== */
.map-state.split, .legend-swatch.split { fill: url(#split-stripes); background: repeating-linear-gradient(45deg, #6c9fd1 0 3px, #d88479 3px 6px); }
.map-badge-group {
  --badge-k: 1;
  transform: translate(var(--bx), var(--by)) scale(calc(var(--map-scale, 1) * var(--badge-k)));
  pointer-events: none;
  transition: opacity .45s ease;
}
.map-badge { stroke: #fff; stroke-width: 1.6; fill: #8f9db3; }
.map-badge.democrat { fill: #1f5f99; }
.map-badge.republican { fill: #b23a32; }
.map-badge.other { fill: var(--other); }
.map-badge-letter { fill: #fff; font-size: 9px; font-weight: 900; text-anchor: middle; dominant-baseline: middle; }
#us-map:not(.is-focused) .map-badge-group.tiny { display: none; }
#us-map.is-focused .map-badge-group:not(.selected) { opacity: .3; }
.map-card .legend-badges { gap: 4px; }
.map-card .legend-badges b {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #0a3161;
  color: #fff;
  font-size: 9.5px;
}
.map-card .legend-badges b:last-of-type { margin-right: 4px; }
@media (prefers-reduced-motion: no-preference) {
  #us-map:not(.is-visible) #map-badges { opacity: 0; }
  #us-map.is-visible:not(.settled) #map-badges { animation: hero-fade .6s ease-out 1.1s both; }
}
/* En el teléfono, con el país completo, basta el color; las letras aparecen al acercar. */
@media (max-width: 570px) {
  .map-badge-group { --badge-k: 2.6; }
  #us-map:not(.is-focused) .map-badge-group { display: none; }
}

/* ===== Posibilidad estimada: explicación visible en la portada y guía en "Cómo leerlo" ===== */
.projection-card-footer { align-items: center; gap: 18px; }
.projection-explain { display: flex; flex: 1; align-items: center; gap: 12px; max-width: 760px; margin: 0; font-size: 11px; line-height: 1.45; }
.hero .projection-explain { color: #c3cfe2; }
.hero .projection-explain b { color: #fff; }
.projection-scale {
  position: relative;
  display: flex;
  flex: 0 0 96px;
  justify-content: space-between;
  padding-top: 9px;
  font-size: 9px;
  font-weight: 800;
}
.projection-scale::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .25), #fff);
}
.projection-scale i { font-style: normal; }
.hero .projection-score[title] { cursor: help; }
@media (max-width: 860px) {
  .projection-card-footer { flex-wrap: wrap; }
  .projection-explain { flex-basis: 100%; order: 3; }
}

.possibility {
  grid-column: 1 / -1;
  display: grid;
  gap: 26px;
  padding: 34px 36px;
  border: 1px solid #dfe3ea;
  border-top: 4px solid #0a3161;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(10, 49, 97, .07);
  scroll-margin-top: 96px;
}
.possibility-head h3 { margin: 6px 0 10px; color: #0a3161; font-family: var(--serif); font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; }
.possibility-head p:last-child { max-width: 820px; margin: 0; color: #46536b; font-size: 15px; line-height: 1.65; }
.possibility-bar { height: 12px; border-radius: 999px; background: linear-gradient(90deg, #c3cfe2 0%, #6c8fc4 50%, #0a3161 100%); }
/* Cada marca va en su posición real de la barra (50 → 0%, 60 → 25%, … 90 → 100%). */
.possibility-scale ol { position: relative; height: 46px; margin: 10px 0 0; padding: 0; list-style: none; }
.possibility-scale li { position: absolute; top: 0; display: grid; gap: 2px; text-align: center; white-space: nowrap; transform: translateX(-50%); }
.possibility-scale li:nth-child(1) { left: 0; text-align: left; transform: none; }
.possibility-scale li:nth-child(2) { left: 25%; }
.possibility-scale li:nth-child(3) { left: 50%; }
.possibility-scale li:nth-child(4) { left: 75%; }
.possibility-scale li:nth-child(5) { left: 100%; text-align: right; transform: translateX(-100%); }
.possibility-bar { position: relative; }
.possibility-bar span { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(255, 255, 255, .8) calc(25% - 1px) 25%); border-radius: inherit; }
.possibility-scale b { color: #0a3161; font-family: var(--serif); font-size: 20px; }
.possibility-scale span { color: #5c687d; font-size: 12px; font-weight: 700; }
.possibility-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.possibility-cards article { padding: 18px 20px; border-radius: 14px; background: #f4f6fa; }
.possibility-cards h4 { margin: 0 0 10px; color: #0a3161; font-size: 14px; font-weight: 850; letter-spacing: .02em; }
.possibility-cards ul { display: grid; gap: 7px; margin: 0; padding-left: 18px; color: #46536b; font-size: 13px; line-height: 1.5; }
.possibility-cards li::marker { color: var(--flag-red); }
.possibility-cards b { color: #0b2a55; }
.possibility-example { margin: 0; padding: 14px 18px; border-left: 4px solid var(--flag-red); border-radius: 10px; background: #fbf3f5; color: #46536b; font-size: 13.5px; line-height: 1.6; }
.possibility-example b { color: #0b2a55; }
@media (max-width: 860px) {
  .possibility { padding: 24px 20px; }
  .possibility-cards { grid-template-columns: 1fr; }
  .possibility-scale li span { font-size: 9.5px; white-space: normal; max-width: 64px; }
  .possibility-scale ol { height: 62px; }
  .possibility-scale b { font-size: 16px; }
}

/* La negrita de la nota de porcentajes conservaba el color claro del tema anterior y no se leía. */
.score-footnote strong { color: #0b2a55; }

/* ===== Datos abiertos: descarga del CSV de fichas publicadas ===== */
.open-data {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  margin-top: 22px;
  padding: 24px 28px;
  border: 1px solid #dfe3ea;
  border-left: 5px solid #0a3161;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(10, 49, 97, .07);
  scroll-margin-top: 96px;
}
.open-data-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #e6edf7; }
.open-data-icon svg { width: 28px; height: 28px; fill: none; stroke: #0a3161; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.open-data-copy .kicker { margin-bottom: 4px; }
.open-data-copy h3 { margin: 0 0 6px; color: #0a3161; font-family: var(--serif); font-size: 22px; font-weight: 600; }
.open-data-copy p:last-child { margin: 0; color: #46536b; font-size: 13.5px; line-height: 1.55; }
#open-data-meta { color: #0b2a55; font-weight: 700; }
.open-data-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  background: #0a3161;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(10, 49, 97, .22);
  transition: background .2s ease, transform .2s ease;
}
.open-data-button:hover, .open-data-button:focus-visible { background: var(--flag-red); transform: translateY(-2px); }
.footer a { color: inherit; font-weight: 700; }
@media (max-width: 760px) {
  .open-data { grid-template-columns: 1fr; padding: 20px; }
  .open-data-icon { display: none; }
  .open-data-button { grid-column: 1 / -1; justify-content: center; }
}

/* ===== Portada: ranking de escenarios como carrusel con fotos ===== */
.hero .projection-card { display: block; padding: 24px 26px 18px; }
.hero .projection-card-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.hero .projection-card h2 { margin: 0; font-size: 26px; }
.hero .projection-card-intro { margin: 6px 0 0; color: #aab6c9; font-size: 13px; }
.projection-nav { display: flex; flex-shrink: 0; align-items: center; gap: 10px; }
.projection-count { margin-right: 4px; color: #c3cfe2; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.projection-arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.projection-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.projection-arrow:hover:not(:disabled), .projection-arrow:focus-visible { border-color: #fff; background: #fff; color: #0a3161; }
.projection-arrow:disabled { opacity: .3; cursor: default; }

.projection-track {
  --gap: 14px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--gap)) / 3);
  gap: var(--gap);
  margin: 0;
  padding: 6px 2px 8px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.projection-track::-webkit-scrollbar { display: none; }
.projection-track:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 14px; }
.projection-track .projection-loading { padding: 18px 4px; }
.projection-slide {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  background: rgba(255, 255, 255, .05);
  scroll-snap-align: start;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.projection-slide:hover { border-color: rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .09); transform: translateY(-2px); }
.projection-slide.first { border-color: rgba(179, 25, 66, .6); background: linear-gradient(135deg, rgba(179, 25, 66, .22), rgba(255, 255, 255, .05) 62%); }
.projection-visual { position: relative; }
.photo-ring.proj { --size: 74px; }
.hero .photo-ring-track { stroke: rgba(255, 255, 255, .14); }
.hero .photo-ring.democrat { --ring: #5b9bd8; }
.hero .photo-ring.republican { --ring: #e0675c; }
.hero .photo-ring .ranking-avatar { box-shadow: 0 0 0 2px #0c2448; }
.projection-rank {
  position: absolute;
  top: -4px;
  left: -6px;
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 999px;
  background: #fff;
  color: #071a33;
  font-family: var(--serif);
  font-size: 14px;
  box-shadow: 0 0 0 3px #0c2448;
}
.projection-slide.first .projection-rank { background: var(--flag-red); color: #fff; }
.projection-slide:nth-child(n+4) .projection-rank { background: rgba(255, 255, 255, .2); color: #fff; }
.hero .projection-slide .projection-scope { color: #c3cfe2; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.hero .projection-slide .projection-copy strong { margin: 3px 0 2px; font-size: 16px; }
.hero .projection-slide .projection-copy small { color: #8f9db3; font-size: 11px; }
.hero .projection-slide .projection-score strong { font-family: var(--serif); font-size: 30px; font-weight: 600; }
.hero .projection-slide .projection-score span { max-width: 64px; margin-left: auto; font-size: 9.5px; }

@media (max-width: 1100px) {
  .projection-track { grid-auto-columns: calc((100% - var(--gap)) / 2); }
}
@media (max-width: 640px) {
  .hero .projection-card { padding: 20px 16px 16px; }
  .hero .projection-card-top { flex-wrap: wrap; align-items: center; }
  .hero .projection-card h2 { font-size: 23px; }
  .projection-nav { width: 100%; justify-content: flex-end; }
  .projection-count { margin-right: auto; }
  .projection-track { grid-auto-columns: 88%; }
  .photo-ring.proj { --size: 64px; }
  /* En el teléfono: foto y nombre arriba, porcentaje abajo, para que nada se corte. */
  .projection-slide { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "visual copy" "score score"; row-gap: 12px; }
  .projection-visual { grid-area: visual; }
  .projection-copy { grid-area: copy; }
  .hero .projection-slide .projection-score { grid-area: score; display: flex; align-items: baseline; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .1); text-align: left; }
  .hero .projection-slide .projection-score strong { font-size: 26px; }
  .hero .projection-slide .projection-score span { max-width: none; margin: 0; font-size: 11px; }
}
.projection-confidence {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  color: #c3cfe2;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.projection-confidence.alta { border-color: #7fd1a3; color: #9be3ba; }
.projection-confidence.media { border-color: #e6c46b; color: #f0d58d; }

/* ===== Accesibilidad ===== */
/* Enlace para saltar el menú con el teclado: invisible hasta recibir el foco. */
.skip-link {
  position: absolute;
  top: -80px;
  left: 16px;
  z-index: 1000;
  padding: 10px 18px;
  border-radius: 10px;
  background: #fff;
  color: #0a3161;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; outline: 3px solid var(--flag-red); outline-offset: 2px; }
main:focus { outline: none; }

/* En las zonas oscuras el contorno de foco azul marino no se veía: ahí va en blanco. */
.site-header :focus-visible, .hero :focus-visible, .map-ranking-header :focus-visible,
.map-detail-header :focus-visible, .projection-card :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Nombres de partido en tonos más oscuros para cumplir el contraste mínimo de texto. */
.duel-person.democrat .duel-party, .rank-person.democrat .rank-party, .nation-widest-item.democrat .nation-widest-pct { color: #1d5c91; }
.duel-person.republican .duel-party, .rank-person.republican .rank-party, .nation-widest-item.republican .nation-widest-pct { color: #a73831; }
.duel-person.other .duel-party, .rank-person.other .rank-party, .nation-widest-item.other .nation-widest-pct { color: #5b3f99; }

/* Objetivos táctiles de al menos 24 px de alto. */
.latest-open { min-height: 32px; padding: 6px 0; }
.score-method summary { padding-block: 6px; }

/* ===== Rendimiento: animaciones decorativas en pausa cuando su sección no está en pantalla ===== */
.is-offscreen *, .is-offscreen *::before, .is-offscreen *::after,
.is-offscreen::before, .is-offscreen::after { animation-play-state: paused !important; }

/* ===== Idioma: selector EN / ES y espera mientras se aplica el español ===== */
.lang-switch {
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.lang-switch:hover, .lang-switch:focus-visible { border-color: #fff; background: #fff; color: #0a3161; }
/* La página espera oculta a que se aplique el español; si algo fallara, se muestra sola. */
html.i18n-pending body { visibility: hidden; animation: i18n-reveal 0s linear 1.5s forwards; }
@keyframes i18n-reveal { to { visibility: visible; } }
/* El selector va fuera del menú para que en el celular no quede oculto al desplazarlo. */
.header-inner nav { margin-left: auto; }
.header-inner > .lang-switch { flex-shrink: 0; margin-left: -8px; }
@media (max-width: 780px) {
  .header-inner > .lang-switch { order: 2; margin: 4px 0 0 auto; }
  .header-inner nav { order: 3; margin-left: 0; }
}

/* ===== Portada: podio fijo, cinta automática y ventana de resultados ===== */
.hero .projection-card { padding: 28px 30px 24px; }
.hero .projection-card-top { align-items: flex-end; margin-bottom: 22px; }
.hero .projection-card h2 { font-size: clamp(26px, 2.3vw, 32px); letter-spacing: -.015em; }
.hero .projection-card-intro { max-width: 620px; color: #c3cfe2; font-size: 14px; line-height: 1.5; }

/* Estado de los datos: «En vivo · actualizado 10:42» y el corte de las encuestas. */
.projection-status { display: grid; flex-shrink: 0; justify-items: end; gap: 7px; margin: 0; color: #aab6c9; font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right; }
.projection-live { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 11px; border: 1px solid rgba(235, 92, 112, .45); border-radius: 999px; background: rgba(179, 25, 66, .18); color: #fff; font-size: 12px; }
.projection-live[hidden] { display: none; }
.projection-live b { font-size: 11px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
#projection-updated { color: #e3e9f2; }
#projection-updated:not(:empty)::before { content: "·"; margin-right: 8px; color: rgba(255, 255, 255, .45); }

/* Podio: los tres primeros lugares siempre a la vista. */
.projection-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.projection-podium .projection-loading { grid-column: 1 / -1; padding: 18px 4px; }
.projection-slide { position: relative; cursor: pointer; }
.projection-slide.podium { padding: 18px 20px; }
/* Botón invisible que cubre toda la tarjeta y abre sus resultados. */
.projection-open { position: absolute; inset: 0; z-index: 1; width: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.projection-card .projection-open:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* Flecha discreta que aparece al pasar el ratón: indica que la tarjeta se abre. */
.projection-slide::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 15px;
  width: 7px;
  height: 7px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  opacity: 0;
  transform: translateX(-4px) rotate(45deg);
  transition: opacity .2s ease, transform .2s ease;
}
.projection-slide:hover::after, .projection-slide:focus-within::after { opacity: .75; transform: rotate(45deg); }
.projection-slide.first .projection-rank { box-shadow: 0 0 0 3px #0c2448, 0 6px 14px rgba(179, 25, 66, .45); }

/* Cinta con el resto de los lugares. */
.projection-rest { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .1); }
.projection-rest[hidden] { display: none; }
.projection-rest-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.projection-rest-title { color: #c3cfe2; font-size: 11px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.projection-rest .projection-arrow { width: 34px; height: 34px; }
.projection-rest .projection-arrow svg { width: 16px; height: 16px; }
.projection-rest.is-static .projection-arrow { display: none; }
.projection-pause .icon-play { display: none; fill: currentColor; stroke: none; }
.projection-rest.is-paused .projection-pause .icon-pause { display: none; }
.projection-rest.is-paused .projection-pause .icon-play { display: inline; }
.projection-rest.is-paused .projection-pause { border-color: #fff; }

.projection-track { --gap: 12px; grid-auto-columns: calc((100% - 3 * var(--gap)) / 4); padding: 8px 2px 6px; }
.projection-slide.compact { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 12px 16px 12px 14px; border-radius: 14px; }
.photo-ring.chip { --size: 52px; }
.projection-slide.compact .projection-rank { top: -6px; left: -7px; min-width: 22px; height: 22px; padding: 0 5px; background: #24406b; color: #fff; font-size: 12px; }
.hero .projection-slide.compact .projection-scope { font-size: 9.5px; }
.hero .projection-slide.compact .projection-copy strong { font-size: 14.5px; }
.hero .projection-slide.compact .projection-score strong { font-size: 23px; }
.projection-slide.compact::after { top: 10px; right: 10px; width: 6px; height: 6px; }

/* Cambios entre una actualización y la siguiente: el valor parpadea y muestra cuánto se movió. */
.projection-delta { display: inline-block; margin-top: 5px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.projection-delta.up { background: rgba(127, 209, 163, .16); color: #9be3ba; }
.projection-delta.down { background: rgba(224, 103, 92, .18); color: #f5aaa2; }
@media (prefers-reduced-motion: no-preference) {
  .projection-slide.is-updated { animation: outlook-flash 1.4s ease-out 2; }
}
@keyframes outlook-flash {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .45); }
  100% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
}

/* Nota de la posibilidad estimada: más grande y legible. */
.hero .projection-card-footer { display: block; margin-top: 20px; padding: 16px 22px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .05); }
.hero .projection-explain { gap: 22px; max-width: none; color: #d3dbe8; font-size: 15px; line-height: 1.55; }
.hero .projection-explain b { color: #fff; font-family: var(--serif); font-size: 17px; font-weight: 600; letter-spacing: .005em; }
.hero .projection-scale { flex: 0 0 150px; padding-top: 13px; color: #e3e9f2; font-size: 12px; }
.hero .projection-scale::before { height: 6px; background: linear-gradient(90deg, rgba(255, 255, 255, .22), #fff); }

@media (max-width: 1100px) {
  .projection-track { grid-auto-columns: calc((100% - 2 * var(--gap)) / 3); }
}
/* Pantallas medianas y teléfonos: el podio pasa a tres columnas con la foto arriba. */
@media (max-width: 860px) {
  .hero .projection-card-top { flex-wrap: wrap; align-items: flex-start; }
  .projection-status { justify-items: start; text-align: left; }
  .projection-podium { gap: 10px; }
  .projection-slide.podium { grid-template-columns: 1fr; grid-template-areas: "visual" "copy" "score"; justify-items: center; row-gap: 10px; padding: 16px 10px 14px; text-align: center; }
  .projection-slide.podium .projection-visual { grid-area: visual; }
  .projection-slide.podium .projection-copy { grid-area: copy; width: 100%; }
  .hero .projection-slide.podium .projection-copy strong { font-size: 15px; white-space: normal; }
  .hero .projection-slide.podium .projection-copy small { display: none; }
  .hero .projection-slide.podium .projection-score { grid-area: score; display: grid; justify-items: center; gap: 2px; padding-top: 0; border-top: 0; text-align: center; }
  .hero .projection-slide.podium .projection-score strong { font-size: 26px; }
  .hero .projection-slide.podium .projection-score span { max-width: none; margin: 0; font-size: 10px; }
  .projection-track { grid-auto-columns: calc((100% - var(--gap)) / 2); }
  .hero .projection-explain { font-size: 14px; }
}
@media (max-width: 640px) {
  .hero .projection-card { padding: 22px 14px 16px; }
  .hero .projection-card-intro { font-size: 13px; }
  .projection-podium { gap: 8px; }
  .projection-slide.podium { padding: 14px 6px 12px; row-gap: 8px; }
  .projection-slide.podium .photo-ring.proj { --size: 58px; }
  .hero .projection-slide.podium .projection-scope { font-size: 9px; letter-spacing: .03em; }
  .hero .projection-slide.podium .projection-copy strong { font-size: 13.5px; }
  .hero .projection-slide.podium .projection-confidence { font-size: 8.5px; padding: 1px 6px; }
  .hero .projection-slide.podium .projection-score strong { font-size: 23px; }
  .hero .projection-slide.podium .projection-score span { font-size: 9px; }
  .projection-rest-head { flex-wrap: wrap; }
  .projection-rest .projection-nav { width: auto; }
  .projection-rest .projection-count { margin-right: 2px; }
  .projection-track { grid-auto-columns: 82%; }
  .projection-slide.compact { grid-template-areas: none; grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 0; }
  .projection-slide.compact .projection-visual, .projection-slide.compact .projection-copy { grid-area: auto; }
  .hero .projection-slide.compact .projection-score { grid-area: auto; display: block; padding-top: 0; border-top: 0; text-align: right; }
  .hero .projection-slide.compact .projection-score strong { font-size: 22px; }
  .hero .projection-card-footer { padding: 14px 16px; }
  .hero .projection-explain { flex-direction: column; align-items: flex-start; gap: 10px; font-size: 13.5px; }
  .hero .projection-scale { flex-basis: auto; width: 150px; }
}

/* Ventana de resultados de una contienda: capa fija con el fondo oscuro y la ventana al centro.
   (Sin bloquear el desplazamiento de <html>: con las barras de Windows eso obligaba a volver a
   dibujar toda la página en cada cuadro de la animación.) */
.race-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(4, 13, 30, .78);
  overscroll-behavior: contain;
}
.race-dialog {
  width: min(640px, calc(100vw - 32px));
  max-height: min(88vh, 880px);
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: #fff;
  color: #0b2a55;
  box-shadow: 0 40px 90px rgba(4, 14, 30, .5);
  overflow: hidden;
}
.race-dialog { display: flex; flex-direction: column; outline: none; }
.race-dialog-head { position: relative; padding: 24px 70px 22px 28px; background: linear-gradient(135deg, #0a3161 0%, #0c2448 70%, #3a1430 140%); color: #fff; }
.race-dialog-kicker { color: #c3cfe2; font-size: 11px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.race-dialog-head h2 { margin: 6px 0 0; color: #fff; font-family: var(--serif); font-size: 32px; font-weight: 600; line-height: 1.1; }
.race-dialog-close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.race-dialog-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.race-dialog-close:hover, .race-dialog-close:focus-visible { background: #fff; color: #0a3161; }
.race-dialog-close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.race-dialog-body { display: grid; gap: 22px; padding: 24px 28px 26px; overflow-y: auto; overscroll-behavior: contain; }
.race-dialog-label { margin: 0 0 14px; color: #5c687d; font-size: 11px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.race-dialog .versus { gap: 14px; }
.race-dialog .versus .photo-ring { --size: 92px; }
.race-dialog .photo-ring-badge { font-size: 13px; }
.race-dialog .versus-side { gap: 14px; padding-bottom: 10px; }
.race-dialog .versus-name { font-family: var(--serif); font-size: 19px; font-weight: 600; }
.race-dialog .versus-mid strong { font-size: 26px; }

.race-dialog-meter { padding: 18px 20px 16px; border-radius: 16px; background: #f4f6fa; }
.race-dialog-meter-top { display: flex; align-items: center; gap: 16px; }
.race-dialog-meter-top strong { color: #0a3161; font-family: var(--serif); font-size: 42px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.race-dialog-meter-top p { flex: 1; margin: 0; color: #46536b; font-size: 14.5px; line-height: 1.45; }
.race-dialog-meter-top b { color: #0b2a55; }
.race-dialog .projection-confidence { flex-shrink: 0; margin: 0; border-color: #c9d3e3; color: #46536b; }
.race-dialog .projection-confidence.alta { border-color: #7fbf98; color: #1d6b40; }
.race-dialog .projection-confidence.media { border-color: #d9b75a; color: #7a5c0c; }
.race-dialog-bar { position: relative; height: 10px; margin: 16px 0 24px; border-radius: 999px; background: #dfe5ee; }
.race-dialog-bar span { position: absolute; inset: 0 auto 0 0; width: var(--fill, 0%); min-width: 10px; border-radius: inherit; background: linear-gradient(90deg, #8fa8cc, #0a3161); transform-origin: left center; }
.race-dialog-meter.democrat .race-dialog-bar span { background: linear-gradient(90deg, #9cc2e4, #1d5c91); }
.race-dialog-meter.republican .race-dialog-bar span { background: linear-gradient(90deg, #eeb1aa, #a73831); }
.race-dialog-bar i { position: absolute; top: 15px; color: #5c687d; font-size: 11px; font-style: normal; font-weight: 800; }
.race-dialog-bar i:first-of-type { left: 0; }
.race-dialog-bar i:last-of-type { right: 0; }
.race-dialog-note { margin: 0; color: #5c687d; font-size: 12.5px; line-height: 1.5; }

.race-dialog-polls ol { margin: 0; padding: 0; list-style: none; }
.race-poll { display: grid; gap: 10px; padding: 16px 0; border-top: 1px solid #e6eaf0; }
.race-poll:last-child { padding-bottom: 0; }
.race-poll-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.race-poll-head strong { color: #0b2a55; font-size: 15.5px; }
.race-poll-head span { color: #5c687d; font-size: 12.5px; font-weight: 700; }
.race-poll-results { display: grid; gap: 7px; }
.race-poll-line { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) 52px; align-items: center; gap: 12px; }
.race-poll-name { overflow: hidden; color: #24324a; font-size: 13.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.race-poll-track { height: 8px; border-radius: 999px; background: #e6eaf0; overflow: hidden; }
.race-poll-track span { display: block; width: var(--pct, 0%); height: 100%; border-radius: inherit; background: var(--other); transform-origin: left center; }
.race-poll-line.democrat .race-poll-track span { background: #276ca7; }
.race-poll-line.republican .race-poll-track span { background: #c6473f; }
.race-poll-line b { color: #0b2a55; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.race-poll-meta { margin: 0; color: #5c687d; font-size: 12.5px; line-height: 1.5; }
.race-poll-meta .source-link { margin-left: 10px; color: #0a3161; font-weight: 800; }

.race-dialog-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 16px 28px; border-top: 1px solid #e6eaf0; background: #fafbfd; }
.race-dialog-foot button { padding: 11px 20px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.race-dialog-map { border: 1px solid #0a3161; background: #0a3161; color: #fff; }
.race-dialog-map:hover, .race-dialog-map:focus-visible { border-color: var(--flag-red); background: var(--flag-red); }
.race-dialog-done { border: 1px solid #c9d3e3; background: #fff; color: #0a3161; }
.race-dialog-done:hover, .race-dialog-done:focus-visible { border-color: #0a3161; }
.race-dialog-foot button:focus-visible { outline: 2px solid #0a3161; outline-offset: 3px; }
/* Apertura: la ventana nace desde la tarjeta elegida (--from-x/--from-y/--from-scale, puestos al
   abrir) y crece hasta el centro; su contenido entra en cascada y las barras se llenan. Cierre:
   se encoge y se desvanece. Sólo transform y opacity, que no recalculan el diseño de la página. */
@media (prefers-reduced-motion: no-preference) {
  .race-overlay { animation: backdrop-in .3s ease-out both; }
  .race-dialog { animation: dialog-in .52s cubic-bezier(.16, 1, .3, 1) both; }
  .race-dialog-head h2 { animation: rd-title .6s cubic-bezier(.16, 1, .3, 1) .12s both; }
  .race-dialog-kicker { animation: rd-fade .5s ease-out .08s both; }
  .race-dialog-close { animation: rd-pop .45s cubic-bezier(.3, 1.4, .5, 1) .25s both; }
  .race-dialog .rd-enter { animation: rd-rise .55s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms) both; }
  .race-dialog-bar span { animation: bar-grow 1s cubic-bezier(.16, 1, .3, 1) .45s both; }
  .race-poll-track span { animation: bar-grow .9s cubic-bezier(.16, 1, .3, 1) .55s both; }
  .race-dialog-foot { animation: rd-fade .45s ease-out .3s both; }
  .race-overlay.is-closing { animation: backdrop-out .26s ease-in both; }
  .race-overlay.is-closing .race-dialog { animation: dialog-out .26s cubic-bezier(.4, 0, 1, 1) both; }
}
@keyframes dialog-in {
  from { opacity: 0; transform: translate(var(--from-x, 0px), var(--from-y, 24px)) scale(var(--from-scale, .94)); border-radius: 30px; }
  60% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes dialog-out { to { opacity: 0; transform: translateY(14px) scale(.95); } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdrop-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes rd-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes rd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rd-title { from { opacity: 0; transform: translateY(10px); letter-spacing: .02em; } to { opacity: 1; transform: none; } }
@keyframes rd-pop { from { opacity: 0; transform: scale(.6) rotate(-90deg); } to { opacity: 1; transform: none; } }
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 640px) {
  .race-overlay { padding: 10px; }
  .race-dialog { width: calc(100vw - 20px); max-height: 92vh; border-radius: 18px; }
  .race-dialog-head { padding: 20px 64px 18px 20px; }
  .race-dialog-head h2 { font-size: 26px; }
  .race-dialog-close { top: 14px; right: 14px; }
  .race-dialog-body { gap: 18px; padding: 20px 18px 22px; }
  .race-dialog .versus .photo-ring { --size: 74px; }
  .race-dialog .versus-name { font-size: 16px; }
  .race-dialog .versus-side, .race-dialog .versus-side.end { flex-direction: column; text-align: center; }
  .race-dialog-meter-top { flex-wrap: wrap; gap: 10px 14px; }
  .race-dialog-meter-top strong { font-size: 36px; }
  .race-dialog-meter-top p { flex-basis: calc(100% - 110px); font-size: 13.5px; }
  .race-poll-line { grid-template-columns: minmax(0, 112px) minmax(0, 1fr) 46px; gap: 8px; }
  .race-dialog-foot { padding: 14px 18px; }
  .race-dialog-foot button { flex: 1; }
}
/* Tabletas: con el selector de idioma el menú ya no cabía junto al logotipo y se le encimaba;
   pasa a una segunda fila, igual que en el teléfono. */
@media (min-width: 781px) and (max-width: 1040px) {
  html { scroll-padding-top: 132px; }
  .header-inner { flex-wrap: wrap; padding-block: 8px 6px; row-gap: 4px; }
  .header-inner > .lang-switch { order: 2; margin: 0 0 0 auto; }
  .header-inner nav { order: 3; width: 100%; margin-left: 0; padding-bottom: 6px; overflow-x: auto; }
}
/* En el podio del teléfono el cargo puede ir en dos líneas («GUBERNATURA»). */
@media (max-width: 860px) {
  .hero .projection-slide.podium .projection-scope { overflow: visible; white-space: normal; }
}

/* ===== Panel interno: vigilancia automática de encuestas y fuentes ===== */
.watch-panel { margin: 19px 0; padding: 22px 24px; border: 1px solid #d9dee6; border-top: 4px solid #0a3161; border-radius: 14px; background: #fff; }
.watch-panel > .helper { max-width: 980px; }
.watch-status { margin: 10px 0 16px; padding: 10px 14px; border-radius: 9px; background: #f2f5fa; color: #24324a; font-size: 13px; font-weight: 600; }
.watch-status.error { background: #fbeeea; color: #9f332c; }
.watch-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid #e3e7ee; }
.watch-tabs button { margin-bottom: -1px; padding: 10px 14px; border: 1px solid transparent; border-radius: 9px 9px 0 0; background: transparent; color: #46536b; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.watch-tabs button[aria-selected="true"] { border-color: #e3e7ee; border-bottom-color: #fff; background: #fff; color: #0a3161; }
.watch-tabs button:focus-visible { outline: 2px solid #0a3161; outline-offset: 2px; }
.watch-count { display: inline-grid; min-width: 22px; height: 20px; margin-left: 4px; padding: 0 6px; place-items: center; border-radius: 999px; background: #e6edf7; color: #0a3161; font-size: 11px; }
.watch-filters { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; color: #24324a; font-size: 13px; }
.watch-filters label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; }
.watch-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.watch-item, .watch-source { display: grid; align-content: start; gap: 6px; padding: 14px 16px; border: 1px solid #dfe3ea; border-radius: 12px; background: #fafbfd; color: #24324a; }
.watch-item.dismissed { opacity: .55; }
.watch-item-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.watch-race { margin-right: auto; color: #0a3161; font-size: 12px; letter-spacing: .04em; }
.watch-item h4 { margin: 2px 0 0; color: #0b2a55; font-size: 16px; }
.watch-meta { margin: 0; color: #5c687d; font-size: 12px; line-height: 1.45; }
.watch-flag, .watch-trust, .watch-kind { padding: 2px 8px; border-radius: 999px; background: #eef1f6; color: #46536b; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.watch-flag.new { background: #fbe9ee; color: #9b1838; }
.watch-flag.done { background: #e3eaf5; color: #0a3161; }
.watch-trust.trust-ok { background: #e4f3ea; color: #1d6b40; }
.watch-trust.trust-own { background: #e6edf7; color: #0a3161; }
.watch-trust.trust-warn { background: #fdf3dc; color: #7a5c0c; }
.watch-trust.trust-bad { background: #fbeeea; color: #9f332c; }
.watch-results { display: grid; gap: 3px; margin: 4px 0 2px; padding: 0; list-style: none; font-size: 13.5px; }
.watch-results li { display: flex; justify-content: space-between; gap: 10px; }
.watch-results b { color: #0b2a55; font-variant-numeric: tabular-nums; }
.watch-verify { margin: 2px 0 0; padding: 8px 10px; border-left: 3px solid #c3cfe2; border-radius: 6px; background: #fff; font-size: 12px; line-height: 1.5; }
.watch-verify.ok { border-left-color: #2f8f5b; }
.watch-verify.ok strong { color: #1d6b40; }
.watch-verify.warn { border-left-color: #d9a520; }
.watch-verify.warn strong { color: #7a5c0c; }
.watch-verify.bad { border-left-color: #c6473f; }
.watch-verify.bad strong { color: #9f332c; }
.watch-verify .source-link { margin-left: 4px; color: #0a3161; font-weight: 800; }
.watch-source.bad { border-color: #e5b9b3; background: #fdf6f4; }
.watch-source.warn { border-color: #ecd9a6; background: #fffbf1; }
.watch-item .item-actions, .watch-source .item-actions { align-items: center; margin-top: 4px; }
.watch-source .item-actions .source-link { margin-right: auto; color: #0a3161; font-size: 12px; font-weight: 800; }
.watch-trusted { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.watch-trusted li { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid #e3e7ee; border-radius: 10px; font-size: 13px; }
.watch-trusted .watch-trust { justify-self: start; }
.watch-trusted small { color: #5c687d; line-height: 1.4; }
@media (max-width: 640px) {
  .watch-panel { padding: 18px 14px; }
  .watch-list { grid-template-columns: 1fr; }
}
.watch-filters label { display: flex; flex-direction: row; align-items: center; gap: 7px; width: auto; }
.watch-filters input[type="checkbox"] { width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; accent-color: #0a3161; }
.watch-trusted li { align-content: start; }
.watch-item .button, .watch-source .button { white-space: nowrap; }

/* ===== Tendencias: promedio de encuestas en el tiempo ===== */
.tl-section { padding: 68px 0 60px; border-top: 1px solid #e3e7ee; background: linear-gradient(180deg, #f5f7fb 0%, #fff 70%); scroll-margin-top: 80px; }
.tl-section .dem { --c: #1d5c91; --soft: #276ca7; }
.tl-section .rep { --c: #a73831; --soft: #c6473f; }
.tl-section .yes { --c: #17714a; --soft: #1f9460; }
.tl-section .no { --c: #a8174d; --soft: #d0336c; }
.tl-section .other { --c: #5b3f99; --soft: #7a5cc4; }
.tl-section .alt { --c: #6d4fa8; --soft: #9479d1; }
.tl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.tl-head h2 { margin: 6px 0 8px; color: #0a3161; font-family: var(--serif); font-size: clamp(30px, 3vw, 44px); line-height: 1.08; }
.tl-intro { max-width: 640px; margin: 0; color: #46536b; font-size: 16px; line-height: 1.55; }
.tl-picker { display: grid; flex-shrink: 0; gap: 6px; min-width: 290px; margin: 0; color: #46536b; font-size: 11px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.tl-picker select {
  width: 100%;
  margin: 0;
  padding: 12px 42px 12px 14px;
  border: 1px solid #c9d3e3;
  border-radius: 12px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230a3161' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 16px;
  color: #0b2a55;
  font: inherit;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
  appearance: none;
  cursor: pointer;
}
.tl-picker select:focus-visible { outline: 2px solid #0a3161; outline-offset: 2px; }
.tl-card { padding: 24px 26px 22px; border: 1px solid #dfe3ea; border-radius: 20px; background: #fff; box-shadow: 0 22px 50px rgba(10, 49, 97, .08); }
.tl-readout-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.tl-series-title { margin: 0; color: #0b2a55; font-family: var(--serif); font-size: 23px; font-weight: 600; }
.tl-margin { padding: 4px 12px; border-radius: 999px; background: var(--soft, #5c687d); color: #fff; font-size: 14px; font-weight: 850; font-variant-numeric: tabular-nums; }
.tl-values { display: flex; flex-wrap: wrap; gap: 8px 38px; margin: 14px 0 6px; }
.tl-value span { display: block; color: var(--c); font-size: 12px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.tl-value strong { color: var(--c); font-family: var(--serif); font-size: 42px; font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tl-meta { margin: 0; color: #5c687d; font-size: 13px; }
.tl-chart { position: relative; min-height: 290px; margin: 16px -4px 0; }
.tl-chart-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.tl-section.is-loading .tl-chart { opacity: .5; }
.tl-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.tl-svg:focus-visible { outline: 2px solid #0a3161; outline-offset: 4px; border-radius: 8px; }
.tl-grid line { stroke: #e8ecf2; stroke-width: 1; }
.tl-axis { fill: #6b778c; font-size: 11px; font-weight: 600; }
.tl-future { fill: rgba(10, 49, 97, .04); }
.tl-today { stroke: #0b2a55; stroke-width: 1.2; }
.tl-election { stroke: var(--flag-red); stroke-width: 1.5; stroke-dasharray: 4 4; }
.tl-mark-label { fill: #0b2a55; font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.tl-mark-label.election { fill: var(--flag-red); }
.tl-band { fill: var(--soft); fill-opacity: .13; }
.tl-dot { fill: var(--soft); fill-opacity: .3; }
.tl-dot.trusted { fill-opacity: .48; }
.tl-line { fill: none; stroke: var(--soft); stroke-width: 2.8; stroke-linejoin: round; stroke-linecap: round; }
.tl-end-dot { fill: var(--soft); stroke: #fff; stroke-width: 2; }
.tl-end { fill: var(--c); font-weight: 850; }
.tl-end-value { font-size: 14px; font-variant-numeric: tabular-nums; }
.tl-end-name { font-size: 11px; font-weight: 700; }
.tl-cursor { opacity: 0; transition: opacity .15s ease; }
.tl-cursor.on { opacity: 1; }
.tl-cursor line { stroke: #0b2a55; stroke-width: 1; stroke-dasharray: 3 3; }
.tl-tip {
  position: absolute;
  top: 6px;
  left: var(--x, 0);
  z-index: 2;
  display: grid;
  gap: 4px;
  min-width: 160px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #0b2a55;
  color: #fff;
  font-size: 12.5px;
  box-shadow: 0 12px 28px rgba(4, 14, 30, .25);
  transform: translateX(14px);
  pointer-events: none;
}
.tl-tip[hidden] { display: none; }
.tl-tip.flip { transform: translateX(calc(-100% - 14px)); }
.tl-tip-row { display: flex; align-items: center; gap: 7px; }
.tl-tip-row i { width: 9px; height: 9px; border-radius: 50%; background: var(--soft); box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); }
.tl-tip-row b { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }
.tl-tip-margin { margin-top: 2px; padding-top: 5px; border-top: 1px solid rgba(255, 255, 255, .2); font-weight: 850; }
.tl-svg.animate .tl-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tl-draw 1.4s cubic-bezier(.2, .7, .2, 1) var(--delay, 0ms) forwards; }
.tl-svg.animate .tl-dots, .tl-svg.animate .tl-band, .tl-svg.animate .tl-ends { animation: hero-fade .8s ease-out .3s both; }
@keyframes tl-draw { to { stroke-dashoffset: 0; } }
.tl-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 14px; border-top: 1px solid #eef1f6; }
.tl-ranges { display: inline-flex; padding: 3px; border-radius: 999px; background: #eef2f7; }
.tl-ranges button { min-width: 48px; min-height: 32px; padding: 6px 12px; border: 0; border-radius: 999px; background: transparent; color: #46536b; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.tl-ranges button[aria-pressed="true"] { background: #0a3161; color: #fff; }
.tl-ranges button:focus-visible { outline: 2px solid #0a3161; outline-offset: 2px; }
.tl-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; color: #5c687d; font-size: 12.5px; }
.tl-legend-dot { width: 9px; height: 9px; border-radius: 50%; background: #9aaac2; }
.tl-legend-line { width: 22px; height: 3px; border-radius: 2px; background: #0a3161; }
.tl-legend-band { width: 22px; height: 12px; border-radius: 4px; background: rgba(10, 49, 97, .14); }
.tl-latest { margin-top: 18px; }
.tl-latest h3 { margin: 0 0 10px; color: #5c687d; font-size: 11px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.tl-polls { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 8px 14px; margin: 0; padding: 0; list-style: none; }
.tl-poll { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who link" "values values"; gap: 6px 10px; padding: 11px 13px; border: 1px solid #eef1f6; border-radius: 12px; background: #fafbfd; }
.tl-poll-who { grid-area: who; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.tl-poll-who strong { color: #0b2a55; font-size: 14px; }
.tl-poll-who small { color: #5c687d; font-size: 12px; }
.tl-trusted { padding: 1px 7px; border-radius: 999px; background: #e4f3ea; color: #1d6b40; font-size: 10.5px; font-weight: 800; }
.tl-poll-values { grid-area: values; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13.5px; }
.tl-poll-values b { color: var(--c); font-variant-numeric: tabular-nums; }
.tl-poll-link { grid-area: link; color: #0a3161; font-size: 12px; font-weight: 800; text-decoration: none; }
.tl-poll-link:hover, .tl-poll-link:focus-visible { text-decoration: underline; }
.tl-source { max-width: 1000px; margin: 14px 0 0; color: #5c687d; font-size: 12.5px; line-height: 1.6; }
.tl-source a { color: #0a3161; font-weight: 700; }

/* Tendencias públicas: mapa de señales y panel de datos sobre azul marino. */
.tl-public {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: 40px 0 46px;
  border-top: 0;
  background-color: #031225;
  background-image: linear-gradient(180deg, rgba(2, 15, 31, .1), rgba(2, 15, 31, .48) 360px, #031225 92%), linear-gradient(90deg, rgba(2, 15, 31, .74), rgba(2, 15, 31, .1) 65%), url("bg_trends.webp");
  background-position: center top;
  background-size: 100% 100%, 100% 100%, max(100%, 1680px) auto;
  background-repeat: no-repeat;
  color: #eef5ff;
  color-scheme: dark;
}
.tl-public .dem { --c: #9ed2ff; --soft: #50a7ff; }
.tl-public .rep { --c: #ff656c; --soft: #ff4854; }
.tl-public .yes { --c: #82e6b6; --soft: #44c98d; }
.tl-public .no { --c: #ff8bb8; --soft: #ed5d93; }
.tl-public .other { --c: #d0b5ff; --soft: #b494f2; }
.tl-public .alt { --c: #cfbdff; --soft: #aa91ed; }
.tl-public .wrap { position: relative; z-index: 1; width: min(1680px, calc(100% - 64px)); }
.tl-public .kicker { color: #ff666e; font-size: 12px; letter-spacing: .19em; }
.tl-public .tl-head { gap: 30px; margin-bottom: 27px; }
.tl-public .tl-head h2 { margin: 12px 0 12px; color: #fff; font-size: clamp(36px, 3.3vw, 58px); line-height: 1.06; letter-spacing: -.025em; text-shadow: 0 3px 24px rgba(0, 5, 16, .35); }
.tl-public .tl-intro { max-width: 730px; color: #d1ddef; font-size: 17px; line-height: 1.55; }
.tl-public .tl-picker { gap: 8px; min-width: 310px; color: #edf4ff; letter-spacing: .16em; }
.tl-public .tl-picker select {
  min-height: 54px;
  border-color: rgba(91, 159, 223, .7);
  border-radius: 13px;
  background-color: rgba(13, 35, 62, .92);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23e5f1ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color: #f6f9ff;
  font-size: 16px;
  box-shadow: inset 0 1px 12px rgba(86, 155, 226, .1), 0 6px 24px rgba(0, 7, 19, .18);
  transition: border-color .2s ease, background-color .2s ease;
}
.tl-public .tl-picker select:hover { border-color: #8dc9ff; background-color: #122b49; }
.tl-public .tl-picker select:focus-visible, .tl-public .tl-ranges button:focus-visible, .tl-public .tl-svg:focus-visible { outline-color: #a5d6ff; }
.tl-public .tl-card {
  overflow: hidden;
  padding: 24px 30px 22px;
  border: 1px solid rgba(88, 156, 214, .46);
  border-radius: 21px;
  background: radial-gradient(ellipse at 55% 0, rgba(55, 93, 140, .19), transparent 68%), rgba(3, 18, 36, .94);
  box-shadow: inset 0 1px 0 rgba(163, 207, 252, .06), 0 28px 60px rgba(0, 4, 13, .3);
}
.tl-public .tl-readout-top { gap: 12px 15px; }
.tl-public .tl-series-title { color: #f4f7ff; font-size: 28px; font-weight: 650; letter-spacing: -.02em; }
.tl-public .tl-margin { padding: 5px 15px; background: linear-gradient(135deg, #48a3ff, #2788f6); color: #02142a; font-size: 16px; box-shadow: 0 0 18px rgba(36, 139, 255, .2); }
.tl-public .tl-margin.rep { background: linear-gradient(135deg, #ff707a, #ef4052); box-shadow: 0 0 18px rgba(239, 64, 82, .16); }
.tl-public .tl-margin.yes, .tl-public .tl-margin.no, .tl-public .tl-margin.other, .tl-public .tl-margin.alt { background: var(--soft); }
.tl-public .tl-values { gap: 8px 24px; margin: 9px 0 4px; }
.tl-public .tl-value + .tl-value { padding-left: 24px; border-left: 1px solid rgba(130, 178, 228, .3); }
.tl-public .tl-value span { margin-bottom: 3px; font-size: 12px; letter-spacing: .13em; }
.tl-public .tl-value strong { font-size: clamp(42px, 3.2vw, 50px); text-shadow: 0 0 24px color-mix(in srgb, var(--soft) 18%, transparent); }
.tl-public .tl-meta { color: #b4c1d5; line-height: 1.5; }
.tl-public .tl-chart { margin-top: 8px; }
.tl-public .tl-grid line { stroke: rgba(154, 184, 222, .14); }
.tl-public .tl-axis { fill: #c1cde0; font-size: 12px; font-weight: 500; }
.tl-public .tl-future { fill: rgba(172, 193, 221, .12); }
.tl-public .tl-today { stroke: #d5e3f8; stroke-width: 1.1; }
.tl-public .tl-election { stroke: #ff5b67; }
.tl-public .tl-mark-label { fill: #edf4ff; }
.tl-public .tl-mark-label.election { fill: #ff6975; }
.tl-public .tl-band { fill-opacity: .2; }
.tl-public .tl-band.rep { fill-opacity: .19; }
.tl-public .tl-dot { fill-opacity: .45; }
.tl-public .tl-dot.trusted { fill-opacity: .75; }
.tl-public .tl-line { stroke-width: 3; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--soft) 42%, transparent)); }
.tl-public .tl-end-dot { stroke: #dcefff; stroke-width: 1.6; }
.tl-public .tl-end-value { font-size: 17px; }
.tl-public .tl-end-name { font-size: 11px; }
.tl-public .tl-cursor line { stroke: #b9d7f5; }
.tl-public .tl-tip { border: 1px solid rgba(115, 179, 236, .55); background: #102845; box-shadow: 0 10px 24px rgba(0, 5, 15, .45); }
.tl-public .tl-controls { gap: 14px; margin-top: 12px; padding-top: 12px; border-color: rgba(122, 165, 212, .18); }
.tl-public .tl-ranges { padding: 3px; border: 1px solid rgba(88, 156, 214, .27); border-radius: 13px; background: rgba(6, 23, 43, .7); }
.tl-public .tl-ranges button { min-width: 50px; min-height: 35px; border-radius: 10px; color: #dce8fb; font-size: 14px; font-weight: 650; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.tl-public .tl-ranges button:hover { background: rgba(78, 159, 243, .16); color: #fff; }
.tl-public .tl-ranges button[aria-pressed="true"] { background: #3497ff; color: #04254c; box-shadow: 0 0 17px rgba(43, 146, 255, .38); }
.tl-public .tl-legend { gap: 7px 20px; color: #c5d1e4; font-size: 12px; }
.tl-public .tl-legend-dot { background: #8ba4c5; }
.tl-public .tl-legend-line { background: #a4d2ff; }
.tl-public .tl-legend-band { background: rgba(164, 189, 222, .33); }
.tl-public .tl-latest { margin-top: 24px; padding: 20px; border: 1px solid rgba(88, 156, 214, .24); border-radius: 14px; background: rgba(12, 32, 56, .38); }
.tl-public .tl-latest h3 { margin-bottom: 14px; color: #c9d7eb; font-size: 10px; line-height: 1.6; letter-spacing: .17em; }
.tl-public .tl-polls { gap: 8px; }
.tl-public .tl-poll { padding: 11px 13px; border-color: rgba(109, 160, 210, .21); background: linear-gradient(120deg, rgba(26, 54, 86, .58), rgba(13, 32, 56, .82)); transition: border-color .2s ease, background-color .2s ease; }
.tl-public .tl-poll:hover { border-color: rgba(139, 196, 248, .56); background-color: #112d4b; }
.tl-public .tl-poll-who strong { color: #f0f5ff; font-size: 14px; }
.tl-public .tl-poll-who small { flex-basis: 100%; color: #b9c7db; line-height: 1.45; }
.tl-public .tl-poll-values { gap: 4px 16px; font-size: 13.5px; }
.tl-public .tl-poll-link { color: #a2d5ff; }
.tl-public .tl-trusted { background: rgba(85, 202, 151, .15); color: #a2e8c3; }
.tl-public .tl-source { margin-top: 16px; color: #aabbd3; }
.tl-public .tl-source a { color: #e7f1ff; }
.tl-public .tl-empty { color: #bdcde3; }
.tl-public .tl-atmosphere { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.tl-public .tl-atmosphere::before { position: absolute; inset: -8%; background: radial-gradient(ellipse at 77% 16%, rgba(36, 129, 225, .14), transparent 32%), radial-gradient(ellipse at 7% 62%, rgba(17, 82, 149, .12), transparent 24%); content: ""; }
.tl-public .tl-signal-field { position: absolute; inset: 0; opacity: .65; }
.tl-public .tl-signal-links { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; }
.tl-public .tl-signal-links path { stroke: var(--soft, #62bdff); stroke-width: 1.2; stroke-opacity: .4; vector-effect: non-scaling-stroke; }
.tl-public .tl-signal-links path.coral { stroke: #ff6272; }
.tl-public .tl-signal-dot { position: absolute; left: var(--x, 70%); top: var(--y, 18%); width: var(--size, 4px); height: var(--size, 4px); border-radius: 50%; background: #8acfff; color: #5bb8ff; opacity: .55; box-shadow: 0 0 10px currentColor, 0 0 22px currentColor; }
.tl-public .tl-signal-dot:nth-child(3n) { background: #ff8088; color: #fb4e68; }
.tl-public .tl-backdrop-values { position: absolute; z-index: 1; top: 83px; right: 24%; left: 54%; display: flex; justify-content: space-between; gap: 18px; pointer-events: none; }
.tl-public .tl-backdrop-values[hidden] { display: none; }
.tl-public .tl-backdrop-value { display: block; padding: 9px 13px; border: 1px solid var(--soft); border-radius: 11px; background: rgba(2, 20, 42, .83); color: var(--c); font-size: 17px; font-weight: 850; font-variant-numeric: tabular-nums; box-shadow: 0 0 17px color-mix(in srgb, var(--soft) 14%, transparent); }
.tl-public .tl-backdrop-value.rep { order: 0; }
.tl-public .tl-backdrop-value.dem { order: 1; transform: translateY(12px); }
@media (max-width: 1100px) { .tl-public .tl-backdrop-values { display: none; } }
/* La columna lateral toma la altura de la gráfica y conserva su propio desplazamiento. */
@media (min-width: 1180px) {
  .tl-public .tl-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 380px);
    grid-template-rows: auto auto auto;
    column-gap: 30px;
  }
  .tl-public .tl-readout, .tl-public .tl-chart, .tl-public .tl-controls { grid-column: 1; }
  .tl-public .tl-latest {
    grid-column: 2;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    contain: size;
    min-height: 0;
    margin: -24px -30px -22px 0;
    padding: 24px 18px 22px 23px;
    border: 0;
    border-left: 1px solid rgba(107, 160, 217, .23);
    border-radius: 0;
  }
  .tl-public .tl-polls {
    flex: 1 1 0;
    min-height: 0;
    grid-template-columns: 1fr;
    align-content: start;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 7px;
    scrollbar-width: thin;
    scrollbar-color: #536b88 rgba(116, 151, 191, .09);
  }
  .tl-public .tl-polls::-webkit-scrollbar { width: 6px; }
  .tl-public .tl-polls::-webkit-scrollbar-track { border-radius: 6px; background: rgba(116, 151, 191, .09); }
  .tl-public .tl-polls::-webkit-scrollbar-thumb { border-radius: 6px; background: #536b88; }
}
@media (max-width: 760px) {
  .tl-public { padding: 46px 0 36px; background-size: 100% 100%, 100% 100%, auto 480px; background-position: center top, center top, 60% top; }
  .tl-public .wrap { width: calc(100% - 28px); }
  .tl-public .tl-head { gap: 22px; margin-bottom: 24px; }
  .tl-public .tl-head h2 { margin-top: 10px; font-size: clamp(33px, 8vw, 43px); }
  .tl-public .tl-intro { font-size: 15px; }
  .tl-public .tl-picker { min-width: 0; }
  .tl-public .tl-picker select { min-height: 50px; }
  .tl-public .tl-card { padding: 20px 16px 18px; border-radius: 17px; }
  .tl-public .tl-series-title { font-size: 24px; }
  .tl-public .tl-margin { padding: 5px 12px; font-size: 14px; }
  .tl-public .tl-values { gap: 8px 18px; margin-top: 18px; }
  .tl-public .tl-value + .tl-value { padding-left: 18px; }
  .tl-public .tl-value span { font-size: 10px; letter-spacing: .08em; }
  .tl-public .tl-value strong { font-size: 39px; }
  .tl-public .tl-meta { font-size: 11px; }
  .tl-public .tl-controls { gap: 14px; }
  .tl-public .tl-ranges button { min-width: 43px; padding: 6px 10px; font-size: 13px; }
  .tl-public .tl-legend { gap: 8px 12px; font-size: 10.5px; }
  .tl-public .tl-latest { padding: 16px 12px; }
  .tl-public .tl-source { font-size: 11px; }
  .tl-public .tl-signal-field { opacity: .4; }
}
@media (prefers-reduced-motion: no-preference) {
  .tl-public .tl-atmosphere::before { animation: tl-atmosphere-drift 18s ease-in-out infinite alternate; }
  .tl-public .tl-signal-field { animation: tl-signal-drift 22s ease-in-out infinite alternate; }
  .tl-public .tl-signal-dot { animation: tl-signal-pulse var(--duration, 6s) ease-in-out var(--delay, 0s) infinite; }
  .tl-public.tl-motion-paused .tl-atmosphere::before, .tl-public.is-offscreen .tl-atmosphere::before,
  .tl-public.tl-motion-paused .tl-atmosphere *, .tl-public.is-offscreen .tl-atmosphere * { animation-play-state: paused; }
  .tl-public.trend-motion-ready [data-trend-reveal] { transition: opacity .75s ease var(--trend-reveal-delay, 0ms), transform .75s cubic-bezier(.2, .7, .2, 1) var(--trend-reveal-delay, 0ms); }
  .tl-public.trend-motion-ready [data-trend-reveal]:not(.trend-revealed) { opacity: 0; transform: translateY(22px); }
  .tl-public.trend-motion-ready [data-trend-reveal].trend-revealed { opacity: 1; transform: translateY(0); }
  .tl-public.trend-motion-ready .tl-svg.animate:not(.trend-chart-visible) .tl-line { animation: none; stroke-dasharray: 1; stroke-dashoffset: 1; }
  .tl-public.trend-motion-ready .tl-svg.animate:not(.trend-chart-visible) .tl-dots,
  .tl-public.trend-motion-ready .tl-svg.animate:not(.trend-chart-visible) .tl-band,
  .tl-public.trend-motion-ready .tl-svg.animate:not(.trend-chart-visible) .tl-ends { opacity: 0; animation: none; }
  .tl-public.trend-motion-ready .tl-svg.animate.trend-chart-visible .tl-line { animation: tl-draw 1.7s cubic-bezier(.2, .7, .2, 1) var(--delay, 0ms) forwards; }
  .tl-public.trend-motion-ready .tl-svg.animate.trend-chart-visible .tl-dots,
  .tl-public.trend-motion-ready .tl-svg.animate.trend-chart-visible .tl-band,
  .tl-public.trend-motion-ready .tl-svg.animate.trend-chart-visible .tl-ends { animation: tl-layer-in 1.1s ease-out .25s both; }
}
@keyframes tl-atmosphere-drift { from { transform: translate3d(-1%, 0, 0); opacity: .65; } to { transform: translate3d(1%, 2%, 0); opacity: 1; } }
@keyframes tl-signal-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-8px, 6px, 0); } }
@keyframes tl-signal-pulse { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: .8; transform: scale(1.15); } }
@keyframes tl-layer-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .tl-public .tl-atmosphere::before, .tl-public .tl-atmosphere * { animation: none; }
  .tl-public .tl-signal-field { transform: none; }
  .tl-public.trend-motion-ready [data-trend-reveal] { opacity: 1; transform: none; transition: none; }
  .tl-public .tl-svg.animate .tl-line { animation: none; stroke-dashoffset: 0; }
  .tl-public .tl-svg.animate .tl-dots, .tl-public .tl-svg.animate .tl-band, .tl-public .tl-svg.animate .tl-ends { opacity: 1; animation: none; }
}
.tl-empty { margin: 0; padding: 70px 0; color: #5c687d; text-align: center; }
@media (max-width: 760px) {
  .tl-section { padding: 46px 0 42px; }
  .tl-head { flex-direction: column; align-items: stretch; }
  .tl-picker { min-width: 0; }
  .tl-card { padding: 18px 14px 16px; border-radius: 16px; }
  .tl-values { gap: 4px 24px; }
  .tl-value strong { font-size: 32px; }
  .tl-chart { margin-right: -6px; }
  .tl-polls { grid-template-columns: 1fr; }
}
.status.auto { margin-left: 6px; background: #e4f3ea; color: #1d6b40; }
.list-top { flex-wrap: wrap; }
.tl-legend-item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }

/* Tablero interno (/admin/tablero/): aviso de que no es la página pública. */
.internal-banner { margin: 0; padding: 9px 16px; font-size: .86rem; line-height: 1.4; text-align: center; color: #3b2a00; background: #f6d77c; border-bottom: 1px solid #d9b44a; }
.internal-banner b { font-weight: 800; letter-spacing: .02em; }

/* Panel interno · G-Ratings: cada contienda de una publicación y si llega al panel público. */
.watch-gr-race { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #d6d6ce; }
.watch-gr-race .watch-results { margin: 6px 0; }
.watch-gr-other { opacity: .7; }

/* Pestañas del ranking «Escenarios al 3 nov.»: cada cargo tiene su propio podio. */
.projection-tabs { margin: 0 0 16px; }
.projection-card .tab { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: #d3dbe8; transition: background .2s, color .2s, border-color .2s; }
.projection-card .tab:hover { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .12); color: #fff; }
.projection-card .tab.active { border-color: #fff; background: #fff; color: #0a3161; }
.projection-card .tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 560px) {
  .projection-tabs { flex-wrap: nowrap; gap: 5px; }
  .projection-tabs .tab { flex: 1 1 auto; padding: 9px 8px; text-align: center; white-space: nowrap; }
}

/* Portada: bandera de EE. UU. ondeando muy tenue al fondo (scripts/build_flag_svg.py) y, del
   lado derecho, la Estatua de la Libertad como contraparte del caballito ODYSSEUS. Ambas
   quedan detrás de la constelación y del velo de legibilidad del titular. */

/* ===== Entrada de la portada =====
   Secuencia: encabezado → bandera → titular (barrido) → subrayado y brillo → datos → mapa
   (hero.js) → tarjeta de escenarios con destello en su borde. Todo se omite con «reducir movimiento». */
@media (prefers-reduced-motion: no-preference) {
  .site-header { animation: hero-header .8s cubic-bezier(.2, .7, .2, 1) both; }
  .site-header nav > *, .site-header .lang-switch { animation: hero-drop .6s cubic-bezier(.2, .7, .2, 1) both; }
  .site-header nav > :nth-child(1) { animation-delay: .25s; }
  .site-header nav > :nth-child(2) { animation-delay: .3s; }
  .site-header nav > :nth-child(3) { animation-delay: .35s; }
  .site-header nav > :nth-child(4) { animation-delay: .4s; }
  .site-header nav > :nth-child(5) { animation-delay: .45s; }
  .site-header nav > :nth-child(6) { animation-delay: .5s; }
  .site-header nav > :nth-child(7) { animation-delay: .55s; }
  .site-header nav > :nth-child(8) { animation-delay: .6s; }
  .site-header .lang-switch { animation-delay: .65s; }

  .hero-flag { animation: hero-flag-in 2.4s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-liberty { animation: hero-liberty-in 2.2s cubic-bezier(.2, .7, .2, 1) .5s both; }
  .hero-skyline { animation: hero-fade 2s ease-out .2s both; }
  .hero .eyebrow { animation: hero-eyebrow 1.1s cubic-bezier(.2, .7, .2, 1) .3s both; }
  .hero h1 { animation: hero-reveal 1.15s cubic-bezier(.65, 0, .25, 1) .45s both; }
  .hero h1 em { animation: none; }
  .hero .hero-copy > p:not(.eyebrow) { animation: hero-rise .9s cubic-bezier(.2, .7, .2, 1) .85s both; }
  .hero .hero-meta { animation: none; }
  .hero .hero-meta > * { animation: hero-pop .7s cubic-bezier(.2, .8, .25, 1.25) both; }
  .hero .hero-meta > :nth-child(1) { animation-delay: 1.05s; }
  .hero .hero-meta > :nth-child(2) { animation-delay: 1.2s; }
  .hero .projection-card { animation: hero-card 1.1s cubic-bezier(.2, .7, .2, 1) 1.15s both; }
  .hero .projection-card::after { animation: hero-border-sweep 1.8s ease-in-out 2.1s both; }
  .hero .projection-tabs { animation: hero-rise .7s cubic-bezier(.2, .7, .2, 1) 1.5s both; }
  .hero-scroll { animation: hero-fade .8s ease-out 2.4s both; }
}

/* Destello que recorre el borde de la tarjeta de escenarios una vez al entrar. */
.hero .projection-card { position: relative; }
.hero .projection-card::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(170, 205, 255, .1) 20%, rgba(170, 205, 255, .85) 48%, rgba(255, 255, 255, .95) 50%, rgba(235, 92, 112, .7) 53%, rgba(235, 92, 112, .1) 80%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
}

/* El brillo del titular ahora sí se ve: una luz azul plata cruza «Estados Unidos.». */
.hero h1 em {
  background: linear-gradient(100deg, #ffffff 0%, #ffffff 40%, #b9d3ff 49%, #ffffff 58%, #ffffff 100%) 100% 0 / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

@keyframes hero-header { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
@keyframes hero-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes hero-flag-in { from { opacity: 0; transform: translateX(3%); } to { opacity: 1; transform: none; } }
@keyframes hero-liberty-in { from { opacity: 0; transform: translateY(6%) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes hero-eyebrow { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes hero-reveal {
  from { opacity: 0; transform: translateY(26px) scale(.985); }
  to { opacity: 1; transform: none; }
}
@keyframes hero-underline { from { text-decoration-color: rgba(179, 25, 66, 0); } to { text-decoration-color: var(--flag-red); } }
@keyframes hero-pop { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes hero-border-sweep {
  0% { opacity: 0; }
  35% { opacity: 1; }
  100% { opacity: 0; }
}

/* ===== Composición de la portada =====
   Izquierda: titular con el caballito ODYSSEUS de marca de agua en el margen superior.
   Derecha: el mapa interactivo con la Estatua de la Libertad a su lado (ambos en el canvas).
   Fondo: la bandera, que se desvanece antes de la tarjeta de escenarios para dejarla limpia. */


@media (max-width: 780px) {
}
/* Créditos de imágenes en el pie de página. */
.footer-credits { flex-basis: 100%; margin-top: 6px; font-size: 12px; }
.footer-credits summary { cursor: pointer; width: max-content; }
.footer-credits p { margin: 8px 0 6px; }
.footer-credits ul { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
.footer { flex-wrap: wrap; }

/* ===== Fondo de la portada en capas (doble exposición) =====
   Atrás hacia adelante: horizonte de Nueva York → bandera ondeando (hero_flag.js) → Estatua de la
   Libertad → velo azul marino → mapa de la constelación (hero.js) → caballito ODYSSEUS. */
.hero::after { background: none; }
.hero-skyline, .hero-flag, .hero-liberty, .hero-shade { position: absolute; pointer-events: none; }
.hero-skyline {
  left: 0;
  right: 0;
  top: 150px;
  height: 360px;
  z-index: -8;
  background: url("hero_skyline.webp") 30% 100% / auto 100% repeat-x;
  opacity: .6;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 75%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 75%, transparent 100%);
}
.hero-flag {
  top: 0;
  left: 0;
  z-index: -7;
  width: 100%;
  height: 780px;
  opacity: .82;
}
.hero-liberty {
  top: 0;
  right: max(-170px, calc((100% - 1260px) / 2 - 270px));
  z-index: -6;
  height: min(880px, 92%);
  aspect-ratio: 755 / 1300;
  background: url("hero_liberty.webp") center top / contain no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0, 0, 0, .35) 58%, transparent 72%);
  mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0, 0, 0, .35) 58%, transparent 72%);
}
.hero-shade {
  inset: 0;
  z-index: -5;
  background:
    linear-gradient(90deg, rgba(7, 26, 51, .97) 0%, rgba(7, 26, 51, .86) 30%, rgba(7, 26, 51, .4) 52%, rgba(7, 26, 51, .12) 72%, rgba(7, 26, 51, .28) 100%),
    linear-gradient(0deg, #071a33 0%, rgba(7, 26, 51, .96) 40%, rgba(7, 26, 51, .5) 56%, rgba(7, 26, 51, 0) 68%),
    linear-gradient(180deg, rgba(7, 26, 51, .55) 0%, rgba(7, 26, 51, 0) 18%);
}
/* El caballito ODYSSEUS, más presente: pintado con un degradado blanco, azul y rojo de la bandera. */
.hero::before {
  top: 30px;
  left: max(-250px, calc((100% - 1260px) / 2 - 360px));
  width: 600px;
  transform: none;
  background: linear-gradient(160deg, #ffffff 0%, #9cbcff 45%, #e0607a 100%);
  -webkit-mask: url("odysseus_emblem.svg") center / contain no-repeat;
  mask: url("odysseus_emblem.svg") center / contain no-repeat;
  opacity: .16;
}
@keyframes hero-emblem {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: .16; transform: none; }
}
/* La tarjeta y el encabezado ya no desenfocan lo que tienen detrás: con fondos animados el
   navegador recalculaba ese desenfoque en cada cuadro y la página se trababa. */
.hero .projection-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(10, 30, 62, .9); }
.site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: #071a33; }

@media (max-width: 780px) {
  .hero-skyline { top: 300px; height: 240px; opacity: .5; }
  .hero-flag { height: 560px; opacity: .7; }
  .hero-liberty { top: 250px; right: -70px; height: 380px; }
  .hero-shade {
    background:
      linear-gradient(180deg, rgba(7, 26, 51, .72) 0%, rgba(7, 26, 51, .62) 28%, rgba(7, 26, 51, .25) 40%, rgba(7, 26, 51, .55) 50%, #071a33 62%),
      linear-gradient(90deg, rgba(7, 26, 51, .55) 0%, rgba(7, 26, 51, 0) 70%);
  }
  .hero::before { top: 18px; left: -110px; width: 320px; opacity: .12; }
  @keyframes hero-emblem { from { opacity: 0; } to { opacity: .12; } }
}

/* Lienzo del mapa con alto fijo: cubre el titular, el mapa y el inicio de la tarjeta, y no cambia
   de tamaño cuando la portada crece al cargar los datos. */
.hero-canvas { inset: auto; top: 0; left: 0; width: 100%; height: 820px; }
@media (max-width: 780px) { .hero-canvas { height: 760px; } }


/* Secciones de abajo: el navegador no calcula su diseño ni las pinta hasta que se acercan a la
   pantalla (aligera mucho la carga de la página). El tamaño reservado evita saltos de la barra. */
/* Datos abiertos: justo debajo del mapa, separado de la metodología. */
.open-data-section { padding-block: 24px 8px; scroll-margin-top: 96px; }

.methodology, .footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* ===== Sección del mapa, tema claro (refinamiento) =====
   Superficie de atlas: blanco frío con una retícula de meridianos y paralelos en la proyección del
   mapa. El país descansa sobre un escenario de luz; el panel de contiendas es claro, con el título en
   azul marino. Movimiento: sólo transiciones cortas de estado (150-200 ms), hover con puntero fino. */
.map-band {
  --atlas-ink: #0a3161;
  --atlas-muted: #54627a;
  --atlas-line: #e3e8f0;
  --atlas-surface: #ffffff;
  --atlas-wash: #f5f8fc;
  --atlas-shadow: 0 1px 2px rgba(10, 33, 71, .06), 0 18px 44px -18px rgba(10, 33, 71, .22);
  --ease-out-strong: cubic-bezier(.23, 1, .32, 1);
}
.map-section.map-band {
  background:
    radial-gradient(ellipse 70% 55% at 62% 38%, rgba(255, 255, 255, .95), transparent 70%),
    linear-gradient(180deg, #f3f6fb 0%, #eef3f9 55%, #f4f7fb 100%);
}
.map-band::before {
  background:
    linear-gradient(90deg, rgba(243, 246, 251, .92) 0%, rgba(243, 246, 251, 0) 42%),
    linear-gradient(180deg, transparent 60%, #f4f7fb 100%);
}
.map-graticule { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; }
.map-graticule .minor { stroke: rgba(10, 49, 97, .09); stroke-width: .8; }
.map-graticule .major { stroke: rgba(10, 49, 97, .17); stroke-width: 1.1; }

/* Cifras y pasos: misma superficie y elevación que las tarjetas. */
.map-band .map-stat { border: 0; border-radius: 16px; background: var(--atlas-surface); box-shadow: var(--atlas-shadow); }
.map-band .map-stat::after { height: 2px; }
.map-band .map-steps li { border-color: transparent; background: var(--atlas-surface); box-shadow: 0 1px 2px rgba(10, 33, 71, .06), 0 6px 16px -8px rgba(10, 33, 71, .18); }

/* Tarjeta del mapa. */
.map-band .map-card { border: 0; border-radius: 16px; background: var(--atlas-surface); box-shadow: var(--atlas-shadow); }
.map-band .map-card::before { height: 3px; border-radius: 16px 16px 0 0; background: linear-gradient(90deg, var(--atlas-ink) 0 70%, var(--flag-red) 70%); }
.map-band .map-card .map-canvas-wrap {
  margin: 10px 18px 0;
  border-radius: 12px;
  background: radial-gradient(ellipse 60% 55% at 50% 45%, #fbfcfe 0%, #f2f5fa 70%, #edf1f7 100%);
}
.map-band .map-card-foot { border-top: 1px solid var(--atlas-line); }

/* Estados: sin encuesta casi blancos; con encuesta, el color del partido (o franjas si está dividido).
   El relleno sin datos se fija con poca especificidad para no tapar los colores de partido. */
.map-state:not(.democrat):not(.republican):not(.other):not(.split):not(.coverage) { fill: #e4e9f1; }
.map-band .map-state { stroke: #fff; stroke-width: 1; stroke-linejoin: round; transition: fill .2s ease, stroke-width .15s ease, opacity .2s ease; }
.map-band .map-state-code { fill: #2a3b57; font-weight: 800; }
@media (hover: hover) and (pointer: fine) {
  .map-band .map-state:hover { stroke: var(--atlas-ink); stroke-width: 1.6; filter: none; }
}
.map-band .map-state.selected { stroke: var(--atlas-ink); stroke-width: 2.2; filter: drop-shadow(0 8px 14px rgba(10, 49, 97, .28)); }

/* Pestañas de cargo y búsqueda: respuesta táctil al presionar. */
.map-band .map-card .tab { border-color: var(--atlas-line); background: var(--atlas-wash); color: #33415c; transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .16s var(--ease-out-strong); }
.map-band .map-card .tab.active { border-color: var(--atlas-ink); background: var(--atlas-ink); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .map-band .map-card .tab:not(.active):hover { border-color: #b9c6da; background: #fff; color: var(--atlas-ink); }
}
.map-band .map-card .tab:active, .map-band .map-reset:active { transform: scale(.97); }
.map-band .map-finder input { border-color: var(--atlas-line); background-color: var(--atlas-wash); }

/* Panel de contiendas en tema claro. */
.map-band .map-ranking { border: 0; border-radius: 16px; background: var(--atlas-surface); box-shadow: var(--atlas-shadow); }
.map-band .map-ranking-header {
  position: relative;
  padding: 28px 30px 22px;
  border-bottom: 1px solid var(--atlas-line);
  background: var(--atlas-surface);
  color: var(--atlas-ink);
}
.map-band .map-ranking-header::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; border-radius: 16px 16px 0 0; background: linear-gradient(90deg, var(--atlas-ink) 0 70%, var(--flag-red) 70%); }
.map-band .map-ranking-kicker { color: var(--flag-red); }
.map-band .map-ranking-header h3 { color: var(--atlas-ink); }
.map-band .map-ranking-header p { color: var(--atlas-muted); }
.map-band .map-ranking-header .rank-chip { border-color: var(--atlas-line); background: var(--atlas-wash); color: #33415c; }
.map-band .map-ranking-header .rank-jump { color: var(--atlas-ink); }
.map-band .map-ranking-header .rank-share { border-color: var(--atlas-ink); background: #fff; color: var(--atlas-ink); }
.map-band .rank-national, .map-band .rank-list, .map-band .map-ranking-note { background: var(--atlas-wash); }
.map-band .rank-national-item, .map-band .rank-race {
  border: 0;
  background: var(--atlas-surface);
  box-shadow: 0 1px 2px rgba(10, 33, 71, .06), 0 10px 24px -14px rgba(10, 33, 71, .22);
  transition: transform .2s var(--ease-out-strong), box-shadow .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .map-band .rank-national-item:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(10, 33, 71, .06), 0 18px 34px -16px rgba(10, 33, 71, .3); }
}
.map-band .rank-national-item:active { transform: scale(.98); }

@media (prefers-reduced-motion: reduce) {
  .map-band .map-state, .map-band .map-card .tab, .map-band .rank-national-item, .map-band .rank-race { transition: none; }
  .map-band .rank-national-item:hover, .map-band .rank-national-item:active, .map-band .map-card .tab:active { transform: none; }
}
@media (max-width: 760px) {
  .map-band .map-card .map-canvas-wrap { margin: 8px 10px 0; }
  .map-graticule { width: 180%; left: -40%; }
}

/* ===== Mapa: animaciones y relieve =====
   Un solo momento orquestado al entrar (la retícula se asienta, los estados barren de oeste a este)
   y, después, movimiento ambiental muy lento sólo con transform/opacity (capas compuestas, sin
   repintar). Todo se pausa fuera de pantalla (map-motion-paused) y con «reducir movimiento». */
.map-glow {
  position: absolute;
  width: 62vw;
  max-width: 1100px;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}
.map-glow.blue { top: -18%; right: -14%; background: radial-gradient(closest-side, rgba(64, 126, 210, .16), rgba(64, 126, 210, 0)); }
.map-glow.red { bottom: -30%; left: -18%; width: 48vw; background: radial-gradient(closest-side, rgba(198, 71, 63, .08), rgba(198, 71, 63, 0)); }
.map-graticule { transform-origin: 58% 47%; will-change: transform; }

@media (prefers-reduced-motion: no-preference) {
  .map-graticule { animation: graticule-in 1.8s cubic-bezier(.23, 1, .32, 1) both, graticule-turn 80s ease-in-out 1.8s infinite alternate; }
  .map-glow.blue { animation: glow-drift-a 26s ease-in-out infinite alternate; }
  .map-glow.red { animation: glow-drift-b 32s ease-in-out infinite alternate; }
}
@keyframes graticule-in { from { opacity: 0; transform: scale(1.06) rotate(-1.2deg); } }
@keyframes graticule-turn { from { transform: rotate(0deg); } to { transform: rotate(2.4deg) scale(1.02); } }
@keyframes glow-drift-a { to { transform: translate3d(-9vw, 12vh, 0) scale(1.12); } }
@keyframes glow-drift-b { to { transform: translate3d(10vw, -8vh, 0) scale(.92); } }

/* Relieve: lámina con grosor bajo los estados, borde de costa y veladura de luz. */
.map-relief-layer { fill: #0a3161; stroke: none; pointer-events: none; }
.map-relief-layer.far { opacity: .05; }
.map-relief-layer.mid { opacity: .07; }
.map-relief-layer.near { opacity: .12; }
.map-coast { fill: none; stroke: #0a3161; stroke-opacity: .35; stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.map-sheen { fill: url(#map-sheen-grad); stroke: none; pointer-events: none; }
#map-relief, #map-sheen { transition: opacity .3s ease; }
/* Al acercar, el desplazamiento de la lámina se magnifica: se oculta y queda sólo el estado. */
#us-map.is-focused #map-relief { opacity: 0; }
#us-map.is-focused #map-sheen { opacity: .4; }
@media (prefers-reduced-motion: no-preference) {
  #us-map:not(.is-visible) #map-relief, #us-map:not(.is-visible) #map-sheen { opacity: 0; }
  #us-map.is-visible:not(.settled) #map-relief { animation: hero-fade .9s ease-out .15s both; }
  #us-map.is-visible:not(.settled) #map-sheen { animation: hero-fade 1.2s ease-out .8s both; }
}

/* Los estados se levantan sobre la lámina al pasar el cursor; el elegido queda más alto. */
.map-band #us-map.settled .map-state { transform-box: fill-box; transform-origin: center; transition: fill .2s ease, stroke-width .15s ease, opacity .2s ease, transform .22s cubic-bezier(.23, 1, .32, 1); }
@media (hover: hover) and (pointer: fine) {
  .map-band #us-map.settled .map-state:hover { transform: translateY(-2px); }
}
.map-band #us-map.settled .map-state.selected { transform: translateY(-3px); }
.map-band .map-state-code { paint-order: stroke; stroke: rgba(255, 255, 255, .85); stroke-width: 3px; stroke-linejoin: round; letter-spacing: .02em; }

@media (prefers-reduced-motion: reduce) {
  .map-band #us-map .map-state { transition: none; transform: none !important; }
}

/* ===== Tendencias públicas: refinamiento =====
   El protagonista es la gráfica; el fondo acompaña en silencio. La imagen va en su propia capa con
   un acercamiento muy lento (transform, sin repintar) y el paralaje mueve esa capa directamente.
   Al elegir otra contienda o rango la gráfica sale y se redibuja, las cifras cuentan hasta su nuevo
   valor y el indicador de rango se desliza. Todo se pausa fuera de pantalla y con «reducir movimiento». */
.tl-public { background-color: #031225; background-image: none; }
.tl-public .tl-atmosphere { inset: -48px 0; will-change: transform; }
.tl-public .tl-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(2, 15, 31, .15), rgba(2, 15, 31, .5) 400px, #031225 92%),
    linear-gradient(90deg, rgba(2, 15, 31, .78), rgba(2, 15, 31, .1) 65%),
    url("bg_trends.webp") center top / max(100%, 1680px) auto no-repeat;
  transform-origin: 70% 20%;
  will-change: transform;
}
.tl-public .tl-backdrop-values { display: none !important; }

/* Tipografía. */
.tl-public .tl-head h2 { font-size: clamp(36px, 3.1vw, 54px); letter-spacing: -.022em; text-wrap: balance; }
.tl-public .tl-intro { max-width: 62ch; color: #c3d0e3; font-size: 17px; line-height: 1.6; }
.tl-public .tl-series-title { font-family: var(--serif); font-size: 30px; font-weight: 600; letter-spacing: -.015em; }
.tl-public .tl-value span:not(.tl-num):not(.tl-unit) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
}
.tl-public .tl-value span:not(.tl-num):not(.tl-unit)::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--soft) 22%, transparent); }
.tl-public .tl-value strong { display: flex; align-items: baseline; font-size: clamp(48px, 3.6vw, 62px); font-weight: 500; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.tl-public .tl-value strong .tl-num, .tl-public .tl-value strong .tl-unit { display: inline; margin: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: none; }
.tl-public .tl-value strong .tl-unit { margin-left: 3px; font-size: .46em; font-weight: 600; letter-spacing: 0; opacity: .75; }
.tl-public .tl-meta { margin-top: 8px; color: #97a9c2; font-size: 13px; }
.tl-public .tl-axis { font-size: 11.5px; font-variant-numeric: tabular-nums; letter-spacing: .02em; fill: #9fb0c8; }
.tl-public .tl-mark-label { letter-spacing: .16em; }
.tl-public .tl-poll-who strong { font-size: 14.5px; font-weight: 700; letter-spacing: -.005em; }
.tl-public .tl-poll-values { font-variant-numeric: tabular-nums; }

/* Tarjeta: una línea de luz en el borde superior. */
.tl-public .tl-card { position: relative; }
.tl-public .tl-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(120, 190, 255, .7) 30%, rgba(255, 110, 125, .55) 70%, transparent);
  pointer-events: none;
}

/* Indicador de rango que se desliza (el botón activo pasa a ser transparente sobre él). */
.tl-public .tl-ranges { position: relative; isolation: isolate; }
.tl-public .tl-ranges.has-pill::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: var(--pill-w, 0);
  border-radius: 10px;
  background: #3497ff;
  box-shadow: 0 0 18px rgba(43, 146, 255, .38);
  transform: translateX(var(--pill-x, 0));
  transition: transform .32s cubic-bezier(.23, 1, .32, 1), width .32s cubic-bezier(.23, 1, .32, 1);
}
.tl-public .tl-ranges.has-pill button[aria-pressed="true"] { background: transparent; box-shadow: none; }
.tl-public .tl-ranges button { transition: color .2s ease, background-color .2s ease, transform .16s cubic-bezier(.23, 1, .32, 1); }
.tl-public .tl-ranges button:active { transform: scale(.95); }
.tl-public .tl-picker select { transition: border-color .2s ease, background-color .2s ease, transform .16s cubic-bezier(.23, 1, .32, 1); }
.tl-public .tl-picker select:active { transform: scale(.99); }

/* Transiciones al cambiar de contienda o de rango. */
.tl-public .tl-chart { transition: opacity .15s ease, transform .15s ease; }
.tl-public .tl-chart.tl-leaving { opacity: 0; transform: translateY(6px); }
@media (prefers-reduced-motion: no-preference) {
  .tl-public .tl-atmosphere::after { animation: tl-kenburns 46s ease-in-out infinite alternate; }
  .tl-public.tl-motion-paused .tl-atmosphere::after, .tl-public.is-offscreen .tl-atmosphere::after { animation-play-state: paused; }
  .tl-public .tl-svg.tl-replay .tl-line { animation: tl-draw 1s cubic-bezier(.23, 1, .32, 1) var(--delay, 0ms) both; }
  .tl-public .tl-svg.tl-replay .tl-band { animation: tl-layer-in .6s ease-out .1s both; }
  .tl-public .tl-svg.tl-replay .tl-dots { animation: tl-layer-in .5s ease-out .35s both; }
  .tl-public .tl-svg.tl-replay .tl-ends { animation: tl-pop .45s cubic-bezier(.23, 1, .32, 1) .7s both; }
  .tl-public .tl-readout.tl-swap .tl-readout-top, .tl-public .tl-readout.tl-swap .tl-meta { animation: tl-rise .4s cubic-bezier(.23, 1, .32, 1) both; }
  .tl-public .tl-readout.tl-swap .tl-margin { animation: tl-pop .45s cubic-bezier(.23, 1, .32, 1) .1s both; }
  .tl-public .tl-poll.tl-poll-in { animation: tl-rise .4s cubic-bezier(.23, 1, .32, 1) calc(var(--i, 0) * 45ms + 120ms) both; }
  @media (hover: hover) and (pointer: fine) {
    .tl-public .tl-poll { transition: border-color .2s ease, background-color .2s ease, transform .2s cubic-bezier(.23, 1, .32, 1); }
    .tl-public .tl-poll:hover { transform: translateX(3px); }
  }
}
@keyframes tl-kenburns { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.06) translate3d(-1.2%, 1%, 0); } }
@keyframes tl-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tl-pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.tl-public .tl-ends { transform-box: fill-box; transform-origin: center; }
@media (max-width: 760px) {
  .tl-public .tl-atmosphere::after {
    background:
      linear-gradient(180deg, rgba(2, 15, 31, .15), rgba(2, 15, 31, .5) 300px, #031225 80%),
      url("bg_trends.webp") 60% top / auto 480px no-repeat;
  }
  .tl-public .tl-value strong { font-size: 40px; }
  .tl-public .tl-series-title { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-public .tl-chart { transition: none; }
  .tl-public .tl-ranges.has-pill::before { transition: none; }
}

/* ===== Tendencias públicas: propuesta del usuario ===== */
.tl-public { padding: 18px 0 24px; }
.tl-public .tl-picker[hidden] { display: none; }
.tl-public .fa { width: 1em; height: 1em; flex: none; fill: currentColor; }
.tl-public .tl-head { margin-bottom: 18px; }
.tl-public .tl-head h2 { margin: 8px 0 9px; font-size: clamp(36px, 3.15vw, 52px); }
.tl-public .tl-intro { max-width: 68ch; font-size: 16px; line-height: 1.4; }
.tl-public ::selection { background: #2c79b9; color: #fff; }

/* La bandera enmarca el mapa sin competir con la información. */
.tl-public .tl-ribbons { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tl-public .tl-ribbon path { fill: none; stroke-width: 18; stroke-linecap: round; }
.tl-public .tl-ribbon.left { opacity: .075; }
.tl-public .tl-ribbon.right { opacity: .09; }
.tl-public .tl-stars use { fill: #a9c8ff; opacity: .16; }

/* Un panel de datos, con herramientas arriba y encuestas a su lado. */
.tl-public .tl-card {
  padding: 12px;
  border: 1px solid rgba(99, 164, 227, .48);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(2, 23, 43, .94), rgba(2, 17, 33, .98));
  box-shadow: 0 24px 54px rgba(0, 5, 15, .32);
}
.tl-public .tl-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.tl-public .tl-stage { min-width: 0; padding: 16px 17px 10px; border: 1px solid rgba(96, 160, 230, .3); border-radius: 14px; background: rgba(2, 20, 39, .6); }
.tl-public .tl-tabs { display: flex; gap: 8px; flex: 1 1 auto; margin: 0 auto 0 0; }
.tl-public .tl-tabs button, .tl-public .tl-poll-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(117, 173, 225, .32);
  border-radius: 11px;
  background: rgba(3, 23, 44, .78);
  color: #deebfa;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.tl-public .tl-tabs button .fa { font-size: 16px; }
.tl-public .tl-tabs button[aria-pressed="true"], .tl-public .tl-poll-tabs button[aria-pressed="true"] {
  border-color: #3eaaff;
  background: linear-gradient(135deg, #40b0ff, #2991f5);
  color: #00172e;
}
.tl-public .tl-tabs button:focus-visible, .tl-public .tl-search input:focus-visible,
.tl-public .tl-period select:focus-visible, .tl-public .tl-poll-tabs button:focus-visible,
.tl-public .tl-poll-select:focus-visible, .tl-public .tl-poll-link:focus-visible,
.tl-public .tl-legend-item:focus-visible, .tl-public .tl-see-all:focus-visible,
.tl-public .tl-info:focus-visible { outline: 2px solid #b2e0ff; outline-offset: 3px; }

/* Búsqueda y periodo conservan el mismo alto que las pestañas. */
.tl-public .tl-search, .tl-public .tl-period-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid rgba(117, 173, 225, .32);
  border-radius: 11px;
  background: rgba(3, 23, 44, .78);
  color: #c7d9ee;
}
.tl-public .tl-search { flex: 0 1 190px; width: 190px; min-width: 130px; }
.tl-public .tl-search:focus-within, .tl-public .tl-period-box:focus-within { border-color: #8ed0ff; background: #0a2a49; }
.tl-public .tl-search .fa, .tl-public .tl-period-box .fa { font-size: 16px; color: #b5cce5; }
.tl-public .tl-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #f2f7ff; caret-color: #64c5ff; font: inherit; font-size: 12.5px; }
.tl-public .tl-search input::placeholder { color: #b1c5df; opacity: 1; }
.tl-public .tl-period { display: inline-flex; margin: 0; color: #c9d8ee; font-size: 13px; font-weight: 650; }
.tl-public .tl-period > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tl-public .tl-period-box .caret { font-size: 11px; pointer-events: none; }
.tl-public .tl-period select { width: auto; max-width: 145px; min-width: 0; padding: 0; appearance: none; -webkit-appearance: none; border: 0; outline: 0; background: transparent; color: #f2f7ff; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.tl-public .tl-period select option { background: #0b2242; color: #f2f7ff; }

/* La lectura nacional ocupa una fila y deja espacio para la gráfica. */
.tl-public .tl-readout-top { gap: 8px 13px; }
.tl-public .tl-series-title { max-width: 100%; font-family: var(--serif); font-size: clamp(27px, 2vw, 34px); font-weight: 600; letter-spacing: -.018em; line-height: 1.15; }
.tl-public .tl-margin { padding: 5px 16px; color: #001b35; font-size: 16px; box-shadow: none; }
.tl-public .tl-readout-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 5px 15px; margin-left: auto; color: #c5d5e9; font-size: 11.5px; line-height: 1.4; }
.tl-public .tl-readout-summary .fa { margin-right: 6px; color: #a9c6e5; font-size: 13px; }
.tl-public .tl-readout-summary > span + span { padding-left: 15px; border-left: 1px solid #4d6a89; }
.tl-public .tl-tiles { display: grid; grid-template-columns: 1.04fr 1.04fr .9fr; gap: 12px; margin: 12px 0 0; }
.tl-public .tl-tile {
  --tint: 72, 156, 242;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  grid-template-areas: "icon label delta" "icon value delta";
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  min-height: 100px;
  padding: 12px 14px;
  border: 1px solid rgba(var(--tint), .4);
  border-radius: 12px;
  background: linear-gradient(130deg, rgba(var(--tint), .11), rgba(var(--tint), .03)), rgba(3, 26, 49, .82);
  transition: border-color .18s ease;
}
.tl-public .tl-tile.rep { --tint: 233, 74, 91; }
.tl-public .tl-tile.other, .tl-public .tl-tile.alt { --tint: 180, 150, 240; }
.tl-public .tl-tile.edge { grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "icon body"; padding-block: 10px; }
.tl-public .tl-tile-icon { grid-area: icon; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(160deg, #2fafff, #1753b3); color: #fff; font-size: 25px; }
.tl-public .tl-tile.rep .tl-tile-icon { background: linear-gradient(160deg, #ff4259, #b71432); }
.tl-public .tl-tile > span:not(.tl-tile-icon):not(.tl-delta) { grid-area: label; align-self: end; margin: 0; color: #deebfb; font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.tl-public .tl-tile > span:not(.tl-tile-icon):not(.tl-delta)::before { display: none; }
.tl-public .tl-tile > strong { grid-area: value; align-self: start; display: flex; align-items: baseline; color: #a5d8ff; font-family: var(--serif); font-size: clamp(35px, 2.6vw, 45px); font-weight: 600; line-height: 1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-public .tl-tile.rep > strong { color: #ffd5db; }
.tl-public .tl-tile > strong .tl-num, .tl-public .tl-tile > strong .tl-unit { display: inline; margin: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: none; }
.tl-public .tl-delta { grid-area: delta; display: grid; grid-template-columns: max-content max-content; align-items: center; gap: 2px 5px; font-size: 14px; }
.tl-public .tl-delta b { font-weight: 800; font-variant-numeric: tabular-nums; }
.tl-public .tl-delta small { grid-column: 1 / -1; max-width: 102px; color: #c0d1e7; font-size: 10.5px; line-height: 1.4; }
.tl-public .tl-delta.up, .tl-public .tl-edge-change.up { color: #49e5c1; }
.tl-public .tl-delta.down, .tl-public .tl-edge-change.down { color: #ff7b86; }
.tl-public .tl-delta.flat, .tl-public .tl-edge-change.flat { color: #c8d6ea; }
.tl-public .tl-delta.flat b { grid-column: 1 / -1; }
.tl-public .tl-tile-body { position: relative; grid-area: body; display: grid; gap: 2px; min-width: 0; }
.tl-public .tl-tile-label { display: flex; align-items: center; gap: 7px; color: #deebfb; font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.tl-public .tl-edge { color: #75c9ff; font-family: var(--serif); font-size: 32px; font-weight: 600; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tl-public .tl-tile.edge.rep .tl-edge { color: #ff8c97; }
.tl-public .tl-tile-body small { color: #c1d2e7; font-size: 11px; line-height: 1.25; }
.tl-public .tl-edge-change { display: flex; align-items: baseline; gap: 6px; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tl-public .tl-edge-change small { font-size: 10.5px; font-weight: 500; }
.tl-public .tl-info { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 1px solid #9fc6ec; border-radius: 50%; background: transparent; color: #cde6ff; font-size: 11px; cursor: help; }
.tl-public .tl-edge-figure { display: flex; align-items: center; gap: 12px; }
.tl-public .tl-info-copy { position: absolute; z-index: 4; top: calc(100% + 10px); right: 0; width: min(290px, 65vw); padding: 12px 14px; border: 1px solid #537ea4; border-radius: 10px; background: #102e4b; color: #dfedfc; font-size: 11.5px; line-height: 1.5; box-shadow: 0 14px 24px rgba(0, 4, 13, .3); }
.tl-public .tl-info-copy[hidden] { display: none; }
.tl-public .tl-tile-body .tl-edge-change { color: #c8d6ea; font-size: 10.5px; font-weight: 500; }
.tl-public .tl-tile-body .tl-edge-change.up { color: #49e5c1; }
.tl-public .tl-tile-body .tl-edge-change.down { color: #ff7b86; }
.tl-public .tl-edge-change b { font-size: 13px; }

/* Capas independientes de la gráfica y controles que explican su estado. */
.tl-public .tl-chart { min-height: 266px; margin: 10px -3px 0; }
.tl-public .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.tl-public .tl-line, .tl-public .tl-band, .tl-public .tl-dot { transition: opacity .2s ease, stroke-width .2s ease; }
.tl-public .tl-chart[data-focus="0"] .tl-line.rep, .tl-public .tl-chart[data-focus="0"] .tl-band.rep, .tl-public .tl-chart[data-focus="0"] .tl-dot.rep,
.tl-public .tl-chart[data-focus="1"] .tl-line.dem, .tl-public .tl-chart[data-focus="1"] .tl-band.dem, .tl-public .tl-chart[data-focus="1"] .tl-dot.dem { opacity: .14; }
.tl-public .tl-chart[data-hide-polls="true"] .tl-dots, .tl-public .tl-chart[data-hide-average="true"] .tl-line,
.tl-public .tl-chart[data-hide-average="true"] .tl-ends, .tl-public .tl-chart[data-hide-bands="true"] .tl-band { display: none; }
.tl-public .tl-end-pulse { display: none; }
.tl-public .tl-tip-count { color: #c7d9ed; font-size: 11px; }
.tl-public .tl-cursor line { stroke: #b8dcff; }
.tl-public .tl-controls { gap: 10px; margin-top: 4px; padding-top: 8px; }
.tl-public .tl-ranges { border-radius: 10px; }
.tl-public .tl-ranges button { min-width: 48px; min-height: 32px; padding: 4px 10px; }
.tl-public .tl-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 15px; margin: 0; }
.tl-public .tl-legend-item { display: inline-flex; align-items: center; gap: 7px; padding: 3px 0; border: 0; background: transparent; color: #d1deef; font: inherit; font-size: 11.5px; cursor: pointer; }
.tl-public .tl-legend-item::before { content: ""; display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid #7398c0; border-radius: 50%; background: #0b2a46; }
.tl-public .tl-legend-item[aria-pressed="true"]::before { border-color: #37aafa; background: #2898f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8 2.5 2.5L12 5' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.tl-public .tl-legend-item[aria-pressed="false"] { color: #afc2db; }
.tl-public .tl-legend-dot, .tl-public .tl-legend-line { display: none; }
.tl-public .tl-legend-band { width: 22px; height: 14px; }

/* Encuestas: fuente independiente, selección clara y cifras comparables. */
.tl-public .tl-latest { display: flex; flex-direction: column; min-width: 0; margin: 18px 0 0; padding: 16px; border: 1px solid rgba(96, 160, 230, .3); border-radius: 14px; background: rgba(2, 20, 39, .6); }
.tl-public .tl-latest-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.tl-public .tl-latest-head h3 { margin: 0; color: #dfebfa; font-size: 9.5px; font-weight: 800; line-height: 1.5; letter-spacing: .06em; }
.tl-public .tl-see-all { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: transparent; color: #6dcdff; font-size: 11.5px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
.tl-public .tl-see-all .fa { font-size: 10px; }
.tl-public .tl-poll-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.tl-public .tl-poll-tabs button { flex: 1 1 auto; min-height: 34px; padding: 0 8px; border-radius: 8px; font-size: 10.5px; }
.tl-public .tl-polls { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-content: start; gap: 10px; min-height: 0; margin: 0; padding: 0; list-style: none; }
.tl-public .tl-poll { position: relative; display: block; padding: 0; border: 1px solid #285172; border-radius: 12px; background: linear-gradient(120deg, #0b2a48, #051d35); box-shadow: none; transition: border-color .18s ease, background-color .18s ease; }
.tl-public .tl-poll:hover { transform: none; border-color: #70bbef; background: #0b2a48; }
.tl-public .tl-poll.selected { border-color: #3db7ff; background: linear-gradient(120deg, #103556, #07233f); }
.tl-public .tl-poll.unavailable, .tl-public .tl-poll.unavailable:hover { border-color: #3c5973; background: #0a233b; }
.tl-public .tl-poll-unavailable { display: block; padding: 0 14px 11px; color: #c2d4e9; font-size: 10.5px; line-height: 1.4; }
.tl-public .tl-poll-select { display: block; width: 100%; margin: 0; padding: 13px 14px 12px; border: 0; border-radius: inherit; background: transparent; color: #edf6ff; text-align: left; cursor: pointer; }
.tl-public .tl-poll-select:focus-visible { outline-offset: -3px; }
.tl-public .tl-poll-select:disabled { cursor: default; }
.tl-public .tl-poll-heading { display: flex; align-items: center; gap: 9px; min-height: 33px; margin-bottom: 12px; }
.tl-public .tl-state-icon { flex: 0 0 31px; width: 31px; height: 33px; margin-right: 1px; fill: #82b7e7; color: #9ec7ed; }
.tl-public .tl-state-icon text { fill: currentColor; font-size: 10px; font-weight: 800; }
.tl-public .tl-state-code { display: grid; place-items: center; border: 1px solid #426a90; border-radius: 7px; font-size: 11px; font-weight: 800; }
.tl-public .tl-poll-identity { flex: 1 1 auto; min-width: 0; }
.tl-public .tl-poll-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; min-width: 0; color: #f2f7ff; font-size: 13px; font-weight: 750; line-height: 1.3; }
.tl-public .tl-poll-title strong { font: inherit; }
.tl-public .tl-competitive { display: inline-flex; align-items: center; min-height: 20px; padding: 2px 7px; border: 1px solid; border-radius: 99px; font-size: 8px; font-weight: 800; letter-spacing: .03em; line-height: 1.3; text-transform: uppercase; white-space: nowrap; }
.tl-public .tl-competitive.close { border-color: #ff7b8e; background: rgba(189, 35, 65, .14); color: #ffd4dc; }
.tl-public .tl-competitive.competitive { border-color: #e7b74d; background: rgba(188, 131, 8, .13); color: #ffdd84; }
.tl-public .tl-competitive.clear { border-color: #50baff; background: rgba(17, 107, 179, .15); color: #99ddff; }
.tl-public .tl-poll-meta { display: block; margin: 6px 0 0; padding-right: 40px; color: #c2d4e9; font-size: 11px; line-height: 1.4; }
.tl-public .tl-poll-results { display: flex; align-items: center; gap: 12px; color: #f4f8ff; font-variant-numeric: tabular-nums; }
.tl-public .tl-party-result { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 auto; color: #f7f9ff; }
.tl-public .tl-party-result + .tl-party-result { padding-left: 10px; border-left: 1px solid #285172; }
.tl-public .tl-party-result strong { font-size: 19px; font-weight: 750; letter-spacing: -.015em; white-space: nowrap; }
.tl-public .tl-party-token { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; border: 1px solid rgba(117, 197, 255, .35); border-radius: 50%; background: #0865bb; color: #fff; font-size: 12px; font-weight: 800; }
.tl-public .tl-party-result.rep .tl-party-token { border-color: rgba(255, 162, 171, .4); background: #cd203c; }
.tl-public .tl-poll-margin { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; flex: 0 0 auto; padding: 4px 9px; border: 1px solid #148fe9; border-radius: 9px; background: #002d50; color: #65c4ff; font-size: 16px; font-weight: 800; line-height: 1; white-space: nowrap; }
.tl-public .tl-poll-margin.rep { border-color: #b5485b; background: #321d30; color: #ff7b8d; }
.tl-public .tl-share-bar { display: flex; height: 8px; margin-top: 11px; overflow: hidden; border-radius: 99px; background: #163651; }
.tl-public .tl-share-bar .dem { display: block; height: 100%; flex: 0 0 auto; border-radius: 99px; background: #329fff; }
.tl-public .tl-share-bar .rep { display: block; height: 100%; flex: 0 0 auto; border-radius: 99px; background: #ff3d59; }
.tl-public .tl-poll-link { position: absolute; top: 34px; right: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 2px; color: #d5e8fa; font-size: 10px; font-weight: 700; text-decoration: none; }
.tl-public .tl-poll-link::after { content: none; }
.tl-public .tl-poll-link .fa { font-size: 10px; color: #b3d8fa; }
.tl-public .tl-poll-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.tl-public .tl-polls { scrollbar-width: thin; scrollbar-color: #557b9e #0b253e; overscroll-behavior: contain; }
.tl-public .tl-polls::-webkit-scrollbar { width: 4px; }
.tl-public .tl-polls::-webkit-scrollbar-track { background: #0b253e; border-radius: 8px; }
.tl-public .tl-polls::-webkit-scrollbar-thumb { background: #557b9e; border-radius: 8px; }
.tl-public .tl-polls-empty { padding: 24px 15px; border: 1px dashed #456582; border-radius: 12px; color: #c5d7ec; font-size: 12px; line-height: 1.5; }
.tl-public .tl-source { max-width: none; margin-top: 14px; color: #b8cde5; font-size: 11px; line-height: 1.55; }
.tl-public .tl-source a { color: #9adaff; text-underline-offset: 3px; }
.tl-public .tl-source .tl-note { white-space: normal; }
.tl-public .tl-source { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px 18px; }
.tl-public .tl-source-links { display: inline-flex; align-items: center; gap: 14px; color: #d4e5f8; font-size: 11px; white-space: nowrap; }
.tl-public .tl-source-links a { display: inline-flex; align-items: center; gap: 6px; }
.tl-public .tl-source-links .fa { font-size: 11px; }
.tl-public .tl-source-copy { max-width: 75ch; font-size: 10.5px; }
.tl-public .tl-note { font-size: 10.5px; }
.tl-public .tl-method-link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 36px; padding: 5px 13px; border: 1px solid #365e86; border-radius: 10px; color: #deedfc; font-size: 11px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.tl-public .tl-method-link:hover { border-color: #86c3f5; background: #0c2a47; }
.tl-public .tl-source a:focus-visible { outline: 2px solid #b2e0ff; outline-offset: 3px; }

/* Se conserva el indicador de la navegación de la página. */
.site-header nav a { position: relative; }
.site-header nav a.is-current { color: #fff; }
.site-header nav a.is-current::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 2px; border-radius: 2px; background: #4aa8ff; }

@media (min-width: 1180px) {
  .tl-public .tl-card { display: grid; grid-template-columns: minmax(0, 1fr) 388px; grid-template-rows: auto 1fr; gap: 0 16px; }
  .tl-public .tl-toolbar, .tl-public .tl-stage { grid-column: 1; }
  .tl-public .tl-latest { grid-column: 2; grid-row: 1 / -1; contain: size; min-height: 0; margin: -12px -12px -12px 0; padding: 23px 16px 12px; border: 0; border-left: 1px solid rgba(98, 152, 206, .34); border-radius: 0; background: rgba(2, 24, 45, .56); }
  .tl-public .tl-polls { flex: 1 1 0; overflow-y: auto; grid-template-columns: 1fr; padding-right: 5px; }
}
@media (min-width: 1180px) and (max-width: 1530px) {
  .tl-public .tl-card { grid-template-columns: minmax(0, 1fr) 352px; gap: 0 12px; }
  .tl-public .tl-toolbar { gap: 8px; }
  .tl-public .tl-tabs { gap: 6px; }
  .tl-public .tl-tabs button { gap: 7px; padding: 0 11px; font-size: 12px; }
  .tl-public .tl-search { flex-basis: 145px; width: 145px; }
  .tl-public .tl-period-box { padding-inline: 10px; gap: 7px; }
  .tl-public .tl-readout-summary { width: 100%; margin: 0; justify-content: flex-start; }
  .tl-public .tl-tiles { gap: 9px; }
  .tl-public .tl-tile { grid-template-columns: 42px minmax(0, 1fr); grid-template-areas: "icon label" "icon value" "icon delta"; column-gap: 10px; padding: 12px; }
  .tl-public .tl-tile-icon { width: 42px; height: 42px; font-size: 21px; }
  .tl-public .tl-tile.edge { grid-template-columns: 42px minmax(0, 1fr); grid-template-areas: "icon body"; }
  .tl-public .tl-delta { display: flex; flex-wrap: wrap; gap: 2px 5px; font-size: 12px; }
  .tl-public .tl-delta small { max-width: none; font-size: 9px; }
  .tl-public .tl-poll-select { padding-inline: 11px; }
  .tl-public .tl-poll-results { gap: 8px; }
  .tl-public .tl-party-result { gap: 6px; }
  .tl-public .tl-party-result + .tl-party-result { padding-left: 8px; }
  .tl-public .tl-party-result strong { font-size: 17px; }
  .tl-public .tl-poll-margin { padding-inline: 7px; font-size: 14px; }
}
@media (max-width: 1179px) {
  .tl-public .tl-toolbar { gap: 12px; }
  .tl-public .tl-tabs { width: 100%; }
  .tl-public .tl-search { flex: 1 1 auto; width: auto; }
  .tl-public .tl-period select { max-width: 175px; }
  .tl-public .tl-readout-summary { justify-content: flex-start; width: 100%; margin-left: 0; }
  .tl-public .tl-polls { max-height: 610px; overflow-y: auto; padding-right: 5px; }
  .tl-public .tl-source { grid-template-columns: 1fr auto; }
  .tl-public .tl-source-copy { grid-column: 1 / -1; grid-row: 2; }
  .tl-public .tl-source .tl-note { grid-column: 1; }
}
@media (min-width: 761px) and (max-width: 960px) {
  .tl-public .tl-tiles { grid-template-columns: 1fr 1fr; }
  .tl-public .tl-tile.edge { grid-column: 1 / -1; min-height: 84px; }
  .tl-public .tl-tile.edge .tl-tile-body { grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 5px 14px; }
  .tl-public .tl-tile.edge .tl-tile-label { grid-column: 1; }
  .tl-public .tl-tile.edge .tl-edge { grid-column: 2; grid-row: 1 / 3; }
  .tl-public .tl-tile.edge .tl-edge-change { grid-column: 3; grid-row: 1; }
  .tl-public .tl-tile.edge .tl-tile-body > small { grid-column: 3; grid-row: 2; }
}
@media (max-width: 760px) {
  .tl-public { padding: 30px 0 28px; }
  .tl-public .wrap { width: calc(100% - 24px); }
  .tl-public .tl-head { margin-bottom: 20px; }
  .tl-public .tl-head h2 { font-size: clamp(32px, 8vw, 43px); margin-block: 9px 10px; }
  .tl-public .tl-intro { font-size: 14px; line-height: 1.5; }
  .tl-public .tl-card { padding: 10px; border-radius: 16px; }
  .tl-public .tl-toolbar { gap: 10px; }
  .tl-public .tl-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin: 0; }
  .tl-public .tl-tabs button { min-height: 44px; gap: 8px; padding: 0 7px; font-size: 12px; }
  .tl-public .tl-search { flex: 1 1 100%; min-width: 0; }
  .tl-public .tl-period { width: 100%; }
  .tl-public .tl-period-box { width: 100%; }
  .tl-public .tl-period select { flex: 1; max-width: none; }
  .tl-public .tl-stage { padding: 15px 10px 10px; }
  .tl-public .tl-series-title { font-size: 25px; }
  .tl-public .tl-margin { padding: 4px 12px; font-size: 14px; }
  .tl-public .tl-readout-summary { gap: 4px 10px; font-size: 10px; }
  .tl-public .tl-readout-summary > span + span { padding-left: 0; border-left: 0; }
  .tl-public .tl-tiles { grid-template-columns: 1fr; gap: 9px; margin-top: 13px; }
  .tl-public .tl-tile { min-height: 90px; grid-template-columns: 46px minmax(0, 1fr) auto; column-gap: 11px; padding: 12px; }
  .tl-public .tl-tile-icon { width: 46px; height: 46px; font-size: 22px; }
  .tl-public .tl-tile > strong { font-size: 40px; }
  .tl-public .tl-tile.edge { min-height: 100px; grid-template-columns: 46px minmax(0, 1fr); }
  .tl-public .tl-delta { font-size: 12px; }
  .tl-public .tl-delta small { max-width: 80px; font-size: 10px; }
  .tl-public .tl-chart { min-height: 290px; margin-left: -6px; margin-right: -6px; }
  .tl-public .tl-controls { gap: 12px; }
  .tl-public .tl-ranges { width: 100%; }
  .tl-public .tl-ranges button { flex: 1; }
  .tl-public .tl-legend { justify-content: flex-start; gap: 6px 12px; }
  .tl-public .tl-legend-item { font-size: 10px; }
  .tl-public .tl-latest { padding: 14px 10px; }
  .tl-public .tl-latest-head { flex-wrap: wrap; }
  .tl-public .tl-latest-head h3 { font-size: 9px; }
  .tl-public .tl-poll-tabs { flex-wrap: wrap; gap: 5px; }
  .tl-public .tl-poll-tabs button { min-height: 38px; padding-inline: 7px; font-size: 10px; }
  .tl-public .tl-polls { grid-template-columns: minmax(0, 1fr); max-height: 650px; }
  .tl-public .tl-poll-select { padding: 12px 10px; }
  .tl-public .tl-poll-heading { gap: 7px; }
  .tl-public .tl-poll-title { font-size: 12px; }
  .tl-public .tl-poll-results { gap: 6px; }
  .tl-public .tl-party-result { gap: 5px; }
  .tl-public .tl-party-result + .tl-party-result { padding-left: 6px; }
  .tl-public .tl-party-result strong { font-size: 17px; }
  .tl-public .tl-party-token { width: 24px; height: 24px; flex-basis: 24px; font-size: 11px; }
  .tl-public .tl-poll-margin { min-height: 30px; padding: 4px 7px; font-size: 14px; }
  .tl-public .tl-poll-link { right: 9px; top: 34px; }
  .tl-public .tl-source { font-size: 10.5px; line-height: 1.6; }
  .tl-public .tl-source { display: flex; flex-wrap: wrap; gap: 10px; }
  .tl-public .tl-source-links { flex-wrap: wrap; gap: 6px 13px; }
  .tl-public .tl-source-copy { flex-basis: 100%; }
  .tl-public .tl-source .tl-note { flex: 1 1 180px; }
  .site-header nav a.is-current::after { bottom: -4px; }
}
@media (max-width: 370px) {
  .tl-public .tl-tile { grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 8px; padding-inline: 9px; }
  .tl-public .tl-tile-icon { width: 40px; height: 40px; font-size: 20px; }
  .tl-public .tl-tile > strong { font-size: 34px; }
  .tl-public .tl-delta small { max-width: 65px; font-size: 9px; }
  .tl-public .tl-party-result strong { font-size: 15px; }
  .tl-public .tl-poll-margin { font-size: 12px; padding-inline: 5px; }
}
@media (hover: hover) and (pointer: fine) {
  .tl-public .tl-tabs button:not([aria-pressed="true"]):hover, .tl-public .tl-poll-tabs button:not([aria-pressed="true"]):hover { border-color: #79b7e8; background: #14324f; }
  .tl-public .tl-tile:not(.edge):hover { border-color: rgba(var(--tint), .75); }
  .tl-public .tl-legend-item:hover { color: #fff; }
}
@media (prefers-reduced-motion: no-preference) {
  .tl-public .tl-ribbons { animation: tl-ribbons-drift 24s ease-in-out infinite alternate; }
  .tl-public .tl-stars use { animation: tl-twinkle 5.4s ease-in-out infinite; }
  .tl-public .tl-stars use:nth-child(2n) { animation-delay: 1.6s; }
  .tl-public .tl-stars use:nth-child(3n) { animation-delay: 3.1s; }
  .tl-public .tl-tip:not([hidden]) { animation: tl-tip-in .16s cubic-bezier(.23, 1, .32, 1); }
  .tl-public .tl-readout.tl-swap .tl-tile { animation: tl-rise .4s cubic-bezier(.23, 1, .32, 1) both; }
  .tl-public .tl-readout.tl-swap .tl-tile:nth-child(2) { animation-delay: .045s; }
  .tl-public .tl-readout.tl-swap .tl-tile:nth-child(3) { animation-delay: .09s; }
  .tl-public.tl-motion-paused .tl-ribbons, .tl-public.is-offscreen .tl-ribbons,
  .tl-public.tl-motion-paused .tl-stars use, .tl-public.is-offscreen .tl-stars use { animation-play-state: paused; }
}
@keyframes tl-ribbons-drift { from { transform: translate3d(-1%, 0, 0) scale(1.02); } to { transform: translate3d(1%, 1%, 0) scale(1.03); } }
@keyframes tl-twinkle { 0%, 100% { opacity: .12; } 50% { opacity: .35; } }
@keyframes tl-tip-in { from { opacity: 0; scale: .96; } }
@media (prefers-reduced-motion: reduce) {
  .tl-public .tl-tabs button, .tl-public .tl-tile, .tl-public .tl-poll, .tl-public .tl-legend-item,
  .tl-public .tl-line, .tl-public .tl-band, .tl-public .tl-dot { transition: none; }
}

/* ===== Panel interno · Proyecciones y simulaciones (admin_sim.js) ===== */
.sim-panel {
  --sim-ink: #0a3161;
  --sim-muted: #5c687d;
  --sim-line: #e3e8f0;
  --sim-wash: #f5f8fc;
  --sim-dem: #2f6fc0;
  --sim-dem-soft: #8db5e3;
  --sim-rep: #c6473f;
  --sim-rep-soft: #eba59b;
  --sim-toss: #b5b9c0;
  margin: 28px 0 34px;
  padding: 28px 30px 30px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(10, 33, 71, .06), 0 24px 54px -26px rgba(10, 33, 71, .3);
  position: relative;
}
.sim-panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; border-radius: 20px 20px 0 0; background: linear-gradient(90deg, var(--sim-ink) 0 70%, var(--sim-rep) 70%); }
.sim-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 28px; }
.sim-head h2 { margin: 6px 0 8px; color: var(--sim-ink); font-family: var(--serif); font-size: clamp(28px, 2.6vw, 38px); letter-spacing: -.02em; }
.sim-head .helper { max-width: 72ch; margin: 0; }
.sim-head-actions { display: flex; align-items: center; gap: 14px; }
.sim-status { margin: 0; color: var(--sim-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* Controles. */
.sim-controls {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) minmax(220px, 1fr) auto;
  align-items: end;
  gap: 18px 26px;
  margin: 22px 0 18px;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--sim-wash);
}
.sim-field { display: grid; gap: 8px; margin: 0; }
.sim-label { display: flex; justify-content: space-between; gap: 10px; color: #33415c; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sim-label output { color: var(--sim-ink); font-size: 13px; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.sim-seg, .sim-tabs { display: inline-flex; flex-wrap: wrap; padding: 3px; border-radius: 11px; background: #e8edf5; }
.sim-seg button, .sim-tabs button {
  min-height: 34px;
  padding: 6px 13px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #33415c;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .16s cubic-bezier(.23, 1, .32, 1);
}
.sim-seg button[aria-pressed="true"], .sim-tabs button[aria-pressed="true"] { background: #fff; color: var(--sim-ink); box-shadow: 0 1px 3px rgba(10, 33, 71, .16); }
.sim-seg button:active, .sim-tabs button:active, .sim-reset:active { transform: scale(.97); }
.sim-scale { display: flex; justify-content: space-between; gap: 8px; color: var(--sim-muted); font-size: 11px; }
.sim-scale b { font-weight: 700; }
.sim-scale .dem { color: var(--sim-dem); }
.sim-scale .rep { color: var(--sim-rep); }
.sim-slider { --p: 50%; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.sim-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--sim-ink) var(--p), #d5dce8 var(--p)); }
.sim-slider::-moz-range-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--sim-ink) var(--p), #d5dce8 var(--p)); }
.sim-slider.two-sided::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--sim-rep-soft), #e6e2ef 50%, var(--sim-dem-soft)); }
.sim-slider.two-sided::-moz-range-track { background: linear-gradient(90deg, var(--sim-rep-soft), #e6e2ef 50%, var(--sim-dem-soft)); }
.sim-slider::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -7px; border: 3px solid #fff; border-radius: 50%; background: var(--sim-ink); box-shadow: 0 2px 6px rgba(10, 33, 71, .35); -webkit-appearance: none; transition: transform .15s ease; }
.sim-slider::-moz-range-thumb { width: 14px; height: 14px; border: 3px solid #fff; border-radius: 50%; background: var(--sim-ink); box-shadow: 0 2px 6px rgba(10, 33, 71, .35); }
.sim-slider:active::-webkit-slider-thumb { transform: scale(1.15); }
.sim-slider:focus-visible { outline: 2px solid var(--sim-ink); outline-offset: 4px; border-radius: 6px; }

/* Indicadores. */
.sim-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.sim-kpi { display: grid; align-content: start; gap: 4px; padding: 16px 18px; border-radius: 14px; background: var(--sim-wash); box-shadow: inset 0 0 0 1px var(--sim-line); }
.sim-kpi-label { color: #33415c; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.sim-kpi-value { color: var(--sim-ink); font-family: var(--serif); font-size: 28px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sim-kpi.dem .sim-kpi-value { color: var(--sim-dem); }
.sim-kpi.rep .sim-kpi-value { color: var(--sim-rep); }
.sim-kpi.warn { background: #fff6e6; box-shadow: inset 0 0 0 1px #f1d9a7; }
.sim-kpi.warn .sim-kpi-value { color: #a05a00; }
.sim-kpi-note { color: var(--sim-muted); font-size: 12px; line-height: 1.45; }

/* Histograma y mapa. */
.sim-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
.sim-card { margin: 0; padding: 18px 20px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--sim-line); }
.sim-card figcaption, .sim-table-head { display: grid; gap: 4px; margin-bottom: 12px; }
.sim-card figcaption strong, .sim-table-head strong { color: var(--sim-ink); font-family: var(--serif); font-size: 20px; font-weight: 600; }
.sim-card figcaption small, .sim-table-head small { color: var(--sim-muted); font-size: 12.5px; line-height: 1.5; }
.sim-hist-svg, .sim-map-svg { display: block; width: 100%; height: auto; }
.sim-bar.dem { fill: var(--sim-dem); }
.sim-bar.rep { fill: var(--sim-rep); }
.sim-bar.tie { fill: var(--sim-toss); }
.sim-axis { fill: var(--sim-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.sim-axis-title { fill: #33415c; font-size: 11.5px; font-weight: 700; }
.sim-mean { stroke: var(--sim-ink); stroke-width: 1.5; stroke-dasharray: 4 4; }
.sim-mean-label { fill: var(--sim-ink); font-size: 11.5px; font-weight: 800; }
.sim-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; color: #46536b; font-size: 12px; }
.sim-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sim-legend span::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--sim-toss); }
.sim-legend .dem::before { background: var(--sim-dem); }
.sim-legend .rep::before { background: var(--sim-rep); }
.sim-scale-legend span::before { background: var(--c, var(--sim-toss)); }
.sim-scale-legend .dem.safe, .sim-state.dem.safe { --c: #1f5f99; }
.sim-scale-legend .dem.likely, .sim-state.dem.likely { --c: #3b78bd; }
.sim-scale-legend .dem.lean, .sim-state.dem.lean { --c: #8db5e3; }
.sim-scale-legend .rep.safe, .sim-state.rep.safe { --c: #a8352d; }
.sim-scale-legend .rep.likely, .sim-state.rep.likely { --c: #d1665a; }
.sim-scale-legend .rep.lean, .sim-state.rep.lean { --c: #eba59b; }
.sim-scale-legend .tossup, .sim-state.tossup { --c: #b5b9c0; }
.sim-tabs { margin-bottom: 10px; }
.sim-state { fill: var(--c, #e9edf3); stroke: #fff; stroke-width: 1; stroke-linejoin: round; transition: fill .3s ease, opacity .2s ease; }
.sim-state.none { fill: #e9edf3; }
.sim-state.oth { fill: #b49bdc; }
@media (hover: hover) and (pointer: fine) { .sim-state:not(.none):hover { opacity: .82; } }
.sim-state-label { fill: #fff; font-size: 13px; font-weight: 800; paint-order: stroke; stroke: rgba(10, 33, 71, .35); stroke-width: 2px; pointer-events: none; }

/* Tabla. */
.sim-table-wrap { overflow-x: auto; }
.sim-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sim-table th { padding: 10px 12px; border-bottom: 1px solid var(--sim-line); color: var(--sim-muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.sim-table td { padding: 12px; border-bottom: 1px solid #eef1f6; vertical-align: middle; }
.sim-table tr:last-child td { border-bottom: 0; }
.sim-table tbody tr { transition: background-color .15s ease; }
.sim-table tbody tr:hover { background: #f8fafd; }
.sim-table tr.is-flip { background: #fff8ea; }
.sim-where, .sim-who, .sim-proj { display: table-cell; }
.sim-where strong, .sim-proj strong { display: block; color: var(--sim-ink); font-weight: 800; }
.sim-proj strong { font-family: var(--serif); font-size: 17px; font-variant-numeric: tabular-nums; }
.sim-where small, .sim-proj small { color: var(--sim-muted); font-size: 12px; }
.sim-who span { display: block; font-weight: 700; white-space: nowrap; }
.sim-table .dem { color: var(--sim-dem); }
.sim-table .rep { color: var(--sim-rep); }
.sim-table .oth { color: #6d4fa8; }
.sim-prob { display: grid; gap: 5px; min-width: 210px; }
.sim-prob-bar { display: flex; height: 10px; overflow: hidden; border-radius: 6px; background: #eef1f6; }
.sim-prob-bar span { transition: width .45s cubic-bezier(.23, 1, .32, 1); }
.sim-prob-bar .dem { background: var(--sim-dem); }
.sim-prob-bar .rep { background: var(--sim-rep); }
.sim-prob-bar .oth { background: #9b7fd1; }
.sim-prob-bar span + span { box-shadow: inset 2px 0 0 #fff; }
.sim-prob-labels { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sim-cat { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #eef1f6; color: #33415c; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.sim-cat.tossup { background: #eceef1; color: #4a515c; }
.sim-cat.lean { background: #eef3fb; color: #2a5a93; }
.sim-cat.likely { background: #e3edf9; color: #1f4f86; }
.sim-cat.safe { background: #0a3161; color: #fff; }
.sim-flip { display: inline-block; margin-top: 6px; padding: 2px 9px; border-radius: 999px; background: #a05a00; color: #fff; font-size: 11px; font-weight: 800; }

/* Método y estado vacío. */
.sim-method { margin-top: 16px; padding: 14px 18px; border-radius: 14px; background: var(--sim-wash); color: #33415c; font-size: 13.5px; line-height: 1.6; }
.sim-method summary { color: var(--sim-ink); font-weight: 800; cursor: pointer; }
.sim-method ol { margin: 10px 0 0; padding-left: 20px; }
.sim-method li + li { margin-top: 6px; }
.sim-panel.is-empty .sim-kpis, .sim-panel.is-empty .sim-grid, .sim-panel.is-empty .sim-table-card { opacity: .35; pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
  .sim-hist-svg.animate .sim-bar { transform-box: fill-box; transform-origin: bottom; animation: sim-bar-in .55s cubic-bezier(.23, 1, .32, 1) calc(var(--i, 0) * 18ms) both; }
  .sim-kpis .sim-kpi { animation: sim-fade .35s ease-out both; }
}
@keyframes sim-bar-in { from { transform: scaleY(0); opacity: 0; } }
@keyframes sim-fade { from { opacity: .4; } }
@media (max-width: 1100px) {
  .sim-controls { grid-template-columns: 1fr 1fr; }
  .sim-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sim-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sim-panel { padding: 22px 16px; }
  .sim-controls { grid-template-columns: 1fr; padding: 16px; }
  .sim-kpis { grid-template-columns: 1fr; }
}

/* Histograma: llena la altura de su tarjeta. */
.sim-grid .sim-card { display: flex; flex-direction: column; }
.sim-hist { flex: 1; display: flex; align-items: center; }

/* Tabla de proyecciones en el teléfono: cada contienda es una tarjeta. */
@media (max-width: 760px) {
  .sim-table, .sim-table tbody, .sim-table tr, .sim-table td { display: block; }
  .sim-table thead { display: none; }
  .sim-table tr { padding: 14px 4px; border-bottom: 1px solid var(--sim-line); }
  .sim-table td { padding: 4px 0; border: 0; }
  .sim-who span { white-space: normal; }
  .sim-prob { min-width: 0; }
}

/* ===== Panel interno: diseño general =====
   Fondo frío, navegación fija por secciones y todas las secciones como tarjetas blancas con la misma
   elevación y el filete azul y rojo del panel público. */
body:has(.internal) { background: linear-gradient(180deg, #f3f6fb 0%, #eef2f8 100%); }
.internal h1 { color: #0a3161; letter-spacing: -.02em; }
.internal .lead { max-width: 78ch; color: #46536b; }
.admin-nav {
  position: sticky;
  top: calc(var(--admin-header, 75px) + 8px);
  z-index: 20;
  display: flex;
  gap: 4px;
  margin: 18px 0 6px;
  padding: 6px;
  overflow-x: auto;
  border-radius: 14px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 2px rgba(10, 33, 71, .06), 0 10px 28px -16px rgba(10, 33, 71, .35);
  scrollbar-width: none;
}
.admin-nav a {
  flex: none;
  padding: 9px 14px;
  border-radius: 10px;
  color: #33415c;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.admin-nav a:hover { background: #eef2f8; color: #0a3161; }
.admin-nav a.is-current { background: #0a3161; color: #fff; }
.internal .internal-overview .stat-card {
  border: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(10, 33, 71, .06), 0 12px 30px -18px rgba(10, 33, 71, .3);
}
.internal .stat-card strong { color: #0a3161; font-family: var(--serif); }
.internal .watch-panel, .internal .race-work-panel, .internal .list-panel, .internal .form-panel, .internal .audit-panel, .internal .login-card {
  position: relative;
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(10, 33, 71, .06), 0 24px 54px -28px rgba(10, 33, 71, .3);
}
.internal .watch-panel::before, .internal .race-work-panel::before, .internal .audit-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, #0a3161 0 70%, #c6473f 70%);
}
.internal .watch-panel, .internal .race-work-panel { padding: 26px 28px; margin: 22px 0; }
.internal .audit-panel { padding: 24px 26px; }
.internal .audit-panel li { border: 0; border-radius: 10px; background: #f5f8fc; color: #46536b; }
.internal .audit-panel li strong { color: #0a3161; }
.internal .watch-item { border-radius: 14px; }
.internal section[id] { scroll-margin-top: 150px; }
@media (max-width: 640px) {
  .internal .watch-panel, .internal .race-work-panel { padding: 20px 16px; }
}

/* ===== Predicción simple (v2): primero la respuesta, lo técnico es opcional ===== */
.sim-intro { max-width: 70ch; margin: 0; color: #46536b; font-size: 15px; line-height: 1.6; }

/* 1. La respuesta. */
.sim-answer { margin: 22px 0 18px; padding: 24px 26px; border-radius: 16px; background: linear-gradient(180deg, #f6f9fd, #eef3fa); }
.sim-sentence { margin: 0; color: #0a3161; font-family: var(--serif); font-size: clamp(22px, 2.1vw, 30px); line-height: 1.3; letter-spacing: -.01em; }
.sim-sentence b { font-size: 1.25em; font-variant-numeric: tabular-nums; }
.sim-sentence b.dem { color: var(--sim-dem); }
.sim-sentence b.rep { color: var(--sim-rep); }
.sim-subsentence { margin: 8px 0 18px; color: #46536b; font-size: 15px; }
.sim-scenario-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: #fff3dc; color: #6b4300; font-size: 14px; }
.sim-link { padding: 0; border: 0; background: none; color: #0a3161; font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
.sim-strip { display: flex; gap: 4px; height: 34px; }
.sim-seat { flex: 1 1 0; min-width: 6px; border-radius: 6px; background: var(--c, #b5b9c0); transition: transform .2s cubic-bezier(.23, 1, .32, 1); }
.sim-seat.dem.safe { --c: #1f5f99; } .sim-seat.dem.likely { --c: #3b78bd; } .sim-seat.dem.lean { --c: #8db5e3; }
.sim-seat.rep.safe { --c: #a8352d; } .sim-seat.rep.likely { --c: #d1665a; } .sim-seat.rep.lean { --c: #eba59b; }
.sim-seat.tossup { --c: #b5b9c0; } .sim-seat.oth { --c: #b49bdc; }
@media (hover: hover) and (pointer: fine) { .sim-seat:hover { transform: scaleY(1.18); } }
.sim-strip-ends { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; font-weight: 800; }
.sim-strip-ends .dem { color: var(--sim-dem); }
.sim-strip-ends .rep { color: var(--sim-rep); }

/* 2. Grupos por ganador. */
.sim-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.sim-group { padding: 16px; border-radius: 16px; background: #f7f9fc; box-shadow: inset 0 0 0 1px var(--sim-line); }
.sim-group.dem { background: #f2f7fd; }
.sim-group.rep { background: #fdf4f3; }
.sim-group.toss { background: #f4f5f7; }
.sim-group.oth { grid-column: 1 / -1; }
.sim-group h3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; color: #0a3161; font-size: 15px; font-weight: 800; }
.sim-group.dem h3 { color: var(--sim-dem); }
.sim-group.rep h3 { color: var(--sim-rep); }
.sim-group.toss h3 { color: #4a515c; }
.sim-group-count { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; background: #fff; font-size: 15px; font-variant-numeric: tabular-nums; box-shadow: 0 1px 3px rgba(10, 33, 71, .12); }
.sim-group ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sim-chip { padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(10, 33, 71, .06), 0 6px 16px -10px rgba(10, 33, 71, .25); }
.sim-chip-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sim-chip-head strong { color: #0a3161; font-size: 14px; }
.sim-chip-who { margin: 6px 0 8px; color: #33415c; font-size: 13.5px; line-height: 1.45; }
.sim-chip-who b.dem, .sim-detail .dem { color: var(--sim-dem); }
.sim-chip-who b.rep, .sim-detail .rep { color: var(--sim-rep); }
.sim-chip-who b.oth { color: #6d4fa8; }
.sim-chip-bar { display: flex; height: 6px; overflow: hidden; border-radius: 4px; background: #eef1f6; }
.sim-chip-bar span { transition: width .45s cubic-bezier(.23, 1, .32, 1); }
.sim-chip-bar .dem { background: var(--sim-dem); }
.sim-chip-bar .rep { background: var(--sim-rep); }
.sim-chip-bar .oth { background: #9b7fd1; }
.sim-chip-bar span + span { opacity: .35; }
.sim-chip-vs { margin: 7px 0 0; color: #6b778c; font-size: 12px; }
.sim-chip-empty { color: #6b778c; font-size: 13px; }
.sim-chance { flex: none; display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.sim-chance.safe { background: #0a3161; color: #fff; }
.sim-chance.likely { background: #dfe9f7; color: #1f4f86; }
.sim-chance.lean { background: #eef3fb; color: #2a5a93; }
.sim-chance.tossup { background: #eceef1; color: #4a515c; }
.sim-key { margin: 12px 0 22px; color: #5c687d; font-size: 12.5px; line-height: 1.9; }

/* 3-5. Mapa, detalle y «¿Y si…?». */
.sim-map-card { margin-bottom: 16px; }
.sim-map-card .sim-map { max-width: 820px; margin: 0 auto; }
.sim-state-label { font-size: 12px; }
.sim-detail, .sim-whatif { margin-bottom: 14px; padding: 0; }
.sim-detail > summary, .sim-whatif > summary { display: grid; gap: 3px; padding: 16px 20px 16px 48px; position: relative; cursor: pointer; list-style: none; }
.sim-detail > summary::-webkit-details-marker, .sim-whatif > summary::-webkit-details-marker { display: none; }
.sim-detail > summary::before, .sim-whatif > summary::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 21px;
  width: 9px;
  height: 9px;
  border-right: 2.5px solid #0a3161;
  border-bottom: 2.5px solid #0a3161;
  transform: rotate(-45deg);
  transition: transform .2s cubic-bezier(.23, 1, .32, 1);
}
.sim-detail[open] > summary::before, .sim-whatif[open] > summary::before { transform: rotate(45deg); }
.sim-detail > summary strong, .sim-whatif > summary strong { color: #0a3161; font-size: 16px; }
.sim-detail > summary small, .sim-whatif > summary small { color: #5c687d; font-size: 12.5px; }
.sim-detail .sim-table-wrap { padding: 0 20px 16px; }
.sim-num { color: #0a3161; font-weight: 800; font-variant-numeric: tabular-nums; }
.sim-range-cell { color: #46536b; font-size: 12.5px; }
.sim-whatif-body { display: grid; gap: 20px; padding: 4px 20px 20px; }
.sim-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.sim-presets button {
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--sim-line);
  border-radius: 999px;
  background: #fff;
  color: #33415c;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .16s cubic-bezier(.23, 1, .32, 1);
}
.sim-presets button:nth-child(-n+2) { color: var(--sim-rep); }
.sim-presets button:nth-child(n+4) { color: var(--sim-dem); }
.sim-presets button[aria-pressed="true"] { border-color: #0a3161; background: #0a3161; color: #fff; }
.sim-presets button:active { transform: scale(.97); }
.sim-help { color: #5c687d; font-size: 12.5px; line-height: 1.5; }
.sim-reset { justify-self: start; }
.sim-hist-wrap { margin: 0; padding-top: 16px; border-top: 1px solid var(--sim-line); }
.sim-hist-wrap figcaption { display: grid; gap: 3px; margin-bottom: 8px; }
.sim-hist-wrap figcaption strong { color: #0a3161; font-size: 15px; }
.sim-hist-wrap figcaption small { color: #5c687d; font-size: 12.5px; }
.sim-hist-wrap .sim-hist-svg { max-width: 680px; }
@media (prefers-reduced-motion: no-preference) {
  .sim-seat { animation: sim-seat-in .4s cubic-bezier(.23, 1, .32, 1) calc(var(--i, 0) * 25ms) both; }
}
@keyframes sim-seat-in { from { opacity: 0; transform: scaleY(.4); } }
@media (max-width: 1000px) {
  .sim-groups { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sim-answer { padding: 18px 16px; }
  .sim-strip { gap: 2px; height: 28px; }
  .sim-detail > summary, .sim-whatif > summary { padding-right: 14px; }
  .sim-detail .sim-table-wrap, .sim-whatif-body { padding-left: 14px; padding-right: 14px; }
}

/* ===== Predicción v3: marcador, tarjetas compactas y barra de secciones sólida ===== */
.admin-nav { top: var(--admin-header, 75px); margin-top: 18px; border-radius: 0 0 14px 14px; background: #fff; box-shadow: 0 8px 22px -14px rgba(10, 33, 71, .45); }

/* Marcador. */
.sim-answer { padding: 22px; }
.sim-board { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; margin-bottom: 14px; }
.sim-board-cell { display: grid; justify-items: center; align-content: center; gap: 2px; padding: 16px 18px; border-radius: 14px; background: #fff; text-align: center; box-shadow: 0 1px 2px rgba(10, 33, 71, .06), 0 10px 26px -18px rgba(10, 33, 71, .4); }
.sim-board-cell strong { font-family: var(--serif); font-size: clamp(44px, 4.4vw, 64px); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.sim-board-cell.dem strong { color: var(--sim-dem); }
.sim-board-cell.rep strong { color: var(--sim-rep); }
.sim-board-cell.toss { min-width: 190px; background: #f4f5f7; }
.sim-board-cell.toss strong { color: #4a515c; font-size: clamp(32px, 3vw, 42px); }
.sim-board-label { color: #0a3161; font-size: 15px; font-weight: 800; }
.sim-board-cell.dem .sim-board-label { color: var(--sim-dem); }
.sim-board-cell.rep .sim-board-label { color: var(--sim-rep); }
.sim-board-cell.toss .sim-board-label { color: #4a515c; }
.sim-board-cell small { color: #5c687d; font-size: 12.5px; }
.sim-answer .sim-subsentence { margin: 0 0 14px; font-size: 13.5px; text-align: center; }

/* Grupos y tarjetas compactas. */
.sim-group { padding: 14px; }
.sim-group h3 { align-items: flex-start; }
.sim-group h3 > span:first-child { display: grid; gap: 2px; }
.sim-group h3 small { color: #6b778c; font-size: 11.5px; font-weight: 600; }
.sim-group ul { gap: 8px; }
.sim-chip {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 12px 14px 14px;
  overflow: hidden;
  transition: transform .2s cubic-bezier(.23, 1, .32, 1), box-shadow .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .sim-chip:hover { transform: translateY(-1px); box-shadow: 0 1px 2px rgba(10, 33, 71, .06), 0 12px 24px -12px rgba(10, 33, 71, .35); }
}
.sim-chip-text { display: grid; gap: 2px; min-width: 0; }
.sim-chip-race { color: #0a3161; font-size: 14px; font-weight: 800; }
.sim-chip-names { overflow: hidden; color: #46536b; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.sim-chip-names b { font-weight: 800; }
.sim-chip-names b.dem { color: var(--sim-dem); }
.sim-chip-names b.rep { color: var(--sim-rep); }
.sim-chip-names b.oth { color: #6d4fa8; }
.sim-chip-text small { color: #6b778c; font-size: 11.5px; }
.sim-chip-score { display: grid; justify-items: end; gap: 4px; }
.sim-chip-score strong { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.sim-chip-score strong.dem { color: var(--sim-dem); }
.sim-chip-score strong.rep { color: var(--sim-rep); }
.sim-chip-score strong.oth { color: #6d4fa8; }
.sim-chip.tossup .sim-chip-score strong { color: #4a515c; }
.sim-chip-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 0; background: #eef1f6; }
.sim-chip-bar span { display: block; height: 100%; }
.sim-chip-bar span.dem { background: var(--sim-dem); }
.sim-chip-bar span.rep { background: var(--sim-rep); }
.sim-chip-bar span.oth { background: #9b7fd1; }
.sim-chip.tossup .sim-chip-bar span { opacity: .55; }
@media (max-width: 760px) {
  .sim-board { grid-template-columns: 1fr 1fr; }
  .sim-board-cell.toss { grid-column: 1 / -1; grid-row: 2; min-width: 0; }
}
.sim-strip-ends .toss { color: #4a515c; }
@media (max-width: 640px) { .sim-strip-ends { gap: 12px; font-size: 12px; } .sim-strip-ends .toss { display: none; } .sim-strip-ends .rep { text-align: right; } }

/* ===== Panel interno: aplicación con menú lateral (admin_shell.js) ===== */
.admin-app { --side-w: 268px; --ink: #0a3161; --navy: #071a33; --navy-2: #0b2447; --line-soft: #e3e8f0; margin: 0; background: #eef2f8; }
.admin-app .fa { width: 1em; height: 1em; flex: none; fill: currentColor; }
.app-shell { min-height: 100vh; }

/* Menú lateral. */
.side {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: var(--side-w);
  padding: 20px 14px 16px;
  overflow-y: auto;
  background:
    radial-gradient(ellipse 140% 60% at 0% 0%, rgba(60, 120, 200, .22), transparent 60%),
    linear-gradient(180deg, var(--navy-2) 0%, var(--navy) 60%);
  color: #dbe5f3;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .2) transparent;
}
.side-brand { display: grid; gap: 6px; padding: 6px 10px 18px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.side-brand img { width: 168px; height: auto; }
.side-brand span { color: #9fb2cc; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.side-session { display: flex; align-items: center; gap: 12px; margin: 16px 2px 6px; padding: 12px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; background: rgba(255, 255, 255, .05); }
.side-session[hidden] { display: none; }
.side-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #1d4f8f; color: #fff; font-size: 17px; }
.side-session small { display: block; color: #8fa6c4; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.side-session strong { color: #fff; font-size: 14px; }
.side-nav { display: grid; gap: 3px; margin-top: 8px; }
.side-group { margin: 16px 12px 6px; color: #7f95b3; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.side-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 11px;
  color: #cfdbec;
  font-size: 14.5px;
  font-weight: 650;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.side-link > .fa:first-child { display: grid; width: 18px; height: 18px; padding: 7px; box-sizing: content-box; border-radius: 9px; background: rgba(255, 255, 255, .06); color: #a9bfdc; transition: background-color .15s ease, color .15s ease; }
.side-link > span:not(.side-count) { flex: 1; }
.side-link.external > .fa:last-child { width: 11px; height: 11px; opacity: .6; }
@media (hover: hover) and (pointer: fine) {
  .side-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
}
.side-link.is-current { background: linear-gradient(90deg, rgba(74, 150, 255, .22), rgba(74, 150, 255, .08)); color: #fff; box-shadow: inset 0 0 0 1px rgba(120, 180, 255, .35); }
.side-link.is-current > .fa:first-child { background: #2f7ae5; color: #fff; }
.side-link:focus-visible { outline: 2px solid #8fc2ff; outline-offset: 2px; }
.side-count { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #c6473f; color: #fff; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.side-count[hidden] { display: none; }
.side-foot { margin: auto 10px 0; padding-top: 18px; color: #7f95b3; font-size: 11.5px; line-height: 1.5; }
.admin-app:not(.is-auth) .side-nav, .admin-app:not(.is-auth) .side-foot { display: none; }

/* Columna principal y barra superior. */
.app-main { min-width: 0; margin-left: var(--side-w); }
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 14px 18px 0;
  padding: 10px 14px 10px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 1px 2px rgba(10, 33, 71, .06), 0 12px 30px -18px rgba(10, 33, 71, .35);
}
.topbar-menu { display: none; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line-soft); border-radius: 11px; background: #fff; color: var(--ink); font-size: 18px; cursor: pointer; }
.topbar-title { display: grid; min-width: 0; margin-right: auto; }
.topbar-title small { color: #6b778c; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.topbar-title strong { overflow: hidden; color: var(--ink); font-size: 18px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.topbar-time { color: #6b778c; font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.topbar-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 750;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .16s cubic-bezier(.23, 1, .32, 1);
}
.topbar-button[hidden] { display: none; }
.topbar-button:hover { border-color: #b9c6da; background: #f5f8fc; }
.topbar-button:active { transform: scale(.97); }
.topbar-button.danger { border-color: #f1c9c5; color: #b23a32; }
.topbar-button.danger:hover { background: #fdf2f1; }
.topbar-button.is-spinning .fa { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Contenido. */
.admin-app .internal.app-content { width: auto; max-width: 1480px; margin: 0; padding: 22px 18px 60px; }
.admin-app .internal.app-content:focus { outline: none; }
.admin-app #admin-notice:not(:empty) { margin: 0 0 16px; border: 0; border-radius: 12px; background: #e8f0fb; color: var(--ink); box-shadow: inset 3px 0 0 #2f7ae5; }
.admin-app #admin-notice.error:not(:empty) { background: #fdf0ee; color: #9f332c; box-shadow: inset 3px 0 0 #c6473f; }
.admin-app .view { animation: none; }
.admin-app .view.is-entering { animation: view-in .28s cubic-bezier(.23, 1, .32, 1) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } }
.admin-app .view > .sim-panel, .admin-app .view > .watch-panel, .admin-app .view > .race-work-panel { margin-top: 0; }
.admin-app .view .section-heading h2, .admin-app .view .sim-head h2 { font-size: clamp(26px, 2.3vw, 34px); }

/* Acceso. */
.admin-app .login-card { display: grid; justify-items: start; gap: 10px; max-width: 440px; margin: 8vh auto 0; padding: 34px; }
.login-emblem { width: 58px; height: 58px; padding: 10px; border-radius: 16px; background: var(--navy); }
.admin-app .login-card form { width: 100%; }

/* Inicio. */
.view-head { margin: 4px 0 18px; }
.view-head h1 { margin: 0 0 4px; color: var(--ink); font-family: var(--serif); font-size: clamp(28px, 2.6vw, 38px); letter-spacing: -.015em; }
.view-head p { margin: 0; color: #5c687d; font-size: 14.5px; }
.home-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.home-kpi { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(10, 33, 71, .06), 0 10px 24px -18px rgba(10, 33, 71, .35); }
.home-kpi span { color: #46536b; font-size: 13.5px; font-weight: 650; }
.home-kpi strong { color: var(--ink); font-family: var(--serif); font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.home-kpi.warn strong { color: #b26a00; }
.home-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; }
.home-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 22px;
  border-radius: 18px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(10, 33, 71, .06), 0 20px 44px -26px rgba(10, 33, 71, .35);
  transition: transform .2s cubic-bezier(.23, 1, .32, 1), box-shadow .2s ease;
}
a.home-card:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(10, 33, 71, .06), 0 26px 50px -24px rgba(10, 33, 71, .4); }
a.home-card:active { transform: scale(.99); }
.home-card.big { grid-row: span 3; background: linear-gradient(160deg, #0b2447 0%, #071a33 100%); color: #e6eef9; }
.home-card.wide { grid-column: 2 / -1; }
.home-card-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #eaf1fb; color: #2f6fc0; font-size: 19px; }
.home-card.big .home-card-icon { background: rgba(255, 255, 255, .1); color: #8fc2ff; }
.home-card-title { color: var(--ink); font-size: 16px; font-weight: 800; }
.home-card.big .home-card-title { color: #fff; font-family: var(--serif); font-size: 26px; font-weight: 600; }
.home-card-text { color: #5c687d; font-size: 13.5px; line-height: 1.5; }
.home-card.big .home-card-text { color: #b7c6dc; }
.home-card-number { color: #c6473f; font-family: var(--serif); font-size: 40px; font-weight: 600; line-height: 1; }
.home-score { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 4px; }
.home-score[hidden] { display: none; }
.home-score span { display: grid; gap: 2px; padding: 14px 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); color: #b7c6dc; font-size: 12.5px; text-align: center; }
.home-score b { font-family: var(--serif); font-size: 40px; font-weight: 600; line-height: 1; }
.home-score .dem b { color: #8fc2ff; }
.home-score .toss b { color: #d3d7dd; }
.home-score .rep b { color: #ff9b92; }
.home-card-go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; color: #8fc2ff; font-size: 13.5px; font-weight: 800; }
.home-card-go .fa { width: 11px; height: 11px; }
.home-activity { display: grid; gap: 6px; margin: 4px 0 6px; padding: 0; list-style: none; }
.home-activity li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 10px; background: #f5f8fc; color: #46536b; font-size: 13px; }
.home-activity li strong { color: var(--ink); }
.home-activity time { color: #6b778c; white-space: nowrap; }
.home-card-link { color: #2f6fc0; font-size: 13.5px; font-weight: 800; text-decoration: none; }

/* Teléfono y tableta: el menú se abre como panel. */
@media (max-width: 1100px) {
  .home-grid { grid-template-columns: 1fr 1fr; }
  .home-card.big { grid-row: auto; grid-column: 1 / -1; }
  .home-card.wide { grid-column: 1 / -1; }
  .home-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .side { transform: translateX(-100%); transition: transform .28s cubic-bezier(.32, .72, 0, 1); box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
  .menu-open .side { transform: none; }
  .side-scrim { position: fixed; inset: 0; z-index: 35; background: rgba(4, 13, 30, .5); }
  .side-scrim[hidden] { display: none; }
  .app-main { margin-left: 0; }
  .admin-app.is-auth .topbar-menu { display: grid; }
  .topbar { margin: 10px 10px 0; }
}
@media (max-width: 640px) {
  .topbar-time, .topbar-button span { display: none; }
  .topbar-button { padding: 0 12px; }
  .home-grid, .home-kpis { grid-template-columns: 1fr; }
  .admin-app .internal.app-content { padding: 16px 10px 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .side { transition: none; }
  .admin-app .view.is-entering { animation: none; }
}
.admin-app #admin-notice { transition: opacity .3s ease; }
.admin-app #admin-notice.is-fading { opacity: 0; }

/* ===== Panel interno: secciones pulidas (encabezado, indicadores, filtros y listas) ===== */
.admin-app .view .watch-panel, .admin-app .view .race-work-panel, .admin-app .view .audit-panel { padding: 28px 30px; }
.admin-app .view .workspace-head { margin: 0 0 16px; padding: 26px 30px; border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(10, 33, 71, .06), 0 24px 54px -28px rgba(10, 33, 71, .3); position: relative; }
.admin-app .view .workspace-head::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; border-radius: 18px 18px 0 0; background: linear-gradient(90deg, #0a3161 0 70%, #c6473f 70%); }
.view-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px 24px; margin-bottom: 18px; }
.view-header h2 { margin: 0 0 6px; color: #0a3161; font-family: var(--serif); font-size: clamp(26px, 2.3vw, 34px); letter-spacing: -.015em; }
.view-header p { max-width: 72ch; margin: 0; color: #5c687d; font-size: 14.5px; line-height: 1.55; }
.view-header .button { flex: none; }

/* Indicadores de la sección. */
.view-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 18px; }
.view-kpis:empty { display: none; }
.view-kpi { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 16px; border-radius: 12px; background: #f5f8fc; box-shadow: inset 0 0 0 1px #e3e8f0; }
.view-kpi span { color: #46536b; font-size: 12.5px; font-weight: 650; }
.view-kpi strong { color: #0a3161; font-family: var(--serif); font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.view-kpi.ok { background: #effaf4; box-shadow: inset 0 0 0 1px #cfeedd; }
.view-kpi.ok strong { color: #17714a; }
.view-kpi.warn { background: #fff8eb; box-shadow: inset 0 0 0 1px #f3dfb4; }
.view-kpi.warn strong { color: #a05a00; }

/* Ayuda plegable. */
.view-help { margin: 0 0 16px; padding: 0; border-radius: 12px; background: #f5f8fc; color: #46536b; font-size: 13.5px; line-height: 1.6; }
.view-help summary { padding: 11px 16px; color: #0a3161; font-weight: 750; cursor: pointer; }
.view-help p { margin: 0; padding: 0 16px 14px; }

/* Barra de búsqueda y filtros. */
.view-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 16px; }
.view-search { display: inline-flex; align-items: center; gap: 10px; flex: 1 1 260px; max-width: 380px; min-height: 42px; padding: 0 14px; border: 1px solid #d9e0ea; border-radius: 11px; background: #fff; color: #6b778c; transition: border-color .15s ease, box-shadow .15s ease; }
.view-search:focus-within { border-color: #0a3161; box-shadow: 0 0 0 3px rgba(10, 49, 97, .12); }
.view-search .fa { width: 15px; height: 15px; }
.view-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #0b2a55; font: inherit; font-size: 14px; }
.view-seg { display: inline-flex; flex-wrap: wrap; padding: 3px; border-radius: 11px; background: #edf1f7; }
.view-seg button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 13px; border: 0; border-radius: 8px; background: transparent; color: #33415c; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.view-seg button[aria-pressed="true"] { background: #fff; color: #0a3161; box-shadow: 0 1px 3px rgba(10, 33, 71, .16); }
.filter-count:empty { display: none; }
.filter-count { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: #dfe6f0; color: #33415c; font-size: 11px; font-variant-numeric: tabular-nums; text-align: center; }
.view-seg button[aria-pressed="true"] .filter-count { background: #0a3161; color: #fff; }
.view-shown { margin-left: auto; color: #6b778c; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.view-empty, .filter-empty { padding: 26px; border-radius: 12px; background: #f5f8fc; color: #5c687d; font-size: 14px; text-align: center; list-style: none; }

/* Piezas comunes. */
.state-badge { display: inline-grid; place-items: center; flex: none; min-width: 42px; height: 42px; padding: 0 6px; border-radius: 11px; background: #0a3161; color: #fff; font-size: 13.5px; font-weight: 800; letter-spacing: .04em; }
.state-badge.small { min-width: 34px; height: 30px; border-radius: 8px; font-size: 12px; }
.office-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; background: #eef2f8; color: #33415c; font-size: 11.5px; font-weight: 750; white-space: nowrap; }
.office-tag.senate { background: #e8f0fb; color: #1f4f86; }
.office-tag.governor { background: #f1ecfa; color: #4b3f78; }
.office-tag.house { background: #e9f6ef; color: #17714a; }
.count-pill { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 10px; border-radius: 999px; background: #f1f4f8; color: #5c687d; font-size: 12px; white-space: nowrap; }
.count-pill b { font-size: 14px; font-variant-numeric: tabular-nums; }
.count-pill.ok { background: #e9f6ef; color: #17714a; }

/* G-Ratings. */
.admin-app .watch-list { gap: 14px; }
.admin-app .gr-card { border: 0; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(10, 33, 71, .06), 0 14px 32px -20px rgba(10, 33, 71, .35); transition: transform .2s cubic-bezier(.23, 1, .32, 1), box-shadow .2s ease; }
@media (hover: hover) and (pointer: fine) { .admin-app .gr-card:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(10, 33, 71, .06), 0 20px 40px -20px rgba(10, 33, 71, .45); } }
.admin-app .gr-card .watch-item-top { display: flex; align-items: center; gap: 12px; }
.admin-app .gr-card .watch-race { color: #0a3161; font-size: 14px; line-height: 1.35; }
.admin-app .gr-card .watch-meta { margin-top: 8px; color: #6b778c; font-size: 12px; }
.admin-app .watch-gr-race { margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef1f6; }
.admin-app .watch-gr-race > .watch-race { display: block; margin-bottom: 8px; color: #33415c; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.admin-app .watch-results { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.admin-app .watch-results li { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 5px 9px; border-radius: 7px; overflow: hidden; font-size: 13px; isolation: isolate; }
.admin-app .watch-results li.gr-person::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1; width: var(--w, 0); border-radius: 7px; background: #e3e8f0; transition: width .5s cubic-bezier(.23, 1, .32, 1); }
.admin-app .watch-results li.gr-person.dem::before { background: rgba(47, 111, 192, .16); }
.admin-app .watch-results li.gr-person.rep::before { background: rgba(198, 71, 63, .15); }
.admin-app .watch-results li.gr-person.dem b { color: #1f5f99; }
.admin-app .watch-results li.gr-person.rep b { color: #a8352d; }
.admin-app .watch-results li.watch-gr-other { color: #8090a6; padding-top: 2px; padding-bottom: 2px; }
.admin-app .watch-verify { margin: 10px 0 0; padding: 7px 10px; border: 0; border-radius: 8px; font-size: 12px; font-weight: 700; }
.admin-app .watch-verify.ok { background: #e9f6ef; color: #17714a; }
.admin-app .watch-verify.warn { background: #fff4e0; color: #8a5300; }
.admin-app .watch-verify.none { background: #f1f4f8; color: #5c687d; }
.admin-app .watch-status:not(:empty) { padding: 10px 14px; border-radius: 10px; background: #f5f8fc; color: #46536b; font-size: 13px; }

/* Contiendas. */
.admin-app .new-race-form { display: grid; grid-template-columns: auto minmax(180px, 1fr) minmax(160px, 220px) auto; align-items: end; gap: 12px 16px; margin: 0 0 18px; padding: 16px 18px; border: 0; border-radius: 14px; background: #f5f8fc; box-shadow: inset 0 0 0 1px #e3e8f0; }
.admin-app .new-race-form label { margin: 0; }
.race-form-title { align-self: center; color: #0a3161; font-size: 14.5px; }
.admin-app .race-work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.race-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(10, 33, 71, .06), inset 0 0 0 1px #e8ecf2; transition: box-shadow .2s ease, transform .2s cubic-bezier(.23, 1, .32, 1); }
@media (hover: hover) and (pointer: fine) { .race-row:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -16px rgba(10, 33, 71, .45), inset 0 0 0 1px #d5deea; } }
.race-row-text { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.race-row-text strong { overflow: hidden; color: #0a3161; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.race-row-counts { display: grid; justify-items: end; gap: 5px; }
.race-row .race-scope.excluded { grid-column: 1 / -1; justify-self: start; }

/* Fichas. */
.admin-app .editor-layout { gap: 16px; }
.admin-app .list-panel, .admin-app .form-panel { padding: 22px; }
.admin-app .list-panel .view-toolbar { margin: 12px 0; }
.admin-app .list-panel .view-search { max-width: none; flex-basis: 100%; }
.admin-app .list-panel .view-shown { margin-left: 0; }
.admin-app .poll-list { display: grid; gap: 10px; max-height: 1100px; padding-right: 4px; }
.poll-row { display: grid; gap: 8px; padding: 14px 14px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #e6ebf2, inset 3px 0 0 #17714a; transition: box-shadow .2s ease; }
.poll-row.draft { box-shadow: inset 0 0 0 1px #f0dfb8, inset 3px 0 0 #c98a1a; background: #fffcf5; }
.poll-row:hover { box-shadow: inset 0 0 0 1px #cfd8e5, inset 3px 0 0 #17714a, 0 8px 18px -14px rgba(10, 33, 71, .45); }
.poll-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.poll-row-head strong { color: #0a3161; font-size: 15px; }
.poll-row-tags { display: flex; gap: 6px; margin-left: auto; }
.poll-row-people { display: grid; gap: 3px; }
.poll-person { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: #33415c; }
.poll-person b { font-variant-numeric: tabular-nums; }
.poll-person.dem b { color: #1f5f99; }
.poll-person.rep b { color: #a8352d; }
.poll-row-meta { margin: 0; color: #6b778c; font-size: 12px; }
.poll-row-actions { display: flex; gap: 8px; }
.admin-app .form-panel h4 { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; padding-top: 18px; color: #0a3161; font-size: 14px; letter-spacing: .02em; }
.admin-app .form-panel h4::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #c6473f; }
.admin-app .form-panel input, .admin-app .form-panel select, .admin-app .form-panel textarea { border-radius: 10px; }
.admin-app .form-panel input:focus, .admin-app .form-panel select:focus, .admin-app .form-panel textarea:focus { border-color: #0a3161; box-shadow: 0 0 0 3px rgba(10, 49, 97, .12); outline: none; }
.admin-app .form-actions { position: sticky; bottom: 0; z-index: 2; display: flex; gap: 10px; margin: 18px -22px -22px; padding: 14px 22px; border-top: 1px solid #e3e8f0; border-radius: 0 0 18px 18px; background: rgba(255, 255, 255, .96); }

/* Bitácora: línea de tiempo. */
.audit-timeline { position: relative; display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; max-height: none !important; overflow: visible !important; }
.admin-app .audit-panel .audit-timeline li { background: none; border: 0; padding: 0; }
.audit-day { margin: 14px 0 6px; color: #33415c; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.audit-day:first-child { margin-top: 0; }
.admin-app .audit-panel .audit-timeline .audit-item { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 10px 12px 10px 0; border-radius: 10px; }
.audit-item:hover { background: #f7f9fc; }
.audit-item::before { content: ""; position: absolute; left: 13px; top: 0; bottom: 0; width: 2px; background: #e3e8f0; }
.audit-dot { position: relative; z-index: 1; width: 12px; height: 12px; margin: 4px 0 0 8px; border-radius: 50%; background: #8f9db3; box-shadow: 0 0 0 4px #fff; }
.audit-item.publish .audit-dot, .audit-item.auto .audit-dot { background: #17714a; }
.audit-item.unpublish .audit-dot { background: #c6473f; }
.audit-item.create .audit-dot, .audit-item.edit .audit-dot { background: #2f6fc0; }
.audit-item.race .audit-dot { background: #6d4fa8; }
.audit-body { display: grid; gap: 2px; min-width: 0; }
.audit-body strong { color: #0a3161; font-size: 13.5px; }
.audit-body span { color: #46536b; font-size: 13px; line-height: 1.45; }
.audit-item time { color: #6b778c; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 900px) {
  .admin-app .new-race-form { grid-template-columns: 1fr 1fr; }
  .race-form-title { grid-column: 1 / -1; }
  .view-shown { margin-left: 0; }
}
@media (max-width: 640px) {
  .admin-app .view .watch-panel, .admin-app .view .race-work-panel, .admin-app .view .audit-panel, .admin-app .view .workspace-head { padding: 20px 16px; }
  .admin-app .new-race-form { grid-template-columns: 1fr; }
  .admin-app .race-work-grid { grid-template-columns: 1fr; }
  .view-search { max-width: none; }
  .view-kpis { grid-template-columns: 1fr 1fr; }
}

/* Ajustes finos de las secciones. */
.view-header > div:first-child { flex: 1 1 420px; }
.view-kpi.text strong { font-family: inherit; font-size: 14px; font-weight: 800; }
.admin-app #gratings-status:not(.error) { display: none; }
.admin-app .list-panel .panel-heading #new-poll { display: none; }
.poll-row-tags { flex-basis: 100%; margin-left: 0; }
.audit-count { margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: #eef2f8; color: #33415c; font-size: 11.5px; font-weight: 800; }
.audit-count[hidden] { display: none; }
.admin-app .view .workspace-head { display: block; }
.admin-app .view .workspace-head .view-header { margin-bottom: 0; }
@media (max-width: 640px) { .view-kpis { grid-template-columns: 1fr; } .view-kpi.text strong { white-space: normal; text-align: right; } }

/* ---------- Tiempo real: fuentes de la predicción y encuestas de Odiseo ---------- */
.sim-head-actions { flex-wrap: wrap; justify-content: flex-end; }
.sim-live { display: inline-flex; align-items: center; gap: 7px; margin: 0; color: var(--sim-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.sim-live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #2f8f5b; }
.sim-live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #2f8f5b; opacity: 0; }
.sim-live.is-fresh .sim-live-dot::after { animation: sim-live-ping 1.2s cubic-bezier(.23, 1, .32, 1) 2; }
@keyframes sim-live-ping { from { transform: scale(1); opacity: .55; } to { transform: scale(3.2); opacity: 0; } }
.sim-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 14px 0 0; font-size: 12.5px; color: var(--sim-muted); }
.sim-sources:empty { display: none; }
.sim-sources-label { margin-right: 2px; font-weight: 600; }
.sim-source { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 10px; border-radius: 999px; background: #f2f5fa; color: var(--sim-ink); box-shadow: inset 0 0 0 1px var(--sim-line); transition: opacity .2s ease; }
.sim-source b { font-variant-numeric: tabular-nums; }
.sim-source.odiseo { background: #eef4fb; }
.sim-source.off { opacity: .45; }
.od-pill { margin-left: auto; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.od-pill.ok { background: #e9f6ef; color: #17714a; }
.od-pill.warn { background: #fff4e0; color: #8a5300; }
.od-pill.none { background: #f1f4f8; color: #5c687d; }
.od-question { margin: 2px 0 8px; color: #5c687d; font-size: 12.5px; font-style: italic; }
@media (prefers-reduced-motion: reduce) { .sim-live.is-fresh .sim-live-dot::after { animation: none; } }
.side-count.neutral { background: rgba(255, 255, 255, .16); color: #e6edf7; }

/* Predicciones por estado: lectura editorial y comparación explícita de fuentes. */
.admin-app .home-card.big { align-self: start; }
.home-prediction-sources { margin: 10px 0 2px; padding-top: 16px; border-top: 1px solid #36506f; color: #c4d4e8; font-size: 12px; line-height: 1.6; }
@media (min-width: 1101px) {
  .admin-app .home-card.big { grid-row: span 2; }
  .admin-app .home-card.wide { grid-column: 1 / -1; }
}
.admin-app .sim-panel {
  --sim-dem: #2361a4;
  --sim-rep: #b63b35;
  --sim-muted: #58667c;
  --sim-line: #dce3ed;
  margin: 12px 0 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-variant-numeric: tabular-nums;
}
.admin-app .sim-panel::before { content: none; }
.admin-app .sim-panel ::selection { color: #fff; background: #245d96; }
.admin-app .sim-panel :focus-visible { outline: 2px solid #276cae; outline-offset: 4px; }
.admin-app .sim-panel .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.admin-app .sim-head { align-items: start; gap: 20px; padding: 0 2px 24px; }
.admin-app .sim-head > div:first-child { flex: 1 1 520px; }
.admin-app .sim-head h2 { margin: 0 0 8px; font-size: 36px; line-height: 1.15; }
.admin-app .sim-intro { max-width: 72ch; margin: 0; color: var(--sim-muted); font-size: 14px; line-height: 1.65; }
.admin-app .sim-head-actions { flex: 0 1 360px; gap: 8px 14px; padding-top: 2px; }
.admin-app .sim-status { flex-basis: 100%; text-align: right; color: #3e526b; font-size: 12px; }
.admin-app .sim-live { font-size: 11px; }
.admin-app .sim-live.has-warning .sim-live-dot { background: #986718; }
.admin-app #sim-csv { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 8px 13px; border: 1px solid #cbd6e3; border-radius: 8px; background: #fff; color: #0a3161; font-size: 12px; }
.admin-app #sim-csv .fa { width: 14px; height: 14px; }
.admin-app #sim-csv:disabled { color: #65768b; opacity: .65; cursor: not-allowed; }
.sim-source-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 5px; border: 1px solid var(--sim-line); border-radius: 12px; background: #e9eef5; }
.sim-source-tabs button { display: grid; gap: 6px; min-width: 0; min-height: 72px; padding: 12px 16px; border: 0; border-radius: 8px; background: transparent; color: #3c4f6a; font: inherit; text-align: left; cursor: pointer; transition: background .18s ease, color .18s ease; }
.sim-source-tabs button > span { font-size: 14px; font-weight: 750; }
.sim-source-tabs button > small { display: flex; align-items: center; justify-content: space-between; gap: 7px; font-size: 11px; }
.sim-source-tabs button b { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 5px; border-radius: 5px; color: #3d516d; background: #d8e2ef; font-size: 12px; }
.sim-source-tabs button[aria-selected="true"] { color: #fff; background: #0c2a4f; }
.sim-source-tabs button[aria-selected="true"] small { color: #c2d3e8; }
.sim-source-tabs button[aria-selected="true"] b { color: #fff; background: #284867; }
.sim-source-tabs button:hover:not([aria-selected="true"]) { background: #dce5f0; }
.sim-overview-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 26px 0 8px; }
.sim-overview-head h3, .sim-explorer-head h3, .sim-directory-head h3 { margin: 0 0 5px; color: #0b2a4f; font-size: 19px; font-weight: 750; letter-spacing: -.02em; }
.sim-overview-head p, .sim-explorer-head p, .sim-directory-head p { max-width: 74ch; margin: 0; color: var(--sim-muted); font-size: 12.5px; line-height: 1.55; }
.sim-run-count { flex: none; color: #536680; font-size: 11px; }
.sim-source-notice { margin: 12px 0; padding: 12px 15px; border-radius: 8px; background: #fff5df; color: #71511c; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.sim-source-notice[hidden] { display: none; }
.admin-app .sim-sources { margin: 12px 0 0; gap: 8px 18px; font-size: 11px; }
.admin-app .sim-source { padding: 0; background: transparent; box-shadow: none; color: #536680; border-radius: 0; }
.admin-app .sim-source::before { content: ""; width: 5px; height: 5px; margin-right: 2px; border-radius: 50%; background: #7187a2; }
.admin-app .sim-source.off { opacity: 1; }
.admin-app .sim-answer { margin: 16px 0 28px; padding: 22px 24px 15px; border: 1px solid var(--sim-line); border-radius: 12px; background: #fff; }
.admin-app .sim-board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0 0 20px; }
.admin-app .sim-board-cell { display: flex; justify-content: flex-start; align-items: center; gap: 16px; min-width: 0; padding: 0 18px 0 0; border-radius: 0; background: transparent; box-shadow: none; text-align: left; }
.admin-app .sim-board-cell + .sim-board-cell { border-left: 1px solid var(--sim-line); padding-left: 24px; }
.admin-app .sim-board-cell strong, .admin-app .sim-board-cell.toss strong { min-width: 1.2ch; font-family: inherit; font-size: 42px; line-height: 1; font-weight: 650; letter-spacing: -.04em; }
.admin-app .sim-board-cell > div { display: grid; gap: 4px; }
.admin-app .sim-board-cell.toss { min-width: 0; grid-column: auto; grid-row: auto; }
.admin-app .sim-board-label { font-size: 13px; font-weight: 750; }
.admin-app .sim-board-cell small { font-size: 10.5px; color: var(--sim-muted); }
.admin-app .sim-board-cell.toss strong, .admin-app .sim-board-cell.toss .sim-board-label { color: #5b626d; }
.admin-app .sim-strip { height: 17px; gap: 3px; }
.admin-app .sim-seat { flex: 1; min-width: 0; padding: 0; border: 0; border-radius: 3px; cursor: pointer; }
.admin-app .sim-seat.dem { background: #2361a4; }
.admin-app .sim-seat.rep { background: #b63b35; }
.admin-app .sim-seat.tossup { background: #bcbfc4; }
.admin-app .sim-seat.oth { background: #806095; }
.admin-app .sim-seat:hover { filter: brightness(1.17); }
.admin-app .sim-answer .sim-subsentence { margin: 11px 0 0; color: var(--sim-muted); font-size: 11px; line-height: 1.6; text-align: left; }
.admin-app .sim-scenario-note { margin: 0 0 18px; padding: 10px 12px; background: #fff4de; border-radius: 7px; color: #71511c; font-size: 12px; line-height: 1.6; }
.sim-explorer-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 15px; }
.admin-app .sim-tabs { margin: 0; border: 1px solid var(--sim-line); border-radius: 8px; background: #e7edf5; }
.admin-app .sim-tabs button { min-height: 34px; padding: 6px 12px; border-radius: 5px; font-size: 11px; }
.admin-app .sim-tabs button[aria-pressed="true"] { background: #fff; box-shadow: none; }
.sim-explorer { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(360px, 1fr); align-items: start; gap: 20px; }
.admin-app .sim-map-card { margin: 0; padding: 22px 22px 18px; border-radius: 12px; background: #0c2545; color: #fff; }
.admin-app .sim-map-card figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.admin-app .sim-map-card figcaption strong { font-size: 13px; }
.admin-app .sim-map-card figcaption span { color: #c1cde0; font-size: 11px; }
.admin-app .sim-map-card .sim-map { max-width: none; margin: 12px -8px 0; min-height: 230px; }
.admin-app .sim-state { stroke: #0c2545; stroke-width: 1.8; transition: fill .18s ease, stroke .18s ease; cursor: pointer; }
.admin-app .sim-state.dem.safe { --c: #3e82c8; }
.admin-app .sim-state.dem.likely { --c: #75a4d7; }
.admin-app .sim-state.dem.lean { --c: #a0bfdc; }
.admin-app .sim-state.rep.safe { --c: #db6b65; }
.admin-app .sim-state.rep.likely { --c: #e4968e; }
.admin-app .sim-state.rep.lean { --c: #ecc0b8; }
.admin-app .sim-state.tossup { --c: #bcbfc4; }
.admin-app .sim-state.none { fill: #354d6b; }
.admin-app .sim-state.is-selected { stroke: #fff; stroke-width: 3; }
.admin-app .sim-state-label.no-data { fill: #c4d2e5; font-size: 11px; }
.admin-app .sim-state:focus-visible { outline: none; stroke: #fff; stroke-width: 4; }
.admin-app .sim-state-label { font-family: inherit; font-size: 13px; fill: #fff; stroke: #1b3656; stroke-width: 3; }
.admin-app .sim-map-card .sim-legend { gap: 8px 14px; margin-top: 6px; color: #d4deeb; font-size: 10px; }
.admin-app .sim-map-card .sim-legend span::before { width: 8px; height: 8px; border-radius: 2px; }
.admin-app .sim-map-card .sim-legend .dem::before { background: #75a4d7; }
.admin-app .sim-map-card .sim-legend .rep::before { background: #e4968e; }
.admin-app .sim-map-card .sim-legend .tossup::before { background: #bcbfc4; }
.admin-app .sim-map-card .sim-legend .none::before { background: #354d6b; border: 1px solid #aebed2; }
.sim-map-note { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid #304969; color: #c1cde0; font-size: 10px; line-height: 1.6; }
.sim-state-detail { min-width: 0; padding: 22px; border: 1px solid var(--sim-line); border-radius: 12px; background: #fff; }
.sim-state-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.sim-state-heading h3 { margin: 0 0 4px; color: #0b2a4f; font-family: var(--serif); font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.sim-state-heading p { margin: 0; color: var(--sim-muted); font-size: 11px; }
.sim-state-heading .state-badge { min-width: 40px; height: 38px; border-radius: 8px; background: #eaf0f7; color: #0a3161; }
.sim-state-race { padding: 18px 0 0; border-top: 1px solid var(--sim-line); }
.sim-state-race + .sim-state-race { margin-top: 22px; }
.sim-state-contests { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 16px; }
.sim-state-contests button { flex: 1; min-height: 34px; padding: 7px 9px; border: 1px solid #dce3ed; border-radius: 6px; background: #f5f8fc; color: #425776; font: inherit; font-size: 10px; cursor: pointer; }
.sim-state-contests button[aria-pressed="true"] { border-color: #0c315b; color: #fff; background: #0c315b; }
.sim-state-contests button:hover:not([aria-pressed="true"]) { background: #e5edf6; }
.sim-race-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 16px; }
.sim-race-heading h4 { margin: 0; color: #344761; font-size: 13px; }
.admin-app .sim-chance { padding: 3px 8px; font-size: 10px; font-weight: 650; }
.admin-app .sim-chance.safe { color: #0c315c; background: #e7f0fa; }
.admin-app .sim-chance.likely { color: #25496c; background: #edf3f9; }
.admin-app .sim-chance.lean { color: #425776; background: #f0f3f8; }
.admin-app .sim-chance.tossup { color: #4d5560; background: #eceef1; }
.sim-candidates { display: grid; gap: 14px; }
.sim-candidate { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.sim-avatar { position: relative; display: grid; place-items: center; width: 40px; height: 44px; overflow: hidden; border-radius: 8px; background: #e9eef5; color: #456281; font-size: 13px; font-weight: 750; }
.sim-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.sim-candidate-copy { display: grid; gap: 3px; min-width: 0; }
.sim-candidate-copy small { color: var(--sim-muted); font-size: 10px; }
.sim-candidate-copy strong { color: #203c60; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.sim-candidate.dem .sim-candidate-copy strong, .sim-candidate.dem .sim-candidate-chance strong { color: var(--sim-dem); }
.sim-candidate.rep .sim-candidate-copy strong, .sim-candidate.rep .sim-candidate-chance strong { color: var(--sim-rep); }
.sim-candidate.oth .sim-candidate-copy strong, .sim-candidate.oth .sim-candidate-chance strong { color: #72518c; }
.sim-vote { color: var(--sim-muted); font-size: 10px; }
.sim-candidate-chance { display: grid; gap: 3px; text-align: right; }
.sim-candidate-chance strong { font-size: 24px; font-weight: 650; line-height: 1; letter-spacing: -.025em; }
.sim-candidate-chance small { color: var(--sim-muted); font-size: 9px; }
.sim-probability-bar { display: flex; height: 6px; overflow: hidden; gap: 2px; margin: 16px 0 10px; border-radius: 4px; background: #edf2f8; }
.sim-probability-bar .dem { background: var(--sim-dem); }
.sim-probability-bar .rep { background: var(--sim-rep); }
.sim-probability-bar .oth { background: #806095; }
.sim-state-race .sim-race-meta { margin: 0 0 14px; color: #54657b; font-size: 10.5px; line-height: 1.6; }
.sim-interval { margin: 8px 0 16px; color: #54657b; font-size: 10.5px; line-height: 1.65; }
.sim-comparison-title { margin: 18px 0 10px; color: #344761; font-size: 11px; font-weight: 750; }
.sim-source-comparison { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sim-comparison-row { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; padding-right: 6px; }
.sim-comparison-row + .sim-comparison-row { padding-left: 10px; border-left: 1px solid var(--sim-line); }
.sim-comparison-row > span:first-child { color: #42546d; font-size: 10px; font-weight: 750; }
.sim-comparison-row strong { color: #334b6a; font-size: 20px; font-weight: 650; }
.sim-comparison-row strong.dem { color: var(--sim-dem); }
.sim-comparison-row strong.rep { color: var(--sim-rep); }
.sim-comparison-row strong.oth { color: #72518c; }
.sim-comparison-row .sim-comparison-name { color: #364d6b; font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.sim-comparison-row small, .sim-comparison-row .sim-no-data { color: var(--sim-muted); font-size: 10px; line-height: 1.5; }
.sim-poll-details { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--sim-line); }
.sim-poll-details summary { color: #245e98; font-size: 11px; font-weight: 650; cursor: pointer; }
.sim-poll-list { display: grid; gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.sim-poll-item { display: grid; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid #edf1f6; font-size: 11px; }
.sim-poll-item strong { color: #344761; }
.sim-poll-item span, .sim-poll-item small { color: var(--sim-muted); font-size: 10px; line-height: 1.5; }
.sim-poll-item a { color: #245e98; text-underline-offset: 3px; font-size: 10px; }
.sim-poll-item p, .sim-poll-dedup { margin: 3px 0; color: var(--sim-muted); font-size: 10px; line-height: 1.6; }
.sim-poll-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.sim-state-empty { padding: 22px 0; color: var(--sim-muted); font-size: 13px; line-height: 1.7; }
.sim-race-directory { margin-top: 30px; }
.sim-directory-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
#sim-results-count { color: var(--sim-muted); font-size: 11px; }
.sim-directory-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.sim-directory-tools .view-search { flex: 1 1 260px; max-width: none; min-height: 42px; border-radius: 8px; }
.sim-directory-tools .view-search input { font-size: 12px; }
.sim-select { display: grid; gap: 3px; margin: 0; }
.sim-select > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.sim-select select { min-height: 42px; max-width: 240px; margin: 0; padding: 8px 30px 8px 12px; border: 1px solid #d9e0ea; border-radius: 8px; background: #fff; color: #3b4d66; font: inherit; font-size: 12px; }
.admin-app .sim-table-wrap { border: 1px solid var(--sim-line); border-radius: 12px; background: #fff; scrollbar-color: #afbdd0 #edf2f8; }
.admin-app .sim-forecast-table { font-size: 12px; }
.admin-app .sim-forecast-table th { padding: 13px 15px; color: #54657b; background: #f7f9fc; font-size: 10px; font-weight: 650; letter-spacing: 0; text-transform: none; }
.admin-app .sim-forecast-table td { padding: 16px 15px; }
.admin-app .sim-forecast-table strong { display: block; font-size: 12px; font-weight: 700; line-height: 1.4; }
.admin-app .sim-forecast-table small { display: block; margin-top: 4px; color: var(--sim-muted); font-size: 10px; line-height: 1.5; }
.admin-app .sim-forecast-table .sim-table-person { display: flex; align-items: center; gap: 9px; }
.admin-app .sim-forecast-table .sim-table-person .sim-avatar { flex: none; width: 30px; height: 34px; }
.admin-app .sim-forecast-table .sim-table-person-copy { min-width: 0; }
.admin-app .sim-forecast-table .sim-probability strong { display: inline-block; margin-right: 8px; font-size: 18px; font-weight: 650; }
.admin-app .sim-forecast-table .sim-probability .sim-chance { display: block; width: fit-content; margin-top: 4px; }
.admin-app .sim-forecast-table .sim-poll-count strong { font-size: 16px; color: #3a526f; }
.admin-app .sim-forecast-table .sim-poll-count { max-width: 150px; }
.admin-app .sim-link { padding: 4px 0; border: 0; background: transparent; color: #245e98; font: inherit; font-size: 11px; font-weight: 750; text-underline-offset: 3px; text-align: left; cursor: pointer; }
.admin-app .sim-link:hover { text-decoration: underline; }
.sim-directory-empty { margin: 0; padding: 24px 20px; border: 1px solid var(--sim-line); border-radius: 12px; background: #fff; color: var(--sim-muted); font-size: 13px; line-height: 1.65; }
.sim-directory-empty[hidden] { display: none; }
.sim-excluded { margin-top: 22px; padding: 0; border: 1px solid var(--sim-line); border-radius: 12px; background: #f8fafc; }
.sim-excluded > summary { padding: 16px 20px; color: #344761; font-size: 12px; cursor: pointer; }
.sim-excluded > summary > span { font-weight: 700; }
.sim-excluded > summary small { display: block; margin: 5px 0 0 14px; color: var(--sim-muted); font-size: 11px; }
#sim-excluded-count { display: inline-grid; place-items: center; min-width: 22px; margin-left: 5px; padding: 2px 6px; border-radius: 4px; background: #e5ebf3; font-size: 11px; }
.sim-excluded > p { margin: 0 20px 12px; color: var(--sim-muted); font-size: 12px; line-height: 1.6; }
#sim-excluded-list { display: grid; gap: 0; max-height: 460px; overflow-y: auto; margin: 0; padding: 0 20px 10px; list-style: none; scrollbar-color: #afbdd0 #edf2f8; }
.sim-excluded-item { padding: 12px 0; border-top: 1px solid var(--sim-line); font-size: 12px; }
.sim-excluded-item > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.sim-excluded-item strong { color: #344761; font-size: 12px; }
.sim-excluded-item p { margin: 6px 0; color: var(--sim-muted); font-size: 11px; line-height: 1.6; }
.sim-excluded-item small { color: var(--sim-muted); font-size: 10px; }
.sim-exclusion-kind { color: #79591f; font-size: 10px; }
.sim-excluded-empty { padding: 12px 0; color: var(--sim-muted); font-size: 12px; }
.admin-app .sim-other-summary { margin: 0 0 12px; color: #72518c; font-size: 12px; }
/* Primarias y Washington D. C. en la predicción interna. */
.admin-app .sim-state.primary { --c: #c9b98a; }
.admin-app .sim-state.sim-district { stroke: #fff; stroke-width: 2; }
.admin-app .sim-state.sim-district.none { fill: #4a6587; }
.admin-app .sim-district-leader { fill: none; stroke: #c1cde0; stroke-width: 1.2; stroke-dasharray: 2 2; pointer-events: none; }
.admin-app .sim-map-card .sim-legend .primary::before { background: #c9b98a; }
.admin-app .sim-map-card .sim-legend .oth::before { background: #b49bdc; }
.sim-primary-note { margin: 0 0 12px; padding: 8px 10px; border-left: 3px solid #c9b98a; border-radius: 4px; background: #faf6ea; color: #5e5134; font-size: 11px; line-height: 1.6; }
.sim-primary-rest { margin: 10px 0 0; color: var(--sim-muted); font-size: 11px; line-height: 1.6; }
.admin-app .sim-live.has-error .sim-live-dot { background: #986718; }
.admin-app .sim-whatif { margin: 28px 0 14px; border: 1px solid var(--sim-line); border-radius: 12px; box-shadow: none; }
.admin-app .sim-whatif > summary strong { font-size: 14px; }
.admin-app .sim-whatif > summary small { font-size: 12px; line-height: 1.6; }
.admin-app .sim-whatif-body { padding: 10px 24px 24px; gap: 24px; }
.admin-app .sim-label { letter-spacing: 0; text-transform: none; font-size: 12px; }
.admin-app .sim-hist-wrap { margin: 0; }
.admin-app .sim-hist-wrap figcaption { display: grid; gap: 7px; }
.admin-app .sim-hist-wrap figcaption strong { font-size: 13px; }
.admin-app .sim-hist-wrap figcaption small { color: var(--sim-muted); font-size: 11px; line-height: 1.6; }
.admin-app .sim-method { margin-top: 0; padding: 14px 20px; background: #e9eef5; font-size: 12px; }
.admin-app .sim-method summary { font-weight: 650; }
.admin-app .sim-help { font-size: 12px; line-height: 1.6; }
@media (max-width: 1200px) {
  .sim-explorer { grid-template-columns: minmax(0, 1.1fr) minmax(330px, 1fr); gap: 16px; }
  .admin-app .sim-board-cell { gap: 12px; }
  .admin-app .sim-board-cell + .sim-board-cell { padding-left: 16px; }
  .admin-app .sim-head > div:first-child { flex-basis: 400px; }
}
@media (max-width: 1100px) and (min-width: 961px), (max-width: 780px) {
  .sim-explorer { grid-template-columns: minmax(0, 1fr); }
  .sim-state-detail { padding: 22px; }
  .admin-app .sim-map-card .sim-map { min-height: 0; }
  .sim-source-tabs button { padding: 11px 12px; }
  .sim-source-tabs button small { font-size: 10px; }
  .sim-run-count { display: none; }
}
@media (max-width: 760px) {
  .admin-app .sim-forecast-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; padding: 18px; }
  .admin-app .sim-forecast-table td { display: block; padding: 0; }
  .admin-app .sim-forecast-table .sim-where { grid-column: 1 / -1; padding-bottom: 10px; border-bottom: 1px solid #edf1f6; }
  .admin-app .sim-forecast-table .sim-where strong { font-size: 15px; }
  .admin-app .sim-forecast-table td[data-label]::before { display: block; margin-bottom: 5px; color: var(--sim-muted); font-size: 10px; font-weight: 500; content: attr(data-label); }
  .admin-app .sim-forecast-table .sim-where::before { content: none; }
  .admin-app .sim-forecast-table .sim-row-action { grid-column: 1 / -1; }
  .admin-app .sim-forecast-table .sim-row-action .sim-link { min-height: 36px; }
}
@media (max-width: 640px) {
  .admin-app .sim-panel { margin: 6px 0 0; }
  .admin-app .sim-head { gap: 14px; padding: 0 4px 20px; }
  .admin-app .sim-head h2 { font-size: 29px; }
  .admin-app .sim-intro { font-size: 13px; }
  .admin-app .sim-head-actions { flex: 1 1 100%; justify-content: flex-start; }
  .admin-app .sim-status { text-align: left; }
  .sim-source-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sim-source-tabs button { min-height: 68px; }
  .sim-source-tabs button > span { font-size: 13px; }
  .sim-overview-head { margin: 22px 4px 8px; }
  .admin-app .sim-sources { margin-left: 4px; gap: 7px 12px; }
  .admin-app .sim-answer { margin-top: 14px; padding: 20px 16px 14px; }
  .admin-app .sim-board { gap: 10px; }
  .admin-app .sim-board-cell { flex-direction: column; align-items: flex-start; gap: 8px; padding: 0; }
  .admin-app .sim-board-cell + .sim-board-cell { padding-left: 12px; }
  .admin-app .sim-board-cell strong, .admin-app .sim-board-cell.toss strong { font-size: 35px; }
  .admin-app .sim-board-label { font-size: 10px; line-height: 1.45; }
  .admin-app .sim-board-cell small { font-size: 9px; line-height: 1.4; }
  .admin-app .sim-strip { height: 15px; gap: 2px; }
  .sim-explorer-head { margin-left: 4px; }
  .admin-app .sim-tabs { width: 100%; }
  .admin-app .sim-tabs button { flex: 1; padding: 6px 8px; font-size: 10px; }
  .admin-app .sim-map-card { padding: 18px 15px 15px; }
  .sim-state-detail { padding: 20px 16px; }
  .sim-state-heading h3 { font-size: 25px; }
  .sim-directory-head { margin-left: 4px; }
  .sim-directory-tools { gap: 10px; }
  .sim-directory-tools .view-search { flex-basis: 100%; }
  .sim-select { flex: 1; min-width: 0; }
  .sim-select select { width: 100%; max-width: none; min-width: 0; font-size: 11px; }
  .sim-candidate { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 9px; }
  .sim-avatar { width: 38px; height: 42px; }
  .sim-candidate-chance strong { font-size: 23px; }
  .admin-app .sim-whatif > summary { padding-right: 16px; }
  .admin-app .sim-presets button { min-height: 38px; padding: 7px 10px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .admin-app .sim-panel *, .admin-app .sim-panel *::before, .admin-app .sim-panel *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Quién encuesta dónde: marcas O / G / E en el mapa de «Todas las fuentes». */
.admin-app .sim-badge circle { stroke: #0c2545; stroke-width: 1.6; }
.admin-app .sim-badge text { fill: #0c2545; font-size: 11px; font-weight: 900; font-family: inherit; }
.admin-app .sim-badge.src-odiseo circle { fill: #2dd4bf; }
.admin-app .sim-badge.src-gratings circle { fill: #fbbf24; }
.admin-app .sim-badge.src-internal circle { fill: #e2e8f0; }
.admin-app .sim-badges { transition: opacity .18s ease; }
.admin-app .sim-badges.is-dim, .admin-app .sim-state.is-dim, .admin-app .sim-state-label.is-dim { opacity: .2; }
.sim-coverage { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.sim-coverage[hidden] { display: none; }
.sim-coverage-label { margin-right: 4px; font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.admin-app .sim-map-card .sim-coverage-label { color: #c1cde0; }
.sim-coverage-button { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 3px 10px 3px 5px; border: 1px solid #36506f; border-radius: 999px; background: transparent; color: #d4deeb; font: inherit; font-size: 10.5px; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.sim-coverage-button:hover { background: #18355a; }
.sim-coverage-button[aria-pressed="true"] { border-color: #fff; background: #fff; color: #0c2545; }
.sim-coverage-button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sim-badge-key { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: #0c2545; font-size: 9px; font-style: normal; font-weight: 900; box-shadow: inset 0 0 0 1.5px #0c2545; }
.sim-badge-key.src-odiseo { background: #2dd4bf; }
.sim-badge-key.src-gratings { background: #fbbf24; }
.sim-badge-key.src-internal { background: #e2e8f0; }
.sim-state-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 14px; color: var(--sim-muted); font-size: 11px; }
.sim-state-source { display: inline-flex; align-items: center; gap: 4px; color: #23395a; font-weight: 600; }
.sim-state-source.is-empty { color: var(--sim-muted); font-weight: 400; opacity: .7; }
@media (prefers-reduced-motion: reduce) { .admin-app .sim-badges { transition: none; } }

/* ===== Panel interno · Sentimiento electoral y «Posibles ganadores» de Inicio (sentiment.js) ===== */
.sen-panel, .home-winners { --sim-ink: #0a3161; --sim-muted: #58667c; --sim-line: #dce3ed; --sen-dem: #2361a4; --sen-dem-soft: #75a4d7; --sen-rep: #b63b35; --sen-rep-soft: #e4968e; --sen-toss: #8d939c; --sen-oth: #8b6bb8; color: #1d2c44; font-variant-numeric: tabular-nums; }
.sen-intro { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 24px; margin-bottom: 18px; }
.sen-intro h2 { margin: 0 0 6px; color: #0b2a4f; font-family: var(--serif); font-size: 34px; font-weight: 600; letter-spacing: -.02em; }
.sen-intro p { max-width: 72ch; margin: 0; color: var(--sim-muted); font-size: 14px; line-height: 1.6; }
.sen-intro .sen-status { max-width: 46ch; font-size: 11.5px; text-align: right; }
/* Pestañas de fuente */
.sen-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 5px; border: 1px solid var(--sim-line); border-radius: 12px; background: #e9eef5; }
.sen-tab { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; min-width: 0; min-height: 64px; padding: 10px 14px; border: 0; border-radius: 8px; background: transparent; color: #3c4f6a; font: inherit; text-align: left; cursor: pointer; transition: background .18s ease, color .18s ease; }
.sen-tab span { font-size: 14px; font-weight: 750; }
.sen-tab small { grid-column: 1; overflow: hidden; font-size: 11px; opacity: .85; text-overflow: ellipsis; white-space: nowrap; }
.sen-tab b { grid-column: 2; grid-row: 1 / 3; display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 6px; border-radius: 6px; background: #d8e2ef; font-size: 13px; }
.sen-tab[aria-selected="true"] { background: #0c2a4f; color: #fff; }
.sen-tab[aria-selected="true"] b { background: #284867; color: #fff; }
.sen-tab:hover:not([aria-selected="true"]) { background: #dce5f0; }
.sen-tab:focus-visible { outline: 3px solid #fbbf24; outline-offset: 1px; }
.sen-tabs.compact .sen-tab { min-height: 48px; padding: 7px 12px; }
.sen-tabs.compact .sen-tab span { font-size: 13px; }
/* Pasos numerados */
.sen-step { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 14px; margin: 34px 0 14px; }
.sen-step > span { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #0c2545; color: #fff; font-size: 14px; font-weight: 800; }
.sen-step > div:first-of-type { flex: 1 1 320px; }
.sen-step h3 { margin: 2px 0 4px; color: #0b2a4f; font-size: 19px; }
.sen-step p { margin: 0; color: var(--sim-muted); font-size: 12.5px; line-height: 1.55; }
.sen-step .sim-tabs { margin-left: auto; }
/* Lectura general */
.sen-verdict { display: grid; gap: 4px; padding: 18px 22px; border-radius: 12px; background: #0c2545; color: #fff; border-left: 6px solid var(--sen-toss); }
.sen-verdict:empty { display: none; }
.sen-verdict.dem { border-left-color: var(--sen-dem-soft); } .sen-verdict.rep { border-left-color: var(--sen-rep-soft); } .sen-verdict.none { border-left-color: #4a6587; }
.sen-kicker { color: #c1cde0; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sen-verdict strong { font-family: var(--serif); font-size: 27px; font-weight: 600; letter-spacing: -.01em; }
.sen-verdict p { margin: 0; max-width: 92ch; color: #d4deeb; font-size: 13px; line-height: 1.6; }
.sen-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-top: 12px; }
.sen-card { display: grid; align-content: start; gap: 10px; padding: 16px 18px; border: 1px solid var(--sim-line); border-radius: 12px; background: #fff; }
.sen-card h3 { margin: 0; color: var(--sim-muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sen-card > small { color: var(--sim-muted); font-size: 11px; line-height: 1.5; }
.sen-national { display: grid; gap: 8px; }
.sen-national strong { font-size: 20px; font-weight: 800; }
.sen-national p { margin: 0; font-size: 12px; }
.sen-panel strong.dem, .home-winners strong.dem { color: var(--sen-dem); }
.sen-panel strong.rep, .home-winners strong.rep { color: var(--sen-rep); }
.sen-panel strong.toss { color: #565d68; } .sen-panel strong.oth { color: #6a4c96; }
/* Barra dividida */
.sen-split { display: grid; gap: 7px; }
.sen-split-bar { display: flex; gap: 2px; height: 12px; overflow: hidden; border-radius: 6px; background: #e7edf5; }
.sen-split-bar span { flex: 1 1 0; min-width: 4px; }
.sen-split-bar .dem { background: var(--sen-dem); } .sen-split-bar .rep { background: var(--sen-rep); } .sen-split-bar .toss { background: var(--sen-toss); } .sen-split-bar .oth { background: var(--sen-oth); } .sen-split-bar .none { background: #e7edf5; }
.sen-split-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; }
.sen-split-legend span { display: inline-flex; align-items: baseline; gap: 4px; color: var(--sim-muted); }
.sen-split-legend b { color: #0b2a4f; font-size: 17px; font-weight: 800; }
.sen-split-legend .dem b { color: var(--sen-dem); } .sen-split-legend .rep b { color: var(--sen-rep); } .sen-split-legend .toss b { color: #565d68; } .sen-split-legend .oth b { color: #6a4c96; }
/* Posibles ganadores */
.sen-offices { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; align-items: start; }
.sen-office { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--sim-line); border-radius: 12px; background: #fff; }
.sen-office.wide { margin-top: 14px; }
.sen-office.wide .sen-winners { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); column-gap: 18px; }
.sen-office-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sen-office-head h4 { margin: 0; color: #0b2a4f; font-family: var(--serif); font-size: 21px; font-weight: 600; }
.sen-office-head span { color: var(--sim-muted); font-size: 12px; }
.sen-group { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 0; padding: 0 0 5px; border-bottom: 2px solid var(--c, #aebed2); color: var(--c, #58667c); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sen-group.dem { --c: var(--sen-dem); } .sen-group.rep { --c: var(--sen-rep); } .sen-group.toss { --c: #6b727d; } .sen-group.oth { --c: #6a4c96; }
.sen-group b { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--c); color: #fff; font-size: 11px; letter-spacing: 0; }
.sen-winners { margin: 0; padding: 0; list-style: none; }
.sen-w { --c: var(--sen-toss); }
.sen-w.dem { --c: var(--sen-dem); } .sen-w.rep { --c: var(--sen-rep); } .sen-w.oth { --c: var(--sen-oth); }
.sen-w-button { display: grid; grid-template-columns: 46px auto minmax(0, 1fr) 76px; gap: 10px; align-items: center; width: 100%; padding: 7px 4px; border: 0; border-bottom: 1px solid #eef1f6; border-radius: 6px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .15s ease; }
.sen-w-button:hover { background: #f3f6fa; }
.sen-w-button:focus-visible { outline: 2px solid #0c2a4f; outline-offset: 1px; }
.sen-w-code { display: inline-grid; place-items: center; height: 24px; padding: 0 4px; overflow: hidden; border-radius: 5px; background: #eaf0f7; color: #0a3161; font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.sen-w-name { display: grid; min-width: 0; }
.sen-w-name strong { overflow: hidden; color: #0b2a4f; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.sen-w-name small { overflow: hidden; color: var(--sim-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.sen-w.dem .sen-w-name strong, .sen-w.dem .sen-w-chance b { color: var(--sen-dem); }
.sen-w.rep .sen-w-name strong, .sen-w.rep .sen-w-chance b { color: var(--sen-rep); }
.sen-w.toss .sen-w-chance b { color: #565d68; }
.sen-w-chance { display: grid; gap: 3px; justify-items: end; }
.sen-w-chance b { font-size: 14px; font-weight: 800; }
.sen-w-chance i { position: relative; width: 100%; height: 5px; overflow: hidden; border-radius: 3px; background: #e7edf5; }
.sen-w-chance i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: 3px; background: var(--c); }
.sen-avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; overflow: hidden; border-radius: 50%; background: #eaf0f7; box-shadow: 0 0 0 2px var(--c, #aebed2); color: #0a3161; font-size: 11px; font-weight: 800; }
.sen-avatar.dem { --c: var(--sen-dem); } .sen-avatar.rep { --c: var(--sen-rep); } .sen-avatar.oth { --c: var(--sen-oth); }
.sen-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sen-more { justify-self: start; margin-top: 4px; padding: 8px 14px; border: 1px solid var(--sim-line); border-radius: 8px; background: #f5f8fc; color: #0a3161; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.sen-more:hover { background: #e9eef5; }
.sen-offices.compact { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.sen-offices.compact .sen-office { padding: 14px; }
.sen-offices.compact .sen-office-head h4 { font-size: 18px; }
.sen-offices.compact .sen-winners { max-height: 320px; overflow-y: auto; }
.sen-offices.compact .sen-w-button { grid-template-columns: 34px minmax(0, 1fr) 62px; gap: 8px; padding: 5px 2px; }
.sen-offices.compact .sen-w-code { height: 22px; font-size: 10.5px; }
/* Mapa y detalle */
.sen-explorer { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, 1fr); gap: 20px; align-items: start; }
.sen-map-card { margin: 0; }
.sen-detail { min-width: 0; padding: 20px 22px; border: 1px solid var(--sim-line); border-radius: 12px; background: #fff; scroll-margin-top: 90px; }
.sen-detail-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sen-detail h3 { margin: 0; color: #0b2a4f; font-family: var(--serif); font-size: 26px; font-weight: 600; }
.sen-detail-head .state-badge { min-width: 40px; height: 36px; border-radius: 8px; background: #eaf0f7; color: #0a3161; }
.sen-detail-source { margin: 2px 0 12px; color: var(--sim-muted); font-size: 11.5px; }
.sen-detail h4 { margin: 18px 0 8px; color: var(--sim-muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sen-detail .sen-w-button { grid-template-columns: 82px minmax(0, 1fr) 62px; }
.sen-lead { margin: 0; padding: 10px 12px; border-left: 4px solid #aebed2; border-radius: 6px; background: #f5f8fc; font-size: 13px; line-height: 1.6; }
.sen-lead.dem { border-left-color: var(--sen-dem); } .sen-lead.rep { border-left-color: var(--sen-rep); } .sen-lead.toss { border-left-color: var(--sen-toss); }
.sen-list, .sen-bars { margin: 0; padding: 0; list-style: none; }
.sen-list li { display: grid; grid-template-columns: minmax(100px, auto) 1fr auto; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid #eef1f6; font-size: 12px; }
.sen-list li span, .sen-list li small { color: var(--sim-muted); }
.sen-list li.dem strong { color: var(--sen-dem); } .sen-list li.rep strong { color: var(--sen-rep); }
.sen-sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sen-source { display: grid; gap: 3px; padding: 9px; border: 1px solid var(--sim-line); border-radius: 8px; font-size: 11px; }
.sen-source span { font-weight: 700; }
.sen-source.is-active { border-color: #0c2a4f; box-shadow: inset 0 0 0 1px #0c2a4f; }
.sen-source.is-empty, .sen-source small { color: var(--sim-muted); }
.sen-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sen-chip { padding: 4px 9px; border-radius: 999px; background: #eef1f6; font-size: 11px; }
.sen-chip.dem { background: #e3edf9; } .sen-chip.rep { background: #f8e5e3; } .sen-chip.toss { background: #eceef1; }
.sen-chip b { font-weight: 800; }
.sen-link { display: inline-block; margin-top: 12px; color: #1f5f99; font-size: 12px; font-weight: 700; }
.sen-note { margin: 8px 0; color: var(--sim-muted); font-size: 12px; line-height: 1.6; }
.sen-empty { margin: 0; padding: 14px 0; color: var(--sim-muted); font-size: 12.5px; }
.sen-bars li { display: grid; grid-template-columns: minmax(120px, 34%) 1fr 48px; gap: 10px; align-items: center; padding: 4px 0; font-size: 12px; }
.sen-bar { height: 10px; border-radius: 5px; background: linear-gradient(90deg, #0c2545 var(--w), #e7edf5 var(--w)); }
.sen-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sen-bars b { text-align: right; }
.sen-issues { padding: 16px 20px; border: 1px solid var(--sim-line); border-radius: 12px; background: #fff; }
.sen-table tbody tr { cursor: pointer; }
.sen-table tbody tr:hover { background: #f5f8fc; }
.sen-table td strong { display: block; font-size: 13px; }
.sen-table td small { color: var(--sim-muted); font-size: 11px; }
.sen-match { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.sen-match.yes { background: #e2f3ea; color: #1f6b43; } .sen-match.no { background: #fdebd3; color: #8a4b0c; }
.sen-toggle { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; white-space: nowrap; cursor: pointer; }
/* Inicio */
.home-winners { margin: 0 0 18px; padding: 20px 22px; border: 1px solid var(--sim-line); border-radius: 14px; background: #fff; }
.home-winners-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 8px 18px; margin-bottom: 12px; }
.home-winners-head h2 { margin: 0 0 4px; color: #0b2a4f; font-family: var(--serif); font-size: 24px; font-weight: 600; }
.home-winners-head p { margin: 0; color: var(--sim-muted); font-size: 12.5px; }
#home-winners-body { margin-top: 14px; }
@media (max-width: 1100px) { .sen-explorer { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .sen-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sen-offices, .sen-offices.compact { grid-template-columns: 1fr; }
  .sen-office.wide .sen-winners { grid-template-columns: 1fr; }
  .sen-intro .sen-status { text-align: left; }
}
@media (max-width: 640px) {
  .sen-intro h2 { font-size: 27px; }
  .sen-verdict strong { font-size: 21px; }
  .sen-sources { grid-template-columns: 1fr; }
  .sen-w-button { grid-template-columns: 46px minmax(0, 1fr) 64px; }
  .sen-w-button .sen-avatar { display: none; }
  .sen-step .sim-tabs, .sen-toggle { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .sen-tab, .sen-w-button { transition: none; } }

/* ===== Panel interno · Inicio: posibles ganadores (home.js) e Historial (history.js) ===== */
#inicio, .hist-panel { --sim-muted: #58667c; --sim-line: #dce3ed; --sen-dem: #2361a4; --sen-dem-soft: #75a4d7; --sen-rep: #b63b35; --sen-rep-soft: #e4968e; --sen-toss: #8d939c; --sen-oth: #8b6bb8; font-variant-numeric: tabular-nums; }
.home-hero { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 10px 24px; margin-bottom: 18px; }
.home-eyebrow { display: inline-block; margin-bottom: 6px; color: #b63b35; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.home-hero h1 { margin: 0 0 6px; color: #0b2a4f; font-family: var(--serif); font-size: clamp(32px, 4vw, 44px); font-weight: 600; letter-spacing: -.02em; }
.home-hero p { max-width: 70ch; margin: 0; color: var(--sim-muted); font-size: 14px; line-height: 1.6; }
.home-updated { color: var(--sim-muted); font-size: 12px !important; }
#home-sources { margin-bottom: 16px; }
.home-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 16px; align-items: stretch; margin-bottom: 26px; }
.home-map-card { margin: 0; }
.home-summary { display: grid; align-content: start; gap: 12px; padding: 20px; border: 1px solid var(--sim-line); border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(12, 37, 69, .05); }
.home-summary-row { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--sim-line); border-radius: 10px; background: #fbfcfe; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.home-summary-row:hover { border-color: #aebed2; background: #f3f6fa; }
.home-summary-row:focus-visible { outline: 2px solid #0c2a4f; outline-offset: 2px; }
.home-summary-row > span { color: #0b2a4f; font-size: 13px; font-weight: 800; }
.home-compare-note { margin: 0; color: var(--sim-muted); font-size: 11.5px; line-height: 1.5; }
/* Secciones */
.home-sections { position: sticky; top: 84px; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border: 1px solid var(--sim-line); border-radius: 12px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); }
.home-section-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 14px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: #3c4f6a; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.home-section-tab b { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 7px; border-radius: 999px; background: #e7edf5; font-size: 11.5px; }
.home-section-tab:hover { background: #f1f5fa; }
.home-section-tab[aria-pressed="true"] { border-color: #0c2a4f; background: #0c2a4f; color: #fff; }
.home-section-tab[aria-pressed="true"] b { background: #284867; color: #fff; }
.home-section-tab:focus-visible { outline: 3px solid #fbbf24; outline-offset: 1px; }
.home-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: #eaf0f7; color: #0a3161; font-size: 13px; font-weight: 700; }
.home-filter[hidden] { display: none; }
.home-filter button { padding: 5px 10px; border: 1px solid #aebed2; border-radius: 999px; background: #fff; color: #0a3161; font: inherit; font-size: 12px; cursor: pointer; }
.home-section { margin-top: 26px; padding: 22px; border: 1px solid var(--sim-line); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(12, 37, 69, .05); scroll-margin-top: 150px; }
.home-section-head { display: grid; grid-template-columns: minmax(200px, auto) minmax(260px, 1fr); gap: 12px 26px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--sim-line); }
.home-section-head h3 { margin: 0; color: #0b2a4f; font-family: var(--serif); font-size: 26px; font-weight: 600; }
.home-section-head span { color: var(--sim-muted); font-size: 12px; }
.home-group { display: flex; align-items: center; gap: 10px; margin: 20px 0 12px; color: var(--c, #58667c); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.home-group::after { content: ""; flex: 1; height: 2px; border-radius: 1px; background: var(--c, #dce3ed); opacity: .35; }
.home-group b { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--c, #58667c); color: #fff; font-size: 11px; letter-spacing: 0; }
.home-group.dem { --c: var(--sen-dem); } .home-group.rep { --c: var(--sen-rep); } .home-group.toss { --c: #6b727d; } .home-group.oth { --c: #6a4c96; }
/* Perfiles */
.pc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.pc { --c: var(--sen-toss); }
.pc.dem { --c: var(--sen-dem); } .pc.rep { --c: var(--sen-rep); } .pc.oth { --c: var(--sen-oth); }
.pc-button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "race race race" "photo body odds" "bar bar bar" "rival rival rival" "change change change"; gap: 10px 12px; align-items: center; width: 100%; height: 100%; padding: 16px; border: 1px solid var(--sim-line); border-top: 4px solid var(--c); border-radius: 12px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: box-shadow .18s ease, transform .18s ease; }
.pc-button:hover { box-shadow: 0 8px 22px rgba(12, 37, 69, .12); transform: translateY(-2px); }
.pc-button:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; }
.pc-photo { position: relative; grid-area: photo; }
.pc-photo .sen-avatar { width: 64px; height: 64px; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--c); font-size: 18px; }
.pc-party { position: absolute; right: -4px; bottom: -4px; display: inline-grid; place-items: center; width: 24px; height: 24px; border: 2px solid #fff; border-radius: 50%; background: var(--c); color: #fff; font-size: 11px; font-weight: 900; }
.pc-body { display: grid; gap: 2px; grid-area: body; min-width: 0; }
.pc-race { grid-area: race; padding-bottom: 8px; border-bottom: 1px solid #eef1f6; color: var(--sim-muted); font-size: 11.5px; line-height: 1.4; }
.pc-race b { color: #0b2a4f; font-weight: 800; }
.pc-name { overflow: hidden; color: #0b2a4f; font-size: 16px; font-weight: 800; line-height: 1.25; text-overflow: ellipsis; }
.pc-party-name { color: var(--c); font-size: 12px; font-weight: 700; }
.pc-odds { display: grid; grid-area: odds; justify-items: end; }
.pc-odds b { color: var(--c); font-size: 22px; font-weight: 800; line-height: 1; }
.pc-odds small { color: var(--sim-muted); font-size: 10.5px; }
.pc-bar { position: relative; grid-area: bar; height: 6px; overflow: hidden; border-radius: 3px; background: #e7edf5; }
.pc-bar i { position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: 3px; background: var(--c); }
.pc-rival { grid-area: rival; margin: 0; color: var(--sim-muted); font-size: 11.5px; line-height: 1.45; }
.pc-change { grid-area: change; justify-self: start; margin: 0; padding: 3px 9px; border-radius: 999px; background: #eef1f6; color: #3c4f6a; font-size: 11px; font-weight: 700; }
.pc-change.up { background: #e2f3ea; color: #1f6b43; } .pc-change.down { background: #fdebd3; color: #8a4b0c; }
.pc-change.flip { background: #f8e5e3; color: #8e2c25; } .pc-change.new { background: #e3edf9; color: #1f4f86; }
/* Historial */
.hist-select { min-width: 260px; margin-left: auto; }
.hist-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.hist-kpi { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--sim-line); border-left: 4px solid #aebed2; border-radius: 10px; background: #fff; }
.hist-kpi.flip { border-left-color: var(--sen-rep); } .hist-kpi.moved { border-left-color: #c48a1d; } .hist-kpi.new { border-left-color: var(--sen-dem); }
.hist-kpi strong { color: #0b2a4f; font-size: 26px; font-weight: 800; }
.hist-kpi span { font-size: 13px; font-weight: 700; } .hist-kpi small { color: var(--sim-muted); font-size: 11px; }
.hist-table-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin: 14px 0 8px; }
.hist-table-head p { margin: 0; color: var(--sim-muted); font-size: 12.5px; }
.hist-table td strong { display: block; font-size: 13px; }
.hist-table td strong.dem { color: var(--sen-dem); } .hist-table td strong.rep { color: var(--sen-rep); }
.hist-table td small { color: var(--sim-muted); font-size: 11px; }
.hist-row[tabindex] { cursor: pointer; }
.hist-row:hover, .hist-row.is-selected { background: #f3f6fa; }
.hist-delta b { font-size: 13px; } .hist-delta .up { color: #1f6b43; } .hist-delta .down { color: #8a4b0c; }
.hist-tag { display: inline-block; padding: 3px 9px; border-radius: 999px; background: #eef1f6; font-size: 11px; font-weight: 700; }
.hist-tag.flip { background: #f8e5e3; color: #8e2c25; } .hist-tag.moved { background: #fdebd3; color: #8a4b0c; } .hist-tag.new { background: #e3edf9; color: #1f4f86; } .hist-tag.gone { background: #eceef1; color: #4f4472; }
.hist-chart { padding: 18px; border: 1px solid var(--sim-line); border-radius: 12px; background: #fff; }
.hist-svg { display: block; width: 100%; height: auto; }
.hist-grid { stroke: #e7edf5; } .hist-mid { stroke: #aebed2; stroke-dasharray: 4 4; }
.hist-axis { fill: #58667c; font-size: 11px; }
.hist-line { fill: none; stroke: #8a7fae; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.hist-line.dem { stroke: var(--sen-dem); } .hist-line.rep { stroke: var(--sen-rep); }
.hist-dot { fill: #fbbf24; stroke: #0c2545; stroke-width: 2; }
.hist-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.hist-total { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--sim-line); border-radius: 10px; background: #fff; }
.hist-total span { color: var(--sim-muted); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.hist-total strong { color: #0b2a4f; font-size: 22px; } .hist-total small { color: var(--sim-muted); font-size: 11px; }
.hist-sub { margin: 18px 0 8px; color: var(--sim-muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.hist-changes { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hist-changes > li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 14px; align-items: center; padding: 8px 12px; border: 1px solid var(--sim-line); border-radius: 8px; background: #fff; font-size: 12.5px; }
.hist-changes > li span { color: var(--sim-muted); font-size: 11.5px; }
.hist-versions { grid-column: 1 / -1; margin: 6px 0 0; padding-left: 20px; color: #3c4f6a; font-size: 12px; line-height: 1.7; }
.hist-db { padding: 18px 22px; border: 1px solid var(--sim-line); border-radius: 12px; background: #fff; font-size: 13px; line-height: 1.7; }
.hist-db ul { margin: 6px 0 10px; padding-left: 20px; }
.hist-db code { padding: 1px 5px; border-radius: 4px; background: #eef1f6; font-size: 12px; }
.hist-downloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.hist-download { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--sim-line); border-radius: 12px; background: #fff; color: inherit; text-decoration: none; transition: box-shadow .18s ease, border-color .18s ease; }
.hist-download:hover { border-color: #aebed2; box-shadow: 0 6px 18px rgba(12, 37, 69, .1); }
.hist-download:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; }
.hist-download strong { display: block; color: #0b2a4f; font-size: 15px; }
.hist-download small { color: var(--sim-muted); font-size: 12px; line-height: 1.5; }
.hist-download-icon { display: inline-grid; flex: none; place-items: center; width: 48px; height: 56px; border-radius: 8px; color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .04em; }
.hist-download-icon.xlsx { background: #1d6f42; } .hist-download-icon.pdf { background: #b63b35; }
@media (max-width: 1100px) { .home-top { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .home-section { padding: 16px; }
  .home-section-head { grid-template-columns: 1fr; }
  .home-sections { top: 60px; }
  .hist-select { margin-left: 0; min-width: 0; width: 100%; }
  .hist-changes > li { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .pc-button, .home-summary-row { transition: none; } .pc-button:hover { transform: none; } }
.hist-select select { width: 100%; max-width: none; }
.hist-delta small { display: block; color: var(--sim-muted); font-size: 10.5px; }

/* ===== Panel interno · Usuarios y permisos (users.js) ===== */
/* Solo lectura no ve lo que no puede cambiar; lo de administración sólo lo ven los administradores. */
body[data-role="lector"] .requires-edit { display: none !important; }
body:not([data-role="admin"]) .requires-admin { display: none !important; }
.side-account { display: block; width: calc(100% - 32px); margin: -6px 16px 14px; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; background: transparent; color: #c1cde0; font: inherit; font-size: 11.5px; cursor: pointer; }
.side-account:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.side-account[hidden] { display: none; }
.users-panel { --sim-line: #dce3ed; --sim-muted: #58667c; }
.users-layout { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 18px; align-items: start; }
.users-card { display: grid; gap: 12px; padding: 20px 22px; border: 1px solid var(--sim-line); border-radius: 12px; background: #fff; }
.users-card h3 { margin: 0 0 2px; color: #0b2a4f; font-size: 17px; }
.users-card label { display: grid; gap: 5px; color: #23395a; font-size: 12.5px; font-weight: 700; }
.users-card label small { color: var(--sim-muted); font-size: 11px; font-weight: 400; }
.users-card input, .users-card select, .users-select, .account-dialog input { min-height: 40px; padding: 8px 11px; border: 1px solid #cfd8e4; border-radius: 8px; background: #fff; color: #1d2c44; font: inherit; font-size: 13px; font-weight: 400; }
.users-card input:focus-visible, .users-card select:focus-visible, .users-select:focus-visible, .account-dialog input:focus-visible { outline: 2px solid #0c2a4f; outline-offset: 1px; }
.users-password { display: flex; gap: 6px; }
.users-password input { flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace; }
.users-table td strong { display: block; font-size: 13px; }
.users-table td small { color: var(--sim-muted); font-size: 11px; }
.users-table tr.is-off td { opacity: .6; }
.users-role, .users-status { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.users-role.admin { background: #e3edf9; color: #1f4f86; }
.users-status.on { background: #e2f3ea; color: #1f6b43; } .users-status.off { background: #eef1f6; color: #58667c; }
.users-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.users-delete { color: #8e2c25 !important; }
.account-dialog { width: min(420px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 14px; box-shadow: 0 20px 60px rgba(12, 37, 69, .3); }
.account-dialog::backdrop { background: rgba(7, 26, 51, .55); }
.account-dialog form { display: grid; gap: 14px; padding: 22px 24px; }
.account-dialog h2 { margin: 0; color: #0b2a4f; font-family: var(--serif); font-size: 22px; font-weight: 600; }
.account-dialog label { display: grid; gap: 5px; color: #23395a; font-size: 12.5px; font-weight: 700; }
.account-dialog label small { color: #58667c; font-size: 11px; font-weight: 400; }
.account-actions { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 900px) { .users-layout { grid-template-columns: 1fr; } .users-actions { justify-content: flex-start; } }
.sim-table caption.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Pulido del panel interno: barra superior alineada con el contenido, rótulo y pestañas en
   teléfono, y estados vacíos que explican el siguiente paso. */
.admin-app .topbar { max-width: calc(1480px - 36px); }
.admin-app .topbar::before { content: ""; position: absolute; left: -18px; right: -18px; bottom: 100%; height: 14px; background: #eef2f8; }
.admin-app .view-empty.rich { display: grid; justify-items: center; gap: 8px; grid-column: 1 / -1; padding: 34px 26px; border: 1px dashed #cfd9e6; }
.admin-app .view-empty.rich strong { color: var(--ink); font-size: 15px; }
.admin-app .view-empty.rich p { max-width: 60ch; margin: 0; line-height: 1.6; }
.admin-app .view-empty.rich .button { margin-top: 6px; }
.admin-app .watch-list > .view-empty, .admin-app .race-work-grid > .view-empty { grid-column: 1 / -1; }
@media (max-width: 960px) {
  .admin-app .topbar::before { left: -10px; right: -10px; height: 10px; }
}
@media (max-width: 640px) {
  .admin-app .topbar-title small { display: none; }
  .admin-app .topbar-title strong { font-size: 16px; }
  /* Fuentes en una fila que se desliza, en lugar de una cuadrícula de 2 × 2. */
  .admin-app .sim-source-tabs, .admin-app .sen-tabs { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
  .admin-app .sim-source-tabs::-webkit-scrollbar, .admin-app .sen-tabs::-webkit-scrollbar { display: none; }
  .admin-app .sim-source-tabs button, .admin-app .sen-tab { flex: 0 0 auto; min-width: 150px; min-height: 56px; scroll-snap-align: start; }
}

/* Barra superior: fuente elegida (una para todo el panel) y estado de las fuentes. */
.topbar-sources { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line-soft); border-radius: 11px; background: #eef2f8; }
.topbar-sources[hidden] { display: none; }
.topbar-sources button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 0 11px; border: 0; border-radius: 8px; background: transparent; color: #3c4f6a; font: inherit; font-size: 13px; font-weight: 750; white-space: nowrap; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.topbar-sources button b { min-width: 22px; padding: 1px 6px; border-radius: 6px; background: #d8e2ef; color: #3d516d; font-size: 11.5px; font-variant-numeric: tabular-nums; text-align: center; }
.topbar-sources button[aria-pressed="true"] { background: #0c2a4f; color: #fff; }
.topbar-sources button[aria-pressed="true"] b { background: #284867; color: #fff; }
.topbar-sources button:hover:not([aria-pressed="true"]) { background: #dce5f0; }
.topbar-sources button:focus-visible, .health-toggle:focus-visible { outline: 3px solid #fbbf24; outline-offset: 1px; }
.health { position: relative; }
.health-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 13px; border: 1px solid var(--line-soft); border-radius: 11px; background: #fff; color: #3c4f6a; font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.health-toggle[hidden] { display: none; }
.health-toggle:hover { border-color: #b9c6da; background: #f5f8fc; }
.health-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #9aa6b6; }
.health-toggle[data-tone="ok"] .health-dot { background: #1f8a5b; box-shadow: 0 0 0 3px rgba(31, 138, 91, .16); }
.health-toggle[data-tone="stale"] .health-dot { background: #c98a14; box-shadow: 0 0 0 3px rgba(201, 138, 20, .18); }
.health-toggle[data-tone="error"] { border-color: #f1c9c5; color: #9f332c; }
.health-toggle[data-tone="error"] .health-dot { background: #c6473f; box-shadow: 0 0 0 3px rgba(198, 71, 63, .16); }
.health-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: min(360px, calc(100vw - 20px)); padding: 14px; border: 1px solid var(--line-soft); border-radius: 14px; background: #fff; box-shadow: 0 18px 40px -16px rgba(10, 33, 71, .4); transform-origin: top right; animation: health-in .16s cubic-bezier(.23, 1, .32, 1); }
.health-panel[hidden] { display: none; }
@keyframes health-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.health-title { margin: 0 0 8px; color: var(--ink); font-size: 13px; font-weight: 800; }
.health-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.health-list li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: baseline; gap: 2px 9px; padding: 8px 6px; border-radius: 8px; }
.health-list li::before { content: ""; grid-row: 1 / 3; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: #9aa6b6; }
.health-list li[data-tone="ok"]::before { background: #1f8a5b; }
.health-list li[data-tone="stale"]::before { background: #c98a14; }
.health-list li[data-tone="error"]::before { background: #c6473f; }
.health-list li[data-tone="off"]::before { background: #c3cad4; }
.health-list li[data-tone="error"] { background: #fdf2f1; }
.health-list strong { color: var(--ink); font-size: 13px; }
.health-list small { color: #6b778c; font-size: 11px; text-align: right; }
.health-list span { grid-column: 2 / -1; color: #5c687d; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.health-list li[data-tone="error"] span { color: #9f332c; }
.health-list li[data-tone="stale"] span { color: #7a5410; }
.health-list .health-model { display: block; margin-top: 6px; padding: 9px 6px 0; border-top: 1px solid var(--line-soft); border-radius: 0; color: #5c687d; font-size: 12px; }
.health-list .health-model::before { content: none; }
.health-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.health-foot .topbar-button { min-height: 36px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .health-panel { animation: none; } }

/* Sesión en el menú lateral: cambiar contraseña y cerrar sesión. */
.side-actions { display: flex; gap: 6px; margin: -6px 16px 14px; }
.side-actions .side-account { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 6px; width: auto; margin: 0; }
.side-actions .side-account[hidden] { display: none; }
.side-logout .fa { width: 12px; height: 12px; }
.side-logout:hover { border-color: rgba(238, 162, 148, .55); color: #ffd9d3; }

@media (max-width: 1240px) { .topbar-sources button b { display: none; } }
@media (max-width: 960px) {
  .topbar { flex-wrap: wrap; row-gap: 10px; }
  .topbar-sources { order: 5; flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; }
  .topbar-sources::-webkit-scrollbar { display: none; }
  .topbar-sources button { flex: 1 0 auto; }
  .topbar-sources button b { display: inline-block; }
}
@media (max-width: 640px) {
  .health-toggle { width: 42px; padding: 0; justify-content: center; }
  .health-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .health-foot .topbar-time { display: inline; }
  .health-foot .topbar-button span { display: inline; }
  .topbar-sources button { padding: 0 9px; font-size: 12.5px; }
  .topbar-sources button b { display: none; }
}

/* Ayudas «?»: la explicación larga queda a un toque, sin ocupar la vista. */
.tip { position: relative; display: inline-flex; margin-left: 4px; vertical-align: -4px; }
.tip-button { position: relative; display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 1.5px solid currentColor; border-radius: 50%; background: transparent; color: #7a879b; font: inherit; font-size: 11px; font-weight: 800; line-height: 1; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.tip-button::after { content: ""; position: absolute; inset: -8px; }
.tip-button:hover, .tip-button[aria-expanded="true"] { background: #e5edf6; color: var(--ink); }
.tip-button:focus-visible { outline: 3px solid #fbbf24; outline-offset: 1px; }
.admin-app .sim-map-card .tip-button { color: #aebed2; }
.admin-app .sim-map-card .tip-button:hover, .admin-app .sim-map-card .tip-button[aria-expanded="true"] { background: rgba(255, 255, 255, .14); color: #fff; }
.admin-app .tip .tip-body { position: absolute; top: calc(100% + 8px); left: -8px; z-index: 25; width: min(340px, calc(100vw - 32px)); padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 12px; background: #fff; box-shadow: 0 16px 36px -14px rgba(10, 33, 71, .38); color: #334761; font-size: 12.5px; font-weight: 400; letter-spacing: 0; line-height: 1.6; text-align: left; text-transform: none; white-space: normal; animation: health-in .14s cubic-bezier(.23, 1, .32, 1); }
.admin-app .tip .tip-body[hidden] { display: none; }
.caption-title { display: inline-flex; align-items: center; gap: 4px; }
.caption-title .tip { vertical-align: middle; }

/* Índice fijo de las vistas largas. */
.view-toc { position: sticky; top: var(--topbar-space, 92px); z-index: 20; display: flex; gap: 2px; width: fit-content; max-width: 100%; margin: 0 0 18px; padding: 4px; overflow-x: auto; border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(255, 255, 255, .94); box-shadow: 0 8px 22px -16px rgba(10, 33, 71, .4); scrollbar-width: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.view-toc::-webkit-scrollbar { display: none; }
.view-toc a { flex: none; padding: 7px 12px; border-radius: 8px; color: #46597a; font-size: 12.5px; font-weight: 750; text-decoration: none; white-space: nowrap; transition: background-color .15s ease, color .15s ease; }
.view-toc a:hover { background: #eef2f8; color: var(--ink); }
.view-toc a[aria-current="true"] { background: #0c2a4f; color: #fff; }
.view-toc a:focus-visible { outline: 3px solid #fbbf24; outline-offset: 1px; }

/* Búsqueda del panel (Ctrl+K). */
.topbar-search { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 8px 0 12px; border: 1px solid var(--line-soft); border-radius: 11px; background: #fff; color: #5c687d; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.topbar-search[hidden] { display: none; }
.topbar-search:hover { border-color: #b9c6da; background: #f5f8fc; }
.topbar-search:focus-visible { outline: 3px solid #fbbf24; outline-offset: 1px; }
.topbar-search .fa { width: 14px; height: 14px; }
.topbar-search kbd, .palette-hint kbd { padding: 2px 6px; border: 1px solid #d5deea; border-bottom-width: 2px; border-radius: 6px; background: #f5f8fc; color: #46597a; font: inherit; font-size: 11px; font-weight: 750; }
.palette { width: min(640px, calc(100vw - 24px)); max-height: min(560px, calc(100dvh - 48px)); margin: 10vh auto auto; padding: 0; overflow: hidden; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 30px 80px -20px rgba(4, 13, 30, .55); color: #1d2c44; }
.palette::backdrop { background: rgba(4, 13, 30, .45); }
.palette[open] { animation: palette-in .18s cubic-bezier(.23, 1, .32, 1); }
@keyframes palette-in { from { opacity: 0; transform: translateY(-6px) scale(.985); } }
.palette-box { display: flex; flex-direction: column; max-height: inherit; }
.palette-field { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); color: #6b778c; }
.palette-field .fa { flex: none; width: 16px; height: 16px; }
.palette .palette-field input { flex: 1; width: auto; min-width: 0; margin: 0; padding: 4px 0; border: 0; border-radius: 0; outline: 0; background: transparent; box-shadow: none; color: var(--ink); font: inherit; font-size: 16px; }
.palette-list { flex: 1; margin: 0; padding: 6px; overflow-y: auto; list-style: none; overscroll-behavior: contain; }
.palette-group { padding: 10px 10px 4px; color: #6b778c; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.palette-option { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 10px; border-radius: 9px; cursor: pointer; }
.palette-option strong { color: var(--ink); font-size: 14px; }
.palette-option small { overflow: hidden; color: #5c687d; font-size: 12px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.palette-option[aria-selected="true"] { background: #e8f0fb; box-shadow: inset 3px 0 0 #2f6fc0; }
.palette-empty { padding: 22px 12px; color: #5c687d; font-size: 13px; text-align: center; }
.palette-hint { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 10px 16px; border-top: 1px solid var(--line-soft); color: #6b778c; font-size: 12px; }
.palette-hint kbd { margin-right: 3px; }
@media (max-width: 1240px) {
  .topbar-search { width: 42px; padding: 0; justify-content: center; }
  .topbar-search span, .topbar-search kbd { display: none; }
}
@media (max-width: 640px) {
  .palette { margin-top: 12px; }
  .palette-option { flex-direction: column; gap: 2px; }
  .palette-option small { text-align: left; white-space: normal; }
  .palette-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .palette[open], .admin-app .tip .tip-body { animation: none; } }
@media (max-width: 960px) {
  /* Tapa el hueco entre la barra superior y el índice para que no asome el contenido. */
  .view-toc { box-shadow: 0 -10px 0 #eef2f8, 0 8px 22px -16px rgba(10, 33, 71, .4); }
}
@media (max-width: 960px) {
  /* Al bajar por la página, la fila de fuentes se recoge (body.bars-compact) y vuelve al subir. */
  .topbar { row-gap: 0; }
  .topbar-sources { max-height: 60px; margin-top: 10px; transition: max-height .22s cubic-bezier(.23, 1, .32, 1), margin-top .22s cubic-bezier(.23, 1, .32, 1), padding .22s cubic-bezier(.23, 1, .32, 1), opacity .16s ease; }
  .bars-compact .topbar-sources { max-height: 0; margin-top: 0; padding-block: 0; border-width: 0; opacity: 0; visibility: hidden; }
  .view-toc { margin-bottom: 14px; }
  .view-toc a { padding: 6px 10px; }
}
@media (prefers-reduced-motion: reduce) { .topbar-sources { transition: none; } }

/* Mapas: siglas legibles, «Sin encuestas» rayado y tooltip al pasar el cursor. */
.admin-app .sim-state-label { font-size: 15.5px; stroke-width: 3.5; }
.admin-app .sim-state-label.no-data { font-size: 13px; }
.admin-app .sim-state-label.is-tiny { font-size: 12px; stroke-width: 3; }
.admin-app .sim-state.none:not(.sim-district) { fill: url(#map-no-data); }
.admin-app .sim-map-card .sim-legend .none::before { background: repeating-linear-gradient(45deg, #2c4566 0 3px, #3b5679 3px 6px); border: 1px solid #6f86a5; }
.map-tip { position: fixed; top: 0; left: 0; z-index: 60; display: grid; gap: 3px; max-width: 280px; padding: 9px 11px; border-radius: 10px; background: #071a33; box-shadow: 0 14px 30px -12px rgba(4, 13, 30, .6); color: #d4deeb; font-size: 12px; line-height: 1.45; pointer-events: none; }
.map-tip[hidden] { display: none; }
.map-tip strong { color: #fff; font-size: 12.5px; }

/* Fichas: cada candidatura en su tarjeta, con retrato, suma de porcentajes y vista previa. */
.cand-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.admin-app .cand-card { min-width: 0; margin: 0; padding: 14px 14px 4px; border: 1px solid #dce3ed; border-radius: 12px; background: #f8fafd; }
.admin-app .cand-card legend { padding: 0 6px; color: #0a3161; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.cand-photo { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cand-avatar { --ring: #8f9db3; position: relative; display: grid; flex: none; place-items: center; width: 60px; height: 60px; overflow: hidden; border: 3px solid var(--ring); border-radius: 50%; background: #e9eef5; color: #456281; font-size: 17px; font-weight: 800; }
.cand-avatar.dem { --ring: #2361a4; }
.cand-avatar.rep { --ring: #b63b35; }
.cand-avatar.oth { --ring: #7b5cc4; }
.cand-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.cand-avatar img[hidden] { display: none; }
.cand-photo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.cand-photo-actions small { flex: 1 1 100%; color: #6b778c; font-size: 11.5px; }
.admin-app .form-panel .cand-upload { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.admin-app .form-panel .cand-upload input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.cand-upload:focus-within { outline: 3px solid #fbbf24; outline-offset: 1px; }
.cand-clear { padding: 0; border: 0; background: none; color: #9f332c; font: inherit; font-size: 12.5px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.cand-clear[hidden] { display: none; }
.cand-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0 10px; }
.cand-sum { min-height: 1.5em; margin: 10px 2px 0; color: #46597a; font-size: 13px; font-variant-numeric: tabular-nums; }
.cand-sum.error { color: #9f332c; font-weight: 700; }
.cand-preview { margin: 12px 0 4px; padding: 14px; border: 1px dashed #c9d5e4; border-radius: 12px; background: #fff; }
.cand-preview[hidden] { display: none; }
.cand-preview figcaption { color: #6b778c; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.cand-preview-race { margin: 4px 0 10px; color: #0a3161; font-size: 14px; font-weight: 750; }
.cand-preview-bar { display: flex; gap: 3px; min-height: 52px; }
.cand-side { display: grid; align-content: center; gap: 2px; min-width: 0; padding: 6px 10px; border-radius: 8px; color: #fff; font-variant-numeric: tabular-nums; }
.cand-side strong { font-size: 17px; line-height: 1.1; }
.cand-side span { overflow: hidden; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; opacity: .92; }
.cand-side.dem { background: #2361a4; }
.cand-side.rep { background: #b63b35; }
.cand-side.oth { background: #7b5cc4; }
.cand-side.rest { padding: 0; background: repeating-linear-gradient(45deg, #e7edf5 0 4px, #f4f7fb 4px 8px); }
.cand-preview-meta { margin: 8px 0 0; color: #5c687d; font-size: 12px; }
@media (max-width: 760px) {
  .cand-grid { grid-template-columns: 1fr; }
  .cand-side span { white-space: normal; }
}

/* Medios y redes. Verde = favorece, naranja = perjudica (distinto del rojo republicano). */
.media-panel { --up: #1f7a52; --up-soft: #e3f3ea; --down: #b4531c; --down-soft: #fbeadf; }
.media-panel strong.dem, .media-panel b.dem { color: var(--sen-dem); }
.media-panel strong.rep, .media-panel b.rep { color: var(--sen-rep); }
.media-panel strong.oth, .media-panel b.oth { color: var(--sen-oth); }
.media-panel i.dem { background: var(--sen-dem); } .media-panel i.rep { background: var(--sen-rep); } .media-panel i.oth { background: var(--sen-oth); }
.media-actions { display: grid; justify-items: end; gap: 8px; }
.media-sources { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.media-source { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid var(--sim-line); border-radius: 999px; background: #fff; font-size: 12.5px; }
.media-source i { width: 8px; height: 8px; border-radius: 50%; background: #9aa6b6; }
.media-source.ok i { background: #1f8a5b; } .media-source.error i { background: #c6473f; } .media-source.off i { background: #c3cad4; }
.media-source strong { color: #0b2a4f; }
.media-source small { color: #6b778c; }
.media-source.off { color: #8a94a3; }
.media-notice { margin: 10px 0 0; padding: 10px 14px; border-radius: 10px; background: #fff4de; color: #71511c; font-size: 13px; line-height: 1.55; }
.media-notice[hidden] { display: none; }
.media-alerts { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.media-alert { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--sim-line); border-left: 4px solid #9aa6b6; border-radius: 12px; background: #fff; }
.media-alert.up { border-left-color: var(--up); } .media-alert.down { border-left-color: var(--down); }
.media-alert-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 11.5px; }
.media-alert-head time { margin-left: auto; color: #6b778c; }
.media-kind { padding: 2px 8px; border-radius: 999px; background: #eef2f8; color: #0b2a4f; font-weight: 800; }
.media-kind.mayor { background: #0c2545; color: #fff; }
.media-event { color: #46597a; font-weight: 700; }
.media-alert p { margin: 0; }
.media-alert-who { font-size: 14px; color: #46597a; }
.media-alert-summary { color: #1d2c44; font-size: 13.5px; line-height: 1.5; }
.media-alert-reason { color: #5c687d; font-size: 12px; }
.media-alert-points { font-size: 13px; font-weight: 800; color: #5c687d; font-variant-numeric: tabular-nums; }
.media-alert-points.up { color: var(--up); } .media-alert-points.down { color: var(--down); }
.media-link { overflow: hidden; color: #2f6fc0; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.media-table td, .media-compare-table td { vertical-align: top; }
.media-table td > strong, .media-table td > small, .media-compare-table td > strong, .media-compare-table td > small { display: block; }
.media-table td > small, .media-compare-table td > small { margin-top: 2px; color: #6b778c; font-size: 11.5px; }
.media-diverge { position: relative; display: block; width: 120px; height: 8px; margin: 4px 0 6px; border-radius: 4px; background: #eef2f8; }
.media-diverge::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: 50%; width: 1px; background: #9aa6b6; }
.media-diverge i { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.media-diverge i.left { right: 50%; } .media-diverge i.right { left: 50%; }
.media-effect strong { display: block; font-size: 12.5px; }
.media-none { color: #8a94a3; font-size: 12.5px; }
.media-flip, .media-delta { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.media-flip { background: #0c2545; color: #fff; }
.media-delta.up { background: var(--up-soft); color: var(--up); } .media-delta.down { background: var(--down-soft); color: var(--down); }
.media-split { display: flex; gap: 2px; width: 120px; height: 8px; margin: 4px 0 6px; overflow: hidden; border-radius: 4px; }
.media-movers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.media-movers-col { padding: 14px 16px; border: 1px solid var(--sim-line); border-radius: 12px; background: #fff; }
.media-movers-col h4 { margin: 0 0 8px; color: #0b2a4f; font-size: 14px; }
.media-mover { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(120px, auto); align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--sim-line); }
.media-mover-who { display: grid; gap: 2px; min-width: 0; }
.media-mover-who small { overflow: hidden; color: #6b778c; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.media-mover-events { color: #46597a !important; }
.media-spark { display: flex; align-items: flex-end; gap: 2px; height: 26px; }
.media-spark i { flex: 1; min-height: 2px; border-radius: 2px; background: #c3cad4; }
.media-spark i.up { background: var(--up); } .media-spark i.down { background: var(--down); }
.media-mover-value { display: grid; justify-items: end; gap: 2px; text-align: right; font-variant-numeric: tabular-nums; }
.media-mover-value strong { font-size: 16px; } .media-mover-value strong.up { color: var(--up); } .media-mover-value strong.down { color: var(--down); }
.media-mover-value small { color: #6b778c; font-size: 11px; }
.media-tone { display: inline-block; min-width: 42px; padding: 2px 7px; border-radius: 6px; background: #eef2f8; color: #46597a; font-size: 12px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.media-tone.up { background: var(--up-soft); color: var(--up); } .media-tone.down { background: var(--down-soft); color: var(--down); }
.media-toolbar { flex-wrap: wrap; }
.media-feed { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.media-item { display: grid; gap: 6px; padding: 13px 16px; border: 1px solid var(--sim-line); border-radius: 12px; background: #fff; }
.media-item-meta { margin: 0; color: #6b778c; font-size: 12px; }
.media-src { padding: 1px 7px; border-radius: 6px; background: #eef2f8; color: #0b2a4f; font-weight: 800; }
.media-item-title { color: #0b2a4f; font-size: 15px; font-weight: 750; text-decoration: none; }
.media-item-title:hover { text-decoration: underline; }
.media-item-summary { margin: 0; color: #334761; font-size: 13.5px; line-height: 1.5; }
.media-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.media-chip { padding: 3px 9px; border-radius: 999px; background: #eef2f8; color: #46597a; font-size: 12px; }
.media-chip.up { background: var(--up-soft); } .media-chip.down { background: var(--down-soft); }
.media-more { margin-top: 12px; }
.media-more[hidden] { display: none; }
.media-method { display: grid; gap: 8px; margin: 8px 0 0; padding-left: 20px; font-size: 13px; line-height: 1.6; }
@media (max-width: 760px) {
  .media-actions { justify-items: start; }
  .media-movers { grid-template-columns: 1fr; }
  .media-mover { grid-template-columns: minmax(0, 1fr) auto; }
  .media-spark { display: none; }
}
@media (max-width: 760px) {
  .media-table td[data-label]::before { display: block; margin-bottom: 4px; color: var(--sim-muted); font-size: 10.5px; font-weight: 600; content: attr(data-label); }
}

/* Medios y redes · tiempo real: cruces, mapa de quién ganó terreno y tablero por fuente. */
.live-crossings { margin: 0 0 16px; }
.live-crossings-title { margin: 0 0 8px; color: #0b2a4f; font-size: 13px; font-weight: 800; }
.live-crossings-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.live-cross { display: grid; gap: 4px; padding: 11px 14px; border: 1px solid var(--sim-line); border-left: 4px solid #9aa6b6; border-radius: 12px; background: #fff; }
.live-cross.dem { border-left-color: var(--sen-dem); } .live-cross.rep { border-left-color: var(--sen-rep); } .live-cross.oth { border-left-color: var(--sen-oth); }
.live-cross p { margin: 0; }
.live-cross-head { color: #6b778c; font-size: 11.5px; }
.live-cross-what { color: #334761; font-size: 14px; }
.live-cross small { color: #6b778c; font-size: 11.5px; }
.live-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr); align-items: start; gap: 16px; margin-bottom: 16px; }
.admin-app .live-map-card .sim-state.live-state.dem { fill: #3e82c8; }
.admin-app .live-map-card .sim-state.live-state.rep { fill: #db6b65; }
.admin-app .live-map-card .sim-state.live-state.tossup { fill: #bcbfc4; }
.live-summary { display: grid; gap: 8px; padding: 18px; border: 1px solid var(--sim-line); border-radius: 12px; background: #fff; }
.live-summary h4 { margin: 8px 0 0; color: #0b2a4f; font-size: 13px; }
.live-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.live-stat { display: grid; gap: 2px; padding: 10px; border-radius: 10px; background: #f5f8fc; }
.live-stat strong { color: #0b2a4f; font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.live-stat span { color: #5c687d; font-size: 11.5px; line-height: 1.35; }
.live-move { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; padding: 6px 0; border-top: 1px solid var(--sim-line); }
.live-move small { color: #6b778c; font-size: 11.5px; }
.live-disagree { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 999px; background: #fff4de; color: #71511c; font-size: 11px; font-weight: 800; }
.live-disagree-row { margin: 0; color: #46597a; font-size: 12.5px; }
.live-table td { vertical-align: top; }
.live-table td > strong, .live-table td > small { display: block; }
.live-table td > small { margin-top: 2px; color: #6b778c; font-size: 11.5px; }
.live-table .media-delta, .live-table .media-flip { margin-right: 4px; }
.live-search { min-width: min(320px, 100%); }
@media (max-width: 1100px) { .live-top { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .live-table td[data-label]::before { display: block; margin-bottom: 4px; color: var(--sim-muted); font-size: 10.5px; font-weight: 600; content: attr(data-label); }
  .live-stats { grid-template-columns: 1fr; }
}

/* Medios y redes, versión organizada: marcador por cargo, pestañas y una tabla por cargo. */
.media-sources-box { margin: 0 0 14px; }
.media-sources-box > summary { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--sim-line); border-radius: 999px; background: #fff; color: #46597a; font-size: 12.5px; font-weight: 750; cursor: pointer; list-style: none; }
.media-sources-box > summary::-webkit-details-marker { display: none; }
.media-sources-box > summary::before { content: "▸"; font-size: 10px; transition: transform .15s ease; }
.media-sources-box[open] > summary::before { transform: rotate(90deg); }
.media-sources-box .media-sources { margin-top: 10px; }
.media-offices { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 6px 0 18px; }
.media-office { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--sim-line); border-radius: 14px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .16s cubic-bezier(.23, 1, .32, 1); }
.media-office:hover { border-color: #b9c6da; }
.media-office:active { transform: scale(.99); }
.media-office.is-active { border-color: #0c2a4f; box-shadow: inset 0 0 0 1px #0c2a4f, 0 10px 24px -18px rgba(10, 33, 71, .5); }
.media-office:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; }
.media-office-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.media-office-head strong { color: #0b2a4f; font-size: 14.5px; }
.media-office-head small { color: #6b778c; font-size: 11.5px; white-space: nowrap; }
.media-office-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 11.5px; }
.media-office-label { color: #5c687d; }
.media-office-bar { display: flex; gap: 2px; height: 7px; overflow: hidden; border-radius: 4px; background: #eef2f8; }
.media-office-bar i.dem { background: var(--sen-dem); } .media-office-bar i.rep { background: var(--sen-rep); }
.media-office-nums { color: #334761; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.media-office-foot { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-top: 6px; border-top: 1px solid var(--sim-line); color: #6b778c; font-size: 11.5px; }
.media-office-foot .hot { color: #0b2a4f; font-weight: 800; } .media-office-foot .warm { color: #8a5a0b; font-weight: 800; }
.media-tabs { display: flex; gap: 2px; margin: 0 0 16px; padding: 4px; overflow-x: auto; border: 1px solid var(--sim-line); border-radius: 12px; background: #e9eef5; scrollbar-width: none; }
.media-tabs::-webkit-scrollbar { display: none; }
.media-tabs button { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 9px 14px; border: 0; border-radius: 9px; background: transparent; color: #3c4f6a; font: inherit; font-size: 13.5px; font-weight: 750; cursor: pointer; white-space: nowrap; }
.media-tabs button:hover:not([aria-selected="true"]) { background: #dce5f0; }
.media-tabs button[aria-selected="true"] { background: #0c2a4f; color: #fff; }
.media-tabs button:focus-visible { outline: 3px solid #fbbf24; outline-offset: 1px; }
.media-tabs button b { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: #c6473f; color: #fff; font-size: 11px; }
.media-tabs button b[hidden] { display: none; }
.media-tabpanel[hidden] { display: none; }
.media-race-tools { flex-wrap: wrap; margin-bottom: 10px; }
.media-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 14px; color: #5c687d; font-size: 12px; }
.media-legend span { display: inline-flex; align-items: center; gap: 6px; }
.race-group { margin: 0 0 22px; }
.race-group-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; margin: 0 0 8px; }
.race-group-head h3 { margin: 0; color: #0b2a4f; font-family: var(--serif); font-size: 22px; font-weight: 600; }
.race-group-head span { color: #5c687d; font-size: 12.5px; }
.live-table th:first-child { width: 22%; }
.live-table td > small b { font-weight: 700; }
.media-panel small b.dem { color: var(--sen-dem); } .media-panel small b.rep { color: var(--sen-rep); } .media-panel small b.oth { color: var(--sen-oth); }
.race-line.rebaso td:first-child { box-shadow: inset 3px 0 0 #0c2a4f; }
.race-line.disputa td:first-child { box-shadow: inset 3px 0 0 #d79a2b; }
.media-status-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; background: #eef2f8; color: #46597a; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.media-status-badge.rebaso { background: #0c2545; color: #fff; }
.media-status-badge.disputa { background: #fff1d6; color: #7a4f08; }
.media-status-badge.cerrada { background: #eceef1; color: #4a515c; }
.media-status-badge.consenso.dem { background: #e3edf9; color: #1f4f86; }
.media-status-badge.consenso.rep { background: #f8e5e3; color: #8e2c25; }
.media-status-badge.sin { background: transparent; color: #8a94a3; }
.live-table td > .media-status-badge + small { display: block; margin-top: 4px; color: #6b778c; font-size: 11.5px; }
/* Contiendas como tarjetas de análisis de sentimiento: foto, tono (a favor, neutral, en contra) y barras de referencia. */
.rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 14px; }
.rc-card { --rc-bg: #fff; --rc-soft: #f6f4f0; --rc-favor: #1f7a52; --rc-neutral: #c9c5bd; --rc-against: #c0582a; display: grid; align-content: start; gap: 14px; min-width: 0; padding: 16px 18px; border: 1px solid var(--sim-line); border-left: 4px solid var(--sim-line); border-radius: 12px; background: var(--rc-bg); }
.rc-card.disputa { border-left-color: #d79a2b; } .rc-card.rebaso { border-left-color: var(--sim-ink); }
.rc-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 12px; }
.rc-title { display: grid; gap: 2px; min-width: 0; }
.rc-kicker { color: var(--sim-muted); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rc-title strong { color: var(--sim-ink); font-size: 16px; }
.rc-status { display: grid; justify-items: end; gap: 3px; }
.rc-status small { color: var(--sim-muted); font-size: 11px; }
.rc-duel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 12px; }
.rc-versus { align-self: center; color: var(--sim-muted); font-size: 12px; font-weight: 700; }
.rc-side { display: grid; gap: 7px; min-width: 0; }
.rc-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rc-avatar.sen-avatar { flex: none; width: 52px; height: 52px; font-size: 15px; box-shadow: 0 0 0 2px var(--rc-bg), 0 0 0 4px var(--c); }
.rc-name { display: grid; min-width: 0; }
.rc-name strong { overflow: hidden; font-size: 14px; line-height: 1.25; text-overflow: ellipsis; }
.rc-name strong.dem { color: var(--sen-dem); } .rc-name strong.rep { color: var(--sen-rep); } .rc-name strong.oth { color: var(--sen-oth); }
.rc-name small { color: var(--sim-muted); font-size: 11.5px; }
.rc-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: 2px 0 0; }
.rc-score b { color: var(--sim-ink); font-size: 26px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.rc-score span { color: var(--sim-muted); font-size: 11.5px; }
.rc-mix { display: flex; gap: 2px; height: 10px; overflow: hidden; border-radius: 5px; background: var(--rc-soft); }
.rc-mix i { min-width: 0; }
.rc-mix i.favor { background: var(--rc-favor); } .rc-mix i.neutral { background: var(--rc-neutral); } .rc-mix i.against { background: var(--rc-against); }
.rc-mix-legend { display: flex; flex-wrap: wrap; gap: 2px 10px; margin: 0; color: var(--sim-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.rc-mix-legend span::before { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 2px; background: var(--dot); content: ""; }
.rc-mix-legend .favor { --dot: var(--rc-favor); } .rc-mix-legend .neutral { --dot: var(--rc-neutral); } .rc-mix-legend .against { --dot: var(--rc-against); }
.rc-trend { display: grid; gap: 2px; height: 52px; grid-template-rows: 1fr auto; }
.rc-trend small { color: var(--sim-muted); font-size: 10.5px; }
.rc-nodata { margin: 4px 0 0; color: var(--sim-muted); font-size: 12px; }
.rc-verdict { margin: 0; padding: 10px 12px; border-radius: 9px; background: var(--rc-soft); color: var(--sim-ink); font-size: 13px; line-height: 1.5; }
.rc-refs { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--sim-line); }
.rc-vs { display: grid; gap: 4px; }
.rc-vs-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.rc-vs-label { color: var(--sim-ink); font-size: 12px; font-weight: 700; }
.rc-vs-head small { color: var(--sim-muted); font-size: 11px; }
.rc-vs-bar { display: flex; gap: 2px; height: 18px; overflow: hidden; border-radius: 5px; }
.rc-vs-bar i { display: flex; align-items: center; min-width: 0; padding: 0 6px; overflow: hidden; color: #fff; font-size: 11px; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-vs-bar i + i { justify-content: flex-end; }
.rc-vs-bar i.dem { background: var(--sen-dem); } .rc-vs-bar i.rep { background: var(--sen-rep); } .rc-vs-bar i.oth { background: var(--sen-oth); }
.rc-vs-bar i.dem + i.dem, .rc-vs-bar i.rep + i.rep { opacity: .6; }
.rc-vs .media-delta { justify-self: start; margin-top: 0; }
@media (max-width: 520px) {
  .rc-card { padding: 14px; }
  .rc-duel { grid-template-columns: 1fr; }
  .rc-versus { justify-self: center; }
}
.media-h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 6px 0 10px; color: #0b2a4f; font-size: 17px; }
.media-h3 small { color: #6b778c; font-size: 12.5px; font-weight: 500; }
.media-h3 + * { margin-bottom: 22px; }
.media-viral { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.media-viral-card { display: grid; align-content: start; gap: 6px; padding: 14px 16px; border: 1px solid var(--sim-line); border-top: 4px solid #46597a; border-radius: 12px; background: #fff; }
.media-viral-card.x { border-top-color: #111; } .media-viral-card.facebook { border-top-color: #1877f2; } .media-viral-card.instagram { border-top-color: #c13584; }
.media-viral-card.tiktok { border-top-color: #25c2c9; } .media-viral-card.youtube { border-top-color: #e62117; }
.media-viral-card h4 { margin: 0; color: #0b2a4f; font-size: 15px; }
.media-viral-card p { margin: 0; }
.media-viral-count { color: #334761; font-size: 13px; }
.media-viral-top { color: #5c687d; font-size: 12px; }
.media-viral-card ul { display: grid; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.media-viral-card li { display: grid; gap: 1px; }
.media-viral-link { color: #0b2a4f; font-size: 13px; font-weight: 700; text-decoration: none; }
.media-viral-link:hover { text-decoration: underline; }
.media-viral-card li small { color: #6b778c; font-size: 11.5px; }
.social-links { display: flex; flex-wrap: wrap; gap: 6px; }
.social-link { padding: 3px 9px; border: 1px solid var(--sim-line); border-radius: 999px; color: #0b2a4f; font-size: 12px; font-weight: 700; text-decoration: none; }
.social-link:hover { background: #eef2f8; }
.social-link.x { border-color: #c9ccd1; } .social-link.facebook { border-color: #b7cff8; } .social-link.instagram { border-color: #ebc0dc; }
.social-link.tiktok { border-color: #b4e8ea; } .social-link.youtube { border-color: #f4b9b5; }
.media-accounts-table td > strong, .media-accounts-table td > small { display: block; }
.media-accounts-table td > small { color: #6b778c; font-size: 11.5px; }
.media-platform { margin-left: 6px; padding: 1px 7px; border-radius: 6px; background: #f3e8ff; color: #5b2a86; font-size: 11px; font-weight: 800; }
@media (max-width: 760px) {
  .media-offices { grid-template-columns: 1fr; }
  .live-table th:first-child { width: auto; }
  .media-accounts-table td[data-label]::before { display: block; margin-bottom: 4px; color: var(--sim-muted); font-size: 10.5px; font-weight: 600; content: attr(data-label); }
}
.media-panel .media-delta { white-space: nowrap; margin-top: 4px; }
@media (max-width: 760px) {
  /* El marcador por cargo se desliza de lado en el teléfono. */
  .media-offices { display: flex; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4px; scrollbar-width: none; }
  .media-offices::-webkit-scrollbar { display: none; }
  .media-office { flex: 0 0 82%; scroll-snap-align: start; }
}

/* Odiseo: resultados de cada pregunta (también con muestra chica) y el resto de preguntas plegadas. */
.od-question-box { margin-top: 10px; }
.od-n { margin: 2px 0 6px; color: #6b778c; font-size: 12px; }
.od-more { margin-top: 10px; border-top: 1px solid #e3e8f0; padding-top: 8px; }
.od-more > summary { color: #2f6fc0; font-size: 13px; font-weight: 750; cursor: pointer; }
.od-more .od-question-box { margin-top: 12px; }
/* Lo que dice Odiseo: todas sus encuestas del estado, como contexto de la predicción. */
.sim-od-context { margin-top: 22px; padding: 14px 16px 6px; border: 1px solid var(--sim-line); border-radius: 12px; background: #f8fafc; }
.sim-od-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 14px; padding-bottom: 12px; }
.sim-od-title { display: flex; align-items: center; gap: 7px; margin: 0; color: #21201d; font-size: 13px; font-weight: 750; letter-spacing: -.01em; }
.sim-od-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.sim-od-stat { padding: 3px 9px; border: 1px solid var(--sim-line); border-radius: 999px; color: var(--sim-muted); font-size: 10.5px; white-space: nowrap; cursor: default; }
.sim-od-stat b { color: #21201d; font-weight: 750; font-variant-numeric: tabular-nums; }
.sim-od-stat.ok b { color: #23613a; }
.sim-od-stat.warn b { color: #79591f; }
.sim-od-note { margin: 0 0 12px; color: var(--sim-muted); font-size: 11px; line-height: 1.6; }
.sim-od-undecided { margin: 10px 0 0; padding: 7px 10px; border-left: 3px solid #8aa3c4; border-radius: 4px; background: #eef3f9; color: #34506f; font-size: 11px; line-height: 1.6; }
.sim-od-list { display: grid; margin: 0; padding: 0; list-style: none; }
.sim-od-item { border-top: 1px solid var(--sim-line); }
.sim-od-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 5px 12px; width: 100%; padding: 10px 4px; border: 0; border-radius: 4px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background .15s ease; }
.sim-od-row:hover { background: rgba(0, 0, 0, .035); }
.sim-od-row:hover .sim-od-name strong { text-decoration: underline; text-underline-offset: 2px; }
.sim-od-row:focus-visible { outline: 2px solid var(--sim-dem); outline-offset: 2px; }
.sim-od-row .sim-od-lead { grid-column: 1 / 3; }
.sim-od-go { grid-column: 3; grid-row: 1 / 3; align-self: center; color: var(--sim-muted); font-size: 11px; font-weight: 650; }
.sim-od-go::after { content: " ›"; }
.sim-od-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.sim-od-name strong { color: #21201d; font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.sim-od-name small { color: var(--sim-muted); font-size: 10.5px; white-space: nowrap; }
.sim-od-tag { justify-self: end; padding: 2px 8px; border-radius: 999px; background: #e5ebf3; color: #4a5d76; font-size: 10px; font-weight: 650; white-space: nowrap; }
.sim-od-tag.ok { background: #e3f1e8; color: #23613a; }
.sim-od-tag.warn { background: #f8efdc; color: #79591f; }
.sim-od-lead { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 14px; color: var(--sim-muted); font-size: 11px; }
.sim-od-lead b { margin-right: 1px; color: #21201d; font-weight: 750; font-variant-numeric: tabular-nums; }
.sim-od-lead .dem b { color: var(--sim-dem); }
.sim-od-lead .rep b { color: var(--sim-rep); }
.sim-od-ask { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 6px; color: var(--sim-muted); font-size: 10.5px; line-height: 1.45; }
.sim-od-ask small { flex: none; font-size: 10px; font-variant-numeric: tabular-nums; }
.sim-od-bars { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.sim-od-bar { display: grid; grid-template-columns: minmax(0, 11rem) minmax(40px, 1fr) 3.4rem; align-items: center; gap: 10px; font-size: 11px; }
.sim-od-label { overflow: hidden; color: #2f2e2b; text-overflow: ellipsis; white-space: nowrap; }
.sim-od-track { height: 6px; overflow: hidden; border-radius: 999px; background: var(--sim-line); }
.sim-od-track i { display: block; height: 100%; border-radius: inherit; background: #9a968f; }
.sim-od-bar.dem .sim-od-track i { background: var(--sim-dem); }
.sim-od-bar.rep .sim-od-track i { background: var(--sim-rep); }
.sim-od-bar b { color: #21201d; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.sim-od-empty { margin: 0; color: var(--sim-muted); font-size: 11px; font-style: italic; }
.sim-od-why { margin: 0; color: var(--sim-muted); font-size: 10.5px; font-style: italic; line-height: 1.5; }
@media (max-width: 560px) {
  .sim-od-bar { grid-template-columns: minmax(0, 1fr) 3.2rem; gap: 2px 8px; }
  .sim-od-label { grid-column: 1 / -1; }
}
/* Medios y redes: qué se está viendo (fuente de la barra superior y cargo) y clave del marcador. */
.media-scope { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 18px; padding: 11px 16px; border: 1px solid #d5deea; border-radius: 12px; background: #f3f6fa; }
.media-scope[hidden] { display: none; }
.media-scope-text { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; color: #46597a; font-size: 12.5px; line-height: 1.55; }
.media-scope-text strong { color: #0b2a4f; font-size: 13px; }
.media-scope-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.media-board-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.media-board-head .media-h3 { margin-top: 0; }
.media-board-head .media-board-key { display: flex; gap: 14px; margin: 0 0 10px; color: #5c687d; font-size: 11.5px; }
.media-board-key span { display: inline-flex; align-items: center; gap: 6px; }
.media-board-key span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
.media-board-key .dem::before { background: var(--sen-dem); }
.media-board-key .rep::before { background: var(--sen-rep); }
/* Medios y redes: candidaturas en tarjetas con el tono de 7 días como área. */
.media-movers { display: grid; grid-template-columns: 1fr; gap: 22px; }
.media-mover-title { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; color: #0b2a4f; font-size: 14px; }
.media-mover-title small { margin-left: auto; color: #6b778c; font-size: 12px; font-weight: 500; }
.media-mover-arrow { font-size: 11px; } .media-mover-arrow.up { color: var(--up); } .media-mover-arrow.down { color: var(--down); }
.media-mover-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.media-mover-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; min-width: 0; padding: 14px 16px 12px; border: 1px solid var(--sim-line); border-radius: 14px; background: #fff; transition: border-color .15s ease, transform .18s cubic-bezier(.23, 1, .32, 1); }
.media-mover-card:hover { border-color: #b9c6da; transform: translateY(-1px); }
.media-mover-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.media-mover-head .media-mover-who { display: grid; gap: 2px; min-width: 0; }
.media-mover-head .media-mover-who strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.media-mover-head .media-mover-who small { overflow: hidden; color: #6b778c; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.media-mover-points { flex: none; font-size: 17px; font-variant-numeric: tabular-nums; }
.media-mover-points.up { color: var(--up); } .media-mover-points.down { color: var(--down); }
.media-mover-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.media-event-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border: 1px solid #dbe3ee; border-radius: 6px; background: #f5f8fc; color: #46597a; font-size: 11.5px; }
.media-event-chip b { color: #0b2a4f; font-variant-numeric: tabular-nums; }
.media-mover-chart { height: 46px; }
.media-area { display: block; width: 100%; height: 100%; overflow: visible; }
.media-area-mid { stroke: #d5dce8; stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.media-area-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.media-area.up .media-area-line { stroke: var(--up); } .media-area.down .media-area-line { stroke: var(--down); }
.media-area.up .media-area-dot { fill: var(--up); } .media-area.down .media-area-dot { fill: var(--down); }
.media-area.up .media-area-stop-top { stop-color: var(--up); stop-opacity: .28; } .media-area.down .media-area-stop-top { stop-color: var(--down); stop-opacity: .28; }
.media-area .media-area-stop-bottom { stop-color: #fff; stop-opacity: 0; }
.media-mover-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; padding-top: 8px; border-top: 1px solid var(--sim-line); color: #6b778c; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.media-mover-change { font-weight: 700; } .media-mover-change.up { color: var(--up); } .media-mover-change.down { color: var(--down); }
@media (prefers-reduced-motion: reduce) { .media-mover-card { transition: none; } .media-mover-card:hover { transform: none; } }

/* Cuentas oficiales y tono por fuente, lado a lado en pantallas anchas. */
.media-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 22px; margin-top: 8px; }
@media (min-width: 1280px) { .media-duo { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } }
.media-duo-col { min-width: 0; }
.media-duo-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.media-duo-head .media-h3 { margin-bottom: 10px; }
.media-switch { position: relative; display: inline-flex; align-items: center; gap: 9px; margin-bottom: 10px; color: #46597a; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.media-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.media-switch-track { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: #cdd6e3; transition: background-color .18s ease; }
.media-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(10, 33, 71, .3); transition: transform .2s cubic-bezier(.23, 1, .32, 1); }
.media-switch input:checked + .media-switch-track { background: #2f6fc0; }
.media-switch input:checked + .media-switch-track::after { transform: translateX(14px); }
.media-switch input:focus-visible + .media-switch-track { outline: 3px solid #fbbf24; outline-offset: 2px; }
.social-icon { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border: 1px solid var(--sim-line); border-radius: 8px; color: #3c4f6a; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.social-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.social-icon:hover { border-color: #b9c6da; background: #f5f8fc; color: #0b2a4f; }
.social-icon:focus-visible { outline: 3px solid #fbbf24; outline-offset: 1px; }
.media-heat { background: color-mix(in srgb, var(--heat-color, transparent) calc(var(--heat, 0) * 40% + 8%), transparent); }
.media-heat.up { --heat-color: var(--up); } .media-heat.down { --heat-color: var(--down); } .media-heat.flat { --heat-color: #8a96a8; --heat: 0; }
.media-compare-table .media-heat .media-tone { background: transparent; }
.media-accounts-table .social-links { flex-wrap: nowrap; gap: 4px; }

/* Medios y redes · Mapa por estado: colores sólidos por nivel, etiquetas nítidas y estado elegido.
   La tarjeta del mapa es azul marino en los dos temas, así que la paleta es una sola. */
.live-map-card { --lm-none: #13284a; --lm-nomarket: #1f3a63; --lm-flat: #50617c; --lm-line: #0c2545;
  --lm-dem1: #3a6ea8; --lm-dem2: #4f8fdc; --lm-dem3: #8cc0ff; --lm-rep1: #9a4a4a; --lm-rep2: #dc5f55; --lm-rep3: #ff9a8f; }
.live-map-svg { overflow: visible; }
.live-map-svg .live-state { fill: var(--lm-none); stroke: var(--lm-line); stroke-width: 1.2; stroke-linejoin: round; cursor: pointer; transition: fill .3s ease, opacity .2s ease, stroke .15s ease; outline: none; }
.live-map-svg .live-state.no-market { fill: var(--lm-nomarket); }
.live-map-svg .live-state.flat { fill: var(--lm-flat); }
.live-map-svg .live-state.dem.l1 { fill: var(--lm-dem1); } .live-map-svg .live-state.dem.l2 { fill: var(--lm-dem2); } .live-map-svg .live-state.dem.l3 { fill: var(--lm-dem3); }
.live-map-svg .live-state.rep.l1 { fill: var(--lm-rep1); } .live-map-svg .live-state.rep.l2 { fill: var(--lm-rep2); } .live-map-svg .live-state.rep.l3 { fill: var(--lm-rep3); }
.live-map-svg .live-state:hover { stroke: #dbe7f7; stroke-width: 1.8; }
.live-map-svg .live-state:focus-visible { stroke: #fbbf24; stroke-width: 2.5; }
.live-map-svg .live-state.is-selected { stroke: #fbbf24; stroke-width: 2.8; }
.live-map.has-selection .live-state:not(.is-selected) { opacity: .62; }
.live-map.has-selection .live-state:not(.is-selected):hover { opacity: .85; }
.live-map-svg .live-district { stroke: #dbe7f7; stroke-width: 1.5; }
.live-map-leader { fill: none; stroke: #6f86a8; stroke-width: 1; stroke-dasharray: 2 2; pointer-events: none; }
.live-map-label { fill: #fff; font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: .02em; paint-order: stroke; stroke: rgba(7, 20, 40, .72); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.live-map-label.is-tiny { font-size: 11.5px; stroke-width: 2.5px; }
.live-map-label.is-quiet { fill: #7f95b6; stroke: none; font-weight: 600; }
.live-map-label.is-selected { fill: #fff; stroke: rgba(7, 20, 40, .9); }
.live-map.has-selection .live-map-label:not(.is-selected) { opacity: .55; }
.live-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 14px 0 0; color: #c4d2e5; font-size: 11.5px; }
.live-key { display: inline-flex; align-items: center; gap: 7px; }
.live-key i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--lm-none); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.live-ramp { display: inline-flex; gap: 2px; }
.live-key i.dem.l1 { background: var(--lm-dem1); } .live-key i.dem.l2 { background: var(--lm-dem2); } .live-key i.dem.l3 { background: var(--lm-dem3); }
.live-key i.rep.l1 { background: var(--lm-rep1); } .live-key i.rep.l2 { background: var(--lm-rep2); } .live-key i.rep.l3 { background: var(--lm-rep3); }
.live-key i.flat { background: var(--lm-flat); } .live-key i.no-market { background: var(--lm-nomarket); }
.live-key-note { flex-basis: 100%; color: #8fa6c4; font-size: 11px; }

/* Panel lateral: resumen nacional o detalle del estado elegido. */
.live-summary { align-content: start; gap: 10px; outline: none; }
.live-side-title { margin: 0; color: #0b2a4f; font-size: 14px; }
.live-side-hint { margin: 0; color: #6b778c; font-size: 12px; line-height: 1.5; }
.live-move-list { display: grid; }
button.live-move { width: 100%; padding: 9px 6px; border: 0; border-top: 1px solid var(--sim-line); border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color .15s ease; }
button.live-move:hover { background: #f5f8fc; }
button.live-move:focus-visible { outline: 3px solid #fbbf24; outline-offset: -3px; }
.live-state-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.live-state-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.live-state-title h4 { margin: 0; color: #0b2a4f; font-family: var(--serif); font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.live-state-code { display: inline-grid; place-items: center; min-width: 34px; height: 26px; padding: 0 6px; border-radius: 6px; background: #0c2545; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.live-state-close { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border: 1px solid var(--sim-line); border-radius: 8px; background: transparent; color: #46597a; cursor: pointer; }
.live-state-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.live-state-close:hover { background: #f5f8fc; }
.live-state-close:focus-visible { outline: 3px solid #fbbf24; outline-offset: 1px; }
.live-state-summary { margin: -2px 0 2px; color: #6b778c; font-size: 12.5px; }
.live-state-races { display: grid; gap: 10px; }
.live-state-race { padding: 12px 14px; border: 1px solid var(--sim-line); border-radius: 12px; background: #f8fafd; }
.live-state-race-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.live-state-race-head > strong { color: #0b2a4f; font-size: 13.5px; }
.live-state-match { margin: 4px 0 10px; color: #6b778c; font-size: 12.5px; font-weight: 600; }
.live-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 0; }
.live-metric { display: grid; gap: 2px; min-width: 0; }
.live-metric dt { color: #6b778c; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.live-metric dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: 0; font-size: 12.5px; }
.live-metric dd strong { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.live-metric-value { color: #46597a; font-variant-numeric: tabular-nums; }
.live-metric .media-delta { margin-top: 0; }
.live-side-sub { margin: 6px 0 0; color: #0b2a4f; font-size: 13px; }
.live-state-news { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.live-state-news li { display: grid; gap: 2px; }
.live-news-link { color: #245e98; font-size: 12.5px; font-weight: 600; line-height: 1.45; text-underline-offset: 3px; }
.live-state-news small { color: #6b778c; font-size: 11px; }
.live-state-more { justify-self: start; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .live-map-svg .live-state, button.live-move { transition: none; } }

/* Filtro por variación en 24 h (Medios y redes). */
.media-variation { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--sim-line); border-radius: 12px; background: #fff; }
.media-variation.is-on { border-color: #e2b65a; background: #fffaf0; }
.media-variation-label { color: #0b2a4f; font-size: 13px; font-weight: 800; }
.media-variation .view-seg button { min-height: 34px; font-size: 12.5px; }
.media-variation-count { flex: 1 1 220px; margin: 0; color: #5c687d; font-size: 12.5px; }
.media-variation.is-on .media-variation-count { color: #7a5410; font-weight: 600; }
.media-variation-clear { padding: 6px 10px; border: 1px solid var(--sim-line); border-radius: 8px; background: transparent; color: #245e98; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.media-variation-clear:hover { background: #f5f8fc; }
.media-variation-clear:focus-visible { outline: 3px solid #fbbf24; outline-offset: 1px; }
.media-variation-clear[hidden] { display: none; }
.live-map-svg .live-state.filtered { fill: var(--lm-none); opacity: .45; }
.live-key i.filtered { background: var(--lm-none); opacity: .45; }
.live-key-filtered { display: none; }
.live-map-card:has(.live-state.filtered) .live-key-filtered { display: inline-flex; }

/* Indicador de fuentes: grupos y lista con desplazamiento. */
.health-list { max-height: min(60vh, 520px); overflow-y: auto; overscroll-behavior: contain; }
.health-list .health-group { display: block; margin-top: 8px; padding: 8px 6px 2px; border-top: 1px solid var(--line-soft); border-radius: 0; color: #6b778c; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.health-list .health-group::before { content: none; }

/* Avisos emergentes: una fuente dejó de responder o volvió. */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: grid; gap: 10px; width: min(380px, calc(100vw - 24px)); pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: 4px; padding: 4px; border: 1px solid #e3e8f0; border-radius: 14px; background: #fff; box-shadow: 0 18px 40px -18px rgba(10, 33, 71, .45); pointer-events: auto; animation: toast-in .35s cubic-bezier(.23, 1, .32, 1); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.toast-body { display: grid; flex: 1; gap: 3px; padding: 9px 8px 9px 34px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; position: relative; }
.toast-body::before { content: ""; position: absolute; left: 13px; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: #c6473f; box-shadow: 0 0 0 4px rgba(198, 71, 63, .16); }
.toast.stale .toast-body::before { background: #c98a14; box-shadow: 0 0 0 4px rgba(201, 138, 20, .18); }
.toast.ok .toast-body::before { background: #1f8a5b; box-shadow: 0 0 0 4px rgba(31, 138, 91, .16); }
.toast-body strong { color: #0b2a4f; font-size: 13.5px; }
.toast-body span { color: #5c687d; font-size: 12.5px; line-height: 1.45; }
.toast-body:focus-visible, .toast-close:focus-visible { outline: 3px solid #fbbf24; outline-offset: -2px; border-radius: 10px; }
.toast-close { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: #6b778c; cursor: pointer; }
.toast-close:hover { background: #f1f4f8; }
.toast-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }
@media (max-width: 640px) { .toasts { right: 12px; bottom: 12px; } }

/* Predicción: de dónde sale la cifra de cada contienda (encuestas, agregadores, expertos). */
.sim-blend { margin-top: 4px; }
.sim-blend-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.sim-blend-cell { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 10px 12px; border: 1px solid var(--sim-line); border-radius: 10px; background: #f7f9fc; }
.sim-blend-cell span { color: #42546d; font-size: 10px; font-weight: 750; }
.sim-blend-cell strong { color: #22344d; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.sim-blend-cell small { color: var(--sim-muted); font-size: 9.5px; line-height: 1.5; overflow-wrap: anywhere; }
.sim-blend-cell.is-result { border-color: #22344d; background: #22344d; }
.sim-blend-cell.is-result span, .sim-blend-cell.is-result small { color: #c9d6e8; }
.sim-blend-cell.is-result strong { color: #fff; }
.sim-blend-note { margin: 8px 0 0; color: var(--sim-muted); font-size: 10px; line-height: 1.6; }

/* Centro de notificaciones: campana de la barra superior y panel lateral. */
.notif-toggle { position: relative; display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line-soft); border-radius: 11px; background: #fff; color: #3c4f6a; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, transform .16s cubic-bezier(.23, 1, .32, 1); }
.notif-toggle:hover { border-color: #b9c6da; background: #f5f8fc; }
.notif-toggle:active { transform: scale(.94); }
.notif-toggle:focus-visible { outline: 3px solid #fbbf24; outline-offset: 1px; }
.notif-toggle[hidden] { display: none; }
.notif-bell { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.notif-toggle.has-unread .notif-bell { animation: notif-ring .9s cubic-bezier(.23, 1, .32, 1) 1; transform-origin: 50% 15%; }
@keyframes notif-ring { 20% { transform: rotate(14deg); } 45% { transform: rotate(-10deg); } 70% { transform: rotate(5deg); } }
.notif-count { position: absolute; top: -6px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px; border: 2px solid #f4f7fb; border-radius: 10px; background: #c6473f; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 15px; text-align: center; font-variant-numeric: tabular-nums; }
.notif-count[hidden] { display: none; }
.notif-scrim { position: fixed; inset: 0; z-index: 65; background: rgba(8, 18, 34, .28); animation: notif-fade .2s ease-out; }
.notif-scrim[hidden] { display: none; }
@keyframes notif-fade { from { opacity: 0; } }
.notif-panel { position: fixed; top: 12px; right: 12px; bottom: 12px; z-index: 70; display: flex; flex-direction: column; width: min(470px, calc(100vw - 24px)); border: 1px solid var(--line-soft); border-radius: 16px; background: #fff; box-shadow: 0 28px 64px -24px rgba(10, 33, 71, .5); animation: notif-in .32s cubic-bezier(.16, 1, .3, 1); }
.notif-panel[hidden] { display: none; }
@keyframes notif-in { from { opacity: 0; transform: translateX(18px); } }
.notif-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 20px 20px 12px; }
.notif-head h2 { margin: 0; color: #0b2a4f; font-size: 20px; font-weight: 750; letter-spacing: -.02em; }
.notif-head p { margin: 5px 0 0; color: #5c687d; font-size: 12.5px; line-height: 1.5; }
.notif-close { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: #5c687d; cursor: pointer; }
.notif-close:hover { background: #f1f4f8; }
.notif-close:focus-visible, .notif-chip:focus-visible, .notif-seg:focus-visible, .notif-go:focus-visible, .notif-select select:focus-visible, .notif-links a:focus-visible { outline: 3px solid #fbbf24; outline-offset: 1px; }
.notif-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.notif-filters { display: grid; gap: 10px; padding: 0 20px 12px; border-bottom: 1px solid var(--line-soft); }
.notif-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.notif-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 11px; border: 1px solid var(--line-soft); border-radius: 999px; background: #fff; color: #34465f; font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.notif-chip b { color: #6b778c; font-size: 11px; font-weight: 750; font-variant-numeric: tabular-nums; }
.notif-chip:hover { border-color: #b9c6da; }
.notif-chip[aria-pressed="true"] { border-color: #0b2a4f; background: #0b2a4f; color: #fff; }
.notif-chip[aria-pressed="true"] b { color: #c9d6e8; }
.notif-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.notif-select select { min-height: 32px; max-width: 220px; padding: 0 28px 0 10px; border: 1px solid var(--line-soft); border-radius: 9px; background-color: #fff; color: #22344d; font: inherit; font-size: 12.5px; }
.notif-select .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.notif-parties { display: inline-flex; padding: 3px; border-radius: 10px; background: #eef2f7; }
.notif-seg { min-height: 26px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: #4b5a70; font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
.notif-seg[aria-pressed="true"] { background: #fff; color: #0b2a4f; box-shadow: 0 1px 3px rgba(10, 33, 71, .16); }
.notif-seg.dem[aria-pressed="true"] { color: #1d4fb8; }
.notif-seg.rep[aria-pressed="true"] { color: #b23a33; }
.notif-status { margin: 0; padding: 10px 20px 0; color: #6b778c; font-size: 11.5px; }
.notif-status:empty { display: none; }
.notif-status.is-error { color: #9f332c; }
.notif-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 20px 20px; overscroll-behavior: contain; }
.notif-day { position: sticky; top: 0; z-index: 1; margin: 0; padding: 14px 0 6px; background: #fff; color: #6b778c; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.notif-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.notif-day + .notif-item { border-top: 0; }
.notif-item:focus { outline: none; }
.notif-item:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; border-radius: 8px; }
.notif-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(36, 94, 152, .1); color: #245e98; }
.notif-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.notif-item.up .notif-icon { background: rgba(31, 138, 91, .12); color: #1a7a50; }
.notif-item.down .notif-icon { background: rgba(198, 71, 63, .12); color: #b23a33; }
.notif-item.flip .notif-icon { background: rgba(201, 138, 20, .15); color: #8f6210; }
.notif-item.sev-alta.up .notif-icon { background: #1f8a5b; color: #fff; }
.notif-item.sev-alta.down .notif-icon { background: #c6473f; color: #fff; }
.notif-item.sev-alta.flip .notif-icon { background: #c98a14; color: #fff; }
.notif-main { min-width: 0; }
.notif-title { display: flex; align-items: baseline; gap: 7px; margin: 0; color: #0b2a4f; font-size: 14px; font-weight: 700; line-height: 1.38; }
.notif-item.is-new .notif-title::after { content: ""; flex: none; align-self: center; width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #2563eb; }
.notif-party { display: inline-grid; place-items: center; flex: none; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px; background: #8a97a8; color: #fff; font-size: 10.5px; font-weight: 800; transform: translateY(-1px); }
.notif-party.dem { background: #2563eb; }
.notif-party.rep { background: #c6473f; }
.notif-body { margin: 5px 0 0; color: #4b5a70; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.notif-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 7px 0 0; padding: 0; list-style: none; }
.notif-links a { color: #245e98; font-size: 12.5px; font-weight: 650; text-underline-offset: 3px; }
.notif-ext { font-weight: 400; }
.notif-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 9px; color: #6b778c; font-size: 11.5px; }
.notif-kind { color: #34465f; font-weight: 750; }
.notif-platform { padding: 1px 7px; border-radius: 6px; background: #eef2f7; color: #34465f; font-size: 10.5px; font-weight: 700; }
.notif-go { margin-left: auto; min-height: 28px; padding: 0 10px; border: 1px solid var(--line-soft); border-radius: 8px; background: transparent; color: #245e98; font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
.notif-go:hover { border-color: #b9c6da; background: #f5f8fc; }
.notif-empty { display: grid; gap: 6px; padding: 48px 12px; text-align: center; }
.notif-empty strong { color: #0b2a4f; font-size: 15px; }
.notif-empty p { max-width: 36ch; margin: 0 auto; color: #5c687d; font-size: 13px; line-height: 1.55; }
@media (max-width: 640px) {
  .notif-panel { inset: 0; width: auto; border: 0; border-radius: 0; }
  .notif-head, .notif-filters, .notif-list { padding-left: 16px; padding-right: 16px; }
  .notif-status { padding-left: 16px; }
}
@media (prefers-reduced-motion: reduce) { .notif-panel, .notif-scrim, .notif-toggle.has-unread .notif-bell { animation: none; } }

/* Medios y redes: avisos del estado elegido en el mapa. */
.live-state-alerts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.live-state-alerts li { display: grid; gap: 2px; }
.live-state-alerts button { padding: 0; border: 0; background: none; color: #0b2a4f; font: inherit; font-size: 12.5px; font-weight: 650; line-height: 1.45; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .15s ease; }
.live-state-alerts button:hover { text-decoration-color: currentColor; }
.live-state-alerts small { color: #6b778c; font-size: 11px; }
.live-state-alerts .down button { color: #b23a33; }
.live-state-alerts .up button { color: #1a7a50; }

/* Inicio: resumen junto al mapa (quién va adelante, columnas por cargo, cambios) y las más disputadas. */
.home-summary { gap: 18px; padding: 18px; }
.home-verdict { display: grid; gap: 10px; padding: 18px 18px 16px; border-radius: 12px; background: #0c2545; color: #fff; }
.home-verdict-title { margin: 0; color: #fff; font-family: var(--serif); font-size: 25px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; }
.home-verdict-title .dem { color: #8db8ec; }
.home-verdict-title .rep { color: #f29a90; }
.home-ledger-bar { display: flex; gap: 2px; height: 10px; overflow: hidden; border-radius: 5px; background: #1d3657; }
.home-ledger-bar i { flex: 1 1 0; min-width: 4px; }
.home-ledger-bar .dem { background: #4a86cf; } .home-ledger-bar .rep { background: #d5544b; } .home-ledger-bar .toss { background: #8d97a6; } .home-ledger-bar .oth { background: #9b7fc6; }
.home-ledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 4px 12px; margin: 0; color: #c3d0e1; font-size: 11.5px; line-height: 1.35; }
.home-ledger span { display: grid; gap: 1px; }
.home-ledger b { color: #fff; font-size: 20px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.home-ledger .dem b { color: #8db8ec; } .home-ledger .rep b { color: #f29a90; }
.home-verdict-meta { margin: 0; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .12); color: #9fb1c9; font-size: 11.5px; }
.home-sub { margin: 0 0 10px; color: #0b2a4f; font-size: 13px; font-weight: 800; }
.home-office-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.home-office { display: grid; gap: 8px; padding: 12px 10px 10px; border: 1px solid var(--sim-line); border-radius: 12px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, box-shadow .18s ease; }
.home-office:hover { border-color: #aebed2; box-shadow: 0 6px 16px -10px rgba(12, 37, 69, .35); }
.home-office:focus-visible { outline: 3px solid #fbbf24; outline-offset: 1px; }
.home-office-name { color: #0b2a4f; font-size: 12.5px; font-weight: 800; }
.home-office-plot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; height: 112px; padding-bottom: 2px; border-bottom: 1px solid var(--sim-line); }
.home-col { display: grid; grid-template-rows: auto 1fr; justify-items: center; gap: 4px; min-width: 0; }
.home-col b { color: #0b2a4f; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.home-col.dem b { color: var(--sen-dem); } .home-col.rep b { color: var(--sen-rep); } .home-col.toss b { color: #5f6773; }
.home-col-track { position: relative; width: 100%; max-width: 26px; }
.home-col-track i { position: absolute; inset: auto 0 0; height: var(--h); border-radius: 5px 5px 2px 2px; background: var(--sen-toss); transform-origin: bottom; animation: home-col-in .6s cubic-bezier(.16, 1, .3, 1) both; }
.home-col.dem i { background: var(--sen-dem); } .home-col.rep i { background: var(--sen-rep); }
.home-col small { grid-row: 3; color: var(--sim-muted); font-size: 10.5px; font-weight: 700; }
@keyframes home-col-in { from { transform: scaleY(0); } }
.home-changes-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.home-changes-table th, .home-changes-table td { padding: 8px 6px; border-bottom: 1px solid var(--sim-line); text-align: right; white-space: nowrap; }
.home-changes-table thead th { padding-top: 0; color: var(--sim-muted); font-size: 11px; font-weight: 700; }
.home-changes-table th:first-child { padding-left: 0; text-align: left; }
.home-changes-table tbody th { color: #0b2a4f; font-weight: 700; }
.home-changes-table tbody tr:last-child > * { border-bottom: 0; }
.home-changes-table td b { color: #0b2a4f; font-weight: 800; }
.home-changes-table td.dem b { color: var(--sen-dem); } .home-changes-table td.rep b { color: var(--sen-rep); }
.home-delta { display: inline-block; min-width: 26px; margin-left: 6px; padding: 1px 5px; border-radius: 6px; font-size: 11px; font-weight: 800; text-align: center; }
.home-delta.up { background: #e3f3ea; color: #1a7a50; }
.home-delta.down { background: #fbe9e7; color: #a53a33; }
.home-battles { margin: 0 0 22px; }
.home-battles[hidden] { display: none; }
.home-battles-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 12px; }
.home-battles-head h2 { margin: 0; color: #0b2a4f; font-family: var(--serif); font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.home-battles-head p { margin: 0; color: var(--sim-muted); font-size: 12.5px; }
.battle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.battle { --c: var(--sen-toss); }
.battle.dem { --c: var(--sen-dem); } .battle.rep { --c: var(--sen-rep); }
.battle-button { display: grid; gap: 14px; width: 100%; height: 100%; padding: 16px 18px; border: 1px solid var(--sim-line); border-radius: 14px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: box-shadow .18s ease, border-color .15s ease; }
.battle-button:hover { border-color: #aebed2; box-shadow: 0 10px 26px -14px rgba(12, 37, 69, .35); }
.battle-button:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; }
.battle-top { display: grid; gap: 2px; }
.battle-race { margin: 0; color: var(--sim-muted); font-size: 12px; }
.battle-race b { color: #34465f; }
.battle-match { margin: 0; color: #0b2a4f; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.battle-lead { display: flex; align-items: center; gap: 12px; }
.battle-lead .sen-avatar { width: 44px; height: 44px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); }
.battle-odds { display: grid; gap: 1px; }
.battle-odds strong { color: var(--c); font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.battle.toss .battle-odds strong { color: #4f5763; }
.battle-odds small { color: var(--sim-muted); font-size: 12px; }
.battle-bars { display: grid; gap: 7px; }
.battle-bar { display: grid; grid-template-columns: minmax(64px, 88px) minmax(0, 1fr) 46px; align-items: center; gap: 10px; font-size: 12.5px; }
.battle-name { overflow: hidden; color: #34465f; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.battle-track { height: 9px; overflow: hidden; border-radius: 5px; background: #edf1f6; }
.battle-track i { display: block; width: var(--w); height: 100%; border-radius: 5px; background: var(--sen-toss); transform-origin: left; animation: battle-in .7s cubic-bezier(.16, 1, .3, 1) both; }
.battle-bar.dem i { background: var(--sen-dem); } .battle-bar.rep i { background: var(--sen-rep); } .battle-bar.oth i { background: var(--sen-oth); }
.battle-bar b { color: #0b2a4f; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
@keyframes battle-in { from { transform: scaleX(0); } }
.battle-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding-top: 12px; border-top: 1px solid var(--sim-line); }
.battle-stats div { display: grid; gap: 2px; min-width: 0; }
.battle-stats dt { overflow: hidden; color: var(--sim-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.battle-stats dd { margin: 0; color: #0b2a4f; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.battle-stats .up dd { color: #1a7a50; } .battle-stats .down dd { color: #a53a33; } .battle-stats .flip dd { color: #8f6210; }
@media (prefers-reduced-motion: reduce) { .home-col-track i, .battle-track i { animation: none; } .home-office, .battle-button { transition: none; } }

/* ===== Panel público · tipografía editorial y sección del mapa sin adornos de plantilla =====
   Títulos en Playfair Display (serif de alto contraste, como odiseo.app) y texto, menús y cifras en
   Montserrat (la sans de odiseo.app). Ambas con licencia libre, incluidas en assets/fonts:
   el sitio no depende de servicios externos. Rutas relativas a este archivo: funcionan igual en el
   servidor y en el paquete estático, aunque se publique en una subcarpeta. */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("fonts/playfair-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("fonts/playfair-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400 900; font-display: swap; src: url("fonts/playfair-latin-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/montserrat-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/montserrat-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

.page-backdrop {
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --ink-strong: #0b2142;
  --ink-soft: #55627a;
  --label: #6b7487;
  font-family: var(--sans);
  font-size: 15px;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.page-backdrop button, .page-backdrop input, .page-backdrop select, .page-backdrop textarea { font-family: var(--sans); }

/* Títulos: Playfair con su peso natural; nada de interletrado apretado de más. */
.page-backdrop h1, .page-backdrop h2, .page-backdrop h3 { font-family: var(--serif); font-weight: 700; letter-spacing: -.012em; font-variant-numeric: lining-nums; }
.page-backdrop .hero h1 { font-weight: 700; letter-spacing: -.02em; line-height: 1.04; }
.page-backdrop .hero h1 em { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -.01em; text-decoration: none; }
.page-backdrop .hero h1 em::after, .page-backdrop .hero h1 em::before { content: none; }
.page-backdrop .hero .hero-copy > p:not(.eyebrow) { font-size: 17.5px; font-weight: 400; line-height: 1.6; }

/* Cifras: lining y tabulares, en serif sólo las grandes. */
.page-backdrop strong, .page-backdrop b { font-variant-numeric: lining-nums tabular-nums; }

/* Etiquetas superiores: gris tranquilo y pequeñas versalitas, como «PROCESO SIMPLE» de la referencia. */
.page-backdrop .kicker, .page-backdrop .eyebrow, .page-backdrop .map-ranking-kicker {
  color: var(--label); font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
}
.page-backdrop .hero .eyebrow { color: rgba(255, 255, 255, .72); letter-spacing: .22em; }
.page-backdrop .kicker .live-dot, .page-backdrop .eyebrow .dot { width: 6px; height: 6px; box-shadow: none; }

/* ---------- Sección del mapa ---------- */
/* Sin franjas azul y roja arriba de las tarjetas. */
.page-backdrop .map-band .map-card::before, .page-backdrop .map-ranking::before, .page-backdrop .map-stat::after { content: none; }
.page-backdrop .map-band .map-card, .page-backdrop .map-ranking { border: 1px solid #dfe4ec; border-radius: 16px; box-shadow: 0 1px 2px rgba(11, 33, 66, .04), 0 18px 40px -28px rgba(11, 33, 66, .25); }
.page-backdrop .map-band h2 { color: var(--ink-strong); }
.page-backdrop .map-intro { color: var(--ink-soft); font-size: 16px; }
.page-backdrop .map-intro span { color: var(--label); }

/* Pasos: una línea de texto numerada, sin píldoras ni íconos en círculo. */
.page-backdrop .map-steps { gap: 6px 26px; margin-top: 16px; counter-reset: step; }
.page-backdrop .map-steps li { gap: 8px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink-strong); font-size: 14.5px; font-weight: 500; counter-increment: step; }
.page-backdrop .map-steps li::before, .page-backdrop .map-steps li + li::before { content: counter(step); position: static; display: inline-grid; place-items: center; width: auto; height: auto; background: none; color: #b31942; font-family: var(--serif); font-size: 19px; font-style: italic; font-weight: 600; }
.page-backdrop .map-steps svg { display: none; }

/* Cifras de la cabecera: una franja tipográfica, no tarjetas con ícono. */
.page-backdrop .map-stats { gap: 0; padding: 4px 0; border-top: 1px solid #d9dfe8; border-bottom: 1px solid #d9dfe8; }
.page-backdrop .map-stat { grid-template-columns: 1fr; gap: 2px; padding: 10px 22px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.page-backdrop .map-stat + .map-stat { border-left: 1px solid #e3e7ee; }
.page-backdrop .map-stat:hover { transform: none; box-shadow: none; }
.page-backdrop .map-stat svg { display: none; }
.page-backdrop .map-stat strong { color: var(--ink-strong); font-family: var(--serif); font-size: 30px; font-weight: 700; }
.page-backdrop .map-stat.hot strong { color: #b31942; }
.page-backdrop .map-stat span { color: var(--label); font-size: 12.5px; font-weight: 500; }

/* Pestañas y buscador del mapa: más sobrios. */
.page-backdrop .map-card .tab { border-color: #dfe4ec; background: #fff; color: #33415c; font-weight: 600; }
.page-backdrop .map-card .tab:hover { border-color: #b9c4d6; background: #f5f7fa; color: var(--ink-strong); }
.page-backdrop .map-card .tab.active { border-color: var(--ink-strong); background: var(--ink-strong); color: #fff; }

/* Mapa: azules y rojos de prensa (no pastel) y los estados divididos en un malva liso, sin rayas. */
.page-backdrop .map-state.democrat.tier-close, .page-backdrop .legend-swatch.democrat.tier-close { fill: #b9cfe8; background: #b9cfe8; }
.page-backdrop .map-state.democrat.tier-lean, .page-backdrop .legend-swatch.democrat.tier-lean { fill: #7ea3cf; background: #7ea3cf; }
.page-backdrop .map-state.democrat.tier-safe, .page-backdrop .legend-swatch.democrat.tier-safe { fill: #3f6ea8; background: #3f6ea8; }
.page-backdrop .map-state.democrat, .page-backdrop .map-card .legend-swatch.democrat { fill: #7ea3cf; background: #7ea3cf; }
.page-backdrop .map-state.republican.tier-close, .page-backdrop .legend-swatch.republican.tier-close { fill: #ecc1b9; background: #ecc1b9; }
.page-backdrop .map-state.republican.tier-lean, .page-backdrop .legend-swatch.republican.tier-lean { fill: #d48c80; background: #d48c80; }
.page-backdrop .map-state.republican.tier-safe, .page-backdrop .legend-swatch.republican.tier-safe { fill: #b5483f; background: #b5483f; }
.page-backdrop .map-state.republican, .page-backdrop .map-card .legend-swatch.republican { fill: #d48c80; background: #d48c80; }
.page-backdrop .map-state.split, .page-backdrop .map-card .legend-swatch.split { fill: #c4b3c6; background: #c4b3c6; }
.page-backdrop .map-card .legend-item { font-size: 12px; }

/* Ranking de contiendas cerradas. */
.page-backdrop .map-ranking-header { background: #fff; color: var(--ink-strong); }
.page-backdrop .map-ranking-header h3 { color: var(--ink-strong); font-size: 27px; letter-spacing: -.012em; }
.page-backdrop .map-ranking-header p { color: var(--ink-soft); font-size: 13px; }
.page-backdrop .rank-national-place { display: inline-block; width: auto; min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; box-shadow: none; color: #9aa3b2; font-family: var(--serif); font-size: 26px; font-style: italic; font-weight: 500; line-height: 1; }
.page-backdrop .rank-national-race strong { font-family: var(--serif); font-size: 21px; font-weight: 700; color: var(--ink-strong); }
.page-backdrop .rank-national-race small { color: var(--label); font-size: 11px; font-weight: 600; letter-spacing: .14em; }
.page-backdrop .rank-tier { padding: 0; border: 0; border-radius: 0; background: none; color: var(--label); font-size: 11px; font-weight: 600; letter-spacing: .12em; }
.page-backdrop .rank-tier.close, .page-backdrop .rank-tier.tie { background: none; color: #b31942; }
.page-backdrop .versus-mid strong { font-family: var(--serif); font-size: 24px; font-weight: 700; color: var(--ink-strong); }
.page-backdrop .versus-mid small { color: var(--label); font-weight: 600; letter-spacing: .14em; }
.page-backdrop .versus-name { font-family: var(--sans); font-weight: 700; }
.page-backdrop .photo-ring-badge { font-family: var(--sans); font-weight: 700; letter-spacing: 0; }
.page-backdrop .map-band .map-ranking-header::before { content: none; }
.page-backdrop .map-band .map-ranking-kicker { color: var(--label); }
.page-backdrop .map-band .map-ranking-header h3 { font-size: 30px; }
.page-backdrop .map-band .map-steps li { border-color: transparent; background: none; box-shadow: none; }
.page-backdrop li:first-child > .rank-national-item .rank-national-place { background: none; color: #b31942; }
.page-backdrop .map-steps li::before { font-variant-numeric: lining-nums; transform: translateY(-1px); }

/* ===== Segunda pasada (ejemplo de odiseo.app) =====
   Título en Playfair Display negrita con la segunda parte en gris (sin cursiva), etiqueta del héroe en
   píldora con contorno, textos en Montserrat, sin la franja de cifras del mapa y números «01» en
   círculo gris oscuro con la cifra en serif. */
.page-backdrop .hero h1 { font-weight: 700; letter-spacing: -.01em; line-height: 1.06; }
.page-backdrop .hero h1 em { display: inline; font-style: normal; font-weight: 700; color: #c2c8d0; -webkit-text-fill-color: #c2c8d0; background: none; animation: none; }
.page-backdrop .hero .eyebrow { display: inline-flex; align-items: center; gap: 10px; width: fit-content; padding: 8px 18px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px; background: rgba(255, 255, 255, .04); color: rgba(255, 255, 255, .86); font-size: 12px; font-weight: 600; letter-spacing: .12em; }
.page-backdrop .hero .hero-copy > p:not(.eyebrow) { font-size: 17px; font-weight: 400; line-height: 1.7; color: #d7dde6; }
.page-backdrop .kicker, .page-backdrop .eyebrow, .page-backdrop .map-ranking-kicker { font-weight: 600; letter-spacing: .18em; }
.page-backdrop nav a, .page-backdrop .lang-switch { font-family: var(--sans); font-weight: 500; letter-spacing: 0; }

/* Sin la franja de cifras: la información ya está en el mapa y en el ranking. */
.page-backdrop .map-stats { display: none; }

/* Números «01», «02»…: círculo gris oscuro y cifra en serif, como el ejemplo. */
.page-backdrop .map-steps { gap: 10px 28px; }
.page-backdrop .map-steps li { gap: 10px; }
.page-backdrop .map-steps li::before, .page-backdrop .map-steps li + li::before {
  content: counter(step, decimal-leading-zero); display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: #4f5963; color: #fff; font-family: var(--serif); font-size: 13px; font-style: normal; font-weight: 600; font-variant-numeric: oldstyle-nums; transform: none;
}
.page-backdrop .rank-national { counter-reset: rank; }
.page-backdrop .rank-national > li { counter-increment: rank; }
.page-backdrop .rank-national-place, .page-backdrop li:first-child > .rank-national-item .rank-national-place {
  display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #4f5963; color: transparent; font-size: 0;
}
.page-backdrop .rank-national-place::before { content: counter(rank, decimal-leading-zero); color: #fff; font-family: var(--serif); font-size: 14px; font-style: normal; font-weight: 600; font-variant-numeric: oldstyle-nums; }
/* Números de las tarjetas del pronóstico: el mismo «01» en círculo gris oscuro. */
.page-backdrop .projection-rank, .page-backdrop .projection-slide.first .projection-rank, .page-backdrop .projection-slide:nth-child(n+4) .projection-rank, .page-backdrop .projection-slide.compact .projection-rank {
  display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border: 2px solid #0c2448; border-radius: 999px; background: #4f5963; color: #fff;
  box-shadow: none; font-family: var(--serif); font-size: 12px; font-weight: 600; font-variant-numeric: oldstyle-nums; letter-spacing: 0;
}
.page-backdrop .projection-slide.compact .projection-rank { min-width: 26px; height: 26px; font-size: 11px; }

/* ---------- Tablero interno: comparación de encuestas (compare.js) ----------
   Tres fuentes con color propio (no de partido): Odiseo en dorado, G-Ratings en verde azulado y las
   externas en violeta. Los partidos conservan el azul y el rojo del resto del panel. */
.cmp-section { --src-odiseo: #b7791f; --src-gratings: #0f766e; --src-internal: #6d4fa8; --dem: #1d5c91; --rep: #a73831; --ind: #5b6474;
  padding: 68px 0 64px; border-top: 1px solid #e3e7ee; background: linear-gradient(180deg, #eef2f8 0%, #f8fafc 60%, #fff 100%); scroll-margin-top: 80px; }
.cmp-section[hidden] { display: none; }
.cmp-head { max-width: 760px; margin-bottom: 26px; }
.cmp-head h2 { margin: 6px 0 8px; color: #0a3161; font-family: var(--serif); font-size: clamp(30px, 3vw, 44px); line-height: 1.08; }
.cmp-intro { margin: 0; color: #46536b; font-size: 16px; line-height: 1.55; }
.cmp-body { display: grid; gap: 18px; }
.s-odiseo { --src: var(--src-odiseo); }
.s-gratings { --src: var(--src-gratings); }
.s-internal { --src: var(--src-internal); }
.cmp-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--src, #5c687d); box-shadow: 0 0 0 3px color-mix(in srgb, var(--src, #5c687d) 18%, transparent); }
.cmp-d { color: var(--dem); }
.cmp-r { color: var(--rep); }
.cmp-o { color: var(--ind); }

/* Fuentes y resumen */
.cmp-sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cmp-source { position: relative; padding: 18px 20px 16px; overflow: hidden; border: 1px solid #dfe3ea; border-radius: 16px; background: #fff; box-shadow: 0 12px 30px rgba(10, 49, 97, .06); }
.cmp-source::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--src); }
.cmp-source-head { display: flex; align-items: center; gap: 10px; }
.cmp-source-head h3 { margin: 0; color: #0b2a55; font-family: var(--serif); font-size: 21px; font-weight: 600; }
.cmp-source-nums { margin: 10px 0 2px; color: #46536b; font-size: 14px; }
.cmp-source-nums b { color: #0a3161; font-family: var(--serif); font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cmp-source-meta, .cmp-source-note { margin: 0; color: #5c687d; font-size: 12.5px; }
.cmp-source-note.is-error { margin-top: 6px; color: #a8174d; font-weight: 600; }
.cmp-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid #dfe3ea; border-radius: 16px; background: #fff; }
.cmp-tile { display: grid; align-content: start; gap: 4px; padding: 16px 20px; }
.cmp-tile + .cmp-tile { border-left: 1px solid #e8ecf2; }
.cmp-tile strong { color: #0a3161; font-family: var(--serif); font-size: 34px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.cmp-tile span { color: #46536b; font-size: 13px; font-weight: 600; line-height: 1.35; }
.cmp-tile small { color: #6b778c; font-size: 12px; line-height: 1.35; }
.cmp-tile.is-agree strong { color: #17714a; }
.cmp-tile.is-split strong { color: #a8174d; }

/* Controles */
.cmp-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; }
.cmp-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.cmp-tab { padding: 8px 14px; border: 1px solid #c9d3e3; border-radius: 999px; background: #fff; color: #0b2a55; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.cmp-tab:hover { border-color: #0a3161; }
.cmp-tab.active { border-color: #0a3161; background: #0a3161; color: #fff; }
.cmp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.cmp-check { display: inline-flex; align-items: center; gap: 8px; color: #0b2a55; font-size: 13px; font-weight: 600; cursor: pointer; }
.cmp-check input { width: 16px; height: 16px; margin: 0; accent-color: #0a3161; }
.cmp-search, .cmp-sort { min-height: 38px; padding: 8px 12px; border: 1px solid #c9d3e3; border-radius: 10px; background: #fff; color: #0b2a55; font: inherit; font-size: 13px; }
.cmp-search { width: 230px; }
.cmp-sort { width: auto; padding-right: 30px; }
.cmp-all { justify-self: center; padding: 11px 22px; border: 1px solid #0a3161; border-radius: 999px; background: #fff; color: #0a3161; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.cmp-all:hover { background: #0a3161; color: #fff; }
.cmp-all:focus-visible { outline: 2px solid #0a3161; outline-offset: 3px; }
.cmp-tab:focus-visible, .cmp-search:focus-visible, .cmp-sort:focus-visible, .cmp-more:focus-visible, .cmp-check input:focus-visible { outline: 2px solid #0a3161; outline-offset: 2px; }
.cmp-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0; color: #46536b; font-size: 12.5px; }
.cmp-legend-item { display: inline-flex; align-items: center; gap: 7px; color: #0b2a55; font-weight: 700; }
.cmp-legend-note { color: #6b778c; }
.cmp-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 6px; }
.cmp-list-head h3 { margin: 0; color: #0a3161; font-family: var(--serif); font-size: 22px; font-weight: 600; }
.cmp-count { color: #6b778c; font-size: 13px; font-weight: 600; }

/* Una contienda */
.cmp-list { display: grid; gap: 14px; }
.cmp-row { padding: 18px 20px 14px; border: 1px solid #dfe3ea; border-left: 4px solid #c9d3e3; border-radius: 16px; background: #fff; box-shadow: 0 10px 26px rgba(10, 49, 97, .05); }
.cmp-row.is-split { border-left-color: #d0336c; }
.cmp-row.is-agree { border-left-color: #1f9460; }
.cmp-row-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-bottom: 14px; }
.cmp-row-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cmp-row-title h3 { margin: 0; color: #0b2a55; font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1.2; }
.cmp-badge { display: inline-grid; place-items: center; flex: none; min-width: 38px; height: 28px; padding: 0 6px; border-radius: 8px; background: #0a3161; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.cmp-row-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cmp-verdict, .cmp-gap { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.cmp-verdict.is-agree { background: #e3f4eb; color: #17714a; }
.cmp-verdict.is-split { background: #fbe5ed; color: #a8174d; }
.cmp-verdict.is-single { background: #eef1f6; color: #5c687d; }
.cmp-gap { background: #f1f4f9; color: #0b2a55; font-variant-numeric: tabular-nums; }
.cmp-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cmp-cell { display: grid; align-content: start; gap: 3px; min-width: 0; padding: 12px 14px; border: 1px solid #e8ecf2; border-top: 3px solid var(--src); border-radius: 12px; background: #fafbfd; }
.cmp-cell.is-empty { border-top-color: #dfe3ea; background: repeating-linear-gradient(135deg, #fafbfd 0 8px, #f3f5f9 8px 16px); }
.cmp-cell-src { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; color: #46536b; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cmp-cell-none { margin: 4px 0 0; color: #6b778c; font-size: 13px; }
.cmp-cell-lead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; }
.cmp-cell-lead b { overflow: hidden; font-family: var(--serif); font-size: 20px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cmp-margin { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cmp-cell-pair { margin: 0; color: #0b2a55; font-size: 13px; font-variant-numeric: tabular-nums; }
.cmp-cell-meta, .cmp-cell-count { margin: 0; color: #6b778c; font-size: 12px; overflow-wrap: anywhere; }
.cmp-flag { justify-self: start; margin: 4px 0 0; padding: 2px 8px; border-radius: 6px; background: #fff4dc; color: #7a4b00; font-size: 11.5px; font-weight: 700; }

/* Regla de márgenes: el cero al centro y un punto por fuente. */
.cmp-strip { margin: 14px 2px 2px; }
.cmp-strip:empty { display: none; }
.cmp-strip-ends { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 12px; font-weight: 800; }
.cmp-track { position: relative; height: 22px; border-radius: 999px; background: linear-gradient(90deg, #eef1f6, #f7f9fc 50%, #eef1f6); }
.cmp-zero { position: absolute; top: -3px; bottom: -3px; left: 50%; width: 2px; margin-left: -1px; border-radius: 2px; background: #9aa6b8; }
.cmp-mark { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid #fff; border-radius: 50%; background: var(--src); box-shadow: 0 1px 4px rgba(10, 49, 97, .3); }
.cmp-scale { display: flex; justify-content: space-between; margin-top: 4px; color: #8a95a8; font-size: 11px; font-variant-numeric: tabular-nums; }
.cmp-more { margin-top: 10px; padding: 6px 0; border: 0; background: none; color: #0a3161; font: inherit; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cmp-history { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 8px; padding-top: 12px; border-top: 1px dashed #dfe3ea; }
.cmp-history h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: #0b2a55; font-size: 13px; font-weight: 800; }
.cmp-history ol { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cmp-history li { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; padding: 6px 8px; border-radius: 8px; background: #f6f8fb; font-size: 12.5px; }
.cmp-history li.is-small { opacity: .72; }
.cmp-h-date { color: #0b2a55; font-weight: 700; white-space: nowrap; }
.cmp-h-who { color: #0b2a55; font-variant-numeric: tabular-nums; }
.cmp-h-meta { grid-column: 2; color: #6b778c; font-size: 11.5px; }
.cmp-h-link { grid-column: 2; justify-self: start; color: #0a3161; font-size: 11.5px; font-weight: 700; }
.cmp-empty { margin: 0; padding: 26px; border: 1px dashed #c9d3e3; border-radius: 14px; color: #5c687d; text-align: center; }
.cmp-source-note-foot { max-width: 900px; margin: 20px 0 0; color: #6b778c; font-size: 12.5px; line-height: 1.55; }

@media (max-width: 1000px) {
  .cmp-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmp-tile:nth-child(3) { border-left: 0; }
  .cmp-tile:nth-child(n+3) { border-top: 1px solid #e8ecf2; }
}
@media (max-width: 760px) {
  .cmp-section { padding: 48px 0 44px; }
  .cmp-sources, .cmp-cells { grid-template-columns: 1fr; }
  .cmp-tools, .cmp-search, .cmp-sort { width: 100%; }
  .cmp-row { padding: 16px 14px 12px; }
}

/* ---------- Tablero interno: acabados ----------
   - Promedio de todas las encuestadoras (VoteHub): la cifra va en <span class="tl-num"> y su «%» en
     <span class="tl-unit">; sin esto heredaban el estilo de la etiqueta (12 px, en bloque).
   - La nota del mapa es un pie de figura, no una tarjeta suelta.
   - «Lectura responsable»: el título arriba y las tres ideas en tarjetas legibles sobre el fondo. */
.tl-section:not(.tl-public) .tl-value strong { display: flex; align-items: baseline; }
.tl-section:not(.tl-public) .tl-value strong .tl-num, .tl-section:not(.tl-public) .tl-value strong .tl-unit {
  display: inline; margin: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: none; }
.tl-section:not(.tl-public) .tl-value strong .tl-unit { margin-left: 2px; font-size: .5em; font-weight: 600; opacity: .75; }
body[data-view="internal"] .map-band .map-footnote { padding: 0; border: 0; background: none; box-shadow: none; color: #54627a; font-size: 12px; font-style: italic; }
body[data-view="internal"] .methodology { grid-template-columns: 1fr; gap: 18px; padding-top: 44px; padding-bottom: 48px; }
body[data-view="internal"] .methodology h2 { margin: 4px 0 0; }
body[data-view="internal"] .method-list { gap: 14px; }
body[data-view="internal"] .method-list p { margin: 0; padding: 18px 20px; border: 1px solid #dfe3ea; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px rgba(10, 49, 97, .05); font-size: 13.5px; line-height: 1.6; }
body[data-view="internal"] .method-list b { display: block; margin-bottom: 4px; }
@media (max-width: 780px) { body[data-view="internal"] .method-list { gap: 10px; } }