/*
 * CEIDE Popup
 * Version 1.2.0
 *
 * Ventanas emergentes inline para CEIDE.
 */


/* =========================================================
   ENLACE QUE ABRE LA VENTANA
   ========================================================= */

.ceide-popup-trigger {
    cursor: pointer;
}


/*
 * Evitar que el enlace parezca deshabilitado.
 */

.ceide-popup-trigger:focus {
    outline: 2px solid #1a73aa;
    outline-offset: 2px;
}


/* =========================================================
   OCULTAR EL CONTENIDO ORIGINAL
   ========================================================= */

#inline_content,
#inline_cita {
    display: none;
}


/* =========================================================
   FONDO OSCURO
   ========================================================= */

.ceide-popup-overlay {
    position: fixed;
    inset: 0;

    z-index: 999999;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    padding: 30px;

    background: rgba(0, 0, 0, 0.72);

    opacity: 0;
    visibility: hidden;

    box-sizing: border-box;

    transition:
        opacity 0.20s ease,
        visibility 0.20s ease;
}


/*
 * Popup abierto.
 */

.ceide-popup-overlay.ceide-popup-open {
    opacity: 1;
    visibility: visible;
}


/* =========================================================
   CONTENEDOR DE LA VENTANA
   ========================================================= */

.ceide-popup-window {
    position: relative;

    width: 100%;

    max-width: 850px;

    /*
     * Evitamos que la ventana sea más alta que
     * la pantalla.
     */

    max-height: 90vh;

    background: #ffffff;

    border: 1px solid rgba(0, 0, 0, 0.10);

    border-radius: 4px;

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.35),
        0 4px 15px rgba(0, 0, 0, 0.15);

    overflow: hidden;

    box-sizing: border-box;

    /*
     * Estado inicial de la animación.
     */

    transform:
        translateY(15px)
        scale(0.985);

    transition:
        transform 0.20s ease;
}


/*
 * Estado abierto.
 */

.ceide-popup-overlay.ceide-popup-open
.ceide-popup-window {

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   CONTENIDO
   ========================================================= */

.ceide-popup-content {

    position: relative;

    width: 100%;

    max-height: 90vh;

    overflow-y: auto;
    overflow-x: hidden;

    padding: 30px 40px 35px;

    box-sizing: border-box;

    /*
     * Scroll suave en dispositivos táctiles.
     */

    -webkit-overflow-scrolling: touch;

    /*
     * Evita problemas con contenido muy largo.
     */

    overflow-wrap: break-word;
}


/*
 * Contenido de autores.
 */

.ceide-popup-content.autorVentana {
    overflow-y: auto;
}


/* =========================================================
   TIPOGRAFÍA DEL CONTENIDO
   ========================================================= */

/*
 * Evitar que los párrafos queden pegados.
 */

.ceide-popup-content p {
    margin-top: 0;
    margin-bottom: 1em;
}


/*
 * El último párrafo no necesita margen inferior.
 */

.ceide-popup-content p:last-child {
    margin-bottom: 0;
}


/*
 * Los enlaces dentro del popup.
 */

.ceide-popup-content a {
    word-break: break-word;
}


/* =========================================================
   BOTÓN CERRAR
   ========================================================= */

.ceide-popup-close {

    position: absolute;

    top: 8px;
    right: 10px;

    z-index: 10;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    padding: 0;
    margin: 0;

    border: 0;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.90);

    color: #555555;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 30px;

    font-weight: 300;

    line-height: 1;

    text-align: center;

    cursor: pointer;

    opacity: 0.80;

    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.12);

    transition:
        color 0.15s ease,
        background 0.15s ease,
        opacity 0.15s ease,
        transform 0.15s ease;
}


/*
 * Hover.
 */

.ceide-popup-close:hover {

    color: #000000;

    background: #ffffff;

    opacity: 1;

    transform: scale(1.05);
}


/*
 * Focus por teclado.
 */

.ceide-popup-close:focus {

    color: #000000;

    background: #ffffff;

    opacity: 1;

    outline:
        2px solid #1a73aa;

    outline-offset: 2px;
}


/*
 * Evitar que algún estilo del tema
 * convierta el botón en un botón enorme.
 */

.ceide-popup-close::before,
.ceide-popup-close::after {
    box-sizing: border-box;
}


/* =========================================================
   BLOQUEAR SCROLL DEL SITIO
   ========================================================= */

body.ceide-popup-is-open {
    overflow: hidden;
}


/*
 * Algunos temas utilizan html para controlar el scroll.
 */

html:has(body.ceide-popup-is-open) {
    overflow: hidden;
}


/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width: 768px) {

    .ceide-popup-overlay {

        padding: 15px;

    }


    .ceide-popup-window {

        max-width: 100%;

        max-height: 94vh;

        border-radius: 4px;

    }


    .ceide-popup-content {

        max-height: 94vh;

        padding:
            28px
            24px
            28px;

    }


    .ceide-popup-close {

        top: 6px;
        right: 7px;

        width: 38px;
        height: 38px;

        font-size: 28px;

    }

}


/* =========================================================
   RESPONSIVE — TELÉFONO
   ========================================================= */

@media (max-width: 480px) {

    .ceide-popup-overlay {

        padding: 8px;

    }


    .ceide-popup-window {

        max-height: 96vh;

        border-radius: 3px;

    }


    .ceide-popup-content {

        max-height: 96vh;

        padding:
            28px
            17px
            22px;

    }


    .ceide-popup-close {

        top: 5px;
        right: 5px;

        width: 36px;
        height: 36px;

        font-size: 27px;

    }

}


/* =========================================================
   PANTALLAS MUY PEQUEÑAS
   ========================================================= */

@media (max-width: 360px) {

    .ceide-popup-overlay {

        padding: 5px;

    }


    .ceide-popup-content {

        padding:
            27px
            14px
            18px;

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ceide-popup-overlay,
    .ceide-popup-window,
    .ceide-popup-close {

        transition: none;

    }
}