/* assets/css/popup.css */

/* Fondo oscuro del popup */
.modal-overlay-custom {
   display: none; 
   position: fixed;
   z-index: 999999; /* Valor muy alto para asegurar que esté sobre el menú */
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.85);
   justify-content: center;
   align-items: center;
}

/* Contenedor de la imagen */
.modal-content-custom {
   position: relative;
   background-color: #1a1a1a;
   padding: 10px;
   width: 95%;
   max-width: 900px; 
   border: 3px solid #ff0055; /* Color magenta neón */
   box-shadow: 0px 0px 25px rgba(255, 0, 85, 0.5);
   border-radius: 12px;
   animation: fadeInPopup 0.4s ease-out;
}

.modal-content-custom img {
   display: block;
   width: 100%;
   height: auto;
   border-radius: 4px;
}

/* Botón de cerrar */
.close-btn-custom {
   position: absolute;
   top: -20px;
   right: -20px;
   color: #fff;
   background: #ff0055;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   text-align: center;
   line-height: 40px;
   font-weight: bold;
   cursor: pointer;
   font-size: 24px;
   z-index: 1000001;
   box-shadow: 0 0 10px rgba(0,0,0,0.5);
   transition: transform 0.2s;
}

.close-btn-custom:hover {
   transform: scale(1.1);
}

@keyframes fadeInPopup {
   from { opacity: 0; transform: translateY(-20px); }
   to { opacity: 1; transform: translateY(0); }
}

/* Ajuste para móviles */
@media (max-width: 768px) {
   .close-btn-custom {
      top: -10px;
      right: -10px;
   }
}