@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --azul: #1d4ed8;
  --azul-oscuro: #1e3a8a;
  --verde: #16a34a;
  --rojo: #dc2626;
  --gris-100: #f3f4f6;
  --gris-300: #d1d5db;
  --gris-600: #4b5563;
  --gris-900: #111827;
  --blanco: #ffffff;
  --radio: 8px;
  --fuente-deportiva: 'Barlow Condensed', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--gris-100);
  color: var(--gris-900);
}

/* Estilo "bien deportivo": encabezados condensados, en mayúsculas, con
   tracking amplio — look de cartelera de estadio en vez de panel genérico. */
h1, h2, .topbar h1, .panel h2, .sitio-header h1 {
  font-family: var(--fuente-deportiva);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 700;
}

/* Chip de color de un club — se usa junto al nombre del club en listados
   (equipos, fixture, tabla de posiciones, etc.) para que su color de marca
   se vea en toda la plataforma, no solo en su propio encabezado. */
.club-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  border: 1px solid rgba(0,0,0,0.15);
}

/* Escudo/logo del club en la tabla de posiciones — se usa en vez del
   puntito de color (.club-swatch) siempre que el club tenga logo cargado. */
.escudo-mini-tabla {
  display: inline-block;
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 4px;
  margin-right: 6px;
  vertical-align: middle;
}

/* "Últimas 5" — V/E/P de los últimos partidos jugados por un equipo, el más
   reciente a la izquierda. Se usa en la tabla de posiciones (Panel de Liga y
   sitio público). */
.ultimos5 { display: flex; gap: 4px; }
.badge-ultimo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 5px; font-size: 11px; font-weight: 800; color: #fff;
}
.badge-ultimo-v { background: #2e9e4f; }
.badge-ultimo-e { background: #d9a520; }
.badge-ultimo-p { background: #d9403f; }

/* Fila de club "clickeable" en la tabla de posiciones del sitio público —
   lleva a la página pública del equipo. */
.fila-equipo-clickable { cursor: pointer; }
.fila-equipo-clickable:hover { background: rgba(0,0,0,0.04); }

/* Fila separadora que agrupa un listado por club (ej. Fichajes del Panel de
   Liga: todos los jugadores del mismo club quedan juntos debajo de su
   nombre). */
.fila-grupo-club td {
  background: var(--gris-100);
  font-weight: 700;
  font-size: 13px;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Grupo de club plegable (ej. Fichajes de Liga): arranca colapsado y se
   expande tocando la flechita, para ver de un vistazo la lista de clubes. */
.fila-grupo-club-clickable {
  cursor: pointer;
}
.flecha-grupo-club {
  display: inline-block;
  width: 14px;
}

/* Jugador retraído/inactivo dentro de un listado agrupado por club (ej.
   Fichajes de Liga): se ve atenuado, pero sigue mostrándose junto al resto. */
.fila-jugador-retraido {
  opacity: 0.6;
}

/* Fallback de foto de jugador: cuando no tiene foto propia se usa el
   escudo del club en su lugar (mismo círculo, sin recortar el logo). */
.escudo-jugador-mini {
  object-fit: contain;
  background: var(--blanco);
}

/* Escudo del club en tablas de posiciones y fixture públicos, en vez del
   punto de color plano. */
.club-escudo-mini {
  display: inline-block;
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 4px;
  margin-right: 6px;
  vertical-align: middle;
  background: var(--blanco);
}

/* ===== Login — estilo "cancha de noche": fondo oscuro con reflectores y
   líneas de cancha, tarjeta tipo vestuario/tablero, tipografía condensada en
   mayúsculas igual que el resto de la plataforma. ===== */
.login-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(29,78,216,0.35), transparent 55%),
    radial-gradient(circle at 15% 85%, rgba(22,163,74,0.18), transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(29,78,216,0.18), transparent 45%),
    linear-gradient(180deg, #0a0e17 0%, #0d1220 55%, #0a0e17 100%);
}

/* Líneas de cancha muy tenues cerca del piso, como si se viera la mitad de
   una cancha desde la tribuna. */
.login-body::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 64px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%);
  mask-image: linear-gradient(180deg, transparent, #000 70%);
}

/* ===== Fondo "cancha de noche" para el resto del Panel Liga (mismo estilo
   que el login: reflectores + líneas de cancha tenues), pero con los colores
   propios de CADA Liga en vez de los azul/verde fijos. Los colores reales se
   escriben desde JS (cargarPerfilLiga en liga.js) apenas se conoce la Liga;
   estos valores de acá son solo el fallback mientras carga. ===== */
body.liga-fondo-cancha, body.club-fondo-cancha {
  min-height: 100vh;
  position: relative;
  background:
    radial-gradient(circle at 50% 0%, rgba(29,78,216,0.30), transparent 55%),
    radial-gradient(circle at 15% 90%, rgba(29,78,216,0.16), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(29,78,216,0.16), transparent 45%),
    linear-gradient(180deg, #0a0e17 0%, #0d1220 55%, #0a0e17 100%);
}

body.liga-fondo-cancha::before, body.club-fondo-cancha::before {
  content: "";
  position: fixed;
  inset: 0;
  height: auto;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.045) 0, rgba(255,255,255,0.045) 1px, transparent 1px, transparent 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 64px);
  -webkit-mask-image: radial-gradient(circle at 50% 100%, #000 0%, transparent 70%);
  mask-image: radial-gradient(circle at 50% 100%, #000 0%, transparent 70%);
}

body.liga-fondo-cancha .topbar, body.club-fondo-cancha .topbar,
body.liga-fondo-cancha .contenido, body.club-fondo-cancha .contenido {
  position: relative;
  z-index: 1;
}

.login-marca {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 22px;
}

.login-marca img {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.06), 0 14px 34px rgba(0,0,0,0.55);
}

.login-marca p {
  margin: 14px 0 0;
  color: var(--gris-300);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

.login-card {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, #161c2b, #10141f);
  border: 1px solid rgba(255,255,255,0.07);
  padding: 36px 32px 32px;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  width: 100%;
  max-width: 380px;
}

.login-card::before {
  content: "";
  display: block;
  height: 4px;
  margin: -36px -32px 26px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, var(--azul), var(--verde));
}

.login-card h1 {
  font-size: 24px;
  margin: 0 0 4px;
  text-align: center;
  color: var(--blanco);
}

.login-card .login-tagline {
  text-align: center;
  color: var(--gris-600);
  font-size: 12.5px;
  margin: 0 0 26px;
  font-family: 'Inter', sans-serif;
  text-transform: none;
  letter-spacing: normal;
}

.login-card label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  margin: 16px 0 6px;
  color: var(--gris-300);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.login-card input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--blanco);
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.15s, background 0.15s;
}

