/* ==========================================================

   df-gtranslate.css
   Módulo: df_GTranslate — Dario Finelli Google Translate Widget
   Versión: 1.0.0

   Descripción:
   Estilos del switcher de idioma flotante personalizado.
   Funciona sobre el engine de Google Translate Web Widget
   (translate.google.com/translate_a/element.js), cuya UI
   nativa se suprime completamente aquí.

   Compatibilidad:
   - HTML estático (puro)
   - Joomla 5 + Helix Ultimate (vía custom.css @import o
     inyección dinámica desde df-gtranslate.js)

   Dependencias de diseño:
   Ninguna. Solo CSS nativo. El color de acento (#e84e0f) puede
   sobreescribirse con la variable --dfgt-accent antes de importar.

   ========================================================== */

/* ==========================================================
   1. TOKENS DE DISEÑO
   ========================================================== */

:root {
  --dfgt-accent: #e84e0f; /* color de acento del proyecto */
  --dfgt-trigger-bg: rgba(255, 255, 255, 0.15);
  --dfgt-trigger-border: rgba(232, 77, 15, 0.5);
  --dfgt-panel-bg: rgb(243, 243, 243);
  --dfgt-panel-border: rgba(255, 255, 255, 0.5);
  --dfgt-text: rgb(28, 27, 27);
  --dfgt-text-active: #f5f5f5;
  --dfgt-top-offset: clamp(5rem, 8vw, 6rem); /* distancia desde la parte superior (debajo del header) */
  --dfgt-z-index: 9999;
}

/* ==========================================================
   2. SUPRIMIR UI NATIVA DE GOOGLE TRANSLATE
   ========================================================== */

/* Contenedor de inicialización — invisible */
#google_translate_element {
  display: none;
}

/* Banner superior y toolbar de GT */
.goog-te-banner-frame,
.skiptranslate {
  display: none !important;
}

/* GT empuja el body hacia abajo con top; lo neutralizamos */
body {
  top: 0 !important;
}

/* ==========================================================
   3. CONTENEDOR FLOTANTE
   ========================================================== */

.dfgt-switcher {
  position: fixed;
  right: 0;
  top: var(--dfgt-top-offset);
  z-index: var(--dfgt-z-index);
  display: flex;
  align-items: flex-start;
  flex-direction: row;
}

/* ==========================================================
   4. TAB — lengüeta mínima siempre visible
   ========================================================== */

/* Tab: su borde derecho desaparece cuando el panel está abierto
   para que ambos elementos se vean como un bloque unificado. */
.dfgt-switcher__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 3rem;
  background: var(--dfgt-trigger-bg);
  border: 1px solid var(--dfgt-trigger-border);
  border-right: none;
  border-radius: 0.5rem 0 0 0.5rem;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 0;
  transition:
    background 0.2s,
    border-color 0.2s,
    border-radius 0.3s;

  & svg {
    width: 1rem;
    height: 1rem;
    stroke: var(--dfgt-accent);
    fill: none;
    stroke-width: 2.5;
    flex-shrink: 0;
    transition: transform 0.3s ease;
  }

  &:hover {
    background: var(--dfgt-accent);
    border-color: var(--dfgt-accent);

    & svg {
      stroke: #f5f5f5;
    }
  }
}

/* Cuando el panel está abierto, el tab pierde su radio derecho
   y se suelda visualmente al borde izquierdo del panel. */
.dfgt-switcher--expanded .dfgt-switcher__tab {
  border-radius: 0.5rem 0 0 0.5rem;
}

/* Flecha rota cuando el widget está expandido */
.dfgt-switcher--expanded .dfgt-switcher__tab svg {
  transform: rotate(180deg);
}

/* ==========================================================
   5. PANEL — globo decorativo + opciones de idioma
   ========================================================== */

/* Expande desde el borde del tab hacia la izquierda.
   max-width: 0 → 9rem con fade de opacidad para suavizar el reveal. */
.dfgt-switcher__panel {
  background: var(--dfgt-panel-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--dfgt-panel-border);
  border-right: none;
  border-radius: 0.5rem 0 0 0.5rem;
  /* box-shadow: -3px 0 16px rgba(0, 0, 0, 0.35); */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  padding: 0.5rem 0;
  pointer-events: none;
  transition:
    max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease;

  &.is-open {
    max-width: 9rem;
    opacity: 1;
    pointer-events: auto;
  }
}

/* ==========================================================
   6. GLOBO — botón de resetear a idioma original
   ========================================================== */

/* Al hacer click elimina la cookie googtrans y recarga la página.
   Se marca como is-active cuando no hay traducción activa. */
.dfgt-switcher__globe {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.25rem;
  flex-shrink: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  padding: 0.25rem;
  transition:
    background 0.2s,
    border-color 0.2s;

  & svg {
    width: 1.5rem;
    height: 1.5rem;
    stroke: var(--dfgt-text);
    stroke-width: 1.5;
    fill: none;
    transition: stroke 0.2s;
  }

  &:hover {
    background: var(--dfgt-accent);
    border-color: var(--dfgt-accent);

    & svg {
      stroke: #f5f5f5;
    }
  }

  &.is-active {
    background: var(--dfgt-accent);
    border-color: var(--dfgt-accent);

    & svg {
      stroke: #f5f5f5;
    }
  }
}

/* ==========================================================
   7. OPCIONES DE IDIOMA
   ========================================================== */

.dfgt-switcher__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  font-weight: 600;

  padding: 0.45rem 0.75rem;
  cursor: pointer;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: inherit;
  white-space: nowrap;
  color: var(--dfgt-text);

  &:hover,
  &.is-active {
    background-color: var(--dfgt-accent);
    color: var(--dfgt-text-active);
  }
}