/* Selector de idioma del header.
   Sale de assets/css/styles.css, donde comparte bloque con .country-select.
   Aqui va desdoblado y con los valores literales en vez de las variables de
   :root, porque las subpaginas no cargan styles.css y no las tienen definidas.

   Las tres reglas .nav-actions son la variante de menu movil de la portada;
   se conservan por si el parcial se reutiliza ahi.

   La portada sigue usando el bloque de styles.css: este fichero es para las
   subpaginas. */

.lang-select { position: relative; }

.lang-select-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 50px;
    background: #fff;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.lang-select-trigger:hover { border-color: #0071d8; }

.lang-select-flag { font-size: 14px; line-height: 1; }

.lang-select-name {
    font-size: 11px;
    font-weight: 500;
    color: #000;
    white-space: nowrap;
}

.lang-select-trigger i {
    font-size: 13px;
    color: #808080;
    transition: transform 0.2s;
}

.lang-select.is-open .lang-select-trigger {
    border-color: #0071d8;
    box-shadow: 0 0 0 3px rgba(0,113,216,0.08);
}

.lang-select.is-open .lang-select-trigger i { transform: rotate(180deg); }

.lang-select-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 240px;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0,0,0,0.16);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 1001;
}

.lang-select.is-open .lang-select-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-select-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6e6e6e;
    padding: 4px 16px 8px;
}

.lang-select-list { list-style: none; }

.lang-select-code {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #000;
    line-height: 1;
}

.lang-select-panel {
    width: 190px;
    max-height: none;
    overflow: visible;
}

.lang-select-item-code {
    flex-shrink: 0;
    width: 26px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #808080;
}

.lang-select-item.is-selected .lang-select-item-code { color: #0071d8; }

.lang-select-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font-size: 13px;
    color: #000;
    cursor: pointer;
    transition: background 0.15s;
}

.lang-select-item:hover { background: #f4f7fb; }

.lang-select-item.is-selected {
    background: #eaf4ff;
    color: #0071d8;
    font-weight: 600;
}

.lang-select-item-flag { font-size: 16px; line-height: 1; flex-shrink: 0; }

.lang-select-item-name { flex: 1; }

.lang-select-item-check {
    font-size: 15px;
    color: #0071d8;
    visibility: hidden;
}

.lang-select-item.is-selected .lang-select-item-check { visibility: visible; }

.nav-actions .lang-select { width: 100%; }

.nav-actions .lang-select-trigger { width: 100%; justify-content: center; height: 36px; }

.nav-actions .lang-select-panel { left: 0; right: 0; width: 100%; }

/* El parcial es el PRIMER hijo de .X-topbar-nav, asi que el borde derecho del
   selector cae a la izquierda de la pantalla, no a la derecha: anclar el panel
   al selector con right:0 lo saca del viewport (hasta -124px medidos a 320px).
   Debajo de 600px se ancla al topbar en su lugar. position:static quita al
   .lang-select de contenedor de posicionamiento, y entonces el absolute se
   resuelve contra el .X-topbar, que ya es position:fixed y ocupa el ancho. */
@media (max-width: 600px) {
    .lang-select { position: static; }

    /* left+right+width:auto sobrerrestringe la caja, asi que al aplicar el
       max-width el navegador ignora el right y ancla en left: el panel queda
       de 260px pegado al borde izquierdo del topbar. Sin el tope llegaba a
       568px de ancho a 600px, una barra desproporcionada para tres idiomas. */
    .lang-select-panel { left: 16px; right: 16px; width: auto; max-width: 260px; }

    /* El <a> del logo lleva flex-shrink:1 y un <img> dentro, asi que absorbe
       todo el apreton del topbar y se colapsa a 0px. El tope de 120px es lo
       que evita que se coma el ancho que necesita el selector. */
    .ft-topbar > a, .gps-topbar > a, .sa-topbar > a,
    .rs-topbar > a, .dc-topbar > a, .ad-topbar > a { flex-shrink: 0; }

    .ft-topbar > a img, .gps-topbar > a img, .sa-topbar > a img,
    .rs-topbar > a img, .dc-topbar > a img, .ad-topbar > a img { max-width: 120px; }
}