/* =====================================================================
 *  futbol.css — estilo "plataforma deportiva profesional" para toda la
 *  seccion Gamerol Futbol (laliga.html + futbol-*.html). Reusa los
 *  tokens de styles.css (--dorado, --fondo, --sup-tarjeta, --borde,
 *  --texto, --radio, --verde, --rojo, --trans, --t-base...) y anade
 *  solo el acento propio de futbol en rojo, mismo lenguaje de sombras
 *  y bordes que el resto del sitio.
 * ===================================================================== */

:root {
  --f-rojo: #ff2f92;
  --f-rojo-suave: #ff6bb3;
  --f-rojo-tinta: rgba(255, 47, 146, .13);
  --f-borde-rojo: rgba(255, 47, 146, .4);
}

/* Negro puro, sin la foto de fondo del resto de Gamerol -- pedido asi
   expresamente (27/08/2026) para que Futbol se vea como una plataforma
   deportiva propia (estilo ESPN/Sofascore), no como una pagina mas del
   tema dorado/foto de fondo del resto del sitio. */
.ft-body { background: #050505; }

/* ---------------------------------------------------------------------
 *  02/09/2026 — reskin al estilo de /normas, /guia y /toys (pedido
 *  expreso). Sobrescribe SOLO dentro de .ft-body los tokens compartidos
 *  que reusa esta hoja (--dorado, --verde, --borde, --fondo-tarjeta...),
 *  sin tocar sus valores en :root de styles.css -- el resto del sitio
 *  (dashboard, panel, mercado...) sigue con la paleta dorada de siempre.
 *  Paleta calcada de /normas: negro #050505, panel #0c0c0c, verde
 *  #a6e022, rosa #ff2f92 (por eso --f-rojo de arriba pasa a rosa), radio
 *  de esquina mas seco (4px) en vez del muy redondeado original.
 * --------------------------------------------------------------------- */
.ft-body {
  --dorado: #a6e022;
  --dorado-suave: #c3f24d;
  --verde: #a6e022;
  --borde: rgba(255, 255, 255, 0.10);
  --fondo-panel: #0c0c0c;
  --fondo-tarjeta: #0c0c0c;
  --fondo-tarjeta-hover: #141414;
  --sup-tarjeta: #0c0c0c;
  --texto-tenue: #b9b9bd;
  --radio: 4px;
  --radio-chico: 4px;
  --sombra-tarjeta: none;
  --luz-superior: none;
}

.ft-pagina {
  max-width: 1180px;
  margin: 0 auto;
  padding: 96px 24px 80px;
}

.ft-pagina-ancha { max-width: 1280px; }

/* --- Cabecera de marca, mas compacta que la de /guia --- */
.ft-marca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 22px;
}
/* Lockup en dos lineas (27/08/2026, pedido explicitamente como "letras
   nuevas"): GAMEROL pequeño y espaciado arriba en el dorado de siempre
   (es la marca real del sitio, no se toca), FUTBOL grande y condensado
   debajo en rojo -- mismo espiritu de peso tipografico que las
   referencias, sin adoptar el nombre/logo "GAMEROL SPORTS" que traian
   esas imagenes (esta seccion sigue llamandose Futbol). Impact/Arial
   Narrow Bold son fuentes de sistema (Windows/Mac las traen ya
   instaladas) -- se evita cargar Google Fonts solo para este titulo y
   asi no hace falta tocar la CSP de font-src/style-src.  */
.ft-marca-titulo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.ft-marca-gamerol {
  font-family: var(--fuente-drip);
  font-weight: 400;
  font-size: clamp(11px, 1.6vw, 13px);
  letter-spacing: 3px;
  background: linear-gradient(180deg, var(--dorado-suave) 8%, var(--dorado) 55%, #5f7a17 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ft-marca-sub {
  font-family: var(--fuente-drip), Impact, 'Arial Narrow Bold', sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 6vw, 40px);
  letter-spacing: .5px;
  line-height: 1;
  color: var(--f-rojo-suave);
  text-shadow: 0 2px 14px rgba(255, 47, 146, .35);
}

