/* ════════════════════════════════════════════════
   whatsapp-flotante.css — Universolibro
   Botón flotante de WhatsApp
   Móvil: circular · Escritorio: rectangular (pill)
   Usa tokens de base.css — no los redefine
   ════════════════════════════════════════════════ */

.wa-flotante {
  /* ── Posición fija sobre todo el contenido ── */
  position: fixed;
  right:  clamp(1rem, 4vw, 1.75rem);
  bottom: clamp(1rem, 4vw, 1.75rem);
  z-index: 999;

  display:         inline-flex;
  align-items:     center;
  gap:              0.6rem;

  background:    var(--c-verde-ws);
  color:         #fff;
  text-decoration: none;

  box-shadow: var(--sh-lg);

  /* Transición suave para todo: tamaño, sombra, color */
  transition:
    background  var(--tr-n),
    transform   var(--tr-n),
    box-shadow  var(--tr-n),
    width       var(--tr-n),
    padding     var(--tr-n);

  /* Evita selección de texto accidental en doble-tap */
  -webkit-tap-highlight-color: transparent;
}

/* ════════════════════════════════════════════════
   MÓVIL FIRST → forma circular (por defecto)
   ════════════════════════════════════════════════ */
.wa-flotante {
  width:           58px;
  height:          58px;
  min-width:       44px;   /* mínimo táctil WCAG 2.5.5, ya superado */
  min-height:      44px;
  border-radius:   50%;
  justify-content: center;
  padding: 0;
}

.wa-flotante__icono {
  width:  28px;
  height: 28px;
  flex-shrink: 0;
}

/* En móvil el texto se oculta visualmente,
   pero permanece accesible para lectores de pantalla */
.wa-flotante__texto {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:    -1px;
  overflow:   hidden;
  clip:       rect(0,0,0,0);
  white-space: nowrap;
  border:     0;
}

/* ════════════════════════════════════════════════
   ESCRITORIO → forma rectangular tipo "pill"
   con ícono + texto visible
   ════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .wa-flotante {
    width:         auto;
    height:        56px;
    padding:       0 1.5rem 0 1.25rem;
    border-radius: var(--r-pill);
  }

  .wa-flotante__icono {
    width:  24px;
    height: 24px;
  }

  /* En escritorio, el texto vuelve a ser visible normalmente */
  .wa-flotante__texto {
    position:    static;
    width:       auto;
    height:      auto;
    margin:      0;
    padding:     0;
    overflow:    visible;
    clip:        auto;
    white-space: nowrap;
    font-family: var(--f-titulo);
    font-weight: 800;
    font-size:   var(--t-sm);
    letter-spacing: 0.01em;
  }
}

/* ════════════════════════════════════════════════
   ESTADOS INTERACTIVOS
   ════════════════════════════════════════════════ */

/* Hover — solo dispositivos con puntero preciso (evita "hover pegado" en touch) */
@media (hover: hover) and (pointer: fine) {
  .wa-flotante:hover {
    background: var(--c-verde-ws-h);
    transform:  translateY(-3px) scale(1.04);
    box-shadow: var(--sh-xl);
  }
}

/* Focus visible — navegación por teclado (WCAG 2.4.7) */
.wa-flotante:focus-visible {
  outline:        3px solid #fff;
  outline-offset: 3px;
  box-shadow: var(--sh-xl), 0 0 0 5px rgba(37, 211, 102, .35);
}

/* Active — feedback táctil inmediato al presionar */
.wa-flotante:active {
  transform:  translateY(0) scale(0.96);
  background: var(--c-verde-ws-h);
}

/* ════════════════════════════════════════════════
   ANIMACIÓN DE ENTRADA SUAVE AL CARGAR LA PÁGINA
   ════════════════════════════════════════════════ */
@keyframes wa-aparecer {
  from { opacity: 0; transform: translateY(16px) scale(0.85); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.wa-flotante {
  animation: wa-aparecer 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

/* ════════════════════════════════════════════════
   PULSO SUAVE PERIÓDICO (llama la atención sin ser invasivo)
   Se detiene en focus/hover para no distraer durante la interacción
   ════════════════════════════════════════════════ */
@keyframes wa-pulso {
  0%, 100% { box-shadow: var(--sh-lg), 0 0 0 0 rgba(37, 211, 102, .45); }
  50%      { box-shadow: var(--sh-lg), 0 0 0 10px rgba(37, 211, 102, 0); }
}

.wa-flotante {
  animation:
    wa-aparecer 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both,
    wa-pulso 2.6s ease-in-out 1.2s infinite;
}

.wa-flotante:hover,
.wa-flotante:focus-visible,
.wa-flotante:active {
  animation: none; /* el pulso no compite con la interacción activa */
}

/* ════════════════════════════════════════════════
   RESPETO A MOVIMIENTO REDUCIDO (WCAG 2.3.3)
   ════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .wa-flotante {
    animation: none;
  }
}

/* ════════════════════════════════════════════════
   MODO OSCURO — mismo verde de marca, sin cambios,
   pero reforzamos el contraste del borde de foco
   ════════════════════════════════════════════════ */
[data-tema="oscuro"] .wa-flotante:focus-visible {
  outline-color: #fff;
  box-shadow: var(--sh-xl), 0 0 0 5px rgba(37, 211, 102, .5);
}

/* ════════════════════════════════════════════════
   AJUSTE: si existe el botón de "volver arriba"
   u otro elemento flotante, evita que se superpongan
   ════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .wa-flotante {
    right:  1rem;
    bottom: 1rem;
  }
}