/* ==========================================================
ASTADO DEV -- SELECTOR DE IDIOMA (ES/EN)
==========================================================
Vive dentro del panel del menú hamburguesa (#menu-floating), en las
4 páginas que ya tienen traducción completa (home, catálogo de
servicios, hub de Astado Labs, hub de demos de Aurell Connect). Usa
las mismas variables de color que el resto del header (--accent /
--text-main / --text-muted / --border-light, definidas en
CSS/variables.css) para no desentonar sin importar qué hoja de header
(generalPage.css, header2.css o astadolab.css) esté activa en la
página. Con fallback embebido por si esa página no define alguna. */
/* Reset explícito: los links de #menu-floating en index.php/servicios.php
ya usan un vacío como punto decorativo (ver
".floating-nav span" en generalPage.css/header2.css -- position:absolute,
7x7px circulito). Para poder traducir el texto del link con data-i18n
sin destruir ese punto (textContent en el completo lo borraría),
el texto se envuelve en su propio span con clase .nav-label -- pero eso
lo vuelve blanco frente a la regla genérica ".floating-nav span" salvo
que se resetee acá con mayor especificidad. Ver gotcha de clases
atómicas compartidas en astado-dev-docs (mismo patrón que Aurell
Connect ya pisó varias veces). */
.floating-nav a .nav-label,
.hero-nav a .nav-label {
position: static;
left: auto;
width: auto;
height: auto;
border-radius: 0;
background: none;
box-shadow: none;
opacity: 1;
transform: none;
}
.lang-toggle {
display: flex;
align-items: center;
gap: 4px;
margin-top: 10px;
padding: 4px;
border: 1px solid var(--border-light, rgba(255, 255, 255, .08));
border-radius: 999px;
background: rgba(255, 255, 255, .03);
}
.lang-toggle button {
appearance: none;
border: none;
background: transparent;
color: var(--text-muted, #94a3b8);
font-family: var(--font-title, 'Orbitron', sans-serif);
font-size: .72rem;
font-weight: 700;
letter-spacing: .12em;
padding: 7px 18px;
border-radius: 999px;
cursor: pointer;
transition: color .25s ease, background .25s ease, box-shadow .25s ease;
}
.lang-toggle button:hover {
color: var(--text-main, #ffffff);
}
.lang-toggle button.active {
color: #04141a;
background: var(--accent, #00f2fe);
box-shadow: 0 0 14px rgba(56, 189, 248, .45);
}
.lang-toggle button:focus-visible {
outline: 2px solid var(--accent, #00f2fe);
outline-offset: 2px;
}
/* Guard anti-flash: mientras el idioma inicial resuelto por el servidor
sea "en", el HTML sigue naciendo en español (es el idioma fuente en el
markup) -- este bloque lo oculta hasta que i18n.js corre la traducción
y saca la clase, todo dentro del mismo tick de DOMContentLoaded, así
nunca se ve el texto en español "flashear" antes del inglés. Solo se
activa cuando trae la clase (inyectada server-side, ver el
bloque de cada página). */
body.lang-loading [data-i18n],
body.lang-loading [data-i18n-html] {
visibility: hidden;
}