/* mimi · el selector de idioma
 *
 * La ÚNICA hoja que comparten las dos páginas, y por eso existe: el registro y «cómo funciona» son
 * dos documentos con dos hojas propias, y este control tiene que verse igual en las dos. Escrito dos
 * veces, la primera vez que alguien ajusta el alto en una, las dos dejan de parecer el mismo sitio.
 *
 * No trae ni un color propio: consume los tokens que cada hoja define en `:root` (`--bg`, `--line`,
 * `--text-*`, `--brand`), que en las dos valen lo mismo. Por eso puede cargarse en cualquier orden.
 *
 * Tres códigos a la vista y no una lista desplegable: con tres opciones cortas, verlas cuesta lo
 * mismo que ver el control cerrado, y elegir es UN toque en vez de dos.
 */

.idiomas {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--bg-sunken, var(--bg-soft));
  border: 1px solid var(--line);
  /* Radio concéntrico: 8 (padre) − 2 (padding) = 6 en cada opción. */
  border-radius: 8px;
}

.idioma-op {
  min-width: 34px;
  /* 28 de alto es menos que el piso táctil de 44, y se resuelve abajo con un área invisible: la
     pastilla que se VE tiene que ser chica —es chrome, no una acción de la pantalla— y lo que se
     TOCA no. Agrandar la pastilla en su lugar dejaría el control compitiendo con el botón primario. */
  height: 28px;
  position: relative;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-3);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 160ms cubic-bezier(.2,.8,.2,1),
              color 160ms cubic-bezier(.2,.8,.2,1);
}

/* El piso táctil sin engordar el dibujo: el área alcanza 44 px, la pastilla sigue midiendo 28. */
.idioma-op::before {
  content: "";
  position: absolute;
  inset: -8px -2px;
}

.idioma-op:hover { color: var(--text); }

/* El elegido: superficie propia y peso, no solo color. En escala de grises se sigue distinguiendo,
   que es la única prueba que importa — el selector es lo primero que mira quien no entiende la
   pantalla, y ahí el color puede no estar disponible. */
.idioma-op[aria-checked="true"] {
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--sh-1, 0 1px 2px rgba(26, 26, 26, 0.06));
}

.idioma-op:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  /* Por encima de los hermanos: con la pastilla activa elevada, el aro del vecino queda debajo. */
  z-index: 1;
}

/* En el login el selector no compite con nada, así que va separado del resto. Lo centra el
   `text-align: center` de la tarjeta, que funciona porque el control es `inline-flex`: pasarlo a
   `flex` lo estiraría al ancho y el `margin: auto` no centraría nada. */
.idiomas-login { margin-top: 24px; }

@media (prefers-reduced-motion: reduce) {
  .idioma-op { transition: none; }
}