/**
 * Winga Ligas · estilos
 *
 * PRINCIPIO QUE ATRAVIESA TODO ESTO
 *
 * El plugin NUNCA destaca visualmente una cuota por sí solo. Ni la más baja de
 * un 1X2, ni el favorito de un outright. Una cuota baja no es "la mejor
 * apuesta", es solo la más probable según la casa: que el diseño la señale sería
 * meter una recomendación donde solo debe haber datos, y esto es un comparador
 * con licencia DGOJ.
 *
 * El único énfasis posible es el del equipo del hub, y lo pide el editor con
 * destacar="X". Eso es contexto, no consejo.
 *
 * SIN FUENTES WEB · el plugin hereda la tipografía del tema. Cargar una fuente
 * externa serían peticiones extra por página, y la personalidad la dan la
 * estructura y el tratamiento de las cifras (tabulares, alineadas, con la coma
 * decimal siempre en la misma columna).
 *
 * Todo va bajo el prefijo .wliga- y sin !important ni selectores de ID, para que
 * un hub pueda sobreescribir sin pelearse con especificidades.
 */

.wliga-bloque {
	/* Paleta alineada con el CSS canónico del cluster (#ucl26 v2.8) para que
	   los bloques no parezcan de otra web al convivir en el mismo sitio. */
	--wl-ink: #0c0f14;
	--wl-text: #2d333b;
	--wl-muted: #6c7480;
	--wl-line: #d6d1c7;
	--wl-line-soft: #f0ece5;
	--wl-gold: #c4973b;
	--wl-gold-d: #a17a26;
	--wl-surface: #fdfcfa;

	/* Las fuentes NO se cargan aquí: si el hub las trae (el cluster hace @import
	   de DM Serif Display, Outfit e IBM Plex Mono) se usan, y si no, caen al
	   stack del sistema. Cero peticiones extra por parte del plugin. */
	--wl-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	--wl-serif: 'DM Serif Display', Georgia, 'Times New Roman', serif;

	background: #fff;
	border: 1px solid var(--wl-line);
	border-radius: 12px;
	padding: 20px 22px;
	margin: 1.4em 0;
	color: var(--wl-text);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
}

/* ---- Cabeceras del bloque ---- */

.wliga-cap {
	margin: 0 0 2px;
	font-family: var(--wl-serif);
	font-size: 1.15em;
	font-weight: 400;
	color: var(--wl-ink);
	line-height: 1.3;
}

.wliga-sub {
	margin: 0 0 16px;
	font-size: .85em;
	color: var(--wl-muted);
}

/* ---- Lista de outright ---- */

.wliga-cab {
	font-family: var(--wl-mono);
	display: grid;
	min-width: 0;
	grid-template-columns: 1fr 86px;
	gap: 14px;
	padding: 0 0 8px;
	border-bottom: 1px solid var(--wl-line);
	font-size: .72em;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wl-muted);
	font-weight: 600;
}

.wliga-cab.con-prob {
	grid-template-columns: 1fr 86px 74px;
}

.wliga-cab span {
	min-width: 0;
	/* Evita cortes a mitad de palabra tipo "IMPLÍCIT / A". */
	overflow-wrap: normal;
	word-break: keep-all;
	hyphens: none;
}

.wliga-cab span + span {
	text-align: center;
}

.wliga-lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wliga-fila {
	display: grid;
	min-width: 0;
	grid-template-columns: 1fr 86px;
	align-items: center;
	gap: 14px;
	padding: 8px 0;
	margin: 0;
	border-bottom: 1px solid var(--wl-line-soft);
}

.wliga-fila.con-prob {
	grid-template-columns: 1fr 86px 74px;
}

.wliga-fila:last-child {
	border-bottom: 0;
}

.wliga-nombre {
	font-size: .95em;
	line-height: 1.35;
	min-width: 0;
	overflow-wrap: break-word;
}