.login-card input::placeholder { color: rgba(255,255,255,0.35); }

.login-card input:focus {
  outline: none;
  border-color: var(--azul);
  background: rgba(255,255,255,0.07);
}

.login-card button {
  width: 100%;
  margin-top: 24px;
  padding: 13px;
  background: linear-gradient(90deg, var(--azul), #1552c9);
  color: var(--blanco);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
  box-shadow: 0 8px 20px rgba(29,78,216,0.35);
}

.login-card button:hover {
  background: linear-gradient(90deg, var(--azul-oscuro), var(--azul));
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(29,78,216,0.45);
}

.login-card button:active { transform: translateY(0); }

.error-msg {
  color: #f87171;
  font-size: 13px;
  margin-top: 14px;
  min-height: 16px;
  text-align: center;
}

/* ===== Layout de panel (admin / liga / club) ===== */
.topbar {
  background: var(--blanco);
  border-bottom: 1px solid var(--gris-300);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar h1 {
  font-size: 17px;
  margin: 0;
  color: var(--azul-oscuro);
}

.topbar .usuario-info {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--gris-600);
}

.topbar button {
  background: none;
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
}

.contenido {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 40px;
}

.panel {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.panel h2 {
  font-size: 15px;
  margin: 0 0 16px;
  color: var(--azul-oscuro);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.panel-header h2 { margin: 0; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th, td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--gris-100);
}

th { color: var(--gris-600); font-weight: 600; }

tr:hover td { background: var(--gris-100); }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.badge-activo { background: #dcfce7; color: var(--verde); }
.badge-inactivo { background: #fee2e2; color: var(--rojo); }
.badge-pendiente { background: #fef9c3; color: #854d0e; }
.badge-alerta { background: #ffedd5; color: #9a3412; cursor: help; margin-left: 4px; }

button.btn {
  background: var(--azul);
  color: var(--blanco);
  border: none;
  border-radius: var(--radio);
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
}
button.btn:hover { background: var(--azul-oscuro); }

button.btn-secundario {
  background: var(--blanco);
  color: var(--gris-900);
  border: 1px solid var(--gris-300);
}
button.btn-secundario:hover { background: var(--gris-100); }

button.btn-pequeno {
  padding: 4px 10px;
  font-size: 12px;
  margin-right: 4px;
}

button.btn-peligro {
  background: var(--blanco);
  color: var(--rojo);
  border: 1px solid var(--rojo);
}
button.btn-peligro:hover { background: #fee2e2; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.form-grid.una-columna { grid-template-columns: 1fr; }

.form-grid label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--gris-600);
  margin-bottom: 4px;
}

.form-grid input, .form-grid select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  font-size: 13px;
}

.oculto { display: none !important; }

.mensaje-error {
  color: var(--rojo);
  font-size: 13px;
  margin: 8px 0;
}

.mensaje-ok {
  color: var(--verde);
  font-size: 13px;
  margin: 8px 0;
}

.texto-ayuda {
  color: var(--gris-600);
  font-size: 12px;
  margin-top: -8px;
  margin-bottom: 12px;
}

/* ===== Sitio web público ===== */
.sitio-header {
  background: linear-gradient(135deg, var(--azul-oscuro), var(--azul));
  color: var(--blanco);
  padding: 28px 24px;
}

.sitio-header .sitio-header-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.sitio-header h1 {
  margin: 0;
  font-size: 22px;
}

.sitio-header a {
  color: var(--blanco);
  text-decoration: none;
}

.sitio-breadcrumb {
  font-size: 13px;
  opacity: 0.85;
  margin-top: 6px;
}

.sitio-breadcrumb a { text-decoration: underline; }

.sitio-logo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--blanco);
}

.sitio-contenido {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 40px;
}

.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.card-link {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  text-decoration: none;
  color: var(--gris-900);
  transition: box-shadow 0.15s;
}

.card-link:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.12); }

