/**
 * Hoja de estilos de frontend de los cuatro widgets de Elementor del plugin.
 *
 * Se encola con el handle registrado en el bootstrap del plugin y solo llega a
 * las paginas que contienen algun widget, porque los cuatro la declaran en
 * get_style_depends(). No hay preprocesador ni build: el fichero se sirve tal
 * cual, sin @import ni recursos remotos, y es la unica hoja de frontend del
 * plugin (spec 2, restriccion 7).
 *
 * Toda regla arranca en una clase de la lista cerrada v2 del §3.4 de la spec, de
 * modo que ningun estilo puede alcanzar elementos ajenos de la pagina.
 *
 * Fuente de los valores: fichero Figma MNVZt0GII1NKhhHHpX5RQv, pagina Portada,
 * nodos 111:549 (next-match oscuro), 112:549 (next-match claro), 112:550
 * (standings-home), 112:551 (upcoming-matches), 112:2295 (league-tabs,
 * clasificacion) y 112:2763 (league-tabs, resultados). Base de escritorio a
 * 1440 px.
 *
 * En Figma solo existe el diseno de 1440 px, asi que las reglas de escritorio
 * son la base y los dos breakpoints de los bloques 10 y 11 solo restan: toda
 * media query de ancho de esta hoja es max-width y no existe ninguna min-width
 * (spec 4.9, regla 5).
 *
 * El plugin no encola ni declara fuentes (spec 2, restriccion 9): Manrope y
 * Google Sans las sirve el theme y esta hoja solo nombra la familia. Por eso no
 * hay ningun @font-face ni ninguna peticion externa.
 *
 * El bloque 4 implementa contrato, no apariencia: sin el se rompen el contrato
 * 4.11 (paginacion por tandas) y el cambio de pestana.
 *
 * @package Adceuta_Opta
 */

/* -------------------------------------------------------------------------
 * 1. Tokens de diseno
 *
 * Se declaran sobre los cuatro bloques raiz y nunca sobre :root (spec 2,
 * restriccion 8): asi el plugin no publica tokens al resto del documento ni
 * puede colisionar con los del theme.
 *
 * Los valores salen de los seis nodos de Figma; los nombres son semanticos para
 * que retunear el diseno sea cambiar valores y no reescribir reglas.
 * ---------------------------------------------------------------------- */

.adceuta-next-match,
.adceuta-standings-home,
.adceuta-upcoming-matches,
.adceuta-league-tabs {

	/*
	 * Paleta de marca leida de Figma: Rojo Ceuta, Negro, Blanco y Gris botones
	 * son los cuatro tokens nombrados del fichero.
	 *
	 * El Rojo Ceuta se pinta con su valor exacto, y eso implica un
	 * incumplimiento de AA asumido: blanco sobre #f10508 da 4.41:1, 0.09 puntos
	 * por debajo del 4.5:1 que exige el texto normal. No es un descuido, es un
	 * tradeoff decidido por el usuario y registrado como excepcion unica en el
	 * §7 D-07 de la spec, acotada en AC-45. Se descarto oscurecer el token tres
	 * niveles porque el color corporativo no lo decide la capa de estilos.
	 *
	 * Consecuencia de contrato, no licencia tipografica: el __title de la
	 * variante is-light va a 20 px en negrita y no a los 18 px del nodo, porque
	 * a 20 px clasifica como texto grande y su umbral baja a 3:1, que 4.41:1 si
	 * supera. Bajarlo a 18 px lo devolveria a texto normal y volveria a fallar.
	 * Lo fija D-07 de forma explicita.
	 */
	--adceuta-color-accent: #f10508;
	--adceuta-color-accent-contrast: #ffffff;

	/* Resaltado de la fila del club en la tabla de clasificacion. */
	--adceuta-color-accent-soft: #fef2f2;
	--adceuta-color-accent-text: #c81014;

	/* Texto y superficies claras, que es el esquema de tres de los cuatro
		bloques y el de la variante is-light del cuarto. */
	--adceuta-color-text: #121212;
	--adceuta-color-text-muted: #4d4d4d;
	--adceuta-color-text-subtle: #737373;
	--adceuta-color-text-legend: #666666;
	--adceuta-color-text-invert: #ffffff;
	--adceuta-color-surface: #ffffff;
	--adceuta-color-surface-alt: #f7f7f7;
	--adceuta-color-surface-highlight: rgba( 217, 217, 217, 0.35 );
	--adceuta-color-border: #e0e0e0;
	--adceuta-color-border-strong: #121212;

	/* Cabecera de la tabla de clasificacion, unica superficie oscura del
		esquema claro. */
	--adceuta-color-surface-head: #232323;
	--adceuta-color-text-head: #a6a6a6;

	/* Superficie de la tarjeta oscura de next-match. Es un negro con alfa: sea
		cual sea el fondo de la seccion, el compuesto mas claro posible es
		#6b6b6b, que con texto blanco da 5.33:1. El contraste queda garantizado
		sin conocer el fondo del theme. */

	/* Controles: pestana inactiva y navegacion entre tandas. */
	--adceuta-color-control: #d3d3d3;
	--adceuta-color-control-text: rgba( 0, 0, 0, 0.58 );

	/* Zonas de clasificacion. El mismo token pinta la barra izquierda de la
		fila y el punto de su entrada de leyenda, asi que los dos colores no
		pueden divergir (spec 3.4, regla 2). */
	--adceuta-color-zone-promotion: #1948a0;
	--adceuta-color-zone-playoff: #f77d0b;
	--adceuta-color-zone-relegation: #999999;

	/* Anillo de foco, deliberadamente distinto del acento para que el foco no se
		confunda con el destacado del club. */
	--adceuta-color-focus: #0b57d0;

	/* Familias tipograficas del diseno. Se nombran, no se cargan. */
	--adceuta-font-body: 'Manrope', system-ui, -apple-system, sans-serif;
	--adceuta-font-display: 'Google Sans', 'Product Sans', system-ui, sans-serif;

	/* Escala tipografica, en px del diseno: 8, 11, 12, 13, 14, 18, 20, 24 y 38. */
	--adceuta-font-size-2xs: 0.5rem;
	--adceuta-font-size-xs: 0.6875rem;
	--adceuta-font-size-sm: 0.75rem;
	--adceuta-font-size-md: 0.8125rem;
	--adceuta-font-size: 0.875rem;
	--adceuta-font-size-lg: 1.125rem;
	--adceuta-font-size-xl: 1.25rem;
	--adceuta-font-size-2xl: 1.5rem;
	--adceuta-font-size-3xl: 2.375rem;
	--adceuta-line-height: 1.4;

	/* Interletrado de las mayusculas del diseno. */
	--adceuta-tracking-tight: 0.05em;
	--adceuta-tracking-wide: 0.1em;
	--adceuta-tracking-widest: 0.28em;

	/* Espaciado, en px del diseno: 4, 6, 10, 15, 24, 32 y 80. */
	--adceuta-space-xs: 0.25rem;
	--adceuta-space-sm: 0.375rem;
	--adceuta-space-md: 0.625rem;
	--adceuta-space-lg: 0.9375rem;
	--adceuta-space-xl: 1.5rem;
	--adceuta-space-2xl: 2rem;
	--adceuta-space-3xl: 5rem;

	/*
	 * Escudos. Un solo token por contexto, no un par ancho/alto: cada regla
	 * .__crest fija height:auto + aspect-ratio:1/1, asi que el escudo siempre
	 * es cuadrado (width x width) sea cual sea la proporcion nativa del
	 * fichero real. Hasta esta revision cada contexto tenia tambien un token
	 * de alto propio, pero con height fijo aspect-ratio no tiene ningun efecto
	 * en un <img>: un escudo real mas vertical que ancho (o al reves) se veia
	 * a un tamano distinto que el resto solo por su forma. Ver el comentario
	 * de .adceuta-next-match__crest para el detalle.
	 *
	 * Vueltos al tamano original (x1): el x2 y despues el x1.5 que se
	 * probaron a peticion expresa se vieron excesivos los dos.
	 */
	--adceuta-crest-width: 1.75rem;
	--adceuta-crest-width-md: 4.875rem;
	/* Exclusivo de next-match en variante clara: -md lo comparten otros tres
	   widgets y subirlo agrandaria sus escudos tambien. */
	--adceuta-crest-width-next-light: 3.375rem;
	--adceuta-crest-width-lg: 5rem;

	/* Detalles visuales. */
	--adceuta-radius: 1rem;
	--adceuta-radius-sm: 0.5rem;
	--adceuta-radius-md: 0.75rem;
	--adceuta-radius-pill: 300px;
	--adceuta-border-width: 1px;
	--adceuta-border-hairline: 0.5px;
	--adceuta-zone-bar: 4px;
	--adceuta-focus-width: 3px;
	--adceuta-focus-offset: 2px;
	--adceuta-shadow-card: 10px 10px 5px rgba( 0, 0, 0, 0.11 );
	--adceuta-shadow-row: 10px 10px 5px rgba( 0, 0, 0, 0.03 );
	--adceuta-transition: 150ms ease;

	box-sizing: border-box;
	max-width: 100%;
	font-family: var(--adceuta-font-body);
	font-size: var(--adceuta-font-size);
	line-height: var(--adceuta-line-height);
	color: var(--adceuta-color-text);
}

