/**
 * ==============================================================================
 * Archivo: rankings.css
 * Ruta: localpadel/includes/modules/rankings/rankings.css
 *
 * Descripción:
 *   UI iOS premium vistosa para Ranking Elo.
 *   - Filtros en card con chips
 *   - Leaderboard moderno (filas con avatar + top 3)
 *   - Modal premium (SUPER FOCUS + scroll interno real)
 *   - ✅ Jugador a 2 líneas: Nombre + (Nivel · Género)
 *   - ✅ Leyenda bajo la tabla: ELO, PJ, V, D
 *
 * Versión: 1.2.2
 * Autor: Alberto Aranda Aranda
 * Último cambio: 2025-12-27 Europe/Madrid
 * ==============================================================================
 */

:root{
	--lp-brand:#2C4A9C;
	--lp-ink:#0f172a;
	--lp-muted:rgba(15,23,42,.68);
	--lp-border:rgba(15,23,42,.10);
	--lp-card:rgba(255,255,255,.94);
	--lp-bg:rgba(250,250,252,1);
	--lp-shadow:0 18px 55px rgba(2,6,23,.10);
	--lp-shadow-soft:0 10px 28px rgba(2,6,23,.08);
	--lp-radius:22px;
}

.lp-rankings-wrap{
	max-width:1120px;
	margin:18px auto 44px auto;
	padding:0 14px;
	font-family:"Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color:var(--lp-ink);
}

.lp-card{
	background:var(--lp-card);
	border:1px solid rgba(15,23,42,.08);
	border-radius:var(--lp-radius);
	box-shadow:var(--lp-shadow-soft);
	backdrop-filter:saturate(140%) blur(10px);
	padding:14px;
}

.lp-muted{color:var(--lp-muted);font-size:13px;line-height:1.35}

/* =========================================================
   HEADER / TITLE
   ========================================================= */
.lp-rankings-title{
	position:relative;
	font-size:22px;
	line-height:1.15;
	letter-spacing:-.02em;
	margin:0;
}

/* =========================================================
   FILTROS
   ========================================================= */
.lp-rankings-filters{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin-top:14px;
	align-items:flex-end;
}

.lp-label{
	display:flex;
	flex-direction:column;
	gap:6px;
	font-size:12px;
	color:var(--lp-muted);
	min-width:190px;
}

.lp-label select{
	border:1px solid rgba(15,23,42,.12);
	border-radius:16px;
	padding:11px 12px;
	font-size:14px;
	background:#fff;
	outline:none;
	transition:box-shadow .12s ease, border-color .12s ease, transform .08s ease;
}

.lp-label select:focus{
	border-color:rgba(44,74,156,.40);
	box-shadow:0 0 0 4px rgba(44,74,156,.12);
}

.lp-label select:disabled{
	opacity:.65;
	cursor:not-allowed;
	background:rgba(2,6,23,.02);
}

.lp-btn{
	background:var(--lp-brand);
	color:#fff;
	border:0;
	border-radius:16px;
	padding:11px 14px;
	font-size:14px;
	cursor:pointer;
	position:relative;
	box-shadow:0 14px 28px rgba(44,74,156,.18);
	transition:transform .08s ease, filter .12s ease;
}
.lp-btn:hover{filter:brightness(.97)}
.lp-btn:active{transform:translateY(1px)}

/* =========================================================
   PILLS / TOGGLES
   ========================================================= */
.lp-rankings-toggles{
	display:flex;
	gap:8px;
	margin-top:12px;
	flex-wrap:wrap;
}

.lp-pill{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:9px 12px;
	border-radius:999px;
	border:1px solid rgba(15,23,42,.10);
	background:rgba(255,255,255,.82);
	color:#111827;
	text-decoration:none;
	font-size:13px;
	cursor:pointer;
	transition:transform .08s ease, background .12s ease, border-color .12s ease;
}
.lp-pill:hover{transform:translateY(-1px)}
.lp-pill:active{transform:translateY(0)}
.lp-pill.is-active{
	border-color:rgba(44,74,156,.30);
	background:rgba(44,74,156,.10);
	color:var(--lp-brand);
}
.lp-pill--info{
	border-color:rgba(44,74,156,.25);
	background:rgba(44,74,156,.08);
	color:var(--lp-brand);
}

/* =========================================================
   HELP
   ========================================================= */
.lp-ranking-help{
	margin-top:12px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:12px 12px;
	border-radius:18px;
	border:1px solid rgba(15,23,42,.06);
	background:rgba(2,6,23,.02);
}
.lp-ranking-help__text{font-size:13px;line-height:1.35;color:var(--lp-ink)}

@media (max-width: 640px){
	.lp-ranking-help{flex-direction:column;align-items:flex-start}
}

/* =========================================================
   TABLA
   ========================================================= */
.lp-rankings-table{margin-top:14px;padding:0}
.lp-empty{padding:18px}
.lp-empty-title{font-size:15px;letter-spacing:-.01em}

.lp-table{
	display:flex;
	flex-direction:column;
	gap:8px;
	padding:12px;
}

.lp-th{
	display:grid;
	grid-template-columns:58px 1fr 92px 52px 52px 52px;
	gap:10px;
	align-items:center;
	padding:10px 10px;
	border-radius:16px;
	background:rgba(2,6,23,.04);
	color:rgba(15,23,42,.62);
	font-size:12px;
}

.lp-row{
	display:grid;
	grid-template-columns:58px 1fr 92px 52px 52px 52px;
	gap:10px;
	align-items:center;
	padding:12px 10px;
	border-radius:18px;
	border:1px solid rgba(15,23,42,.07);
	background:rgba(255,255,255,.86);
	box-shadow:0 10px 26px rgba(2,6,23,.06);
}