/* Marca de agua muy suave con el logo del torneo (o el de la división, en
   los botones de división del sitio público) — sólo se pinta si el elemento
   trae la variable --foto-fondo cargada (ver JS que genera estas tarjetas). */
.card-link.con-foto-fondo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--foto-fondo);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.08;
  z-index: 0;
  pointer-events: none;
}

.card-link h3,
.card-link p {
  position: relative;
  z-index: 1;
  margin: 0 0 4px;
}

.card-link h3 {
  font-size: 15px;
  color: var(--azul-oscuro);
}

.card-link p {
  margin: 0;
  font-size: 12px;
  color: var(--gris-600);
}

/* Botones grandes del Panel de Liga (Torneos, Categorías) */
.grid-botones-grandes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 10px;
}

.boton-grande {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  padding: 16px;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  transition: box-shadow 0.15s, border-color 0.15s;
}

.boton-grande:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.14); border-color: var(--azul); }

.boton-grande h3 {
  margin: 0;
  font-size: 16px;
  color: var(--gris-900);
  padding-right: 56px;
}

.boton-grande p {
  margin: 0;
  font-size: 12px;
  color: var(--gris-600);
}

.boton-grande .acciones-boton-grande {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 4px;
}

/* Variante más grande para el listado de Torneos: el nombre del torneo es
   lo más importante que hay en el Panel de Liga, así que su tarjeta tiene
   que notarse mucho más que una Categoría o Subcategoría. */
