/* MTC Futbol 7 - estilos */

.mtc-f7-wrap{
	--f7-pink: var(--mtc-pink, #ff3899);
	--f7-gold: var(--mtc-gold, #ffc300);
	--f7-bg-0: var(--mtc-bg-0, #0d0509);
	--f7-bg-1: var(--mtc-bg-1, #180a12);
	--f7-bg-2: var(--mtc-bg-2, #22101a);
	--f7-border: var(--mtc-border, #3a1826);
	--f7-text-1: var(--mtc-text-1, #f5eef1);
	--f7-text-2: var(--mtc-text-2, #b58fa0);
	--f7-text-3: var(--mtc-text-3, #7a5568);

	max-width:1320px;
	margin:0 auto;
	padding:40px 32px 80px;
	color:var(--f7-text-1);
	font-family:'Inter', sans-serif;
}

.mtc-f7-empty{ text-align:center; color:var(--f7-text-2); padding:60px 20px; }
.mtc-f7-empty a{ color:var(--f7-pink); }

.mtc-f7-section-head{
	display:flex; align-items:baseline; justify-content:space-between;
	margin-bottom:24px; flex-wrap:wrap; gap:8px;
}
.mtc-f7-section-head-spaced{ margin-top:56px; }
.mtc-f7-section-head h2{
	font-family:'Rajdhani', sans-serif; text-transform:uppercase; font-size:26px; margin:0;
}
.mtc-f7-section-head p{ color:var(--f7-text-3); font-size:13px; margin:0; }

.mtc-f7-grid{
	display:grid;
	grid-template-columns:repeat(6, 1fr);
	gap:14px;
}

.mtc-f7-card{
	background:var(--f7-bg-1);
	border:1px solid var(--f7-border);
	border-radius:8px;
	padding:0;
	cursor:pointer;
	text-align:left;
	color:var(--f7-text-1);
	font-family:'Inter', sans-serif;
	overflow:hidden;
	transition:transform .2s ease, border-color .2s ease;
}
.mtc-f7-card:hover{ transform:translateY(-4px); border-color:var(--f7-pink); }

.mtc-f7-card-photo{
	position:relative;
	height:130px;
	background:var(--f7-bg-2);
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
}
.mtc-f7-card-photo img{ width:100%; height:100%; object-fit:cover; }
.mtc-f7-initials{ font-size:26px; font-weight:700; color:var(--f7-text-3); }
.mtc-f7-dorsal-badge{
	position:absolute; top:8px; right:8px;
	background:var(--f7-pink); color:#2a0416;
	font-size:12px; font-weight:700;
	padding:2px 8px; border-radius:20px;
}
.mtc-f7-card-info{ padding:12px; }
.mtc-f7-card-name{ font-size:13px; font-weight:600; margin-bottom:2px; }
.mtc-f7-card-pos{ font-size:11px; color:var(--f7-gold); text-transform:uppercase; letter-spacing:0.05em; }

/* ---------- Modal ---------- */
.mtc-f7-modal{
	position:fixed; inset:0; z-index:1000;
	display:none;
	align-items:center; justify-content:center;
	padding:20px;
}
.mtc-f7-modal.is-open{ display:flex; }
.mtc-f7-modal-backdrop{
	position:absolute; inset:0;
	background:rgba(10,4,7,0.82);
	backdrop-filter:blur(4px);
	animation:mtcF7FadeIn .2s ease;
}
.mtc-f7-modal-panel{
	position:relative;
	background:var(--f7-bg-1);
	border:1px solid var(--f7-border);
	border-radius:12px;
	max-width:620px;
	width:100%;
	max-height:86vh;
	overflow-y:auto;
	animation:mtcF7SlideUp .25s ease;
}
@keyframes mtcF7FadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes mtcF7SlideUp{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:translateY(0); } }

.mtc-f7-modal-close{
	position:absolute; top:12px; right:14px; z-index:2;
	background:transparent; border:none; color:var(--f7-text-2);
	font-size:28px; line-height:1; cursor:pointer;
}
.mtc-f7-modal-close:hover{ color:var(--f7-pink); }

.mtc-f7-detail{ display:flex; flex-direction:column; }
.mtc-f7-detail-photo{
	height:220px; background:var(--f7-bg-2);
	display:flex; align-items:center; justify-content:center;
	border-radius:12px 12px 0 0; overflow:hidden;
}
.mtc-f7-detail-photo img{ width:100%; height:100%; object-fit:cover; }
.mtc-f7-detail-photo .mtc-f7-initials{ font-size:52px; }
.mtc-f7-detail-body{ padding:26px; }
.mtc-f7-detail-dorsal{ color:var(--f7-pink); font-size:14px; margin-bottom:4px; }
.mtc-f7-detail-name{
	font-family:'Rajdhani', sans-serif; text-transform:uppercase; font-size:28px; margin:0 0 4px;
}
.mtc-f7-detail-pos{
	color:var(--f7-gold); font-size:13px; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:16px;
}
.mtc-f7-detail-bio{ color:var(--f7-text-2); line-height:1.7; font-size:14px; margin-bottom:22px; }
.mtc-f7-detail-bio p{ margin:0 0 12px; }

.mtc-f7-detail-stats{
	display:grid; grid-template-columns:repeat(2, 1fr); gap:10px;
	border-top:1px solid var(--f7-border); padding-top:18px;
}
.mtc-f7-detail-stats > div{
	display:flex; justify-content:space-between; font-size:13px; color:var(--f7-text-2);
	background:var(--f7-bg-2); padding:8px 12px; border-radius:6px;
}
.mtc-f7-detail-stats b{ color:var(--f7-text-1); }

@media (max-width: 1100px){
	.mtc-f7-grid{ grid-template-columns:repeat(4, 1fr); }
}
@media (max-width: 720px){
	.mtc-f7-wrap{ padding:24px 20px 50px; }
	.mtc-f7-grid{ grid-template-columns:repeat(2, 1fr); }
	.mtc-f7-detail-stats{ grid-template-columns:1fr; }
}