/* ══════════════════════════════════════════════════════════════
   FOTOFEST COLOMBIA 2026 — ESTILOS DEL SISTEMA DE TRADUCCIÓN
   ──────────────────────────────────────────────────────────────
   Acompaña a traduccion.js. Hace dos cosas y nada más:

   1) Tapar todo lo que Google inyecta en la página.
      Esto es lo que sustituye al MutationObserver que antes
      vigilaba el documento entero. CSS cuesta cero en cada
      frame; un observador con subtree:true, no. Dentro de la
      galería 3D esa diferencia se nota.

   2) Dar estilo al selector que traduccion.js inyecta en las
      páginas que no traen uno propio —hoy, la galería—.
      Va todo bajo .lang-selector--inyectado para no pisar el
      selector que la portada ya tiene en styles.css.
   ══════════════════════════════════════════════════════════════ */


/* ── 1 · SILENCIAR EL WIDGET DE GOOGLE ──────────────────────────
   Google monta un gadget visible, una barra superior y un iframe
   de «ver original». Nada de eso encaja con el diseño del
   festival, y la barra empuja el <body> 40 px hacia abajo con un
   style en línea, que es lo que descolocaba el menú.
   !important gana al style en línea de Google.                  */

#google_translate_element,
.goog-te-gadget,
.goog-te-banner-frame,
.goog-te-balloon-frame,
.goog-tooltip,
.goog-tooltip:hover,
.skiptranslate,
body > .skiptranslate,
iframe.goog-te-banner-frame,
iframe#\:1\.container          { display: none !important; }

.goog-text-highlight           { background: none !important;
                                 box-shadow: none !important; }

body                           { top: 0 !important; }
html                           { margin-top: 0 !important; }
html body                      { margin-top: 0 !important; }

/* Google envuelve lo traducido en <font>. Si no se neutraliza,
   hereda tamaños del navegador y rompe la tipografía del sitio. */
font[style],
font                           { font: inherit !important;
                                 color: inherit !important;
                                 letter-spacing: inherit !important;
                                 background: none !important; }


/* ── 2 · EL SELECTOR INYECTADO ──────────────────────────────────
   Solo aparece donde no había uno. Copia el lenguaje visual de la
   portada —Bebas, versalitas, mucho tracking, blanco al 25 % y
   blanco puro para el activo— sin depender de styles.css, porque
   la galería carga otra hoja.                                   */

.lang-selector--inyectado {
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-shrink: 0;
  margin-right: .5rem;
}

.lang-selector--inyectado .lang-btn {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  padding: .2rem .18rem;
  font-family: "Bebas Neue", "Oswald", Impact, sans-serif;
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .25);
  cursor: pointer;
  line-height: 1;
  /* 28 px de lado: el mínimo cómodo para un pulgar. */
  min-width: 28px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .2s ease;
}

.lang-selector--inyectado .lang-btn.active {
  color: #ffffff;
  font-weight: 500;
}

.lang-selector--inyectado .lang-btn:not(.active):hover {
  color: rgba(255, 255, 255, .7);
}

.lang-selector--inyectado .lang-btn:focus-visible {
  outline: 1px solid #3db88a;
  outline-offset: 2px;
}

.lang-selector--inyectado .lang-sep {
  font-size: .55rem;
  color: rgba(255, 255, 255, .15);
  letter-spacing: 0;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

/* En pantallas estrechas la franja de la galería va justa de
   sitio: se dejan los puntos fuera y los botones se aprietan,
   pero siguen midiendo 28 px de alto para poder pulsarlos. */
@media (max-width: 720px) {
  .lang-selector--inyectado         { gap: 0; margin-right: .25rem; }
  .lang-selector--inyectado .lang-sep { display: none; }
  .lang-selector--inyectado .lang-btn { font-size: .62rem;
                                        letter-spacing: .12em;
                                        min-width: 26px; }
}


/* ── 3 · CUANDO GOOGLE NO LLEGA ─────────────────────────────────
   Red caída, bloqueo de red corporativa o extensión que lo
   impide. traduccion.js marca el <html> y el selector se apaga en
   lugar de quedarse prometiendo algo que no va a pasar.         */

html[data-ff-traduccion="no-disponible"] .lang-btn[data-lang]:not([data-lang="es"]) {
  opacity: .3;
  cursor: not-allowed;
}


/* ── 4 · LO QUE NUNCA SE TRADUCE ────────────────────────────────
   Marca de agua para revisarlo de un vistazo durante el
   desarrollo: se activa añadiendo data-ff-depurar al <html>.
   Apagado en producción.                                        */

html[data-ff-depurar] .notranslate {
  outline: 1px dashed rgba(61, 184, 138, .45);
}