.ft-migas {
  font-size: 12px; color: var(--texto-apagado); font-weight: 600;
}
.ft-migas a { color: var(--texto-tenue); }
.ft-migas a:hover { color: var(--f-rojo-suave); }

/* --- Menu superior fijo (Inicio/Partidos/Clasificacion/Jugadores/
   Noticias), en las 8 paginas de Futbol. Scroll horizontal sin
   scrollbar visible en movil, mismo patron que .subtabs-barra. --- */
.ft-menu {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: 20px;
  padding-bottom: 2px;
}
.ft-menu::-webkit-scrollbar { display: none; }
.ft-menu-link {
  flex: none;
  display: flex;
  align-items: center;
  min-height: 40px;
  font-size: 13px;
  font-weight: 700;
  color: var(--texto-tenue);
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: color var(--trans), border-color var(--trans), background var(--trans);
}
.ft-menu-link:hover { color: var(--texto); border-color: var(--borde); }
.ft-menu-link.activo {
  background: var(--f-rojo-tinta);
  border-color: var(--f-borde-rojo);
  color: var(--f-rojo-suave);
}

/* --- Barra de ligas: mismo componente que el resto del sitio, pero el
   estado activo usa el acento rojo de futbol en vez del dorado. --- */
.ft-ligas.subtabs-barra { margin-bottom: 22px; }
.ft-ligas .subtab-btn.activa {
  background: var(--f-rojo-tinta);
  border-color: var(--f-borde-rojo);
  color: var(--f-rojo-suave);
  box-shadow: var(--luz-superior), 0 2px 12px -4px rgba(255, 47, 146, .4);
}
.ft-ligas .subtab-btn:hover { border-color: var(--f-borde-rojo); }

.ft-cargando, .ft-vacio {
  text-align: center; color: var(--texto-tenue); font-size: 13.5px; padding: 34px 10px;
}
.ft-error {
  text-align: center; color: var(--f-rojo-suave); font-size: 13.5px; padding: 34px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.ft-error p { margin: 0; }

.ft-tarjeta {
  background: var(--sup-tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--luz-superior), var(--sombra-tarjeta);
  overflow: hidden;
  transition: box-shadow var(--trans);
}
.ft-tarjeta:hover { box-shadow: var(--luz-superior), var(--sombra-tarjeta), 0 10px 26px -12px rgba(0, 0, 0, .5); }

/* --- Skeleton loaders: sustituyen al "Cargando..." de texto plano
   mientras llega la respuesta real (o hasta que el reintento del error
   vuelve a pedirla). Shimmer CSS puro con los tokens de superficie del
   tema oscuro -- fase 2 de pulido (27/08/2026). --- */
@keyframes ft-shimmer { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
.ft-skel-b {
  display: inline-block;
  background: linear-gradient(100deg, var(--fondo-panel) 35%, var(--borde) 50%, var(--fondo-panel) 65%);
  background-size: 250% 100%;
  animation: ft-shimmer 1.4s ease-in-out infinite;
  border-radius: 5px;
  vertical-align: middle;
}
.ft-skel-circulo { border-radius: 50%; flex: none; }
.ft-skel-clas-fila { display: flex; align-items: center; gap: 10px; padding: 8px 6px; }
.ft-skel-clas-fila:not(:last-child) { border-bottom: 1px solid var(--borde); }

.ft-seccion-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--borde);
}
.ft-seccion-titulo { font-size: 13.5px; font-weight: 800; letter-spacing: .3px; color: var(--texto); display: flex; align-items: center; gap: 8px; }
.ft-seccion-titulo::before { content: ''; width: 3px; height: 14px; background: var(--f-rojo); border-radius: 2px; display: inline-block; }
.ft-vertodo { font-size: 11.5px; font-weight: 700; color: var(--texto-tenue); }
.ft-vertodo:hover { color: var(--f-rojo-suave); }

/* .ft-escudo-md/-lg/-xl SOLO cambian el tamano: van siempre combinadas con
   .ft-escudo (class="ft-escudo ft-escudo-lg"), nunca solas -- si van solas
   se pierden object-fit/border-radius/background y un escudo no cuadrado
   sale deformado (bug real visto en /laliga/jugadores el 27/08/2026, ver
   futbol-jugadores.js). */
