/*
 * Diálogo modal de cookies (accessible-cookie-consent 0.2.0) con los tokens
 * del sitio (T08 D-075 → T15).
 *
 * El plugin resuelve cada color con una variable --acc-* que encadena a los
 * presets --wp--preset--color--*; aquí el contrato se fija EXPLÍCITO contra
 * los slugs de la paleta v2 (DESIGN.md §2; si el plugin cambiara su cadena, el
 * diálogo sigue con los tokens del sitio). Pares que exige el README del
 * plugin, con las razones publicadas en custom.accessibleColorPairs
 * (DESIGN.md §2 y §12 m12):
 *   text / surface 17.19 · text-soft / surface 9.33 · inverse / brand 17.13 ·
 *   border-strong / surface 4.48 (borde de control, UI ≥3) · botones §7.2 ·
 *   anillo de foco de dos bandas §6/§8 con respaldo de colores forzados.
 * El fondo (::backdrop y, sin JS, .acc-consent-backdrop) es decorativo: nunca
 * queda bajo el texto del diálogo, no entra en su contraste.
 * Esta hoja se carga detrás de la del plugin (dependencia acc-frontend).
 */
.acc-cookie-banner,
.acc-consent-backdrop,
.acc-cookie-manage-button,
.acc-cookie-manage-inline,
.acc-embed-placeholder {
	--acc-surface: var(--wp--preset--color--surface);
	--acc-canvas: var(--wp--preset--color--canvas);
	--acc-text: var(--wp--preset--color--text);
	--acc-text-soft: var(--wp--preset--color--text-soft);
	--acc-border: var(--wp--preset--color--border-strong);
	--acc-primary: var(--wp--preset--color--brand);
	--acc-on-primary: var(--wp--preset--color--inverse);
}

/*
 * Velo: el «scrim» de DESIGN §3-A7 (token text al 70 %). El ::backdrop del
 * plugin lee var(--acc-backdrop, <su velo neutro>): donde ::backdrop hereda
 * del diálogo usa este valor (ya resuelto en el diálogo); en motores antiguos
 * que no lo heredan, o sin color-mix(), queda el velo neutro del plugin (mismo
 * tono, 60 %). Sin literales de color: AC-01.4.
 */
@supports (color: color-mix(in srgb, red 50%, blue)) {

	.acc-cookie-banner,
	.acc-consent-backdrop {
		--acc-backdrop: color-mix(in srgb, var(--wp--preset--color--text) 70%, transparent);
	}
}

/*
 * El diálogo: módulo de DESIGN §5 (panel mayor → radius.md 8px, borde que da
 * la elevación y la sombra ambiental level-3), relleno fluido 16/24 px,
 * separación md. El tope de altura
 * y el scroll interno (320 px / 400 %, SC 1.4.10) son del plugin y no se tocan.
 */
.acc-cookie-banner.acc-cookie-banner__dialog[open] {
	border: 2px solid var(--wp--preset--color--text);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--preset--shadow--level-3);
	padding: var(--wp--preset--spacing--gutter);
	gap: var(--wp--preset--spacing--md);
	font-family: inherit;
	line-height: var(--wp--custom--typography--line-height-body);
}

/*
 * El diálogo recibe el foco al abrirse (ninguna decisión preseleccionada).
 * Anillo de marca DENTRO del borde, sobre la superficie blanca: fuera caería
 * sobre el velo oscuro, donde la marca sola da 2.89:1 (DESIGN §8). Entre el
 * borde oscuro y el anillo queda una banda de superficie (dos bandas).
 */
.acc-cookie-banner.acc-cookie-banner__dialog:focus-visible {
	outline: var(--wp--custom--focus-width) solid var(--wp--preset--color--brand);
	outline-offset: calc(-2px - var(--wp--custom--focus-inner-band) - var(--wp--custom--focus-width));
}

/* Título del diálogo: escala «m» (DESIGN §4), no el h2 de sección (28→40px). */
.acc-cookie-banner .acc-cookie-banner__copy h2 {
	font-size: var(--wp--preset--font-size--m);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0;
}

/* Botones: radio de 2px (DESIGN §7.2 / §5: radius.xs para controles). */
.acc-cookie-banner .acc-cookie-banner__actions .button,
.acc-cookie-banner .acc-cookie-banner__preferences-actions .button,
.acc-cookie-manage-button,
.acc-cookie-manage-inline {
	border-radius: var(--wp--custom--radius--xs);
	font-weight: 700;
}