.adceuta-next-match *,
.adceuta-standings-home *,
.adceuta-upcoming-matches *,
.adceuta-league-tabs * {
	box-sizing: inherit;
}

/* -------------------------------------------------------------------------
 * 2. Utilidad transversal
 * ---------------------------------------------------------------------- */

/**
 * Oculta visualmente conservando el elemento en el arbol de accesibilidad.
 *
 * Ni display:none ni visibility:hidden: ambos lo sacarian del arbol y anularian
 * el motivo de existir de esta clase, que es dar forma completa a todo dato
 * abreviado en pantalla (spec 2, restriccion 12).
 */
.adceuta-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * 3. Comportamiento (contrato 4.11 y cambio de pestana)
 *
 * El servidor imprime is-hidden en las tandas no visibles y en el panel
 * inactivo; el JavaScript solo la quita o la pone. Esta regla es lo que
 * convierte esa clase en visibilidad real. Si falta, la pestana de resultados
 * pinta los 42 partidos de golpe, el cambio de pestana no oculta nada y los dos
 * botones de navegacion siguen visibles al agotarse su direccion.
 * ---------------------------------------------------------------------- */

.adceuta-league-tabs__panel.is-hidden,
.adceuta-league-tabs__group.is-hidden,
.adceuta-league-tabs__button.is-hidden {
	display: none;
}

/* -------------------------------------------------------------------------
 * 4. Widget Proximo Partido (nodos 111:549 y 112:549)
 *
 * Las dos variantes comparten DOM y solo difieren en CSS (spec 4.8, regla 5):
 * en is-dark el bloque raiz aporta la superficie oscura y __card es
 * transparente, de modo que el titulo se lee dentro de la tarjeta; en is-light
 * el raiz es transparente y __card aporta la superficie blanca.
 *
 * Hijos de __card, en orden de marcado: __matchday, __team, __vs, __team,
 * __schedule, __tickets y __venue. El diseno los ordena de otra forma, asi que
 * la colocacion se hace con rejilla explicita. Las dos filas de equipos se
 * colocan dando a __team solo su fila: al tener fila definida y columna
 * automatica, el algoritmo de rejilla los reparte en la primera y la tercera
 * columna, porque la central ya esta ocupada por __vs. Es colocacion
 * determinista y no depende de ningun selector posicional.
 * ---------------------------------------------------------------------- */

/*
 * UNICA regla de la hoja que alcanza marcado de Elementor y no del plugin.
 *
 * El envoltorio .elementor-widget-adceuta-next-match lo genera Elementor, no
 * nuestras vistas. Sin esta regla, un contenedor flex con align-items: center
 * encoge el widget a su contenido, y forzarlo exigiria tocar el ajuste "Ancho
 * personalizado" en cada instancia. Se declara aqui como default por decision
 * expresa del usuario (ver spec 6, decision 19).
 *
 * Dos consecuencias asumidas y documentadas:
 *
 * 1. Acopla la hoja a la convencion de clases de Elementor. Si Elementor
 *    cambia como nombra el envoltorio, esta regla deja de aplicar en silencio.
 * 2. Compite con el mecanismo de variables de Elementor (--width,
 *    --container-widget-width), que es como el editor fija anchos por
 *    instancia. Con especificidad (0,1,0) pierde frente a las reglas que
 *    genera el editor, asi que actua de default y no de imposicion: es el
 *    comportamiento deseado.
 *
 * AC-28 la excluye de su cruce de selectores: no encuentra nodo al auditar la
 * hoja contra el marcado del plugin, y eso es correcto, no un huerfano.
 */
.elementor-widget-adceuta-next-match {
	width: 100%;
}

.adceuta-next-match {
	display: flex;
	width: 100%;
	flex-direction: column;
	gap: var(--adceuta-space-sm);
	text-align: center;
}

.adceuta-next-match__header {
	display: flex;
	flex-direction: column;
}

.adceuta-next-match__card {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr ) auto;
	align-items: center;
	justify-items: center;
	row-gap: var(--adceuta-space-sm);
}

.adceuta-next-match__matchday {
	grid-row: 1;
	grid-column: 1 / -1;
	margin: 0;
	font-size: var(--adceuta-font-size-2xs);
	letter-spacing: var(--adceuta-tracking-wide);

	/* La mayuscula integra del diseno la aporta text-transform y nunca la
		cadena traducible (spec 6, nota 15): esta propiedad no emite texto. */
	text-transform: uppercase;
}

/* La pildora de fecha y hora es el unico elemento con superficie propia; ni
	__date ni __time la llevan (spec 3.4, regla 5). */
.adceuta-next-match__schedule {
	display: inline-flex;
	grid-row: 2;
	grid-column: 1 / -1;
	align-items: baseline;
	gap: var(--adceuta-space-xs);
	/* Lateral reducido de -xl a -lg a peticion expresa; el vertical no cambia. */
	padding: var(--adceuta-space-md) var(--adceuta-space-lg);
	border: var(--adceuta-border-hairline) solid currentColor;
	border-radius: var(--adceuta-radius);
	white-space: nowrap;
}

.adceuta-next-match__date,
.adceuta-next-match__time {
	margin: 0;
	font-size: var(--adceuta-font-size-2xs);
	letter-spacing: var(--adceuta-tracking-wide);
	text-transform: uppercase;
}

.adceuta-next-match__date time {
	color: inherit;
}

.adceuta-next-match__time {
	font-variant-numeric: tabular-nums;
}

/* El separador tipografico si puede vivir en CSS (spec 2, restriccion 6): no es
	una palabra ni una abreviatura traducible. */
.adceuta-next-match__time::before {
	content: '\00B7\00A0';
}

.adceuta-next-match__team {
	display: flex;
	grid-row: 3;
	flex-direction: column;
	align-items: center;
	gap: 0.3125rem;
	min-width: 0;
}

.adceuta-next-match__crest {
	display: block;
	width: var(--adceuta-crest-width-lg);
	/*
	 * Alto en auto + aspect-ratio 1/1, en vez de height fijo: con las dos
	 * dimensiones fijas, aspect-ratio no tiene ningun efecto en un elemento
	 * reemplazado como <img>, asi que object-fit:contain seguia usando la
	 * proporcion real del fichero de escudo dentro de una caja mas alta que
	 * ancha. Eso hacia que un escudo real vertical (p. ej. Real Oviedo) llenara
	 * todo el alto y se viera enorme, mientras uno mas ancho (p. ej. AD Ceuta
	 * FC) quedaba limitado por el ancho y se veia pequeno: mismo token de
	 * tamano, resultado visual muy distinto segun la forma de cada escudo.
	 *
	 * Con height:auto, el navegador deriva el alto del ancho via aspect-ratio,
	 * asi que la caja de la <img> siempre acaba cuadrada (width x width),
	 * igual que la casilla interior del sprite de escudos (crest-sprite.css).
	 */
	height: auto;
	aspect-ratio: 1 / 1;
	max-width: 100%;
	object-fit: contain;
}

