/* =====================================================
   REDPRO — MENÚ GLOBAL
===================================================== */

:root {
    --redpro-menu-abierto: 20%;
    --redpro-menu-cerrado: 72px;
    --redpro-menu-movil: 330px;
    --redpro-transicion: 0.3s ease;
    --redpro-azul: #0d2b61;
}


/* =====================================================
   CONFIGURACIÓN GENERAL
===================================================== */

#contenedor_global,
#contenedor_global > .e-con-inner {
    overflow: visible !important;
}

#contenedor_lateral,
#contenedor_lateral *,
#redpro_toggle_menu,
#redpro_popup_cerrar,
#redpro_popup_overlay {
    box-sizing: border-box !important;
}


/* =====================================================
   ESCRITORIO
===================================================== */

@media (min-width: 768px) {

    /*
     * Padre real que contiene:
     * - menú lateral
     * - contenido principal
     */
    .redpro-layout {
        display: grid !important;

        grid-template-columns:
            var(--redpro-menu-abierto)
            minmax(0, 1fr) !important;

        align-items: start !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 0 !important;
        column-gap: 0 !important;
        row-gap: 0 !important;

        overflow: visible !important;

        transition:
            grid-template-columns
            var(--redpro-transicion) !important;
    }


    /*
     * Menú comprimido:
     * pasa de 20% a 72px.
     */
    .redpro-layout.redpro-layout-cerrado {
        grid-template-columns:
            var(--redpro-menu-cerrado)
            minmax(0, 1fr) !important;
    }


    /*
     * Permitir que el contenido ocupe
     * todo el espacio restante.
     */
    .redpro-layout > :not(#contenedor_lateral) {
        min-width: 0 !important;
        max-width: 100% !important;
    }


    /* =================================================
       CONTENEDOR LATERAL
    ================================================= */

    .redpro-layout > #contenedor_lateral {
        position: sticky !important;

        top: 0 !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        align-self: start !important;

        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        height: 100vh !important;
        min-height: 100vh !important;
        max-height: 100vh !important;

        margin: 0 !important;

        overflow: visible !important;

        transform: none !important;
        translate: none !important;

        z-index: 10 !important;
    }
}


/* =====================================================
   ESTRUCTURA INTERNA
===================================================== */

#padre_menu {
    flex: 1 1 auto !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

#menu_lateral {
    width: 100% !important;
    min-width: 0 !important;

    overflow: hidden !important;
}

#fotomenu {
    flex: 0 0 auto !important;
}


/* =====================================================
   LOGO EN ESCRITORIO
===================================================== */

#logo_lateral,
#logo_lateral img {
    transition:
        width var(--redpro-transicion),
        max-width var(--redpro-transicion),
        margin var(--redpro-transicion),
        padding var(--redpro-transicion) !important;
}


/* Logo al comprimir */

@media (min-width: 768px) {

    #contenedor_lateral.redpro-menu-cerrado
    #logo_lateral {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    #contenedor_lateral.redpro-menu-cerrado
    #logo_lateral img {
        display: block !important;

        width: 48px !important;
        max-width: 48px !important;
        height: auto !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* =====================================================
   MENÚ COMPRIMIDO EN ESCRITORIO
===================================================== */

@media (min-width: 768px) {

    /* Ocultar textos */

    #contenedor_lateral.redpro-menu-cerrado
    #menu_lateral .elementor-icon-list-text,

    #contenedor_lateral.redpro-menu-cerrado
    #menu_lateral .e-n-menu-title-text,

    #contenedor_lateral.redpro-menu-cerrado
    #menu_lateral .menu-item-text,

    #contenedor_lateral.redpro-menu-cerrado
    #menu_lateral .menu-text,

    #contenedor_lateral.redpro-menu-cerrado
    #menu_lateral .item-text,

    #contenedor_lateral.redpro-menu-cerrado
    #menu_lateral .jet-menu-label,

    #contenedor_lateral.redpro-menu-cerrado
    #menu_lateral .ue_menu_text {
        display: none !important;

        width: 0 !important;
        max-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        opacity: 0 !important;
        visibility: hidden !important;
        overflow: hidden !important;
    }


    /* Centrar opciones */

    #contenedor_lateral.redpro-menu-cerrado
    #menu_lateral .elementor-icon-list-item {
        display: flex !important;
        justify-content: center !important;

        width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #contenedor_lateral.redpro-menu-cerrado
    #menu_lateral .elementor-icon-list-item > a,

    #contenedor_lateral.redpro-menu-cerrado
    #menu_lateral .elementor-icon-list-item > span {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;

        gap: 0 !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    /* Menú de navegación clásico */

    #contenedor_lateral.redpro-menu-cerrado
    #menu_lateral .elementor-nav-menu,

    #contenedor_lateral.redpro-menu-cerrado
    #menu_lateral .elementor-nav-menu li {
        width: 100% !important;
    }

    #contenedor_lateral.redpro-menu-cerrado
    #menu_lateral .elementor-nav-menu a.elementor-item {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;

        padding-left: 8px !important;
        padding-right: 8px !important;

        gap: 0 !important;

        font-size: 0 !important;

        overflow: hidden !important;
        white-space: nowrap !important;
    }


    /* Tamaño de iconos */

    #contenedor_lateral.redpro-menu-cerrado
    #menu_lateral .elementor-icon-list-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 24px !important;
        min-width: 24px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    #contenedor_lateral.redpro-menu-cerrado
    #menu_lateral i {
        font-size: 20px !important;
    }

    #contenedor_lateral.redpro-menu-cerrado
    #menu_lateral svg {
        width: 20px !important;
        height: 20px !important;
    }


    /* Ocultar fotomenu */

    #contenedor_lateral.redpro-menu-cerrado
    #fotomenu {
        display: none !important;

        width: 0 !important;
        height: 0 !important;
        max-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}


