/* Fixture — vistas públicas /fixture/ (archivo) y /fixture/fecha/{orden}/ (una
   jornada). Tema oscuro + brand tokens, mobile-first, sin JS (el filtro de
   categoría usa onchange→submit, con fallback noscript).
   Pulido visual fino: pasada de cc.

   Las dos vistas comparten hoja porque comparten sistema visual: partir el fixture
   en dos páginas no fue un rediseño. */

.mo-tdi-fixture {
	max-width: 1100px;
	margin: 0 auto;
	padding: var(--mo-torneo-invierno-space-4);
	color: var(--mo-torneo-invierno-on-surface);
}

.mo-tdi-fixture__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mo-torneo-invierno-space-3);
	margin-bottom: var(--mo-torneo-invierno-space-6);
}

.mo-tdi-fixture__title {
	color: var(--mo-torneo-invierno-primary);
	border-bottom: 3px solid var(--mo-torneo-invierno-primary-strong);
	padding-bottom: .4rem;
	margin: 0;
}

.mo-tdi-fixture__filtro {
	display: flex;
	align-items: center;
	gap: var(--mo-torneo-invierno-space-2);
	font-size: var(--mo-torneo-invierno-text-sm);
}

.mo-tdi-fixture__filtro select {
	max-width: 60vw;
	padding: var(--mo-torneo-invierno-space-2) var(--mo-torneo-invierno-space-3);
	color: var(--mo-torneo-invierno-on-surface);
	background: rgba(152, 206, 240, .10);
	border: 1px solid rgba(152, 206, 240, .30);
	border-radius: var(--mo-torneo-invierno-radius-md);
	font-size: inherit;
	cursor: pointer;
	/* que el popup nativo de opciones también respete el tema oscuro */
	color-scheme: dark;
}

.mo-tdi-fixture__filtro select:focus {
	outline: none;
	border-color: var(--mo-torneo-invierno-accent);
}

/* Popup nativo de opciones: fondo SÓLIDO oscuro. Sin esto, el texto claro del
   select se hereda a los <option> pero su fondo queda blanco → blanco/blanco. */
.mo-tdi-fixture__filtro select option {
	background: var(--mo-torneo-invierno-contrast);
	color: var(--mo-torneo-invierno-on-surface);
}

.mo-tdi-fixture__aviso {
	color: var(--mo-torneo-invierno-on-surface-muted);
	font-size: var(--mo-torneo-invierno-text-lg);
	text-align: center;
	padding: var(--mo-torneo-invierno-space-10) var(--mo-torneo-invierno-space-4);
}

/* =========================================================================
   EL ARCHIVO (/fixture/) — una card por jornada
   ========================================================================= */

.mo-tdi-fixture__fechas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--mo-torneo-invierno-space-3);
}

/* Card = el <a> entero (toda la card enlaza, no sólo el título: en el teléfono el
   blanco de una card es la mitad del área tocable). */
.mo-tdi-fecha-card {
	position: relative;
	display: grid;
	gap: 2px;
	padding: var(--mo-torneo-invierno-space-4);
	color: inherit;
	text-decoration: none;
	background: rgba(152, 206, 240, .10);
	border: 1px solid rgba(152, 206, 240, .18);
	border-radius: var(--mo-torneo-invierno-radius-md);
	transition: border-color var(--mo-torneo-invierno-transition-fast, .15s) ease,
		background-color var(--mo-torneo-invierno-transition-fast, .15s) ease;
}

.mo-tdi-fecha-card:hover,
.mo-tdi-fecha-card:focus-visible {
	border-color: var(--mo-torneo-invierno-accent);
	background: rgba(152, 206, 240, .16);
}

.mo-tdi-fecha-card__nombre {
	color: var(--mo-torneo-invierno-accent);
	font-size: var(--mo-torneo-invierno-text-lg);
	font-weight: 700;
	/* deja lugar al badge "Próxima" para que no se pisen en 360 px */
	padding-right: 5.5rem;
}

