/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* ==========================================================================
   Sistema de diseño: tokens (paleta "azul profesional", densidad híbrida).
   Todo el sitio referencia estas variables -> cambiar acá se propaga a todo.
   Tema oscuro: el bloque :root[data-theme="dark"] de abajo redefine solo los colores. data-theme lo pone el
   script del <head> de index.html (y js/tema.js al cambiarlo): 'dark'/'light' elegido por el usuario o, en
   modo automático, según la preferencia del sistema (prefers-color-scheme).
   ========================================================================== */
:root {
  color-scheme: light dark; /* controles nativos (select, input, scrollbars) siguen el tema; ver data-theme */

  /* Superficies / fondos */
  --fondo: #f7f8fa;
  --superficie: #ffffff;
  --fondo2: #eef2f7; /* header de tabla, toggles */
  --fondo-panel: #fafbfc; /* paneles sutiles */

  /* Texto (jerarquía) */
  --texto: #1a2230;
  --texto-2: #45505f; /* secundario: labels, summaries, subtítulos */
  --tenue: #6b7685; /* muted: país, notas, jornada, placeholders */

  /* Acento */
  --acento: #2563eb;
  --acento-hover: #1d4ed8;
  --acento-suave: #eef4ff; /* fondo hover/selección azul muy claro */
  --futbol: #b71c1c; /* rojo fútbol, solo identidad Libertadores */

  /* Líneas / bordes */
  --linea: #e5e9f0;
  --linea-fuerte: #cdd6e0;
  --borde: #e5e9f0; /* alias legacy */

  /* Semántico (balance gana/pierde/iguala) */
  --gana: #15803d;
  --pierde: #b42318;
  --iguala: #b7791f;
  --gana-bg: #eaf6ec;
  --gana-bg-h: #ddefe0;
  --pierde-bg: #fbecec;
  --pierde-bg-h: #f6dede;
  --iguala-bg: #fbf6e3;
  --iguala-bg-h: #f6edcf;

  /* Tipografía */
  --fs-xs: .72rem;
  --fs-sm: .82rem;
  --fs-md: .9rem;
  --fs-lg: 1.1rem;
  --fs-xl: 1.3rem;
  --lh: 1.45;
  --peso-medio: 600;
  --peso-fuerte: 700;

  /* Espaciado */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;

  /* Radios */
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* Sombras */
  --sombra-1: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .07);
  --sombra-2: 0 6px 20px rgba(16, 24, 40, .13);
  --sombra-panel: 0 8px 24px rgba(0, 0, 0, .18); /* paneles desplegables */

  /* Podio de copa (Campeón / Subcampeón) */
  --podio-bg: #fffaf0;
  --podio-borde: #f2dfa8;
  --podio-lbl: #8a6d00;

  /* Cursor de teclado del desplegable rico */
  --resaltado: rgba(0, 0, 0, .07);
  --resaltado-fuerte: rgba(0, 0, 0, .11);

  /* Densidad de tabla (híbrida: compacta) */
  --cel-y: .38rem;
  --cel-x: .6rem;

  /* Ancho UNIFICADO de la columna Equipo en las tablas históricas (general, copas nacionales e
     internacionales) para que al cambiar de competencia no se corran Pos ni Equipo. Ajustable acá. */
  --col-equipo: 16rem;
}

:root[data-theme="light"] {
  color-scheme: light;
}

/* Tema oscuro: mismas variables, otros valores. El acento se usa como texto (enlaces) y como fondo de
   botones activos con texto blanco -> un azul intermedio que contrasta en ambos usos. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --fondo: #0f141b;
  --superficie: #171d26;
  --fondo2: #1f2733;
  --fondo-panel: #141a22;

  --texto: #e6eaf0;
  --texto-2: #b8c1cd;
  --tenue: #8b96a6;

  --acento: #4b8cf5;
  --acento-hover: #6ea2f7;
  --acento-suave: #1b2a44;
  --futbol: #c62828;

  --linea: #2a3340;
  --linea-fuerte: #3b4656;
  --borde: #2a3340;

  --gana: #2fa866;
  --pierde: #f0645a;
  --iguala: #d9a441;
  --gana-bg: #14281c;
  --gana-bg-h: #1a3424;
  --pierde-bg: #2e1a1c;
  --pierde-bg-h: #3a2124;
  --iguala-bg: #2a2516;
  --iguala-bg-h: #352f1b;

  --sombra-1: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);
  --sombra-2: 0 6px 20px rgba(0, 0, 0, .5);
  --sombra-panel: 0 8px 24px rgba(0, 0, 0, .55);

  --podio-bg: #262113;
  --podio-borde: #54461c;
  --podio-lbl: #e0b84a;

  --resaltado: rgba(255, 255, 255, .07);
  --resaltado-fuerte: rgba(255, 255, 255, .12);
}

/* Escudos con trazos oscuros (negro sobre transparente) se pierden en el fondo oscuro: halo sutil. */
:root[data-theme="dark"] img.escudo,
:root[data-theme="dark"] img.escudo-grande,
:root[data-theme="dark"] img.escudo-vs,
:root[data-theme="dark"] img.club-chip-escudo {
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, .35));
}

/* Reserva siempre el lugar de la barra de scroll vertical: si no, al pasar de una vista corta (ej. Palmarés
   de Copa Argentina) a una larga (Tabla histórica) aparece la barra, se angosta el viewport y todo el
   contenido centrado (.app-main) se corre unos píxeles en horizontal. */
html {
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texto);
  background: var(--fondo);
  line-height: var(--lh);
}

a {
  color: var(--acento);
}

a:hover {
  color: var(--acento-hover);
}

/* Encabezados de sección (las vistas emiten <h2> de título y <h3>/<h4> internos). */
.app-main > h2,
.app-main h2 {
  font-size: 1.45rem;
  font-weight: var(--peso-fuerte);
  letter-spacing: -.01em;
  color: var(--texto);
  margin: 0 0 .8rem;
}

/* Título de una competencia con flechas a la edición anterior / siguiente (crearTituloEdiciones, js/main.js). */
.app-main h2.titulo-ed {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.titulo-ed-txt {
  min-width: 0;
}

.ed-nav {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  height: 2rem;
  padding: 0 .65rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-pill);
  background: var(--superficie);
  color: var(--texto-2);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--peso-medio);
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
}

.ed-nav-chev {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ed-nav:hover:not(:disabled) {
  background: var(--acento-suave);
  border-color: var(--acento);
  color: var(--acento);
}

.ed-nav:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

.ed-nav:disabled {
  opacity: .35;
  cursor: default;
}

/* Entidad organizadora del torneo, bajo el título (tabla-historica.js). */
.app-main h2.titulo-ed:has(+ .organizador:not([hidden])) {
  margin-bottom: .25rem;
}

.organizador {
  margin: 0 0 .8rem;
  font-size: var(--fs-sm);
  color: var(--tenue);
}

.organizador-lbl {
  font-weight: var(--peso-medio);
  color: var(--texto-2);
}

/* Angosto: solo la flecha (la edición queda en el tooltip). */
@media (max-width: 600px) {
  .app-main h2.titulo-ed {
    gap: var(--sp-2);
  }

  .ed-nav {
    width: 2rem;
    padding: 0;
    justify-content: center;
  }

  .ed-nav-etq {
    display: none;
  }
}

.app-main h3 {
  font-size: var(--fs-lg);
  font-weight: var(--peso-fuerte);
  color: var(--texto);
}

.app-header {
  padding: .9rem 1.5rem;
  border-bottom: 1px solid var(--linea);
  background: var(--superficie);
}

.app-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}

/* Escudo de la AFA a la izquierda del título (en em: sigue el tamaño del h1 en pantallas chicas). */
.app-logo {
  flex: none;
  height: 1.9em;
  width: auto;
}

/* Arriba a la derecha: selector de tema y, en pantallas angostas, el botón del menú plegable. */
.app-header-acciones {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* Botón ☰ del menú plegable: solo en pantallas angostas (ver @media max-width: 600px). */
.nav-toggle {
  display: none;
}

/* Selector de tema (Automático / Claro / Oscuro): tres botones-ícono en grupo, arriba a la derecha. */
.tema-sel {
  flex: none;
  display: inline-flex;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-pill);
  padding: 2px;
  background: var(--fondo2);
}

.tema-sel button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.6rem;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--tenue);
  cursor: pointer;
}

.tema-sel button:hover {
  color: var(--acento);
}

.tema-sel button[aria-pressed="true"] {
  background: var(--superficie);
  color: var(--texto);
  box-shadow: var(--sombra-1);
}

.tema-sel svg {
  width: 1rem;
  height: 1rem;
}

.app-header h1 {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 0.55rem;
  font-size: var(--fs-xl);
  font-weight: var(--peso-fuerte);
  letter-spacing: -.01em;
}

.app-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem .1rem;
}

.app-nav a {
  color: var(--texto-2);
  text-decoration: none;
  padding: .3rem .5rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  font-weight: var(--peso-medio);
}

.app-nav a:hover {
  color: var(--acento);
  background: var(--acento-suave);
}

/* Submenús "Copas nacionales" / "Copas internacionales" en el nav (hover + focus-within, sin JS). */
.nav-dropdown {
  position: relative;
  display: inline-block;
}

.nav-dropdown-btn {
  color: var(--texto-2);
  background: none;
  border: none;
  font: inherit;
  font-size: var(--fs-md);
  font-weight: var(--peso-medio);
  cursor: pointer;
  padding: .3rem .5rem;
  border-radius: var(--r-sm);
}

.nav-dropdown:hover .nav-dropdown-btn,
.nav-dropdown:focus-within .nav-dropdown-btn,
.nav-dropdown.abierto .nav-dropdown-btn {
  color: var(--acento);
  background: var(--acento-suave);
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  min-width: 15rem;
  background: var(--superficie);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-2);
  padding: .3rem 0;
  /* Copas nacionales tiene ~26 ítems: si no entra en la ventana, el menú scrollea. */
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.abierto .nav-dropdown-menu { /* 'abierto': lo abrió el botón (js/main.js) */
  display: block;
}