/* =====================================================
   FLECHA DE ESCRITORIO
===================================================== */

#redpro_toggle_menu {
    position: absolute !important;

    top: 54px !important;
    right: -14px !important;

    /*
     * Índice alto para que siempre quede
     * por encima del contenido.
     */
    z-index: 999999 !important;

    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;

    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 1px solid #d7dde7 !important;
    border-radius: 50% !important;

    background: #ffffff !important;
    color: var(--redpro-azul) !important;

    cursor: pointer !important;

    line-height: 1 !important;

    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.2) !important;
}

#redpro_toggle_menu:hover {
    background: #f4f6fa !important;

    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

#redpro_toggle_menu:focus-visible {
    outline: 2px solid #00d9cb !important;
    outline-offset: 2px !important;
}

#redpro_toggle_menu svg {
    display: block !important;

    width: 15px !important;
    height: 15px !important;

    margin: 0 !important;
    padding: 0 !important;

    transition:
        transform var(--redpro-transicion) !important;
}

#contenedor_lateral.redpro-menu-cerrado
#redpro_toggle_menu svg {
    transform: rotate(180deg) !important;
}


/* =====================================================
   ELEMENTOS MÓVILES OCULTOS EN ESCRITORIO
===================================================== */

#redpro_popup_overlay,
#redpro_popup_cerrar {
    display: none;
}


/* =====================================================
   POPUP MÓVIL
===================================================== */

