/* Design tokens — Light estilo Linear/Vercel (modo claro por defecto) */
:root {
  /* La propiedad CSS pisa al <meta name="color-scheme">: sin esto, en dark los
     controles nativos (popup del select, scrollbars) se pintan claros. */
  color-scheme: light;

  --font-header: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;

  --bg-primary: #fafafa;
  --bg-secondary: #ffffff;
  --bg-glass: #ffffff;
  --bg-hover: #f4f4f5;
  --border-glass: #e4e4e7;
  --border-glass-hover: #d4d4d8;

  --color-accent: #18181b;
  --color-accent-strong: #000000;
  --color-accent-glow: rgba(0, 0, 0, 0.06);
  --color-on-accent: #ffffff;
  --color-gold: #ca8a04;
  --color-success: #16a34a;
  --color-danger: #dc2626;
  --color-neutral: #71717a;
  --color-info: #2563eb; /* azul: 3er lugar / tercero provisional ("en zona") */

  --text-main: #09090b;
  --text-muted: #71717a;

  --radius-sm: 6px;
  --radius-md: 10px;
  --shadow-main: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* Tints (overlays sutiles que se invierten por tema) */
  --tint-1: rgba(0, 0, 0, 0.025);
  --tint-2: rgba(0, 0, 0, 0.04);
  --tint-3: rgba(0, 0, 0, 0.06);
  --tint-4: rgba(0, 0, 0, 0.1);
}

/* Tema oscuro — limpio, gris-negro tipo Linear dark */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg-primary: #09090b;
  --bg-secondary: #131316;
  --bg-glass: #131316;
  --bg-hover: #1c1c20;
  --border-glass: #27272a;
  --border-glass-hover: #3f3f46;

  --color-accent: #fafafa;
  --color-accent-strong: #ffffff;
  --color-accent-glow: rgba(255, 255, 255, 0.08);
  --color-on-accent: #09090b;
  --color-gold: #eab308;
  --color-success: #22c55e;
  --color-danger: #ef4444;
  --color-neutral: #a1a1aa;
  --color-info: #3b82f6;

  --text-main: #fafafa;
  --text-muted: #a1a1aa;

  --shadow-main: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);

  --tint-1: rgba(255, 255, 255, 0.03);
  --tint-2: rgba(255, 255, 255, 0.05);
  --tint-3: rgba(255, 255, 255, 0.08);
  --tint-4: rgba(255, 255, 255, 0.12);
}

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-main);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Contenedor de la Aplicación */
.app-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 1.25rem;
}
@media (max-width: 560px) {
  .app-container { padding: 1rem 0.6rem; }
}

/* Tablas anchas (ej. mejores terceros) hacen scroll interno sin reventar la página */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Encabezado Premium */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.logo-area h1 {
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 1.85rem;
  letter-spacing: -0.8px;
  line-height: 1.05;
  margin-top: 0.25rem;
  color: var(--text-main);
}

.logo-area h1 span {
  color: var(--color-gold);
  font-weight: 800;
}

.logo-area .subtitle {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 0.3rem;
}

/* Botones */
.btn {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.55rem 1.25rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all var(--transition-fast);
  color: var(--text-main);
}

.btn-primary {
  background: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  color: var(--color-on-accent);
}
.btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.btn-secondary {
  background: var(--bg-secondary);
  border-color: var(--border-glass);
}

.btn-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--border-glass-hover);
}

/* Barra de Navegación */
.app-navigation {
  display: flex;
  background: var(--bg-glass);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 0.35rem;
  margin-bottom: 1.5rem;
  gap: 0.3rem;
  box-shadow: var(--shadow-main);
}

.nav-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition: all var(--transition-fast);
}

.nav-tab:hover {
  color: var(--text-main);
  background: var(--tint-1);
}

/* Barra de Filtros */
.filters-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}
/* display:flex gana sobre el atributo [hidden]; esta regla lo restituye. */
.filters-bar[hidden] { display: none; }

.search-box {
  position: relative;
  max-width: 320px;
  width: 100%;
}

.search-box input {
  width: 100%;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: 999px;
  padding: 0.55rem 1rem 0.55rem 2.4rem;
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: all var(--transition-fast);
}

.search-box input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 12px var(--color-accent-glow);
}

.search-icon {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 0.9rem;
}

.quick-stats {
  display: flex;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 0.45rem 1rem;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.stat-val {
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 1.05rem;
}

.stat-lbl {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Paneles de Contenido */
.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

/* Fase de Grupos */
.groups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 1rem;
}

.group-card {
  background: var(--bg-glass);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 1rem 1rem 0.85rem;
  box-shadow: var(--shadow-main);
  transition: transform var(--transition-fast), border-color var(--transition-fast);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.group-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-gold));
  opacity: 0.85;
}

.group-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-glass-hover);
  box-shadow: 0 10px 30px var(--tint-3);
}

.group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.group-title {
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.2px;
  color: var(--text-main);
}

/* Tabla de Posiciones */
.standings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.standings-table th, 
.standings-table td {
  padding: 0.55rem 0.35rem;
  text-align: center;
}

.standings-table th {
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--tint-3);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.standings-table td {
  border-bottom: 1px solid var(--tint-1);
}

.standings-table tr:last-child td {
  border-bottom: none;
}

.standings-table td.team-cell {
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-flag-inline {
  font-size: 1.15rem;
  line-height: 1;
}

/* Filas Destacadas en Fase de Grupos (1° y 2° clasifican → verde).
   Excluye la tabla de terceros, que tiene su propio estado (En zona/Clasificado). */
.standings-table:not(.third-place-table) tbody tr:nth-child(1) {
  background: rgba(22, 163, 74, 0.05);
}
.standings-table:not(.third-place-table) tbody tr:nth-child(2) {
  background: rgba(22, 163, 74, 0.05);
}

.standings-table tr.row-qualified-direct td.pos-num {
  color: var(--color-success);
  font-weight: 700;
}

/* 3er lugar en zona: mismo tratamiento que 1º/2º (fondo tintado + número de
   color), pero en azul en vez de verde. */
.standings-table tr.row-qualified-3rd {
  background: rgba(37, 99, 235, 0.06);
}
.standings-table tr.row-qualified-3rd td.pos-num {
  color: var(--color-info);
  font-weight: 700;
}

.pos-num {
  font-weight: 600;
  color: var(--text-muted);
  width: 20px;
}

.pts-num {
  font-weight: 700;
  color: var(--text-main);
}

.group-footer-info {
  margin-top: auto;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: center;
  border-top: 1px solid var(--tint-2);
  padding-top: 0.65rem;
}

/* Tabla de Terceros */
.card-glass-container {
  background: var(--bg-glass);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-main);
}
@media (max-width: 560px) {
  .card-glass-container { padding: 1rem 0.75rem; }
}

