/* Estilos para el Pop Up en el sitio público */

/* --- ANIMATIONS --- */

/* Fade */
@keyframes popupFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popupFadeOut { from { opacity: 1; } to { opacity: 0; } }

/* Zoom */
@keyframes popupZoomIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
@keyframes popupZoomOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.8); } }

/* Slide */
@keyframes popupSlideIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes popupSlideOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(30px); } }

/* Animation Classes - applied to .popup-obvio-content */
.popup-anim-fade.is-opening { animation: popupFadeIn 0.3s ease-out forwards; }
.popup-anim-fade.is-closing { animation: popupFadeOut 0.3s ease-in forwards; }

.popup-anim-zoomIn.is-opening { animation: popupZoomIn 0.3s ease-out forwards; }
.popup-anim-zoomIn.is-closing { animation: popupZoomOut 0.3s ease-in forwards; }

.popup-anim-slideIn.is-opening { animation: popupSlideIn 0.3s ease-out forwards; }
.popup-anim-slideIn.is-closing { animation: popupSlideOut 0.3s ease-in forwards; }
.popup-obvio-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    padding: 20px;
    z-index: 999999 !important;
}

/* --- Posiciones --- */
.popup-position-center-center {
    justify-content: center;
    align-items: center;
}
.popup-position-top-left {
    justify-content: flex-start;
    align-items: flex-start;
}
.popup-position-top-center {
    justify-content: center;
    align-items: flex-start;
}
.popup-position-top-right {
    justify-content: flex-end;
    align-items: flex-start;
}
.popup-position-bottom-left {
    justify-content: flex-start;
    align-items: flex-end;
}
.popup-position-bottom-center {
    justify-content: center;
    align-items: flex-end;
}
.popup-position-bottom-right {
    justify-content: flex-end;
    align-items: flex-end;
}

.popup-obvio-content {
    position: relative;
    background: none;
    opacity: 0; /* Initial state for animation */
    padding: 0;
    border-radius: 10px;
}

.popup-obvio-content img {
    max-width: 80vw;
    max-height: 80vh;
    display: block;
}

#popup-obvio-container .popup-obvio-close-btn {
    position: absolute !important;
    top: 10px !important;
    width: 30px !important;
    height: 30px !important;
    background: rgba(0,0,0,0.5) !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease, transform 0.3s ease !important;
    z-index: 10 !important;
    font-size: 0 !important; /* Hide text content */
}

#popup-obvio-container .popup-obvio-close-btn:hover {
    background: rgba(0,0,0,0.8) !important;
    transform: rotate(90deg) !important;
}

#popup-obvio-container .popup-obvio-close-btn::before,
#popup-obvio-container .popup-obvio-close-btn::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 16px !important;
    height: 2px !important;
    background-color: white !important;
}

#popup-obvio-container .popup-obvio-close-btn::before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
}

#popup-obvio-container .popup-obvio-close-btn::after {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
}

/* Posición del botón de cierre */
#popup-obvio-container .popup-obvio-close-btn.position-right {
    right: 10px !important;
}

#popup-obvio-container .popup-obvio-close-btn.position-left {
    left: 10px !important;
}