@media (max-width: 767px) {

    /*
     * El contenido principal ocupa todo el ancho.
     */
    .redpro-layout {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 0 !important;
    }

    .redpro-layout > :not(#contenedor_lateral) {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }


    /* Ocultar flecha de escritorio */

    #redpro_toggle_menu {
        display: none !important;
    }


    /* =================================================
       PANEL LATERAL
    ================================================= */

    #contenedor_lateral {
        position: fixed !important;

        top: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        left: 0 !important;

        z-index: 1000002 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        width: min(86vw, var(--redpro-menu-movil)) !important;
        min-width: min(86vw, var(--redpro-menu-movil)) !important;
        max-width: min(86vw, var(--redpro-menu-movil)) !important;

        height: 100vh !important;
        height: 100dvh !important;

        min-height: 100vh !important;
        min-height: 100dvh !important;

        max-height: 100vh !important;
        max-height: 100dvh !important;

        margin: 0 !important;

        background-color: var(--redpro-azul) !important;

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

        transform: translateX(-105%) !important;
        translate: none !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        box-shadow:
            8px 0 28px rgba(0, 0, 0, 0.32) !important;

        transition:
            transform var(--redpro-transicion),
            opacity 0.2s ease,
            visibility var(--redpro-transicion) !important;

        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }


    /* Popup abierto */

    body.redpro-popup-menu-abierto
    #contenedor_lateral {
        transform: translateX(0) !important;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }


    /* =================================================
       PADRE DEL MENÚ EN MÓVIL
    ================================================= */

    #contenedor_lateral #padre_menu {
        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;

        overflow: visible !important;
    }


    /* =================================================
       LOGO 30% MÁS PEQUEÑO
    ================================================= */

    #contenedor_lateral #logo_lateral {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    #contenedor_lateral #logo_lateral a,
    #contenedor_lateral #logo_lateral .elementor-widget-container {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
    }

    #contenedor_lateral #logo_lateral img {
        display: block !important;

        /*
         * 70% equivale a reducirlo un 30%.
         */
        width: 70% !important;
        max-width: 70% !important;
        height: auto !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* =================================================
       TEXTOS E ICONOS BLANCOS
    ================================================= */

    #contenedor_lateral #menu_lateral,
    #contenedor_lateral #menu_lateral a,
    #contenedor_lateral #menu_lateral span,
    #contenedor_lateral #menu_lateral i,
    #contenedor_lateral #menu_lateral .elementor-icon-list-text,
    #contenedor_lateral #menu_lateral .elementor-icon-list-icon,
    #contenedor_lateral #menu_lateral .elementor-item,
    #contenedor_lateral #menu_lateral .menu-item-text,
    #contenedor_lateral #menu_lateral .menu-text,
    #contenedor_lateral #menu_lateral .item-text {
        color: #ffffff !important;
    }

    #contenedor_lateral
    #menu_lateral svg {
        color: #ffffff !important;
    }

    #contenedor_lateral
    #menu_lateral svg [fill]:not([fill="none"]) {
        fill: currentColor !important;
    }

    #contenedor_lateral
    #menu_lateral svg [stroke] {
        stroke: currentColor !important;
    }


    /* Quitar subrayados */

    #contenedor_lateral #menu_lateral a {
        text-decoration: none !important;
    }


    /* =================================================
       MOSTRAR TODOS LOS TEXTOS
    ================================================= */

    #contenedor_lateral
    #menu_lateral .elementor-icon-list-text,

    #contenedor_lateral
    #menu_lateral .e-n-menu-title-text,

    #contenedor_lateral
    #menu_lateral .menu-item-text,

    #contenedor_lateral
    #menu_lateral .menu-text,

    #contenedor_lateral
    #menu_lateral .item-text,

    #contenedor_lateral
    #menu_lateral .jet-menu-label,

    #contenedor_lateral
    #menu_lateral .ue_menu_text {
        display: inline-block !important;

        width: auto !important;
        max-width: none !important;

        margin: initial !important;
        padding: initial !important;

        font-size: inherit !important;

        color: #ffffff !important;

        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
    }


    /* =================================================
       CADA OPCIÓN REDONDEADA A 5PX
    ================================================= */

    #contenedor_lateral
    #menu_lateral .elementor-icon-list-item > a,

    #contenedor_lateral
    #menu_lateral .elementor-icon-list-item > span,

    #contenedor_lateral
    #menu_lateral .elementor-nav-menu a.elementor-item,

    #contenedor_lateral
    #menu_lateral li > a {
        border-radius: 5px !important;
    }


    /* Restaurar alineación normal */

    #contenedor_lateral
    #menu_lateral .elementor-icon-list-item {
        justify-content: flex-start !important;

        width: 100% !important;
    }

    #contenedor_lateral
    #menu_lateral .elementor-icon-list-item > a,

    #contenedor_lateral
    #menu_lateral .elementor-icon-list-item > span {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        width: 100% !important;

        gap: initial !important;
    }

    #contenedor_lateral
    #menu_lateral .elementor-nav-menu a.elementor-item {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        width: 100% !important;

        font-size: inherit !important;

        gap: initial !important;
    }


    /* =================================================
       FOTOMENU VISIBLE
    ================================================= */

    #contenedor_lateral #fotomenu {
        display: flex !important;

        width: auto !important;
        height: auto !important;
        max-height: none !important;

        margin: initial !important;
        padding: initial !important;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }


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

    #redpro_popup_cerrar {
        position: absolute !important;

        top: 14px !important;
        right: 14px !important;

        z-index: 1000005 !important;

        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;

        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 0 !important;
        margin: 0 !important;

        border: 1px solid rgba(255, 255, 255, 0.45) !important;
        border-radius: 50% !important;

        background: rgba(0, 0, 0, 0.2) !important;
        color: #ffffff !important;

        font-family: Arial, sans-serif !important;
        font-size: 25px !important;
        font-weight: 300 !important;
        line-height: 1 !important;

        cursor: pointer !important;

        box-shadow:
            0 3px 10px rgba(0, 0, 0, 0.18) !important;
    }


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

    #redpro_popup_overlay {
        position: fixed !important;

        inset: 0 !important;

        z-index: 1000001 !important;

        display: block !important;

        width: 100% !important;
        height: 100% !important;

        padding: 0 !important;
        margin: 0 !important;

        border: 0 !important;

        background: rgba(0, 0, 0, 0.52) !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        cursor: pointer !important;

        transition:
            opacity 0.25s ease,
            visibility 0.25s ease !important;
    }

    body.redpro-popup-menu-abierto
    #redpro_popup_overlay {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }


    /* Bloquear desplazamiento detrás */

    body.redpro-popup-menu-abierto {
        overflow: hidden !important;
    }


    /* Barra de WordPress */

    body.admin-bar #contenedor_lateral {
        top: 46px !important;

        height: calc(100dvh - 46px) !important;
        min-height: calc(100dvh - 46px) !important;
        max-height: calc(100dvh - 46px) !important;
    }
}


/* =====================================================
   BARRA DE WORDPRESS EN ESCRITORIO
===================================================== */

@media (min-width: 783px) {

    body.admin-bar
    .redpro-layout > #contenedor_lateral {
        top: 32px !important;

        height: calc(100vh - 32px) !important;
        min-height: calc(100vh - 32px) !important;
        max-height: calc(100vh - 32px) !important;
    }
}