.card-glass-header {
  margin-bottom: 1.25rem;
}

.card-glass-header h2 {
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.3px;
}

.card-glass-header p {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

.third-place-table {
  font-size: 0.95rem;
}

/* Escritorio: nombre completo del país (el código solo se usa en móvil). */
.third-place-table .tname-code { display: none; }

.third-place-table th,
.third-place-table td {
  padding: 0.85rem 1rem;
}

.third-place-table tr.qualified-row {
  background: rgba(22, 163, 74, 0.05);
}

.third-place-table tr.eliminated-row {
  opacity: 0.62;
}

/* Estados provisionales (fase de grupos en curso) */
.third-place-table tr.provisional-row {
  background: rgba(37, 99, 235, 0.06);
}

/* Móvil: como el nombre se reduce a código (NED, CZE…), el grupo a su letra
   y el estado a un punto, caben las 12 columnas completas. Solo compactamos. */
@media (max-width: 560px) {
  .third-place-table { font-size: 0.78rem; }
  .third-place-table th,
  .third-place-table td { padding: 0.5rem 0.25rem; }
  /* Código de 3 letras en vez del nombre completo (como las tablas de grupo). */
  .third-place-table .tname-full { display: none; }
  .third-place-table .tname-code { display: inline; }
  /* Solo la letra del grupo (ocultamos la palabra "Grupo"). */
  .third-place-table .grp-word { display: none; }
  /* La columna Grupo muestra solo la letra → encabezado abreviado "Gpo.". */
  .third-place-table thead th:nth-child(2) { font-size: 0; }
  .third-place-table thead th:nth-child(2)::after {
    content: "GPO";
    font-size: 0.7rem;
  }
  /* La columna Estado es solo un punto → encabezado abreviado "EST"
     (el texto completo "ESTADO" ensanchaba la columna y cortaba la tabla). */
  .third-place-table thead th:last-child { font-size: 0; }
  .third-place-table thead th:last-child::after {
    content: "EST";
    font-size: 0.7rem;
  }
  /* Estado como punto de color, sin texto. */
  .third-place-table .tp-pill {
    font-size: 0;
    width: 12px;
    height: 12px;
    padding: 0;
    border: none;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
  }
  .third-place-table .tp-inzone     { background: var(--color-info); }
  .third-place-table .tp-qualified  { background: var(--color-success); }
  .third-place-table .tp-out        { background: var(--text-muted); }
  .third-place-table .tp-eliminated { background: var(--color-danger); }
}

/* Pills de estado de la tabla de terceros (mismo lenguaje que .status-pill) */
.tp-pill {
  border: 1px solid transparent;
}
.tp-qualified {
  background: rgba(22, 163, 74, 0.12);
  color: var(--color-success);
  border-color: rgba(22, 163, 74, 0.3);
}
.tp-eliminated {
  background: rgba(220, 38, 38, 0.1);
  color: var(--color-danger);
  border-color: rgba(220, 38, 38, 0.28);
}
.tp-inzone {
  background: rgba(37, 99, 235, 0.12);
  color: var(--color-info);
  border-color: rgba(37, 99, 235, 0.32);
}
.tp-out {
  background: var(--tint-2);
  color: var(--text-muted);
  border-color: var(--border-glass);
}

.provisional-note {
  margin: 0 0 1rem;
  padding: 0.6rem 0.85rem;
  background: rgba(37, 99, 235, 0.07);
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* Píldora de estado "Provisional" para eliminatorias antes de definirse. */
.status-pill.status-prov {
  background: rgba(37, 99, 235, 0.12);
  color: var(--color-info);
  border: 1px solid rgba(37, 99, 235, 0.35);
}
/* Mismo tamaño/estilo que las píldoras de estado del resto de vistas; solo se
   ajusta el espaciado para que quede bien inline junto a la ronda. */
.tpm-prov {
  margin-left: 0.4rem;
  vertical-align: middle;
}

.legend-area {
  display: flex;
  gap: 1.5rem;
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* BRACKET ELIMINATORIO (Horizontal Scrollable Tree) */
.bracket-wrapper {
  overflow-x: auto;
  padding: 1rem 0;
  width: 100%;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Modificación de scrollbars */
.bracket-wrapper::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
  height: 8px;
}

.bracket-wrapper::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track {
  background: var(--tint-1);
  border-radius: 10px;
}

.bracket-wrapper::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
  background: var(--tint-4);
  border-radius: 10px;
}

.bracket-wrapper::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent);
}

.bracket-container {
  --bracket-gap: 3.5rem;
  position: relative;
  display: flex;
  gap: var(--bracket-gap);
  padding: 1.5rem 0.5rem;
  min-width: 1665px;
}

.bracket-round {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 285px;
  flex-shrink: 0;
}

/* Líneas conectoras del árbol: SVG dibujado por JS según las posiciones reales
   de cada tarjeta. Cada par de partidos se une con un codo hacia el partido que
   alimentan, rellenando el espacio entre columnas (sin huecos muertos). */
.bracket-connectors {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.bracket-connectors path {
  fill: none;
  stroke: var(--tint-4);
  stroke-width: 1.5;
}

/* Selector de rondas (estilo Apple Sports). Solo en móvil; en escritorio se ve
   el árbol completo y no hace falta. */
.bracket-rounds-nav { display: none; }
.br-tab {
  flex: 0 0 auto;
  border: 1px solid var(--border-glass);
  background: var(--bg-glass);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-family: var(--font-header);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
/* accent-strong/on-accent (mismo patrón que .nav-tab.active): en dark,
   --color-accent es casi blanco y con color:#fff la pestaña era ilegible. */
.br-tab.active {
  background: var(--color-accent-strong);
  color: var(--color-on-accent);
  border-color: var(--color-accent-strong);
}

.round-title {
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 1.15rem;
  text-align: center;
  color: var(--text-main);
  margin-bottom: 0.15rem;
}

.accent-title {
  color: var(--color-gold);
}

.round-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 2rem;
  letter-spacing: 0.5px;
}

.matches-list {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
  gap: 1.5rem;
}

/* Tarjeta de Partido del Bracket */
.match-card {
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 1rem 1.05rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: var(--shadow-main);
}

.match-card:hover {
  border-color: var(--border-glass-hover);
  box-shadow: 0 8px 25px var(--tint-3);
}

.match-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-bottom: 0.7rem;
  border-bottom: 1px solid var(--tint-2);
  padding-bottom: 0.5rem;
}
/* El texto del encabezado (M86 · fecha · hora) NUNCA se recorta: en escritorio
   cabe en una línea; en móvil, si no cabe junto a la píldora, baja de línea con
   la hora completa. La píldora de estado nunca se encoge. */
