/**
 * Jugadores: cromo, listado con filtro, ficha y trayectoria. También la
 * plantilla de la ficha de club, que usa los mismos cromos.
 *
 * Se carga solo en esas páginas (ver inc/assets.php). Medidas desde los
 * tokens de la hoja global.
 *
 * Colores del club (inc/colores.php), como variables en el style de cada
 * cromo o cabecera: --lfc-club-fondo (principal oscurecido para que el
 * blanco se lea), --lfc-club-acento (texto: secundario claro, o blanco) y
 * --lfc-club-franja (el filete, con el secundario tal cual). Sin club, el
 * navy y el verde de la liga.
 *
 * @version 0.6.0
 *
 * Changelog
 * 0.5.0 — Primera versión. Sin foto se pinta la silueta del jugador como
 *         máscara: así toma el color que toque sin tener un PNG por club.
 * 0.6.0 — Colores del club en el cromo (fondo y franja) y en la cabecera de
 *         la ficha (fondo, franja inferior, club, cifras).
 */

/* ---------------------------------------------------------------------------
 * Cromos
 * ------------------------------------------------------------------------ */

.lfc-cromos {
	list-style: none;
	margin: var(--lfc-space-3) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.25rem), 1fr));
	gap: var(--lfc-space-2);
}

.lfc-cromos > li { display: grid; min-width: 0; }
.lfc-cromos--club { margin-top: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); }

.lfc .lfc-cromo {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border: 1px solid var(--lfc-color-borde);
	border-radius: var(--lfc-radius-m);
	overflow: hidden;
	background: #fff;
	color: var(--lfc-color-navy);
	transition: border-color .15s, transform .15s;
}

.lfc .lfc-cromo:hover { border-color: var(--lfc-color-verde); color: var(--lfc-color-navy); transform: translateY(-2px); }

.lfc-cromo__foto {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	background:
		radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.14), transparent 60%),
		linear-gradient(to bottom, transparent 45%, rgba(0, 0, 0, 0.28)),
		var(--lfc-club-fondo, var(--lfc-color-navy));
	border-bottom: 4px solid var(--lfc-club-franja, var(--lfc-color-verde));
	overflow: hidden;
}

.lfc-cromo__foto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* La silueta: el PNG solo pone la forma (su canal alfa); el color es el del fondo. */
.lfc-cromo__foto--silueta::before,
.lfc-jugador-cabecera__foto--silueta::before {
	content: '';
	position: absolute;
	inset: 14% 16% 0;
	background: rgba(255, 255, 255, 0.22);
	-webkit-mask: url(../img/silueta-jugador.png) center bottom / contain no-repeat;
	mask: url(../img/silueta-jugador.png) center bottom / contain no-repeat;
}

.lfc-cromo__puesto {
	position: absolute;
	top: var(--lfc-space-15);
	left: var(--lfc-space-15);
	padding: var(--lfc-space-05) var(--lfc-space-1);
	border-radius: var(--lfc-radius-pastilla);
	background: var(--lfc-color-verde);
	color: var(--lfc-color-navy-profundo);
	font-family: var(--lfc-fuente-mono);
	font-size: var(--lfc-text-xs);
	font-weight: 600;
	line-height: 1.3;
}

.lfc-cromo__pie {
	display: flex;
	flex-direction: column;
	gap: var(--lfc-space-05);
	padding: var(--lfc-space-15) var(--lfc-space-15) var(--lfc-space-2);
	min-width: 0;
}