/* Tras elegir un ítem, JS marca 'cerrado' para forzar el cierre aunque el foco/hover sigan dentro
   (vence a las reglas de arriba por venir después, misma especificidad). Se limpia al salir el mouse. */
.nav-dropdown.cerrado .nav-dropdown-menu {
  display: none;
}

/* Pantallas táctiles: el hover del dedo es momentáneo y el foco no siempre llega al botón (Safari), así que el menú se
   abría y cerraba solo. Ahí lo abre ÚNICAMENTE el botón (clase 'abierto'). */
@media (hover: none) {
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu {
    display: none;
  }

  .nav-dropdown:not(.abierto):hover .nav-dropdown-btn:not(.active),
  .nav-dropdown:not(.abierto):focus-within .nav-dropdown-btn:not(.active) {
    color: var(--texto-2);
    background: none;
  }

  .nav-dropdown.abierto .nav-dropdown-menu {
    display: block;
  }

  .nav-dropdown.abierto .nav-dropdown-btn {
    color: var(--acento);
    background: var(--acento-suave);
  }
}

.nav-dropdown-menu a {
  display: block;
  margin: 0;
  padding: .4rem .85rem;
  white-space: nowrap;
  color: var(--texto-2);
  font-size: var(--fs-md);
}

.nav-dropdown-menu a:hover {
  background: var(--acento-suave);
  color: var(--acento);
}

.app-nav a.active,
.app-nav .nav-dropdown-btn.active {
  color: var(--acento);
  background: var(--acento-suave);
  font-weight: var(--peso-fuerte);
}

/* Ítem separado del resto del submenú, al comienzo (ej. "Tabla histórica (todas las copas)"). */
.nav-dropdown-menu a.nav-dropdown-sep {
  border-bottom: 1px solid var(--linea);
  margin-bottom: .3rem;
  padding-bottom: .55rem;
}

.app-main {
  max-width: 1040px;
  margin: 0 auto;
  padding: 1.5rem;
}

.app-footer {
  max-width: 1040px;
  margin: 2rem auto;
  padding: 1rem 1.5rem 0;
  border-top: 1px solid var(--linea);
  color: var(--tenue);
  font-size: var(--fs-sm);
}

.placeholder {
  color: var(--tenue);
  font-style: italic;
}

.error {
  color: var(--pierde);
}

/* Controles de filtro */
.controles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* Fila de filtros de una edición (selector + chip "EN CURSO" a su derecha). */
.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  margin-bottom: .6rem;
}

.filtros .en-curso {
  margin: 0;
}

.filtro {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  background: var(--superficie);
  color: var(--texto);
}

.filtro:focus,
.filtro:focus-visible {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}

.filtro.torneo-sel {
  flex: 1 1 260px;
  min-width: 200px;
}

/* Desplegable de torneos PERSONALIZADO (Tabla histórica): botón + panel plegable con el escudo y el
   nombre del campeón alineados a la derecha de cada certamen (un <select> nativo no admite imágenes). */
.torneo-dd {
  position: relative;
  flex: 1 1 340px;
  min-width: 220px;
}

.dd-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  text-align: left;
}

.dd-btn .dd-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dd-caret {
  margin-left: auto;
  color: var(--texto-2);
}

.dd-btn.abierto .dd-caret {
  transform: rotate(180deg);
}

/* <select> nativo reemplazado por el desplegable rico (js/select_rico.js): sigue en el DOM, oculto. */
select[data-rico] {
  display: none !important;
}

/* Desplegable que reemplaza a un <select>: ancho de su opción más larga (lo fija select_rico.js), no el de
   los selectores de torneo/edición, que ocupan el espacio disponible de la barra. */
.torneo-dd.dd-compacto {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

.torneo-dd.dd-compacto .filtro.torneo-sel {
  min-width: 0;
}

.dd-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--superficie);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-sm);
  box-shadow: var(--sombra-panel);
}

.dd-group {
  position: sticky;
  top: 0;
  z-index: 1; /* por encima de las filas que pasan por debajo: los escudos (con filter/halo) se dibujaban encima */
  background: var(--superficie);
  color: var(--texto-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--linea);
}

.dd-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  border-bottom: 1px solid var(--linea);
}

.dd-item:last-child {
  border-bottom: none;
}

.dd-item:hover {
  background: var(--acento-suave);
}

.dd-item.activo {
  background: var(--acento-suave);
  font-weight: 600;
}

/* Cursor de teclado del desplegable rico (independiente del ítem activo). */
.dd-item.resaltado {
  background: var(--resaltado);
}

.dd-item.resaltado.activo {
  background: var(--resaltado-fuerte);
}

.dd-nom {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dd-champ {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
  flex: 0 0 auto;
  max-width: 48%;
  color: var(--texto-2);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.dd-champ .dd-camp-n {
  overflow: hidden;
  text-overflow: ellipsis;
}

.dd-champ .escudo {
  height: 18px;
  width: 18px;
  object-fit: contain;
}

.dd-champ.vacio {
  font-style: italic;
  opacity: 0.7;
}

.filtro.chk {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--texto-2);
  cursor: pointer;
}

/* Selector de copas (tabla histórica de copas) */
.copas-selector {
  margin-bottom: 0.75rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  padding: 0.5rem 0.75rem;
  background: var(--fondo-panel);
}

.copas-selector > summary {
  cursor: pointer;
  font-weight: var(--peso-medio);
  color: var(--texto-2);
}

.copas-selector .sel-acciones {
  display: flex;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.copas-selector .sel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 0.2rem 1rem;
}

.copas-selector .sel-grid .filtro.chk {
  margin: 0;
}

button.mini {
  font: inherit;
  font-size: var(--fs-sm);
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-sm);
  background: var(--superficie);
  color: var(--texto-2);
  cursor: pointer;
}

/* "Ver 10 más" bajo una tabla de ranking (botonVerMas en main.js). */
button.mini.ver-mas {
  margin-top: .5rem;
}

button.mini:hover {
  background: var(--acento-suave);
  border-color: var(--acento);
  color: var(--acento);
}

/* Tabla de posiciones */
.tabla-wrap {
  overflow-x: auto;
}

table.posiciones {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--fs-md);
  background: var(--superficie);
}

table.posiciones th,
table.posiciones td {
  padding: var(--cel-y) var(--cel-x);
  border-bottom: 1px solid var(--linea);
}

table.posiciones th {
  position: sticky;
  top: 0;
  background: var(--fondo2);
  color: var(--texto-2);
  font-weight: var(--peso-medio);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

table.posiciones th.sorted {
  color: var(--acento);
}

table.posiciones .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

table.posiciones .txt {
  text-align: left;
}

/* Tablas de posiciones/estadística (Pos+Equipo+números, historial por rival): layout FIJO para que
 * los anchos de columna sean IGUALES entre tablas comparables (ej. Zona A y Zona B de un torneo, que
 * con layout automático quedaban distintas según el largo de los nombres). La columna de texto toma un
 * ancho fijo (los nombres largos hacen wrap) y las numéricas se reparten el resto por igual. NO se
 * aplica a las tablas de partidos (Fecha/Torneo/Local/Res/Visitante), que necesitan ancho por contenido. */
/* Layout AUTOMÁTICO, igual que las tablas de copas (.tabla-lib / .posiciones): la columna de nombre
   crece a su contenido y NO envuelve; las numéricas quedan compactas. Antes era table-layout:fixed,
   que en pantallas angostas comprimía el nombre a una columna angosta -> nombres largos en dos filas
   (rompía la convergencia cosmética con las copas). En mobile la tabla desborda y scrollea en
   horizontal dentro de su contenedor (.tabla-wrap / .club-salida). Los grupos/zonas van apilados
   full-width (.grupos-grid 1fr), así que no necesitan el ancho fijo para alinearse. */
table.posiciones.stats {
  table-layout: auto;
}

/* Nombre de club en una sola línea (convergencia cosmética con las copas): nunca en dos filas. */
table.posiciones.stats .txt {
  white-space: nowrap;
}

/* Numéricas compactas y sin wrap -> altura de fila estable y columnas alineadas entre tablas. Ancho
   ajustado para dejar más espacio a la columna Equipo (menos nombres partidos en dos filas). */
table.posiciones.stats .num {
  width: 3.2rem;
  white-space: nowrap;
}

/* #12: sub-tabla de partidos vs un rival (Fecha/Torneo/Local/Res./Visitante/Ganador). Con layout
 * automático la columna Fecha se ensanchaba y comprimía las de texto. Layout FIJO con Fecha y Res.
 * angostas -> Torneo/Local/Visitante/Ganador se reparten el resto (más anchas). */
table.posiciones.sub-partidos {
  table-layout: fixed;
}

table.posiciones.sub-partidos th:nth-child(1),
table.posiciones.sub-partidos td:nth-child(1) { /* Fecha */
  width: 6rem;
  white-space: nowrap;
}

table.posiciones.sub-partidos th:nth-child(2),
table.posiciones.sub-partidos td:nth-child(2) { /* Torneo (competición + · Fecha N): ancho + wrap */
  width: 9rem;
  white-space: normal;
}

table.posiciones.sub-partidos th:nth-child(4),
table.posiciones.sub-partidos td:nth-child(4) { /* Res. */
  width: 3.4rem;
}

table.posiciones tbody tr:hover {
  background: var(--acento-suave);
}

/* Mano a mano */
.controles .vs {
  align-self: center;
  color: var(--tenue);
  font-weight: var(--peso-medio);
}

.nota {
  color: var(--tenue);
  font-size: var(--fs-sm);
  margin-top: -0.5rem;
}

.resumen {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: var(--fondo2);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  font-weight: var(--peso-medio);
}

.resumen .sub {
  font-weight: 400;
  color: var(--tenue);
}

/* Resumen del Mano a mano: escudos grandes centrados con "vs" + los datos agregados centrados debajo. */
.resumen.mano-resumen {
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}

.mano-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.mano-vs a,
.mano-vs a:hover {
  text-decoration: none;
}

img.escudo-vs {
  display: block;
  height: 64px;
  width: auto;
  max-width: 72px;
  object-fit: contain;
}

.escudo-vs-txt {
  font-size: var(--fs-lg);
  font-weight: var(--peso-fuerte);
  color: var(--texto);
}

.mano-vs-txt {
  font-size: var(--fs-xl);
  font-weight: var(--peso-fuerte);
  color: var(--tenue);
  text-transform: lowercase;
}

.mano-datos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .3rem 1rem;
  text-align: center;
}

