/*
 * Sobre de apertura reutilizable para invitaciones de boda, XV y evento.
 *
 * El tema opta por este componente definiendo --sobre-apertura-activa: 1
 * y, como minimo, --sobre-imagen y --sobre-sello. La imagen del sobre se
 * divide visualmente con clip-path; no es necesario generar archivos por capa.
 * Los tiempos se configuran en el CSS de cada tema con una unidad de tiempo:
 * --sobre-apertura-duracion: 1850ms; (tiempo que tarda en salir la carta).
 * --sobre-mensaje-duracion: 1200ms; (tiempo que permanece visible el mensaje).
 * --sobre-momento-abierto: 0.687; (punto en que la solapa queda abierta).
 * Tambien se aceptan valores en segundos, por ejemplo: 2.5s.
 */

.dialogoEntrar.sobreApertura {
	--sobre-proporcion: 1200 / 756;
	--sobre-ancho-maximo: 760px;
	--sobre-ancho-por-alto: 123.8vh;
	--alto-sello: 67%;
	--sobre-punta-solapa: 68%;
	--sobre-inicio-bolsillo: 0%;
	--sobre-papel: #f4efe6;
	--sobre-carta: #fffaf2;
	--sobre-tinta: #7f2530;
	--sobre-borde: rgba(126, 77, 57, 0.24);
	--sobre-sombra: rgba(24, 10, 8, 0.42);
	--sobre-fuente: serif;
	position: relative !important;
	display: block !important;
	width: min(92vw, var(--sobre-ancho-maximo), var(--sobre-ancho-por-alto)) !important;
	height: auto !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
	aspect-ratio: var(--sobre-proporcion);
	padding: 0 !important;
	border: 1px solid var(--sobre-borde) !important;
	border-radius: clamp(2px, 0.8vmin, 7px) !important;
	background:
		radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.68) 0 1px, transparent 2px),
		radial-gradient(circle at 76% 64%, rgba(116, 84, 62, 0.08) 0 1px, transparent 2px),
		linear-gradient(135deg, #fffdf8, var(--sobre-papel)) !important;
	background-size: 29px 31px, 37px 41px, 100% 100% !important;
	box-shadow: 0 1.4rem 3.2rem var(--sobre-sombra) !important;
	color: var(--sobre-tinta) !important;
	overflow: visible !important;
	isolation: isolate;
	-webkit-perspective: 1200px;
	perspective: 1200px;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

/* Solapa: usa la parte superior de la misma imagen del sobre. */
.dialogoEntrar.sobreApertura::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 4;
	background-image: var(--sobre-imagen);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	-webkit-clip-path: polygon(0 0, 100% 0, 50% var(--sobre-punta-solapa));
	clip-path: polygon(0 0, 100% 0, 50% var(--sobre-punta-solapa));
	-webkit-transform: rotateX(0deg) translateZ(1px);
	transform: rotateX(0deg) translateZ(1px);
	transform-origin: 50% 0;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	pointer-events: none;
	will-change: transform;
}

/* Fondo interior que queda visible al levantar la solapa. */
.dialogoEntrar.sobreApertura::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background:
		linear-gradient(145deg, rgba(255, 255, 255, 0.5), transparent 48%),
		var(--sobre-papel);
	box-shadow: inset 0 0 1.5rem rgba(104, 71, 49, 0.12);
	pointer-events: none;
}

.dialogoEntrar.sobreApertura .swal2-close {
	display: none !important;
}

.dialogoEntrar.sobreApertura .swal2-html-container {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	z-index: auto !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	color: var(--sobre-tinta) !important;
	pointer-events: none;
}

/* Carta interior. El texto real del SweetAlert se anima sobre esta pieza. */
.dialogoEntrar.sobreApertura .swal2-html-container::before {
	content: '';
	position: absolute;
	top: 17%;
	left: 8%;
	z-index: 2;
	width: 84%;
	height: 72%;
	border: 1px solid rgba(126, 77, 57, 0.2);
	border-radius: clamp(2px, 0.6vmin, 6px);
	background:
		radial-gradient(circle at 18% 24%, rgba(120, 79, 52, 0.06) 0 1px, transparent 2px),
		linear-gradient(150deg, rgba(255, 255, 255, 0.9), var(--sobre-carta));
	background-size: 31px 37px, 100% 100%;
	box-shadow: 0 0.6rem 1.4rem rgba(58, 30, 22, 0.2);
	opacity: 0;
	transform: translateY(18%);
	pointer-events: none;
	will-change: transform, opacity;
}