.adceuta-next-match__name {
	font-size: var(--adceuta-font-size-2xs);
	letter-spacing: var(--adceuta-tracking-wide);
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

/* __vs es marcado con texto de PHP; aqui solo se le da forma. */
.adceuta-next-match__vs {
	grid-row: 3;
	grid-column: 2;
	font-size: var(--adceuta-font-size);
	font-weight: 700;
	letter-spacing: var(--adceuta-tracking-wide);
	text-transform: uppercase;
}

/**
 * Ancla de venta de entradas.
 *
 * No comparte ningun selector con __button (spec 3.4, regla 1): son elementos
 * distintos, uno navega a la tienda y el otro cambia de tanda de partidos.
 */
.adceuta-next-match__tickets {
	display: inline-flex;
	grid-row: 4;
	grid-column: 1 / -1;
	align-items: center;
	gap: var(--adceuta-space-sm);
	margin-top: var(--adceuta-space-md);
	padding: 0.8125rem 1.875rem;
	border-radius: var(--adceuta-radius-pill);
	background-color: var(--adceuta-color-accent);
	font-family: var(--adceuta-font-display);
	font-size: var(--adceuta-font-size-sm);
	font-weight: 500;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	/* !important por el kit de Elementor: ver la nota de .adceuta-standings-home__link. */
	color: var(--adceuta-color-accent-contrast) !important;
	transition: background-color var(--adceuta-transition);
}

.adceuta-next-match__tickets:hover {
	background-color: var(--adceuta-color-text);
}

/* El SVG llega con atributos width/height de 20 px; el diseno lo dibuja mas
	pequeno, asi que el tamano lo fija la hoja. */
.adceuta-next-match__tickets svg {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
}

/* __venue no lo dibuja el nodo de Figma, pero se conserva porque retirarlo
	seria una regresion de la lista v1 (spec 4.2). Tratamiento secundario. */
.adceuta-next-match__venue {
	grid-row: 5;
	grid-column: 1 / -1;
	margin: 0;
	font-size: var(--adceuta-font-size-2xs);
	letter-spacing: var(--adceuta-tracking-tight);
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.adceuta-next-match__empty {
	margin: 0;
	font-size: var(--adceuta-font-size-sm);
}

/**
 * Variante oscura (nodo 111:549), para portada.
 *
 * El raiz aporta la superficie y la tarjeta es transparente. Todo el texto es
 * blanco: sobre la superficie mas clara que puede producir el negro al 58 %
 * el blanco da 5.33:1, mientras que cualquier gris claro caeria por debajo de
 * 4.5:1 sin conocer el fondo del theme.
 */
/*
 * La variante oscura no pinta superficie: el fondo lo aporta la seccion de
 * Elementor que contiene el widget. Se aparta a proposito del nodo 111:549,
 * que lleva un velo de negro al 58 %, por decision del usuario (ver spec 6,
 * decision 18). Consecuencia asumida: el contraste del texto blanco deja de
 * estar garantizado por la hoja y depende del fondo que ponga el editor.
 */
.adceuta-next-match.is-dark {
	padding: 1rem 1.5rem 1.625rem;
	background-color: transparent;
	color: var(--adceuta-color-text-invert);
}

.adceuta-next-match.is-dark .adceuta-next-match__card {
	padding: 0;
	background-color: transparent;
	box-shadow: none;
}

.adceuta-next-match.is-dark .adceuta-next-match__title {
	margin: 0;
	font-family: var(--adceuta-font-body);
	font-size: var(--adceuta-font-size-sm);
	font-weight: 400;
	letter-spacing: var(--adceuta-tracking-widest);
	text-transform: uppercase;
	color: inherit;
}

.adceuta-next-match.is-dark .adceuta-next-match__team {
	/* Aire extra a peticion expresa entre __schedule (la pildora de fecha) y
		los escudos: se suma al row-gap del grid (--adceuta-space-sm, 6px),
		que por si solo se quedaba corto. */
	margin-top: var(--adceuta-space-md);
	padding-bottom: 0.6875rem;
}

/**
 * Variante clara (nodo 112:549), tarjeta blanca sobre fondo rojo.
 *
 * El raiz es transparente: el rojo lo pinta la seccion de Elementor, no el
 * plugin. Por eso el titulo va en blanco, que es el unico color legible sobre
 * ese fondo, y sube de 18 a 20 px en negrita para clasificar como texto grande
 * de WCAG: blanco sobre Rojo Ceuta da 4.41:1, que cumple el 3:1 de texto grande
 * pero no el 4.5:1 de texto normal.
 *
 * Reordena la rejilla: aqui la pildora vive en la columna central, encima de
 * __vs, y los equipos abarcan las dos filas centrales.
 */
.adceuta-next-match.is-light {
	gap: var(--adceuta-space-xl);
	padding: 0;
	background-color: transparent;
	text-align: left;
}

.adceuta-next-match.is-light .adceuta-next-match__title {
	margin: 0;
	font-family: var(--adceuta-font-display);
	font-size: var(--adceuta-font-size-xl);
	font-weight: 700;
	letter-spacing: 0.135em;
	text-transform: uppercase;
	color: var(--adceuta-color-text-invert);
}

.adceuta-next-match.is-light .adceuta-next-match__card {
	padding: 1.375rem 1.5rem 0.375rem;
	border-radius: var(--adceuta-radius);
	background-color: var(--adceuta-color-surface);
	box-shadow: var(--adceuta-shadow-card);
	color: var(--adceuta-color-text);
	text-align: center;
}

.adceuta-next-match.is-light .adceuta-next-match__matchday {
	justify-self: end;
	font-weight: 800;
}

.adceuta-next-match.is-light .adceuta-next-match__schedule {
	grid-row: 2;
	grid-column: 2;
	border-color: var(--adceuta-color-border-strong);
}

.adceuta-next-match.is-light .adceuta-next-match__team {
	grid-row: 2 / span 2;
	padding-bottom: 1.4375rem;
}

.adceuta-next-match.is-light .adceuta-next-match__crest {
	width: var(--adceuta-crest-width-next-light);
	/* height:auto, no el token: ver el comentario de .adceuta-next-match__crest base. */
	height: auto;
}

/**
 * Nombres de equipo de la variante clara.
 *
 * El nodo 112:549 muestra solo los escudos; el 111:549 si dibuja el nombre bajo
 * cada uno. Como AC-02 exige que las dos variantes emitan el mismo DOM, esa
 * diferencia solo puede hacerla esta hoja: si no la hace el CSS, no la hace
 * nadie.
 *
 * Se oculta visualmente conservando el nodo en el arbol de accesibilidad, nunca
 * con display:none ni visibility:hidden: sin el nombre, la unica
 * identificacion del equipo seria el alt del escudo, y la restriccion 12 del §2
 * lo prohibe. Es el mismo criterio que upcoming-matches aplica desde el
 * marcado.
 *
 * Las declaraciones se duplican en lugar de reutilizar .adceuta-visually-hidden
 * con un selector compuesto, porque esa clase no la emite el marcado de
 * next-match y el selector no encontraria ningun nodo.
 */
.adceuta-next-match.is-light .adceuta-next-match__name {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* El boton de la variante clara es un contorno discontinuo sobre blanco, no una
	pildora roja: el nodo 112:549 lo dibuja asi para no repetir el rojo del
	fondo dentro de la tarjeta. */
.adceuta-next-match.is-light .adceuta-next-match__tickets {
	justify-self: stretch;
	justify-content: center;
	margin: 0 var(--adceuta-space-md) 0;
	border: var(--adceuta-border-hairline) dashed var(--adceuta-color-text);
	background-color: transparent;
	/* Tambien !important, y no por Elementor: la regla base del boton ya lo lleva,
		asi que sin el la variante clara perderia su color de texto. */
	color: var(--adceuta-color-text) !important;
}

.adceuta-next-match.is-light .adceuta-next-match__tickets:hover {
	background-color: var(--adceuta-color-surface-alt);
}

.adceuta-next-match.is-light .adceuta-next-match__venue {
	color: var(--adceuta-color-text-muted);
}

/**
 * Estado vacio de la variante clara.
 *
 * Recibe la misma superficie blanca que la tarjeta en lugar de quedar como
 * texto suelto sobre el rojo de la seccion. No es adorno: en blanco sobre Rojo
 * Ceuta el mensaje daria 4.41:1, por debajo del 4.5:1 que exige AC-45 para
 * texto normal, y sobre la superficie blanca da 18.7:1.
 */
.adceuta-next-match.is-light .adceuta-next-match__empty {
	padding: var(--adceuta-space-xl);
	border-radius: var(--adceuta-radius);
	background-color: var(--adceuta-color-surface);
	box-shadow: var(--adceuta-shadow-card);
	color: var(--adceuta-color-text-muted);
}

/* -------------------------------------------------------------------------
 * 5. Widget Clasificacion Portada (nodo 112:550)
 *
 * Panel blanco con cabecera y una tira horizontal de tarjetas de equipo. Ya no
 * hay tabla: la vista emite <ol> (spec 4.7), asi que las reglas de __table,
 * __played y __goal-diff de la version anterior de esta hoja desaparecen aqui,
 * porque este widget dejo de emitir esas tres clases.
 * ---------------------------------------------------------------------- */

.adceuta-standings-home {
	padding: var(--adceuta-space-2xl);
	border-radius: var(--adceuta-radius);
	background-color: var(--adceuta-color-surface);
}

.adceuta-standings-home__header {
	display: flex;
	align-items: center;
	gap: var(--adceuta-space-md);
	margin-bottom: var(--adceuta-space-2xl);
}

.adceuta-standings-home__title {
	margin: 0;
	font-family: var(--adceuta-font-display);
	font-size: var(--adceuta-font-size-xl);
	font-weight: 700;
	line-height: 1.2;
	color: var(--adceuta-color-text);
}

/* Separador decorativo entre el titulo y el logotipo de la competicion, tal
	como lo dibuja el nodo. Es tipografia, no texto de interfaz. */
.adceuta-standings-home__title::after {
	content: '\00A0\00B7';
}

.adceuta-standings-home__logo {
	display: block;
	flex: 0 0 auto;
	width: 10.125rem;
	height: auto;
}

/*
 * El enlace de accion se separa del titulo y se ancla al extremo opuesto.
 *
 * El color va con !important a proposito: el kit global de Elementor colorea los
 * enlaces con un selector mas especifico que esta clase suelta, asi que sin la
 * declaracion el texto de la pildora hereda el color de enlace del tema y pierde
 * contraste sobre el fondo de acento. Es la unica via sin subir la especificidad
 * anclando la regla a marcado de Elementor, que no es nuestro.
 */
.adceuta-standings-home__link {
	display: inline-flex;
	align-items: center;
	margin-left: auto;
	padding: 0.5625rem 1.1875rem;
	border-radius: var(--adceuta-radius-pill);
	background-color: var(--adceuta-color-accent);
	font-family: var(--adceuta-font-display);
	font-size: var(--adceuta-font-size-sm);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	color: var(--adceuta-color-accent-contrast) !important;
	transition: background-color var(--adceuta-transition);
}

.adceuta-standings-home__link:hover {
	background-color: var(--adceuta-color-text);
}

/**
 * Tira de equipos.
 *
 * El scroll horizontal es permanente y no depende de ningun breakpoint (spec
 * 4.9, regla 3): el marcado lleva siempre tabindex="0" y aria-label porque PHP
 * no sabe si habra desbordamiento, y declarar el scroll solo bajo una media
 * query dejaria una parada de tabulacion sin region desplazable en escritorio.
 * La tira no envuelve a varias lineas: el diseno es una fila.
 */
ol.adceuta-standings-home__list {
	display: flex;
	gap: var(--adceuta-space-md);
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	list-style: none;
}

.adceuta-standings-home__row {
	flex: 1 0 8.75rem;
	list-style: none;
}

.adceuta-standings-home__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--adceuta-space-md);
	height: 100%;
	padding: var(--adceuta-space-md) var(--adceuta-space-sm);
	border-radius: var(--adceuta-radius-md);
	scroll-snap-align: start;
	text-align: center;
}

.adceuta-standings-home__crest {
	display: block;
	flex: 0 0 auto;
	width: var(--adceuta-crest-width-md);
	/* Ver el comentario de .adceuta-next-match__crest: height:auto es lo que
		hace que aspect-ratio cuadre la caja, un height fijo lo anularia. */
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.adceuta-standings-home__name {
	min-width: 0;
	font-size: var(--adceuta-font-size-2xs);
	letter-spacing: var(--adceuta-tracking-wide);
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

/* __summary contiene exactamente __position y __points; el ordinal y la unidad
	los compone PHP (spec 4.7, regla 2) y aqui solo se anade el punto medio
	decorativo entre ambos. */
.adceuta-standings-home__summary {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: var(--adceuta-space-xs);
	margin-top: auto;
	font-family: var(--adceuta-font-display);
	font-size: var(--adceuta-font-size-sm);
	font-weight: 500;
}

.adceuta-standings-home__position::after {
	content: '\00A0\00B7';
}

.adceuta-standings-home__points {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/**
 * Tarjeta del club.
 *
 * El destacado es una superficie propia mas redondeo, no solo color: sobrevive
 * a la vision de color reducida y a una impresion en escala de grises. En el
 * marcado, ademas, la fila lleva aria-current.
 */
.adceuta-standings-home__row.is-club .adceuta-standings-home__card {
	background-color: var(--adceuta-color-surface-highlight);
}

.adceuta-standings-home__row.is-club .adceuta-standings-home__summary {
	font-weight: 700;
}

.adceuta-standings-home__empty {
	margin: 0;
	font-size: var(--adceuta-font-size-sm);
	color: var(--adceuta-color-text-muted);
}

/* -------------------------------------------------------------------------
 * 6. Widget Siguientes Partidos (nodo 112:551)
 *
 * Cabecera sobre fondo oscuro de seccion y cuatro tarjetas blancas en rejilla.
 * El bloque raiz es transparente: el fondo lo pinta la seccion de Elementor,
 * igual que en la variante clara de next-match.
 *
 * La tarjeta usa la misma tecnica de rejilla que next-match is-light, y por el
 * mismo motivo: el orden de marcado no es el orden visual y los dos __team se
 * colocan por fila definida y columna automatica, sin selector posicional.
 * ---------------------------------------------------------------------- */

.adceuta-upcoming-matches {
	display: flex;
	flex-direction: column;
	gap: var(--adceuta-space-2xl);
}

.adceuta-upcoming-matches__header {
	display: flex;
	align-items: center;
	gap: var(--adceuta-space-md);
}

.adceuta-upcoming-matches__title {
	margin: 0;
	font-family: var(--adceuta-font-display);
	font-size: var(--adceuta-font-size-xl);
	font-weight: 700;
	line-height: 1.2;
	color: var(--adceuta-color-text-invert);
}

.adceuta-upcoming-matches__link {
	display: inline-flex;
	align-items: center;
	margin-left: auto;
	padding: 0.5625rem 1.1875rem;
	border-radius: var(--adceuta-radius-pill);
	background-color: var(--adceuta-color-text);
	font-family: var(--adceuta-font-display);
	font-size: var(--adceuta-font-size-sm);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	/* !important por el kit de Elementor: ver la nota de .adceuta-standings-home__link. */
	color: var(--adceuta-color-text-invert) !important;
	transition: background-color var(--adceuta-transition);
}

/* Los tres :hover de la hoja usan el mismo gris y no el rojo de marca: Figma no
	especifica hovers, asi que un estado inventado no puede introducir un
	incumplimiento de AA que el diseno no pide. Blanco sobre #4d4d4d da
	8.45:1. */
.adceuta-upcoming-matches__link:hover {
	background-color: var(--adceuta-color-text-muted);
}

ul.adceuta-upcoming-matches__list {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	/**
	 * El hueco baja de 3.625rem a 2rem al subir el escudo -md.
	 *
	 * Es el unico sitio de la tira donde queda espacio que ceder: a cuatro
	 * columnas el ancho de tarjeta sale de repartir el contenedor, y el par de
	 * escudos nuevo ya no deja hueco a la pildora de fecha, que no puede encoger
	 * (ver la nota de __card). 58 px de separacion entre tarjetas era holgura de
	 * un diseno con escudos de 46 px; con escudos de 78 px, ese aire tiene que
	 * estar dentro de la tarjeta y no entre tarjetas.
	 */
	gap: var(--adceuta-space-2xl);
	margin: 0;
	padding: 0;
	list-style: none;
}

.adceuta-upcoming-matches__row {
	display: flex;
	list-style: none;
}

.adceuta-upcoming-matches__card {
	display: grid;
	grid-template-columns: auto minmax( 0, 1fr ) auto;
	align-items: center;
	justify-items: center;
	/*
	 * Sin esto, una tarjeta sin boton de entradas se desmaqueta. Las tarjetas de
	 * la tira se estiran todas al alto de la mas alta (la que si tiene boton), y
	 * el reparto por defecto del alto sobrante en una rejilla de filas
	 * automaticas es estirarlas: la fila de la pildora y la del VS crecen, se
	 * separan entre si y dejan de alinearse con las tarjetas vecinas. Anclando el
	 * contenido arriba, las cuatro tarjetas colocan jornada, escudos, pildora y VS
	 * a la misma altura, y a la que le falta el boton le sobra hueco abajo, que es
	 * exactamente el que ocupa el boton en las demas.
	 */
	align-content: start;
	width: 100%;
	/**
	 * El fondo inferior era 0.375rem porque el boton aportaba todo el aire de
	 * abajo; con el boton separado del VS, la tarjeta necesita su propio margen.
	 *
	 * El lateral baja de 1.5rem a 0.625rem al subir el escudo -md. La tarjeta es
	 * `auto | minmax(0,1fr) | auto`: los dos escudos fijan sus columnas y la
	 * pildora se queda con el resto, pero lleva white-space:nowrap y no puede
	 * encoger, asi que cuando no cabe **desborda su columna y se monta sobre los
	 * escudos**.
	 *
	 * A cuatro columnas en un contenedor de 1240 px la pildora cabia por 3 px con
	 * el escudo de 46 px. El de 78 px se lleva 64 px mas entre los dos escudos, y
	 * se recuperan repartidos en tres sitios: el hueco de la rejilla (20 px de
	 * ancho de tarjeta), este lateral (28 px) y el lateral de la propia pildora
	 * (20 px). La red de seguridad es el flex-wrap de __schedule: si aun asi no
	 * cabe, la pildora parte en dos lineas en vez de montarse sobre un escudo.
	 */
	padding: 1.375rem var(--adceuta-space-md);
	border-radius: var(--adceuta-radius);
	background-color: var(--adceuta-color-surface);
	box-shadow: var(--adceuta-shadow-card);
	text-align: center;
}

.adceuta-upcoming-matches__matchday {
	grid-row: 1;
	grid-column: 1 / -1;
	justify-self: end;
	font-size: var(--adceuta-font-size-2xs);
	font-weight: 800;
	letter-spacing: var(--adceuta-tracking-wide);
	text-transform: uppercase;
}

.adceuta-upcoming-matches__team {
	display: flex;
	grid-row: 2 / span 2;
	align-items: center;
	min-width: 0;
	padding-bottom: 1.4375rem;
}

.adceuta-upcoming-matches__crest {
	flex: 0 0 auto;
	width: var(--adceuta-crest-width-md);
	/* Ver el comentario de .adceuta-next-match__crest. */
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

/* El nombre se emite siempre con .adceuta-visually-hidden porque la tarjeta del
	diseno solo muestra escudos (spec 4.3). La regla existe porque la clase se
	emite, y deja el nombre legible si algun dia dejara de ocultarse. */
.adceuta-upcoming-matches__name {
	font-size: var(--adceuta-font-size-2xs);
	letter-spacing: var(--adceuta-tracking-wide);
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.adceuta-upcoming-matches__schedule {
	display: inline-flex;
	grid-row: 2;
	grid-column: 2;
	align-items: baseline;
	/**
	 * Red de seguridad frente al solape.
	 *
	 * El nowrap de abajo es de diseno —la pildora es de una linea— y afecta al
	 * texto, no a la caja: sin flex-wrap, cuando la pildora no cabe en su columna
	 * la desborda y se monta sobre los escudos, que es el modo de fallo que el
	 * calculo de anchos de __card evita por 7 px. Con flex-wrap, el caso limite
	 * degrada a fecha arriba y hora abajo, que es legible; cada una conserva su
	 * nowrap interno. En anchos normales no cambia nada: no hay wrap que aplicar.
	 */
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--adceuta-space-xs);
	/* Lateral de 1.25rem a 0.625rem: ver la nota de padding en __card. La pildora
		es el unico elemento de la tarjeta que no puede encoger, asi que parte de
		lo que ocupan los escudos nuevos se recupera de su propio aire. */
	padding: 0.3125rem var(--adceuta-space-md);
	border: var(--adceuta-border-hairline) solid var(--adceuta-color-border-strong);
	border-radius: var(--adceuta-radius);
	white-space: nowrap;
}

.adceuta-upcoming-matches__date,
.adceuta-upcoming-matches__time {
	font-size: var(--adceuta-font-size-2xs);
	letter-spacing: var(--adceuta-tracking-wide);
	text-transform: uppercase;
}

.adceuta-upcoming-matches__time {
	font-variant-numeric: tabular-nums;
}

.adceuta-upcoming-matches__time::before {
	content: '\00B7\00A0';
}

.adceuta-upcoming-matches__vs {
	grid-row: 3;
	grid-column: 2;
	font-size: var(--adceuta-font-size);
	font-weight: 700;
	letter-spacing: var(--adceuta-tracking-wide);
	text-transform: uppercase;
}

.adceuta-upcoming-matches__tickets {
	display: inline-flex;
	grid-row: 4;
	grid-column: 1 / -1;
	align-items: center;
	justify-content: center;
	justify-self: stretch;
	gap: var(--adceuta-space-sm);
	/* El margen superior es el aire que el diseno deja entre el VS y el boton:
		sin el, la rejilla pega la fila 4 a la fila del VS. */
	margin: var(--adceuta-space-xl) var(--adceuta-space-md) 0;
	padding: 0.8125rem 1.875rem;
	border: var(--adceuta-border-hairline) dashed var(--adceuta-color-text);
	border-radius: var(--adceuta-radius-pill);
	font-family: var(--adceuta-font-display);
	font-size: var(--adceuta-font-size-sm);
	font-weight: 500;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	/* !important por el kit de Elementor: ver la nota de .adceuta-standings-home__link. */
	color: var(--adceuta-color-text) !important;
	transition: background-color var(--adceuta-transition);
}

.adceuta-upcoming-matches__tickets:hover {
	background-color: var(--adceuta-color-surface-alt);
}

/* El icono va en rojo de marca y el texto en negro, como el diseno: el trazo del
	SVG es currentColor, asi que el color se fija aqui y no lo hereda del ancla. */
.adceuta-upcoming-matches__tickets svg {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	color: var(--adceuta-color-accent);
}

/* El estado vacio hereda la superficie de las tarjetas y no queda como texto
	suelto sobre el fondo oscuro de la seccion, que el plugin no pinta y cuyo
	contraste por tanto no puede garantizar. */
.adceuta-upcoming-matches__empty {
	margin: 0;
	padding: var(--adceuta-space-xl);
	border-radius: var(--adceuta-radius);
	background-color: var(--adceuta-color-surface);
	box-shadow: var(--adceuta-shadow-card);
	font-size: var(--adceuta-font-size-sm);
	color: var(--adceuta-color-text-muted);
}

/* -------------------------------------------------------------------------
 * 7. Widget Clasificacion / Resultados (nodos 112:2295 y 112:2763)
 *
 * Cuidado con las clases compartidas: __row, __team, __crest, __name,
 * __matchday, __schedule, __date y __time aparecen tanto en la tabla de
 * clasificacion (<tr>, <td>, <span>) como en las tandas de resultados (<li>,
 * <span>). Toda regla que dependa del contexto se ancla en __table o en
 * __group, nunca en la clase suelta, o convertiria los <tr> de la tabla en
 * rejillas.
 * ---------------------------------------------------------------------- */

.adceuta-league-tabs {
	display: block;
	max-width: 100%;
}

/* 7.1 Cabeceras
 *
 * La misma clase __header sirve a los dos niveles (spec 4.8, regla 4): el del
 * bloque raiz contiene solo __tablist, y el de cada panel su titulo, su
 * subtitulo y, en clasificacion, su leyenda. El titulo ocupa toda la linea para
 * que subtitulo y leyenda compartan la siguiente, como en el nodo. */

.adceuta-league-tabs__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--adceuta-space-xs) var(--adceuta-space-md);
	margin-bottom: var(--adceuta-space-xl);
}

.adceuta-league-tabs__title {
	flex: 1 0 100%;
	margin: 0;
	font-family: var(--adceuta-font-display);
	font-size: var(--adceuta-font-size-3xl);
	font-weight: 700;
	line-height: 1.2;
	color: var(--adceuta-color-text);
}

.adceuta-league-tabs__subtitle {
	margin: 0 auto 0 0;
	font-family: var(--adceuta-font-display);
	font-size: var(--adceuta-font-size-sm);
	color: var(--adceuta-color-text-subtle);
}

/* 7.2 Pestanas */

.adceuta-league-tabs__tablist {
	display: flex;
	flex-wrap: wrap;
	gap: var(--adceuta-space-md);
}

.adceuta-league-tabs__tab {
	margin: 0;
	padding: 0.5625rem 1.1875rem;
	border: 0;
	border-radius: var(--adceuta-radius-pill);
	background-color: var(--adceuta-color-control);
	font-family: var(--adceuta-font-display);
	font-size: var(--adceuta-font-size-sm);
	font-weight: 500;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--adceuta-color-control-text);
	cursor: pointer;
	transition: background-color var(--adceuta-transition), color var(--adceuta-transition);
}

.adceuta-league-tabs__tab:hover {
	background-color: var(--adceuta-color-text-muted);
	color: var(--adceuta-color-text-invert);
}

/* La pestana activa invierte la pildora, un cambio de figura y no solo de
	matiz; el marcado ademas lleva aria-selected. */
.adceuta-league-tabs__tab.is-active {
	background-color: var(--adceuta-color-text);
	color: var(--adceuta-color-text-invert);
}

/* 7.3 Paneles */

.adceuta-league-tabs__panel {
	padding-top: var(--adceuta-space-xl);
}

.adceuta-league-tabs__panel.is-active {
	display: block;
}

/* 7.4 Leyenda de zonas
 *
 * Cada entrada recibe el color de su zona a traves de su clase de zona y nunca
 * por posicion (spec 3.4, regla 2). El punto de color usa el mismo token que la
 * barra izquierda de las filas de esa zona, asi que los dos colores no pueden
 * divergir. content:'' no emite texto: la etiqueta la escribe PHP. */

ul.adceuta-league-tabs__legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--adceuta-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.adceuta-league-tabs__legend-item {
	display: inline-flex;
	align-items: center;
	gap: var(--adceuta-space-xs);
	font-family: var(--adceuta-font-display);
	font-size: var(--adceuta-font-size-xs);
	white-space: nowrap;
	color: var(--adceuta-color-text-legend);
}

.adceuta-league-tabs__legend-item::before {
	content: '';
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background-color: currentColor;
}

.adceuta-league-tabs__legend-item.is-promotion::before {
	background-color: var(--adceuta-color-zone-promotion);
}

.adceuta-league-tabs__legend-item.is-playoff::before {
	background-color: var(--adceuta-color-zone-playoff);
}

.adceuta-league-tabs__legend-item.is-relegation::before {
	background-color: var(--adceuta-color-zone-relegation);
}

/* 7.5 Tabla de clasificacion, diez columnas
 *
 * Sin table-layout:fixed y sin ancho por posicion: cada celda con dato lleva su
 * clase de elemento y de ahi sale su ancho (spec 2, restriccion 5). Las nueve
 * columnas numericas colapsan a un ancho fijo y la de equipo se queda el resto.
 *
 * El selector lleva el nombre de etiqueta a proposito: los estilos de tabla de
 * los themes suelen ir por descendencia y ganarian a una clase suelta. Sube la
 * especificidad sin recurrir a !important. */

/**
 * Envoltorio desplazable.
 *
 * El scroll es permanente y no vive bajo ninguna media query, por el mismo
 * motivo que la tira de standings-home: el marcado emite siempre tabindex="0"
 * y role="region" con nombre porque PHP no sabe si habra desbordamiento, y
 * declarar el desplazamiento solo por debajo de un breakpoint dejaria en
 * escritorio una parada de tabulacion sobre una region que no se desplaza.
 *
 * La tabla conserva sus diez columnas en todas las resoluciones: por debajo del
 * min-width no se retira dato, se desplaza el contenedor.
 */
.adceuta-league-tabs__table-scroll {
	overflow-x: auto;
	/* La barra de desplazamiento aparece y desaparece segun el ancho; reservar el
		canal evita que la tabla salte al cambiar de breakpoint en navegadores con
		barras de desplazamiento clasicas. */
	scrollbar-gutter: stable;
	-webkit-overflow-scrolling: touch;
}

table.adceuta-league-tabs__table {
	width: 100%;
	/**
	 * Suelo de legibilidad de las diez columnas.
	 *
	 * Sin el, `width:100%` dentro de un contenedor desplazable nunca desborda:
	 * la tabla se comprimiria hasta el ancho del panel y las columnas numericas
	 * quedarian pegadas, que es justo lo que el scroll viene a evitar. El valor
	 * es la suma aproximada de los anchos declarados mas abajo cuando cada
	 * columna numerica se queda en su contenido (~2.75rem), mas la de posicion y
	 * un minimo comodo para nombre y escudo del equipo.
	 */
	min-width: 44rem;
	margin: 0;
	border: var(--adceuta-border-width) solid var(--adceuta-color-border);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--adceuta-radius-sm);
	overflow: hidden;
	background-color: var(--adceuta-color-surface);
	font-family: var(--adceuta-font-display);
}

.adceuta-league-tabs__table th,
.adceuta-league-tabs__table td {
	padding: 0 var(--adceuta-space-md);
	border: 0;
	vertical-align: middle;
	text-align: center;
}

.adceuta-league-tabs__table thead th {
	height: 2.75rem;
	background-color: var(--adceuta-color-surface-head);
	font-size: var(--adceuta-font-size-xs);
	font-weight: 500;
	white-space: nowrap;
	color: var(--adceuta-color-text-head);
}

/* El title del abbr es la version larga de la cabecera; el subrayado punteado
	por defecto de algunos navegadores ensucia una fila de cabeceras cortas. */
.adceuta-league-tabs__table thead abbr {
	border-bottom: 0;
	text-decoration: none;
	cursor: help;
}

.adceuta-league-tabs__table tbody td,
.adceuta-league-tabs__table tbody th {
	height: 3.25rem;
	border-top: var(--adceuta-border-width) solid var(--adceuta-color-border);
}

/**
 * Alternado de fondo de las filas.
 *
 * El selector es posicional pero recae sobre el <tr>, nunca sobre un <th> ni un
 * <td>: no alcanza ninguna celda con dato y por tanto no toca la restriccion 5
 * del §2 ni AC-29, que prohiben exactamente eso. Aqui la posicion **es** el
 * dato —la paridad de la fila— y no un sustituto de la clase de una celda, que
 * es lo que la restriccion evita. Se descarto pintar la franja con un degradado
 * repetido en el <tbody>, que habria evitado el pseudo-selector, porque exige
 * que toda fila mida exactamente lo mismo y un nombre de equipo que envuelva
 * desalinea la franja del resto de la tabla.
 */
.adceuta-league-tabs__table .adceuta-league-tabs__row:nth-child( even ) {
	background-color: var(--adceuta-color-surface-alt);
}

/* La posicion es la cabecera de fila y ademas el soporte de la barra de zona:
	no existe elemento para la barra, la pinta el borde izquierdo de la fila a
	traves de su primera celda (spec 3.4, regla 2). */
.adceuta-league-tabs__position {
	width: 3.625rem;
	font-size: var(--adceuta-font-size);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--adceuta-color-text);
}

