/* Selector de idioma del menú del usuario.
   Los estilos vivían EN LÍNEA dentro de `i18n.js` (una cadena de ~600
   caracteres por enlace). Aquí se leen, se pueden tematizar con las
   variables del sistema y dejan de repetirse en cada repintado del menú. */
.i18n-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 18px;
    font-weight: 500;
    font-size: 13.5px;
    color: inherit;
}
.i18n-selector > span:first-child { display: flex; align-items: center; gap: 12px; }
.i18n-selector .fa-globe { width: 20px; text-align: center; font-size: 15px; opacity: .6; }
.i18n-opciones { display: flex; gap: 8px; flex: none; }
/* `display:inline-block` explícito: `.dropdown-content a { display:flex }`
   apilaría ES sobre EN. */
.i18n-opciones a {
    display: inline-block;
    min-width: 40px;
    min-height: 36px;
    padding: 7px 12px;
    line-height: 22px;
    text-align: center;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    background: var(--primary-soft, #eef1fd);
    color: var(--primary, #4e73df);
}
.i18n-opciones a:hover { filter: brightness(.96); }
.i18n-opciones a:focus-visible { outline: 2px solid var(--primary, #4e73df); outline-offset: 2px; }
.i18n-opciones a.i18n-activo {
    background: var(--primary, #4e73df);
    color: #fff;
    font-weight: 800;
}