/* idiomas.css — desplegable de idioma de la portada de noratool.com (01/11/2026; lo pinta js/idiomas.js). Mismo aspecto de píldora que el
   selector de antes y los botones de la portada; mismas variables (--sans, --ink, --line, --accent). */

/* Con otro idioma que el español, la página espera oculta a su catálogo (como mucho 3 s) para no enseñar un instante el español. */
html.idioma-cargando body { visibility: hidden; }

.idioma { position: relative; }
.idioma-boton {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: 13px; font-weight: 500; line-height: 1; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 980px; padding: 6px 11px 6px 9px; cursor: pointer;
  transition: border-color .2s;
}
.idioma-boton:hover { border-color: var(--accent); }
.bandera { width: 20px; height: 15px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.idioma-codigo { letter-spacing: .02em; }
.idioma-flecha { width: 10px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.idioma-boton[aria-expanded="true"] .idioma-flecha { transform: rotate(180deg); }

.idioma-lista {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 400;
  min-width: 220px; max-height: min(70vh, 440px); overflow-y: auto;
  margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .25);
}
.idioma-lista[hidden] { display: none; }
.idioma-lista li {
  display: flex; align-items: center; gap: 12px;
  min-height: 38px; padding: 0 12px; border-radius: 9px;
  font-family: var(--sans); font-size: 14px; color: var(--ink); cursor: pointer;
}
.idioma-lista li.activa { background: #f5f5f7; }
.idioma-lista .idioma-codigo { width: 2.2em; color: var(--ink-dim); font-weight: 600; font-size: 12.5px; }
.idioma-lista li[aria-selected="true"] { font-weight: 600; }
.idioma-lista li[aria-selected="true"]::after { content: "✓"; margin-left: auto; color: var(--accent); }

/* Aro de foco solo con teclado (el navegador a veces da por «de teclado» el foco que pone el código aunque se use el ratón): la lista nunca
   lo lleva (la opción marcada ya dice dónde estás) y el botón, solo si lo último fue el teclado (clase con-teclado, la pone js/idiomas.js). */
.idioma-boton:focus, .idioma-lista:focus { outline: none; }
.idioma.con-teclado .idioma-boton:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.idioma.con-teclado .idioma-lista li.activa { box-shadow: inset 0 0 0 2px var(--ink); }

/* Menú de la cabecera: sin partir enlaces; si no cabe, más junto y, si tampoco, oculto como en el móvil (lo decide js/idiomas.js midiendo). */
.nav-links a { white-space: nowrap; }
.nav-links.nav-apretada { gap: 16px; }
.nav-links.nav-apretada a { font-size: 13px; }
.nav-links.nav-sin-sitio { display: none; }

@media (max-width: 767px) { .idioma-boton { padding: 6px 8px; font-size: 12px; gap: 6px; } }
@media (prefers-reduced-motion: reduce) { .idioma-flecha { transition: none; } }