.ft-escudo { width: 24px; height: 24px; object-fit: contain; flex: none; border-radius: 3px; background: var(--fondo-tarjeta); }
.ft-escudo-md { width: 34px; height: 34px; }
.ft-escudo-lg { width: 84px; height: 84px; }
.ft-escudo-xl { width: 120px; height: 120px; }

/* =====================================================================
 *  HOME (/laliga) — hero + resultados + proximos + lateral
 * ===================================================================== */
.ft-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}
.ft-col-principal { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ft-col-lateral { display: flex; flex-direction: column; gap: 20px; }

/* --- Hero: partido en directo o proximo destacado --- */
.ft-hero {
  position: relative;
  background: linear-gradient(163deg, #0e0e0e 0%, #0c0c0c 60%, #0c0c0c 100%);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--luz-superior), var(--sombra-tarjeta);
  padding: 26px 28px;
  text-align: center;
  overflow: hidden;
}
.ft-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% -10%, rgba(255, 47, 146, .16), transparent 60%);
  pointer-events: none;
}
/* Textura sutil de fondo -- lineas diagonales muy tenues, puro CSS (nada
   de foto de estadio real, pedido asi expresamente en la fase 2 de pulido
   del 27/08/2026) para dar mas peso visual al hero sin distraer. */
.ft-hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0px, rgba(255, 255, 255, .025) 1px, transparent 1px, transparent 22px);
  pointer-events: none;
}
/* Fondo de estadio cuando hay un partido de verdad que mostrar -- en
   directo O a la espera de empezar (clases puestas por laliga.js/
   futbol-partido.js segun el estado real del partido; nunca en un
   resultado ya finalizado ni cuando no hay ningun partido destacado).
   Pedido asi expresamente el 27/08/2026: el usuario queria el fondo
   tambien en la cuenta atras, no solo cuando ya esta en directo. Imagen
   propia guardada en /img/futbol/, no una foto de stock de terceros. El
   degradado encima es el mismo negro de fondo del sitio, para que el
   texto siga legible igual que sin imagen -- un pelin mas oscuro en
   directo para que el rojo de "EN DIRECTO" siga siendo lo que mas
   destaque. */
.ft-hero.en-vivo, .ft-hero.proximo, .ft-partido-cab.en-vivo, .ft-partido-cab.proximo {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.8) 55%, rgba(0,0,0,.94) 100%),
    url('/img/futbol/estadio-directo.jpg');
  background-size: cover;
  background-position: center 35%;
}
.ft-hero.en-vivo, .ft-partido-cab.en-vivo {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.72) 55%, rgba(0,0,0,.9) 100%),
    url('/img/futbol/estadio-directo.jpg');
}

.ft-hero-etiqueta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: var(--texto-apagado); margin-bottom: 14px;
}
.ft-hero-etiqueta.en-vivo { color: var(--f-rojo-suave); }
.ft-hero-etiqueta.en-vivo::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--f-rojo);
  animation: ft-latido 1.3s ease-in-out infinite;
}
@keyframes ft-latido { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.ft-hero-partido {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  position: relative;
  z-index: 1;
}
.ft-hero-equipo { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.ft-hero-equipo .ft-escudo { width: 64px; height: 64px; }
.ft-hero-equipo-nombre { font-size: 15px; font-weight: 800; color: var(--texto); text-align: center; overflow: hidden; text-overflow: ellipsis; max-width: 200px; white-space: nowrap; }

.ft-hero-centro { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 90px; }
.ft-hero-marcador { font-size: 40px; font-weight: 900; color: var(--texto); letter-spacing: 1px; text-shadow: 0 2px 12px rgba(255, 47, 146, .35); }
.ft-hero-vs { font-size: 20px; font-weight: 800; color: var(--texto-apagado); }
.ft-hero-hora { font-size: 12.5px; font-weight: 700; color: var(--texto-tenue); }
.ft-hero-jornada { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--texto-apagado); }

.ft-hero-cuenta { display: flex; gap: 8px; justify-content: center; margin-top: 16px; position: relative; z-index: 1; }
.ft-hero-cuenta-item { background: var(--fondo-tarjeta); border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 8px 12px; min-width: 54px; text-align: center; }
.ft-hero-cuenta-num { font-size: 18px; font-weight: 800; color: var(--texto); }
.ft-hero-cuenta-lbl { font-size: 9px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--texto-apagado); }

