/* * Selector de idioma en pastilla (web/js/idioma.js). * * Sustituye al desplegable «Seleccionar idioma ▼» de Google Translate. Los colores son * los del sitio: el gris oscuro del texto (#3f4a55) para el fondo y el rosa de acento * (#f2849e) para el idioma activo. */ /* Dentro de la cabecera, junto a las redes. Antes vivía en una fila aparte debajo, que se comía un renglón entero de la página para cuatro siglas. */ .idioma { display: inline-flex; align-items: center; gap: 2px; background: #3f4a55; border-radius: 999px; padding: 2px; /* Aire a los dos lados: a la izquierda queda el último enlace del menú y a la derecha los iconos sociales. Sin el margen izquierdo, la pastilla salía pegada a «Dashboard» y las dos cosas se leían como una sola. */ margin-left: 1.1rem; margin-right: .85rem; /* Que no se encoja: es el elemento más estrecho de la barra y al apretarse era el primero en deformarse. */ flex: 0 0 auto; } .idioma-opcion { appearance: none; border: 0; background: none; color: #b9c2cb; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; /* 30 px de alto para que se pueda pulsar con el dedo. */ /* Algo más compacto que en la fila suelta: aquí compite con el logo, el menú y cuatro iconos en la misma barra. 28 px sigue siendo pulsable con el dedo. */ min-height: 28px; padding: 0 .6rem; border-radius: 999px; cursor: pointer; transition: background-color .12s, color .12s; } .idioma-opcion:hover { color: #fff; } .idioma-opcion.idioma-activo { background: #f2849e; color: #fff; } .idioma-opcion:focus-visible { outline: 2px solid #f2849e; outline-offset: 2px; } /* La barra separadora entre opciones, como en un control segmentado. */ .idioma-opcion + .idioma-opcion { position: relative; } .idioma-opcion + .idioma-opcion::before { content: ''; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 1px; background: rgba(255,255,255,.18); } /* Junto al activo la barra estorba: el relleno ya separa. */ .idioma-opcion.idioma-activo::before, .idioma-opcion.idioma-activo + .idioma-opcion::before { display: none; } /* --- lo que hace el traductor por su cuenta --- Al traducir inserta una barra propia arriba y empuja el con un `top` en línea, lo que desplaza la cabecera fija y descoloca la página entera. GTranslate ya mete reglas suyas para esto, pero se dejan las de aquí: son las mismas y no cuestan nada, y si algún día se cambia de envoltura el sitio no se descoloca. */ body { top: 0 !important; } .skiptranslate iframe { display: none !important; } /* El desplegable de GTranslate sigue en la página —es sobre él donde su script escucha los `pointerenter`/`focusin` que disparan la carga de la librería, y a quien `doGTranslate()` le habla—, pero sin verse. ⚠️ NO se usa `display: none`: con el elemento fuera del flujo el widget no llega a montarse, y entonces no traduce nada. Se oculta recortándolo, que lo deja «presente» para el navegador. */ .gtranslate_wrapper { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* En pantallas estrechas la cabecera va muy justa: el selector se queda, porque es de lo más útil que hay ahí, pero se aprieta. */ @media (max-width: 991px) { .idioma { margin-right: .5rem; } .idioma-opcion { padding: 0 .45rem; font-size: 11px; } } @media (max-width: 420px) { /* Aquí ya no caben las cuatro siglas y los cuatro iconos sociales a la vez. Se esconden las redes, que en el móvil están también en el pie. */ .header-social-links { display: none !important; } }