.match-card-header > span:first-child {
  min-width: 0;
  line-height: 1.35;
}
.match-card-header > .status-pill {
  flex: 0 0 auto;
}

/* Cruce de eliminatoria ya DEFINIDO por nuestra matemática (no provisional, aún
   no oficial del API). Verde, en el mismo lenguaje que el resto de píldoras. */
.status-pill.status-confirmed {
  background: rgba(22, 163, 74, 0.14);
  color: var(--color-success);
  border: 1px solid rgba(22, 163, 74, 0.4);
}
.match-card.is-confirmed {
  border-color: rgba(22, 163, 74, 0.45);
}

/* Origen del equipo en 16avos (de qué posición de grupo viene). Chico y tenue. */
.team-origin {
  flex: 0 0 auto;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-muted);
  opacity: 0.85;
}

.match-card-venue {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  padding-top: 0.7rem;
  margin-top: 0.7rem;
  border-top: 1px solid var(--tint-1);
}
.mc-match-id {
  flex: 0 0 auto;
  font-weight: 600;
}
.mc-venue-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: right;
}

.match-card-teams {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.match-card-team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.85rem;
  min-height: 1.65rem;
}

.team-display-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  color: var(--text-muted);
  font-weight: 500;
}

.team-display-info.filled {
  color: var(--text-main);
}

.team-display-info.winner {
  color: var(--text-main);
  font-weight: 800;
}

.team-display-info.loser {
  opacity: 0.55;
}

.match-score-badge {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-muted);
  width: 25px;
  text-align: center;
}

.match-score-badge.filled {
  color: var(--text-main);
}

.match-score-badge.loser {
  opacity: 0.55;
}

/* Indicación de penaltis */
.pen-info {
  font-size: 0.72rem;
  background: var(--tint-3);
  color: var(--text-muted);
  padding: 0 4px;
  border-radius: var(--radius-sm);
  margin-left: 4px;
}

/* Distintivo de clasificación (tabla de grupos y bracket). Pastilla SUAVE, en
   el mismo lenguaje que las pastillas de estado/terceros: fondo tintado tenue,
   texto e ícono de color y borde fino. ✓ = clasificado (top-2); 👑 1º = primer
   lugar de grupo asegurado (un poco más marcado). */
.qualified-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 16px;
  padding: 0 5px;
  margin-left: 5px;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
  flex: 0 0 auto;
  background: rgba(22, 163, 74, 0.12);
  color: var(--color-success);
  border: 1px solid rgba(22, 163, 74, 0.32);
}
.qualified-badge.is-first {
  background: rgba(22, 163, 74, 0.18);
  border-color: rgba(22, 163, 74, 0.5);
  font-weight: 800;
}
.qualified-badge .qb-crown { font-size: 0.7em; line-height: 1; }

/* Detalle de partido: goleadores, cada gol del lado de su equipo */
.md-goals-cols {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.md-goal-col {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.md-goals-ball {
  flex: 0 0 auto;
  align-self: center;
  font-size: 1rem;
  opacity: 0.6;
}
.md-goal {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.9rem;
}
.md-goal-col.is-away .md-goal { flex-direction: row-reverse; text-align: right; }
.md-goal-min {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.8rem;
}
.md-goal-scorer { color: var(--text-main); min-width: 0; word-break: break-word; }
.md-goal-tag {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--tint-3);
  color: var(--text-muted);
  padding: 0 4px;
  border-radius: var(--radius-sm);
  margin: 0 3px;
}

/* Estructura específica para Final / Tercer Lugar */
.final-block {
  margin-bottom: 3.5rem;
}

/* Responsividad general */
@media (max-width: 768px) {
  .app-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .logo-area h1 { font-size: 1.4rem; }
  .logo-area .subtitle { font-size: 0.75rem; }

  .header-actions {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.5rem;
  }
  /* En mobile el indicador deja de ser pill — solo texto sutil con su dot */
  .header-actions .sync-indicator {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: none;
    padding: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
  }
  .header-actions .theme-toggle { flex-shrink: 0; }
  /* Botón Sincronizar se vuelve icon-only — más limpio y compacto */
  .header-actions .btn {
    flex-shrink: 0;
    padding: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    justify-content: center;
    font-size: 1.1rem;
  }
  .header-actions .btn .btn-text { display: none; }

  .filters-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .search-box { max-width: none; }
  .quick-stats { justify-content: center; }

  .app-navigation {
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.3rem;
  }
  .nav-tab {
    flex: 1 1 calc(50% - 0.25rem);
    font-size: 0.78rem;
    padding: 0.5rem 0.4rem;
    gap: 0.3rem;
  }
  .nav-tab .tab-icon { font-size: 0.95rem; }

  /* Bracket en móvil: mismo árbol que en escritorio, se navega deslizando (el
     hint lo indica). Columnas y separación más compactas para abarcar más cuadro. */
  /* Selector de rondas visible. Debajo, el árbol se navega deslizando en
     horizontal; la página hace scroll vertical de forma natural. Sin caja de
     scroll interna, sin snap forzado, con su espacio para respirar. */
  .bracket-rounds-nav {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding: 0.25rem 0.25rem 0.7rem;
    scrollbar-width: none;
  }
  .bracket-rounds-nav::-webkit-scrollbar { display: none; }

  .bracket-container {
    --bracket-gap: 2rem;
    padding: 1rem 0.25rem;
    min-width: max-content;
  }
  .bracket-round { width: 265px; }
}

.sync-indicator .sync-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

@media (max-width: 380px) {
  /* En pantallas muy chicas el texto del indicator estorba — solo muestra el dot */
  .header-actions .sync-indicator .sync-text { display: none; }
  .header-actions .sync-indicator { padding: 0.4rem 0.55rem; }
}

/* === Tracker en vivo: indicador de sync, pills de estado, fixtures === */

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sync-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  color: var(--text-muted);
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.sync-indicator .sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-neutral);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15);
}
.sync-indicator.ok .sync-dot {
  background: var(--color-success);
}
.sync-indicator.ok {
  color: var(--text-main);
  border-color: rgba(22, 163, 74, 0.3);
}
.sync-indicator.syncing .sync-dot {
  background: var(--color-accent);
  animation: pulseDot 1.2s infinite;
}
.sync-indicator.syncing {
  color: var(--text-main);
  border-color: var(--color-accent-glow);
}
.sync-indicator.error .sync-dot {
  background: var(--color-danger);
}
.sync-indicator.error {
  color: var(--color-danger);
  border-color: rgba(220, 38, 38, 0.3);
}
/* Estado "novedad": gol/inicio/final detectado en la última sincronización */
.sync-indicator.updated .sync-dot {
  background: var(--color-accent);
  animation: pulseDot 1.2s infinite;
}
.sync-indicator.updated {
  color: var(--text-main);
  border-color: var(--color-accent-glow);
  background: var(--tint-2);
}