.ft-hero-accion { margin-top: 18px; position: relative; z-index: 1; }
.ft-hero-accion .btn { display: inline-flex; width: auto; min-width: 160px; min-height: 44px; font-size: 14.5px; }

/* --- Filas de partido (resultados / proximos / listado) ---------------
   Tarjeta vertical: equipo local arriba, marcador o VS en medio, equipo
   visitante abajo. Mismo bloque a cualquier ancho -- no depende de un
   grid-template-areas distinto en movil, asi que es fluido de verdad en
   vez de "romperse mejor". En pantallas anchas varias tarjetas caben una
   al lado de otra (ver .ft-lista abajo). --- */
.ft-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; padding: 14px 16px 16px; }
.ft-fila-partido {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--fondo-panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  padding: 12px 14px 14px;
  transition: border-color var(--trans), background var(--trans), transform var(--trans), box-shadow var(--trans);
  color: inherit;
  min-width: 0;
}
a.ft-fila-partido:hover { border-color: var(--f-borde-rojo); background: var(--fondo-tarjeta-hover); transform: translateY(-2px); box-shadow: var(--luz-superior), var(--sombra-tarjeta); }

.ft-fp-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ft-fp-fecha { font-size: 10.5px; font-weight: 700; color: var(--texto-apagado); text-transform: capitalize; }
.ft-fp-estado { font-size: 10px; font-weight: 800; letter-spacing: .4px; color: var(--texto-apagado); }
.ft-fp-estado.vivo { color: var(--f-rojo-suave); display: flex; align-items: center; gap: 4px; }
.ft-fp-estado.vivo::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--f-rojo); animation: ft-latido 1.3s ease-in-out infinite; }

