/**
 * El selector de idioma de las páginas que no son la portada.
 *
 * Existe como archivo aparte porque estas cinco páginas no comparten hoja de
 * estilos entre sí: contacto, clave y 404 cargan `paginas.css`, mientras que
 * subir-a-steam y preview llevan su CSS dentro. Meter el selector en
 * `paginas.css` habría dejado a dos de ellas sin él, y copiarlo en cada una
 * serían cinco copias que se separan en cuanto alguien toque un color.
 *
 * La portada tiene su propia copia dentro de `index.html`, y es a propósito:
 * se sirve de una tacada, sin una segunda petición para poder pintarse. Si se
 * toca algo aquí, hay que mirar también allí.
 */

.idioma { position: relative; margin-left: 8px; }
.idioma-boton {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--suave);
  padding: 7px 11px; border-radius: 999px;
  background: #15171d; border: 1px solid var(--borde);
}
.idioma-boton:hover { color: var(--texto); border-color: #3a3f4d; }
.idioma-boton svg { width: 15px; height: 15px; display: block; }
.idioma-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
  display: flex; flex-direction: column; min-width: 168px; padding: 6px;
  border-radius: 12px; background: var(--tarjeta);
  border: 1px solid var(--borde); box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}
.idioma-opcion {
  font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
  padding: 8px 11px; border-radius: 8px;
  background: none; border: 0; color: var(--suave);
}
.idioma-opcion:hover { background: #1f232c; color: var(--texto); }
/* El que está puesto se marca con aria-current, así que el estilo cuelga del
   mismo atributo que lee el lector de pantalla: no hay forma de que uno diga
   una cosa y el otro otra. */
.idioma-opcion[aria-current="true"] { color: var(--acento); font-weight: 700; }

/* La cabecera de estas páginas es una fila simple, así que el selector se
   empuja al extremo en vez de colocarse detrás de una navegación larga. */
header .envoltura .idioma { margin-left: auto; }

@media (max-width: 900px) {
  .idioma-boton { padding: 6px 8px; }
}