/* =====================================================================
   Selector de Idioma Flotante — estilos del widget
   ===================================================================== */

.wpfls-container {
  position: fixed;
  z-index: 999999;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.2;
}

.wpfls-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 48px;
  min-width: 48px;
  padding: 0 14px;
  border-radius: 24px;
  background: var(--wpfls-bg, #ffffff);
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 6px 20px rgba(15, 23, 42, .14);
  cursor: pointer;
  color: var(--wpfls-icon, #1f2328);
  font-size: 20px;
  transition: transform .16s ease, box-shadow .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.wpfls-button.wpfls-icon-only { padding: 0; border-radius: 50%; width: 48px; }
.wpfls-button:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(15, 23, 42, .2); }
.wpfls-button:focus-visible { outline: 2px solid #1f6f5c; outline-offset: 2px; }
.wpfls-button .wpfls-code { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--wpfls-text, #3a4048); }
.wpfls-button .wpfls-label-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--wpfls-text, #3a4048);
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wpfls-flag-img {
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
}
.wpfls-button .wpfls-flag-img { width: 22px; height: 22px; border-radius: 4px; }

.wpfls-panel {
  position: absolute;
  width: 230px;
  max-height: 320px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, .06);
  border-radius: 14px;
  box-shadow: 0 16px 44px rgba(15, 23, 42, .2);
  padding: 6px;
  margin: 0;
  list-style: none;
  opacity: 0;
  transform: scale(.96);
  transform-origin: top;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
}
.wpfls-panel.wpfls-open { opacity: 1; transform: scale(1); pointer-events: auto; }

.wpfls-container.pos-bottom-right .wpfls-panel,
.wpfls-container.pos-bottom-left .wpfls-panel { bottom: 56px; transform-origin: bottom; }
.wpfls-container.pos-top-right .wpfls-panel,
.wpfls-container.pos-top-left .wpfls-panel { top: 56px; }
.wpfls-container.pos-bottom-right .wpfls-panel,
.wpfls-container.pos-top-right .wpfls-panel { right: 0; }
.wpfls-container.pos-bottom-left .wpfls-panel,
.wpfls-container.pos-top-left .wpfls-panel { left: 0; }

.wpfls-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 13.5px;
  color: #1f2328;
  outline: none;
}
.wpfls-item:hover, .wpfls-item:focus-visible { background: #f2f4f3; }
.wpfls-item[aria-checked="true"] { background: #eaf3f0; color: #1f6f5c; font-weight: 600; }

.wpfls-flag { font-size: 17px; line-height: 1; }
.wpfls-item-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpfls-check { flex-shrink: 0; opacity: 0; color: #1f6f5c; }
.wpfls-item[aria-checked="true"] .wpfls-check { opacity: 1; }

@media (prefers-color-scheme: dark) {
  .wpfls-button { background: var(--wpfls-bg, #1b1d22); border-color: rgba(255,255,255,.08); color: var(--wpfls-icon, #e7e9ec); }
  .wpfls-button .wpfls-code { color: var(--wpfls-text, #c7ccd1); }
  .wpfls-button .wpfls-label-text { color: var(--wpfls-text, #c7ccd1); }
  .wpfls-panel { background: #1b1d22; border-color: rgba(255,255,255,.08); }
  .wpfls-item { color: #e7e9ec; }
  .wpfls-item:hover, .wpfls-item:focus-visible { background: #26292f; }
  .wpfls-item[aria-checked="true"] { background: #173832; color: #5fcfb5; }
  .wpfls-check { color: #5fcfb5; }
}

/* =====================================================================
   Diseño predefinido "Premium": boton circular, degradado morado
   ---------------------------------------------------------------------
   Se activa eligiendo el "Estilo predefinido" en Ajustes > Selector de
   Idioma; el plugin agrega la clase ".wpfls-theme-premium" al
   contenedor del boton (ver "buttonStyle" en switcher.js). Cambia la
   forma, la sombra, la tipografia y los colores del boton y de la
   lista desplegable, con un boton circular, brillo animado y un panel
   con efecto de vidrio esmerilado (blur).

   Los 3 colores personalizables de los ajustes (fondo, texto e iconos)
   siguen funcionando con este estilo: se guardan como las variables
   --wpfls-bg, --wpfls-text y --wpfls-icon en el propio contenedor (ver
   applyCustomColors() en switcher.js), y las reglas de este estilo usan
   esas variables con su propio color de marca como valor por defecto:
   "background: var(--wpfls-bg, #color-del-estilo)". Asi, si esos campos
   se dejan vacios se ve el color del estilo, y si se escribe un color
   propio, ese gana sobre el del estilo sin tocar nada mas.

   El codigo y el nombre del idioma se ocultan siempre en este estilo
   (aunque la "Apariencia del boton" elegida arriba sea "bandera +
   codigo/nombre") para mantener el boton circular. Si eliges la
   apariencia "Solo codigo de idioma (sin icono)" junto con este estilo,
   el boton se vera vacio, ya que no hay bandera ni icono que mostrar en
   el circulo; en ese caso usa una apariencia con bandera o globo.

   ¿Quieres un diseño distinto a este, o ajustar algun detalle? Usa el
   campo "CSS personalizado" de los ajustes: se agrega siempre, sin
   importar el estilo elegido aqui, y admite cualquier CSS dirigido a
   ".wpfls-container", ".wpfls-button", ".wpfls-panel" o ".wpfls-item".
   ===================================================================== */

/* --- Premium: boton circular con degradado morado, brillo animado y
   panel con efecto de vidrio esmerilado (blur). --- */
.wpfls-theme-premium .wpfls-button {
  position: relative;
  width: 54px;
  height: 54px;
  min-width: 54px;
  padding: 0;
  gap: 0;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  background: var(--wpfls-bg, linear-gradient(135deg, #8b5cf6 0%, #7c3aed 45%, #5b21b6 100%));
  color: var(--wpfls-icon, #ffffff);
  box-shadow:
    0 6px 18px rgba(124, 58, 237, .40),
    0 0 0 4px rgba(124, 58, 237, .10),
    inset 0 1px 2px rgba(255, 255, 255, .35);
  animation: wpfls-theme-premium-glow 3s ease-in-out infinite;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, filter .25s ease;
}
.wpfls-theme-premium .wpfls-button:hover {
  transform: translateY(-3px) scale(1.08);
  filter: brightness(1.08);
  animation: none;
  box-shadow:
    0 10px 28px rgba(124, 58, 237, .50),
    0 0 0 6px rgba(124, 58, 237, .12),
    0 0 25px rgba(168, 85, 247, .35),
    inset 0 1px 3px rgba(255, 255, 255, .4);
}
.wpfls-theme-premium .wpfls-button:active { transform: scale(.94); }
.wpfls-theme-premium .wpfls-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(168, 85, 247, .25), 0 8px 25px rgba(124, 58, 237, .45);
}
.wpfls-theme-premium .wpfls-button::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 80px;
  top: -12px;
  left: -45px;
  background: rgba(255, 255, 255, .25);
  transform: rotate(25deg);
  pointer-events: none;
  transition: left .6s ease;
}
.wpfls-theme-premium .wpfls-button:hover::before { left: 75px; }
.wpfls-theme-premium .wpfls-button .wpfls-flag-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .75);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .20);
  transition: transform .25s ease, box-shadow .25s ease;
}
.wpfls-theme-premium .wpfls-button:hover .wpfls-flag-img {
  transform: scale(1.08) rotate(3deg);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .25);
}
.wpfls-theme-premium .wpfls-button.wpfls-icon-only { width: 56px; height: 56px; min-width: 56px; padding: 0; }
.wpfls-theme-premium .wpfls-button .wpfls-code,
.wpfls-theme-premium .wpfls-button .wpfls-label-text { display: none; }

.wpfls-theme-premium .wpfls-panel {
  width: 230px;
  padding: 7px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(124, 58, 237, .15);
  box-shadow: 0 20px 50px rgba(76, 29, 149, .20), 0 8px 25px rgba(0, 0, 0, .08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: scale(.92);
}

.wpfls-theme-premium .wpfls-item {
  padding: 10px 11px;
  border-radius: 12px;
  color: #27213a;
  transition: background .2s ease, transform .2s ease, color .2s ease;
}
.wpfls-theme-premium .wpfls-item:hover,
.wpfls-theme-premium .wpfls-item:focus-visible {
  background: linear-gradient(135deg, rgba(139, 92, 246, .12), rgba(124, 58, 237, .07));
  color: #6d28d9;
  transform: translateX(3px);
}
.wpfls-theme-premium .wpfls-item[aria-checked="true"] {
  background: linear-gradient(135deg, #f0e7ff, #e9d5ff);
  color: #6d28d9;
  font-weight: 700;
}
.wpfls-theme-premium .wpfls-check { color: #7c3aed; }
.wpfls-theme-premium .wpfls-item .wpfls-flag { transition: transform .2s ease; }
.wpfls-theme-premium .wpfls-item:hover .wpfls-flag { transform: scale(1.12); }

@media (prefers-color-scheme: dark) {
  .wpfls-theme-premium .wpfls-panel {
    background: rgba(24, 18, 35, .96);
    border-color: rgba(168, 85, 247, .20);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .45), 0 0 30px rgba(124, 58, 237, .12);
  }
  .wpfls-theme-premium .wpfls-item { color: #f3e8ff; }
  .wpfls-theme-premium .wpfls-item:hover,
  .wpfls-theme-premium .wpfls-item:focus-visible { background: rgba(139, 92, 246, .15); color: #c4b5fd; }
  .wpfls-theme-premium .wpfls-item[aria-checked="true"] { background: rgba(124, 58, 237, .25); color: #c4b5fd; }
}

@keyframes wpfls-theme-premium-glow {
  0% {
    box-shadow: 0 6px 18px rgba(124, 58, 237, .40), 0 0 0 4px rgba(124, 58, 237, .08);
  }
  50% {
    box-shadow: 0 8px 24px rgba(124, 58, 237, .48), 0 0 0 6px rgba(124, 58, 237, .12), 0 0 22px rgba(168, 85, 247, .20);
  }
  100% {
    box-shadow: 0 6px 18px rgba(124, 58, 237, .40), 0 0 0 4px rgba(124, 58, 237, .08);
  }
}

/* =====================================================================
   Ajustes necesarios para integrar Google Translate de forma limpia
   ===================================================================== */

/* Oculta el widget original de Google Translate: solo usamos su motor,
   nuestro propio botón es la interfaz visible. */
#google_translate_element.wpfls-gt-hidden {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* Banner superior que Google inserta al activar una traducción (bandera,
   selector de idioma y botón de cerrar). Las clases internas de ese
   banner cambian entre versiones del widget (a veces
   ".goog-te-banner-frame", a veces una clase con codigo como
   ".VIpgJd-..."), asi que lo ocultamos por ".skiptranslate": la marca
   que Google usa siempre, en todas sus versiones, para ese tipo de
   elementos. El script del switcher refuerza este ocultamiento por si
   el widget de Google gana la "pelea" de especificidad CSS. */
.skiptranslate:not(#google_translate_element),
.goog-te-banner-frame,
[id^=":"][id$=".container"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
}
body { top: 0 !important; }
.goog-te-gadget { display: none !important; }
.goog-te-gadget-icon { display: none !important; }

/* Burbuja/tooltip al pasar el cursor sobre texto traducido, y el aviso
   "Translating..." que Google muestra unos instantes al cambiar de idioma. */
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-te-spinner-pos {
  display: none !important;
}

/* Quita el subrayado/resaltado que Google añade al texto traducido. */
.goog-text-highlight { background: none !important; box-shadow: none !important; }