/* =================================================================
   newsletter-popup.css — Popup "Newsletter" del plugin Dreamgrow Scroll Triggered Box (Figma
   BdUd1g6K6cuVm4036Z5p6p, node-id=4508-21933). El plugin genera el wrapper `.dgd_stb_box`
   (posición/tamaño fijos vía estilo INLINE desde su config de admin, botón de cerrar vía
   `.dgd_stb_box_close`, sibling ANTES de `.newsletter-popup-contenedor` — no dentro del header,
   por eso se reposiciona con position:absolute más abajo). Solo el contenido interno
   (`.newsletter-popup-contenedor` y descendientes) es HTML editable desde el admin del plugin.

   ESE HTML tiene una copia versionada en docs-prd/snippets/newsletter-popup-contenido-plugin.html
   — si se cambia acá algo que dependa del markup (o al revés), actualizar los dos.

   Acompaña a este archivo assets/js/newsletter-popup.js (evita que el form de Brevo mande la
   página al inicio al suscribirse). Los 3 se encolan/pegan juntos.

   Encolado SIEMPRE (inc/enqueue.php), no por vista: el popup puede dispararse en cualquier
   página del sitio.

   El plugin fuerza `height:500px` + la Config. > CSS adicional del sitio fuerza
   `.dgd_stb_box{overflow:hidden}` — el contenido real (header ~64px + card con padding 40/24 +
   iframe fijo de 405px) mide más que eso, así que ambos se pisan con !important para que el
   popup crezca con su contenido en vez de recortarlo (bug real: sin esto, la mitad de abajo del
   iframe quedaba invisible).

   OJO con .dgd_stb_box_close: el propio plugin (css/style.css + themes/none/style.css, ambos
   SIN @layer, confirmado 2026-07-19 contra newdia.nett.mx) ya le pone position/top/right/width/
   height/font-size/color/el glifo "X" (.dgd_stb_box_x::before con content), y sin @layer le gana
   a CUALQUIER regla nuestra en @layer sin importar especificidad (mismo gotcha de gotchas.md
   §12) — estas reglas necesitan !important donde pisan una propiedad que el plugin también
   define. NO se toca ::before/::after acá: la "X" real ya existe, dibujar una propia encima
   solo la duplicaba (bug real reportado con screenshot, 2026-07-19).
   ================================================================= */

