/* ==========================================================================
   Destacados — Popup
   Estilos del popup "Destacado" del front (render en footer.php).
   Markup: .popup-destacado > .popup-destacado-overlay
                            > .popup-destacado-card (fondo inline)
                                > .popup-destacado-cerrar
                                > .popup-destacado-contenido
                                > .popup-destacado-cta
   El JS pone display:flex y agrega .popup-destacado-visible (entrada)
   o .popup-destacado-saliendo (salida, ~400ms).
   IMPORTANTE: el fondo de la card y la tipografia de los componentes
   vienen inline desde el render; no se pisan aca.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Contenedor fixed
   -------------------------------------------------------------------------- */
.popup-destacado{
	position: fixed;
	inset: 0;
	z-index: 99990;
	display: none; /* el JS lo pasa a flex al mostrarlo */
	box-sizing: border-box;
}

.popup-destacado *,
.popup-destacado *::before,
.popup-destacado *::after{
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Overlay
   -------------------------------------------------------------------------- */
.popup-destacado-overlay{
	position: absolute;
	inset: 0;
	pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Card
   El fondo (gradiente o imagen) llega inline; aca solo caja y forma.
   -------------------------------------------------------------------------- */
.popup-destacado-card{
	position: relative;
	width: 480px;
	max-width: calc(100vw - 40px);
	max-height: calc(100vh - 40px);
	padding: 2rem 2rem 1.75rem;
	border-radius: .75rem;
	box-shadow: 0 1.25rem 3rem rgba(30,34,40,.35);
	color: #1e2228;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: auto;
	z-index: 1;
	pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Boton cerrar (X)
   -------------------------------------------------------------------------- */
.popup-destacado-cerrar{
	position: absolute;
	top: .65rem;
	right: .65rem;
	width: 2rem;
	height: 2rem;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,.85);
	color: #1e2228;
	font-size: 1.4rem;
	line-height: 1;
	font-weight: 400;
	cursor: pointer;
	box-shadow: 0 .1rem .4rem rgba(0,0,0,.2);
	transition: background-color .15s ease-in-out, transform .15s ease-in-out;
	z-index: 2;
}

.popup-destacado-cerrar:hover{
	background: #fff;
	transform: scale(1.06);
}

.popup-destacado-cerrar:focus{
	outline: none;
	box-shadow: 0 0 0 .15rem rgba(255,255,255,.6), 0 .1rem .4rem rgba(0,0,0,.2);
}

/* --------------------------------------------------------------------------
   Contenido
   -------------------------------------------------------------------------- */
.popup-destacado-contenido{
	padding: .25rem 0 0;
	margin: 0;
}

/* Componente de texto: SOLO espaciado base.
   font-family / size / color / align / weight / style vienen inline. */
.popup-destacado-componente{
	margin: 0 0 .65rem;
	line-height: 1.45;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.popup-destacado-componente:last-child{
	margin-bottom: 0;
}

/* Contenido HTML (modo tinymce) — saneo de margenes de borde */
.popup-destacado-contenido > *:first-child{
	margin-top: 0;
}

.popup-destacado-contenido > *:last-child{
	margin-bottom: 0;
}

.popup-destacado-contenido img{
	max-width: 95%;
	height: auto;
}

/* --------------------------------------------------------------------------
   CTA
   -------------------------------------------------------------------------- */
.popup-destacado-cta{
	display: inline-block;
	margin-top: 1.25rem;
	padding: .65rem 1.5rem;
	border: 0;
	border-radius: .4rem;
	background-color: var(--color-primario, #1e2228);
	color: #fff;
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 .25rem .75rem rgba(30,34,40,.2);
	transition: filter .15s ease-in-out, transform .15s ease-in-out, box-shadow .15s ease-in-out;
}

.popup-destacado-cta:hover{
	color: #fff;
	filter: brightness(1.08);
	transform: translateY(-1px);
	box-shadow: 0 .4rem 1rem rgba(30,34,40,.28);
}

.popup-destacado-cta:focus{
	outline: none;
	box-shadow: 0 0 0 .2rem rgba(255,255,255,.5), 0 .25rem .75rem rgba(30,34,40,.2);
}

/* Wrapper del CTA: alinea el boton (izq/centro/der) via text-align inline */
.popup-destacado-cta-wrap{
	margin-top: 1rem;
}

.popup-destacado-cta-wrap .popup-destacado-cta{
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   Enlace del popup (card clickeable)
   El <a> envuelve solo el area de contenido; hereda color/estilo del texto
   y muestra cursor pointer en toda la card.
   -------------------------------------------------------------------------- */
.popup-destacado-clickeable .popup-destacado-card,
.popup-destacado-card.popup-destacado-clickeable{
	cursor: pointer;
}

.popup-destacado-enlace,
.popup-destacado-enlace:hover,
.popup-destacado-enlace:focus{
	display: block;
	color: inherit;
	text-decoration: none;
}

/* ==========================================================================
   PREDEFINIDOS (cupon / ruleta / sorteo / newsletter / promocion)
   El popup predefinido ahora se PERSONALIZA TOTAL: el fondo (color/imagen) y el
   contenido custom los pone el builder, igual que en personalizado. El widget de
   la entidad se inyecta DESPUES del contenido custom, dentro de un contenedor
   .popup-destacado-pred-widget con fondo propio para garantizar contraste sobre
   CUALQUIER fondo de la card. NO se fuerza fondo blanco en la card.
   ========================================================================== */

/* Contenedor del widget: superficie clara semitransparente para que los textos
   (titulos) y controles se lean sobre fondos oscuros o con imagen. */
.popup-destacado-pred-widget{
	margin-top: 1rem;
	padding: 1rem;
	border-radius: .5rem;
	background: rgba(255,255,255,.92);
	color: #1e2228;
	text-align: center;
}

/* Si el widget es lo unico (sin contenido custom arriba), sin margen superior extra. */
.popup-destacado-contenido > .popup-destacado-pred-widget:first-child{
	margin-top: .25rem;
}

.popup-destacado-pred-titulo{
	margin: .25rem 0 1rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	color: #1e2228;
}

/* Imagen de promo / ruleta */
.popup-destacado-pred-img{
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0 auto 1rem;
	border-radius: .5rem;
}

/* Recuadro con el codigo del cupon */
.popup-destacado-cupon-codigo{
	display: block;
	margin: 0 auto 1rem;
	padding: .85rem 1rem;
	border: 2px dashed var(--color-primario, #1e2228);
	border-radius: .5rem;
	background: #f6f7f9;
	color: #1e2228;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-align: center;
	word-break: break-all;
}

/* Feedback del boton copiar */
.popup-destacado-cta.popup-destacado-copiado{
	background-color: #2e7d32;
	border-color: #2e7d32;
}

/* Mini-form de email (newsletter / sorteo): input + boton */
.popup-destacado-pred-form{
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	justify-content: center;
	margin-top: .5rem;
}

.popup-destacado-pred-input{
	flex: 1 1 auto;
	min-width: 0;
	padding: .65rem .9rem;
	border: 1px solid #ced4da;
	border-radius: .4rem;
	background: #fff;
	color: #1e2228;
	font-size: .95rem;
	line-height: 1.2;
}

.popup-destacado-pred-input:focus{
	outline: none;
	border-color: var(--color-primario, #1e2228);
	box-shadow: 0 0 0 .15rem rgba(30,34,40,.12);
}

.popup-destacado-pred-form .popup-destacado-cta{
	margin-top: 0;
	flex: 0 0 auto;
}

/* ==========================================================================
   RULETA spin-first (embebida en el popup)
   El HTML lo inyecta cargar_ruleta_destacado.php dentro de
   .contenedor-ruleta-destacado: #containerRuletaDestacado > titulo + rueda
   (canvas 300x300) + boton Girar + form de email + resultado.
   ========================================================================== */

/* La card de la ruleta es mas ancha para que entre la rueda (canvas 300px). */
.popup-destacado-predefinido .popup-destacado-card:has(.contenedor-ruleta-destacado){
	width: 500px;
	padding-left: 0px;
	padding-right: 0px;
}

/* Fallback para navegadores sin :has() — la card de esquina queda igual de ancha. */
.popup-pos-sup-izq .popup-destacado-card:has(.contenedor-ruleta-destacado),
.popup-pos-sup-der .popup-destacado-card:has(.contenedor-ruleta-destacado),
.popup-pos-inf-izq .popup-destacado-card:has(.contenedor-ruleta-destacado),
.popup-pos-inf-der .popup-destacado-card:has(.contenedor-ruleta-destacado){
	width: 500px;
	padding-left: 0px;
	padding-right: 0px;
}

/* El widget de la ruleta no lleva padding horizontal: la rueda (canvas 300px)
   tiene que entrar holgada en la card de 500px. Conserva la superficie clara
   semitransparente para que el titulo / resultado / boton se lean sobre
   cualquier fondo del builder. */
.popup-destacado-pred-widget:has(.contenedor-ruleta-destacado){
	padding-left: 0;
	padding-right: 0;
}

.contenedor-ruleta-destacado{
	margin-top: .25rem;
	text-align: center;
}

/* Wrapper que inyecta el endpoint */
#containerRuletaDestacado{
	text-align: center;
}

#tituloRuletaDestacado{
	margin: .25rem 0 1rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	color: #1e2228;
}

/* Rueda */
#divRuedaRuletaDestacado{
	display: flex;
	justify-content: center;
}

#canvasRuletaDestacado{
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}

/* Boton Girar / Reclamar premio: coherentes con var(--color-primario). */
#containerRuletaDestacado .btn-primary,
#divCapturaRuletaDestacado .btn-primary{
	display: inline-block;
    margin-top: 0.5rem;
    padding: .65rem 1.5rem;
    border: 0;
    border-radius: .4rem;
    background-color: var(--color-primario, #1e2228);
    color: #fff;
    font-weight: 400;
    font-size: .75rem;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 .25rem .75rem rgba(30, 34, 40, .2);
    transition: filter .15s ease-in-out, transform .15s ease-in-out, box-shadow .15s ease-in-out;
}

#btnGirarRuletaDestacado{
	font-size: .85rem;
	font-weight: normal;
}

#containerRuletaDestacado .btn-primary:hover,
#divCapturaRuletaDestacado .btn-primary:hover{
	color: #fff;
	filter: brightness(1.08);
	transform: translateY(-1px);
	box-shadow: 0 .4rem 1rem rgba(30,34,40,.28);
}

#containerRuletaDestacado .btn-primary:focus,
#divCapturaRuletaDestacado .btn-primary:focus{
	outline: none;
	box-shadow: 0 0 0 .2rem rgba(255,255,255,.5), 0 .25rem .75rem rgba(30,34,40,.2);
}

