/* =====================================================
   COMEX RYD - idiomas.css
   Selector de idioma (arriba a la derecha)
   ===================================================== */

.selector-idioma{
    position:fixed;
    top:18px;
    right:24px;
    z-index:10000;
    font-family:'Montserrat',sans-serif;
}

.selector-idioma-boton{
    display:flex;
    align-items:center;
    gap:8px;

    padding:8px 14px;

    border:1px solid rgba(255,255,255,.28);
    border-radius:999px;

    background:rgba(15,23,42,.65);
    color:#ffffff;

    font-size:.85rem;
    font-weight:600;
    letter-spacing:1px;

    cursor:pointer;

    backdrop-filter:blur(8px);
    box-shadow:0 8px 24px rgba(0,0,0,.25);

    transition:.25s ease;
}

.selector-idioma-boton:hover{
    border-color:#F57C00;
    color:#F57C00;
}

.selector-idioma-bandera{
    font-size:1.15rem;
    line-height:1;
}

.selector-idioma-flecha{
    font-size:.65rem;
    opacity:.8;
}

.selector-idioma-lista{
    position:absolute;
    top:calc(100% + 8px);
    right:0;

    min-width:170px;

    list-style:none;
    margin:0;
    padding:6px;

    border:1px solid rgba(255,255,255,.18);
    border-radius:14px;

    background:rgba(15,23,42,.95);

    box-shadow:0 16px 40px rgba(0,0,0,.35);

    display:none;
}

.selector-idioma.abierto .selector-idioma-lista{
    display:block;
}

.selector-idioma-lista button{
    width:100%;

    display:flex;
    align-items:center;
    gap:10px;

    padding:10px 12px;

    border:0;
    border-radius:10px;

    background:transparent;
    color:#ffffff;

    font-family:inherit;
    font-size:.85rem;
    font-weight:600;

    cursor:pointer;

    transition:.2s ease;
}

.selector-idioma-lista button:hover{
    background:rgba(245,124,0,.22);
    color:#F57C00;
}

.selector-idioma-lista button.activo{
    background:rgba(245,124,0,.30);
    color:#ffffff;
}

/* Tema claro */
html.tema-claro .selector-idioma-boton{
    background:#ffffff;
    color:#0b1220;
    border-color:rgba(11,18,32,.15);
}

html.tema-claro .selector-idioma-lista{
    background:#ffffff;
    border-color:rgba(11,18,32,.12);
}

html.tema-claro .selector-idioma-lista button{
    color:#0b1220;
}

@media(max-width:700px){

    .selector-idioma{
        top:12px;
        right:12px;
    }

    .selector-idioma-boton{
        padding:6px 10px;
        font-size:.75rem;
    }

}

.selector-idioma-bandera svg{
    display:block;
    border-radius:3px;
    box-shadow:0 0 0 1px rgba(0,0,0,.15);
}