.dialogoEntrar.sobreApertura .swal2-html-container > p {
	position: absolute !important;
	top: 10%;
	left: 14%;
	z-index: 6;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 72% !important;
	min-height: 25%;
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--sobre-fuente) !important;
	font-size: clamp(1.05rem, 4.5vmin, 2.65rem) !important;
	font-weight: 500 !important;
	line-height: 1.12 !important;
	text-align: center;
	color: var(--sobre-tinta) !important;
	text-wrap: balance;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.dialogoEntrar.sobreApertura .swal2-actions {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	z-index: auto !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	pointer-events: none;
}

/* Bolsillo frontal: usa la parte inferior de la misma imagen del sobre. */
.dialogoEntrar.sobreApertura .swal2-actions::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 3;
	background-image: var(--sobre-imagen);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	-webkit-clip-path: polygon(
		0 var(--sobre-inicio-bolsillo),
		50% var(--sobre-punta-solapa),
		100% var(--sobre-inicio-bolsillo),
		100% 100%,
		0 100%
	);
	clip-path: polygon(
		0 var(--sobre-inicio-bolsillo),
		50% var(--sobre-punta-solapa),
		100% var(--sobre-inicio-bolsillo),
		100% 100%,
		0 100%
	);
	pointer-events: none;
}

.dialogoEntrar.sobreApertura .swal2-confirm {
	position: absolute !important;
	top: var(--alto-sello) !important;
	left: 50% !important;
	z-index: 7 !important;
	display: block !important;
	width: clamp(72px, 18%, 138px) !important;
	height: auto !important;
	aspect-ratio: 1;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	outline: 0 !important;
	background-color: transparent !important;
	background-image: var(--sobre-sello) !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: contain !important;
	box-shadow: none !important;
	color: transparent !important;
	font-size: 0 !important;
	line-height: 1 !important;
	transform: translate(-50%, -50%) scale(1);
	transform-origin: center;
	pointer-events: auto;
	will-change: transform, opacity;
}

.dialogoEntrar.sobreApertura .swal2-confirm:focus-visible {
	outline: 0 !important;
	outline-offset: 0 !important;
	box-shadow: none !important;
}

.dialogoEntrar.sobreApertura .botonEntrar,
.dialogoEntrar.sobreApertura .textoEntrar {
	position: absolute !important;
	top: auto !important;
	left: auto !important;
	display: block !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
	.dialogoEntrar.sobreApertura.swal2-show {
		animation: sobreAparicion 0.55s cubic-bezier(0.22, 0.8, 0.28, 1) both !important;
	}

	.dialogoEntrar.sobreApertura:not(.swal2-hide) .swal2-confirm {
		animation: sobreSelloRespirar 2.2s ease-in-out 0.65s infinite;
	}

	.dialogoEntrar.sobreApertura:not(.swal2-hide) .swal2-confirm:hover {
		animation-play-state: paused;
		transform: translate(-50%, -50%) scale(1.07);
	}

	.dialogoEntrar.sobreApertura.sobreAbriendo {
		animation: sobreDespedida var(--sobre-cierre-duracion, 300ms) ease calc(var(--sobre-apertura-duracion, 1850ms) + var(--sobre-mensaje-duracion, 1200ms)) both !important;
	}

	.dialogoEntrar.sobreApertura.sobreAbriendo .swal2-confirm {
		animation: sobreSelloAbrir var(--sobre-apertura-duracion, 1850ms) ease-in both !important;
	}

	.dialogoEntrar.sobreApertura.sobreAbriendo::before {
		animation: sobreSolapaAbrir var(--sobre-apertura-duracion, 1850ms) cubic-bezier(0.46, 0.03, 0.24, 1) both;
	}

	.dialogoEntrar.sobreApertura.sobreAbriendo .swal2-html-container::before {
		animation:
			sobreCartaSubir var(--sobre-apertura-duracion, 1850ms) cubic-bezier(0.2, 0.72, 0.2, 1) both,
			sobreCartaOcultar var(--sobre-cierre-duracion, 300ms) ease calc(var(--sobre-apertura-duracion, 1850ms) + var(--sobre-mensaje-duracion, 1200ms)) forwards;
	}

	.dialogoEntrar.sobreApertura.sobreAbriendo .swal2-html-container > p {
		animation:
			sobreTextoCarta var(--sobre-apertura-duracion, 1850ms) ease both,
			sobreTextoCartaOcultar var(--sobre-cierre-duracion, 300ms) ease calc(var(--sobre-apertura-duracion, 1850ms) + var(--sobre-mensaje-duracion, 1200ms)) forwards;
	}

	.dialogoEntrar.sobreApertura.swal2-hide {
		animation: sobreOcultar 0.16s linear both !important;
	}
}