@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0   rgba(0, 0, 0, 0.25); }
  70%  { box-shadow: 0 0 0 8px rgba(0, 0, 0, 0);    }
  100% { box-shadow: 0 0 0 0   rgba(0, 0, 0, 0);    }
}

/* Destello al detectar novedad en un partido (gol, inicio, final). */
[data-match-id].just-updated {
  animation: matchJustUpdated 2.6s ease-out;
}
@keyframes matchJustUpdated {
  0%   { box-shadow: inset 0 0 0 2px var(--color-gold); background-color: rgba(202, 138, 4, 0.20); }
  60%  { box-shadow: inset 0 0 0 2px var(--color-gold); background-color: rgba(202, 138, 4, 0.10); }
  100% { box-shadow: inset 0 0 0 0 transparent; background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  [data-match-id].just-updated { animation: none; }
}

/* Pill de estado por partido */
.status-pill {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  text-transform: uppercase;
}
.status-pill.status-live {
  background: rgba(220, 38, 38, 0.1);
  color: var(--color-danger);
  border: 1px solid rgba(220, 38, 38, 0.3);
  animation: pulseLive 1.6s infinite;
}
.status-pill.status-ft {
  background: var(--color-neutral);
  /* on-accent, no #fff: en dark --color-neutral es gris claro y blanco no contrasta */
  color: var(--color-on-accent);
  border: 1px solid transparent;
}
.status-pill.status-scheduled {
  background: var(--tint-2);
  color: var(--text-muted);
  border: 1px solid var(--border-glass);
}
.status-pill.status-other {
  background: var(--tint-2);
  color: var(--text-muted);
  border: 1px solid var(--border-glass);
}

@keyframes pulseLive {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* Lista de partidos dentro de cada tarjeta de grupo */
.group-fixtures {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem 0.5rem 0;
  border-top: 1px dashed var(--border-glass);
  margin-top: 0.5rem;
}
.fixture-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    "home score away"
    "meta meta meta";
  align-items: center;
  gap: 0.45rem 0.6rem;
  padding: 0.6rem 0.7rem;
  background: var(--tint-1);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
}
.fixture-row .fixture-team {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.fixture-row .fixture-team.home { grid-area: home; justify-content: flex-end; }
.fixture-row .fixture-team.away { grid-area: away; justify-content: flex-start; }
.fixture-row .fixture-score {
  grid-area: score;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 48px;
  text-align: center;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
}
.fixture-row .fixture-meta {
  grid-area: meta;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.fixture-row .fixture-when {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* =====================================================
   Refinamientos visuales — broadcasting FIFA, iOS-compacto
   ===================================================== */

/* Highlight de filas clasificadas: barrita lateral suave */
.standings-table tr.row-qualified-direct td:first-child,
.standings-table tr.row-qualified-3rd td:first-child {
  position: relative;
}
.standings-table tr.row-qualified-direct td:first-child::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 2px; height: 55%;
  background: var(--color-success);
  border-radius: 2px;
}
.standings-table tr.row-qualified-3rd td:first-child::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 2px; height: 55%;
  background: var(--color-info);
  border-radius: 2px;
}

/* Fixtures de grupo: tipografía tabular, hover sutil */
.fixture-row {
  grid-template-columns: 1fr 64px 1fr; /* 3 columnas = áreas home/score/away (sin columna fantasma) */
  font-variant-numeric: tabular-nums;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.fixture-row:hover {
  background: var(--tint-1);
  border-color: var(--tint-4);
}
.fixture-row .fixture-team {
  font-weight: 600;
  letter-spacing: 0.2px;
  gap: 0.4rem;
  overflow: visible;
  white-space: nowrap;
}
.fixture-row .t-flag { font-size: 1.05rem; line-height: 1; }
.fixture-row .t-code { font-size: 0.85rem; }
.fixture-row .fixture-score {
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: transparent;
  border: none;
}
.fixture-row .fixture-score.has-score {
  background: rgba(22, 163, 74, 0.08);
  border: 1px solid rgba(22, 163, 74, 0.3);
  color: var(--text-main);
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
}

/* LIVE: borde rojo suave + pulse mínimo (sin barrido de gradiente) */
.fixture-row.is-live {
  border-color: rgba(220, 38, 38, 0.3);
  background: rgba(220, 38, 38, 0.04);
}

/* Bracket: nombres NO se cortan, rompen a 2 líneas */
.team-display-info {
  flex: 1;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
  line-height: 1.2;
  font-size: 0.82rem;
}
.team-display-info .team-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.match-card-team-row {
  align-items: center;
  gap: 0.5rem;
}
.match-score-badge {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  width: 30px;
}

/* Partido LIVE en bracket: borde rojo, sin animación de pulse */
.match-card.is-live {
  border-color: rgba(220, 38, 38, 0.35);
  box-shadow:
    0 0 0 1px rgba(220, 38, 38, 0.2),
    0 8px 24px rgba(220, 38, 38, 0.08);
}

/* Gran Final: tinte dorado sutil + trofeo estático */
.match-card.is-final {
  border-color: rgba(202, 138, 4, 0.35);
  background: linear-gradient(160deg,
    rgba(202, 138, 4, 0.06),
    var(--bg-glass) 60%);
  box-shadow:
    0 0 0 1px rgba(202, 138, 4, 0.18),
    0 10px 28px rgba(202, 138, 4, 0.08);
}
.match-card.is-final::after {
  content: "🏆";
  position: absolute;
  top: -8px;
  right: -6px;
  font-size: 1.2rem;
  filter: drop-shadow(0 4px 8px rgba(202, 138, 4, 0.35));
}

.match-score-badge.winner {
  color: var(--color-gold);
}

/* Pestañas activas: pill de fondo, sin barra inferior */
.nav-tab.active {
  background: var(--color-accent-strong);
  color: var(--color-on-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border-left: none;
}

/* Stat de partidos jugados: dorado sólido */
.stat-val {
  color: var(--color-gold);
  font-weight: 700;
}

#btn-refresh {
  font-size: 0.82rem;
  padding: 0.5rem 0.85rem;
}
#btn-refresh:hover {
  background: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  color: var(--color-on-accent);
}

.standings-table tbody tr {
  transition: background var(--transition-fast);
}
.standings-table tbody tr:hover {
  background: var(--tint-1);
}

/* Sin animación de entrada: el contenido aparece directo y se actualiza en su
   lugar (sin parpadeo ni repetición al recargar). Las animaciones de cambios
   reales —destello de gol (.just-updated) y pulso de "en vivo"— sí siguen. */

.bracket-round .round-title {
  color: var(--text-main);
}
.bracket-round .round-title.accent-title {
  color: var(--color-gold);
}

/* =====================================================
   Calendario (lista cronológica)
   ===================================================== */

.schedule-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.schedule-filter-btn {
  background: var(--tint-1);
  border: 1px solid var(--border-glass);
  color: var(--text-muted);
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.schedule-filter-btn:hover {
  background: var(--tint-3);
  color: var(--text-main);
}
.schedule-filter-btn.active {
  background: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  color: var(--color-on-accent);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.schedule-team-row {
  margin-top: 0.6rem;
  margin-bottom: 1rem;
}
.schedule-team-select {
  width: 100%;
  background: var(--tint-1);
  border: 1px solid var(--border-glass);
  color: var(--text-main);
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.55rem 2.2rem 0.55rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--transition-fast);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.schedule-team-select:hover { background-color: var(--tint-3); }
.schedule-team-select:focus-visible {
  outline: 2px solid var(--color-accent-strong);
  outline-offset: 2px;
}
.schedule-team-select:not([data-default="true"]):not([value=""]) { color: var(--text-main); }

/* Menú desplegable "📅 Calendario" — combina .ics + Suscribir */
.schedule-export-menu {
  position: relative;
  margin-left: auto;
}
.schedule-export-menu > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.schedule-export-menu > summary::-webkit-details-marker { display: none; }
.schedule-export-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  min-width: 220px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  padding: 0.4rem;
  z-index: 50;
}
.export-option {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text-main);
  text-decoration: none;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
}
.export-option:hover { background: var(--tint-2); }
.export-option-icon { font-size: 1.25rem; line-height: 1; flex-shrink: 0; }
.export-option strong {
  display: block;
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 0.9rem;
}
.export-option small {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

.team-profile-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-bottom: 1.25rem;
}
.team-profile-actions .btn {
  width: 100%;
  text-align: center;
  text-decoration: none;
}

/* =====================================================
   Estadísticas del torneo
   ===================================================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 1rem;
}
.stats-wrap { display: flex; flex-direction: column; gap: 1rem; }

/* Tira de KPIs */
.stats-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
}
.kpi {
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 1.1rem 1rem;
  text-align: center;
  box-shadow: var(--shadow-main);
}
.kpi-num {
  font-family: var(--font-header);
  font-weight: 800;
  font-size: 2.2rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-main);
}
.kpi-of { font-size: 1.05rem; color: var(--text-muted); font-weight: 600; }
.kpi-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-top: 0.45rem;
  font-weight: 600;
}
.kpi-bar {
  margin-top: 0.65rem;
  height: 5px;
  background: var(--tint-2);
  border-radius: 999px;
  overflow: hidden;
}
.kpi-bar > span { display: block; height: 100%; background: var(--color-gold); border-radius: 999px; }

