/*--------------------------------------------------------------
# Ranking de pilotos (market3/ranking)
--------------------------------------------------------------*/

.m3-ranking {
	--m3r-line: rgba(255, 255, 255, 0.10);
	--m3r-soft: rgba(255, 255, 255, 0.06);
	--m3r-muted: var(--wp--preset--color--gray-300, #bbbbbb);
	--m3r-accent: var(--wp--preset--color--accent, #E3181C);
	position: relative;
	color: var(--wp--preset--color--contrast, #FDFDFD);
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
}

.m3-ranking__heading {
	text-align: center;
}

/* Toolbar
--------------------------------------------- */
.m3-ranking__toolbar {
	display: flex;
	flex-direction: column;
	gap: 1em;
	margin-bottom: 1.6em;
}

.m3-ranking__tabs,
.m3-ranking__periods {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.m3-ranking__tabs {
	justify-content: center;
}

.m3-ranking__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.6em 1em;
}

.m3-ranking__tab,
.m3-ranking__period {
	cursor: pointer;
	border: 2px solid var(--m3r-line);
	background: transparent;
	color: var(--wp--preset--color--contrast, #FDFDFD);
	font-family: var(--wp--preset--font-family--exo-2, "Exo 2", sans-serif);
	font-weight: 700;
	font-size: 0.8em;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
	padding: 0.85em 1.3em;
	border-radius: 0;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.m3-ranking__tab {
	font-size: 0.9em;
	padding: 1em 1.6em;
	clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
	border: 0;
	background: var(--m3r-soft);
}

.m3-ranking__tab:hover,
.m3-ranking__period:hover {
	border-color: var(--m3r-accent);
	background: rgba(227, 24, 28, 0.15);
}

.m3-ranking__tab.is-active,
.m3-ranking__period.is-active {
	background: var(--m3r-accent);
	border-color: var(--m3r-accent);
	color: #fff;
}

.m3-ranking__select select {
	appearance: none;
	-webkit-appearance: none;
	max-width: 100%;
	min-width: 240px;
	padding: 0.7em 2.4em 0.7em 1em;
	border: 2px solid var(--m3r-line);
	background: #0b0b0b url("data:image/svg+xml;charset=utf-8,%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='%23E3181C' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 0.9em center;
	color: var(--wp--preset--color--contrast, #FDFDFD);
	font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
	font-size: 0.85em;
	font-weight: 600;
	border-radius: 0;
	cursor: pointer;
}

.m3-ranking__select select:focus {
	outline: none;
	border-color: var(--m3r-accent);
}

/* Tabla
--------------------------------------------- */
.m3-ranking__table-wrap {
	position: relative;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-top: 2px solid var(--m3r-accent);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0) 100%);
}

.m3-ranking.is-loading .m3-ranking__table-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(2, 2, 2, 0.55);
	backdrop-filter: blur(1px);
}

.m3-ranking__table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 0.95em;
}

.m3-ranking__table th,
.m3-ranking__table td {
	padding: 0.85em 0.9em;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--m3r-line);
	white-space: nowrap;
}

.m3-ranking__table th {
	font-family: var(--wp--preset--font-family--exo-2, "Exo 2", sans-serif);
	font-weight: 700;
	font-size: 0.75em;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--m3r-muted);
	background: rgba(255, 255, 255, 0.03);
}

.m3-ranking__row {
	transition: background-color 0.15s ease;
}

.m3-ranking__row:hover {
	background: var(--m3r-soft);
}

.m3-ranking__pos {
	width: 3.2em;
	text-align: center !important;
}

.m3-ranking__pos span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2em;
	height: 2em;
	font-family: var(--wp--preset--font-family--exo-2, "Exo 2", sans-serif);
	font-weight: 800;
	font-style: italic;
	color: var(--m3r-muted);
}

.m3-ranking__row.is-podio .m3-ranking__pos span {
	color: #fff;
	background: var(--m3r-accent);
	clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
	padding: 0 0.5em;
}

.m3-ranking__row.is-p2 .m3-ranking__pos span { background: #8d8d8d; }
.m3-ranking__row.is-p3 .m3-ranking__pos span { background: #6b4a2b; }

.m3-ranking__pilot {
	font-weight: 700;
}

.m3-ranking__row.is-p1 .m3-ranking__pilot {
	color: var(--m3r-accent);
}

.m3-ranking__time {
	font-family: var(--wp--preset--font-family--exo-2, "Exo 2", sans-serif);
	font-weight: 800;
	font-size: 1.1em;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}

.m3-ranking__circuit,
.m3-ranking__vehicle {
	color: var(--m3r-muted);
	font-size: 0.9em;
	max-width: 22em;
	overflow: hidden;
	text-overflow: ellipsis;
}

.m3-ranking__flag,
.m3-ranking__cat {
	display: inline-block;
	margin-right: 0.6em;
	padding: 0.2em 0.45em;
	border: 1px solid var(--m3r-line);
	font-family: var(--wp--preset--font-family--exo-2, "Exo 2", sans-serif);
	font-size: 0.7em;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1;
	vertical-align: middle;
	color: var(--wp--preset--color--contrast, #FDFDFD);
}

.m3-ranking__cat--f1 { border-color: var(--m3r-accent); color: var(--m3r-accent); }
.m3-ranking__cat--gt3 { border-color: #3a8bd6; color: #7fbcf2; }
.m3-ranking__cat--tc { border-color: #d6a53a; color: #f2cf7f; }

.m3-ranking__empty {
	margin: 0;
	padding: 2em 1em;
	text-align: center;
	color: var(--m3r-muted);
}

.m3-ranking__meta {
	margin: 1.2em 0 0;
	text-align: center;
	font-size: 0.6em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--m3r-muted);
}

.m3-ranking__meta-period {
	color: var(--wp--preset--color--contrast, #FDFDFD);
	font-weight: 700;
}

.m3-ranking__demo {
	color: #f2cf7f;
}

/* Compacto (home)
--------------------------------------------- */
.m3-ranking.is-compact .m3-ranking__table {
	font-size: 1em;
}

.m3-ranking.is-compact .m3-ranking__vehicle {
	display: none;
}

/* Responsive
--------------------------------------------- */
@media screen and (max-width: 971px) {
	.m3-ranking__table th,
	.m3-ranking__table td {
		padding: 0.7em 0.6em;
	}
	.m3-ranking__table {
		font-size: 0.85em;
	}
	.m3-ranking__select select {
		min-width: 0;
		width: 100%;
	}
	.m3-ranking__select {
		width: 100%;
	}
	.m3-ranking__vehicle {
		display: none;
	}
	.m3-ranking.is-view-vehicle .m3-ranking__vehicle {
		display: table-cell;
	}
	.m3-ranking.is-view-vehicle .m3-ranking__circuit {
		display: none;
	}
	.m3-ranking__circuit,
	.m3-ranking__vehicle {
		max-width: 11em;
	}
}

/* Editor
--------------------------------------------- */
.m3-ranking-admin {
	padding: 1em 1.2em;
	border: 1px dashed #999;
	background: #f4f4f4;
	color: #222;
	font-size: 14px;
}


/* Anchos intermedios: la tabla entra sin barra horizontal (circuito y auto con puntos suspensivos)
--------------------------------------------- */
@media screen and (min-width: 972px) and (max-width: 1300px) {
	.m3-ranking__table { font-size: 0.88em; }
	.m3-ranking__table th,
	.m3-ranking__table td { padding: 0.75em 0.6em; }
	.m3-ranking__circuit,
	.m3-ranking__vehicle { max-width: 12em; }
}