/* ==========================================================
   FLOATING WHATSAPP CTA
   El componente es generado dinámicamente por JavaScript
   dentro de #whatsapp-floating-root.
   ========================================================== */

#whatsapp-floating-root {
  /*
   * Configuración visual predeterminada.
   * JavaScript podrá sobrescribir estas variables por proyecto.
   */
  --wa-background: #25d366;
  --wa-text-color: #ffffff;
  --wa-accent-color: #ffffff;

  --wa-desktop-top: 54dvh;
  --wa-mobile-top: 42dvh;

  --wa-collapsed-width: 58px;
  --wa-expanded-width: 304px;
  --wa-desktop-height: 116px;

  --wa-mobile-width: 46px;
  --wa-mobile-height: 66px;

  --wa-border-radius: 16px;
  --wa-shadow: -8px 10px 32px rgb(0 0 0 / 22%);

  --wa-transition:
    280ms cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * Mientras el contenedor permanezca vacío no genera
 * ninguna caja visual ni afecta el layout.
 */
#whatsapp-floating-root:empty {
  display: none;
}

/* ==========================================================
   CONTENEDOR FIJO
   ========================================================== */

.wa-floating {
  position: fixed;
  z-index: 9998;

  top: 54vh;
  top: var(--wa-desktop-top);
  right: 0;

  box-sizing: border-box;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform:
    translate3d(100%, -50%, 0);

  transition:
    opacity 220ms ease,
    visibility 220ms ease,
    transform var(--wa-transition);

  isolation: isolate;
}

/*
 * JavaScript agregará is-visible cuando corresponda
 * mostrar el componente.
 */
.wa-floating.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform:
    translate3d(0, -50%, 0);
}

/* ==========================================================
   ENLACE / BOTÓN PRINCIPAL
   ========================================================== */

.wa-floating__link {
  display: flex;
  align-items: stretch;

  width: var(--wa-collapsed-width);
  height: var(--wa-desktop-height);

  box-sizing: border-box;
  overflow: hidden;

  color: var(--wa-text-color);
  background-color: var(--wa-background);

  border: 0;
  border-radius:
    var(--wa-border-radius)
    0
    0
    var(--wa-border-radius);

  box-shadow:
    -4px 6px 22px rgb(0 0 0 / 18%);

  font-family: inherit;
  text-decoration: none;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  transition:
    width var(--wa-transition),
    background-color 220ms ease,
    box-shadow var(--wa-transition);

  will-change: width;
}

/*
 * Estado accesible para navegación con teclado.
 */
.wa-floating__link:focus-visible {
  outline: 3px solid var(--wa-accent-color);
  outline-offset: 4px;
}

/* ==========================================================
   ÍCONO
   ========================================================== */

.wa-floating__icon {
  display: flex;
  flex: 0 0 var(--wa-collapsed-width);
  align-items: center;
  justify-content: center;

  width: var(--wa-collapsed-width);
  height: 100%;

  box-sizing: border-box;

  color: var(--wa-accent-color);

  transition:
    color 220ms ease,
    transform var(--wa-transition);
}

.wa-floating__icon svg {
  display: block;

  width: 30px;
  height: 30px;

  fill: currentColor;
}

/* ==========================================================
   CONTENIDO EXPANDIDO
   ========================================================== */

.wa-floating__content {
  display: flex;
  flex: 0 0
    calc(
      var(--wa-expanded-width) -
      var(--wa-collapsed-width)
    );

  flex-direction: column;
  justify-content: center;

  min-width: 0;

  box-sizing: border-box;
  padding:
    16px
    24px
    16px
    2px;

  opacity: 0;

  transform:
    translate3d(12px, 0, 0);

  transition:
    opacity 160ms ease,
    transform 220ms ease;

  pointer-events: none;
}

.wa-floating__eyebrow,
.wa-floating__title,
.wa-floating__description {
  display: block;

  margin: 0;
  padding: 0;

  white-space: nowrap;
}

.wa-floating__eyebrow {
  margin-bottom: 5px;

  color: currentColor;

  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  opacity: 0.7;
}

.wa-floating__title {
  margin-bottom: 6px;

  color: currentColor;

  font-size: 1rem;
  font-weight: 700;
  line-height: 1.15;
}

.wa-floating__description {
  color: currentColor;

  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.25;

  opacity: 0.84;
}

.wa-floating__arrow {
  display: inline-block;

  margin-left: 5px;

  font-size: 1rem;
  line-height: 1;

  transition:
    transform 180ms ease;
}

/* ==========================================================
   EXPANSIÓN EN DESKTOP
   Solo aplica cuando existe un puntero preciso y hover real.
   ========================================================== */

@media (hover: hover) and (pointer: fine) {
  .wa-floating:hover .wa-floating__link,
  .wa-floating:focus-within .wa-floating__link {
    width: var(--wa-expanded-width);

    box-shadow: var(--wa-shadow);
  }

  .wa-floating:hover .wa-floating__content,
  .wa-floating:focus-within .wa-floating__content {
    opacity: 1;

    transform:
      translate3d(0, 0, 0);
  }

  .wa-floating:hover .wa-floating__icon,
  .wa-floating:focus-within .wa-floating__icon {
    transform:
      scale(1.04);
  }

  .wa-floating:hover .wa-floating__arrow,
  .wa-floating:focus-within .wa-floating__arrow {
    transform:
      translateX(3px);
  }
}