.mo-tdi-fecha-card__subtitulo {
	color: var(--mo-torneo-invierno-on-surface);
	font-size: var(--mo-torneo-invierno-text-sm);
}

.mo-tdi-fecha-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--mo-torneo-invierno-space-2) var(--mo-torneo-invierno-space-3);
	margin-top: var(--mo-torneo-invierno-space-2);
	font-size: var(--mo-torneo-invierno-text-sm);
	color: var(--mo-torneo-invierno-on-surface-muted);
}

.mo-tdi-fecha-card__dia {
	color: var(--mo-torneo-invierno-on-surface);
	font-weight: 700;
}

/* Jornada sin día asignado (fecha NULL): se dice, no se disimula. */
.mo-tdi-fecha-card__dia--sin {
	color: var(--mo-torneo-invierno-on-surface-muted);
	font-weight: 400;
	font-style: italic;
}

.mo-tdi-fecha-card__partidos::before {
	content: "·";
	margin-right: var(--mo-torneo-invierno-space-2);
	color: var(--mo-torneo-invierno-on-surface-muted);
}

/* La próxima: destacada, no sola. Las jugadas siguen en la misma lista. */
.mo-tdi-fecha-card--proxima {
	border-color: var(--mo-torneo-invierno-accent);
	background: rgba(152, 206, 240, .16);
	box-shadow: 0 0 0 1px rgba(152, 206, 240, .22);
}

.mo-tdi-fecha-card__badge {
	position: absolute;
	top: var(--mo-torneo-invierno-space-3);
	right: var(--mo-torneo-invierno-space-3);
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--mo-torneo-invierno-gold);
	color: var(--mo-torneo-invierno-contrast);
	font-size: var(--mo-torneo-invierno-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* Ya jugada: baja el volumen, no la esconde (sigue clickeable y legible). */
.mo-tdi-fecha-card--pasada:not(.mo-tdi-fecha-card--proxima) .mo-tdi-fecha-card__nombre {
	color: var(--mo-torneo-invierno-on-surface-muted);
}

/* =========================================================================
   UNA JORNADA (/fixture/fecha/{orden}/)
   ========================================================================= */

.mo-tdi-fixture__volver {
	margin: 0 0 var(--mo-torneo-invierno-space-3);
	font-size: var(--mo-torneo-invierno-text-sm);
}

.mo-tdi-fixture__volver a {
	color: var(--mo-torneo-invierno-accent);
	text-decoration: none;
}

.mo-tdi-fixture__volver a:hover {
	text-decoration: underline;
}

.mo-tdi-fixture__titulo-bloque {
	min-width: 0;
}

.mo-tdi-fixture__jornada-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--mo-torneo-invierno-space-2) var(--mo-torneo-invierno-space-3);
	margin: var(--mo-torneo-invierno-space-2) 0 0;
	font-size: var(--mo-torneo-invierno-text-sm);
	color: var(--mo-torneo-invierno-on-surface-muted);
}

.mo-tdi-fixture__jornada-fecha {
	color: var(--mo-torneo-invierno-on-surface);
	font-weight: 700;
}

.mo-tdi-fixture__jornada-subtitulo {
	color: var(--mo-torneo-invierno-accent);
	font-size: var(--mo-torneo-invierno-text-sm);
	margin: var(--mo-torneo-invierno-space-2) 0 0;
}

/* Anterior / siguiente: pasar de la Fecha 2 a la 3 sin volver al archivo. */
.mo-tdi-fixture__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--mo-torneo-invierno-space-3);
	margin-top: var(--mo-torneo-invierno-space-8);
	padding-top: var(--mo-torneo-invierno-space-4);
	border-top: 1px solid rgba(152, 206, 240, .18);
}

.mo-tdi-fixture__nav-link {
	display: grid;
	gap: 2px;
	min-width: 0;
	flex: 1 1 40%;
	padding: var(--mo-torneo-invierno-space-3);
	color: inherit;
	text-decoration: none;
	background: rgba(152, 206, 240, .10);
	border: 1px solid rgba(152, 206, 240, .18);
	border-radius: var(--mo-torneo-invierno-radius-md);
}

