.gtranslate_wrapper { 
  position: relative; 
  display: inline-block; 
}

/* Forzar la apertura del popup hacia abajo, centrado y transparente */
.gtranslate_wrapper .gt_options, 
.gtranslate_wrapper div[class*="gt_options"] {
  top: 100% !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Nombre del idioma visible -- sin el prefijo .gtranslate_wrapper: al abrirse, el popup
   (.gt_white_content y todo lo de adentro) se reubica fuera de .gtranslate_wrapper en el DOM,
   asi que cualquier selector con ese prefijo nunca matchea el contenido ya abierto. */
.gt_white_content a span, 
.gt_white_content span.gt_name { 
  display: inline !important; 
}

/* Mantener las banderas visibles y centradas */
.gtranslate_wrapper a { 
  display: flex !important; 
  justify-content: center !important; 
  padding: 5px !important;
  background: transparent !important;
}

.gtranslate_wrapper img {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.gt_white_content {
  background-color: rgba(255, 255, 255, 0.85) !important;
  border-radius: 10px !important;
  color: #1a1a1a !important;
}
/* El widget fija color:black en .gt_white_content y sus hijos de texto -- con fondo claro eso
   ya es legible por defecto, pero se deja explicito por si el propio widget vuelve a fijar
   color en cada <a>/<span> individualmente y pisa la herencia. */
.gt_white_content a,
.gt_white_content span,
.gt_white_content input {
  color: #1a1a1a !important;
}

/* El fondo no se hereda: .gt_search y .gt_languages (el buscador y la lista) traen su propio
   fondo solido del widget por default, que se ve encima sin heredar el translucido del padre.
   Se los hace transparentes para que se vea el fondo unico de .gt_white_content. */
.gt_white_content .gt_search,
.gt_white_content .gt_languages,
.gt_white_content input {
  background-color: transparent !important;
}

/* Bandera desalineada del texto: por default una imagen se alinea con la linea base del texto
   (queda "colgando" mas abajo). Centrada verticalmente respecto a la linea de texto, y con
   ancho fijo para que la bandera quede en la misma columna en todas las filas (si no, el texto
   arranca en una posicion distinta segun el tamaño real de cada imagen). */
.gt_white_content img {
  vertical-align: middle !important;
  width: 20px !important;
  height: 20px !important;
  flex: none !important;
}
.gt_white_content a {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}
/* Bandera primero, nombre inmediatamente despues -- orden natural del HTML (img, luego span),
   alineado a la izquierda de la fila. */

/* Posicion del popup: SIEMPRE centrado en la pantalla (vertical y horizontal), sin importar
   desde cual boton se abrio. Una sola regla -- antes habia 2 bloques separados de rondas
   distintas que fijaban "transform" cada uno a su manera y se pisaban entre si de forma no
   intencional, dejando el popup en una posicion inconsistente. */
.gt_white_content {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  bottom: auto !important;
  right: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  width: 250px !important;
  max-width: 90vw !important;
  max-height: 80vh !important;
  overflow-y: auto !important;
}

/* Boton del footer (cerrado, antes de abrir la lista): solo bandera, sin nombre del idioma.
   Selector con ">" para tocar UNICAMENTE el boton disparador -- es hijo directo de
   .gtranslate_wrapper y de .gt_switcher-popup -- y no la lista de adentro del popup (cuyos
   nombres SI queremos visibles, ver regla de arriba). El boton tiene 2 spans (nombre y la
   flechita "▼"); :first-of-type entre los span agarra el nombre, que es el primero, sin
   tocar la flecha. */
.gtranslate_wrapper > .gt_switcher-popup > span:first-of-type {
  display: none !important;
}