/* Alcanza tambien al <th scope="col"> de la columna, y debe hacerlo: el nodo
	112:2295 alinea «EQUIPO» a la izquierda, sobre los nombres de equipo. */
.adceuta-league-tabs__table .adceuta-league-tabs__team {
	text-align: left;
}

/**
 * Maquetacion del par escudo + nombre.
 *
 * La mitad de tabla se ancla en tbody a proposito. Desde que la cabecera lleva
 * tambien su clase de elemento (spec 3.4, regla 4), un selector sin anclar
 * convertiria el <th scope="col"> en contenedor flex y le quitaria su caja
 * table-cell, y una cabecera no tiene escudo ni nombre que repartir: la regla
 * existe para las celdas que si los contienen.
 */
.adceuta-league-tabs__table tbody .adceuta-league-tabs__team,
.adceuta-league-tabs__group .adceuta-league-tabs__team {
	display: flex;
	align-items: center;
	gap: var(--adceuta-space-lg);
	min-width: 0;
}

.adceuta-league-tabs__table .adceuta-league-tabs__crest {
	flex: 0 0 auto;
	width: var(--adceuta-crest-width);
	/* Ver el comentario de .adceuta-next-match__crest. */
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

/**
 * El nombre no envuelve dentro de la tabla.
 *
 * Aqui vivia `overflow-wrap: anywhere`, heredado de cuando la tabla tenia que
 * caber si o si en el ancho del panel. Con el envoltorio desplazable es lo
 * contrario de lo que se quiere: las ocho columnas numericas piden 6.25rem cada
 * una, el navegador comprime la de equipo hasta su min-content y, con `anywhere`,
 * ese min-content es **una letra** — el nombre se pinta en vertical.
 *
 * Con `nowrap` el min-content de la columna pasa a ser el nombre completo, que es
 * el suelo que la tabla no puede bajar: el ancho sobrante se lo lleva el scroll
 * del envoltorio, no el nombre. Por eso tambien se retira `min-width: 0`, que
 * existia justamente para permitir esa compresion.
 */
.adceuta-league-tabs__table .adceuta-league-tabs__name {
	font-size: var(--adceuta-font-size);
	white-space: nowrap;
}

/* Las nueve columnas numericas comparten ancho y tratamiento; PTS destaca en
	negrita y color de texto principal, como en el nodo. */
.adceuta-league-tabs__points,
.adceuta-league-tabs__played,
.adceuta-league-tabs__won,
.adceuta-league-tabs__drawn,
.adceuta-league-tabs__lost,
.adceuta-league-tabs__goals-for,
.adceuta-league-tabs__goals-against,
.adceuta-league-tabs__goal-diff {
	width: 6.25rem;
	font-size: var(--adceuta-font-size-md);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--adceuta-color-text-muted);
}