a.mo-tdi-fixture__nav-link:hover {
	border-color: var(--mo-torneo-invierno-accent);
}

.mo-tdi-fixture__nav-link--next {
	text-align: right;
}

.mo-tdi-fixture__nav-link--vacio {
	background: none;
	border-color: transparent;
}

.mo-tdi-fixture__nav-dir {
	font-size: var(--mo-torneo-invierno-text-xs);
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--mo-torneo-invierno-on-surface-muted);
}

.mo-tdi-fixture__nav-nombre {
	color: var(--mo-torneo-invierno-accent);
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Cancha */
.mo-tdi-fixture__cancha {
	margin: 0 0 var(--mo-torneo-invierno-space-5);
}

.mo-tdi-fixture__cancha-title {
	color: var(--mo-torneo-invierno-gold);
	font-size: var(--mo-torneo-invierno-text-sm);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin: 0 0 var(--mo-torneo-invierno-space-2);
}

.mo-tdi-fixture__partidos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--mo-torneo-invierno-space-2);
}

/* Partido card — superficie oscura (tint de celeste a baja opacidad, como
   posiciones.css). El celeste sólido (--surface-link) daba contraste malo con
   el texto casi-blanco on-surface: era un token de LINK usado como fondo. */
.mo-tdi-fixture__partido {
	background: rgba(152, 206, 240, .10);
	border: 1px solid rgba(152, 206, 240, .18);
	border-radius: var(--mo-torneo-invierno-radius-md);
	padding: var(--mo-torneo-invierno-space-3);
	transition: border-color var(--mo-torneo-invierno-transition-fast, .15s) ease;
}

.mo-tdi-fixture__partido:hover {
	border-color: var(--mo-torneo-invierno-accent);
}

.mo-tdi-fixture__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mo-torneo-invierno-space-2);
	font-size: var(--mo-torneo-invierno-text-xs);
	color: var(--mo-torneo-invierno-on-surface-muted);
	margin-bottom: var(--mo-torneo-invierno-space-2);
}

.mo-tdi-fixture__hora {
	font-weight: 700;
	color: var(--mo-torneo-invierno-on-surface);
}

.mo-tdi-fixture__etapa {
	margin-left: auto;
	color: var(--mo-torneo-invierno-accent);
}

/* Enfrentamiento */
.mo-tdi-fixture__vs {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--mo-torneo-invierno-space-2);
}

.mo-tdi-fixture__equipo {
	display: flex;
	align-items: center;
	gap: var(--mo-torneo-invierno-space-2);
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

.mo-tdi-fixture__vs > .mo-tdi-fixture__equipo:last-child {
	flex-direction: row-reverse;
	text-align: right;
}

.mo-tdi-fixture__equipo-nombre {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

a.mo-tdi-fixture__equipo:hover .mo-tdi-fixture__equipo-nombre {
	color: var(--mo-torneo-invierno-accent);
	text-decoration: underline;
}

.mo-tdi-fixture__equipo--tbd {
	color: var(--mo-torneo-invierno-on-surface-muted);
	font-style: italic;
}

.mo-tdi-fixture__escudo {
	width: 28px;
	height: 28px;
	object-fit: contain;
	flex-shrink: 0;
}

.mo-tdi-fixture__escudo--placeholder {
	display: inline-block;
	border-radius: 50%;
	background: rgba(152, 206, 240, .12);
	border: 1px solid rgba(152, 206, 240, .22);
}

.mo-tdi-fixture__vs-sep {
	color: var(--mo-torneo-invierno-on-surface-muted);
	font-size: var(--mo-torneo-invierno-text-xs);
	text-transform: uppercase;
}

@media (min-width: 700px) {
	.mo-tdi-fixture__partidos {
		grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	}
	.mo-tdi-fixture__escudo {
		width: 34px;
		height: 34px;
	}
	.mo-tdi-fixture__fechas {
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	}
}