/**
 * ============================================================
 * carta-jugador.css (v1.1)
 * Carta estilo "cromo de videojuego" con render lateral.
 * Diseño propio de Guafutbol (dark + lima neón), inspirado en
 * el género pero sin copiar IP de terceros.
 * Guardar en: /tu-tema/css/carta-jugador.css
 * ============================================================
 */

.gf-carta-wrap {
	display: flex;
	gap: 0;
	max-width: 720px;
	margin: 0 auto 30px;
	background: #12171d;
	border: 1px solid #2c333d;
	border-radius: 16px;
	overflow: hidden;
	position: relative;
}

/* --- Panel izquierdo: datos y atributos --- */
.gf-carta-panel {
	flex: 1 1 58%;
	padding: 24px 26px;
	min-width: 0;
	z-index: 2;
}

.gf-carta-encabezado {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid #222831;
	margin-bottom: 18px;
}
.gf-carta-global {
	text-align: center;
	flex-shrink: 0;
}
.gf-carta-global .num {
	font-size: 52px;
	font-weight: 900;
	color: #c8f31d;
	line-height: 1;
	text-shadow: 0 0 18px rgba(200, 243, 29, 0.35);
}
.gf-carta-global .lbl {
	font-size: 11px;
	color: #9aa2ad;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-top: 2px;
}
.gf-carta-global .pos {
	margin-top: 10px;
	font-size: 18px;
	font-weight: 800;
	color: #f2f2f2;
}
.gf-carta-global .pos-full {
	font-size: 11px;
	color: #9aa2ad;
}

.gf-carta-nombre {
	padding-top: 4px;
}
.gf-carta-nombre h2 {
	margin: 0 0 4px;
	font-size: 26px;
	font-weight: 900;
	color: #f2f2f2;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1.1;
}
.gf-carta-nombre .club {
	color: #9aa2ad;
	font-size: 13px;
}

/* --- Atributos (6 barras en 2 columnas) --- */
.gf-carta-attrs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 22px;
	margin-bottom: 18px;
}
.gf-attr .top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 4px;
}
.gf-attr .name { color: #c6ccd3; font-size: 13px; }
.gf-attr .val  { color: #c8f31d; font-size: 15px; font-weight: 800; }
.gf-attr .bar {
	height: 6px;
	background: #222831;
	border-radius: 4px;
	overflow: hidden;
}
.gf-attr .bar span {
	display: block;
	height: 100%;
	background: #c8f31d;
	border-radius: 4px;
}

/* --- Ficha rápida (edad / altura / pie) --- */
.gf-carta-ficha {
	display: flex;
	border-top: 1px solid #222831;
	padding-top: 14px;
}
.gf-carta-ficha .item {
	flex: 1;
	text-align: center;
	font-size: 12px;
	color: #9aa2ad;
	border-right: 1px solid #222831;
}
.gf-carta-ficha .item:last-child { border-right: none; }
.gf-carta-ficha .item strong {
	display: block;
	color: #f2f2f2;
	font-size: 15px;
	font-weight: 800;
	margin-top: 3px;
}

/* --- Panel derecho: render del jugador con marco degradado --- */
.gf-carta-render {
	flex: 1 1 42%;
	position: relative;
	min-height: 340px;
	background: #0d1014;
	overflow: hidden;
}
.gf-carta-render img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}
/* Degradado que funde el fondo de la foto hacia el color de la carta.
   Esto disimula cualquier fondo que traiga la foto del jugador. */
.gf-carta-render::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, #12171d 0%, rgba(18,23,29,0.55) 22%, rgba(18,23,29,0) 55%),
		linear-gradient(180deg, rgba(18,23,29,0) 55%, #12171d 100%),
		radial-gradient(circle at 70% 35%, rgba(200,243,29,0.10), transparent 60%);
}
.gf-carta-render .bandera {
	position: absolute;
	top: 14px;
	right: 16px;
	font-size: 26px;
	z-index: 3;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.gf-carta-render .sin-foto {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #2c333d;
	font-size: 80px;
}

/* --- Responsive: apilar en móvil --- */
@media (max-width: 640px) {
	.gf-carta-wrap { flex-direction: column-reverse; }
	.gf-carta-render { flex-basis: auto; min-height: 300px; }
	.gf-carta-render::after {
		background:
			linear-gradient(180deg, rgba(18,23,29,0) 60%, #12171d 100%),
			radial-gradient(circle at 60% 40%, rgba(200,243,29,0.10), transparent 60%);
	}
	.gf-carta-attrs { gap: 10px 18px; }
}