/* The result tab: verdict, picks, charts, catalog, method. */

/* ---- resumen ---- */
.no-votes { margin: 48px 0; font-size: 22px; color: var(--ink-3); }
.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center;
  border: 1px solid var(--ok); border-radius: var(--r); overflow: hidden; }
.hero img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--soft); }
.hero .eyebrow { color: var(--ok); font-weight: 600; }
.stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 28px; margin: 28px 0 0; }
.stats dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.stats dd { margin: 4px 0 0; font-size: 32px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stats .alber dd { color: var(--alber); }
.stats .nuria dd { color: var(--nuria); }
.eyebrow { margin: 8px 0 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.verdict { max-width: 900px; margin: 0; font-size: 30px; line-height: 1.25; font-weight: 500; letter-spacing: -.015em; }
.verdict mark { background: none; color: var(--ink); font-weight: 700; box-shadow: inset 0 -.28em 0 rgba(31, 138, 91, .18); }

.picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 24px 0; }
.pick { margin: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.pick img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--soft); mix-blend-mode: multiply; }
.pick figcaption { padding: 14px 18px 16px; display: grid; gap: 2px; }
.pick .slot { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pick strong { font-size: 18px; }
.pick small { color: var(--ink-3); font-size: 13px; }


/* ---- charts ---- */
.chart { width: 100%; max-width: 860px; height: auto; display: block; }
.chart .grid { stroke: var(--line); }
.chart .axis { fill: var(--ink-3); font-size: 11px; }
.chart .axis-title { fill: var(--ink-2); font-size: 12px; font-weight: 600; }
.chart .lbl { fill: var(--ink-2); font-size: 13px; }
.chart .val { fill: var(--ink); font-size: 13px; font-weight: 600; }
.chart .pick { fill: var(--ok); font-weight: 700; }
.chart .out { fill: var(--no); text-decoration: line-through; }
.chart .bar { fill: #cfcfcc; }
.chart .bar.pick { fill: var(--ok); opacity: .35; }
.chart .bar.out { fill: var(--no); opacity: .25; }
.chart .vote-dot { stroke: #fff; stroke-width: 2; }
.chart .vote-dot.alber { fill: var(--alber); }
.chart .vote-dot.nuria { fill: var(--nuria); }
.chart .diagonal { stroke: var(--ink-3); stroke-dasharray: 4 4; }
.chart .pending { fill: none; stroke: #d4d4d1; stroke-dasharray: 4 4; }
.chart .ring { fill: #fff; stroke: #d4d4d1; stroke-width: 1.5; }
.chart .pt.pick .ring { stroke: var(--ok); stroke-width: 3; }
.chart .pt.out { opacity: .45; }
.chart .pt.out .ring { stroke: var(--no); }


.legend { display: flex; gap: 20px; list-style: none; padding: 0; margin: 0 0 16px; font-size: 13px; color: var(--ink-2); }
.legend .bar-key { background: #cfcfcc; }
.legend .bar-key.pick { background: var(--ok); opacity: .35; }
.legend .bar-key.out { background: var(--no); opacity: .25; }
.legend .dot-key { border-radius: 50%; }
.legend .dot-key.alber { background: var(--alber); }
.legend .dot-key.nuria { background: var(--nuria); }
.legend .diag-key { width: 18px !important; height: 0 !important; border-top: 1.5px dashed var(--ink-3); border-radius: 0 !important; }
.legend .strip-key { width: 18px !important; height: 0 !important; border-top: 1px solid var(--line); border-radius: 0 !important; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }

/* ---- catálogo ---- */
.counts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 32px 48px; }
.count-group h4 { margin: 0 0 10px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.count-row { display: grid; grid-template-columns: 120px 1fr 20px; align-items: center; gap: 10px; font-size: 13px; margin: 6px 0; }
.track { height: 8px; background: var(--soft); border-radius: 4px; overflow: hidden; }
.track span { display: block; height: 100%; background: var(--ink); }
.count-row b { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- método ---- */
.matrix { border-collapse: collapse; font-size: 13px; width: 100%; max-width: 860px; }
.matrix th, .matrix td { padding: 9px 12px; text-align: center; border-bottom: 1px solid var(--line); }
.matrix thead th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.matrix tbody th { text-align: left; font-weight: 500; }
.matrix .heat { background: rgba(17, 17, 17, calc(var(--v) * .55)); color: #fff; font-variant-numeric: tabular-nums; }
.matrix .heat.light { color: var(--ink); }
.matrix .src { color: var(--ink-3); }
.matrix .total { font-weight: 700; font-variant-numeric: tabular-nums; }
.matrix tr.pick th, .matrix tr.pick .total { color: var(--ok); font-weight: 700; }
.matrix tr.out th { color: var(--no); text-decoration: line-through; }
.rules { max-width: 760px; color: var(--ink-2); font-size: 14px; padding-left: 20px; margin-top: 24px; }
.rules li { margin: 6px 0; }
.rules b { color: var(--ink); }