/* ============================================================================
   illanes00-handball — sistema visual
   Identidad deportiva: Anton para titulares, naranja "ball" como acento
   energético, teal "court" para enlaces, azul "ink" como base. Las páginas de
   equipo inyectan --team-primary / --team-secondary en un wrapper.
   ============================================================================ */

:root {
  --ink: #0b1020;
  --court: #0d6e6e;
  --ball: #f15a24;
  /* Fallback de marca; cada equipo lo sobreescribe inline. */
  --team-primary: #1f2a44;
  --team-secondary: #c9d1e0;
  --shadow-card: 0 1px 2px rgb(11 16 32 / 0.05), 0 8px 24px -12px rgb(11 16 32 / 0.18);
  --shadow-lift: 0 12px 32px -10px rgb(11 16 32 / 0.28);
}

/* Suaviza el render de Anton, que tiende a verse "apretado". */
.font-display { letter-spacing: 0.01em; }

/* —— Patrón de cancha: líneas diagonales sutiles para fondos oscuros ———————— */
.court-pattern {
  position: relative;
  isolation: isolate;
}
.court-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    repeating-linear-gradient(
      115deg,
      rgb(255 255 255 / 0.05) 0,
      rgb(255 255 255 / 0.05) 1px,
      transparent 1px,
      transparent 22px
    ),
    radial-gradient(120% 120% at 100% 0%, rgb(241 90 36 / 0.22), transparent 55%);
  pointer-events: none;
}

/* —— Titular de sección con barra de acento ——————————————————————————————— */
.section-title {
  position: relative;
  padding-left: 0.85rem;
}
.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.12em;
  bottom: 0.12em;
  width: 5px;
  border-radius: 999px;
  background: var(--ball);
}

/* —— Tarjetas base con elevación al pasar el mouse ————————————————————————— */
.card {
  background: #fff;
  border: 1px solid rgb(15 23 42 / 0.08);
  border-radius: 1rem;
  box-shadow: var(--shadow-card);
}
.card-hover {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: rgb(15 23 42 / 0.14);
}

/* —— Banner de equipo: degradado del color primario + brillo del secundario —— */
.team-banner {
  position: relative;
  background:
    radial-gradient(
      115% 130% at 85% -10%,
      color-mix(in srgb, var(--team-secondary) 45%, transparent),
      transparent 60%
    ),
    linear-gradient(
      135deg,
      var(--team-primary),
      color-mix(in srgb, var(--team-primary) 62%, #000)
    );
  overflow: hidden;
}
.team-banner::after {
  /* Líneas de cancha tenues sobre el banner. */
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    115deg,
    rgb(255 255 255 / 0.06) 0,
    rgb(255 255 255 / 0.06) 1px,
    transparent 1px,
    transparent 24px
  );
  pointer-events: none;
}
/* El contenido del banner debe quedar sobre el patrón. */
.team-banner > * { position: relative; z-index: 1; }
/* Franja inferior con el color secundario del equipo. */
.team-stripe {
  height: 6px;
  background: var(--team-secondary);
}

.team-accent { color: var(--team-primary); }
.team-chip { background: var(--team-primary); color: #fff; }

/* Marco de escudo sobre fondo claro tematizado. */
.crest-frame {
  background: #fff;
  border: 1px solid rgb(15 23 42 / 0.08);
  box-shadow: var(--shadow-card);
}

/* —— Tarjeta de partido: franja superior con los colores de ambos equipos —— */
.match-card { isolation: isolate; }
.match-stripe {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--home-c, #1f2a44) 85%, transparent),
    color-mix(in srgb, var(--home-c, #1f2a44) 85%, transparent) 45%,
    color-mix(in srgb, var(--away-c, #1f2a44) 85%, transparent) 55%,
    color-mix(in srgb, var(--away-c, #1f2a44) 85%, transparent)
  );
  opacity: 0.85;
}

/* —— Imágenes —————————————————————————————————————————————————————————————— */
img.crest { object-fit: contain; }
img.player-photo { object-fit: cover; object-position: top center; }

/* —— Chips de posición con color por rol ——————————————————————————————————— */
.pos-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ink);
}
.pos-GK { background: #0d6e6e; }            /* portero */
.pos-LW, .pos-RW { background: #f15a24; }    /* extremos */
.pos-LB, .pos-RB { background: #2563eb; }    /* laterales */
.pos-CB { background: #7c3aed; }             /* central */
.pos-P { background: #b45309; }              /* pivote */
.pos-UNK { background: #64748b; }

/* —— Bloque de estadística (stat tile) ————————————————————————————————————— */
.stat-tile {
  background: #fff;
  border: 1px solid rgb(15 23 42 / 0.08);
  border-radius: 0.9rem;
  box-shadow: var(--shadow-card);
  text-align: center;
}

/* —— Tabla de clasificación: líder destacado ——————————————————————————————— */
.standings-leader {
  background: linear-gradient(90deg, rgb(241 90 36 / 0.10), transparent 70%);
  box-shadow: inset 4px 0 0 var(--ball);
}
.standings-featured {
  background: rgb(13 110 110 / 0.06);
}
/* Zona de descenso: tinte rojo tenue al pie de la tabla. */
.standings-relegation {
  box-shadow: inset 4px 0 0 rgb(244 63 94 / 0.55);
}
.standings-relegation:hover {
  background: rgb(244 63 94 / 0.05);
}

/* —— Estado vacío intencional ——————————————————————————————————————————————— */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  border: 1px dashed rgb(148 163 184 / 0.6);
  border-radius: 1rem;
  background:
    radial-gradient(80% 120% at 50% 0%, rgb(15 23 42 / 0.02), transparent 70%),
    #fff;
  padding: 2.5rem 1rem;
  text-align: center;
  color: #94a3b8;
}
.empty-state .icon {
  font-size: 2rem;
  line-height: 1;
  filter: grayscale(0.2);
}

/* —— Bandera un poco más grande para legibilidad (emoji, fallback) ————————— */
.flag-lg { font-size: 1.15em; line-height: 1; }

/* —— Bandera como imagen nítida (flagcdn) ————————————————————————————————— */
.flag-img {
  display: inline-block;
  width: 1.45em;
  height: auto;
  vertical-align: -0.18em;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgb(15 23 42 / 0.12), 0 1px 2px rgb(15 23 42 / 0.18);
  object-fit: cover;
}
/* Variante grande para cabeceras (héroe de equipo / ficha de jugador). */
.flag-img.flag-xl { width: 2.1em; border-radius: 3px; }

/* —— Respeta usuarios que prefieren menos movimiento ——————————————————————— */
@media (prefers-reduced-motion: reduce) {
  .card-hover,
  .card-hover:hover,
  .group:hover img {
    transition: none;
    transform: none;
  }
}