/* ============================================================
   /equipos — rejilla de los 18 clubes de la Liga MX
   Hoja exclusiva de esta página (no la comparte pizarramx.css)
   para no forzar un bump de versión de caché en todo el sitio.

   v2: rediseño simplificado. La primera versión tenía escalonado
   por transform + perforación tipo boleto + animación de entrada;
   demasiadas piezas interactuando (la animación llegó a bloquear
   el transform del hover) y el resultado se veía mal acomodado.
   Esta versión es deliberadamente más simple: cuadrícula uniforme,
   sin animaciones ni desplazamientos, cada tarjeta bañada con el
   color real del club. Menos piezas, menos forma de que algo salga
   torcido.
   ============================================================ */

/* ------------------------------------------------ encabezado de la liga
   (nuevo, 2026-08-18) — mismo lenguaje visual que el header de un club
   en equipo.css (logo a la izquierda en su caja, info a la derecha),
   pero sin --club porque acá no hay un color de club que bañar. */
.lig-header {
  display: grid; grid-template-columns: 150px 1fr; gap: 14px;
  padding: 28px 28px 0; max-width: 1200px; margin: 0 auto;
}
.lig-logo-box {
  background: var(--pf-panel-negro); border: 1px solid var(--pf-linea); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.lig-logo-img { width: 100%; height: 100%; max-width: 110px; max-height: 110px; object-fit: contain; }
.lig-info-panel {
  background: var(--pf-panel-negro); border: 1px solid var(--pf-linea); border-radius: 8px;
  padding: 16px 18px; display: flex; flex-direction: column; justify-content: center;
}
/* separación entre el header de la liga y "Tabla de posiciones": sin
   esto el título quedaba pegado justo debajo del logo/panel de arriba.
   .pf-layout es de pizarramx.css (sin padding-top ahí); se sobreescribe
   acá porque esta hoja solo la cargan las páginas de equipos-*.html. */
.pf-layout { padding-top: 22px; }

/* v2 (2026-08-19): el primer intento (sombra difusa con blur) se veía
   "hinchado" en vez de más legible — el desenfoque le suma peso visual
   a una fuente ya de por sí muy gruesa (Anton). Se cambió por un borde
   real de 1px sin blur en las 4 direcciones (mismo look que un
   "contorno" de historieta, no una sombra), más espaciado entre letras
   para que no se sientan tan pegadas. Probado y comparado visualmente
   contra 4 variantes antes de elegir esta. */
.lig-nombre {
  font-family: 'Anton', sans-serif; font-size: 24px; letter-spacing: 1.6px; color: var(--pf-cal); margin: 0;
  text-shadow:
    -1px 0 0 rgba(0,0,0,0.5),
     1px 0 0 rgba(0,0,0,0.5),
     0 -1px 0 rgba(0,0,0,0.5),
     0  1px 0 rgba(0,0,0,0.5);
}
/* país · temporada · N equipos — el "·" es un pseudo-elemento entre
   spans en vez de texto literal, así esc() no tiene que lidiar con él */
.lig-meta { margin: 8px 0 0; font-size: 12.5px; color: var(--pf-cal-muted); display: flex; flex-wrap: wrap; }
.lig-meta span:not(:last-child)::after { content: '·'; margin: 0 8px; color: var(--pf-linea); }

/* panel lateral junto a la tabla de posiciones */
.lig-side-panel { display: flex; flex-direction: column; gap: 14px; }
.lig-lider-panel {
  background: var(--pf-panel-negro); border: 1px solid var(--pf-linea); border-radius: 8px;
  padding: 16px 18px;
}
.lig-lider-label {
  margin: 0 0 10px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--pf-cal-muted); font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
/* ícono junto a la etiqueta (Goleadores/Asistencias/Tarjetas) — el de
   balón usa currentColor (hereda el gris de la etiqueta), las tarjetas
   ya traen su propio color relleno (amarillo/rojo) desde liga.js */
.lig-lider-icon { display: inline-flex; width: 12px; height: 12px; flex-shrink: 0; }
.lig-lider-icon svg { width: 100%; height: 100%; }
.lig-lider-team { display: flex; align-items: center; gap: 10px; }
.lig-lider-nombre { font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 15px; color: var(--pf-cal); }
.lig-lider-pts { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--pf-reflector); margin-top: 2px; }

/* top 5 de goleadores/asistencias/tarjetas — tabla de 2 columnas
   (escudo+nombre / total). table-layout: fixed + la 2ª columna con
   ancho fijo es lo que evita que un nombre largo empuje el número
   fuera de la vista; el nombre se recorta con ellipsis antes antes de
   que eso pase, así siempre se alcanza a leer el total. */
.lig-stat-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.lig-stat-table tr:not(:last-child) td { border-bottom: 1px solid var(--pf-linea); }
.lig-stat-table td { padding: 8px 0; vertical-align: middle; }
.lig-stat-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lig-stat-nombre {
  font-family: 'Exo 2', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--pf-cal);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.lig-stat-valor {
  width: 30px; text-align: right; font-family: 'IBM Plex Mono', monospace;
  font-weight: 700; font-size: 13.5px; color: var(--pf-reflector); white-space: nowrap;
}

/* separación entre secciones de la página de liga: "Líderes de la liga"
   ya traía 34px de pizarramx.css (.pf-leaders-section), pero "Próximos
   partidos" reutiliza .pf-layout-single, que no trae padding-top propio
   (pizarramx.css: "padding: 0 28px") — quedaba pegado justo debajo de
   los recuadros de líderes. Clases dedicadas en vez de tocar
   .pf-layout-single en general, porque esa clase también la usa el
   botón de calendario un poco más abajo (ese sí debe quedar pegado a
   la paginación de arriba, sin este respiro). */