/* Selector de provincia (js/provincias.js): desplegable rico con el escudo de la provincia a la derecha.
   Más angosto que el de torneos; en el resumen del histórico de Copas va al extremo derecho, con el
   padding vertical ajustado para que su alto coincida con la línea del resumen. */
.torneo-dd.prov-dd {
  flex: 0 1 260px;
  min-width: 200px;
}

/* Selector de país (js/paises.js): mismo desplegable, con la bandera (4:3, images/flags/) a la derecha. */
.torneo-dd.pais-dd {
  flex: 0 1 240px;
  min-width: 190px;
}

.dd-champ .bandera {
  height: 15px;
  width: 20px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); /* contorno: banderas con blanco (Japón, Inglaterra) */
}

.resumen .prov-dd {
  margin-left: auto;
  font-weight: 400;
}

.resumen .prov-dd .dd-btn {
  padding: .25rem .55rem;
}

/* Jornada ("· Fecha N") junto al nombre del torneo en las tablas de historial */
.jornada {
  color: var(--tenue);
  font-size: .9em;
  white-space: nowrap;
}

/* Campeón / Subcampeón de una copa (arriba del total de partidos) */
.podio {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--podio-bg);
  border: 1px solid var(--podio-borde);
  border-radius: var(--r-md);
}

/* Etiqueta (ícono + "Campeón:"), escudo y nombre CENTRADOS en vertical: sin flex, el .eq-cell
   (inline-flex) de las copas internacionales se alinea por el borde inferior del escudo y el nombre
   queda más alto que la etiqueta. El gap reemplaza los espacios que flex recorta. */
.podio .campeon,
.podio .subcampeon,
.podio .lbl {
  display: inline-flex;
  align-items: center;
}

.podio .campeon,
.podio .subcampeon {
  flex-wrap: wrap;
  gap: .35rem;
}

.podio .campeon {
  font-weight: var(--peso-fuerte);
}

.podio .subcampeon {
  color: var(--texto-2);
}

.podio .lbl {
  color: var(--podio-lbl);
  font-weight: var(--peso-medio);
}

.podio .podio-nota {
  flex-basis: 100%;
  font-size: .85em;
  color: var(--tenue);
  font-style: italic;
}

.podio .escudo {
  vertical-align: middle;
  margin: 0 0.25rem;
}

/* Torneo EN CURSO (ej. Clausura 2026): sin campeón todavía; badge + fecha de corte. */
.en-curso {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.en-curso-badge {
  font-weight: var(--peso-fuerte);
  font-size: .78em;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--gana);
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-pill);
}

.en-curso-corte {
  font-size: .9em;
  color: var(--tenue);
  font-style: italic;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

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

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}


/* Escudos de clubes en tablas y mano a mano (redimensionados para no romper filas) */
.escudo {
  height: 1.25em;
  width: auto;
  max-width: 1.6em;
  vertical-align: middle;
  margin-right: .4em;
  object-fit: contain;
}

/* Marca de nota disciplinaria (partido otorgado/abandonado) junto al marcador en los historiales. */
.nota-disc {
  cursor: help;
  color: var(--acento, #b26a00);
  font-size: .9em;
}

/* Marca (N) de partido en cancha neutral junto al local (mano a mano, ficha de club): grisada y más chica
   para no confundirse con el nombre del club. */
.marca-n {
  cursor: help;
  color: var(--tenue);
  font-size: .85em;
  font-weight: 400;
}

/* Ícono de copa personalizado (#11): reemplaza el 🏆 en el recuadro Campeón/Subcampeón. */
.copa-icono {
  height: 1.35em;
  width: auto;
  max-width: 1.8em;
  vertical-align: middle;
  margin-right: .15em;
  object-fit: contain;
}

/* Nombres de club clickeables (link a su pagina): sin subrayado, heredan color */
td.txt a {
  color: inherit;
  text-decoration: none;
}

td.txt a:hover {
  text-decoration: underline;
}

/* Pagina individual de club */
.club-ficha {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
  margin: .5rem 0 1rem;
  padding: 1rem 1.25rem;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-1);
}

.escudo-grande {
  height: 88px;
  width: auto;
  max-width: 88px;
  object-fit: contain;
}

.club-nombre {
  margin: 0 0 .5rem;
}

/* Fusiones en la ficha del club: columna a la derecha con los escudos (mitad del .escudo-grande) del club
   con el que se fusionó y, debajo y separado por una línea suave, de los clubes de los que proviene. */
/* el bloque de datos toma el ancho libre y se achica (sus .meta-grid envuelven) antes que bajar las fusiones */
.club-ficha:has(.club-fusiones) .club-cab {
  flex: 1 1 0;
  min-width: 240px;
}

.club-fusiones {
  margin-left: auto;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  justify-content: center;
}

.fusion-bloque {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: .4rem .25rem;
}

.fusion-bloque + .fusion-bloque {
  border-top: 1px solid var(--linea);
}

.fusion-lbl {
  font-size: var(--fs-xs);
  color: var(--tenue);
  white-space: nowrap;
}

.fusion-escudos {
  display: flex;
  gap: .5rem;
  justify-content: center;
}

.escudo-fusion {
  height: 44px;
  width: auto;
  max-width: 44px;
  object-fit: contain;
  display: block;
}

/* Variantes (II / III / juveniles): el mismo escudo del club, a menudo 4 o más -> más chicos y de a 4 por fila */
.fusion-variantes {
  flex-wrap: wrap;
  gap: .3rem;
  max-width: calc(4 * 26px + 3 * .3rem);
}

.fusion-variantes .escudo-fusion {
  height: 26px;
  max-width: 26px;
}

/* Apodo del club, bajo el nombre en la ficha. */
.club-apodo {
  margin: -.35rem 0 .55rem;
  font-style: italic;
  opacity: .7;
}

/* Links de metadata (sitio oficial / wikipedia): color estándar. */
.meta-v a {
  color: inherit;
}

.meta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.5rem;
}

.meta-item {
  display: flex;
  flex-direction: column;
}

.meta-k {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  opacity: .6;
}

.meta-v {
  font-weight: 600;
}

/* La tabla de enfrentamientos del club usa table.posiciones.stats (layout automático, nombres sin
   wrap): su contenedor scrollea en horizontal en pantallas angostas en vez de desbordar la página. */
.club-salida {
  overflow-x: auto;
}

/* Historial "Por fecha"/"Por competición": las sub-tablas van dentro de un <details> en .club-salida (font
   1rem), mientras que el detalle "Por rival" va dentro de la tabla posiciones (--fs-md). Igualamos el tamaño
   para que la tipografía de las tres vistas sea idéntica (table.sub-partidos usa .92em relativo). */
.club-salida details.plegable {
  font-size: var(--fs-md);
}

/* Filtros del historial de club: sección colapsable (colapsada por defecto). */
.club-filtros {
  margin: .3rem 0 .6rem;
}

.club-filtros > summary {
  cursor: pointer;
  user-select: none;
  font-weight: var(--peso-medio);
  color: var(--texto-2);
  padding: .35rem 0;
}

.club-filtro {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  cursor: pointer;
}

.club-cb {
  cursor: pointer;
}

/* Filtros en pastillas (js/filtros.js): ficha de club (dentro de un <details>) y Mano a mano (siempre a la vista). El
   panel es una tarjeta; cada eje, un renglón con la etiqueta en una columna fija y sus opciones a la derecha, que bajan
   de renglón sin salirse de su columna. */
.club-controles {
  margin-bottom: 1rem;
}

.club-filtros[open],
.mano-filtros {
  background: var(--fondo-panel);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  padding: 0 .9rem .3rem;
}

.mano-filtros {
  margin-bottom: 1rem;
  padding-top: .2rem;
}

.club-filtros[open] > summary {
  margin: 0 -.9rem .4rem;
  padding: .45rem .9rem;
  border-bottom: 1px solid var(--linea);
}

.filtro-cambios {
  margin-left: .5rem;
  padding: .05rem .5rem;
  border-radius: var(--r-pill);
  background: var(--acento-suave);
  color: var(--acento);
  font-size: var(--fs-xs);
  font-weight: var(--peso-medio);
}

.club-filtros .club-controles {
  margin-bottom: .2rem;
}

.filtro-grupo {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: .3rem .75rem;
  align-items: start;
  padding: .45rem 0;
}

.filtro-grupo + .filtro-grupo {
  border-top: 1px dashed var(--linea);
}

.filtro-etq {
  padding-top: .25rem;
  color: var(--texto-2);
  font-size: var(--fs-sm);
  font-weight: var(--peso-medio);
}

.filtro-opciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  min-width: 0;
}

.filtro-nota {
  color: var(--tenue);
  font-size: var(--fs-xs);
}

/* Cantidad de partidos dentro de una pastilla (localía del Mano a mano). */
.chip-cnt {
  color: var(--tenue);
  font-size: var(--fs-xs);
}

/* Pastilla de filtro: un checkbox real (oculto) dentro de su <label>; marcada = color de acento con ✓. */
.chip-filtro {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: var(--fs-sm);
  line-height: 1.2;
  padding: .24rem .65rem .24rem .5rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-pill);
  background: var(--superficie);
  color: var(--tenue);
  cursor: pointer;
  user-select: none;
  transition: background-color .12s, border-color .12s, color .12s;
}

