/* * i18n.css — selector de idioma ES/EN y guarda anti-parpadeo. * * La clase i18n-pending la pone js/i18n.js desde el cuando el idioma * elegido es ingles, y la quita cuando termina de traducir (o a los 1.5 s si * el diccionario no carga). Solo se aplica con la clase presente: si el JS * falla, la pagina se ve en espanol y nunca queda en blanco. */ html.i18n-pending body { visibility: hidden; } /* ── Selector ──────────────────────────────────────────────────────────── Control segmentado con indicador deslizante. Los colores salen de tokens para que la misma pieza funcione sobre la barra oscura de la landing y sobre las tarjetas claras de auth. */ .i18n-switch { --i18n-fg: currentColor; --i18n-borde: rgba(127, 127, 127, .26); --i18n-fondo: rgba(127, 127, 127, .07); --i18n-thumb: #1FA847; --i18n-thumb-fg: #fff; --i18n-sombra: 0 1px 2px rgba(11, 27, 40, .10), 0 4px 12px -4px rgba(11, 27, 40, .18); position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px 4px 8px; border: 1px solid var(--i18n-borde); border-radius: 999px; background: var(--i18n-fondo); line-height: 1; vertical-align: middle; isolation: isolate; transition: border-color .22s ease, background-color .22s ease, box-shadow .22s ease; } .i18n-switch:hover { border-color: rgba(127, 127, 127, .42); box-shadow: var(--i18n-sombra); } .i18n-globe { display: inline-flex; width: 15px; height: 15px; flex: 0 0 auto; color: var(--i18n-fg); opacity: .5; transition: opacity .22s ease, transform .5s cubic-bezier(.34, 1.4, .5, 1); } .i18n-globe svg { width: 100%; height: 100%; display: block; } .i18n-switch:hover .i18n-globe { opacity: .85; transform: rotate(28deg); } /* Pista: dos columnas iguales, con el indicador por debajo de las etiquetas. */ .i18n-track { position: relative; display: grid; grid-template-columns: repeat(2, minmax(30px, 1fr)); align-items: stretch; } .i18n-thumb { position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; width: 50%; border-radius: 999px; background: var(--i18n-thumb); box-shadow: 0 1px 2px rgba(11, 27, 40, .22); transform: translate3d(0, 0, 0); transition: transform .38s cubic-bezier(.62, .04, .3, 1); } .i18n-track[data-lang="en"] .i18n-thumb { transform: translate3d(100%, 0, 0); } .i18n-opt { position: relative; z-index: 1; appearance: none; border: 0; margin: 0; padding: 5px 11px; border-radius: 999px; background: transparent; color: var(--i18n-fg); opacity: .55; font: inherit; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; cursor: pointer; transition: color .26s ease, opacity .26s ease; } .i18n-opt:hover { opacity: .85; } .i18n-opt.is-on { color: var(--i18n-thumb-fg); opacity: 1; } .i18n-opt:focus-visible { outline: 2px solid var(--i18n-thumb); outline-offset: 3px; } /* Rebote breve al confirmar el cambio. */ .i18n-track[data-lang] .i18n-opt.is-on { animation: i18n-pop .34s cubic-bezier(.34, 1.5, .5, 1); } @keyframes i18n-pop { 0% { transform: scale(1); } 45% { transform: scale(1.13); } 100% { transform: scale(1); } } /* ── Variante sobre fondos oscuros ──────────────────────────────────────── */ .band-dark .i18n-switch, .nav-drawer .i18n-switch, .i18n-switch--float { --i18n-borde: rgba(255, 255, 255, .20); --i18n-fondo: rgba(255, 255, 255, .07); --i18n-fg: #fff; } .band-dark .i18n-switch:hover, .nav-drawer .i18n-switch:hover { border-color: rgba(255, 255, 255, .38); } /* ── Barra de navegacion de la landing ────────────────────────────────── La barra es transparente sobre el hero oscuro hasta que .is-solid la vuelve blanca. Sin estas reglas el selector heredaba currentColor del body (navy oscuro), de modo que el globo y la etiqueta inactiva quedaban invisibles sobre el hero. Se replica el mismo par de estados que ya usan .nav-link y .nav-signin, para que el control acompane al resto de la barra. */ .nav .i18n-switch { --i18n-borde: rgba(255, 255, 255, .24); --i18n-fondo: rgba(255, 255, 255, .10); --i18n-fg: #fff; } .nav .i18n-switch:hover { border-color: rgba(255, 255, 255, .42); } /* Opacidades mas altas que las del componente base: sobre el hero oscuro, el .5 y .55 por defecto dejaban el contraste por debajo de lo legible. */ .nav .i18n-globe { opacity: .74; } .nav .i18n-opt { opacity: .80; } .nav.is-solid .i18n-switch { --i18n-borde: rgba(11, 27, 40, .16); --i18n-fondo: rgba(11, 27, 40, .04); --i18n-fg: var(--slate-600); } .nav.is-solid .i18n-switch:hover { border-color: rgba(11, 27, 40, .30); } .nav.is-solid .i18n-globe { opacity: .78; } .nav.is-solid .i18n-opt { opacity: .90; } /* ── Posicion de reserva si la pagina no declara [data-i18n-mount] ──────── */ .i18n-switch--float { position: fixed; right: 18px; bottom: 18px; z-index: 9999; background: rgba(16, 20, 26, .86); color: #fff; backdrop-filter: blur(10px); box-shadow: 0 8px 26px rgba(0, 0, 0, .32); animation: i18n-entrada .42s cubic-bezier(.22, .68, .24, 1) both; } @keyframes i18n-entrada { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: 1; transform: none; } } @media (max-width: 640px) { .i18n-switch--float { right: 12px; bottom: 12px; } } /* ── Encaje en los contenedores existentes ──────────────────────────────── */ /* .af-header usa justify-content:space-between; sin esto el selector quedaria centrado entre el logo y el enlace de la derecha. */ .af-header .af-header-lang { margin-left: auto; display: inline-flex; } .nav .nav-lang { display: inline-flex; } .nav-drawer .drawer-lang { display: flex; padding: 12px 0 2px; } /* Barra lateral del sistema: el selector va bajo el conmutador de tema. */ .nav-foot .nav-lang-row { display: flex; justify-content: center; padding: 6px 0 2px; } .nav-foot .i18n-switch { width: 100%; justify-content: center; } .nav-foot .i18n-track { flex: 1 1 auto; } @media (max-width: 900px) { .nav .nav-lang { display: none; /* en movil el selector vive en el drawer */ } } @media (prefers-reduced-motion: reduce) { .i18n-switch, .i18n-globe, .i18n-thumb, .i18n-opt { transition: none; } .i18n-track[data-lang] .i18n-opt.is-on, .i18n-switch--float { animation: none; } .i18n-switch:hover .i18n-globe { transform: none; } }