.grid-torneos {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.boton-grande-torneo {
  padding: 24px;
  gap: 10px;
}

.boton-grande-torneo h3 {
  font-size: 22px;
  font-weight: 800;
  padding-right: 64px;
  line-height: 1.15;
}

.boton-grande-torneo p {
  font-size: 13px;
}

.sitio-tabs { display: flex; gap: 8px; margin-bottom: 20px; }

.sitio-vacio {
  color: var(--gris-600);
  font-size: 13px;
  padding: 20px 0;
}

/* Buscador de clubes de la página pública de una Liga: input + lista de
   resultados desplegable debajo, que se cierra sola al elegir un club o
   hacer click afuera. */
.buscador-clubes { position: relative; max-width: 420px; margin-bottom: 20px; }
.buscador-clubes input {
  width: 100%; padding: 10px 14px; border: 1px solid var(--gris-300); border-radius: var(--radio);
  font-size: 14px; box-sizing: border-box;
}
.buscador-clubes-resultados {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin-top: 4px;
  background: var(--blanco); border-radius: var(--radio); box-shadow: 0 4px 14px rgba(0,0,0,0.15);
  max-height: 320px; overflow-y: auto;
}
.buscador-clubes-resultado {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; text-decoration: none;
  color: var(--gris-900); font-size: 14px; border-bottom: 1px solid var(--gris-100);
}
.buscador-clubes-resultado:last-child { border-bottom: none; }
.buscador-clubes-resultado:hover { background: var(--gris-100); }
.buscador-clubes-resultado img, .buscador-clubes-resultado .club-swatch {
  width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}

.noticia-card {
  background: var(--blanco);
  border-radius: var(--radio);
  padding: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  margin-bottom: 14px;
}

.noticia-card.destacada { border-left: 4px solid var(--azul); }

.noticia-card h3 {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--azul-oscuro);
}

.noticia-card .noticia-fecha {
  font-size: 11px;
  color: var(--gris-600);
  margin-bottom: 8px;
}

.noticia-card img {
  max-width: 100%;
  border-radius: var(--radio);
  margin-bottom: 10px;
}

.noticia-card p.noticia-contenido {
  margin: 0;
  font-size: 13px;
  color: var(--gris-900);
  white-space: pre-wrap;
}

/* ===========================================================================
   PANEL LIGA — "Vidrio sobre cancha": el Panel de Liga (liga.html, marcado
   con body.liga-fondo-cancha) extiende el fondo oscuro tipo "cancha de
   noche" que ya tenía el login a TODAS sus tarjetas: en vez de paneles
   blancos flotando sobre el fondo oscuro, ahora los paneles, la topbar, las
   tablas y los botones son de vidrio esmerilado sobre ese mismo fondo.

   Truco central: como casi todo el resto de la hoja de estilos ya usa las
   variables --gris-900/--gris-600/--gris-300/--gris-100/--azul-oscuro para
   texto, bordes y fondos sutiles, alcanza con REDEFINIR esas variables acá
   (scopeadas a body.liga-fondo-cancha) para que la mayoría de los
   componentes (agenda, carnet, tarjetas de torneo, boton-grande, etc.) se
   vean bien en oscuro SIN tener que tocar cada regla una por una. Después
   sólo hace falta arreglar a mano los pocos lugares que usan var(--blanco)
   como fondo de tarjeta (topbar, panel, card-link, boton-grande,
   noticia-card) y los inputs (que no usaban ninguna variable de fondo).
   NO se toca var(--blanco) en sí: sigue haciendo falta tal cual está para
   texto/íconos blancos sobre superficies de color (botones, tabs activos).
   =========================================================================== */
body.liga-fondo-cancha, body.club-fondo-cancha {
  --gris-900: #e7ebf3;
  --gris-600: #a9b1c4;
  --gris-300: rgba(255,255,255,0.14);
  --gris-100: rgba(255,255,255,0.055);
  --azul-oscuro: #7fb3ff;
}

/* Topbar y tarjetas: vidrio esmerilado en vez de blanco sólido. */
body.liga-fondo-cancha .topbar, body.club-fondo-cancha .topbar {
  background: rgba(255,255,255,0.045);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--gris-300);
}

body.liga-fondo-cancha .panel, body.club-fondo-cancha .panel {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.09);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

body.liga-fondo-cancha .card-link, body.club-fondo-cancha .card-link,
body.liga-fondo-cancha .boton-grande, body.club-fondo-cancha .boton-grande,
body.liga-fondo-cancha .noticia-card, body.club-fondo-cancha .noticia-card,
body.liga-fondo-cancha .tarjeta-carnet, body.club-fondo-cancha .tarjeta-carnet {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.09);
}

body.liga-fondo-cancha .card-link:hover, body.club-fondo-cancha .card-link:hover,
body.liga-fondo-cancha .boton-grande:hover, body.club-fondo-cancha .boton-grande:hover {
  box-shadow: 0 8px 22px rgba(0,0,0,0.4);
}

/* Botones secundarios/peligro: fondo sólido blanco -> vidrio. El botón
   primario (button.btn, azul sólido) no necesita cambios. */
