/**
 * Envoltorio base del popup (T3): overlay + panel + botón cerrar, responsive.
 * Neutro a propósito; el envoltorio de marca "Burdeos & Pergamino" llega en T6.
 * El contenido del popup trae sus propios estilos inline.
 */
#tdt-popup-root {
	position: relative;
	z-index: 100000;
}

.tdt-popup-overlay {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba( 0, 0, 0, 0.5 );
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease;
	z-index: 100000;
}

.tdt-popup-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.tdt-popup-panel {
	position: relative;
	width: 100%;
	max-width: 520px;
	max-height: 90vh;
	overflow: auto;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.3 );
	transform: translateY( 8px );
	transition: transform 0.25s ease;
}

.tdt-popup-overlay.is-open .tdt-popup-panel {
	transform: none;
}

.tdt-popup-close {
	position: absolute;
	top: 8px;
	right: 10px;
	border: 0;
	background: transparent;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: #333;
	padding: 4px 8px;
	z-index: 2;
}

.tdt-popup-content {
	padding: 8px;
}

/**
 * Variante OSCURA (H-91). El HTML del popup declara `.tdtpop-tema-oscuro` en su tarjeta
 * y el JS marca el panel (no se usa `:has()`: si fallara, la X quedaría invisible).
 *
 * 🔴 Por qué existe: el saneador del motor borra el bloque `<style>` y descarta todo
 * `rgba()`, así que un popup solo puede traer estilos INLINE — y desde ahí es imposible
 * recolorear la X, que la pinta el motor. Sobre berenjena, la X #333 mide 1.09:1.
 */
.tdt-popup-panel--oscuro {
	background: #372549;
	border: 1px solid #6E4842;
}

.tdt-popup-panel--oscuro .tdt-popup-close {
	color: #F2EFE9; /* 12.01:1 sobre #372549. */
}

.tdt-popup-panel--oscuro .tdt-popup-close:hover,
.tdt-popup-panel--oscuro .tdt-popup-close:focus {
	color: #D58936; /* 4.90:1 sobre #372549. */
}

@media ( max-width: 480px ) {
	.tdt-popup-panel {
		max-width: 100%;
	}
}

/**
 * =========================================================================
 * TIPO BARRA (0.9.0) — franja fija arriba, sin velo ni panel.
 *
 * 🔴 TODO el CSS de la barra vive AQUÍ y no en el fragmento, y no es una
 * preferencia de estilo: el saneador borra la etiqueta `<style>` y deja su
 * CSS como TEXTO VISIBLE (H-91, re-medido 2026-08-17: la maqueta cruda sale
 * con 4.795 b de muro de código). Además, la copy corta de móvil necesita
 * una media query, que es imposible desde estilos inline.
 *
 * El fragmento aporta SOLO contenido: los dos `<span>` de copy y el `<a>`
 * del CTA. La franja, la X, los colores y el responsive los pone el motor.
 * Aquí sí se pueden usar `rgba()`, `:hover`, `transform` y `@media`: la
 * restricción del saneador es del fragmento, no de esta hoja.
 * ========================================================================= */
.tdtbar-root {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 99998; /* Bajo el CMP de Ezoic (máximo) y bajo el velo del popup (100000). */
	box-sizing: border-box;
	font-family: "IBM Plex Sans", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* Debajo de la barra de administración de WordPress, que es fija y va arriba del todo. */
.admin-bar .tdtbar-root {
	top: 32px;
}

@media screen and ( max-width: 782px ) {
	.admin-bar .tdtbar-root {
		top: 46px;
	}
}

.tdtbar-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	max-width: 1180px;
	margin: 0 auto;
	min-height: 44px;
	padding: 5px 52px 5px 20px; /* Hueco a la derecha para la X. */
	box-sizing: border-box;

	/**
	 * 🔴 TECHO DE ALTURA (0.9.1). Nada limitaba lo que podía crecer la barra: el JS mide su
	 * alto real y empuja el `body` esa misma cantidad, así que un fragmento con un `height`
	 * grande —o simplemente con mucho contenido, que la allowlist permite: listas, tablas—
	 * convertía la «franja fina» en media pantalla, y el empujón la seguía.
	 * Con el techo puesto, `getBoundingClientRect()` ya devuelve el alto recortado ⇒ el
	 * relleno del body queda acotado por la misma regla, sin tocar el JS.
	 */
	max-height: 25vh;
	overflow-y: auto;
}