/* Distribución de resultados */
.stat-block { padding: 1.25rem 1.5rem; }
.dist-bar {
  display: flex;
  height: 30px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--tint-2);
  font-size: 0.72rem;
  font-weight: 700;
}
.dist-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  min-width: 0;
  transition: width var(--transition-fast);
}
.dist-seg.decided, .dist-dot.decided { background: #2563eb; }
.dist-seg.draw, .dist-dot.draw { background: #64748b; }
.dist-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-top: 0.85rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.dist-legend strong { color: var(--text-main); }
.dist-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

/* Rankings con barra */
.rank-list { display: flex; flex-direction: column; }
.rank-row {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1.5fr) minmax(44px, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.15rem;
  border-bottom: 1px solid var(--tint-1);
}
.rank-row:last-child { border-bottom: none; }
.rank-pos {
  font-family: var(--font-header);
  font-weight: 700;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
}
.rank-team {
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-bar {
  height: 6px;
  background: var(--tint-2);
  border-radius: 999px;
  overflow: hidden;
}
.rank-bar > span { display: block; height: 100%; background: var(--color-gold); border-radius: 999px; }
.rank-sub { font-size: 0.72rem; color: var(--text-muted); text-align: right; }
.rank-val {
  font-family: var(--font-header);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 1.6rem;
}
.rank-val small { font-weight: 400; font-size: 0.62rem; color: var(--text-muted); }

/* Tabla de goleadores (top 15) — estilo editorial: columnas PJ/Ast/Goles,
   líneas finas y acento dorado para el líder. Ancho acotado y centrado para
   que en pantallas anchas los números no queden lejos del nombre. */
.scorers-block { margin-bottom: 1.25rem; }
.scorers-list { width: 100%; }
/* Columnas numéricas fraccionales: la tabla llena el ancho disponible y los
   números se reparten (PJ/Ast/Goles) como una tabla de liga, en vez de quedar
   apretados en una columna chica. En móvil colapsan a sus anchos mínimos. */
.scorer-head,
.scorer-row {
  display: grid;
  grid-template-columns: 2.4rem 2rem minmax(6rem, 3fr) minmax(2.5rem, 1fr) minmax(2.5rem, 1fr) minmax(2.8rem, 1fr);
  align-items: center;
  gap: 0.5rem 0.7rem;
}
.scorer-head {
  padding: 0 0.4rem 0.55rem;
  border-bottom: 1px solid var(--border-glass);
}
.scorer-head span {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}
.scorer-head span.scorer-head-name { grid-column: 1 / 4; text-align: left; }
.scorer-row {
  position: relative;
  padding: 0.6rem 0.4rem;
  border-bottom: 1px solid var(--border-glass);
}
.scorer-row:last-child { border-bottom: none; }
.scorer-row[role="button"] { cursor: pointer; }
.scorer-row[role="button"]:hover { background: var(--tint-1); }
.scorer-pos {
  font-family: var(--font-header);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text-muted);
  text-align: center;
}
.scorer-row.is-lead .scorer-pos { color: var(--color-gold); }
.scorer-row.is-lead::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background: var(--color-gold);
}
.scorer-flag { font-size: 1.45rem; text-align: center; line-height: 1; }
.scorer-id { min-width: 0; display: flex; flex-direction: column; }
.scorer-name {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scorer-country { font-size: 0.7rem; color: var(--text-muted); margin-top: 1px; }
.scorer-stat {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 0.92rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--text-main);
}
.scorer-stat.is-zero { color: var(--text-muted); font-weight: 500; }
.scorer-goals {
  font-family: var(--font-header);
  font-weight: 800;
  font-size: 1.4rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--text-main);
}
.scorer-row.is-lead .scorer-goals { color: var(--color-gold); }
.scorers-empty { color: var(--text-muted); font-size: 0.85rem; padding: 0.5rem 0.15rem; }
/* Móvil: columnas compactas (nombre flexible, stats fijas y angostas) para que
   GOLES no se salga del borde. El desktop usa columnas fraccionales. */
