/* --- ESTILOS PARA EL VISOR DE PROYECTOS AJAX --- */

/* 1. Controla el scroll de la página principal */
body.project-viewer-active {
	overflow: hidden; /* ¡Crucial! Evita el doble scroll */
}

/* 2. El 'wrapper' principal que contiene todo el visor */
#project-viewer-wrapper {
	position: fixed; /* Lo fija a la ventana del navegador */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000; /* Se asegura de que esté por encima de todo */

	/* --- Visibilidad y Animación --- */
	opacity: 1; /* Por defecto es visible cuando no está oculto */
	transform: translateY(0);
	pointer-events: auto;

	transition: opacity 0.5s 0.15s ease-out, transform 0.5s ease-in;
}

/* 3. Estado oculto del wrapper */
/* El JS añade/quita esta clase para mostrar/ocultar */
#project-viewer-wrapper.viewer-is-hidden {
	opacity: 0;
	transform: translateY(100vh); /* Lo saca de la pantalla hacia abajo */
	pointer-events: none; /* Evita interacciones cuando está oculto */
}

/* 4. El botón de cerrar */
#project-viewer-close-btn {
	position: fixed; /* Se fija a la ventana, no al contenido que hace scroll */
	top: 30px;
	right: 30px;
	z-index: 1001; /* Debe estar por encima del contenedor de contenido */
	cursor: pointer;
	/* --- Estilos básicos del botón (ajústalos a tu gusto) --- */
	background: #fff;
	color: #000;
	border: 1px solid #ccc;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	font-size: 20px;
	line-height: 1;
}

/* 5. El contenedor donde se inyecta el contenido del proyecto */
#project-viewer-container {
	width: 100%;
	height: 100%;
	background: #ffffff; /* ¡LA CLAVE! Le da el fondo blanco que faltaba */
	overflow-y: auto; /* ¡LA CLAVE! Permite el scroll SÓLO DENTRO de este contenedor */
	padding: 2rem 0; Un poco de espacio para que el contenido no pegue a los bordes
	box-sizing: border-box; /* Asegura que el padding no aumente el tamaño total */
}