/* Captura de email tras girar: input + boton reclamar */
#divCapturaRuletaDestacado{
	margin-top: 1rem;
}

#divPremioRuletaDestacado{
	margin-bottom: .65rem;
	font-weight: 600;
	color: #1e2228;
}

#txtEmailRuletaDestacado{
	display: block;
    width: 100%;
    margin: 0 auto .35rem;
    padding: .65rem .9rem;
    border: 1px solid #ced4da;
    border-radius: .4rem;
    background: #fff;
    color: #1e2228;
    font-size: .8rem;
    line-height: 1.2;
    max-width: 350px;
}

#txtEmailRuletaDestacado:focus{
	outline: none;
	border-color: var(--color-primario, #1e2228);
	box-shadow: 0 0 0 .15rem rgba(30,34,40,.12);
}

/* Resultado / aviso de ya participado */
#divResultadoRuletaDestacado,
#divYaParticipoRuletaDestacado{
	margin-top: 1rem;
	font-weight: 600;
	color: #1e2228;
}

/* ==========================================================================
   POSICION — CENTRO
   Overlay oscuro full-screen + card centrada.
   ========================================================================== */
.popup-pos-centro{
	display: none; /* JS -> flex */
	align-items: center;
	justify-content: center;
	padding: 20px;
}

