/* LinguaLayer selector — drawer pegado al borde + ocultar bottom-nav app */

/* ─── Twemoji Country Flags (Chrome/Windows) */
@font-face {
    font-family: "Twemoji Country Flags";
    unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E007F;
    src: url("https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1/dist/TwemojiCountryFlags.woff2") format("woff2");
    font-display: swap;
}

/* ═════════════════════════════════════════════════════════════
   SELECTOR DE IDIOMAS — comportamiento "drawer" desde el borde
   - Colapsado: pill pegado al borde, solo se ve la bandera
   - Expandido: pill se desliza al interior mostrando todas las banderas
   ═════════════════════════════════════════════════════════════ */
#lingua-selector {
    position: fixed !important;
    z-index: 9990 !important;
    font-family: "Twemoji Country Flags", "Apple Color Emoji",
                 "Segoe UI Emoji", "Segoe UI", system-ui, sans-serif !important;
    background: rgba(255,255,255,.85) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0,0,0,.10) !important;
    box-shadow: -4px 4px 14px rgba(0,0,0,.18) !important;
    cursor: pointer;
    transition: right .35s cubic-bezier(.2,.8,.3,1),
                padding .25s ease,
                border-radius .25s ease,
                opacity .2s ease;
}
#lingua-selector button {
    font-family: inherit !important;
    background: none !important;
    border: none !important;
    cursor: pointer;
    line-height: 1;
}

/* ── COLAPSADO: pegado al borde derecho, solo bandera activa ── */
#lingua-selector:not(.expanded) {
    /* Pegado al borde derecho — esquina izquierda redondeada, derecha plana */
    right: 0 !important;
    border-radius: 14px 0 0 14px !important;
    padding: 6px 8px 6px 10px !important;
    opacity: .82;
    /* Quitamos el borde derecho para que se funda con el borde de la pantalla */
    border-right: 0 !important;
}
#lingua-selector:not(.expanded):hover {
    opacity: 1;
    padding-right: 14px !important;
}
#lingua-selector:not(.expanded) button[data-lingua-active="false"] {
    display: none !important;
}
#lingua-selector:not(.expanded) button[data-lingua-active="true"] {
    opacity: 1 !important;
    transform: scale(1) !important;
    font-size: 22px !important;
    padding: 0 2px !important;
}

/* ── EXPANDIDO: pill flotante, separado del borde ── */
#lingua-selector.expanded {
    right: 14px !important;
    border-radius: 999px !important;
    padding: 5px 12px !important;
    opacity: 1 !important;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    gap: 8px;
}
#lingua-selector.expanded button {
    font-size: 20px !important;
    padding: 2px 4px !important;
}
#lingua-selector.expanded button[data-lingua-active="false"] {
    opacity: .55;
}
#lingua-selector.expanded button[data-lingua-active="false"]:hover { opacity: 1; }

/* ── POSICIÓN WEB → arriba a la derecha (default LinguaLayer) ── */
#lingua-selector {
    top: 16px !important;
    bottom: auto !important;
    left: auto !important;
}

/* ── POSICIÓN APP / SHELL → abajo a la derecha ── */
body.app-shell #lingua-selector,
body.pd-app-mode #lingua-selector,
.vo-app #lingua-selector {
    top: auto !important;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    left: auto !important;
}

/* En móvil web pequeño (sin shell) → mismo drawer arriba derecha */
@media (max-width: 600px) {
    body:not(.app-shell):not(.pd-app-mode) #lingua-selector { top: 12px !important; }
}

/* ═════════════════════════════════════════════════════════════
   OCULTAR BOTTOM-NAV EN APP (todos los dashboards)
   El usuario indicó que no la necesita en la app nativa.
   ═════════════════════════════════════════════════════════════ */
body.app-shell .app-bottom-nav,
body.app-shell .vmd-bottom-nav,
body.app-shell .vo-app-bottom-nav,
body.app-shell .pd-bottom-nav,
body.app-shell .bottom-nav,
body.app-shell .vd-bottom-nav,
body.app-shell nav.fixed-bottom,
body.app-shell [class*="bottom-nav"],
body.pd-app-mode .vmd-bottom-nav,
body.pd-app-mode .app-bottom-nav,
body.pd-app-mode .vo-app-bottom-nav,
body.pd-app-mode .pd-bottom-nav,
body.pd-app-mode .bottom-nav,
body.pd-app-mode .vd-bottom-nav,
body.pd-app-mode nav.fixed-bottom,
body.pd-app-mode [class*="bottom-nav"] {
    display: none !important;
}

/* Sin bottom-nav recuperamos el padding inferior del contenido principal en app */
body.app-shell main,
body.pd-app-mode main {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}