.adceuta-league-tabs__points {
	font-size: var(--adceuta-font-size);
	font-weight: 700;
	color: var(--adceuta-color-text);
}

/* 7.6 Zonas de clasificacion
 *
 * La barra es el borde izquierdo de la fila, pintado con un box-shadow interior
 * de la celda de posicion para que sobreviva a border-collapse:separate. */

.adceuta-league-tabs__row.is-promotion .adceuta-league-tabs__position {
	box-shadow: inset var(--adceuta-zone-bar) 0 0 0 var(--adceuta-color-zone-promotion);
}

.adceuta-league-tabs__row.is-playoff .adceuta-league-tabs__position {
	box-shadow: inset var(--adceuta-zone-bar) 0 0 0 var(--adceuta-color-zone-playoff);
}

.adceuta-league-tabs__row.is-relegation .adceuta-league-tabs__position {
	box-shadow: inset var(--adceuta-zone-bar) 0 0 0 var(--adceuta-color-zone-relegation);
}

/**
 * Fila del club.
 *
 * Gana en color de fondo y de texto, y la barra de zona se conserva porque la
 * pinta la celda de posicion y no la fila (spec 4.6, regla 4). El fondo se
 * declara sobre las celdas para ganar a la franja del <tbody>.
 */
.adceuta-league-tabs__table .adceuta-league-tabs__row.is-club th,
.adceuta-league-tabs__table .adceuta-league-tabs__row.is-club td {
	background-color: var(--adceuta-color-accent-soft);
}