.chip-filtro > input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.chip-filtro::before {
  content: '';
  display: inline-block;
  width: .8em;
  text-align: center;
  font-weight: var(--peso-fuerte);
}

.chip-filtro:hover {
  border-color: var(--acento);
  color: var(--texto-2);
}

.chip-filtro:has(> input:checked) {
  background: var(--acento-suave);
  border-color: var(--acento);
  color: var(--texto);
}

.chip-filtro:has(> input:checked)::before {
  content: '✓';
  color: var(--acento);
}

.chip-filtro:has(> input:indeterminate)::before {
  content: '–';
  color: var(--acento);
}

.chip-filtro:has(> input:focus-visible) {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

/* 'Todas' (internacionales): separada de las copas por una línea vertical. */
.chip-filtro.chip-todas {
  font-weight: var(--peso-medio);
  margin-right: .4rem;
}

.chip-filtro.chip-todas::after {
  content: '';
  position: absolute;
  right: calc(-.4rem - 1px);
  top: 15%;
  bottom: 15%;
  border-right: 1px solid var(--linea-fuerte);
}

.chip-filtro.chip-todas:has(> input:indeterminate) {
  border-color: var(--acento);
  border-style: dashed;
  color: var(--texto);
}

@media (max-width: 600px) {
  .filtro-grupo {
    grid-template-columns: 1fr;
    gap: .3rem;
  }

  .filtro-etq {
    padding-top: 0;
  }
}

table.posiciones tfoot .total td {
  font-weight: var(--peso-fuerte);
  border-top: 2px solid var(--linea-fuerte);
}

/* Resumen del panel de un rival (perfil de club): cajas centradas partidos · G · E · P · goles. */
.rival-resumen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin: .6rem 0 .8rem;
}

.rr-caja {
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
  padding: .3rem .8rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-sm);
  background: var(--superficie);
  color: var(--texto-2);
  font-size: var(--fs-sm);
}

.rr-caja b {
  font-size: var(--fs-lg);
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.rr-caja.g {
  border-color: var(--gana);
  background: var(--gana-bg);
}

.rr-caja.e {
  border-color: var(--iguala);
  background: var(--iguala-bg);
}

.rr-caja.p {
  border-color: var(--pierde);
  background: var(--pierde-bg);
}

.rr-caja.g,
.rr-caja.g b {
  color: var(--gana);
}

.rr-caja.e,
.rr-caja.e b {
  color: var(--iguala);
}

.rr-caja.p,
.rr-caja.p b {
  color: var(--pierde);
}

/* Color de balance por rival (verde gana, rojo pierde, amarillo igualado). Tonos
   suaves para no saturar; el hover los intensifica apenas. */
table.posiciones tbody tr.bal-g {
  background: var(--gana-bg);
}

table.posiciones tbody tr.bal-p {
  background: var(--pierde-bg);
}

table.posiciones tbody tr.bal-e {
  background: var(--iguala-bg);
}

table.posiciones tbody tr.bal-g:hover {
  background: var(--gana-bg-h);
}

table.posiciones tbody tr.bal-p:hover {
  background: var(--pierde-bg-h);
}

table.posiciones tbody tr.bal-e:hover {
  background: var(--iguala-bg-h);
}

/* Columna G-P (ganados − perdidos) del historial: resaltada en verde y negrita. */
table.posiciones td.dif-gp {
  color: var(--gana);
  font-weight: var(--peso-fuerte);
}

/* Columna de posición (Pos / #): MISMO ancho en todas las tablas y siempre en una sola línea. El
   selector vence al width de las numéricas de las tablas .stats (table.posiciones.stats .num, más
   específico) para que el ancho sea uniforme también ahí. */
table.posiciones th.pos,
table.posiciones td.pos,
table.posiciones.stats th.pos,
table.posiciones.stats td.pos,
.tabla-lib th.pos,
.tabla-lib td.pos {
  width: 3rem;
  white-space: nowrap;
}

/* Columna de Puntos: el VALOR siempre en negrita (en las tablas de copas ya lo da .titulos). */
td.pts {
  font-weight: var(--peso-fuerte);
}

/* Ancho UNIFICADO de la columna Equipo entre las tres tablas históricas (general de ligas, copas
   nacionales e internacionales): al cambiar de competencia, Pos (3rem) y Equipo no se corren. El nombre
   ENVUELVE si supera el ancho (en vez de ensanchar la columna o forzar dos filas irregulares). La clase
   'col-unif' va solo en la tabla histórica principal (no en las de grupo). Vence al white-space:nowrap
   de .stats. La columna Equipo es la 2ª en las tres (Pos es la 1ª). */
table.posiciones.stats.col-unif td.txt,
table.posiciones.stats.col-unif th.txt,
.tabla-lib.col-unif th:nth-child(2),
.tabla-lib.col-unif td:nth-child(2) {
  width: var(--col-equipo);
  white-space: normal;
}

/* Selector de modo del perfil de club (Enfrentamientos / Máximas goleadas) */
.club-modos {
  display: inline-flex;
  gap: 0;
  margin-bottom: .75rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-md);
  overflow: hidden;
}

.modo-btn {
  border: 0;
  background: var(--fondo2);
  padding: .45rem .9rem;
  cursor: pointer;
  font: inherit;
  color: var(--texto-2);
}

.modo-btn:hover {
  background: var(--acento-suave);
  color: var(--acento);
}

.modo-btn + .modo-btn {
  border-left: 1px solid var(--linea-fuerte);
}

.modo-btn.activo {
  background: var(--acento);
  color: #fff;
  font-weight: var(--peso-medio);
}

.modo-btn.activo:hover {
  background: var(--acento-hover);
  color: #fff;
}

/* Sub-toggle (ej. Palmarés: Por club / Cronológico). Más chico que .modo-btn, estilo "pill". */
.sub-modos {
  display: flex;
  gap: .4rem;
  margin: .2rem 0 .8rem;
}

.sub-modo-btn {
  border: 1px solid var(--linea-fuerte);
  background: var(--fondo2);
  padding: .3rem .7rem;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: .9em;
  color: var(--texto-2);
}

.sub-modo-btn:hover {
  background: var(--acento-suave);
  color: var(--acento);
}

.sub-modo-btn.activo {
  background: var(--acento);
  color: #fff;
  border-color: var(--acento);
  font-weight: var(--peso-medio);
}

/* Máximas goleadas a favor / en contra (dos tablas lado a lado) */
.goleadas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 1.5rem;
}

.goleadas-bloque h4 {
  margin: 0 0 .5rem;
}

/* El bloque scrollea en horizontal si la tabla no entra (evita que la columna Torneo se pise con el
   nombre del Local al comprimirse). */
.goleadas-bloque {
  overflow-x: auto;
}

/* Columna Torneo (2ª: competición + · Fecha N): ancho mínimo para no superponerse al nombre del Local. */
.goleadas-bloque table.posiciones th:nth-child(2),
.goleadas-bloque table.posiciones td:nth-child(2) {
  min-width: 8rem;
}

/* Columna Res. (4ª) de las máximas goleadas: no envuelve (ej. "10-0" en una sola línea) y con ancho
   holgado para resultados de dos dígitos. */
.goleadas-bloque table.posiciones th:nth-child(4),
.goleadas-bloque table.posiciones td:nth-child(4) {
  white-space: nowrap;
  min-width: 3.4rem;
}

.goleadas-bloque td.bal-g {
  color: var(--gana);
  font-weight: var(--peso-fuerte);
}

.goleadas-bloque td.bal-p {
  color: var(--pierde);
  font-weight: var(--peso-fuerte);
}

/* Desplegable de partidos por rival en la pagina de club */
.oculto {
  display: none;
}

.rival-cel {
  cursor: pointer;
  user-select: none;
}

.rival-row:hover .caret {
  color: var(--texto-2);
}

.detalle-cont {
  padding: 0 0 .5rem 1.5rem;
  background: var(--fondo-panel);
}

table.sub-partidos {
  margin: .25rem 0;
  font-size: .92em;
  width: 100%;
}

table.sub-partidos th {
  font-weight: 600;
  opacity: .75;
}

/* ==========================================================================
   Tabla histórica: torneo con fases separadas (grupos / eliminatoria / etc.)
   ========================================================================== */
.tabla-wrap h3.fase-titulo {
  margin: 1.5rem 0 .5rem;
  padding-bottom: .3rem;
  border-bottom: 2px solid var(--linea);
  font-size: var(--fs-lg);
  font-weight: var(--peso-fuerte);
  color: var(--texto);
}

.tabla-wrap h3.fase-titulo.aparte {
  margin-top: 2rem;
  border-bottom-color: var(--linea-fuerte);
  color: var(--texto-2);
}

.tabla-wrap h4 {
  margin: .75rem 0 .35rem;
  font-size: var(--fs-md);
  font-weight: var(--peso-medio);
  color: var(--texto-2);
}

.grupos-grid {
  display: grid;
  grid-template-columns: 1fr; /* tablas de grupo SIEMPRE apiladas (una debajo de otra), nunca lado a lado */
  gap: 1rem 1.5rem;
}

/* Tablas de grupo/zona apiladas: layout FIJO para que las columnas queden ALINEADAS entre los distintos
   grupos (mismo ancho de columna en todas, al tener el mismo ancho total). A diferencia de la tabla
   principal (auto, el nombre crece a su contenido), acá el nombre ENVUELVE dentro de su columna en vez
   de ensancharla —lo que desalinearía los grupos— o desbordar. Aplica a ligas (.stats) y copas (.posiciones).
   La regla del nombre debe ir DESPUÉS de .stats .txt (misma especificidad) para vencerla. */
.grupos-grid table.posiciones {
  table-layout: fixed;
}

/* Numéricas de ancho fijo (excepto Pos, que ya tiene el suyo) para que el nombre (Equipo) tome el
   sobrante en vez de repartirse por igual con los números -> nombre legible y grupos alineados. Cubre
   las tablas de copas nacionales (.posiciones sin .stats, que no traen ancho de numéricas). */