/* Estados de DESIGN §9, sólo color (sin desplazamiento: nada que animar). */
.acc-cookie-banner .acc-cookie-banner__actions .button:hover,
.acc-cookie-banner .acc-cookie-banner__preferences-actions .button:hover {
	background: var(--wp--preset--color--surface-subtle);
}

.acc-cookie-banner .acc-cookie-banner__actions .button.button-primary:hover,
.acc-cookie-banner .acc-cookie-banner__preferences-actions .button.button-primary:hover {
	background: var(--wp--preset--color--brand-hover);
	border-color: var(--wp--preset--color--brand-hover);
}

/*
 * Enlace a la política: el color de enlace del sitio (§7.9: brand, 17.13:1
 * sobre la superficie del diálogo, con subrayado permanente del plugin).
 * Va solo en su párrafo (no es un enlace dentro de una frase), así que no
 * cabe la excepción «en línea» de SC 2.5.8: 24px de alto como mínimo (medía
 * 21px con la línea de texto).
 */
.acc-cookie-banner .acc-cookie-banner__policy a {
	display: inline-flex;
	align-items: center;
	min-block-size: 1.5rem;
	color: var(--wp--preset--color--brand);
}

/*
 * Foco (DESIGN §8): anillo de dos bandas (2px superficie + 3px marca), el mismo
 * --sia-focus-ring del child. El botón «Preferencias de cookies» queda bajo el
 * pie (D-094), que puede ser oscuro: allí un contorno de marca solo da 2.89:1 y
 * la banda clara interior garantiza ≥3:1. El contorno transparente se pinta en
 * modo de colores forzados (el box-shadow no).
 */
.acc-cookie-banner .acc-cookie-banner__actions .button:focus-visible,
.acc-cookie-banner .acc-cookie-banner__preferences-actions .button:focus-visible,
.acc-cookie-banner .acc-cookie-banner__policy a:focus-visible,
.acc-cookie-banner .acc-cookie-banner__choice input:focus-visible,
.acc-cookie-manage-button:focus-visible,
.acc-cookie-manage-inline:focus-visible {
	outline: 3px solid transparent;
	outline-offset: 2px;
	box-shadow: var(--sia-focus-ring);
}

/* Casillas a 24px (DESIGN §8; SC 2.5.8) con el color de marca al marcarse. */
.acc-cookie-banner .acc-cookie-banner__choice input[type="checkbox"] {
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
	accent-color: var(--wp--preset--color--brand);
}

/*
 * El sitio solo tiene categorías «Necesarias» y «Analítica» (T08). El plugin
 * siempre pinta «Marketing» y no permite desactivarla (D-076): se oculta su
 * fila (también para lectores de pantalla). Sin :has() la fila se ve con el
 * texto «Este sitio no utiliza cookies de marketing.» (ajuste del banner).
 */
.acc-cookie-banner .acc-cookie-banner__choice:has(> input[data-acc-category-toggle="marketing"]) {
	display: none;
}

/*
 * Región del aviso de Escape (assets/js/consent.js): dentro del diálogo, sólo
 * para tecnologías de apoyo (misma técnica que .screen-reader-text).
 */
.acc-cookie-banner .sia-consent-hint {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * T11 (D-083/D-094, SC 2.4.11 / AC-11.6): el botón «Preferencias de cookies»
 * del plugin es position:fixed abajo a la izquierda y tapaba texto de tarjetas
 * al desplazar (medido a 1280). Un elemento fijo siempre acaba encima de algo
 * de lo que pasa por debajo, así que deja de ser fijo: queda en el flujo, al
 * final del documento (el plugin lo imprime en wp_footer, justo detrás del
 * pie), alineado con el borde de inicio del contenido del pie. El orden de
 * tabulación no cambia (ya era el último control). Sigue ≥44px de alto,
 * texto/superficie 17.85:1 y borde de texto; el anillo de foco es el de
 * arriba. No se toca `display`: sin JS el plugin lo oculta con display:none
 * (no funcionaría) y eso debe seguir mandando. Con el modal abierto el plugin
 * lo oculta; al reabrirlo, el diálogo se abre modal y el foco vuelve aquí.
 */
.acc-cookie-manage-button.acc-cookie-manage-button {
	position: static;
	margin-block: var(--wp--preset--spacing--md);
	margin-inline-start: max(var(--wp--custom--layout--margin), (100% - var(--wp--custom--layout--wide)) / 2);
}