/* Selector de idioma del landing y de las paginas legales: un mundito con lista
   desplegable.

   **Por que este archivo existe.** Adriana pidio corregir este control seis
   veces entre julio y el 2026-08-04, y volvia cada vez porque se arreglaba en
   la copia que ella fotografio. La causa no era el olvido: era que el control
   estaba escrito cuatro veces, una por pagina. Aqui esta escrito UNA vez y las
   cuatro paginas del landing lo consumen. El comportamiento vive en
   `idiomas.js`, al lado. La app tiene su propia copia en
   `src/components/LanguageSelector.tsx`, porque el landing es HTML plano y no
   puede importar de React; `selectorIdioma.test.tsx` cuenta las superficies y
   se pone roja si las dos se separan.

   Lo que reemplaza: la fila `ES | EN | PT`, tres letras sueltas que no le dicen
   a nadie que ese control es el idioma. */

.idiomas{position:relative;display:inline-flex}

/* El disparador: mundito, el idioma de hoy, y la flecha. */
.idiomas-btn{
  display:inline-flex;align-items:center;gap:6px;
  min-height:40px;padding:0 10px;
  background:var(--vidrio);border:1px solid var(--linea);border-radius:var(--r-pill);
  font-family:var(--f-cuerpo);font-weight:700;font-size:13px;line-height:1;
  color:var(--suave);cursor:pointer
}
.idiomas-btn:hover{color:var(--indigo)}
.idiomas-btn:focus-visible{outline:none;box-shadow:var(--foco)}

.idiomas-mundo{width:17px;height:17px;flex-shrink:0;color:currentcolor}
.idiomas-flecha{width:12px;height:12px;flex-shrink:0;transition:transform .18s ease}
.idiomas[data-abierto="si"] .idiomas-flecha{transform:rotate(180deg)}

/* La lista. Cerrada es `display:none`, no `opacity:0`: un control invisible
   pero enfocable con el tabulador es peor que no tenerlo. */
.idiomas-lista{
  display:none;position:absolute;z-index:60;top:calc(100% + 6px);inset-inline-end:0;
  min-width:150px;margin:0;padding:6px;list-style:none;
  background:#fff;border:1px solid var(--linea);border-radius:14px;
  box-shadow:0 18px 40px -18px rgba(40,32,90,.45)
}
.idiomas[data-abierto="si"] .idiomas-lista{display:block}
.idiomas-lista li{margin:0;padding:0;list-style:none}

.idiomas-lista .lng{
  display:flex;align-items:center;width:100%;
  min-height:40px;padding:0 10px;gap:8px;
  border:0;background:none;border-radius:10px;
  font-family:var(--f-cuerpo);font-weight:700;font-size:14px;line-height:1;
  color:var(--tinta);text-align:start;text-decoration:none;cursor:pointer
}
.idiomas-lista .lng:hover{background:var(--vidrio)}
.idiomas-lista .lng:focus-visible{outline:none;box-shadow:var(--foco)}
.idiomas-lista .lng.activo{
  background:linear-gradient(120deg,var(--agua-1),var(--agua-2));color:#fff
}

@media (max-width: 560px){
  .idiomas-btn{min-height:36px;padding:0 8px;font-size:12px}
  .idiomas-mundo{width:15px;height:15px}
}