.grupos-grid table.posiciones .num:not(.pos) {
  width: 3.2rem;
}

.grupos-grid table.posiciones .txt {
  white-space: normal;
}

.grupo-bloque h4 {
  margin: 0 0 .35rem;
}

/* Fase eliminatoria: filas de cruce */
.cruces {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-bottom: .5rem;
}

/* Cruces compactos: sin recuadro por partido, filas densas (menos scroll). */
.cruces {
  gap: 0;
}

.cruce {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .6rem;
  max-width: 760px; /* más ancho: evita que los nombres largos rompan en dos líneas */
  padding: .05rem 0;
  line-height: 1.35;
}

.cruce .lado {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
}

.cruce .lado:first-child {
  justify-content: flex-end;
  text-align: right;
}

.cruce .lado.gana {
  font-weight: 700;
}

.cruce .lado.gana {
  font-weight: 700;
}

/* Nombres de club en podio y cruces: mismo estilo simple que en las tablas (sin color/subrayado
   de link; subrayado solo al pasar el mouse). */
.podio a,
.cruce a {
  color: inherit;
  text-decoration: none;
}

.podio a:hover,
.cruce a:hover {
  text-decoration: underline;
}

.cruce .marcador {
  width: 7rem; /* ancho FIJO (incluye definición por penales) -> alinea a los equipos */
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: var(--peso-medio);
  color: var(--texto);
}

.cruce .escudo {
  vertical-align: middle;
}

/* Lado LOCAL (invertido: nombre + escudo): el margen del escudo va a la IZQUIERDA (separa nombre y
   escudo) y no a la derecha, para que quede simétrico con el visitante y pegado al marcador. */
.cruce .lado:first-child .escudo {
  margin-right: 0;
  margin-left: .4em;
}

/* Ícono ÚNICO de expandir/colapsar en todo el sitio: triángulo de tamaño FIJO (no escala con la letra del
   título) que gira 90° al abrir. Lo usan todos los <details> (en lugar del marcador nativo, que escalaba con
   la fuente y variaba de un título a otro) y los toggles armados a mano con <span class="caret"> (Palmarés,
   filas de rival en la ficha, clubes en Campeones; abierto = clase .abierto). */
details > summary {
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

details > summary::before,
.caret {
  content: '';
  display: inline-block;
  flex: none;
  width: 0;
  height: 0;
  border-left: 7px solid currentColor;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  margin-right: .5em;
  vertical-align: .1em;
  color: var(--tenue);
  transition: transform .15s;
}

details[open] > summary::before,
.caret.abierto {
  transform: rotate(90deg);
}

/* Secciones colapsables (tabla acumulada, otras fases) */
details.plegable {
  margin: 1rem 0 .5rem;
}

details.plegable > summary {
  cursor: pointer;
  user-select: none;
  font-weight: var(--peso-medio);
  color: var(--texto-2);
  padding: .35rem 0;
}

details.plegable[open] > summary {
  margin-bottom: .5rem;
}

/* Fechas (jornadas/días) expandibles de una liga: densas, con divisor sutil entre una y otra. */
details.plegable.ronda {
  margin: 0;
  border-top: 1px solid var(--borde, #eee);
}

details.plegable.ronda > summary {
  font-weight: 500;
  padding: .3rem .25rem;
}

details.plegable.ronda[open] > summary {
  margin-bottom: .2rem;
}

details.plegable.ronda .tabla-copa {
  margin: 0 0 .5rem;
}

/* Evolución de posiciones por fecha (js/evolucion.js): botones + chips de clubes + gráfico SVG con tooltip. */
details.plegable.evolucion {
  margin-top: 1.5rem;
}

details.plegable.evolucion > summary {
  font-size: var(--fs-lg);
  font-weight: var(--peso-fuerte);
  color: var(--texto);
}

.evo-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  margin-bottom: .5rem;
}

.evo-btn {
  font-size: var(--fs-sm);
  padding: .25rem .6rem;
}

.evo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-bottom: .75rem;
}

.evo-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font: inherit;
  font-size: var(--fs-sm);
  line-height: 1.2;
  padding: .2rem .55rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--tenue);
  cursor: pointer;
}

.evo-chip:hover {
  border-color: var(--acento);
  color: var(--texto-2);
}

.evo-chip.on {
  background: var(--superficie);
  border-color: var(--linea-fuerte);
  color: var(--texto);
  font-weight: var(--peso-medio);
}

.evo-chip:focus-visible,
.evo-capa:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

.evo-chip .escudo {
  width: 16px;
  height: 16px;
  margin: 0;
}

.evo-chip:not(.on) .escudo {
  opacity: .6;
}

.evo-graf {
  position: relative;
  width: 100%;
}

.evo-svg {
  display: block;
  overflow: visible;
}

.evo-ejes .grid {
  stroke: var(--linea-fuerte);
  stroke-width: 1;
}

.evo-ejes .grid.sutil {
  stroke: var(--linea);
}

.evo-ejes text {
  fill: var(--tenue);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.evo-ejes .eje-y {
  text-anchor: end;
  dominant-baseline: central;
}

.evo-ejes .eje-x {
  text-anchor: middle;
}

.evo-serie {
  transition: opacity .12s;
}

.evo-serie.tenue {
  opacity: .15;
}

.evo-cruz {
  stroke: var(--tenue);
  stroke-width: 1;
}

.evo-punto {
  stroke: var(--superficie);
  stroke-width: 2;
}

.evo-capa {
  fill: transparent;
  cursor: crosshair;
}

.evo-tip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  min-width: 15rem;
  max-width: min(26rem, 100%);
  padding: .45rem .6rem;
  background: var(--superficie);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-2);
  font-size: var(--fs-sm);
  color: var(--texto-2);
}

.evo-tip-tit {
  font-weight: var(--peso-fuerte);
  color: var(--texto);
  margin-bottom: .25rem;
}

.evo-tip-fila {
  display: grid;
  grid-template-columns: 2.2em 16px 1fr auto;
  column-gap: .4rem;
  align-items: center;
  padding: .1rem 0;
}

.evo-tip-pos,
.evo-tip-pts {
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

.evo-tip-pts {
  text-align: right;
}

.evo-tip-res {
  grid-column: 3 / -1;
  color: var(--tenue);
  font-size: var(--fs-xs);
}

.evo-tip-fila.hist {
  grid-template-columns: 18px 1fr auto;
}

/* Evolución del historial entre dos clubes (js/historial_graf.js): leyenda arriba del gráfico. */
details.plegable.historial {
  margin: .5rem 0 1rem;
}

.detalle-cont details.plegable.historial {
  margin-top: .25rem;
}

.hist-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.2rem;
  align-items: center;
  margin-bottom: .4rem;
  font-size: var(--fs-sm);
  color: var(--texto-2);
}

.hist-leyenda > span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.hist-leyenda b {
  color: var(--texto);
}

.hist-leyenda .escudo {
  width: 16px;
  height: 16px;
  margin: 0;
}

.evo-nota {
  margin: .4rem 0 0;
  color: var(--tenue);
  font-size: var(--fs-xs);
}

/* ==========================================================================
   Campeones (palmarés)
   ========================================================================== */
table.palmares .club-row {
  cursor: pointer;
}

/* Ancho de columnas: la de Club se lleva el espacio amplio (para el nombre completo); las 4 numéricas
   (Ligas/Copas/Internacional/Total) van uniformes y angostas (nth-child n+3). Pos, mínima. */
table.palmares {
  table-layout: fixed;
}

table.palmares th:nth-child(1),
table.palmares td:nth-child(1) {
  width: 3.5rem; /* Pos */
}

table.palmares th:nth-child(n+3),
table.palmares td:nth-child(n+3) {
  width: 6.5rem; /* las 4 numéricas, todas iguales */
}

/* Vista CRONOLÓGICA de Campeones (Año · [Tipo] · Competición · Campeón): columnas auto-ajustadas al
   contenido; la columna "Tipo" se acota (con table-layout fijo de la vista por-club absorbía el sobrante y
   quedaba desmesuradamente ancha). */
table.palmares-crono .tipo-col {
  width: 4rem;
  white-space: nowrap;
}

table.palmares-crono th:first-child,
table.palmares-crono td:first-child {
  width: 4rem; /* Año */
}

/* La columna Club (2ª) NO lleva width: absorbe el resto del ancho (table-layout: fixed). */
table.palmares .club-cel {
  display: flex;
  align-items: center;
  gap: .15rem;
}

table.palmares .club-row:hover {
  background: var(--acento-suave);
}

table.palmares tr.detalle-row td {
  background: var(--fondo-panel);
  padding: .5rem .75rem;
}

/* Llaves internacionales (js/views/llaves.js): resultado de cada llave / fase de grupos en el detalle de un club. */
.gana-llave {
  color: var(--gana);
  font-weight: var(--peso-medio);
  white-space: nowrap;
}

.pierde-llave {
  color: var(--pierde);
  white-space: nowrap;
}

.llaves-detalle h4 {
  margin: var(--sp-2) 0 var(--sp-1);
}

.llaves-detalle td:first-child { /* edición ('Copa Libertadores 1984') en un renglón */
  white-space: nowrap;
}