.ft-fp-cuerpo { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ft-fp-equipo { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; font-size: 13.5px; font-weight: 700; color: var(--texto); }
.ft-fp-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-fp-centro { display: flex; align-items: center; justify-content: center; }
.ft-fp-centro-marcador { font-size: 17px; font-weight: 800; color: var(--texto); }
.ft-fp-centro-marcador .sep { color: var(--texto-apagado); font-weight: 600; margin: 0 4px; }
.ft-fp-centro-vs { font-size: 11px; font-weight: 800; letter-spacing: .5px; color: var(--texto-apagado); padding: 2px 10px; border: 1px solid var(--borde); border-radius: 999px; }

/* --- Clasificacion lateral / completa --- */
.ft-clas-tabla { width: 100%; border-collapse: collapse; font-size: 12px; }
.ft-clas-tabla th, .ft-clas-tabla td { padding: 8px 6px; text-align: center; white-space: nowrap; }
.ft-clas-tabla th { color: var(--texto-apagado); font-weight: 700; font-size: 9.5px; text-transform: uppercase; letter-spacing: .3px; border-bottom: 1px solid var(--borde); }
.ft-clas-tabla td.eq { text-align: left; font-weight: 700; color: var(--texto); }
.ft-clas-tabla td.eq a, .ft-clas-tabla td.eq span { display: flex; align-items: center; gap: 8px; color: var(--texto); }
.ft-clas-tabla td.eq a:hover { color: var(--f-rojo-suave); }
.ft-clas-tabla td.pts { font-weight: 800; color: var(--dorado); }
.ft-clas-tabla tr:not(:last-child) td { border-bottom: 1px solid var(--borde); }
.ft-clas-tabla tr.top td.eq { border-left: 2px solid var(--verde); }
.ft-clas-tabla tr.descenso td.eq { border-left: 2px solid var(--f-rojo); }
.ft-clas-tabla td.pos { font-weight: 800; color: var(--texto-tenue); }
.ft-clas-envoltorio { padding: 8px 8px 14px; overflow-x: auto; }
.ft-clas-filtros { display: flex; gap: 6px; padding: 4px 16px 0; }

/* --- Goleadores --- */
.ft-goleadores { display: flex; flex-direction: column; padding: 6px 16px 14px; }
.ft-gol-fila { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--borde); }
.ft-gol-fila:last-child { border-bottom: none; }
.ft-gol-pos { width: 16px; font-size: 12px; font-weight: 800; color: var(--texto-apagado); flex: none; }
.ft-gol-foto { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; background: var(--fondo-tarjeta); }
.ft-gol-info { flex: 1; min-width: 0; }
.ft-gol-nombre { font-size: 13px; font-weight: 700; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-gol-equipo { font-size: 11px; color: var(--texto-tenue); display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.ft-gol-equipo .ft-escudo { width: 14px; height: 14px; }
.ft-gol-num { font-size: 16px; font-weight: 800; color: var(--dorado); flex: none; }

/* --- Icono de avisos WhatsApp + panel desplegable (27/08/2026) ---------
   Antes era una tarjeta grande en medio de la pagina; ahora es un icono
   junto a las pestañas de liga, con un interruptor por liga dentro. --- */
.ft-wa-anclaje { position: relative; flex: none; }
.ft-wa-boton {
  position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: var(--sup-tarjeta); border: 1px solid var(--borde); border-radius: 50%; color: var(--texto-tenue);
  cursor: pointer; transition: border-color var(--trans), color var(--trans);
}
.ft-wa-boton:hover, .ft-wa-boton[aria-expanded="true"] { border-color: var(--f-borde-rojo); color: var(--f-rojo-suave); }
.ft-wa-punto { position: absolute; top: 6px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); border: 2px solid var(--sup-tarjeta); }

.ft-wa-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 20; width: 280px; max-width: 88vw;
  background: var(--sup-tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--luz-superior), 0 12px 32px -8px rgba(0,0,0,.5);
  overflow: hidden;
}
.ft-wa-panel-cab { font-size: 12.5px; font-weight: 800; color: var(--texto); padding: 14px 16px; border-bottom: 1px solid var(--borde); display: flex; align-items: center; gap: 8px; }
.ft-wa-panel-cuerpo { padding: 14px 16px 16px; }

.ft-wa-form { display: flex; gap: 8px; flex-wrap: wrap; }
.ft-wa-form input {
  flex: 1; min-width: 0; padding: 10px 12px; background: var(--fondo-tarjeta);
  border: 1px solid var(--borde); color: var(--texto); border-radius: var(--radio-chico); font-size: 14px;
}
.ft-wa-form input:focus { outline: none; border-color: var(--f-borde-rojo); }
.ft-wa-nota { font-size: 10.5px; color: var(--texto-apagado); margin-top: 8px; line-height: 1.4; }

.ft-wa-numero { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--texto); margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--borde); }
.ft-wa-desvincular { background: none; border: none; color: var(--texto-apagado); font-size: 10.5px; font-weight: 700; cursor: pointer; padding: 0; }
.ft-wa-desvincular:hover { color: var(--f-rojo-suave); }
.ft-wa-ligas-lista { display: flex; flex-direction: column; gap: 4px; }
.ft-wa-liga-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 2px; font-size: 13px; font-weight: 700; color: var(--texto); }

.ft-switch { position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px; background: var(--fondo-tarjeta); border: 1px solid var(--borde); cursor: pointer; padding: 0; transition: background var(--trans), border-color var(--trans); }
.ft-switch-bola { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--texto-apagado); transition: transform var(--trans), background var(--trans); }
.ft-switch.activo { background: var(--f-rojo-tinta); border-color: var(--f-borde-rojo); }
.ft-switch.activo .ft-switch-bola { transform: translateX(16px); background: var(--f-rojo-suave); }