.wliga-club {
	display: block;
	font-size: .8em;
	color: var(--wl-muted);
}

.wliga-cuota {
	font-family: var(--wl-mono);
	border: 1px solid var(--wl-line);
	border-radius: 5px;
	padding: 7px 4px;
	text-align: center;
	font-size: .95em;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
}

.wliga-pct {
	font-family: var(--wl-mono);
	text-align: center;
	font-size: .85em;
	color: var(--wl-muted);
	font-variant-numeric: tabular-nums;
}

/* Único énfasis del sistema: el equipo del hub, pedido por el editor. */
.wliga-fila.destacada .wliga-nombre {
	font-weight: 700;
}

.wliga-fila.destacada {
	background: rgba(196, 151, 59, .07);
	border-radius: 4px;
}

.wliga-fila.destacada .wliga-cuota {
	border-color: var(--wl-gold);
	color: var(--wl-gold-d);
}

/* ---- Card de partido ---- */

.wliga-equipos {
	margin: 0 0 4px;
	font-family: var(--wl-serif);
	font-size: 1.3em;
	font-weight: 400;
	color: var(--wl-ink);
	line-height: 1.25;
}

.wliga-fecha {
	margin: 0 0 18px;
	font-size: .85em;
	color: var(--wl-muted);
}

.wliga-1x2 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 0 0 6px;
}

.wliga-op {
	border: 1px solid var(--wl-line);
	border-radius: 6px;
	padding: 10px 12px;
	text-align: center;
	/* Los hijos de un grid llevan min-width:auto por defecto: sin esto,
	   "Gana Deportivo de A Coruña" empuja la caja fuera del contenedor y el
	   text-overflow nunca llega a actuar. */
	min-width: 0;
}