.titulos-detalle {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* #18: bloque de palmarés en la ficha del club (reusa los chips de la vista Campeones). */
.club-palmares {
  margin: .6rem 0 1rem;
}

.club-palmares h3 {
  margin: 0 0 .4rem;
}

/* Palmarés colapsable: el h3 es el toggle; el cuerpo se oculta al colapsar. */
.club-palmares .palmares-cab {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: .3rem;
}

.club-palmares .palmares-cab .caret {
  margin-right: calc(.5em - .3rem); /* el gap del flex ya separa: mismo espacio que en los <summary> */
}

.club-palmares.colapsado .palmares-cuerpo {
  display: none;
}

.club-palmares .titulos-bloque {
  margin: .3rem 0;
}

.titulos-lbl {
  font-weight: var(--peso-medio);
  color: var(--texto-2);
  margin-right: .25rem;
}

.titulo-chip {
  display: inline-block;
  margin: .15rem .25rem .15rem 0;
  padding: .12rem .5rem;
  background: var(--fondo2);
  border: 1px solid var(--linea);
  border-radius: var(--r-pill);
  font-size: .85em;
  color: var(--texto-2);
  text-decoration: none;
}

.titulo-chip:hover {
  background: var(--acento-suave);
  border-color: var(--acento);
  color: var(--acento);
}

/* Miniatura del trofeo (competiciones.js miniCopa): en los chips de títulos y en Efemérides. */
.copa-mini {
  height: 1.35em;
  width: auto;
  vertical-align: middle;
  margin-right: .3rem;
}

.titulo-chip .copa-mini {
  margin: -.1em .3rem -.1em -.15rem; /* no agranda el chip */
}

.efem-detalle .copa-mini {
  height: 2.5rem;
  margin-right: .45rem;
}

/* --- Vista Clubes: grilla de chips (escudo + nombre completo + localidad/provincia) --- */
.clubes-controles {
  align-items: center;
  gap: .5rem .75rem;
  margin-bottom: 1rem;
}

.clubes-controles .sub-modos {
  margin: 0;
}

/* 'Orden' + Alfabético / Fecha de fundación: un solo bloque (no se parte al envolver la barra). */
.clubes-orden {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* Buscador de clubes: ancho cómodo en escritorio; en pantallas angostas, todo el renglón. */
.clubes-buscar {
  flex: 0 1 16rem;
  min-width: 10rem;
}

@media (max-width: 600px) {
  .clubes-buscar {
    flex-basis: 100%;
  }
}

.clubes-cuenta {
  color: var(--tenue);
  font-size: var(--fs-sm);
}

.clubes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: .5rem;
}

.clubes-divisor {
  grid-column: 1 / -1;
  margin: .9rem 0 .1rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--linea-fuerte);
  font-size: var(--fs-lg);
  font-weight: var(--peso-fuerte);
  color: var(--texto-2);
}

.clubes-divisor:first-child {
  margin-top: 0;
}

.club-chip {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .5rem .7rem;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  color: var(--texto);
  text-decoration: none;
  min-width: 0;
}

a.club-chip:hover {
  background: var(--acento-suave);
  border-color: var(--acento);
}

/* El chip entero es el enlace: sin subrayado en ningún dato al pasar el mouse (le gana a reglas genéricas
   de enlaces como `.lib-vista a:hover`). Lo usan Clubes y Efemérides (chipClub en clubes_ui.js). */
a.club-chip,
a.club-chip:hover,
a.club-chip * {
  text-decoration: none;
}

