/* ===================================================================
   Selector de idioma · Google Translate
   ===================================================================
   Portado del panel de la escuela. El widget de Google trae su propio HTML y
   sus estilos, pensados para una web blanca de 2011; aquí se reviste para que
   encaje con el tema oscuro.

   Las clases `goog-te-*` las genera Google y no se pueden cambiar, solo
   sobrescribir. Si algún día cambia su marcado, lo que se rompe es la ESTÉTICA
   del selector, nunca la plataforma.
   =================================================================== */

.idioma-caja {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 50px;
  vertical-align: middle;
  max-width: 190px; overflow: hidden;
}
.idioma-icono { font-size: 13px; line-height: 1; opacity: .85 }

#google_translate_element { display: inline-block }
#google_translate_element select,
.goog-te-combo {
  background: #0F1233 !important;
  color: var(--txt) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radio) !important;
  padding: 3px 6px !important;
  font-size: 12px !important;
  font-family: var(--fuente) !important;
  max-width: 150px;
  cursor: pointer;
}
#google_translate_element select:hover { border-color: var(--primario) !important }

/* El widget añade su marca y un icono: se recortan para que quepa en la barra */
.goog-te-gadget { font-size: 0 !important; color: transparent !important; line-height: 1 !important }
.goog-te-gadget .goog-te-combo { font-size: 12px !important; margin: 0 !important }
.goog-te-gadget-icon { display: none !important }
.goog-logo-link, .goog-te-gadget span { display: none !important }

/* --- LA BARRA SUPERIOR DE GOOGLE ---
   Al traducir, Google inyecta un iframe de 40px arriba y empuja el <body> con
   `top: 40px`. Eso desplaza la barra de la escuela —que es sticky en top:0— y
   la deja cortada. Hay que ocultar el iframe Y anular el desplazamiento: con
   una sola de las dos cosas queda un hueco vacío o la cabecera tapada.

   Se apunta a `iframe.skiptranslate` porque Google ha cambiado varias veces el
   nombre de la clase de esa barra, pero siempre es un IFRAME con skiptranslate;
   el `#google_translate_element` también lleva skiptranslate, pero es un DIV,
   así que el selector por iframe no lo toca.

   Contrapartida asumida: se pierde el botón «Mostrar texto original» de Google.
   Volver al español se hace con nuestro propio selector, que sigue en la barra. */
body { top: 0 !important; position: static !important }
iframe.skiptranslate,
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate { display: none !important; visibility: hidden !important }

/* Google marca lo traducido con un fondo amarillo al pasar el ratón: sobre un
   tema oscuro queda ilegible. */
.goog-text-highlight { background: none !important; box-shadow: none !important }

/* Lo que NUNCA se traduce se sigue viendo como lo que es */
.notranslate code, code.notranslate, .mono.notranslate {
  font-family: Consolas, "Courier New", monospace;
}

@media (max-width: 900px) {
  .idioma-caja { max-width: 140px }
  #google_translate_element select, .goog-te-combo { max-width: 104px }
}