@layer components {

	.dgd_stb_box {
		height: auto !important;
		overflow: visible !important;
		/* El campo de ancho del admin del plugin solo ofrece valores discretos (no permite pedir
		   exactamente 380px de scrollbox) — se fuerza acá. Calibrado sobre medición real: con el
		   campo del plugin en 400px el scrollbox medía 398px (no 400px por el modelo de cajas del
		   propio plugin/tema "none", no vale la pena perseguir la causa exacta del -2px); el delta
		   real de 18px (398→380 deseados) se resta directo del valor configurado (400-18=382),
		   así el -2px "de fábrica" se mantiene proporcional en vez de reintroducir el mismo error. */
		width: 382px !important;
		/* themes/none/style.css (el theme configurado en el admin del plugin, SIN @layer) trae
		   `.dgd_stb_box.none{border:none;box-shadow:none;background:rgba(255,255,255,0)}` A
		   PROPÓSITO (para que el autor lo pise) — sin @layer le gana a estas 3 igual, necesitan
		   !important (confirmado 2026-07-19 inspeccionando el computed style en vivo: sin esto,
		   la caja se veía sin borde/sombra y transparente). border-radius NO lo toca ese theme,
		   por eso ese no necesitaba !important. */
		background: #f9fafb !important;
		border: 1px solid #cdd6e1 !important;
		border-radius: 12px;
		box-shadow: 0 8px 8px rgba(45, 84, 128, .12) !important;
	}

	.newsletter-popup-contenedor {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	/* ---- Header: ícono + título a la izquierda, cerrar a la derecha. El botón de cerrar real
	   (.dgd_stb_box_close) NO vive dentro de este contenedor (lo inyecta el plugin como sibling,
	   ver docblock arriba) — el padding-right de 64px acá es a propósito el mismo ancho que esa
	   celda de cerrar de abajo, para que el título nunca quede debajo del botón. ---- */
	.newsletter-popup-header {
		display: flex;
		align-items: center;
		gap: 16px;
		padding: 16px 64px 16px 24px;
		border-bottom: 1px solid #cdd6e1;
	}
	.newsletter-popup-icon { display: inline-flex; flex-shrink: 0; }
	.newsletter-encabezado {
		margin: 0;
		font-family: var(--font-sans);
		font-stretch: 87.5%; /* eje wdth, "SemiCondensed" del Inspect de Figma */
		font-weight: 700;
		font-size: 24px;
		line-height: 32px;
		letter-spacing: -.5px;
		color: var(--dia-color-text-primary, #121212);
	}

	/* ---- Botón de cerrar del plugin, reposicionado encima de la fila del header (mismo alto,
	   64px = 24+24 padding + 16 ícono, spec literal del Inspect). Se deja la "X" nativa del
	   plugin (::before, ver docblock arriba) tal cual — display:flex + align/justify:center en
	   el ancla la centran sola, sin tocar el pseudo-elemento. ---- */
	.dgd_stb_box_close {
		display: flex !important;
		align-items: center;
		justify-content: center;
		position: absolute !important;
		top: 0 !important;
		right: 0 !important;
		width: 64px !important;
		height: 64px !important;
		border-left: 1px solid #cdd6e1;
	}

	/* ---- Card del form: 2026-07-27, se reemplazó el <iframe> de sibforms.com (no estilizable por
	   CORS, ver versión anterior de este comentario en git history) por el embed HTML nativo que
	   Brevo también ofrece — mismo origen, sí se puede estilizar. El grueso del look (tarjeta
	   blanca, borde, radius, padding, gap) ya se edita DIRECTO en los estilos inline del propio
	   snippet de Brevo (pegado en el admin del plugin) para que coincida con el Figma — acá solo lo
	   que un estilo inline no puede resolver: el hover del botón "Suscribirse" (mismo criterio que
	   .lang-dropdown__toggle:hover en base.css, mismo gris #f3f4f6). !important porque el <style>
	   que trae Brevo NO usa @layer y le gana a esta regla en @layer sin él (mismo gotcha §12.1/
	   §12.87 de gotchas.md). */
	.newsletter-popup-card {
		margin: 0 24px 24px;
	}

	/* sib-styles.css (el CSS propio de Brevo, SIN @layer — mismo gotcha §12.1/§12.87) trae padding
	   propio en estos 2 wrappers, que se SUMABA al padding:40px 24px de #sib-container (el único que
	   el Figma pide) y estiraba el popup muy por debajo de su alto real — bug reportado con captura
	   2026-07-27. Se neutralizan: el único padding de la tarjeta es el de #sib-container. */
	.newsletter-popup-card .sib-form,
	.newsletter-popup-card .sib-form-container {
		padding: 0 !important;
	}

	/* Mismo motivo: el espaciado vertical entre bloques lo da UNA sola fuente, el gap:22px del
	   <form> (spec del Figma). Cualquier margin propio de sib-styles.css en estos wrappers se SUMA
	   a ese gap y descuadra el ritmo — se anulan (mismo criterio que §12.67: no dejar dos fuentes
	   de espaciado compitiendo). */
	.newsletter-popup-card .sib-form-block,
	.newsletter-popup-card .form__entry,
	.newsletter-popup-card .entry_block {
		margin: 0 !important;
	}

	/* .sib-form-block trae además 16px de padding horizontal propio (sib-styles.css) que se SUMABA
	   a los 24px de #sib-container, dejando 40px de aire real contra el Figma (24px). Mismo criterio
	   que el bloque de arriba: una sola fuente de espaciado horizontal, la de #sib-container. */
	.newsletter-popup-card .sib-form-block {
		padding: 0 !important;
	}

	/* El widget de Cloudflare Turnstile ("normal" size) renderiza un iframe de ancho fijo 300px, sin
	   modo nativo para respetar un contenedor angosto — no es CSS nuestro que se pueda anular, es el
	   propio iframe. El ancho disponible real acá es 282px (330px de tarjeta - 48px de padding de
	   #sib-container), así que se lo escala visualmente con transform (técnica estándar para
	   reCAPTCHA/Turnstile responsive: el click sigue funcionando porque el navegador mapea las
	   coordenadas a través del transform). width/height explícitos en el propio tamaño ya escalado
	   para que el layout reserve el espacio correcto y no deje hueco de más. */
	.newsletter-popup-card #sib-captcha {
		transform: scale(calc(282 / 300));
		transform-origin: 0 0;
		width: 282px;
		height: 61px;
	}

	/* Ícono del mensaje de ÉXITO: el del Figma (node 4508-21960, SVG exportado por el diseñador) es
	   un aro — círculo de borde 2px #2E7D32 con el centro TRANSPARENTE (deja ver el verde claro del
	   panel) y el check también a puro trazo. Se veía como un círculo verde SÓLIDO porque
	   sib-styles.css trae `.sib-form-message-panel__text .sib-icon { fill: currentColor }`, y una
	   regla CSS le gana SIEMPRE a un atributo de presentación del SVG (el `fill="none"` del markup)
	   — no es cuestión de especificidad, los atributos de presentación cuentan como el origen de
	   MENOR prioridad de la cascada. Con `color:#1d5020` en el panel, ese currentColor rellenaba
	   tanto el <rect> del círculo como el <path> del check (bug reportado con captura 2026-07-27).

	   Acotado a #success-message A PROPÓSITO: el ícono de #error-message SÍ es un glifo sólido de
	   Brevo (un path relleno) y necesita conservar su fill — una regla sobre `.sib-icon` a secas lo
	   dejaría invisible. */
	.newsletter-popup-card #success-message .sib-icon rect,
	.newsletter-popup-card #success-message .sib-icon path {
		fill: none !important;
	}

	/* Botón "Subscribe": el <svg> del loader que Brevo mete DENTRO del <button> viene sin width/
	   height propios (solo viewBox 512x512) — sin una regla que lo limite se expandía a su tamaño
	   intrínseco y empujaba el texto hacia abajo, dejando un botón alto y casi cuadrado en vez de la
	   píldora compacta del Figma (bug reportado con captura 2026-07-27). El loader es puramente
	   cosmético (el submit funciona igual sin él), así que se oculta en vez de dimensionarlo.
	   height:auto/min-height:0 por si sib-styles.css además fija un alto propio. */
	.newsletter-popup-submit {
		height: auto !important;
		min-height: 0 !important;
		line-height: 20px !important;
	}
	.newsletter-popup-submit svg {
		display: none !important;
	}

	/* Hover: mismo criterio/gris que .lang-dropdown__toggle:hover (base.css). */
	.newsletter-popup-submit:hover {
		background: #f3f4f6 !important;
	}

	/* El plugin fija width:450px inline — en mobile real (viewport < 450px) desborda el viewport,
	   se corrige a un ancho relativo con margen de aire a los bordes (mismo criterio que el resto
	   del tema, breakpoint 48rem). */
	@media (width < 48rem) {
		.dgd_stb_box { width: calc(100vw - 32px) !important; right: 16px !important; }
	}
}