.ft-btn-rojo {
  background: linear-gradient(180deg, var(--f-rojo-suave), var(--f-rojo) 60%, #a3186b 100%);
  color: #fff; border: none; font-weight: 800; font-size: 13px; padding: 10px 16px;
  border-radius: var(--radio-chico); cursor: pointer; transition: filter var(--trans);
}
.ft-btn-rojo:hover { filter: brightness(1.08); }

/* =====================================================================
 *  CLASIFICACION COMPLETA
 * ===================================================================== */
.ft-clas-completa .ft-clas-tabla { font-size: 13px; }
.ft-clas-completa .ft-clas-tabla th, .ft-clas-completa .ft-clas-tabla td { padding: 10px 8px; }
.ft-leyenda { display: flex; gap: 16px; flex-wrap: wrap; padding: 10px 16px 16px; font-size: 11px; color: var(--texto-tenue); }
.ft-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.ft-leyenda i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.ft-leyenda i.top { background: var(--verde); }
.ft-leyenda i.descenso { background: var(--f-rojo); }

/* =====================================================================
 *  LISTADO DE PARTIDOS
 * ===================================================================== */
.ft-filtros-partidos { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.ft-select {
  background: var(--fondo-tarjeta); border: 1px solid var(--borde); color: var(--texto);
  border-radius: var(--radio-chico); padding: 9px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ft-select:focus { outline: none; border-color: var(--f-borde-rojo); }
.ft-grupo-fecha { margin-bottom: 18px; }
.ft-grupo-fecha-titulo {
  font-size: 12px; font-weight: 800; letter-spacing: .3px; text-transform: capitalize;
  color: var(--texto-tenue); padding: 0 2px 10px; display: flex; align-items: center; gap: 8px;
}
.ft-grupo-fecha-titulo::before { content: ''; width: 3px; height: 12px; background: var(--f-rojo); border-radius: 2px; }

/* =====================================================================
 *  PARTIDO (detalle)
 * ===================================================================== */
.ft-partido-cab {
  background: linear-gradient(163deg, #0e0e0e 0%, #0c0c0c 60%, #0c0c0c 100%);
  border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--luz-superior), var(--sombra-tarjeta);
  padding: 30px 28px; text-align: center; margin-bottom: 20px;
}
.ft-partido-liga { font-size: 11.5px; font-weight: 700; color: var(--texto-apagado); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.ft-partido-estado { font-size: 12px; font-weight: 800; color: var(--texto-tenue); margin-bottom: 18px; }
.ft-partido-estado.vivo { color: var(--f-rojo-suave); display: inline-flex; align-items: center; gap: 6px; }
.ft-partido-estado.vivo::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--f-rojo); animation: ft-latido 1.3s ease-in-out infinite; }
.ft-partido-equipos { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.ft-partido-equipo { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ft-partido-equipo-nombre { font-size: 17px; font-weight: 800; color: var(--texto); }
.ft-partido-marcador { font-size: 46px; font-weight: 900; color: var(--texto); }
.ft-partido-hora { font-size: 13px; color: var(--texto-tenue); margin-top: 14px; }

.ft-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 16px; }
.ft-tab-btn {
  background: var(--sup-tarjeta); border: 1px solid var(--borde); color: var(--texto-tenue);
  font-size: 12.5px; font-weight: 700; padding: 9px 16px; border-radius: 999px; cursor: pointer; flex: none;
  transition: all var(--trans);
}
.ft-tab-btn:hover { border-color: var(--f-borde-rojo); color: var(--texto); }
.ft-tab-btn.activa { background: var(--f-rojo-tinta); border-color: var(--f-borde-rojo); color: var(--f-rojo-suave); }
.ft-tab-panel { display: none; }
.ft-tab-panel.activa { display: block; }
.ft-no-disponible {
  text-align: center; padding: 40px 20px; color: var(--texto-apagado); font-size: 13.5px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.ft-no-disponible-ico { font-size: 30px; opacity: .5; }

/* =====================================================================
 *  EQUIPO
 * ===================================================================== */
.ft-equipo-cab {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  background: var(--sup-tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--luz-superior), var(--sombra-tarjeta); padding: 26px 28px; margin-bottom: 22px;
}
.ft-equipo-datos { flex: 1; min-width: 200px; }
.ft-equipo-nombre { font-size: 24px; font-weight: 900; color: var(--texto); margin-bottom: 8px; }
.ft-equipo-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12.5px; color: var(--texto-tenue); }
.ft-equipo-meta b { color: var(--texto); font-weight: 700; }

.ft-plantilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.ft-jugador-tarjeta {
  background: var(--fondo-panel); border: 1px solid var(--borde); border-radius: var(--radio-chico);
  padding: 14px; text-align: center; color: inherit; transition: border-color var(--trans), transform var(--trans), box-shadow var(--trans);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.ft-jugador-tarjeta:hover { border-color: var(--f-borde-rojo); transform: translateY(-2px); box-shadow: var(--luz-superior), var(--sombra-tarjeta); }
.ft-jugador-foto { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; background: var(--fondo-tarjeta); }
.ft-jugador-nombre { font-size: 13px; font-weight: 700; color: var(--texto); }
.ft-jugador-pos { font-size: 11px; color: var(--texto-tenue); }
.ft-jugador-dorsal { font-size: 10.5px; font-weight: 800; color: var(--f-rojo-suave); }

/* =====================================================================
 *  JUGADOR
 * ===================================================================== */
.ft-jugador-cab {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  background: var(--sup-tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--luz-superior), var(--sombra-tarjeta); padding: 28px; margin-bottom: 22px;
}
.ft-jugador-foto-grande { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; background: var(--fondo-tarjeta); border: 2px solid var(--f-borde-rojo); }
.ft-jugador-cab-nombre { font-size: 24px; font-weight: 900; color: var(--texto); margin-bottom: 6px; }
.ft-jugador-cab-pos { font-size: 13px; color: var(--f-rojo-suave); font-weight: 700; margin-bottom: 10px; }
.ft-jugador-cab-equipo { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-tenue); }
.ft-jugador-cab-equipo a { display: flex; align-items: center; gap: 8px; color: var(--texto-tenue); }
.ft-jugador-cab-equipo a:hover { color: var(--f-rojo-suave); }

.ft-datos-tabla { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1px; background: var(--borde); border: 1px solid var(--borde); border-radius: var(--radio-chico); overflow: hidden; }
.ft-dato { background: var(--fondo-panel); padding: 14px 16px; }
.ft-dato-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--texto-apagado); margin-bottom: 4px; }
.ft-dato-val { font-size: 15px; font-weight: 700; color: var(--texto); }

/* =====================================================================
 *  JUGADORES -- liga elegida -> cuadricula de equipos de esa liga.
 *  Cada equipo entra a /laliga/equipo/:id, que ya lista la plantilla
 *  completa con foto (no se duplica esa vista aqui).
 * ===================================================================== */
.ft-buscador-jugadores { margin-bottom: 18px; }
.ft-input-buscar {
  width: 100%; background: var(--sup-tarjeta); border: 1px solid var(--borde); color: var(--texto);
  border-radius: var(--radio-chico); padding: 12px 16px; font-size: 14px; font-family: inherit;
}
.ft-input-buscar:focus { outline: none; border-color: var(--f-borde-rojo); }
.ft-input-buscar::placeholder { color: var(--texto-apagado); }

.ft-equipos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ft-equipo-tarjeta {
  background: var(--fondo-panel); border: 1px solid var(--borde); border-radius: var(--radio-chico);
  padding: 20px 14px; text-align: center; color: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  transition: border-color var(--trans), transform var(--trans), background var(--trans), box-shadow var(--trans);
}
.ft-equipo-tarjeta:hover { border-color: var(--f-borde-rojo); background: var(--fondo-tarjeta-hover); transform: translateY(-2px); box-shadow: var(--luz-superior), var(--sombra-tarjeta); }
.ft-equipo-tarjeta-nombre { font-size: 13px; font-weight: 700; color: var(--texto); }

/* =====================================================================
 *  NOTICIAS
 * ===================================================================== */
.ft-noticias-aviso {
  font-size: 11.5px; color: var(--texto-apagado); line-height: 1.5;
  padding: 10px 14px; margin-bottom: 18px; border: 1px solid var(--borde);
  border-radius: var(--radio-chico); background: var(--fondo-panel);
}
.ft-noticias-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ft-noticia-tarjeta {
  display: flex; flex-direction: column; background: var(--sup-tarjeta); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--luz-superior), var(--sombra-tarjeta); overflow: hidden;
  color: inherit; transition: border-color var(--trans), transform var(--trans);
}
.ft-noticia-tarjeta:hover { border-color: var(--f-borde-rojo); transform: translateY(-2px); }
.ft-noticia-img { width: 100%; height: 150px; object-fit: cover; background: var(--fondo-panel); flex: none; }
.ft-noticia-img-vacia { display: flex; align-items: center; justify-content: center; font-size: 30px; opacity: .35; }
.ft-noticia-cuerpo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ft-noticia-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ft-noticia-fuente {
  font-size: 10px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  color: var(--f-rojo-suave); background: var(--f-rojo-tinta); border: 1px solid var(--f-borde-rojo);
  border-radius: 999px; padding: 3px 9px;
}
.ft-noticia-fecha { font-size: 11px; color: var(--texto-apagado); flex: none; }
.ft-noticia-titulo { font-size: 13.5px; font-weight: 700; color: var(--texto); line-height: 1.4; }

