/* =====================================================================
   Selector de idioma (Google Translate oculto + banderas propias)
   Origen: phoenicia/translate/index.html (26/09/2026).

   ⚠ TODO EL ESTILO VIVE AQUI. La CSP del sitio publico no admite estilo en
   linea: el style="position:absolute" que traia el sprite de banderas en el
   prototipo se descartaba en silencio y dejaba un hueco de 150x300 px en la
   cabecera. Por eso el sprite lleva la clase .traductor-sprite.
   ===================================================================== */

.traductor {
  --ls-bg: #ffffff;
  --ls-border: var(--border-soft, #d7dce2);
  --ls-text: var(--navy-heading-base, #1f2933);
  --ls-accent: var(--gold-texto-base, #8a6449);
  --ls-accent-soft: rgba(138, 100, 73, 0.14);
  --ls-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
  --ls-speed: 160ms;

  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-weight: 600;
  font-size: 0.78rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--ls-text);
}
.traductor[aria-busy="true"] { cursor: progress; }

.traductor-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* --- Banderas: control segmentado --- */
.traductor__banderas {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--ls-bg);
  border: 1px solid var(--ls-border);
  border-radius: 999px;
  box-shadow: var(--ls-shadow);
}
.traductor__bandera {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px 0 7px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  transition: background-color var(--ls-speed) ease, box-shadow var(--ls-speed) ease, transform var(--ls-speed) ease;
  -webkit-tap-highlight-color: transparent;
}
.traductor__bandera svg {
  width: 24px;
  height: 16px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14);
  pointer-events: none;
  opacity: 0.55;
  filter: saturate(0.55);
  transition: opacity var(--ls-speed) ease, filter var(--ls-speed) ease;
}
.traductor__codigo { opacity: 0.75; }
.traductor__bandera:hover { background: var(--ls-accent-soft); }
.traductor__bandera:hover svg,
.traductor__bandera:focus-visible svg { opacity: 0.9; filter: none; }
.traductor__bandera:active { transform: scale(0.95); }
.traductor__bandera:focus-visible {
  outline: 2px solid var(--ls-accent);
  outline-offset: 2px;
}
.traductor__bandera[aria-pressed="true"] {
  background: var(--ls-accent-soft);
  box-shadow: inset 0 0 0 2px var(--ls-accent);
}
.traductor__bandera[aria-pressed="true"] svg { opacity: 1; filter: none; }
.traductor__bandera[aria-pressed="true"] .traductor__codigo { opacity: 1; }

.traductor[data-status="unavailable"] .traductor__banderas { opacity: 0.7; }

/* --- Sitio en la cabecera --- */
.cabecera-principal__interior > .navegacion { margin-left: auto; }

@media (max-width: 980px) {
  /* El menu pasa a desplegable (fuera del flujo): el selector se pega a la
     hamburguesa, que es donde se busca todo lo de la cabecera en movil. */
  .cabecera-principal__interior > .traductor { margin-left: auto; order: 2; }
  /* La hamburguesa va ANTES del menu en el HTML (controla el desplegable) y
     el selector despues; sin esto quedaba en medio, pegada al logo. */
  .cabecera-principal__interior > .cabecera-alternar { order: 3; margin-left: -12px; }
}
@media (max-width: 420px) {
  /* Sin codigo en pantallas muy estrechas: cabe el logo. El nombre accesible
     sigue en aria-label. */
  .traductor__codigo { display: none; }
  .traductor__bandera { padding: 0 7px; }
}
@media (pointer: coarse) {
  .traductor__bandera { min-height: 40px; min-width: 44px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .traductor *, .traductor *::before { transition: none !important; }
}

/* --- Ocultar solo la interfaz de Google (el motor sigue activo) --- */
#google_translate_element {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  visibility: hidden !important; /* su <select> no recibe foco con Tab */
}
iframe.goog-te-banner-frame,
body > .skiptranslate > iframe.skiptranslate { display: none !important; }
/* Google empuja el body 40 px para su barra; la cabecera es fija y ese hueco
   quedaria encima del hero. Va sin condicion: al volver al original Google
   quita .translated-ltr pero deja el top:40px en linea, y el hueco dejaba
   asomar el enlace de salto «Ir al contenido principal» (05/11/2026). */
body { top: 0 !important; }
#goog-gt-tt,
.goog-te-balloon-frame,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }