/* ============================================================
   ebeetaskai — i18n language-switcher styles
   ------------------------------------------------------------
   Espejo del LanguageSwitcher del landing (Worker brand, M3
   baseline rectangular). Se carga junto a `/i18n.js` desde
   todas las páginas para que el combo se vea consistente.
   ============================================================ */

.lang-switcher {
    position: relative;
    display: inline-flex;
    font-family: 'Inter', system-ui, sans-serif;
}

.lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--md-surface, #fff);
    border: 1px solid var(--md-outline, #CBD5E1);
    border-radius: var(--md-radius-sm, 4px);
    color: var(--md-secondary, #1E293B);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s ease;
    line-height: 1;
}
.lang-trigger:hover,
.lang-trigger.is-open {
    background: var(--md-primary-container, #CCFBF1);
    border-color: var(--md-primary, #0F766E);
    color: var(--md-on-primary-container, #134E4A);
}
.lang-trigger:focus-visible {
    outline: 2px solid var(--md-primary, #0F766E);
    outline-offset: 2px;
}
.lang-icon { width: 16px; height: 16px; flex: 0 0 16px; }
.lang-caret { width: 12px; height: 12px; flex: 0 0 12px; transition: transform .15s ease; }
.lang-trigger.is-open .lang-caret { transform: rotate(180deg); }
.lang-short { font-size: 12px; letter-spacing: .4px; }

.lang-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    min-width: 200px;
    list-style: none;
    margin: 0;
    padding: 6px;
    background: var(--md-surface, #fff);
    border: 1px solid var(--md-outline, #CBD5E1);
    border-radius: var(--md-radius-md, 8px);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}
.lang-menu[hidden] { display: none; }

.lang-menu-label {
    font-size: 11px;
    color: var(--md-on-surface-variant, #475569);
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 6px 8px 4px;
    font-weight: 600;
}
.lang-menu-label strong { color: var(--md-primary, #0F766E); margin-left: 4px; }

.lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: var(--md-radius-sm, 4px);
    color: var(--md-secondary, #1E293B);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: background .12s ease;
}
.lang-option:hover { background: var(--md-primary-container, #CCFBF1); color: var(--md-on-primary-container, #134E4A); }
.lang-option.is-selected { color: var(--md-primary, #0F766E); }
.lang-flag { font-size: 16px; line-height: 1; }
.lang-name { flex: 1; }
.lang-check { width: 16px; height: 16px; color: var(--md-primary, #0F766E); }

/* Slot de montaje: lo más común es dentro del header del reporte.
   En la landing es parte del topbar; en los reportes lo agregamos
   en la barra superior con `display: flex; align-items: center`. */
[data-i18n-combo-mount] { display: inline-flex; align-items: center; }

/* Slot fijo (inyectado por el server en cada reporte): esquina
   superior derecha, sobre el contenido, no intrusivo. */
.i18n-combo-fixed {
    position: fixed;
    top: 16px;
    right: 20px;
    z-index: 100;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}