.adceuta-league-tabs__table .adceuta-league-tabs__row.is-club .adceuta-league-tabs__position,
.adceuta-league-tabs__table .adceuta-league-tabs__row.is-club .adceuta-league-tabs__name,
.adceuta-league-tabs__table .adceuta-league-tabs__row.is-club .adceuta-league-tabs__points {
	font-weight: 700;
	color: var(--adceuta-color-accent-text);
}

/* 7.7 Tandas de resultados
 *
 * Cada resultado es una fila que se dibuja como tarjeta, sin __card interno
 * (spec 3.4, regla 7). Los dos equipos se colocan por fila definida y columna
 * automatica, igual que en las tarjetas de partido: la columna central la ocupa
 * la pila de jornada, pildora y marcador. */

ul.adceuta-league-tabs__group {
	display: flex;
	flex-direction: column;
	gap: var(--adceuta-space-2xl);
	margin: 0 0 var(--adceuta-space-2xl);
	padding: 0;
	list-style: none;
}

.adceuta-league-tabs__group .adceuta-league-tabs__row {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto minmax( 0, 1fr );
	align-items: center;
	column-gap: var(--adceuta-space-3xl);
	row-gap: var(--adceuta-space-xs);
	padding: 1.75rem var(--adceuta-space-2xl);
	border-radius: var(--adceuta-radius);
	background-color: var(--adceuta-color-surface);
	box-shadow: var(--adceuta-shadow-row);
	list-style: none;
}

