/* ==========================================================================
   Atinados22 · Campeonato Navideño Municipal de Esquipulas 2026
   Archivo: static/navideno/css/navideno2026.css
   Prefijo de clases: .nv-  (no choca con el CSS global del sitio)
   NOTA: los tokens de :root son provisionales. Reemplázalos por las
   variables reales del CSS de atinados22.com para que todo herede el tema.
   Fuentes: <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Barlow:wght@400;500;600;700&display=swap" rel="stylesheet">
   ========================================================================== */

:root {
  --nv-bg: #0D1117;
  --nv-bg-deep: #0A0D12;
  --nv-surface: #161B23;
  --nv-surface-2: #1E2530;
  --nv-line: #222A36;
  --nv-line-strong: #3A4454;
  --nv-text: #EEF1F5;
  --nv-text-2: #C7CED8;
  --nv-muted: #9AA4B2;
  --nv-accent: #F5A524;
  --nv-accent-hover: #FFC35C;
  --nv-accent-ink: #1A1205;
  --nv-accent-soft: rgba(245, 165, 36, .08);
  --nv-win: #3DD68C;
  --nv-loss: #F2686B;
  --nv-warn: #FFB86B;
  --nv-away: #5AB2FF;

  --nv-font-display: "Barlow Condensed", system-ui, sans-serif;
  --nv-font-body: "Barlow", system-ui, sans-serif;

  --nv-radius-sm: 10px;
  --nv-radius: 14px;
  --nv-radius-lg: 16px;
  --nv-radius-xl: 20px;
  --nv-max: 1200px;
}

/* ---------- Base de la sección ---------- */
.nv-page { background: var(--nv-bg); color: var(--nv-text); font-family: var(--nv-font-body); min-height: 100vh; }
.nv-page a { color: var(--nv-accent); text-decoration: none; }
.nv-page a:hover { color: var(--nv-accent-hover); }
.nv-container { max-width: var(--nv-max); margin: 0 auto; padding-inline: 20px; }
.nv-main { display: flex; flex-direction: column; gap: 56px; padding-block: 32px 64px; }
.nv-main--tight { gap: 40px; }
.nv-section { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 64px; }
.nv-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.nv-h1 { margin: 0; font: 800 clamp(40px, 6vw, 72px)/.95 var(--nv-font-display); text-transform: uppercase; max-width: 900px; }
.nv-h1 em { font-style: normal; color: var(--nv-accent); }
.nv-h2 { margin: 0; font: 800 32px/1 var(--nv-font-display); text-transform: uppercase; }
.nv-h3 { margin: 0; font: 800 22px/1 var(--nv-font-display); text-transform: uppercase; }
.nv-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--nv-muted); }
.nv-eyebrow--accent { color: var(--nv-accent); }
.nv-muted { color: var(--nv-muted); }
.nv-note { font-size: 13px; color: var(--nv-muted); }
.nv-num { font-family: var(--nv-font-display); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }

/* ---------- Layout con lateral (se apila en móvil) ---------- */
.nv-split { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.nv-split__main { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.nv-split__side { flex: 1 1 300px; display: flex; flex-direction: column; gap: 16px; }

/* ---------- Tarjetas ---------- */
.nv-card { background: var(--nv-surface); border: 1px solid var(--nv-line); border-radius: var(--nv-radius-lg); padding: 20px; }
.nv-card--feature { background: linear-gradient(160deg, #2B1E08, var(--nv-surface) 70%); border-color: #4A3410; }
.nv-card--flush { padding: 0; overflow: hidden; }

/* ---------- Botones y pastillas ---------- */
.nv-btn { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 11px 16px; border-radius: var(--nv-radius-sm); font: 700 15px/1 var(--nv-font-body); cursor: pointer; border: 0; }
.nv-btn--primary { background: var(--nv-accent); color: var(--nv-accent-ink) !important; }
.nv-btn--primary:hover { background: var(--nv-accent-hover); }
.nv-btn--ghost { background: transparent; border: 1px solid var(--nv-line-strong); color: var(--nv-text) !important; font-weight: 600; }
.nv-btn--block { display: flex; width: 100%; }

.nv-chip { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--nv-surface-2); color: var(--nv-text-2); }
.nv-chip--live { background: rgba(61, 214, 140, .12); color: var(--nv-win); }

.nv-segmented { display: flex; gap: 6px; background: var(--nv-surface); padding: 4px; border-radius: 12px; }
.nv-segmented button { min-height: 40px; padding: 9px 14px; border: 0; border-radius: 9px; background: transparent; color: var(--nv-text-2); font: 600 14px var(--nv-font-body); cursor: pointer; }
.nv-segmented button[aria-selected="true"] { background: var(--nv-accent); color: var(--nv-accent-ink); font-weight: 700; }

/* Fila de ligas del header (pastillas) */
.nv-leagues { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; }
.nv-leagues a { padding: 8px 14px; border-radius: 999px; background: var(--nv-surface); border: 1px solid var(--nv-line); color: var(--nv-text-2); font-weight: 600; font-size: 13px; white-space: nowrap; }
.nv-leagues a.is-active { background: var(--nv-accent); border-color: var(--nv-accent); color: var(--nv-accent-ink); font-weight: 700; }

/* ---------- Hero ---------- */
.nv-hero { background: radial-gradient(1200px 400px at 85% -10%, #3A2A10 0%, var(--nv-bg) 60%); border-bottom: 1px solid var(--nv-line); }
.nv-hero__inner { display: flex; flex-direction: column; gap: 20px; padding-block: 40px 32px; }
.nv-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--nv-muted); }
.nv-breadcrumb a { color: var(--nv-muted) !important; }
.nv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 8px; }
.nv-kpi { background: var(--nv-surface); border: 1px solid var(--nv-line); border-radius: var(--nv-radius); padding: 16px; }
.nv-kpi__value { font: 800 34px/1 var(--nv-font-display); }
.nv-kpi__label { font-size: 13px; color: var(--nv-muted); margin-top: 6px; }

/* ---------- Sub navegación pegajosa ---------- */
.nv-subnav { position: sticky; top: 0; z-index: 5; background: rgba(13, 17, 23, .95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--nv-line); }
.nv-subnav__list { display: flex; gap: 4px; overflow-x: auto; }
.nv-subnav a { padding: 14px; color: var(--nv-muted) !important; font-weight: 600; font-size: 14px; white-space: nowrap; border-bottom: 2px solid transparent; }
.nv-subnav a.is-active { color: var(--nv-text) !important; font-weight: 700; border-bottom-color: var(--nv-accent); }

/* ---------- Tarjeta de partido (listado) ---------- */
.nv-matches { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.nv-match { background: var(--nv-surface); border: 1px solid var(--nv-line); border-radius: var(--nv-radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.nv-match__meta { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--nv-muted); }
.nv-match__meta .is-upcoming { color: var(--nv-win); }
.nv-match__row { display: flex; align-items: center; gap: 10px; }
.nv-match__team { flex: 1; font-weight: 600; font-size: 16px; }
.nv-match__pts { font: 800 26px/1 var(--nv-font-display); }
.nv-match__row.is-loser { color: var(--nv-muted); }
.nv-match__foot { font-size: 13px; color: var(--nv-text-2); border-top: 1px solid var(--nv-line); padding-top: 12px; }
.nv-match__foot strong { color: var(--nv-accent); }

/* Escudo / iniciales de equipo. El color sale de Team.color (style="--team: #hex") */
.nv-badge { --team: var(--nv-accent); width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--team); color: var(--nv-bg); display: inline-grid; place-items: center; font: 700 12px var(--nv-font-body); overflow: hidden; }
.nv-badge img { width: 100%; height: 100%; object-fit: cover; }
.nv-badge--sm { width: 28px; height: 28px; font-size: 11px; }
.nv-badge--lg { width: 44px; height: 44px; font-size: 14px; }
.nv-badge--xl { width: 84px; height: 84px; font: 800 28px var(--nv-font-display); }

/* ---------- Tablas (posiciones y box score) ---------- */
.nv-table-wrap { background: var(--nv-surface); border: 1px solid var(--nv-line); border-radius: var(--nv-radius-lg); overflow-x: auto; }
.nv-table { border-collapse: collapse; width: 100%; }
.nv-table th { font: 600 12px/1 var(--nv-font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--nv-muted); text-align: center; padding: 12px 8px; border-bottom: 1px solid #2A3240; white-space: nowrap; }
.nv-table td { font: 500 15px/1 var(--nv-font-body); color: var(--nv-text); text-align: center; padding: 12px 8px; border-bottom: 1px solid var(--nv-line); white-space: nowrap; }
.nv-table .is-left { text-align: left; }
.nv-table .is-accent { color: var(--nv-accent); }
.nv-table .nv-pts { font: 800 20px/1 var(--nv-font-display); color: var(--nv-accent); }
.nv-table tr.is-cutoff td { border-bottom: 2px dashed rgba(245, 165, 36, .4); }
.nv-table tr.is-total { background: var(--nv-bg); }
.nv-table tr.is-total td { font-weight: 700; }
.nv-pos--qualified { color: var(--nv-accent); font-weight: 700; }
.nv-pos { color: var(--nv-muted); font-weight: 700; }
.nv-pos-team { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.nv-dif--pos { color: var(--nv-win); }
.nv-dif--neg { color: var(--nv-loss); }
.nv-form { display: inline-flex; gap: 4px; }
.nv-form span { width: 22px; height: 22px; border-radius: 6px; display: inline-grid; place-items: center; font: 700 11px var(--nv-font-body); }
.nv-form .is-w { background: rgba(61, 214, 140, .15); color: var(--nv-win); }
.nv-form .is-l { background: rgba(242, 104, 107, .15); color: var(--nv-loss); }
.nv-fouls--warn { color: var(--nv-warn); }
.nv-fouls--out { color: var(--nv-loss); font-weight: 700; }
.nv-tag-mvp { margin-left: 8px; padding: 3px 7px; border-radius: 6px; background: rgba(245, 165, 36, .15); color: var(--nv-accent); font-size: 11px; font-weight: 700; }
.nv-legend { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: var(--nv-muted); }
.nv-legend__swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--nv-accent); margin-right: 8px; vertical-align: -1px; }

/* ---------- Líderes ---------- */
.nv-leaders { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.nv-leader { background: var(--nv-surface); border: 1px solid var(--nv-line); border-radius: var(--nv-radius-lg); overflow: hidden; }
.nv-leader__head { padding: 18px 18px 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.nv-leader__unit { font-size: 12px; font-weight: 600; color: var(--nv-muted); }
.nv-leader__top { margin: 0 18px; padding: 16px; border-radius: 12px; background: var(--nv-accent-soft); border: 1px solid rgba(245, 165, 36, .25); display: flex; align-items: center; gap: 12px; }
.nv-leader__top .nv-num { font-size: 40px; color: var(--nv-accent); }
.nv-leader__list { list-style: none; margin: 0; padding: 10px 18px 16px; }
.nv-leader__list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--nv-line); }
.nv-leader__rank { width: 18px; color: var(--nv-muted); font-weight: 700; }
.nv-leader__name { flex: 1; font-weight: 600; }
.nv-leader__name small { color: var(--nv-muted); font-weight: 500; font-size: 13px; }

.nv-minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.nv-mini { background: var(--nv-surface); border: 1px solid var(--nv-line); border-radius: var(--nv-radius); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.nv-mini__body { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
.nv-mini__value { font: 800 30px/1 var(--nv-font-display); }
.nv-mini__value--accent { color: var(--nv-accent); }
.nv-mini__value--loss { color: var(--nv-loss); }
.nv-mini__value--win { color: var(--nv-win); }

/* Jugador de la jornada / del partido */
.nv-player { display: flex; gap: 14px; align-items: center; }
.nv-player__photo { width: 72px; height: 72px; border-radius: 50%; background: #2A3240; object-fit: cover; flex: none; }
.nv-player__photo--lg { width: 96px; height: 96px; }
.nv-player__name { font: 800 26px/1 var(--nv-font-display); text-transform: uppercase; }
.nv-statline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; text-align: center; }
.nv-statline > div { background: var(--nv-bg); border-radius: var(--nv-radius-sm); padding: 10px 4px; }
.nv-statline .nv-num { font-size: 24px; }
.nv-statline small { display: block; font-size: 11px; color: var(--nv-muted); margin-top: 4px; letter-spacing: .06em; }

/* ---------- Calendario ---------- */
.nv-rounds { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.nv-rounds button { min-height: 44px; padding: 10px 16px; border-radius: var(--nv-radius-sm); background: var(--nv-surface); color: var(--nv-text-2); border: 1px solid var(--nv-line); font: 600 14px var(--nv-font-body); white-space: nowrap; cursor: pointer; }
.nv-rounds button[aria-pressed="true"] { background: var(--nv-accent); border-color: var(--nv-accent); color: var(--nv-accent-ink); font-weight: 700; }
.nv-fixture { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 18px; border-bottom: 1px solid var(--nv-line); }
.nv-fixture__when { width: 130px; font-size: 14px; color: var(--nv-muted); }
.nv-fixture__when strong { display: block; color: var(--nv-text); font-weight: 600; }
.nv-fixture__teams { flex: 1 1 280px; display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 16px; }
.nv-fixture__teams > span:first-child { flex: 1; text-align: right; }
.nv-fixture__teams > span:last-child { flex: 1; }
.nv-fixture__score { padding: 6px 12px; border-radius: 8px; background: var(--nv-bg); font: 800 18px/1 var(--nv-font-display); min-width: 70px; text-align: center; }

/* ---------- Equipos ---------- */
.nv-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.nv-team { background: var(--nv-surface); border: 1px solid var(--nv-line); border-radius: var(--nv-radius); padding: 16px; display: flex; align-items: center; gap: 12px; color: var(--nv-text) !important; }

/* ---------- CTA Atinados22 ---------- */
.nv-cta { border-radius: var(--nv-radius-xl); padding: 32px; background: linear-gradient(120deg, var(--nv-accent), #E07B12); color: var(--nv-accent-ink); display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.nv-cta h2 { margin: 0 0 8px; font: 800 34px/1 var(--nv-font-display); text-transform: uppercase; }
.nv-cta p { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 500; }
.nv-cta .nv-btn { background: var(--nv-accent-ink); color: var(--nv-accent) !important; }

/* ==========================================================================
   FICHA DE PARTIDO
   ========================================================================== */
.nv-scoreboard { background: radial-gradient(900px 360px at 50% -20%, #3A2A10 0%, var(--nv-bg) 65%); border-bottom: 1px solid var(--nv-line); }
.nv-scoreboard__inner { display: flex; flex-direction: column; gap: 22px; padding-block: 24px 32px; }
.nv-scoreboard__nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 14px; }
.nv-scoreboard__nav a { color: var(--nv-text-2) !important; font-weight: 600; padding: 8px 0; }
.nv-scoreboard__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; }
.nv-scoreboard__team { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.nv-scoreboard__name { font: 800 clamp(20px, 3vw, 30px)/1 var(--nv-font-display); text-transform: uppercase; }
.nv-scoreboard__team.is-loser .nv-scoreboard__name { color: var(--nv-text-2); }
.nv-scoreboard__score { font: 800 clamp(56px, 9vw, 104px)/.9 var(--nv-font-display); letter-spacing: .02em; text-align: center; }
.nv-scoreboard__score .sep { color: var(--nv-line-strong); padding: 0 10px; }
.nv-scoreboard__score .is-loser { color: var(--nv-muted); }
.nv-quarters { max-width: 640px; width: 100%; margin: 0 auto; }
.nv-quarters td.is-won { font-weight: 700; }
.nv-quarters td.is-lost { color: var(--nv-muted); }

.nv-highlights { flex: 999 1 520px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.nv-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px; background: var(--nv-accent); }
.nv-dot--away { background: var(--nv-away); }
.nv-dot--loss { background: var(--nv-loss); }
.nv-dot--win { background: var(--nv-win); }

/* Momentos clave */
.nv-moments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.nv-moment { display: flex; gap: 16px; align-items: flex-start; background: var(--nv-surface); border: 1px solid var(--nv-line); border-radius: var(--nv-radius); padding: 16px; }
.nv-moment__time { min-width: 64px; text-align: center; }
.nv-moment__time .nv-num { font-size: 22px; }
.nv-moment__body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.nv-moment__title { font-weight: 700; font-size: 16px; }
.nv-moment__text { font-size: 15px; color: var(--nv-text-2); line-height: 1.5; }
.nv-moment__score { text-align: right; min-width: 72px; }
.nv-moment__score .nv-num { font-size: 22px; }
.nv-mtag { padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.nv-mtag--clave, .nv-mtag--triple { background: rgba(245, 165, 36, .15); color: var(--nv-accent); }
.nv-mtag--racha { background: rgba(61, 214, 140, .15); color: var(--nv-win); }
.nv-mtag--falta, .nv-mtag--descalificado { background: rgba(242, 104, 107, .15); color: var(--nv-loss); }
.nv-mtag--empate { background: rgba(90, 178, 255, .15); color: var(--nv-away); }

/* Comparativa con barras enfrentadas (usa style="--w: 72%") */
.nv-compare { display: flex; flex-direction: column; gap: 18px; }
.nv-compare__row { display: flex; flex-direction: column; gap: 8px; }
.nv-compare__labels { display: flex; justify-content: space-between; font-size: 15px; }
.nv-compare__labels .home { font: 800 20px/1 var(--nv-font-display); color: var(--nv-accent); }
.nv-compare__labels .away { font: 800 20px/1 var(--nv-font-display); color: var(--nv-away); }
.nv-compare__bars { display: flex; gap: 4px; height: 10px; }
.nv-compare__track { flex: 1; display: flex; background: var(--nv-bg); border-radius: 6px; overflow: hidden; }
.nv-compare__track--home { justify-content: flex-end; }
.nv-compare__fill { width: var(--w, 0%); height: 100%; border-radius: 6px; background: var(--nv-accent); }
.nv-compare__track--away .nv-compare__fill { background: var(--nv-away); }

/* Pool de pronósticos */
.nv-pool { display: flex; height: 14px; border-radius: 8px; overflow: hidden; }
.nv-pool__home { width: var(--w, 50%); background: var(--nv-accent); }
.nv-pool__away { flex: 1; background: var(--nv-away); }

/* Galería */
.nv-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.nv-gallery img, .nv-gallery__ph { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; border-radius: var(--nv-radius); background: var(--nv-surface); }

.nv-footer { border-top: 1px solid var(--nv-line); padding: 24px 20px 32px; text-align: center; color: var(--nv-muted); font-size: 13px; }

/* ---------- Móvil ---------- */
@media (max-width: 640px) {
  .nv-main { gap: 40px; }
  .nv-h2 { font-size: 26px; }
  .nv-scoreboard__grid { gap: 8px; }
  .nv-badge--xl { width: 56px; height: 56px; font-size: 20px; }
  .nv-fixture__when { width: 100%; }
  .nv-moment { flex-wrap: wrap; }
  .nv-moment__score { text-align: left; }
  .nv-cta { padding: 24px; }
}