.tdtbar-text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.35;
	font-weight: 400;
	text-wrap: pretty;
}

.tdtbar-short {
	display: none;
}

.tdtbar-cta {
	flex: none;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: 5px 16px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease;
}

.tdtbar-cta:hover,
.tdtbar-cta:focus {
	text-decoration: none;
}

.tdtbar-close {
	position: absolute;
	top: 50%;
	right: 2px;
	transform: translateY( -50% );
	width: 44px;  /* Diana de 44 px: mínimo táctil. */
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	border-radius: 50%;
	font-family: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

/* Variante D «tierra» — oro terroso, sin filete. La aprobada, y el default.
   AA: crema sobre oro terroso 4.9:1 · texto del botón (crema sobre berenjena) 12.1:1. */
.tdtbar-root--earth {
	background: #985b20;
	box-shadow: 0 1px 0 rgba( 31, 18, 34, 0.25 );
}

.tdtbar-root--earth .tdtbar-text {
	color: #F2EFE9;
}

.tdtbar-root--earth .tdtbar-cta {
	background: #372549;
	color: #F2EFE9;
	border: 1px solid rgba( 242, 239, 233, 0.35 );
}

.tdtbar-root--earth .tdtbar-cta:hover,
.tdtbar-root--earth .tdtbar-cta:focus {
	background: #5D4490;
	color: #F2EFE9;
}

.tdtbar-root--earth .tdtbar-close {
	color: rgba( 242, 239, 233, 0.7 );
}

.tdtbar-root--earth .tdtbar-close:hover,
.tdtbar-root--earth .tdtbar-close:focus {
	background: rgba( 242, 239, 233, 0.12 );
	color: #F2EFE9;
}

/* Variante C «berenjena» — berenjena con filete oro.
   AA: crema sobre berenjena 12.1:1 · botón oro con texto berenjena 4.9:1. */
.tdtbar-root--plum {
	background: #372549;
	border-top: 2px solid #D58936;
	box-shadow: 0 1px 0 rgba( 31, 18, 34, 0.25 );
}

.tdtbar-root--plum .tdtbar-text {
	color: #F2EFE9;
}

.tdtbar-root--plum .tdtbar-cta {
	background: #D58936;
	color: #372549;
}

.tdtbar-root--plum .tdtbar-cta:hover,
.tdtbar-root--plum .tdtbar-cta:focus {
	background: #985b20;
	color: #F2EFE9;
}

.tdtbar-root--plum .tdtbar-close {
	color: rgba( 242, 239, 233, 0.7 );
}

.tdtbar-root--plum .tdtbar-close:hover,
.tdtbar-root--plum .tdtbar-close:focus {
	background: rgba( 242, 239, 233, 0.12 );
	color: #F2EFE9;
}

/* Variante A «oro».  AA: berenjena sobre oro 4.9:1 · botón 12.5:1. */
.tdtbar-root--gold {
	background: #D58936;
	box-shadow: 0 1px 0 rgba( 55, 37, 73, 0.18 );
}

.tdtbar-root--gold .tdtbar-text {
	color: #372549;
}

.tdtbar-root--gold .tdtbar-cta {
	background: #372549;
	color: #F2EFE9;
}

.tdtbar-root--gold .tdtbar-cta:hover,
.tdtbar-root--gold .tdtbar-cta:focus {
	background: #5D4490;
	color: #F2EFE9;
}

.tdtbar-root--gold .tdtbar-close {
	color: #372549;
}

.tdtbar-root--gold .tdtbar-close:hover,
.tdtbar-root--gold .tdtbar-close:focus {
	background: rgba( 55, 37, 73, 0.12 );
}

/* Móvil: la copy larga se sustituye por la corta y el CTA se va a la derecha. */
@media ( max-width: 600px ) {
	.tdtbar-inner {
		justify-content: space-between;
		gap: 12px;
		padding: 8px 48px 8px 16px;
	}

	.tdtbar-text {
		min-width: 0; /* Sin esto un hijo flex no encoge y el `text-overflow` no llega a actuar. */
		font-size: 13.5px;
		line-height: 1.35;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tdtbar-long {
		display: none;
	}

	.tdtbar-short {
		display: inline;
	}
}