/* ==========================================================
   RIICACID i18n v1.3.0
   Selector ES/EN + banderas + corrección del menú Sitejet
   ========================================================== */


/* ==========================================================
   SELECTOR DE IDIOMA
   ========================================================== */

.riicacid-lang-item {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
}


#riicacid-language-switcher {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 6px 8px;

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

    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 8px;

    white-space: nowrap;

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


/* ==========================================================
   BOTONES
   ========================================================== */

.riicacid-lang-btn {
    appearance: none;
    -webkit-appearance: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    min-height: 35px;

    padding: 6px 10px;

    background: transparent;

    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 6px;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;

    opacity: 0.90;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        opacity 0.2s ease,
        transform 0.2s ease;
}


.riicacid-lang-btn:hover,
.riicacid-lang-btn:focus-visible {
    opacity: 1;

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

    border-color: #ffffff;

    transform: translateY(-1px);

    outline: none;
}


.riicacid-lang-btn[aria-pressed="true"] {
    opacity: 1;

    background: #ffffff;

    color: #184d8d;

    border-color: #ffffff;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);

    text-decoration: none;
}


.riicacid-lang-separator {
    display: none !important;
}


/* Texto para lectores de pantalla */

.riicacid-lang-status {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* ==========================================================
   BANDERAS REALES MEDIANTE SVG INTERNO
   No dependen de emojis ni de archivos externos
   ========================================================== */

.riicacid-lang-btn::before {
    content: "";

    display: inline-block;

    flex: 0 0 auto;

    width: 30px;
    height: 20px;

    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;

    border-radius: 2px;

    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.55),
        0 1px 3px rgba(0, 0, 0, 0.25);
}


/* España */

.riicacid-lang-btn[data-lang="es"]::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath fill='%23AA151B' d='M0 0h3v2H0z'/%3E%3Cpath fill='%23F1BF00' d='M0 .5h3v1H0z'/%3E%3C/svg%3E");
}


/* Reino Unido */

.riicacid-lang-btn[data-lang="en"]::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Cpath fill='%23012169' d='M0 0h60v30H0z'/%3E%3Cpath stroke='%23FFF' stroke-width='6' d='M0 0l60 30M60 0L0 30'/%3E%3Cpath stroke='%23C8102E' stroke-width='3.5' d='M0 0l60 30M60 0L0 30'/%3E%3Cpath stroke='%23FFF' stroke-width='10' d='M30 0v30M0 15h60'/%3E%3Cpath stroke='%23C8102E' stroke-width='6' d='M30 0v30M0 15h60'/%3E%3C/svg%3E");
}


/* ==========================================================
   MODO FLOTANTE
   Solo se usa si JavaScript no encuentra el menú
   ========================================================== */

#riicacid-language-switcher.riicacid-lang-switcher--floating {
    position: fixed;

    top: 14px;
    right: 14px;

    z-index: 1000000;

    background: rgba(24, 77, 141, 0.97);

    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
}


/* ==========================================================
   ESCRITORIO
   Sitejet limitaba el header a 61rem (~976 px).
   Aquí ampliamos solamente el encabezado.
   ========================================================== */

@media screen and (min-width: 61rem) {

    /*
       Header completo.
       1200 px máximo pero adaptable a pantallas menores.
    */

    .ed-element.menu-wrapper.wv-boxed > .inner {

        width: calc(100% - 32px) !important;

        max-width: 1200px !important;

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

        padding:
            12px
            16px
            10px
            16px
            !important;

        position: relative !important;

        display: flex !important;
        flex-wrap: wrap !important;

        align-items: center !important;

        justify-content: flex-start !important;
    }


    /*
       Logo.
    */

    .ed-element.menu-wrapper > .inner > .ed-logo {

        flex: 0 0 auto !important;

        margin-right: auto !important;
    }


    /*
       Navegación ocupa una segunda línea completa.
    */

    .ed-element.menu-wrapper > .inner > nav.ed-menu {

        flex: 0 0 100% !important;

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

        min-width: 0 !important;

        margin-top: 4px !important;

        position: static !important;

        overflow: visible !important;
    }


    /*
       Lista principal.
    */

    .ed-element.menu-wrapper
    nav.ed-menu > ul.menu-level-0 {

        display: flex !important;

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

        align-items: center !important;

        justify-content: space-between !important;

        flex-wrap: nowrap !important;

        gap: 0 !important;

        margin: 0 !important;

        padding: 0 2px !important;

        position: static !important;

        text-align: center !important;
    }


    /*
       Eliminar márgenes originales de Sitejet.
    */

    .ed-element.menu-wrapper
    nav.ed-menu > ul.menu-level-0 > li {

        flex: 0 1 auto !important;

        min-width: 0 !important;

        margin: 0 !important;

        padding: 0 !important;
    }


    .ed-element.menu-wrapper
    nav.ed-menu > ul.menu-level-0 > li:not(:last-child) {

        margin-right: 0 !important;
        margin-bottom: 0 !important;
    }


    /*
       Enlaces.
       Sitejet tenía 1rem a cada lado y 1.1rem de fuente.
       Esto era excesivo para ocho opciones.
    */

    .ed-element.menu-wrapper
    nav.ed-menu > ul.menu-level-0
    > li:not(.riicacid-lang-item)
    > a:not(.button) {

        display: block !important;

        padding:
            10px
            clamp(5px, 0.65vw, 10px)
            !important;

        font-size:
            clamp(13px, 1.05vw, 16px)
            !important;

        line-height: 1.15 !important;

        letter-spacing: 0.4px !important;

        white-space: nowrap !important;
    }


    /*
       Sacamos ES/EN del flujo del menú y lo situamos
       en la esquina superior derecha del header.
    */

    .ed-element.menu-wrapper
    .riicacid-lang-item {

        position: absolute !important;

        top: 18px !important;
        right: 16px !important;

        z-index: 100 !important;

        width: auto !important;

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

}


/* ==========================================================
   PORTÁTILES ENTRE 976 Y 1200 PX
   ========================================================== */

@media screen and (min-width: 61rem) and (max-width: 75rem) {

    .ed-element.menu-wrapper.wv-boxed > .inner {

        width: calc(100% - 20px) !important;

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


    .ed-element.menu-wrapper
    nav.ed-menu > ul.menu-level-0
    > li:not(.riicacid-lang-item)
    > a:not(.button) {

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

        font-size: 13px !important;

        letter-spacing: 0.2px !important;
    }


    .riicacid-lang-btn {

        min-height: 32px;

        padding: 5px 7px;

        font-size: 14px;
    }


    .riicacid-lang-btn::before {

        width: 26px;
        height: 17px;
    }

}


/* ==========================================================
   TABLET Y MÓVIL
   Dejamos trabajar el menú hamburguesa de Sitejet.
   ========================================================== */

@media screen and (max-width: 60.9375rem) {

    .riicacid-lang-item {

        position: static !important;

        display: flex !important;

        width: 100% !important;

        justify-content: center !important;

        margin-top: 12px !important;
        margin-bottom: 8px !important;
    }


    #riicacid-language-switcher {

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


    .riicacid-lang-btn {

        min-height: 34px;

        padding: 6px 9px;

        font-size: 15px;
    }


    .riicacid-lang-btn::before {

        width: 28px;
        height: 19px;
    }

}