.adceuta-league-tabs__group .adceuta-league-tabs__team {
	grid-row: 1 / span 3;

	/* El local se dibuja con el nombre a la izquierda y el escudo junto al
		centro de la fila. row-reverse invierte el orden de marcado y empaqueta
		el par contra el borde derecho de su columna. */
	flex-direction: row-reverse;
	justify-content: flex-start;
}

/*
 * El visitante recupera el orden natural, escudo primero, para que los dos
 * escudos queden junto al centro de la fila como en el nodo. Es colocacion en
 * la rejilla y no acceso a un dato por posicion: el elemento alcanzado es un
 * <span> de equipo, nunca un <th> ni un <td>, asi que no toca la restriccion 5
 * del §2 ni AC-29.
 */
.adceuta-league-tabs__group .adceuta-league-tabs__team:last-of-type {
	flex-direction: row;
}

.adceuta-league-tabs__group .adceuta-league-tabs__crest {
	flex: 0 0 auto;
	width: var(--adceuta-crest-width-md);
	/* Ver el comentario de .adceuta-next-match__crest. */
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.adceuta-league-tabs__group .adceuta-league-tabs__name {
	min-width: 0;
	font-family: var(--adceuta-font-display);
	font-size: var(--adceuta-font-size-lg);
	font-weight: 500;
	overflow-wrap: anywhere;
}

.adceuta-league-tabs__group .adceuta-league-tabs__matchday {
	grid-row: 1;
	grid-column: 2;
	font-size: var(--adceuta-font-size-2xs);
	font-weight: 800;
	letter-spacing: var(--adceuta-tracking-wide);
	text-align: center;
	text-transform: uppercase;
}

.adceuta-league-tabs__group .adceuta-league-tabs__schedule {
	display: inline-flex;
	grid-row: 2;
	grid-column: 2;
	align-items: baseline;
	justify-content: center;
	gap: var(--adceuta-space-xs);
	padding: 0.3125rem 1.25rem;
	border: var(--adceuta-border-hairline) solid var(--adceuta-color-border-strong);
	border-radius: var(--adceuta-radius);
	white-space: nowrap;
}

.adceuta-league-tabs__date,
.adceuta-league-tabs__time {
	font-size: var(--adceuta-font-size-2xs);
	letter-spacing: var(--adceuta-tracking-wide);
	text-transform: uppercase;
}

.adceuta-league-tabs__date time {
	color: inherit;
}

.adceuta-league-tabs__time {
	font-variant-numeric: tabular-nums;
}

.adceuta-league-tabs__time::before {
	content: '\00B7\00A0';
}

.adceuta-league-tabs__score {
	grid-row: 3;
	grid-column: 2;
	padding-top: var(--adceuta-space-md);
	font-family: var(--adceuta-font-display);
	font-size: var(--adceuta-font-size-2xl);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--adceuta-tracking-tight);
	white-space: nowrap;
	text-align: center;
}

/**
 * Partido ya jugado.
 *
 * El nodo 112:2763 dibuja igual la tarjeta jugada y la pendiente, asi que la
 * superficie no cambia. Lo unico que se ajusta es la jerarquia de la pildora:
 * en una fila jugada el titular es el marcador, asi que la fecha baja al color
 * de texto secundario, que sobre blanco sigue en 7.9:1.
 */
.adceuta-league-tabs__group .adceuta-league-tabs__row.is-played .adceuta-league-tabs__schedule {
	border-color: var(--adceuta-color-border);
	color: var(--adceuta-color-text-muted);
}

.adceuta-league-tabs__tickets {
	display: inline-flex;
	grid-row: 4;
	grid-column: 1 / -1;
	align-items: center;
	justify-content: center;
	justify-self: center;
	gap: var(--adceuta-space-sm);
	margin-top: 1.4375rem;
	padding: 0.8125rem 1.875rem;
	border: var(--adceuta-border-hairline) dashed var(--adceuta-color-text);
	border-radius: var(--adceuta-radius-pill);
	font-family: var(--adceuta-font-display);
	font-size: var(--adceuta-font-size-sm);
	font-weight: 500;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	/* !important por el kit de Elementor: ver la nota de .adceuta-standings-home__link. */
	color: var(--adceuta-color-text) !important;
	transition: background-color var(--adceuta-transition);
}

.adceuta-league-tabs__tickets:hover {
	background-color: var(--adceuta-color-surface-alt);
}

.adceuta-league-tabs__tickets svg {
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
}

/* 7.8 Botones de navegacion por tandas
 *
 * Contrato 4.11: dos botones, tandas de page_size y visibilidad por clase. No
 * comparten ningun selector con __tickets (spec 3.4, regla 1): __button navega
 * entre tandas y nunca vende entradas. El mockup dibuja un unico boton «Ver mas
 * resultados» que la spec descarta, pero su forma de pildora es la que se
 * reutiliza aqui. */

.adceuta-league-tabs__button {
	display: block;
	width: fit-content;
	margin: 0 auto var(--adceuta-space-2xl);
	padding: 0.5625rem 1.1875rem;
	border: 0;
	border-radius: var(--adceuta-radius-pill);
	background-color: var(--adceuta-color-text);
	font-family: var(--adceuta-font-display);
	font-size: var(--adceuta-font-size-sm);
	font-weight: 500;
	white-space: nowrap;
	color: var(--adceuta-color-text-invert);
	cursor: pointer;
	transition: background-color var(--adceuta-transition);
}

/* El reset de hello-elementor pinta `button:focus` con el color de acento del
	tema, y esa regla gana al selector base de la pildora porque lleva pseudoclase
	(0,1,1 frente a 0,1,0): sin este bloque el boton se quedaba con el color ajeno
	tras cada clic, hasta que el foco se movia a otro sitio. Se repiten los valores
	de reposo para neutralizarla. El bloque va antes que :hover a proposito: ambos
	empatan en especificidad, asi que el orden es lo unico que deja al hover seguir
	ganando cuando el boton esta enfocado y con el puntero encima. */
.adceuta-league-tabs__button:focus {
	background-color: var(--adceuta-color-text);
	color: var(--adceuta-color-text-invert);
}

/* Mismo gris que el hover de __tab y del enlace de cabecera, por el motivo
	explicado alli. */
.adceuta-league-tabs__button:hover {
	background-color: var(--adceuta-color-text-muted);
}

.adceuta-league-tabs__empty {
	margin: 0;
	font-size: var(--adceuta-font-size-sm);
	color: var(--adceuta-color-text-muted);
}

/* -------------------------------------------------------------------------
 * 8. Foco visible
 *
 * El anillo es un cambio de geometria, no solo de color: aparece un contorno
 * donde antes no habia ninguno, asi que el estado se percibe sin distinguir
 * colores. No se elimina el outline en ningun sitio sin sustituirlo. Los
 * selectores :focus cubren navegadores sin :focus-visible, y la ultima regla lo
 * retira solo cuando el navegador si lo soporta y el foco no viene de teclado.
 *
 * __list de standings-home entra aqui porque el marcado le da tabindex="0": una
 * region desplazable alcanzable con Tab necesita foco visible (WCAG 2.4.7).
 * ---------------------------------------------------------------------- */

.adceuta-standings-home__list:focus,
.adceuta-league-tabs__table-scroll:focus,
.adceuta-league-tabs__tab:focus,
.adceuta-league-tabs__button:focus,
.adceuta-standings-home__list:focus-visible,
.adceuta-league-tabs__table-scroll:focus-visible,
.adceuta-league-tabs__tab:focus-visible,
.adceuta-league-tabs__button:focus-visible,
.adceuta-league-tabs__panel:focus-visible {
	outline: var(--adceuta-focus-width) solid var(--adceuta-color-focus);
	outline-offset: var(--adceuta-focus-offset);
}

