/* Selector de idioma: dos banderas, nada mas.
   Sin caja, sin borde, sin fondo, sin letras.

   Vive en la barra de arriba (.annc), no en el menu. Medido en iPhone 15: en el
   menu del inicio no cabia — la palabra SOVRAS se sale de su propia caja (el
   enlace termina en 154px y la letra llega a 184) y las banderas le quedaban
   encima. La barra si tiene sitio en las dos plantillas y cada una las coloca
   sola: el inicio centra sus piezas y las internas las separan a los extremos.

   Archivo propio en vez de tocar home.css o internal.css: esas dos hojas las
   comparte todo el sitio y se editan desde varias manos. Asi esto se agrega y
   se saca sin riesgo.

   Las banderas van dibujadas, no en emoji: Windows no trae tipografia de
   banderas y el emoji se degrada a dos letras pegadas. Medido en Chrome sobre
   Windows 11. */

.idioma {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 22px;
}

.idioma__op {
  /* El area tocable es mayor que la bandera: la bandera sola daba 24x28 y el
     dedo falla. El relleno no se ve, porque no hay fondo ni borde. */
  display: inline-flex;
  padding: 11px 3px;
  line-height: 0;
}

.idioma__bandera {
  display: block;
  /* 21x14: un 17% mayor que las 18x12 con que salio. Lo justo para que el
     cuadro azul y la estrella se lean, sin que la bandera compita con el texto
     de la barra. A 22x15 ya pesaba de mas: medido a ojo, una al lado de otra. */
  width: 21px;
  height: 14px;
  flex: none;
  border-radius: 2px;
  /* La que no esta activa va en gris; la activa, a color. Es la unica marca de
     cual estas viendo, y no necesita mas. Gris y no solo transparencia: sobre
     la barra oscura bajar la opacidad casi no se nota. */
  filter: grayscale(1);
  opacity: .5;
  transition: filter .2s, opacity .2s;
}

.idioma__op:hover .idioma__bandera { filter: grayscale(.25); opacity: .85; }
.idioma__op.es-activo .idioma__bandera { filter: none; opacity: 1; }
.idioma__op.es-activo { cursor: default; }

/* Quien navega con teclado tiene que ver donde esta parado. */
.idioma__op:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 3px; }

@media (max-width: 900px) {
  .idioma { gap: 7px; margin-left: 14px; }
  .idioma__bandera { width: 18px; height: 12px; }
}