/**
 * ============================================================================
 *  idioma.css
 * ----------------------------------------------------------------------------
 *  Estilos del selector de idioma flotante (ES/EN) de superandoeducando.com.
 *  Se ubica en la esquina inferior DERECHA a proposito, para no superponerse
 *  con el boton de accesibilidad (assets/css/accesibilidad.css), que vive en
 *  la esquina inferior izquierda.
 * ============================================================================
 */

#idioma-toggle-btn {
    position: fixed;
    right: 20px;
    /* FIX 2026-09-17 (reporte de Jorge): el widget de WhatsApp (embed.min.js,
       ver index.php) se ubica exactamente en right:20px/bottom:20px con
       z-index:999999 — mucho mas alto que cualquier boton nuestro. Si el
       selector de idioma se coloca en esa misma esquina, el burbuja de
       WhatsApp lo tapa por completo y queda "invisible"/inhallable. Por eso
       se sube por encima de esa burbuja en TODAS las resoluciones (antes
       solo se subia en movil vía media query, y en escritorio quedaba
       tapado, que es justo el caso que se reporto). */
    bottom: 90px;
    min-width: 64px;
    height: 44px;
    padding: 0 14px;
    border-radius: 22px;
    background: #0a3d62;
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    z-index: 999997;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    font-size: 15px;
    font-weight: 700;
    font-family: Arial, Helvetica, sans-serif;
}
#idioma-toggle-btn:hover,
#idioma-toggle-btn:focus {
    background: #0d4e7d;
    outline: 3px solid #ffcc00;
    outline-offset: 2px;
}

#idioma-panel {
    position: fixed;
    right: 20px;
    bottom: 142px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    z-index: 999997;
    display: none;
    overflow: hidden;
    min-width: 160px;
    font-family: Arial, Helvetica, sans-serif;
}
#idioma-panel.idioma-panel-abierto {
    display: block;
}

.idioma-opcion {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 16px;
    background: #fff;
    border: none;
    border-bottom: 1px solid #eef0f2;
    cursor: pointer;
    font-size: 14px;
    color: #1a1a1a;
}
.idioma-opcion:last-child {
    border-bottom: none;
}
.idioma-opcion:hover,
.idioma-opcion:focus {
    background: #f1f3f5;
    outline: 2px solid #0a3d62;
    outline-offset: -2px;
}
.idioma-opcion[aria-pressed="true"] {
    background: #0a3d62;
    color: #fff;
    font-weight: 700;
}