/* ==========================================================================
   POSICION — ESQUINAS
   Sin overlay oscuro; la card flota anclada con margen.
   El contenedor no bloquea la pagina (pointer-events:none), solo la card.
   ========================================================================== */
.popup-pos-sup-izq,
.popup-pos-sup-der,
.popup-pos-inf-izq,
.popup-pos-inf-der{
	display: none; /* JS -> flex */
	pointer-events: none;
}

.popup-pos-sup-izq .popup-destacado-overlay,
.popup-pos-sup-der .popup-destacado-overlay,
.popup-pos-inf-izq .popup-destacado-overlay,
.popup-pos-inf-der .popup-destacado-overlay{
	display: none;
	background: transparent;
	pointer-events: none;
}

.popup-pos-sup-izq .popup-destacado-card,
.popup-pos-sup-der .popup-destacado-card,
.popup-pos-inf-izq .popup-destacado-card,
.popup-pos-inf-der .popup-destacado-card{
	position: absolute;
	width: 360px;
	max-width: calc(100vw - 40px);
	pointer-events: auto;
}

/* Anclajes */
.popup-pos-sup-izq .popup-destacado-card{
	top: 20px;
	left: 20px;
}

.popup-pos-sup-der .popup-destacado-card{
	top: 20px;
	right: 20px;
}

