/*
* Descripción: Selector de idioma del sistema (Core/Views/Components/selector_idioma.php) en sus 4 estilos: banderas,
* desplegable, globo con menú y texto. Solo tokens del tema: cambia de color con el tema elegido. Panel e inicio de sesión.
*/
.nx-idioma-sel { display: inline-flex; align-items: center; font-size: .85rem; }

/* Banderas */
.nx-idioma-banderas { display: inline-flex; align-items: center; gap: 6px; }
.nx-idioma-banderas > button, .nx-idioma-banderas > a { display: inline-flex; padding: 2px; border-radius: 5px; border: 1px solid transparent; background: transparent;
    cursor: pointer; opacity: .55; transition: opacity .15s ease, transform .15s ease, box-shadow .15s ease; }
.nx-idioma-banderas > :hover { opacity: 1; transform: translateY(-1px); }
.nx-idioma-banderas > .is-active { opacity: 1; border-color: var(--nx-primary); box-shadow: 0 2px 8px color-mix(in srgb, var(--nx-primary) 25%, transparent); cursor: default; }
.nx-idioma-sel img { display: block; width: 20px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px var(--nx-border); }

/* Lista desplegable */
.nx-idioma-lista { position: relative; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0 8px 0 10px; border-radius: 999px;
    border: 1px solid var(--nx-primary-border); background: var(--nx-primary-soft); color: var(--nx-primary-strong, var(--nx-primary)); }
.nx-idioma-lista select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 600;
    padding: 6px 18px 6px 0; cursor: pointer; }
.nx-idioma-lista::after { content: "\F282"; font-family: bootstrap-icons; position: absolute; right: 10px; font-size: .7rem; pointer-events: none; }
.nx-idioma-lista select option { color: var(--nx-text); background: var(--nx-surface); }

/* Globo con menú */
.nx-idioma-menu { position: relative; }
.nx-idioma-menu > summary { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; cursor: pointer; list-style: none; font-weight: 700;
    border: 1px solid var(--nx-primary-border); background: var(--nx-primary-soft); color: var(--nx-primary-strong, var(--nx-primary)); transition: box-shadow .2s ease; }
.nx-idioma-menu > summary::-webkit-details-marker { display: none; }
.nx-idioma-menu > summary:hover, .nx-idioma-menu[open] > summary { box-shadow: 0 4px 12px color-mix(in srgb, var(--nx-primary) 22%, transparent); }
.nx-idioma-menu .nx-flecha { font-size: .65rem; transition: transform .2s ease; }
.nx-idioma-menu[open] .nx-flecha { transform: rotate(180deg); }
.nx-idioma-menu-lista { position: absolute; z-index: 1200; top: calc(100% + 8px); right: 0; min-width: 190px; padding: 6px; border-radius: 12px;
    background: var(--nx-surface); border: 1px solid var(--nx-border);
    box-shadow: 0 16px 36px color-mix(in srgb, var(--nx-text-strong, var(--nx-text)) 18%, transparent); animation: nx-idioma-entra .18s ease-out; }
@keyframes nx-idioma-entra { from { opacity: 0; transform: translateY(-6px); } }
.nx-idioma-menu-lista > button, .nx-idioma-menu-lista > a { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px;
    background: transparent; color: var(--nx-text); text-decoration: none; font: inherit; text-align: left; cursor: pointer; }
.nx-idioma-menu-lista > :hover { background: var(--nx-surface-2); }
.nx-idioma-menu-lista > .is-active { background: var(--nx-primary-soft); color: var(--nx-primary-strong, var(--nx-primary)); font-weight: 700; cursor: default; }
.nx-idioma-menu-lista span { flex: 1; }

/* Texto ES · EN */
.nx-idioma-texto { display: inline-flex; align-items: center; gap: 4px; letter-spacing: .06em; }
.nx-idioma-texto > button, .nx-idioma-texto > a { border: 0; border-bottom: 2px solid transparent; background: transparent; padding: 2px 3px; font: inherit; font-weight: 700;
    color: var(--nx-text-muted); text-decoration: none; cursor: pointer; }
.nx-idioma-texto > :hover { color: var(--nx-text); }
.nx-idioma-texto > .is-active { color: var(--nx-primary-strong, var(--nx-primary)); border-bottom-color: var(--nx-primary); cursor: default; }
.nx-idioma-texto > span { color: var(--nx-text-muted); opacity: .6; }

.nx-idioma-sel :focus-visible { outline: 2px solid var(--nx-primary); outline-offset: 2px; }