/* =========================================================
   TRADUCTOR — estilos del selector de idioma
   ---------------------------------------------------------
   Dos partes: tapar lo que Google inyecta y dibujar el botón
   propio. Va después de styles.css y usa sus mismas variables.
   ========================================================= */

/* ---------- 1. lo que trae Google y no queremos ---------- */

/* La barra superior de Google empuja el documento 40 px hacia abajo
   con un `top` en línea sobre el body. Con el encabezado fijo eso
   dejaba un hueco arriba y desplazaba todo. */
body { top: 0 !important; position: static !important; }

.goog-te-banner-frame,
.goog-te-balloon-frame,
iframe.skiptranslate { display: none !important; }

/* el globo y el "Con la tecnología de Google Traductor" del widget */
.gtr__jaula { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }

/* Google resalta lo traducido al pasar el mouse: molesta y no aporta */
.goog-text-highlight { background: none !important; box-shadow: none !important; }
#goog-gt-tt, .goog-te-spinner-pos { display: none !important; }

/* ---------- 2. el botón propio ---------- */

.gtr { position: relative; flex: none; }

.gtr__toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: transparent;
  color: #fff;
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.gtr__toggle:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }

/* Con el encabezado sólido el texto blanco no se leería. .vh es el
   encabezado del comparador, que siempre es claro: sin esta línea el
   selector quedaba blanco sobre crema, prácticamente invisible. */
.header.is-stuck .gtr__toggle,
.header--solid .gtr__toggle,
.header--ink .gtr__toggle,
.vh .gtr__toggle { color: var(--ink); border-color: var(--line); }
.header.is-stuck .gtr__toggle:hover,
.header--solid .gtr__toggle:hover,
.header--ink .gtr__toggle:hover,
.vh .gtr__toggle:hover { background: var(--cream-2); border-color: var(--ink); }

.gtr__panel {
  position: absolute;
  right: 0; top: calc(100% + .5rem);
  z-index: 120;
  min-width: 170px;
  padding: .35rem;
  border-radius: var(--radius-lg, 8px);
  background: var(--white, #fff);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg, 0 30px 70px rgba(20, 18, 15, .18));
}
.gtr__panel[hidden] { display: none; }

.gtr__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  width: 100%;
  padding: .55rem .7rem;
  border: 0;
  border-radius: var(--radius, 4px);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: .88rem;
  text-align: left;
  cursor: pointer;
}
.gtr__item:hover { background: var(--cream-2); }
.gtr__item.is-active { background: var(--cream-2); font-weight: 600; }

.gtr__corto { font-size: .72rem; letter-spacing: .08em; color: var(--muted); }
.gtr__item.is-active .gtr__corto { color: var(--bronze); }

/* En el teléfono el encabezado sólo tiene logo y menú: el selector se
   queda, pero sin la sigla, para no empujar al botón de menú. */
@media (max-width: 780px) {
  .gtr { margin-left: auto; margin-right: .5rem; }
  .gtr__actual { display: none; }
  .gtr__toggle { padding: .5rem; }
}