.popup-pos-inf-izq .popup-destacado-card{
	bottom: 20px;
	left: 20px;
}

.popup-pos-inf-der .popup-destacado-card{
	bottom: 20px;
	right: 20px;
}

/* ==========================================================================
   ANIMACIONES (~400ms) — entrada y salida
   Se aplican a la card cuando el contenedor tiene
   .popup-destacado-visible (entrada) o .popup-destacado-saliendo (salida).
   ========================================================================== */

/* ---- FADE ---- */
@keyframes popupDestFadeIn{
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes popupDestFadeOut{
	from { opacity: 1; }
	to   { opacity: 0; }
}

.popup-efecto-fade.popup-destacado-visible .popup-destacado-card{
	animation: popupDestFadeIn .4s ease forwards;
}
.popup-efecto-fade.popup-destacado-saliendo .popup-destacado-card{
	animation: popupDestFadeOut .4s ease forwards;
}

/* El overlay del centro acompania el fade en ambos sentidos */
.popup-pos-centro.popup-destacado-visible .popup-destacado-overlay{
	animation: popupDestFadeIn .4s ease forwards;
}
.popup-pos-centro.popup-destacado-saliendo .popup-destacado-overlay{
	animation: popupDestFadeOut .4s ease forwards;
}

/* ---- ZOOM ---- */
@keyframes popupDestZoomIn{
	from { opacity: 0; transform: scale(.85); }
	to   { opacity: 1; transform: scale(1); }
}
@keyframes popupDestZoomOut{
	from { opacity: 1; transform: scale(1); }
	to   { opacity: 0; transform: scale(.85); }
}

.popup-efecto-zoom.popup-destacado-visible .popup-destacado-card{
	animation: popupDestZoomIn .4s cubic-bezier(.22,1,.36,1) forwards;
}
.popup-efecto-zoom.popup-destacado-saliendo .popup-destacado-card{
	animation: popupDestZoomOut .4s ease forwards;
}

.popup-efecto-zoom.popup-pos-centro.popup-destacado-visible .popup-destacado-overlay{
	animation: popupDestFadeIn .4s ease forwards;
}
.popup-efecto-zoom.popup-pos-centro.popup-destacado-saliendo .popup-destacado-overlay{
	animation: popupDestFadeOut .4s ease forwards;
}

/* ---- SLIDE ----
   Centro: entra desde abajo.
   Esquinas: entra desde su borde mas cercano (X o Y segun anclaje). */

/* Centro: desde abajo */
@keyframes popupDestSlideUpIn{
	from { opacity: 0; transform: translateY(40px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes popupDestSlideDownOut{
	from { opacity: 1; transform: translateY(0); }
	to   { opacity: 0; transform: translateY(40px); }
}

.popup-efecto-slide.popup-pos-centro.popup-destacado-visible .popup-destacado-card{
	animation: popupDestSlideUpIn .4s cubic-bezier(.22,1,.36,1) forwards;
}
.popup-efecto-slide.popup-pos-centro.popup-destacado-saliendo .popup-destacado-card{
	animation: popupDestSlideDownOut .4s ease forwards;
}
.popup-efecto-slide.popup-pos-centro.popup-destacado-visible .popup-destacado-overlay{
	animation: popupDestFadeIn .4s ease forwards;
}
.popup-efecto-slide.popup-pos-centro.popup-destacado-saliendo .popup-destacado-overlay{
	animation: popupDestFadeOut .4s ease forwards;
}

/* Esquinas izquierda: desde la izquierda */
@keyframes popupDestSlideLeftIn{
	from { opacity: 0; transform: translateX(-40px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes popupDestSlideLeftOut{
	from { opacity: 1; transform: translateX(0); }
	to   { opacity: 0; transform: translateX(-40px); }
}

.popup-efecto-slide.popup-pos-sup-izq.popup-destacado-visible .popup-destacado-card,
.popup-efecto-slide.popup-pos-inf-izq.popup-destacado-visible .popup-destacado-card{
	animation: popupDestSlideLeftIn .4s cubic-bezier(.22,1,.36,1) forwards;
}
.popup-efecto-slide.popup-pos-sup-izq.popup-destacado-saliendo .popup-destacado-card,
.popup-efecto-slide.popup-pos-inf-izq.popup-destacado-saliendo .popup-destacado-card{
	animation: popupDestSlideLeftOut .4s ease forwards;
}

/* Esquinas derecha: desde la derecha */
@keyframes popupDestSlideRightIn{
	from { opacity: 0; transform: translateX(40px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes popupDestSlideRightOut{
	from { opacity: 1; transform: translateX(0); }
	to   { opacity: 0; transform: translateX(40px); }
}

.popup-efecto-slide.popup-pos-sup-der.popup-destacado-visible .popup-destacado-card,
.popup-efecto-slide.popup-pos-inf-der.popup-destacado-visible .popup-destacado-card{
	animation: popupDestSlideRightIn .4s cubic-bezier(.22,1,.36,1) forwards;
}
.popup-efecto-slide.popup-pos-sup-der.popup-destacado-saliendo .popup-destacado-card,
.popup-efecto-slide.popup-pos-inf-der.popup-destacado-saliendo .popup-destacado-card{
	animation: popupDestSlideRightOut .4s ease forwards;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 575.98px){
	.popup-destacado-card{
		width: 100%;
		max-width: calc(100vw - 24px);
		padding: 1.5rem 1.25rem 1.25rem;
	}

	.popup-pos-centro{
		padding: 12px;
	}

	/* En pantallas chicas, las esquinas se anclan abajo y centradas */
	.popup-pos-sup-izq .popup-destacado-card,
	.popup-pos-sup-der .popup-destacado-card,
	.popup-pos-inf-izq .popup-destacado-card,
	.popup-pos-inf-der .popup-destacado-card{
		width: calc(100vw - 24px);
		max-width: calc(100vw - 24px);
		left: 12px;
		right: 12px;
		top: auto;
		bottom: 12px;
	}

	.popup-destacado-cta{
		display: block;
		width: 100%;
	}
}

/* ==========================================================================
   ACCESIBILIDAD — respeta prefers-reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
	.popup-destacado-visible .popup-destacado-card,
	.popup-destacado-saliendo .popup-destacado-card,
	.popup-destacado-visible .popup-destacado-overlay,
	.popup-destacado-saliendo .popup-destacado-overlay{
		animation-duration: .01ms !important;
	}
}