/* ==========================================================
   MOBILE / DISPOSITIVOS TÁCTILES

   - No existe expansión.
   - No depende de hover.
   - El primer toque abre directamente WhatsApp.
   - Se oculta mientras el usuario llena el formulario.
   ========================================================== */

@media
  (max-width: 767.98px),
  (hover: none) and (pointer: coarse) {

  #whatsapp-floating-root {
    --wa-mobile-width: 48px;
    --wa-mobile-height: 64px;
    --wa-mobile-radius: 14px;
  }

  /* ----------------------------------------------------------
     Posicionamiento
     ---------------------------------------------------------- */

  .wa-floating {
    top: 42vh;
    top: var(--wa-mobile-top);

    right: 0;

    /*
     * Estado inicial fuera del viewport.
     * La clase is-visible lo desplaza hacia dentro.
     */
    transform:
      translate3d(100%, -50%, 0);

    transition:
      opacity 180ms ease,
      visibility 180ms ease,
      transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .wa-floating.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform:
      translate3d(0, -50%, 0);
  }

  /* ----------------------------------------------------------
     Botón compacto

     Se incluyen explícitamente hover y focus-within para evitar
     que navegadores móviles o emuladores conserven accidentalmente
     el ancho expandido de desktop.
     ---------------------------------------------------------- */

  .wa-floating__link,
  .wa-floating:hover .wa-floating__link,
  .wa-floating:focus-within .wa-floating__link {
    width: var(--wa-mobile-width);
    min-width: var(--wa-mobile-width);
    max-width: var(--wa-mobile-width);

    height: var(--wa-mobile-height);
    min-height: var(--wa-mobile-height);
    max-height: var(--wa-mobile-height);

    padding: 0;

    border-radius:
      var(--wa-mobile-radius)
      0
      0
      var(--wa-mobile-radius);

    box-shadow:
      -3px 5px 18px rgb(0 0 0 / 20%);

    /*
     * Evita retrasos, zoom accidental y estados hover simulados.
     */
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;

    /*
     * El tamaño deja de animarse en mobile.
     */
    transition:
      transform 120ms ease,
      background-color 180ms ease,
      box-shadow 180ms ease;
  }

  /* ----------------------------------------------------------
     Ícono
     ---------------------------------------------------------- */

  .wa-floating__icon,
  .wa-floating:hover .wa-floating__icon,
  .wa-floating:focus-within .wa-floating__icon {
    flex: 0 0 var(--wa-mobile-width);

    width: var(--wa-mobile-width);
    min-width: var(--wa-mobile-width);
    max-width: var(--wa-mobile-width);

    height: 100%;

    transform: none;
  }

  .wa-floating__icon svg {
    width: 25px;
    height: 25px;
  }

  /* ----------------------------------------------------------
     Contenido descriptivo

     Se elimina por completo del flujo visual en dispositivos
     táctiles. El enlace continúa conservando su aria-label.
     ---------------------------------------------------------- */

  .wa-floating__content,
  .wa-floating:hover .wa-floating__content,
  .wa-floating:focus-within .wa-floating__content {
    display: none;

    flex: 0 0 0;

    width: 0;
    min-width: 0;
    max-width: 0;

    padding: 0;

    opacity: 0;
    visibility: hidden;

    transform: none;

    pointer-events: none;
  }

  /* ----------------------------------------------------------
     Retroalimentación táctil
     ---------------------------------------------------------- */

  .wa-floating__link:active {
    transform: scale(0.95);

    box-shadow:
      -2px 3px 12px rgb(0 0 0 / 18%);
  }

  /*
   * El outline se dibuja hacia dentro para que no sea cortado
   * por estar pegado al borde derecho del viewport.
   */
  .wa-floating__link:focus-visible {
    outline:
      2px solid
      var(--wa-accent-color);

    outline-offset: -4px;
  }

  .wa-floating__link:focus:not(:focus-visible) {
    outline: none;
  }

  /* ----------------------------------------------------------
     Interacción con formularios

     whatsappFloating.js agrega is-form-active cuando un input,
     select o textarea recibe foco.
     ---------------------------------------------------------- */

  .wa-floating.is-form-active {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform:
      translate3d(100%, -50%, 0);
  }
}

/* ==========================================================
   MOBILE HORIZONTAL O PANTALLAS DE BAJA ALTURA
   ========================================================== */

@media
  (max-width: 767.98px) and (max-height: 520px),
  (hover: none) and (pointer: coarse) and (max-height: 520px) {

  #whatsapp-floating-root {
    --wa-mobile-width: 46px;
    --wa-mobile-height: 56px;
  }

  .wa-floating {
    top: 50vh;
    top: 50dvh;
  }

  .wa-floating__icon svg {
    width: 23px;
    height: 23px;
  }
}