.lig-leaders-section { padding-top: 40px; }

/* "Próximos partidos" (2026-08-19): ya no es su propia sección de ancho
   completo — se metió DENTRO de la columna de la tabla de posiciones,
   justo debajo de la leyenda de liguilla, para llenar el espacio vacío
   que dejaba esa columna al ser más corta que "En la liga" (con sus 5
   recuadros) en la columna de al lado. lig-proximos-header es el título
   "Próximos partidos" ya adentro de esa misma <section>, por eso lleva
   su propio margin-top en vez de heredar el padding de .pf-section-header. */
.lig-proximos-header { margin-top: 28px; }

/* botón "Ver calendario completo" — quedaba pegado (0px) justo debajo
   de los recuadros de "Líderes de la liga", se veía encimado */
.lig-calendario-section { display: flex; justify-content: center; padding-top: 32px; padding-bottom: 8px; }
.lig-calendario-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Anton', sans-serif; letter-spacing: 0.5px; font-size: 14px;
  background: var(--pf-panel-negro); color: var(--pf-cal);
  border: 1px solid var(--pf-linea); border-radius: 6px;
  padding: 12px 20px; text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.lig-calendario-btn:hover { border-color: var(--pf-reflector); color: var(--pf-reflector); transform: translateY(-2px); }

@media (max-width: 639px) {
  .lig-header { grid-template-columns: 1fr; padding: 20px 16px 0; }
  .lig-logo-box { height: 100px; }
}

.clb-hero {
  position: relative;
  padding: 56px 28px 40px;
  overflow: hidden;
  border-bottom: 1px solid var(--pf-linea);
}
/* antes eran tres reflectores dorados (mismo "luz de reflector" que el
   resto del sitio) — a petición del usuario (2026-08-19) se quitó ese
   destello: ahora es un degradado plano hacia el panel negro, sin
   brillo, para no competir con el azul de la tabla/panel de arriba.
   Como esta hoja la comparten TODAS las páginas de equipos-*.html, va
   en un tono neutro (no un azul fijo de Liga MX) para que se vea bien
   en cualquier liga. */
.clb-hero::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--pf-panel-negro), transparent 65%);
}
.clb-hero-content { position: relative; max-width: 720px; }
.clb-hero h1 {
  font-family: 'Anton', sans-serif; font-size: 30px; letter-spacing: 0.5px;
  color: var(--pf-cal); margin: 0 0 8px;
}
.clb-hero p { color: var(--pf-cal-muted); font-size: 13.5px; margin: 0; max-width: 52ch; }

.clb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 16px;
  padding: 40px 28px 56px;
  max-width: 1200px;
  margin: 0 auto;
}

.clb-card {
  --club: var(--pf-cal-muted);
  position: relative;
  display: flex; flex-direction: column;
  /* la luz del club baña la tarjeta desde arriba, no solo el escudo */
  background:
    radial-gradient(120% 85% at 50% 0%, color-mix(in srgb, var(--club) 22%, transparent), transparent 72%),
    var(--pf-panel-negro);
  border: 1px solid var(--pf-linea);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.clb-card:hover, .clb-card:focus-visible {
  border-color: var(--club);
  transform: translateY(-3px);
  box-shadow: 0 14px 26px -16px rgba(0,0,0,0.6);
  outline: none;
}

/* franja superior: el color real del club */
.clb-card::before {
  content: '';
  display: block;
  height: 4px;
  background: var(--club);
}

.clb-crest-zone {
  padding: 22px 14px 14px;
  display: flex; align-items: center; justify-content: center;
}
.clb-crest { width: 54px; height: 54px; object-fit: contain; }
.clb-crest-fallback {
  width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--pf-pizarra); color: var(--pf-cal); font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 14px;
}

.clb-info {
  padding: 0 14px 18px;
  display: flex; flex-direction: column; gap: 3px;
  text-align: center;
  /* reserva el espacio de la leyenda "Campeón" (solo Cruz Azul la usa)
     en TODAS las tarjetas, para que ninguna quede más alta que otra */
  min-height: 91px;
}
/* alto fijo (reserva 2 líneas) para que "Toluca" y "Atlético San Luis"
   dejen la tarjeta exactamente igual de alta */
.clb-name {
  font-family: 'Exo 2', sans-serif; font-weight: 700; font-size: 13.5px;
  color: var(--pf-cal); line-height: 1.25; min-height: 34px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.clb-apodo {
  font-size: 10.5px; color: var(--club); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* leyenda de campeón — mismo dorado "luz de reflector" que ya usa el
   sitio (var(--pf-reflector)), con el resplandor cálido del estadio */
.clb-campeon {
  align-self: center;
  font-family: 'Exo 2', sans-serif; font-size: 9.5px; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--pf-reflector);
  padding: 2px 9px;
  border-radius: 20px;
  border: 1px solid rgba(232,184,74,0.4);
  background: radial-gradient(120% 160% at 50% 30%, rgba(232,184,74,0.26), rgba(232,184,74,0.06) 70%);
  text-shadow: 0 0 8px rgba(232,184,74,0.75);
}

@media (max-width: 639px) {
  .clb-hero { padding: 40px 18px 28px; }
  .clb-hero h1 { font-size: 24px; }
  .clb-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; padding: 26px 16px 40px; }
  .clb-crest { width: 44px; height: 44px; }
}