.adceuta-standings-home__list:focus:not(:focus-visible),
.adceuta-league-tabs__table-scroll:focus:not(:focus-visible),
.adceuta-league-tabs__tab:focus:not(:focus-visible),
.adceuta-league-tabs__button:focus:not(:focus-visible) {
	outline: 0;
}

/* -------------------------------------------------------------------------
 * 9. Movimiento reducido
 *
 * Unica media query de la hoja que no consulta ancho: es preferencia de usuario
 * y no un breakpoint. Las unicas transiciones del plugin son las de pestanas,
 * botones y enlaces. Se anulan en lugar de acortarse: no aportan informacion.
 * ---------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {

	/* Anclas de entradas y de cabecera. Van en una regla propia: ni aqui ni en
		ningun otro sitio de la hoja un bloque de reglas alcanza a la vez
		__tickets y __button (spec 3.4, regla 1). */
	.adceuta-next-match__tickets,
	.adceuta-upcoming-matches__tickets,
	.adceuta-league-tabs__tickets,
	.adceuta-standings-home__link,
	.adceuta-upcoming-matches__link {
		transition: none;
	}

	.adceuta-league-tabs__tab,
	.adceuta-league-tabs__button {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * 10. Degradacion a 1024 px (spec 4.9)
 *
 * Primer breakpoint de la hoja. Solo resta: no introduce ninguna propiedad que
 * la base no tenga ya definida, de modo que revertir el bloque devuelve el
 * diseno de escritorio intacto.
 *
 * next-match no aparece: su tarjeta es fluida y no cambia de estructura en
 * ningun breakpoint. standings-home tampoco: su scroll horizontal esta en la
 * regla base y es permanente (spec 4.9, regla 3), asi que no hay nada que
 * activar aqui. Lo mismo vale desde ahora para la tabla de clasificacion, cuyo
 * envoltorio desplazable tambien vive en la regla base.
 * ---------------------------------------------------------------------- */

@media ( max-width: 1024px ) {

	/* Cuatro columnas de tarjeta de partido no caben por debajo de 1024 px sin
		recortar los escudos: la rejilla pasa a dos y la tarjeta se ensancha. El
		selector repite el nombre de etiqueta del de la base porque la media query
		no aporta especificidad y sin el no ganaria. */
	ul.adceuta-upcoming-matches__list {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	/**
	 * Clasificacion: sin cambios.
	 *
	 * Aqui se retiraban goles a favor y goles en contra. Ya no: la tabla conserva
	 * sus diez columnas en todas las resoluciones y el desbordamiento lo absorbe
	 * .adceuta-league-tabs__table-scroll, que declara el scroll horizontal en la
	 * regla base. Se prefiere desplazar a recortar dato porque ocultar la columna
	 * con display:none tambien la retiraba del arbol de accesibilidad.
	 */

	/**
	 * Fila de resultados.
	 *
	 * Sin cambio estructural (spec 4.9, tabla): sigue siendo escudo, centro y
	 * escudo en una sola linea. Lo unico que cede es la separacion entre
	 * columnas, que a 1440 px son 80 px pensados para una fila de 1240: mantenerla
	 * comprimiria los nombres de equipo hasta guionarlos.
	 */
	.adceuta-league-tabs__group .adceuta-league-tabs__row {
		column-gap: var(--adceuta-space-xl);
	}
}

/* -------------------------------------------------------------------------
 * 11. Degradacion a 640 px (spec 4.9)
 *
 * Segundo y ultimo breakpoint. El objetivo declarado del §4.9 es que a 360 px la
 * pagina no produzca scroll horizontal: los unicos desbordamientos admitidos son
 * los internos de __list en standings-home y de __table-scroll en la tabla de
 * clasificacion, ambos decisiones de diseno y ambos contenidos por su propio
 * overflow-x, de modo que el documento no desborda.
 *
 * Las cabeceras de standings-home y upcoming-matches pasan a envolver aqui. No
 * es una licencia de diseno: las dos son filas flex sin wrap con un logotipo de
 * 162 px o un enlace de pildora con white-space:nowrap, y a 360 px la linea
 * excede el contenedor y arrastra al documento entero. Es lo que exige la regla
 * 4 del §4.9.
 * ---------------------------------------------------------------------- */

@media ( max-width: 640px ) {

	/* 11.1 Clasificacion de portada
	 *
	 * Unico cambio del contrato: escudo reducido. La tira sigue siendo una fila y
	 * no envuelve a varias lineas (spec 4.9, regla 4); el escudo mas pequeno deja
	 * mas equipos a la vista dentro del scroll, que no se declara aqui porque ya
	 * vive en la regla base. */

	.adceuta-standings-home {
		padding: var(--adceuta-space-lg);
	}

	/* Ver la nota del encabezado del bloque: sin wrap, titulo, logotipo y enlace
		desbordan el documento a 360 px. */
	.adceuta-standings-home__header {
		flex-wrap: wrap;
		margin-bottom: var(--adceuta-space-lg);
	}

	.adceuta-standings-home__crest {
		width: var(--adceuta-crest-width);
		/* height:auto, no el token: ver el comentario de .adceuta-next-match__crest. */
		height: auto;
	}

	/* 11.2 Siguientes partidos */

	.adceuta-upcoming-matches__header {
		flex-wrap: wrap;
	}

	/* Una columna. El hueco de 58 px del diseno era separacion entre columnas
		vecinas; apiladas, sobra. */
	ul.adceuta-upcoming-matches__list {
		grid-template-columns: minmax( 0, 1fr );
		gap: var(--adceuta-space-2xl);
	}

	/**
	 * 11.3 Clasificacion: sin cambios.
	 *
	 * Aqui se retiraban ademas partidos jugados, victorias, empates y derrotas
	 * hasta dejar POS, EQUIPO, PTS y DG. Ya no se oculta ninguna columna en ningun
	 * breakpoint: la tabla entra completa y el envoltorio se desplaza. Es la unica
	 * excepcion admitida a la regla de «sin scroll horizontal a 360 px» del §4.9
	 * junto con la tira de standings-home, y como ella esta contenida por el
	 * overflow-x de su propio contenedor: el documento no desborda.
	 */

	/**
	 * 11.4 Resultados: la fila apila.
	 *
	 * Orden visual nuevo (spec 4.9, tabla): jornada y pildora de fecha y hora
	 * arriba, y debajo los dos equipos con el marcador entre ellos. El DOM no
	 * cambia — sigue siendo jornada, local, marcador, pildora, visitante,
	 * entradas —: la reordenacion la hace la rejilla, que es lo que exige la
	 * regla 5 de la tarea.
	 *
	 * Los dos equipos reciben columna explicita en lugar de dejarlos a colocacion
	 * automatica. En la base el visitante cae en la tercera columna porque el
	 * local abarca tres filas y la central esta ocupada; al apilar, esa garantia
	 * desaparece y una fila sin marcador dejaria la columna central libre, con los
	 * dos equipos juntos a la izquierda. :last-of-type alcanza un <span> de
	 * equipo, nunca un <th> ni un <td>, asi que no toca la restriccion 5 del §2 ni
	 * AC-29; es el mismo criterio que ya usa la regla de flex-direction de la
	 * base.
	 */
	.adceuta-league-tabs__group .adceuta-league-tabs__row {
		column-gap: var(--adceuta-space-md);
		row-gap: var(--adceuta-space-md);
		padding: var(--adceuta-space-lg) var(--adceuta-space-md);
	}

	.adceuta-league-tabs__group .adceuta-league-tabs__matchday {
		grid-column: 1 / -1;
	}

	/* La pildora es inline-flex, asi que como item de rejilla se blockifica y se
		estiraria de borde a borde: justify-self la devuelve a su ancho de
		contenido, centrada. */
	.adceuta-league-tabs__group .adceuta-league-tabs__schedule {
		grid-column: 1 / -1;
		justify-self: center;
	}

	.adceuta-league-tabs__group .adceuta-league-tabs__team {
		grid-row: 3;
		grid-column: 1;
		gap: var(--adceuta-space-sm);
	}

	.adceuta-league-tabs__group .adceuta-league-tabs__team:last-of-type {
		grid-column: 3;
	}

	.adceuta-league-tabs__group .adceuta-league-tabs__crest {
		width: var(--adceuta-crest-width);
		/* height:auto, no el token: ver el comentario de .adceuta-next-match__crest. */
		height: auto;
	}

	.adceuta-league-tabs__group .adceuta-league-tabs__name {
		font-size: var(--adceuta-font-size-sm);
	}

	/* En escritorio el marcador cuelga bajo la pildora y necesita ese aire
		superior; apilado comparte linea con los escudos y el hueco lo descentraria
		respecto a ellos. */
	.adceuta-league-tabs__score {
		padding-top: 0;
	}

	.adceuta-league-tabs__tickets {
		margin-top: var(--adceuta-space-lg);
	}
}