.lp-pos{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	color:rgba(15,23,42,.62);
	font-size:13px;
}

.lp-avatar{
	width:34px;height:34px;
	border-radius:12px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	background:rgba(44,74,156,.10);
	border:1px solid rgba(44,74,156,.18);
	color:var(--lp-brand);
	font-size:13px;
	flex:0 0 auto;
	object-fit:cover;
}

.lp-name{
	display:flex;
	align-items:center;
	gap:10px;
	min-width:0;
}

/* ✅ NUEVO: link/stack a 2 líneas para que SIEMPRE se vea el nivel del filtro */
.lp-name-link{
	display:flex;
	flex-direction:column;
	gap:2px;
	min-width:0;
	text-decoration:none;
	color:var(--lp-ink);
	line-height:1.2;
}

.lp-name-link.is-static{cursor:default}

.lp-name-main{
	font-size:14px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.lp-name-meta{
	font-size:12px;
	color:rgba(15,23,42,.62);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.lp-name-link:hover .lp-name-main{color:var(--lp-brand)}

.lp-elo{
	color:var(--lp-brand);
	font-size:15px;
	letter-spacing:-.01em;
}

.lp-metric{
	color:rgba(15,23,42,.78);
	font-size:13px;
}

/* Top 3 */
.lp-row.is-top1{
	border-color:rgba(44,74,156,.22);
	box-shadow:0 16px 40px rgba(44,74,156,.14);
	background:
		radial-gradient(600px 220px at 10% 0%, rgba(44,74,156,.10), transparent 55%),
		rgba(255,255,255,.92);
}
.lp-row.is-top2,.lp-row.is-top3{
	border-color:rgba(15,23,42,.08);
	background:rgba(255,255,255,.90);
}

/* =========================================================
   LEYENDA (bajo la tabla)
   ========================================================= */
.lp-rankings-legend{
	margin-top:10px;
	border-top:1px dashed rgba(15,23,42,.10);
	padding:12px 6px 4px 6px;
}

.lp-rankings-legend__title{
	font-size:13px;
	color:var(--lp-ink);
	letter-spacing:-.01em;
	margin:2px 0 8px 0;
}

.lp-rankings-legend__list{
	margin:0;
	padding:0 0 0 18px;
	color:rgba(15,23,42,.82);
	font-size:13px;
	line-height:1.45;
}
.lp-rankings-legend__list li{margin:0 0 6px 0}
.lp-rankings-legend__note{margin-top:8px}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 760px){
	.lp-label{min-width:160px}
	.lp-th,.lp-row{
		grid-template-columns:54px 1fr 86px 48px 48px 48px;
	}
}

@media (max-width: 560px){
	.lp-th,.lp-row{
		grid-template-columns:54px 1fr 78px;
	}
	.lp-th > div:nth-child(4),
	.lp-th > div:nth-child(5),
	.lp-th > div:nth-child(6),
	.lp-row > div:nth-child(4),
	.lp-row > div:nth-child(5),
	.lp-row > div:nth-child(6){
		display:none;
	}
}

/* =========================================================
   MODAL (SUPER FOCUS + scroll interno real)
   ========================================================= */
.lp-modal{
	position:fixed;
	inset:0;
	z-index:9999;
	display:none;
	opacity:0;
	transition:opacity .18s ease;
}
.lp-modal.is-open{
	display:block;
	opacity:1;
}

.lp-modal__backdrop{
	position:absolute;
	inset:0;
	background:rgba(2,6,23,.72);
	backdrop-filter: blur(6px) saturate(120%);
}

.lp-modal__panel{
	position:relative;
	margin:6vh auto;
	width:min(720px, calc(100% - 28px));
	max-height:88vh;
	background:#fff;
	border-radius:22px;
	box-shadow:
		0 40px 120px rgba(0,0,0,.55),
		0 0 0 1px rgba(255,255,255,.06);
	overflow:hidden;
	border:1px solid rgba(15,23,42,.10);
	display:flex;
	flex-direction:column;
	animation: lpModalIn .22s ease-out;
}

@keyframes lpModalIn{
	from{
		transform: translateY(14px) scale(.98);
		opacity:0;
	}
	to{
		transform: translateY(0) scale(1);
		opacity:1;
	}
}

.lp-modal__head{
	position:sticky;
	top:0;
	z-index:2;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:14px 14px;
	border-bottom:1px solid rgba(15,23,42,.06);
	background:
		radial-gradient(650px 220px at 12% 0%, rgba(44,74,156,.10), transparent 55%),
		#fff;
}

.lp-modal__title{
	font-size:16px;
	font-weight:600;
	letter-spacing:-.01em;
	color:var(--lp-ink);
}

.lp-modal__close{
	border:0;
	background:rgba(2,6,23,.04);
	font-size:22px;
	line-height:1;
	cursor:pointer;
	color:var(--lp-ink);
	padding:6px 10px;
	border-radius:14px;
}
.lp-modal__close:hover{background:rgba(2,6,23,.08)}

.lp-modal__body{
	padding:14px;
	overflow:auto;
	-webkit-overflow-scrolling:touch;
	min-height:0;
	overscroll-behavior:contain;
	color:var(--lp-ink);
	font-size:14px;
	line-height:1.55;
}
.lp-modal__body p{margin:0 0 12px 0}

.lp-modal__foot{
	padding:12px 14px;
	border-top:1px solid rgba(15,23,42,.06);
	display:flex;
	justify-content:flex-end;
}

html.lp-modal-open, body.lp-modal-open{overflow:hidden}