.club-chip-escudo {
  flex: none;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.club-chip-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.club-chip-nombre {
  font-weight: var(--peso-medio);
  font-size: var(--fs-md);
  line-height: 1.25;
}

a.club-chip:hover .club-chip-nombre {
  color: var(--acento);
}

.club-chip-lugar,
.club-chip-fund {
  color: var(--tenue);
  font-size: var(--fs-sm);
}

/* País (bandera + nombre) en la 2ª línea del chip: títulos internacionales de Efemérides. */
.club-chip-pais {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.club-chip-pais .bandera {
  width: 16px;
  height: 12px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}

/* --- Vista Copa Libertadores --- */
.tabla-copa {
  width: 100%;
  border-collapse: collapse;
  margin: .2rem 0 .8rem;
  font-size: var(--fs-md); /* homogéneo con table.posiciones (ligas/copas nacionales) */
}

.tabla-copa td {
  padding: .22rem .4rem;
  border-bottom: 1px solid var(--linea);
  vertical-align: middle;
}

.tabla-copa tbody tr:hover {
  background: var(--acento-suave);
}

.tabla-copa .res {
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: var(--peso-medio);
  color: var(--texto);
  width: 3.5rem;
}

/* Columnas de equipo con ancho IGUAL (50% c/u) para que el resultado quede SIEMPRE centrado en la
   tabla, con la misma posición en todas las competiciones (tarea 1). */
.tabla-copa .eq-local,
.tabla-copa .eq-visita {
  width: 50%;
}

/* Divisor entre series de eliminación: cada llave va en su <tbody>; el borde marcado va SOLO en la
   PRIMERA fila del tbody (si no, también resaltaba la línea entre los dos legs de la misma serie). */
.tabla-copa tbody + tbody tr:first-child td {
  border-top: 2px solid var(--linea-fuerte, #b4bcc6);
}

.tabla-copa .eq-local {
  text-align: right;
}

.tabla-copa .eq-visita {
  text-align: left;
}

.eq-cell {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

/* Dentro de eq-cell el gap ya separa escudo y nombre; anulamos el margin propio del escudo. */
.eq-cell .escudo {
  margin: 0;
}

/* Ganador de una llave de eliminación (unificado Libertadores/copas): en negrita. */
.tabla-copa .gana {
  font-weight: 700;
}

/* Links de club en las llaves: color estándar (no azul), como en Libertadores/tablas. */
.tabla-copa a {
  color: inherit;
  text-decoration: none;
}

.tabla-copa a:hover {
  text-decoration: underline;
}

/* Libertadores: el escudo del local va a la DERECHA del nombre (celdaEq lo emite en ese orden), así
   los dos escudos quedan pegados al resultado central. El visitante ya lleva el escudo a la izquierda. */

/* Links de club: sin azul/subrayado (mismo estilo que las tablas de Copas). */
.lib-vista a {
  color: inherit;
  text-decoration: none;
}

.lib-vista a:hover {
  text-decoration: underline;
}

.lib-modos {
  display: flex;
  gap: .4rem;
  margin: .3rem 0 .6rem;
  flex-wrap: wrap;
}

.lib-modos .modo-btn {
  padding: .3rem .75rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-sm);
  background: var(--fondo2);
  color: var(--texto-2);
  cursor: pointer;
  font-size: var(--fs-md);
}

/* Identidad Libertadores: el toggle activo va en rojo fútbol (único uso del acento rojo). */
.lib-modos .modo-btn.activo {
  background: var(--futbol);
  color: #fff;
  border-color: var(--futbol);
}

.tabla-lib {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md); /* homogéneo con table.posiciones (la tabla histórica de ligas) */
  background: var(--superficie);
}

.tabla-lib th, .tabla-lib td {
  padding: var(--cel-y) .45rem;
  border-bottom: 1px solid var(--linea);
  text-align: right;
}

.tabla-lib th {
  background: var(--fondo2);
  color: var(--texto-2);
  font-weight: var(--peso-medio);
  white-space: nowrap;
}

.tabla-lib tbody tr:hover {
  background: var(--acento-suave);
}

.tabla-lib th:nth-child(2), .tabla-lib td:nth-child(2) {
  text-align: left;
}

.tabla-lib .titulos {
  font-weight: var(--peso-fuerte);
}

/* Bandera en las tablas de copas (palmarés por país): el mismo tamaño que en el selector de país. */
.tabla-lib .bandera {
  height: 15px;
  width: 20px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); /* contorno: banderas con blanco (Japón, Inglaterra) */
  margin-right: .4rem;
  vertical-align: -2px;
}

/* Palmarés por país (copas internacionales): la lista de clubes campeones, texto a la izquierda. */
.tabla-lib.tabla-paises td:last-child, .tabla-lib.tabla-paises th:last-child {
  text-align: left;
}

/* Palmarés cronológico (edición -> campeón -> subcampeón, copas nacionales e internacionales): todo texto, alineado a
   la izquierda (la regla general de .tabla-lib alinea a la derecha las columnas numéricas). */
.tabla-lib.tabla-crono th, .tabla-lib.tabla-crono td {
  text-align: left;
}

.lib-anios {
  color: var(--tenue);
  font-size: var(--fs-sm);
}

/* Fecha del partido (DD/MM/YYYY) bajo el marcador en las llaves de eliminación de Copas. */
.copa-fecha {
  display: block;
  color: var(--tenue, #999);
  font-size: .7rem;
  font-weight: normal;
}

/* Marcador de resultado OTORGADO (walkover / jugador inelegible): la balanza lleva la nota en tooltip. */
.lib-awd {
  cursor: help;
  color: var(--pierde);
  font-size: .8em;
}

/* #26: combobox de club con escudos (mano a mano). El <select> nativo no muestra imágenes. */
.combo {
  position: relative;
  display: inline-block;
}

.combo-input {
  min-width: 12rem;
}

/* Mano a mano: los dos comboboxes ocupan TODO el ancho disponible (crecen por igual) para que los
   nombres de club entren cómodos en una sola línea, tanto en el input como en la lista desplegable. */
/* La lista de partidos (table.sub-partidos usa .92em RELATIVO) debe quedar igual que en la ficha de club:
   normalizamos el contenedor a --fs-md (si no, hereda 1rem y la tabla se ve un poco más grande que el resto). */
.mano-salida {
  font-size: var(--fs-md);
}

.mano-controles {
  align-items: center;
}

.mano-controles .combo {
  flex: 1 1 18rem;
  min-width: 0;
}

.mano-controles .combo-input {
  width: 100%;
  box-sizing: border-box;
}

.combo-lista {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 18rem;
  overflow-y: auto;
  background: var(--superficie);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-2);
}

.combo-opt {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .5rem;
  cursor: pointer;
}

.combo-opt:hover {
  background: var(--acento-suave);
}

.combo-vacio {
  padding: .4rem .5rem;
  color: var(--tenue, #999);
}

/* #15: botón de exportar a CSV (reusable en todas las vistas de tablas). */
.btn-csv {
  cursor: pointer;
  border: 1px solid var(--linea-fuerte);
  background: var(--superficie);
  color: var(--texto-2);
  border-radius: var(--r-sm);
  padding: .25rem .6rem;
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.btn-csv .ico-descarga {
  width: 1.1em;
  height: 1.1em;
  margin-right: .3em;
  vertical-align: -.2em;
}

.btn-csv:hover {
  background: var(--acento-suave);
  border-color: var(--acento);
  color: var(--acento);
}

/* Botones del panel de período (Tabla histórica): estilo "control" consistente con .filtro
   (misma altura/borde/radio) y hover de acento como .btn-csv/.mini. Reemplaza a .modo-btn, que
   es la clase de los toggles de sección (fondo gris, sin borde, con estado activo). */
.btn-periodo {
  font: inherit;
  font-size: var(--fs-md);
  padding: .4rem .7rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-sm);
  background: var(--superficie);
  color: var(--texto-2);
  cursor: pointer;
  line-height: 1.2;
}

.btn-periodo:hover {
  background: var(--acento-suave);
  border-color: var(--acento);
  color: var(--acento);
}

.btn-periodo:focus-visible {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}

/* Variante secundaria ("Ver tablas oficiales"): mismo tamaño/forma, menos peso visual. */
.btn-periodo.sec {
  color: var(--tenue);
}

.btn-periodo.sec:hover {
  color: var(--acento);
}

/* #20: nota del total del período. Clase propia (no reusa .nota, cuyo margin-top negativo la comprimía);
   se muestra completa con buen interlineado. */
.periodo-nota {
  color: var(--texto-2);
  font-size: var(--fs-sm);
  line-height: 1.4;
  margin: 0 0 .6rem;
}

/* #20: panel de período (total histórico calculado) en la Tabla Histórica. */
.periodo-panel {
  margin: .3rem 0 .6rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  padding: .1rem .5rem;
  background: var(--fondo-panel);
}

.periodo-panel > summary {
  cursor: pointer;
  padding: .35rem 0;
  font-weight: var(--peso-medio);
  color: var(--texto-2);
}

.periodo-controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  padding: .3rem 0 .5rem;
}

.periodo-rango {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.periodo-in {
  width: 5rem;
}

/* #14: resumen de una edición (campeón + partidos + goles). */
.copa-resumen {
  margin: .2rem 0 .6rem;
}

.copa-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.1rem;
  margin-top: .3rem;
  color: var(--tenue, #555);
  font-size: .9rem;
}

.copa-stats b {
  color: var(--texto, #222);
  font-variant-numeric: tabular-nums;
}

/* Nombre histórico de una edición (ej. Libertadores 1960-64 = "Copa de Campeones de América"). */
/* Nombre OFICIAL de la época de una edición (ej. «Copa de Campeones de América 1962»): encabezado
   prominente sobre el resumen de la edición. */
.copa-nombre-historico {
  color: var(--texto, inherit);
  font-size: var(--fs-lg, 1.15rem);
  font-weight: 700;
  margin: .2rem 0 .3rem;
}

/* Sub-encabezado de fase de una liguilla mostrada como llave (Semifinales / Final). */
h5.liguilla-fase {
  margin: .6rem 0 .2rem;
  font-size: var(--fs-sm);
  color: var(--texto-2);
}

/* País del club (entre paréntesis) en gris tenue, en todas las tablas de Libertadores. Un poco más
   chico (dato secundario) para que nombres como "Estudiantes de La Plata (Argentina)" ocupen menos y
   entren mejor en la columna Equipo. */
.lib-pais {
  color: var(--tenue, #999);
  font-size: .85em;
}

/* Sufijo de la variante de un club (II, A, (juveniles B)…: clubIndex().nombre en clubes_ui.js), en gris y cursiva;
   dentro de un enlace se queda gris (no toma el color del link). */
/* Nombre de un amistoso suelto con cancha / organizador en el título (js/torneos.js torneoCel). */
.con-obs {
  cursor: help;
  text-decoration: underline dotted;
}

.variante {
  color: var(--tenue, #999);
  font-style: italic;
}

/* Coloreo de balance (verde gana / rojo pierde / amarillo igualado) en la tabla histórica,
   mismo criterio que los historiales de club. */
.tabla-lib tr.bal-g {
  background: var(--gana-bg);
}

.tabla-lib tr.bal-p {
  background: var(--pierde-bg);
}

.tabla-lib tr.bal-e {
  background: var(--iguala-bg);
}

.tabla-lib tr.bal-g:hover {
  background: var(--gana-bg-h);
}

.tabla-lib tr.bal-p:hover {
  background: var(--pierde-bg-h);
}

.tabla-lib tr.bal-e:hover {
  background: var(--iguala-bg-h);
}

.tabla-lib td.dif-gp {
  color: var(--gana);
  font-weight: var(--peso-fuerte);
}

/* Tabla final del grupo (antes del desglose de partidos): un poco más compacta y separada. */
.tabla-lib.tabla-grupo {
  margin: .1rem 0 .5rem;
  font-size: .9rem;
  /* #11: layout FIJO + anchos uniformes -> TODAS las tablas de grupo (de todas las ediciones) alinean
     sus columnas entre sí, sin importar el largo de los nombres de club. */
  table-layout: fixed;
}

/* Pos (posición): mismo ancho que en el resto de las tablas (entra "Pos"). */
.tabla-lib.tabla-grupo th:nth-child(1),
.tabla-lib.tabla-grupo td:nth-child(1) {
  width: 3rem;
}

/* Columnas numéricas (PJ, PG, PE, PP, GF, GC, Dif, Pts = 3ª en adelante): ancho fijo uniforme. La
   columna Club (2ª) toma el espacio restante; los nombres largos se ajustan (wrap) sin empujar las
   columnas -> todas las tablas quedan alineadas. */
.tabla-lib.tabla-grupo th:nth-child(n+3),
.tabla-lib.tabla-grupo td:nth-child(n+3) {
  width: 2.3rem;
  white-space: nowrap;
}

/* Ediciones enlazables en el palmarés: heredan el estilo de link de la vista. */
.lib-ed-link {
  cursor: pointer;
}

/* Headers ordenables de la tabla histórica de Libertadores. */
.tabla-lib th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.tabla-lib th.sorted {
  color: var(--acento);
}

/* Fila TOTAL (suma de columnas acumulables) de la tabla histórica de copas internacionales. */
.tabla-lib tr.total td {
  font-weight: var(--peso-fuerte);
  border-top: 2px solid var(--linea-fuerte);
  background: var(--fondo2);
}

/* ==========================================================================
   Responsive: portrait / landscape / anchos angostos.
   Las tablas siempre scrollean en horizontal (.tabla-wrap); en pantallas chicas
   se compacta la densidad y la tipografía redefiniendo los tokens (cascada a todo).
   ========================================================================== */

/* Scroll horizontal fluido de tablas (contenedor común de TODAS las vistas). */
.tabla-wrap {
  -webkit-overflow-scrolling: touch;
}

/* Tablet / pantallas medianas */
@media (max-width: 900px) {
  .app-main {
    padding: 1.15rem;
  }
}

/* Teléfono / portrait angosto */
@media (max-width: 600px) {
  :root {
    /* densidad + tipografía un punto más compactas: cascada a posiciones/copa/lib */
    --cel-x: .45rem;
    --cel-y: .34rem;
    --fs-md: .85rem;
    --fs-lg: 1.02rem;
  }

  .app-header {
    padding: .7rem 1rem;
  }

  .app-header h1 {
    font-size: 1.15rem;
  }

  .app-nav {
    gap: .1rem;
  }

  .app-nav a,
  .nav-dropdown-btn {
    padding: .35rem .55rem;
  }

  /* Menú plegable: la barra de secciones se oculta tras el botón ☰ (js/main.js marca .nav-abierto en el
     encabezado) y, abierta, va en columna con los submenús desplegados en el lugar (no flotantes). */
  .app-header-top {
    align-items: center;
  }

  .app-header h1 {
    margin-bottom: 0;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--r-sm);
    background: var(--fondo2);
    color: var(--texto);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
  }

  .app-header.nav-abierto .nav-toggle {
    background: var(--acento-suave);
    color: var(--acento);
  }

  .app-nav {
    display: none;
  }

  .app-header.nav-abierto .app-nav {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap; /* sin esto, con un submenú largo abierto los ítems pasan a una 2ª columna */
    align-items: stretch;
    margin-top: .6rem;
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
  }

  .app-nav .nav-dropdown {
    display: block;
  }

  .app-nav .nav-dropdown-btn {
    width: 100%;
    text-align: left;
  }

  .app-nav .nav-dropdown-menu {
    position: static;
    min-width: 0;
    max-height: none;
    margin: .1rem 0 .35rem .6rem;
    padding: 0;
    border: 0;
    border-left: 2px solid var(--linea);
    border-radius: 0;
    box-shadow: none;
    background: none;
  }

  .app-nav .nav-dropdown-menu a {
    white-space: normal;
  }

  .app-main {
    padding: 1rem .85rem;
  }

  .app-main > h2,
  .app-main h2 {
    font-size: 1.25rem;
  }

  .btn-periodo {
    padding: .32rem .55rem;
    font-size: var(--fs-sm);
  }

  /* Llaves de eliminación: marcador más angosto para que entren los nombres. */
  .cruce {
    gap: .4rem;
    max-width: 100%;
  }

  .cruce .marcador {
    width: 5.5rem;
  }

  /* Ficha de club: escudo un poco menor y contenido apilado cómodo. */
  .escudo-grande {
    height: 68px;
    max-width: 68px;
  }

  .club-ficha {
    gap: 1rem;
    padding: .85rem 1rem;
  }

  /* Resumen/paneles: menos padding para no comer ancho. */
  .resumen,
  .podio {
    padding: .6rem .8rem;
    gap: .4rem .9rem;
  }
}

/* --- Efemérides (#/efemerides) --- */
.efem-fecha {
  font-size: var(--fs-lg);
  font-weight: var(--peso-fuerte);
  color: var(--texto);
  text-transform: capitalize;
  margin: var(--sp-4) 0 var(--sp-3);
}

.efem-bloque {
  margin-bottom: var(--sp-5);
}

.efem-titulo {
  font-size: var(--fs-md);
  color: var(--texto-2);
  border-bottom: 1px solid var(--linea);
  padding-bottom: var(--sp-1);
  margin-bottom: var(--sp-2);
}

.efem-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.efem-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-3);
  background: var(--fondo-panel);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
}

/* Renglón cuyo club es un chip: el chip ya es la caja -> sin el recuadro del renglón. */
.efem-item:has(> .club-chip, > .efem-chips) {
  padding: 0;
  background: none;
  border: 0;
}

/* Título compartido (co-campeones): los dos chips lado a lado. */
.efem-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.efem-item > a:not(.club-chip),
.efem-item > span:first-child:not(.club-chip, .efem-chips) {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: var(--peso-medio);
}

.efem-detalle {
  color: var(--tenue);
  font-size: var(--fs-sm);
  text-align: right;
}

/* Landscape en teléfonos bajos: recorta el alto del header para ganar viewport. */
@media (max-height: 480px) and (orientation: landscape) {
  .app-header {
    padding: .5rem 1rem;
  }

  .app-header h1 {
    font-size: 1.05rem;
    margin-bottom: .35rem;
  }
}

/* ==========================================================================
   Resumen estadístico (#/resumen, js/views/resumen.js)
   ========================================================================== */
.est-rango {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--texto-2);
  font-size: var(--fs-md);
}

/* Competición: parte de 17rem y crece con el espacio libre de la fila, hasta el ancho de su opción más larga
   (~28rem), sin empujar Restablecer/CSV a otra línea. El panel se ensancha solo (dropdown.js); si la ventana
   no alcanza (celular), los nombres largos pasan a una segunda línea en vez de cortarse. */
.torneo-dd.est-comp {
  flex: 1 1 17rem;
  max-width: min(100%, 28rem);
}

.torneo-dd.est-comp .dd-panel {
  scrollbar-gutter: stable; /* siempre scrollea: el ancho max-content reserva la barra */
}

.torneo-dd.est-comp .dd-nom {
  white-space: normal;
}

/* Indicadores: grilla que se reacomoda sola (3 por fila en desktop, 1-2 en mobile). */
.est-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.est-kpi {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-1);
  padding: var(--sp-3) var(--sp-4);
}

