/* 1. Añade esto al principio del archivo para un control de tamaño consistente */
*, *::before, *::after {
  box-sizing: border-box;
}

#popup-de-salida-overlay {
    display: flex; /* Mantenemos flex para el centrado */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fondo oscuro semitransparente */
    z-index: 9999; /* Asegura que esté por encima de otros elementos */
    justify-content: center; /* Centrado horizontal */
    align-items: center; /* Centrado vertical */
    opacity: 0; /* Inicialmente transparente para la animación */
    
    /* Propiedades de transición y visibilidad */
    transition: opacity 0.1s ease-in-out, visibility 0.1s ease-in-out; /* Velocidad de aparición y desaparición */
    visibility: hidden; /* Muy importante: Oculta el elemento lógicamente */
    pointer-events: none; /* Muy importante: Permite que los clics pasen a través cuando no está activo */
}

#popup-de-salida-overlay.active {
    opacity: 1; /* Se vuelve visible */
    visibility: visible; /* Se vuelve lógicamente visible */
    pointer-events: auto; /* Permite que el overlay reciba clics cuando está activo */
}

#popup-de-salida-content {
    background-color: #fff; /* Fondo del contenido si lo necesitas, o transparente si es solo la imagen */
    padding: 20px; /* El padding se incluye en el tamaño gracias a box-sizing: border-box */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    max-width: 90vw; /* Máximo 90% del ancho del viewport para mayor compatibilidad y ajuste */
    max-height: 90vh; /* Máximo 90% del alto del viewport para mayor compatibilidad y ajuste */
    text-align: center;
    overflow: hidden; /* Importante: Recorta cualquier contenido que se desborde */
    display: flex; /* Usa flexbox para alinear la imagen dentro */
    justify-content: center; /* Centra la imagen horizontalmente */
    align-items: center; /* Centra la imagen verticalmente */
}

#popup-de-salida-content img {
    max-width: 100%;  /* Asegura que la imagen no exceda el ancho disponible de su contenedor */
    max-height: 100%; /* Asegura que la imagen no exceda el alto disponible de su contenedor */
    width: auto;      /* Permite que el ancho se ajuste automáticamente */
    height: auto;     /* Permite que el alto se ajuste automáticamente */
    object-fit: contain; /* Clave: Escala la imagen para que quepa en el contenedor sin recortarla ni distorsionarla */
    display: block;   /* Elimina espacios extra bajo la imagen */
    border-radius: 5px; /* Bordes ligeramente redondeados para la imagen */
}

.popup-de-salida-close {
    position: absolute;
	top: 10px;
	right: 10px;
	font-size: 28px;
	cursor: pointer;
	color: #fff;
	line-height: 1;
	background-color: #000;
	border-radius: 100px;
	padding: 5px 10px;
}

.popup-de-salida-close:hover {
    color: #000;
	background-color: #fff;
}