.lfc-cromo__nombre {
	font-family: var(--lfc-fuente-titulos);
	font-weight: 700;
	font-size: var(--lfc-text-3xl);
	line-height: 1.05;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.lfc-cromo__club {
	display: flex;
	align-items: center;
	gap: var(--lfc-space-1);
	min-width: 0;
	font-size: var(--lfc-text-sm);
	color: var(--lfc-color-texto-suave);
}

.lfc-cromo__escudo { width: 1.25rem; height: 1.25rem; object-fit: contain; flex-shrink: 0; }
.lfc-cromo__escudo.lfc-escudo--vacio { font-size: 0.5rem; }

/* ---------------------------------------------------------------------------
 * Listado: filtro y cuenta
 * ------------------------------------------------------------------------ */

/* Anchos fijos: en % dentro de la cabecera flexible el ancho sería circular y
   el formulario se partiría en dos líneas aunque cupiese. */
.lfc-filtro { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lfc-space-1); }
.lfc-filtro .lfc-buscador { width: 15rem; }

.lfc-selector { display: block; width: 13.75rem; }

.lfc .lfc-selector select {
	width: 100%;
	appearance: none;
	border: 1px solid var(--lfc-color-borde-fuerte);
	border-radius: var(--lfc-radius-pastilla);
	padding: var(--lfc-space-15) var(--lfc-space-45) var(--lfc-space-15) var(--lfc-space-2);
	font: inherit;
	font-size: var(--lfc-text-md);
	color: var(--lfc-color-navy);
	background:
		#fff
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2310233D' stroke-width='2'/%3E%3C/svg%3E")
		no-repeat right var(--lfc-space-2) center;
}

.lfc .lfc-selector select:focus { border-color: var(--lfc-color-verde); outline: none; box-shadow: 0 0 0 3px rgba(20, 164, 74, 0.25); }
.lfc .lfc-filtro .lfc-boton { padding: var(--lfc-space-15) var(--lfc-space-25); }

.lfc-jugadores__cuenta { margin: var(--lfc-space-25) 0 0; font-size: var(--lfc-text-md); color: var(--lfc-color-texto-medio); }
.lfc .lfc-jugadores__cuenta a { color: var(--lfc-color-verde-oscuro); font-weight: 600; }

@media (max-width: 600px) {
	.lfc-filtro,
	.lfc-filtro .lfc-buscador,
	.lfc-selector { width: 100%; }
	.lfc .lfc-filtro .lfc-boton { flex: 1 1 auto; }
	.lfc-cromos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lfc-space-15); }
	.lfc-cromo__nombre { font-size: var(--lfc-text-2xl); }
}

/* ---------------------------------------------------------------------------
 * Ficha de jugador
 * ------------------------------------------------------------------------ */

.lfc-jugador-cabecera {
	background:
		radial-gradient(90% 120% at 100% 0%, rgba(255, 255, 255, 0.08), transparent 60%),
		linear-gradient(to bottom, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.3)),
		var(--lfc-club-fondo, var(--lfc-color-navy));
	border-bottom: 6px solid var(--lfc-club-franja, var(--lfc-color-verde));
	color: #fff;
}

.lfc-jugador-cabecera .lfc-antetitulo--claro { color: var(--lfc-club-acento, var(--lfc-color-verde-claro)); }

.lfc-jugador-cabecera__dentro {
	max-width: var(--lfc-container-interior);
	margin: 0 auto;
	padding: var(--lfc-space-5) var(--lfc-gutter-interior) var(--lfc-space-6);
}

.lfc-jugador-cabecera__fila { display: flex; align-items: flex-end; gap: var(--lfc-space-4); flex-wrap: wrap; }