.est-kpi-label {
  color: var(--texto-2);
  font-size: var(--fs-sm);
}

.est-kpi-valor {
  color: var(--texto);
  font-size: 1.6rem;
  font-weight: var(--peso-medio);
  line-height: 1.25;
}

.est-kpi-sub {
  color: var(--tenue);
  font-size: var(--fs-sm);
}

.est-bloque {
  margin-bottom: var(--sp-5);
}

.est-bloque h3 {
  font-size: var(--fs-lg);
  margin: 0 0 var(--sp-2);
}

.est-bloque-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.est-bloque-cab h3 {
  margin: 0;
}

/* Pie del Resumen: enlace a Fuentes y aclaraciones (#/fuentes) y botón de aporte (Cafecito). En pantallas angostas
   se apilan. */
.est-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-5);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--linea);
}

.est-pie p {
  margin: 0;
}

.btn-cafecito {
  display: inline-block;
  margin-left: var(--sp-1);
  padding: .3rem .75rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-pill);
  background: var(--superficie);
  color: var(--texto);
  font-weight: var(--peso-medio);
  text-decoration: none;
  white-space: nowrap;
}

.btn-cafecito:hover {
  border-color: var(--acento);
  background: var(--acento-suave);
  color: var(--acento-hover);
}

/* Selector de métrica del gráfico (control segmentado). */
.est-seg {
  display: inline-flex;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.est-seg button {
  border: 0;
  border-left: 1px solid var(--linea-fuerte);
  background: var(--superficie);
  color: var(--texto-2);
  font-size: var(--fs-sm);
  padding: .3rem .65rem;
  cursor: pointer;
}

.est-seg button:first-child {
  border-left: 0;
}

.est-seg button:hover {
  background: var(--acento-suave);
  color: var(--acento);
}

.est-seg button.activo {
  background: var(--acento);
  color: #fff;
}

/* Gráfico de columnas por año (SVG). Una sola serie en el color de acento; grilla recesiva. */
.est-graf {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-2) 0;
}

.est-graf svg {
  display: block;
  max-width: 100%;
}

.est-grid,
.est-base {
  stroke: var(--linea);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.est-base {
  stroke: var(--linea-fuerte);
}

.est-eje {
  fill: var(--tenue);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.est-barra {
  fill: var(--acento);
}

.est-barra.activa {
  fill: var(--acento-hover);
}

.est-capa {
  fill: transparent;
  cursor: pointer;
}

.est-tip {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .4rem .6rem;
  background: var(--superficie);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-sm);
  box-shadow: var(--sombra-2);
  color: var(--texto);
  font-size: var(--fs-sm);
  white-space: nowrap;
  pointer-events: none;
}

.est-tip-ayuda {
  color: var(--tenue);
  font-size: var(--fs-xs);
}

.est-datos {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
}

.est-datos summary {
  cursor: pointer;
  color: var(--texto-2);
}

.est-datos .tabla-wrap {
  max-height: 22rem;
  overflow: auto;
  margin-top: var(--sp-2);
}

/* Nota bajo el total de una tabla cuyo G-P o DIF no cierra en cero (incidencias.json: partidos con resultado
   oficial asimétrico). Es el <caption> de la tabla -> viaja con ella en las grillas de grupos. */
table.posiciones caption.nota-total {
  caption-side: bottom;
  text-align: left;
  color: var(--texto-2);
  font-size: var(--fs-sm);
  line-height: 1.4;
  padding: .4rem .2rem 0;
}

table.posiciones caption.nota-total p {
  margin: 0 0 .2rem;
}

table.posiciones caption.nota-total ul {
  margin: 0;
  padding-left: 1.1rem;
}

/* Trayectoria del club (js/trayectoria.js): posición final por certamen; años en Segunda = franjas verticales. */
.tray-franja {
  fill: var(--linea-fuerte);
  opacity: .55;
}

/* Tercera división: franja más oscura que la de Segunda (categoría más baja) */
.tray-franja-tercera {
  opacity: .95;
}

/* Cuarta división (Primera C): más oscura que la de Tercera */
.tray-franja-cuarta {
  fill: color-mix(in srgb, var(--linea-fuerte) 65%, var(--texto));
  opacity: .6;
}

/* Quinta división (Primera D / Promocional Amateur): más oscura que la de Cuarta */
.tray-franja-quinta {
  fill: color-mix(in srgb, var(--linea-fuerte) 45%, var(--texto));
  opacity: .6;
}


.evo-punto.tray-campeon,
.tray-dot.tray-campeon {
  fill: #d4a72c;
  background: #d4a72c;
}

.evo-punto.tray-sub,
.tray-dot.tray-sub {
  fill: #9aa5b4;
  background: #9aa5b4;
}

.tray-marca {
  fill: none;
  stroke: var(--texto);
  stroke-width: 1.5;
}

.tray-capa {
  cursor: pointer;
}

.tray-tip-pos b {
  color: var(--texto);
}

.tray-tip-camp {
  margin-top: .2rem;
  font-weight: var(--peso-medio);
  color: var(--texto);
}

.tray-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1rem;
  align-items: center;
  margin-top: .4rem;
  font-size: var(--fs-xs);
  color: var(--texto-2);
}

.tray-leyenda > span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.tray-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.tray-leyenda .evo-nota {
  margin: 0;
  flex-basis: 100%;
}

.tray-sw {
  display: inline-block;
  width: 14px;
  height: 10px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--linea-fuerte) 55%, transparent);
}

.tray-sw-tercera {
  background: color-mix(in srgb, var(--linea-fuerte) 95%, transparent);
}

.tray-sw-cuarta {
  background: color-mix(in srgb, color-mix(in srgb, var(--linea-fuerte) 65%, var(--texto)) 60%, transparent);
}

.tray-sw-quinta {
  background: color-mix(in srgb, color-mix(in srgb, var(--linea-fuerte) 45%, var(--texto)) 60%, transparent);
}

/* Sección Clubes: un club con variantes (equipos II / III / A / B) ocupa una celda; el botón despliega las suyas
   debajo, más chicas y con sangría. */
.club-grupo {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
}

.club-variantes-btn {
  align-self: flex-start;
  background: none;
  border: none;
  padding: .1rem .3rem;
  color: var(--texto-2);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.club-variantes-btn:hover {
  color: var(--acento);
}

.club-variantes {
  display: grid;
  gap: .3rem;
  margin-left: .8rem;
  padding-left: .6rem;
  border-left: 2px solid var(--linea);
}

.club-variantes .club-chip {
  padding: .3rem .55rem;
  font-size: .92em;
}

.club-variantes .club-chip-escudo {
  width: 28px;
  height: 28px;
}

/* Últimos resultados (js/views/ultimos-resultados.js): acceso rápido a cada competición y sus partidos por día. */
.ur-indice {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .5rem 0 1.25rem;
}

.ur-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .65rem;
  border: 1px solid var(--linea);
  border-radius: var(--r-pill);
  color: var(--texto);
  text-decoration: none;
  font-size: var(--fs-sm);
}

.ur-chip:hover {
  background: var(--acento-suave);
}

.ur-n {
  color: var(--tenue);
  font-variant-numeric: tabular-nums;
}

.ur-comp {
  margin-bottom: 1.5rem;
  scroll-margin-top: 1rem;
}

.ur-comp h3 a {
  color: inherit;
  text-decoration: none;
}

.ur-comp h3 a:hover {
  text-decoration: underline;
}

.ur-dia {
  margin: .6rem 0 .1rem;
  font-size: var(--fs-sm);
  font-weight: var(--peso-medio);
  color: var(--tenue);
}

/* Primera vista de una página estática (js/main.js): mientras se dibuja, se ve el contenido estático y la vista se arma
   debajo, oculta pero con su tamaño (los gráficos miden el ancho al dibujarse). */
.app-main.con-estatico > :not([data-estatico]) {
  visibility: hidden;
}