/* ==========================================================
   Turbo Viñetas Premium - Estilos del modal (frontend)
   Basado 1:1 en el aspecto de Turbo Viñetas v2.0, con variables
   CSS para que cada viñeta pueda personalizarse sin tocar este
   archivo (los valores reales los inyecta tvp-frontend.js como
   estilos en línea, igual que hacía v2.0).
   ========================================================== */

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, var(--tvp-overlay-opacity, 0.5));
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999999;
}

.modal-popup {
	background-color: #fff;
	padding: 20px;
	border-radius: 5px;
	border: 2px solid #fff;
	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
	max-width: 400px;
	width: 90%;
	text-align: center;
	box-sizing: border-box;
	position: relative;
}

.modal-popup h1 {
	color: #000;
	margin-top: 0;
	font-size: 25px;
	line-height: 1.25;
}

.modal-popup p {
	margin-bottom: 10px;
}

.modal-popup .button {
	display: inline-block;
	background-color: #007bff;
	color: #fff;
	padding: 10px 20px;
	border-radius: 5px;
	text-decoration: none;
}

.modal-popup .reload-button {
	display: inline-block;
	color: #333;
	text-decoration: none;
	cursor: pointer;
}

/* ---------- Animaciones de entrada ---------- */

.tvp-anim-fade {
	animation: tvp-fade-in 0.25s ease-out;
}

.tvp-anim-slide .modal-popup {
	animation: tvp-slide-up 0.3s ease-out;
}

.tvp-anim-zoom .modal-popup {
	animation: tvp-zoom-in 0.25s ease-out;
}

