/* ============================================================
   /equipo?id=XXX — ficha individual de un club
   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.

   Mismo lenguaje visual que /equipos: cada panel se baña con el
   color real del club (--club, fijado una sola vez por equipo.js
   en .pf-detail y heredado por todo el header) en vez de un dorado
   genérico. Sin reflector grande de fondo — aquí, con el logo y los
   paneles tan cerca del encabezado del sitio, se veía mal.
   ============================================================ */

.eq-logo-box {
  border-color: var(--club, var(--pf-linea));
  background:
    radial-gradient(130% 130% at 50% 25%, color-mix(in srgb, var(--club, var(--pf-reflector)) 18%, transparent), transparent 75%),
    var(--pf-panel-negro);
}

.eq-info-panel, .eq-tabla-panel, .eq-datos-panel {
  position: relative;
  border-color: var(--club, var(--pf-linea));
  overflow: hidden;
}
/* franja superior con el color del club, mismo acento que las
   tarjetas de /equipos */
.eq-info-panel::before, .eq-tabla-panel::before, .eq-datos-panel::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--club, var(--pf-reflector));
}
.eq-info-panel {
  background:
    radial-gradient(140% 100% at 0% 0%, color-mix(in srgb, var(--club, var(--pf-reflector)) 14%, transparent), transparent 70%),
    var(--pf-panel-negro);
}

/* tabla contextual (izquierda) y datos del club (derecha), 50/50.
   align-items: start es lo que importa aquí: sin eso, un grid estira
   por default los dos hijos a la altura del más alto (la tabla, con
   7 filas), y el panel de datos —que es más corto— quedaba con un
   colchón de aire vacío abajo para "alcanzar" esa altura. */
.eq-info-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 14px;
}
/* envuelve el panel de datos + el anuncio 160x300 que va debajo, para
   que los dos juntos sigan siendo UN solo hijo de .eq-info-row (que
   espera exactamente 2 columnas). stretch (el default) mantiene el
   panel a todo el ancho de la columna; el anuncio se centra aparte,
   dentro de sí mismo, vía .pf-ad-slot. */
.eq-datos-col { display: flex; flex-direction: column; gap: 14px; }
.eq-datos-col .pf-ad-slot { padding: 0; }
.eq-datos-panel {
  background: var(--pf-panel-negro);
  border: 1px solid var(--pf-linea);
  border-radius: 8px;
  padding: 14px 16px;
}
.eq-datos-list { display: flex; flex-direction: column; gap: 12px; }
.eq-dato {
  display: flex; align-items: center; gap: 10px;
}
/* icono en un círculo con el color del club, mismo lenguaje que el
   punto de calificación y demás acentos redondos del sitio */
.eq-dato-icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--club, var(--pf-reflector)) 16%, transparent);
  color: var(--club, var(--pf-reflector));
}
.eq-dato-icon svg { width: 14px; height: 14px; }
.eq-dato-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.eq-dato-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--pf-cal-muted); font-weight: 600;
}
.eq-dato-valor {
  font-size: 13px; color: var(--pf-cal); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 639px) {
  .eq-info-row { grid-template-columns: 1fr; }
}

/* el apodo del club, coloreado con su propio color en vez del azul
   claro genérico — es su identidad, no un texto secundario más */
.eq-club-meta { color: var(--club, var(--pf-cal-muted)); font-weight: 600; }

/* palmarés del club — en blanco (var(--pf-cal), el "blanco tiza" del
   sitio) para que no compita con el color del club que ya usan el
   nombre y el apodo arriba */
.eq-club-palmares {
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--pf-linea);
  color: var(--pf-cal);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}