@media (max-width: 560px) {
  .scorer-head,
  .scorer-row {
    grid-template-columns: 1.6rem 1.5rem minmax(0, 1fr) 1.7rem 1.7rem 2rem;
    gap: 0.45rem;
  }
  .scorer-flag { font-size: 1.25rem; }
  .scorer-goals { font-size: 1.2rem; }
  .scorer-row.is-lead::before { left: -0.25rem; }
}

/* Marcadores más comunes (chips) */
.score-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.score-chip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--tint-1);
  border: 1px solid var(--border-glass);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
}
.score-chip strong { font-family: var(--font-header); font-variant-numeric: tabular-nums; }
.score-chip span { font-size: 0.75rem; color: var(--text-muted); }
.stat-card .card-glass-header h2 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}
.stat-card .card-glass-header { margin-bottom: 0.75rem; }
/* Tarjeta combinada: "Más goles" + "Mayor diferencia" en una sola */
.featured-match + .featured-match { margin-top: 0.85rem; }
.featured-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}
.stat-match {
  background: var(--tint-1);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
}
.stat-match-stage {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  margin-bottom: 0.4rem;
}
.stat-match-line {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.6rem;
  align-items: center;
}
.stat-match-team {
  font-weight: 600;
  text-align: right;
  font-size: 0.95rem;
}
.stat-match-team.away { text-align: left; }
.stat-match-score {
  font-family: var(--font-header);
  font-weight: 800;
  font-size: 1.4rem;
  font-variant-numeric: tabular-nums;
  padding: 0.2rem 0.6rem;
  background: var(--tint-3);
  border-radius: var(--radius-sm);
}

/* =====================================================
   Equipo ganador — nombre en bold en cualquier vista
   ===================================================== */
.is-winner,
.is-winner .t-name,
.is-winner .t-code {
  font-weight: 800;
}

/* =====================================================
   Badge de duración (AET / Penales) y pronóstico (odds)
   ===================================================== */
.duration-badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.18rem 0.55rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 999px;
  vertical-align: middle;
}
.duration-badge.dur-aet {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.duration-badge.dur-pen {
  background: rgba(124, 58, 237, 0.12);
  color: #6d28d9;
  border: 1px solid rgba(124, 58, 237, 0.3);
}
:root[data-theme="dark"] .duration-badge.dur-aet { color: #fbbf24; }
:root[data-theme="dark"] .duration-badge.dur-pen { color: #c4b5fd; }

.hero-odds {
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border-glass);
}
.hero-odds-bar {
  display: flex;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--tint-1);
}
.odds-seg.home { background: var(--color-accent); }
.odds-seg.draw { background: var(--text-muted); opacity: 0.5; }
.odds-seg.away { background: var(--color-gold); }
.hero-odds-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.hero-odds-labels strong {
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
  margin-right: 0.25rem;
}

.schedule-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.schedule-day-title {
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: capitalize;
  color: var(--text-main);
  padding-bottom: 0.6rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--tint-3);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.schedule-day.is-today .schedule-day-title {
  color: var(--color-gold);
}
.today-pill {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(202, 138, 4, 0.12);
  color: var(--color-gold);
  border: 1px solid rgba(202, 138, 4, 0.4);
  text-transform: uppercase;
}

.schedule-rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sched-row {
  display: grid;
  /* La columna de estado es FIJA (no `auto`): si no, "PROGRAMADO" vs "FT"
     cambian su ancho y mueven el marcador de fila a fila. Con ancho fijo, la
     caja del marcador queda en la misma posición en todas las filas. */
  grid-template-columns: 88px 80px minmax(0, 1fr) 95px minmax(0, 1fr) 110px;
  grid-template-areas:
    "time stage home score away status"
    "venue venue venue venue venue venue";
  align-items: center;
  gap: 0.4rem 0.7rem;
  padding: 0.65rem 0.85rem;
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.sched-row:hover {
  border-color: var(--border-glass-hover);
  background: var(--tint-1);
}
.sched-row.is-live {
  border-color: rgba(220, 38, 38, 0.3);
  background: rgba(220, 38, 38, 0.04);
}

.sched-time {
  grid-area: time;
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-main);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sched-stage {
  grid-area: stage;
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.sched-home, .sched-away {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.2;
}
.sched-home { grid-area: home; justify-content: flex-end; text-align: right; }
.sched-away { grid-area: away; justify-content: flex-start; }
.sched-home .t-flag, .sched-away .t-flag {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}
.sched-home .t-name, .sched-away .t-name {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.2;
}
.t-name.placeholder {
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.8rem;
}

/* La celda del marcador apila la caja + el pie de penales, centrados. La CAJA
   sigue siendo de una sola línea (mismo tamaño en todas las filas); el "X-Y
   pen." va debajo, fuera de la caja, para no agrandarla. */
.sched-score-cell {
  grid-area: score;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
}
.sched-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  background: var(--tint-1);
  border: 1px solid var(--border-glass);
  min-width: 80px;
}
.sched-pen {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  text-transform: uppercase;
  white-space: nowrap;
  /* Fuera del flujo: cuelga bajo la caja sin agrandar la celda (así la caja
     queda alineada con los nombres y no "sube"). En móvil vuelve al flujo. */
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
}
.sched-score.has-score {
  background: rgba(22, 163, 74, 0.08);
  border-color: rgba(22, 163, 74, 0.3);
  color: var(--text-main);
}
.sched-score.is-live {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.3);
}
.sched-score .dash {
  color: var(--text-muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.sched-score .winner { color: var(--color-success); }
.sched-score .loser  { opacity: 0.55; }

.sched-status { grid-area: status; justify-self: end; }

.sched-venue {
  grid-area: venue;
  font-size: 0.72rem;
  color: var(--text-muted);
  padding-top: 0.3rem;
  border-top: 1px dashed var(--tint-1);
}

.schedule-empty,
.groups-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 3rem 1rem;
  font-style: italic;
}
.groups-empty { grid-column: 1 / -1; }

@media (max-width: 768px) {
  /* 3 filas: meta arriba, teams+score en medio, venue abajo */
  .sched-row {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
      "time   stage  status"
      "home   score  away"
      "venue  venue  venue";
    gap: 0.35rem 0.5rem;
    padding: 0.7rem 0.85rem;
  }
  .sched-time   { text-align: left;  font-size: 0.78rem; }
  .sched-stage  { text-align: center; font-size: 0.72rem; color: var(--text-muted); justify-self: center; }
  .sched-status { justify-self: end; }
  .sched-home   { justify-content: flex-end;   text-align: right; }
  .sched-away   { justify-content: flex-start; text-align: left;  }
  .sched-score-cell { justify-self: center; }
  /* En móvil el pie de penales va en el flujo (la caja no compite con una línea
     de venue al lado, así que no "sube"); revertir la posición absoluta. */
  .sched-pen { position: static; transform: none; margin-top: 1px; }
  .sched-venue  { text-align: left; font-size: 0.72rem; opacity: 0.75; padding-top: 0.2rem; border-top: 1px dashed var(--border-glass); margin-top: 0.2rem; }
}

/* =====================================================
   Hero "Próximo partido"
   ===================================================== */
.next-match-hero {
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-main);
  position: relative;
  overflow: hidden;
}
.next-match-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-gold));
}