@keyframes tvp-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes tvp-slide-up {
	from { transform: translateY(40px); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}

@keyframes tvp-zoom-in {
	from { transform: scale(0.85); opacity: 0; }
	to   { transform: scale(1); opacity: 1; }
}

/* ---------- Responsive (móvil) ---------- */

@media (max-width: 480px) {
	.modal-popup {
		padding: 16px;
		max-width: 92%;
	}
	.modal-popup h1 {
		font-size: 20px;
	}
}

/* Marca de disparador manual (shortcode), por si en el futuro se estiliza */
.tvp-manual-trigger {
	display: inline-block;
}

/* ==========================================================
   Plantillas (diseños) de la viñeta
   ========================================================== */

/* ---------- Icono opcional antes del título ---------- */

.tvp-icon-inline {
	display: inline-block;
	margin-right: 6px;
	font-size: 1.1em;
	vertical-align: -2px;
}

.tvp-icon-big {
	display: block;
	font-size: 44px;
	line-height: 1;
	margin-bottom: 8px;
}

/* ---------- Botón de cerrar en forma de icono X ---------- */

.tvp-close-x {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	color: #555;
	text-decoration: none;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.tvp-close-x:hover {
	background: #f2f2f2;
	color: #222;
}

/* ---------- Dos botones (estilo Complianz) ---------- */

.tvp-button-row {
	display: flex;
	gap: 20px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 14px;
}

.tvp-button-row .button {
	margin: 0;
}

.tvp-btn-secondary {
	background: transparent !important;
	box-shadow: none;
}

/* ---------- Acabado más cuidado para las plantillas "tarjeta centrada"
   (todas menos la Clásica, que debe quedarse igual que en v2.0) ---------- */

.tvp-tpl-two-buttons .modal-popup,
.tvp-tpl-refined-x .modal-popup,
.tvp-tpl-icon-header .modal-popup {
	padding: 30px 28px;
	box-shadow: 0 10px 35px rgba(0, 0, 0, 0.18);
}

.tvp-tpl-two-buttons .modal-popup h1,
.tvp-tpl-refined-x .modal-popup h1,
.tvp-tpl-icon-header .modal-popup h1 {
	margin-bottom: 10px;
}

.tvp-tpl-two-buttons .modal-popup p,
.tvp-tpl-refined-x .modal-popup p,
.tvp-tpl-icon-header .modal-popup p {
	line-height: 1.55;
	margin-bottom: 18px;
}

/* Botones más sólidos (radio, peso y espaciado) en todas las plantillas
   nuevas; la Clásica conserva su botón tal cual lo tenía v2.0. */
.tvp-tpl-two-buttons .button,
.tvp-tpl-refined-x .button,
.tvp-tpl-icon-header .button,
.tvp-tpl-toast .button,
.tvp-tpl-urgent-banner .button {
	border-radius: 8px;
	padding: 12px 26px;
	font-weight: 600;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.tvp-tpl-two-buttons .tvp-btn-secondary {
	box-shadow: none;
}

/* ---------- Plantillas "no bloqueantes" (toast y barra) ---------- */
/* No oscurecen el resto de la página: el visitante puede seguir
   navegando/leyendo mientras la viñeta está visible. */

.tvp-no-overlay {
	background: transparent;
	pointer-events: none;
}

.tvp-no-overlay .modal-popup {
	pointer-events: auto;
	position: fixed;
	margin: 0;
}

/* Notificación discreta en una esquina */

.tvp-tpl-toast .modal-popup {
	max-width: 320px;
	width: calc(100% - 32px);
	padding: 16px 18px;
	text-align: left;
}

.tvp-tpl-toast .modal-popup h1 {
	font-size: 17px;
}

.tvp-toast-bottom-right .modal-popup { bottom: 16px; right: 16px; }
.tvp-toast-bottom-left  .modal-popup { bottom: 16px; left: 16px; }
.tvp-toast-top-right    .modal-popup { top: 16px; right: 16px; }
.tvp-toast-top-left     .modal-popup { top: 16px; left: 16px; }

@keyframes tvp-toast-in-br { from { transform: translate(20px, 20px); opacity: 0; } to { transform: translate(0,0); opacity: 1; } }
@keyframes tvp-toast-in-bl { from { transform: translate(-20px, 20px); opacity: 0; } to { transform: translate(0,0); opacity: 1; } }
@keyframes tvp-toast-in-tr { from { transform: translate(20px, -20px); opacity: 0; } to { transform: translate(0,0); opacity: 1; } }
@keyframes tvp-toast-in-tl { from { transform: translate(-20px, -20px); opacity: 0; } to { transform: translate(0,0); opacity: 1; } }

.tvp-toast-bottom-right .modal-popup { animation: tvp-toast-in-br 0.3s ease-out; }
.tvp-toast-bottom-left  .modal-popup { animation: tvp-toast-in-bl 0.3s ease-out; }
.tvp-toast-top-right    .modal-popup { animation: tvp-toast-in-tr 0.3s ease-out; }
.tvp-toast-top-left     .modal-popup { animation: tvp-toast-in-tl 0.3s ease-out; }

/* Barra fija arriba/abajo */

.tvp-tpl-urgent-banner .modal-popup {
	max-width: 100%;
	width: 100%;
	left: 0;
	right: 0;
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 12px 20px;
}

.tvp-tpl-urgent-banner .modal-popup h1 {
	font-size: 16px;
	margin: 0;
	display: inline;
}

.tvp-tpl-urgent-banner .modal-popup p {
	margin: 0;
	display: inline;
}

.tvp-banner-top    .modal-popup { top: 0; }
.tvp-banner-bottom .modal-popup { bottom: 0; }

/* ---------- Tarjeta refinada (X en vez de texto "CERRAR") ---------- */
/* El aspecto "sin borde" se consigue sugiriendo border_size=0 al elegir
   esta plantilla (ver tvp-admin.js); aquí no se fuerza por CSS para no
   anular el campo de borde si el usuario sí quiere uno. */

/* ---------- Responsive (móvil) de las plantillas nuevas ---------- */

@media (max-width: 480px) {
	.tvp-tpl-toast .modal-popup {
		max-width: 100%;
	}
	.tvp-tpl-urgent-banner .modal-popup {
		flex-direction: column;
		text-align: center;
	}
	.tvp-tpl-urgent-banner .modal-popup h1,
	.tvp-tpl-urgent-banner .modal-popup p {
		display: block;
	}
}