/* ═══════════════════════════════════════════════════════════════
   SELECTOR DE IDIOMA ES · EN · PT — los botones que arma i18n.js. Dónde va y
   cuánto ocupa lo pone cada página: en la home, el encabezado (index.css); en
   el wallpaper, la barra de la pantalla del texto (consola.css).
   ═══════════════════════════════════════════════════════════════ */
.lang-switch {
  display: inline-flex;
  gap: 0.3rem;
}

.lang-option {
  appearance: none;
  border: 1px solid rgba(0, 255, 156, 0.22);
  border-radius: 999px;
  padding: 0.28rem 0.55rem;
  background: rgba(0, 0, 0, 0.25);
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  transition: border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.lang-option:hover {
  border-color: rgba(0, 255, 156, 0.55);
  color: var(--text);
}

.lang-option:focus-visible {
  outline: 3px solid rgba(0, 255, 156, 0.35);
  outline-offset: 2px;
}

.lang-option--active,
.lang-option[aria-pressed="true"] {
  border-color: rgba(0, 255, 156, 0.68);
  background: rgba(0, 255, 156, 0.12);
  color: var(--neon);
}

@media (max-width: 720px) {
  .lang-switch {
    gap: 0.22rem;
  }

  .lang-option {
    padding: 0.24rem 0.45rem;
    font-size: 0.68rem;
  }
}