/* Varios partidos a la vez: el contenedor pasa a rejilla y cada panel es la
   tarjeta (2 en pantalla ancha, apilados en móvil). */
.next-match-hero.multi {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  overflow: visible;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.next-match-hero.multi::before { display: none; }
/* Guard: que .multi (display:grid) nunca gane sobre [hidden] */
.next-match-hero[hidden] { display: none; }
.hero-pane {
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow-main);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.hero-pane::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-gold));
}
.hero-pane.is-fav {
  border-color: rgba(202, 138, 4, 0.4);
  background: linear-gradient(135deg, rgba(202, 138, 4, 0.06) 0%, var(--bg-glass) 60%);
}
.hero-pane.is-fav::before {
  background: linear-gradient(90deg, var(--color-gold), #fde047);
  height: 3px;
}
@media (max-width: 560px) {
  .hero-pane { padding: 0.95rem 1rem; }
}
.hero-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.85rem;
}
.hero-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--tint-3);
  color: var(--text-main);
  text-transform: uppercase;
}
.hero-badge.live {
  background: rgba(220, 38, 38, 0.12);
  color: var(--color-danger);
  border: 1px solid rgba(220, 38, 38, 0.3);
  animation: pulseLive 1.6s infinite;
}
.hero-stage {
  font-weight: 600;
  color: var(--text-main);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.7rem;
}
.hero-countdown {
  margin-left: auto;
  font-weight: 700;
  color: var(--color-gold);
  font-variant-numeric: tabular-nums;
}
.hero-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-header);
  font-weight: 700;
  font-size: 1.15rem;
}
.hero-team {
  min-width: 0;
  overflow-wrap: anywhere;
}
.hero-team.home { text-align: right; }
.hero-team.away { text-align: left; }
.hero-vs {
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}
.hero-score {
  font-size: 1.6rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.hero-score .dash {
  color: var(--text-muted);
  font-weight: 400;
  padding: 0 0.2rem;
}
.hero-venue {
  margin-top: 0.7rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}
@media (max-width: 560px) {
  .next-match-hero { padding: 0.95rem 1rem; }
  .hero-teams { font-size: 0.95rem; }
  .hero-score { font-size: 1.3rem; }
}

/* =====================================================
   Banner "API caída"
   ===================================================== */
.api-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.25);
  color: var(--color-danger);
  padding: 0.65rem 0.95rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  font-size: 0.85rem;
  font-weight: 500;
}
.api-banner[hidden] { display: none; }
.banner-close {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  opacity: 0.7;
}
.banner-close:hover { opacity: 1; }

/* =====================================================
   Skeleton loading
   ===================================================== */
.skeleton-card {
  height: 280px;
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg, var(--tint-1) 0%, var(--tint-2) 50%, var(--tint-1) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =====================================================
   Equipo favorito ⭐ — toggle + resaltado dorado
   ===================================================== */
.fav-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--text-muted);
  padding: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast), transform var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}
.fav-toggle:hover {
  color: var(--color-gold);
  transform: scale(1.2);
}
.fav-toggle[aria-pressed="true"] {
  color: var(--color-gold);
}

/* Standings: fila del equipo favorito tintada */
.standings-table tr.is-fav td {
  background: rgba(202, 138, 4, 0.05);
}
.standings-table tr.is-fav .team-cell { font-weight: 700; }

/* Filas de calendario y fixtures de grupo: barrita dorada + tinte */
.fixture-row.is-fav,
.sched-row.is-fav {
  box-shadow: inset 3px 0 0 0 var(--color-gold);
  background: rgba(202, 138, 4, 0.04);
  border-color: rgba(202, 138, 4, 0.3);
}

/* Tarjeta del bracket con favorito */
.match-card.is-fav {
  border-color: rgba(202, 138, 4, 0.4);
  box-shadow:
    0 0 0 1px rgba(202, 138, 4, 0.3),
    0 4px 14px rgba(202, 138, 4, 0.12);
}