.lfc-jugador-cabecera__foto {
	position: relative;
	flex: 0 0 auto;
	width: clamp(8.75rem, 6.5rem + 9vw, 13.75rem); /* 140 → 220 px */
	aspect-ratio: 4 / 5;
	border-radius: var(--lfc-radius-l);
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.lfc-jugador-cabecera__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.lfc-jugador-cabecera__datos { flex: 1 1 18rem; min-width: 0; }

.lfc .lfc-jugador-cabecera__club {
	display: inline-flex;
	align-items: center;
	gap: var(--lfc-space-15);
	font-family: var(--lfc-fuente-mono);
	font-size: var(--lfc-text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lfc-club-acento, var(--lfc-color-verde-claro));
}

.lfc .lfc-jugador-cabecera__club:hover { color: #fff; }

.lfc-jugador-cabecera__escudo {
	width: 2.5rem;
	height: 2.5rem;
	padding: var(--lfc-space-05);
	border-radius: var(--lfc-radius-s);
	background: #fff;
	object-fit: contain;
	box-sizing: border-box;
}

.lfc-jugador-cabecera__titulo {
	margin: var(--lfc-space-15) 0 0;
	font-family: var(--lfc-fuente-titulos);
	font-weight: 800;
	font-size: clamp(2.375rem, 5.4vw, 4rem);
	line-height: 0.95;
	text-transform: uppercase;
	color: #fff;
	overflow-wrap: anywhere;
}

.lfc-jugador-cabecera__apodo { margin: var(--lfc-space-1) 0 0; font-size: var(--lfc-text-xl); color: var(--lfc-color-claro-suave); }

.lfc-jugador-cabecera__cifras { margin: var(--lfc-space-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--lfc-space-2) var(--lfc-space-5); }
.lfc-jugador-cabecera__cifras > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }

.lfc-jugador-cabecera__cifras dt {
	font-family: var(--lfc-fuente-mono);
	font-size: var(--lfc-text-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lfc-color-claro-tenue);
}

.lfc-jugador-cabecera__cifras dd { margin: 0; display: flex; align-items: baseline; gap: var(--lfc-space-1); }

.lfc .lfc-jugador-cabecera__cifras dd a {
	font-family: var(--lfc-fuente-titulos);
	font-weight: 700;
	font-size: var(--lfc-titulo-xl);
	line-height: 1.1;
	color: var(--lfc-club-acento, var(--lfc-color-verde));
}

.lfc .lfc-jugador-cabecera__cifras dd a:hover { color: #fff; }
.lfc-jugador-cabecera__cifras dd span,
.lfc-jugador-cabecera__cifras dt { color: rgba(255, 255, 255, 0.7); }

@media (max-width: 600px) {
	.lfc-jugador-cabecera__fila { gap: var(--lfc-space-25); }
	.lfc-jugador-cabecera__foto { border-radius: var(--lfc-radius-m); }
}

.lfc-jugador__bio { margin-bottom: var(--lfc-space-5); }

/* Tarjeta «Su club» del lateral, con los colores del club. */
.lfc-lateral--club {
	background: var(--lfc-club-fondo, var(--lfc-color-navy));
	border-color: var(--lfc-club-fondo, var(--lfc-color-navy));
	border-bottom: 4px solid var(--lfc-club-franja, var(--lfc-color-navy));
}
.lfc-lateral--club .lfc-antetitulo--claro { color: var(--lfc-club-acento, var(--lfc-color-verde-claro)); }

/* Trayectoria: una fila por temporada. */
.lfc-trayectoria { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--lfc-space-1); }

.lfc-trayectoria__fila {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	align-items: center;
	gap: var(--lfc-space-15);
	padding: var(--lfc-space-15) var(--lfc-space-2);
	border: 1px solid var(--lfc-color-borde);
	border-radius: var(--lfc-radius-s);
	background: #fff;
}

.lfc-trayectoria__temporada { font-family: var(--lfc-fuente-mono); font-size: var(--lfc-text-sm); font-weight: 600; color: var(--lfc-color-verde-oscuro); }

.lfc .lfc-trayectoria__club { display: flex; align-items: center; gap: var(--lfc-space-15); min-width: 0; font-size: var(--lfc-text-base); font-weight: 600; color: var(--lfc-color-navy); }
.lfc .lfc-trayectoria__club:hover { color: var(--lfc-color-verde-oscuro); }
.lfc-trayectoria__club--nada { font-weight: 400; color: var(--lfc-color-texto-suave); }
.lfc-trayectoria__escudo { width: 2rem; height: 2rem; object-fit: contain; flex-shrink: 0; }

/* ---------------------------------------------------------------------------
 * Ficha de club: lo que añade la 0.5
 * ------------------------------------------------------------------------ */