.wliga-op-lab {
	display: block;
	font-size: .78em;
	color: var(--wl-muted);
	margin-bottom: 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wliga-op-num {
	font-family: var(--wl-mono);
	display: block;
	font-size: 1.1em;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.01em;
}

/* La barra describe el reparto de los TRES resultados, no señala uno. Por eso
   va en grises neutros y no en un color de acento. */
.wliga-forma {
	display: flex;
	height: 5px;
	border-radius: 3px;
	overflow: hidden;
	margin: 0 0 6px;
}

.wliga-forma span {
	display: block;
}

.wliga-forma-1 { background: #c9d0d8; }
.wliga-forma-x { background: #9aa5b1; }
.wliga-forma-2 { background: #6b7784; }

.wliga-forma-leyenda {
	font-size: .78em;
	color: var(--wl-muted);
	margin: 0 0 20px;
}

.wliga-mini {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.wliga-mini h4 {
	font-family: var(--wl-mono);
	margin: 0 0 8px;
	font-size: .75em;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wl-muted);
	font-weight: 600;
}

.wliga-par {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	border-bottom: 1px solid var(--wl-line-soft);
	font-size: .9em;
}

.wliga-par:last-child {
	border-bottom: 0;
}

.wliga-par b {
	font-family: var(--wl-mono);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* ---- Próximos partidos ---- */

.wliga-part {
	display: grid;
	grid-template-columns: 78px 1fr 156px;
	gap: 14px;
	align-items: center;
	padding: 11px 0;
	border-bottom: 1px solid var(--wl-line-soft);
}

.wliga-part:last-child {
	border-bottom: 0;
}

.wliga-part-cab {
	padding: 0 0 6px;
	border-bottom: 1px solid var(--wl-line);
}

.wliga-dia {
	font-family: var(--wl-mono);
	font-size: .8em;
	color: var(--wl-muted);
	font-variant-numeric: tabular-nums;
	line-height: 1.35;
}

.wliga-dia b {
	display: block;
	color: var(--wl-ink);
	font-weight: 600;
}

.wliga-vs {
	font-size: .95em;
	min-width: 0;
	overflow-wrap: break-word;
}

.wliga-vs i {
	color: var(--wl-muted);
	margin: 0 5px;
	font-style: normal;
}

.wliga-trio {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 5px;
}

.wliga-trio-cab {
	font-family: var(--wl-mono);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 5px;
	font-size: .7em;
	color: var(--wl-muted);
	text-align: center;
	letter-spacing: .06em;
}

.wliga-t {
	font-family: var(--wl-mono);
	font-size: .85em;
	font-variant-numeric: tabular-nums;
	text-align: center;
	padding: 5px 2px;
	border: 1px solid var(--wl-line);
	border-radius: 4px;
}

/* ---- Sello, notas y bloque legal ---- */

.wliga-ts {
	font-family: var(--wl-mono);
	margin: 16px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--wl-line);
	font-size: .78em;
	color: var(--wl-muted);
	line-height: 1.55;
}

.wliga-ts strong {
	color: var(--wl-ink);
}

.wliga-nota {
	font-size: .78em;
	color: var(--wl-muted);
	margin: 10px 0 0;
}

.wliga-sin-datos {
	font-size: .9em;
	color: #646e7a;
	font-style: italic;
}

/* Va visualmente diferenciado a propósito: un pie legal que se confunde con el
   cuerpo del texto cumple peor su función. */
.wliga-lf {
	font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	background: #fdfcfa;
	border: 1px solid #d6d1c7;
	border-left: 3px solid #c4973b;
	border-radius: 0 6px 6px 0;
	padding: 14px 16px;
	margin: 1.5em 0 0;
	font-size: .78em;
	line-height: 1.65;
	color: #6c7480;
}

.wliga-lf strong,
.wliga-lf a {
	color: #2d333b;
}

/* ---- Cuota inline en prosa ---- */

.wliga-cuota-inline {
	font-family: var(--wl-mono);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	font-weight: 600;
}

/* ---- Cuotas enlazadas ----

   TODAS las cuotas llevan el mismo tratamiento de color. El dorado significa
   "esto es pulsable", no "esto es mejor": el 1,33 y el 9,00 se ven idénticos.
   Es la regla de no destacar cuotas, aplicada al color en vez de al peso. */

.wliga-q,
.wliga-bloque a.wliga-q {
	color: var(--wl-gold-d);
	text-decoration: none;
	border-bottom: 0;
	display: block;
	width: 100%;
	transition: color .2s ease;
}

.wliga-q:hover,
.wliga-q:focus-visible {
	color: var(--wl-ink);
}

.wliga-cuota:has(.wliga-q),
.wliga-t:has(.wliga-q) {
	border-color: rgba(196, 151, 59, .4);
	background: rgba(196, 151, 59, .05);
	transition: background .2s ease, border-color .2s ease;
	cursor: pointer;
}

.wliga-cuota:has(.wliga-q:hover),
.wliga-cuota:has(.wliga-q:focus-visible),
.wliga-t:has(.wliga-q:hover),
.wliga-t:has(.wliga-q:focus-visible) {
	background: rgba(196, 151, 59, .14);
	border-color: var(--wl-gold);
}

/* Fallback para navegadores sin :has() · el enlace sigue siendo visible por su
   color aunque la celda no reaccione. */
.wliga-op .wliga-q,
.wliga-par .wliga-q {
	display: inline-block;
	width: auto;
}

.wliga-op:hover,
.wliga-op:focus-within {
	border-color: var(--wl-gold);
	background: rgba(196, 151, 59, .05);
}

.wliga-op {
	transition: background .2s ease, border-color .2s ease;
}

.wliga-q:focus-visible {
	outline: 2px solid var(--wl-gold);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Área táctil cómoda en móvil (recomendación WCAG de 44 px). */
@media (max-width: 640px) {

	.wliga-cuota,
	.wliga-t {
		min-height: 38px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* ---- Convivencia con el CSS canónico del cluster (#ucl26) ----

   Ese CSS aplica a TODOS los enlaces de su interior:

     #ucl26 a { color: var(--g-d) !important; border-bottom: 1px solid ... !important }

   Con especificidad de ID más !important, un selector normal no puede ganarle.
   Si un hub de ligas se envuelve en #ucl26 para heredar su hero y sus
   secciones, las cuotas saldrían subrayadas y con su dorado, no con el nuestro.
   Estas reglas suben al mismo nivel para devolverles su tratamiento.

   Se aplican solo dentro de #ucl26: fuera de ahí no hacen nada. */

#ucl26 .wliga-bloque a.wliga-q,
#ucl26 .wliga-lf a {
	border-bottom: 0 !important;
	text-decoration: none !important;
}

#ucl26 .wliga-bloque a.wliga-q {
	color: var(--wl-gold-d) !important;
}

#ucl26 .wliga-bloque a.wliga-q:hover,
#ucl26 .wliga-bloque a.wliga-q:focus-visible {
	color: var(--wl-ink) !important;
}

/* El tema y el cluster dan márgenes a los <p>; dentro de los bloques mandan
   los nuestros. */
#ucl26 .wliga-bloque p,
#ucl26 .wliga-lf {
	margin-top: 0;
}

#ucl26 .wliga-cap,
#ucl26 .wliga-equipos {
	border: 0;
	padding: 0;
}

/* ---- Safeguards contra wpautop ----
   WordPress inyecta <p> y <br> entre elementos de bloque dentro del contenido.
   El CSS canónico del cluster arrastra un bloque equivalente desde su v2.5:
   sin esto, las rejillas se rompen con párrafos y saltos espurios. */

.wliga-bloque > br,
.wliga-cab > br,
.wliga-lista > br,
.wliga-fila > br,
.wliga-1x2 > br,
.wliga-mini > br,
.wliga-part > br,
.wliga-trio > br,
.wliga-trio-cab > br,
.wliga-forma > br,
.wliga-op > br {
	display: none;
}

.wliga-cab > p,
.wliga-lista > p,
.wliga-fila > p,
.wliga-1x2 > p,
.wliga-mini > p,
.wliga-part > p,
.wliga-trio > p,
.wliga-trio-cab > p,
.wliga-forma > p,
.wliga-op > p {
	display: contents;
	margin: 0;
}

/* El tema puede traer viñetas y sangrado para cualquier ul del contenido. */
.wliga-lista,
.wliga-lista > li {
	list-style: none;
}

.wliga-lista > li::before,
.wliga-lista > li::marker {
	content: none;
}

/* ---- Móvil ---- */

@media (max-width: 640px) {

	.wliga-bloque {
		padding: 16px 14px;
	}

	/* La columna de probabilidad desaparece: a este ancho es ruido, y su
	   cabecera es la que se partía a mitad de palabra. La cuota se queda,
	   que es el dato. */
	.wliga-cab.con-prob,
	.wliga-fila.con-prob {
		grid-template-columns: 1fr 72px;
	}

	.wliga-cab.con-prob span:nth-child(3),
	.wliga-pct {
		display: none;
	}

	.wliga-cab,
	.wliga-fila {
		grid-template-columns: 1fr 72px;
		gap: 10px;
	}

	.wliga-fila {
		padding: 7px 0;
	}

	.wliga-cuota {
		padding: 6px 2px;
	}

	/* 1X2 en filas · mismo patrón que .odds-row .odd del cluster en móvil:
	   etiqueta a la izquierda, cuota a la derecha. Tres cajas de 110 px no
	   caben "Gana Deportivo de A Coruña". */
	.wliga-1x2 {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.wliga-op {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
		text-align: left;
		padding: 8px 12px;
	}

	.wliga-op-lab {
		margin-bottom: 0;
		font-size: .85em;
	}

	.wliga-op-num {
		font-size: 1.05em;
	}

	.wliga-mini {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.wliga-part {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	/* En una sola columna, el día vuelve a línea única: ocupa menos que
	   apilado y se lee igual. */
	.wliga-dia b {
		display: inline;
		margin-right: .4em;
	}

	.wliga-trio,
	.wliga-trio-cab {
		max-width: 100%;
	}

	.wliga-part-cab {
		display: none;
	}

	.wliga-equipos {
		font-size: 1.15em;
	}
}

@media (max-width: 380px) {

	.wliga-cab,
	.wliga-fila,
	.wliga-cab.con-prob,
	.wliga-fila.con-prob {
		grid-template-columns: 1fr 64px;
		gap: 8px;
	}

	.wliga-nombre {
		font-size: .9em;
	}
}

/* ---- Partido en juego ----

   Las cuotas archivadas son PREVIAS al inicio. El aviso tiene que ser
   inequívoco: quien entra a la página mientras se juega el partido es
   justamente quien más puede confundirlas con las del directo. */

.wliga-en-juego {
	border: 1px solid rgba(196, 151, 59, .45);
	background: rgba(196, 151, 59, .07);
	border-radius: 8px;
	padding: 12px 14px;
	margin: 0 0 16px;
}

.wliga-en-juego-etq {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	font-family: var(--wl-mono);
	font-size: .68em;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #a17a26;
	margin-bottom: .4em;
}

.wliga-en-juego-etq::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #c0392b;
	display: inline-block;
	animation: wliga-latido 1.8s ease infinite;
}

@keyframes wliga-latido {
	0%, 100% { opacity: 1; }
	50% { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
	.wliga-en-juego-etq::before { animation: none; }
}

.wliga-en-juego p {
	margin: 0;
	font-size: .85em;
	line-height: 1.5;
	color: var(--wl-text);
}

.wliga-en-juego-cta {
	display: inline-block;
	margin-top: 10px;
	background: #c4973b;
	color: #1a1408;
	font-size: .82em;
	font-weight: 700;
	padding: .5em 1.1em;
	border-radius: 100px;
	text-decoration: none;
	border-bottom: 0;
	transition: background .2s ease;
}

.wliga-en-juego-cta:hover,
.wliga-en-juego-cta:focus-visible {
	background: #e1bd5f;
	color: #1a1408;
}

#ucl26 .wliga-en-juego-cta {
	color: #1a1408 !important;
	border-bottom: 0 !important;
}

/* Fila en juego dentro de la lista de próximos partidos */

.wliga-part-live {
	background: rgba(196, 151, 59, .06);
	border-radius: 4px;
}

.wliga-live {
	color: #a17a26;
	font-weight: 700;
	text-transform: uppercase;
	font-size: .82em;
	letter-spacing: .04em;
}

/* ---- Fila destacada fuera del recorte ----

   Cuando el equipo del hub no entra en el limit, se añade al final con su
   puesto real. El salto visual es imprescindible: sin él, la fila parecería
   ocupar la posición siguiente a la última visible. */

.wliga-salto {
	display: block;
	text-align: center;
	padding: 4px 0;
	color: var(--wl-muted);
	letter-spacing: .3em;
	font-size: .8em;
	line-height: 1;
	border-bottom: 1px solid var(--wl-line-soft);
	list-style: none;
}

.wliga-pos {
	font-family: var(--wl-mono);
	font-size: .82em;
	color: var(--wl-muted);
	margin-right: .15em;
}

.wliga-fila.destacada .wliga-pos {
	color: var(--wl-gold-d);
}

/* ---- Dato inyectado en prosa ----

   [wliga_dato] envuelve su valor en este span para que el generador de datos
   estructurados pueda reconocerlo. No tiene aspecto propio: hereda todo del
   contexto donde se escriba, que puede ser una cabecera, un <strong> o una
   celda de métricas.

   La única regla es defensiva. Un tema con `span { display: block }` rompería
   el anidamiento en la fila de cuotas ancla, donde el dato va dentro de otro
   span. */

.wliga-dato {
	display: inline;
	font: inherit;
	color: inherit;
}