/* Hero del próximo partido si involucra al favorito */
.next-match-hero.is-fav {
  border-color: rgba(202, 138, 4, 0.4);
  background: linear-gradient(135deg, rgba(202, 138, 4, 0.06) 0%, var(--bg-glass) 60%);
}
.next-match-hero.is-fav::before {
  background: linear-gradient(90deg, var(--color-gold), #fde047);
  height: 3px;
}

/* =====================================================
   Botón "Hoy" (separado del grupo de filtros)
   ===================================================== */
.schedule-jump {
  margin-left: auto;
}

/* Toggle de tema */
.theme-toggle {
  background: var(--bg-glass);
  border: 1px solid var(--border-glass);
  color: var(--text-main);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: all var(--transition-fast);
}
.theme-toggle:hover {
  background: var(--bg-hover);
  border-color: var(--border-glass-hover);
}
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: inline; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: inline; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ---- Respetar usuarios con motion reducido ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}

/* =====================================================
   Perfil de equipo — diálogo
   ===================================================== */
[data-team-link] {
  cursor: pointer;
  transition: color var(--transition-fast);
}
[data-team-link]:hover { color: var(--color-accent-strong); }
[data-team-link]:focus-visible {
  outline: 2px solid var(--color-accent-strong);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Foco visible para filas/tarjetas de partido (abren el detalle con teclado). */
[data-match-id][role="button"]:focus-visible {
  outline: 2px solid var(--color-accent-strong);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Importante: garantiza que dialogs cerrados estén ocultos
   (algunos navegadores móviles no aplican display:none por defecto). */
dialog:not([open]) { display: none !important; }

.team-profile-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  border: 1px solid var(--border-glass);
  background: var(--bg-secondary);
  color: var(--text-main);
  border-radius: var(--radius-md);
  padding: 0;
  width: min(560px, 92vw);
  max-height: 88vh;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
}
.team-profile-dialog *,
.team-profile-dialog *::before,
.team-profile-dialog *::after { box-sizing: border-box; }
.team-profile-dialog::backdrop {
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(4px);
}
.team-profile-dialog > div {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 88vh;
  background: var(--bg-secondary);
}

.team-profile-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-glass);
  background: var(--tint-1);
}
.team-profile-flag { font-size: 2.5rem; line-height: 1; }
.team-profile-title { flex: 1; min-width: 0; }
.team-profile-title h2 {
  margin: 0;
  font-family: var(--font-header);
  font-size: 1.4rem;
}
.team-profile-title p {
  margin: 0.15rem 0 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.team-profile-fav,
.team-profile-close {
  background: transparent;
  border: 1px solid var(--border-glass);
  color: var(--text-main);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.team-profile-fav { font-size: 1.3rem; color: var(--color-gold); }
.team-profile-fav:hover,
.team-profile-close:hover { background: var(--tint-2); }

.team-profile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-glass);
  font-variant-numeric: tabular-nums;
}
.team-profile-stats > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0.25rem;
  background: var(--tint-1);
  border-radius: var(--radius-sm);
}
.team-profile-stats strong {
  font-family: var(--font-header);
  font-size: 1.1rem;
  font-weight: 700;
}
.team-profile-stats span {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.team-profile-stats > div.big { background: var(--tint-3); }

.team-profile-section {
  padding: 1rem 1.5rem;
}
.team-profile-section h3 {
  margin: 0 0 0.6rem;
  font-family: var(--font-header);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
}
.team-profile-section + .team-profile-section { padding-top: 0; }

.team-profile-matches {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.team-profile-match {
  background: var(--tint-1);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  border-left: 3px solid transparent;
}
.team-profile-match.win  { border-left-color: var(--color-success, #16a34a); }
.team-profile-match.loss { border-left-color: var(--color-danger,  #dc2626); }
.team-profile-match.draw { border-left-color: var(--text-muted); }
.tpm-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.35rem;
}
.tpm-line {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.95rem;
}
.tpm-vs  { color: var(--text-muted); font-weight: 600; font-size: 0.8rem; }
.tpm-opp { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpm-score {
  font-family: var(--font-header);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tpm-venue {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/* =====================================================
   Detalle de partido (dialog) — tarjeta unificada
   ===================================================== */
[data-match-id] { cursor: pointer; }

.md-card {
  position: relative;
  padding: 1.75rem 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.md-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  background: var(--tint-1);
  border: 1px solid var(--border-glass);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.md-close:hover { background: var(--tint-2); }

.md-stage-pill {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.9rem;
  background: var(--tint-2);
  color: var(--text-muted);
  border-radius: 999px;
  font-family: var(--font-header);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.md-hero {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.75rem;
  align-items: center;
  padding: 0.5rem 0 1rem;
  border-bottom: 1px solid var(--border-glass);
}

.md-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.md-flag {
  font-size: 3rem;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18));
}
.md-name {
  font-family: var(--font-header);
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--text-muted);
}
.md-side.is-winner .md-name {
  font-weight: 800;
  color: var(--text-main);
}
.md-tla {
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 1.5px;
  font-weight: 600;
  opacity: 0.7;
}

.md-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.5rem;
}
.md-score-line {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-header);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.md-score-n {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--text-muted);
}
.md-score-n.is-winner { color: var(--text-main); }
.md-score-sep {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--text-muted);
}
.md-vs {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 2px;
}
.md-score-ht {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.md-score-pen { font-size: 0.82rem; font-weight: 600; }
.md-status { margin-top: 0.15rem; }

.md-section {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.md-section h3 {
  margin: 0;
  font-family: var(--font-header);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  font-weight: 700;
}
.md-meta { gap: 0.5rem; }
.md-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.88rem;
  padding: 0.55rem 0.85rem;
  background: var(--tint-1);
  border-radius: var(--radius-sm);
}
.md-row > span { color: var(--text-muted); font-weight: 500; }
.md-row > strong { font-weight: 700; text-align: right; }

.md-refs { display: flex; flex-direction: column; gap: 0.4rem; }
.md-ref {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--tint-1);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.85rem;
}
.md-ref-type {
  color: var(--text-muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 600;
}
.md-ref-name { font-weight: 600; font-size: 0.9rem; }
.md-ref-name small { color: var(--text-muted); font-weight: 400; }

/* Mobile tweaks */
@media (max-width: 480px) {
  .md-card { padding: 1.5rem 1rem 1rem; gap: 1rem; }
  .md-hero { grid-template-columns: 1fr auto 1fr; gap: 0.5rem; }
  .md-flag { font-size: 2.4rem; }
  .md-name { font-size: 0.85rem; }
  .md-score-n { font-size: 2rem; }
  .md-score-sep { font-size: 1.4rem; }
}