body.liga-fondo-cancha button.btn-secundario, body.club-fondo-cancha button.btn-secundario,
body.liga-fondo-cancha button.btn-peligro, body.club-fondo-cancha button.btn-peligro,
body.liga-fondo-cancha .topbar button, body.club-fondo-cancha .topbar button {
  background: rgba(255,255,255,0.06);
}
body.liga-fondo-cancha button.btn-secundario:hover, body.club-fondo-cancha button.btn-secundario:hover { background: rgba(255,255,255,0.11); }
body.liga-fondo-cancha button.btn-peligro, body.club-fondo-cancha button.btn-peligro { color: #ff8080; border-color: #ff8080; }
body.liga-fondo-cancha button.btn-peligro:hover, body.club-fondo-cancha button.btn-peligro:hover { background: rgba(255,128,128,0.14); }
body.liga-fondo-cancha button.btn, body.club-fondo-cancha button.btn {
  box-shadow: 0 6px 16px rgba(29,78,216,0.35);
}
body.liga-fondo-cancha button.btn:hover, body.club-fondo-cancha button.btn:hover {
  box-shadow: 0 8px 20px rgba(29,78,216,0.45);
}

/* Inputs y selects: no usaban ninguna variable de fondo (quedaban blancos
   por default del navegador), así que van explícitos. */
body.liga-fondo-cancha input, body.club-fondo-cancha input,
body.liga-fondo-cancha select, body.club-fondo-cancha select,
body.liga-fondo-cancha textarea, body.club-fondo-cancha textarea {
  background: rgba(255,255,255,0.05);
  color: var(--gris-900);
}
body.liga-fondo-cancha input::placeholder, body.club-fondo-cancha input::placeholder,
body.liga-fondo-cancha textarea::placeholder, body.club-fondo-cancha textarea::placeholder { color: #6d7590; }
body.liga-fondo-cancha input:focus, body.club-fondo-cancha input:focus,
body.liga-fondo-cancha select:focus, body.club-fondo-cancha select:focus,
body.liga-fondo-cancha textarea:focus, body.club-fondo-cancha textarea:focus {
  outline: none;
  border-color: var(--azul);
  background: rgba(255,255,255,0.08);
}
/* Las opciones de un <select> las pinta el sistema operativo, no el
   navegador: el <select> cerrado toma el fondo oscuro de arriba, pero la
   listita desplegada quedaba blanca por default (ilegible con el texto
   claro que usan las demás reglas de este bloque). Fijando background/color
   en <option> se corrige en Chrome/Edge/Firefox -- lo único que sigue sin
   poder tocarse por CSS es el resaltado de la opción bajo el mouse. */
body.liga-fondo-cancha select option, body.club-fondo-cancha select option {
  background: #171d2c;
  color: #e7ebf3;
}
body.liga-fondo-cancha input[type="color"], body.club-fondo-cancha input[type="color"] { background: none; }
body.liga-fondo-cancha input[type="checkbox"], body.club-fondo-cancha input[type="checkbox"],
body.liga-fondo-cancha input[type="radio"], body.club-fondo-cancha input[type="radio"] { accent-color: var(--azul); }

/* Badges de estado: de chips pasteles a chips de vidrio con color sólido de
   texto -- se notan mucho más sobre una tarjeta oscura. */
body.liga-fondo-cancha .badge-activo, body.club-fondo-cancha .badge-activo { background: rgba(22,163,74,0.16); color: #52d17f; }
body.liga-fondo-cancha .badge-inactivo, body.club-fondo-cancha .badge-inactivo { background: rgba(220,38,38,0.16); color: #ff8080; }
body.liga-fondo-cancha .badge-pendiente, body.club-fondo-cancha .badge-pendiente { background: rgba(217,165,32,0.18); color: #f2c34c; }
body.liga-fondo-cancha .badge-alerta, body.club-fondo-cancha .badge-alerta { background: rgba(234,88,12,0.18); color: #fb923c; }

/* Filas de tabla / tarjetas clickeables: el hover oscurecía un poco (pensado
   para fondo blanco); sobre vidrio oscuro tiene que aclarar en vez. */
body.liga-fondo-cancha .fila-equipo-clickable:hover, body.club-fondo-cancha .fila-equipo-clickable:hover { background: rgba(255,255,255,0.05); }
body.liga-fondo-cancha .club-swatch, body.club-fondo-cancha .club-swatch { border-color: rgba(255,255,255,0.25); }