/* =====================================================================
 *  RESPONSIVE
 * ===================================================================== */
@media (max-width: 900px) {
  .ft-layout { grid-template-columns: 1fr; }
  .ft-hero-equipo-nombre { max-width: 120px; font-size: 13px; }
  .ft-hero-equipo .ft-escudo { width: 48px; height: 48px; }
  .ft-hero-marcador { font-size: 26px; }
}

@media (max-width: 560px) {
  .ft-pagina { padding: 28px 12px 50px; }
  .ft-marca { margin-bottom: 16px; }
  .ft-menu { margin-bottom: 16px; }
  .ft-ligas.subtabs-barra { margin-bottom: 16px; }
  .ft-lista { grid-template-columns: 1fr; padding: 10px 12px 12px; }
  .ft-seccion-cab { padding: 12px 14px; }
  .ft-hero { padding: 18px 14px; }
  .ft-hero-partido { gap: 6px; }
  .ft-hero-equipo-nombre { max-width: 96px; font-size: 12px; }
  .ft-hero-equipo .ft-escudo { width: 42px; height: 42px; }
  .ft-hero-marcador { font-size: 24px; }
  .ft-hero-cuenta-item { min-width: 46px; padding: 7px 8px; }
  .ft-hero-accion .btn { width: 100%; min-width: 0; }
  .ft-partido-equipos { gap: 10px; }
  .ft-partido-equipo-nombre { font-size: 13px; }
  .ft-partido-equipo .ft-escudo-lg { width: 56px; height: 56px; }
  .ft-partido-marcador { font-size: 32px; }
  .ft-equipo-cab, .ft-jugador-cab { padding: 18px; gap: 14px; flex-direction: column; text-align: center; }
  .ft-equipo-meta { justify-content: center; }
  .ft-jugador-cab-equipo { justify-content: center; }
  .ft-jugador-foto-grande { width: 84px; height: 84px; }
  .ft-plantilla { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
  .ft-datos-tabla { grid-template-columns: 1fr 1fr; }
  .ft-tabs { gap: 4px; }
  .ft-tab-btn { padding: 8px 12px; font-size: 11.5px; }
  .ft-filtros-partidos { gap: 8px; }
  .ft-select { flex: 1; min-width: 0; }
  .ft-wa-panel { position: fixed; top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; max-width: none; }
  .ft-equipos-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
  .ft-equipo-tarjeta { padding: 14px 8px; }
  .ft-noticias-grid { grid-template-columns: 1fr; gap: 10px; }
  .ft-noticia-img { height: 130px; }
}

/* Zona tactil minima recomendada en botones/enlaces clicables de movil. */
@media (max-width: 560px) {
  .ft-fila-partido, .ft-jugador-tarjeta, .ft-tab-btn, .ft-btn-rojo, .subtab-btn { min-height: 40px; }
}