@keyframes sobreAparicion {
	0% { opacity: 0; transform: translateY(24px) scale(0.96); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes sobreSelloRespirar {
	0%, 100% { transform: translate(-50%, -50%) scale(1); filter: drop-shadow(0 0.2rem 0.2rem rgba(44, 16, 15, 0.2)); }
	50% { transform: translate(-50%, -50%) scale(1.045); filter: drop-shadow(0 0.35rem 0.42rem rgba(44, 16, 15, 0.34)); }
}

@keyframes sobreSelloAbrir {
	0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
	9.5% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(-3deg); }
	17.5%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(8deg); }
}

@keyframes sobreSolapaAbrir {
	0%, 18.7% {
		z-index: 4;
		background-image: var(--sobre-imagen);
		transform: rotateX(0deg) translateZ(1px);
	}
	41.4% {
		z-index: 4;
		background-image: var(--sobre-imagen);
		transform: rotateX(-92deg) translateZ(1px);
	}
	42% {
		z-index: 1;
		background-image: linear-gradient(150deg, #fffdf8, var(--sobre-papel));
	}
	68.7%, 100% {
		z-index: 1;
		background-image: linear-gradient(150deg, #fffdf8, var(--sobre-papel));
		transform: rotateX(-180deg) translateZ(0);
	}
}

@keyframes sobreCartaSubir {
	0%, 46.4% { opacity: 0; transform: translateY(18%); }
	58.3% { opacity: 1; transform: translateY(10%); }
	78.5% { opacity: 1; transform: translateY(-42%); }
	100% { opacity: 1; transform: translateY(-58%); }
}

@keyframes sobreTextoCarta {
	0%, 48% { top: 54%; z-index: 2; opacity: 0; visibility: hidden; transform: translateY(12%); }
	58% { top: 38%; z-index: 2; opacity: 0; visibility: hidden; transform: translateY(0); }
	68% { top: 18%; z-index: 2; opacity: 1; visibility: visible; }
	100% { top: 2%; z-index: 2; opacity: 1; visibility: visible; }
}

@keyframes sobreCartaOcultar {
	from { opacity: 1; transform: translateY(-58%); }
	to { opacity: 0; transform: translateY(-70%); }
}

@keyframes sobreTextoCartaOcultar {
	from { top: 2%; z-index: 2; opacity: 1; visibility: visible; transform: translateY(0); }
	to { top: -8%; z-index: 2; opacity: 0; visibility: hidden; transform: translateY(0); }
}

@keyframes sobreDespedida {
	from { opacity: 1; transform: translateY(0) scale(1); }
	to { opacity: 0; transform: translateY(-16px) scale(0.97); }
}

@keyframes sobreOcultar {
	from { opacity: 0; }
	to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.dialogoEntrar.sobreApertura,
	.dialogoEntrar.sobreApertura::before,
	.dialogoEntrar.sobreApertura .swal2-html-container::before,
	.dialogoEntrar.sobreApertura .swal2-html-container > p,
	.dialogoEntrar.sobreApertura .swal2-confirm {
		animation: none !important;
		transition: none !important;
	}

	.dialogoEntrar.sobreApertura.sobreAbriendo {
		animation: none !important;
	}

	.dialogoEntrar.sobreApertura.swal2-hide {
		animation: sobreDespedidaReducida 0.2s linear both !important;
	}
}

@keyframes sobreDespedidaReducida {
	from { opacity: 1; }
	to { opacity: 0; }
}

@media (max-width: 576px) {
	.dialogoEntrar.sobreApertura {
		width: min(92vw, 130.2vh) !important;
	}

	.dialogoEntrar.sobreApertura .swal2-confirm {
		width: clamp(68px, 20%, 96px) !important;
	}
}