/* ============================================================================
   soporte.css · BTG · el botón flotante de soporte por WhatsApp.

   Abajo a la derecha, en todas las pantallas (login incluido: quien no
   consigue entrar es justo quien más lo necesita). En reposo es un disco
   con el icono; al pasar el ratón o recibir el foco se despliega hacia la
   izquierda y enseña el texto. El marcado está en index.html (un <a> con
   target _blank); aquí solo la forma.

   El verde es el de la marca de WhatsApp y no corresponde a ningún token
   del tema, así que va como variable propia, igual que las tintas del
   filo de la tarjeta en marca.css. El resto sale del tema.
   ========================================================================== */

:root {
  --btg-whatsapp: #25d366;
  --btg-whatsapp-tinta: #ffffff;
}

.btg-whatsapp {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right));
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 85;                       /* bajo los toasts (90) y la pila de progreso (95) */
  display: inline-flex;
  align-items: center;
  height: 54px;
  padding: 0;
  border-radius: 999px;
  background: var(--btg-whatsapp);
  color: var(--btg-whatsapp-tinta);
  text-decoration: none;
  box-shadow:
    0 10px 30px -10px color-mix(in srgb, var(--btg-whatsapp) 70%, transparent),
    0 2px 6px color-mix(in srgb, #000 25%, transparent);
  transition: transform .22s ease, box-shadow .22s ease;
  -webkit-tap-highlight-color: transparent;
}
.btg-whatsapp:hover,
.btg-whatsapp:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    0 16px 36px -10px color-mix(in srgb, var(--btg-whatsapp) 80%, transparent),
    0 4px 10px color-mix(in srgb, #000 28%, transparent);
  text-decoration: none;
  color: var(--btg-whatsapp-tinta);
}
.btg-whatsapp:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--btg-whatsapp) 40%, transparent), 0 16px 36px -10px color-mix(in srgb, var(--btg-whatsapp) 80%, transparent); }
.btg-whatsapp:active { transform: translateY(0); }

/* El icono: un disco fijo de 54px. */
.btg-whatsapp__icono {
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
}
.btg-whatsapp__icono svg { width: 28px; height: 28px; }

/* El texto: plegado (ancho cero) en reposo, se despliega al pasar el ratón
   o al enfocar. La anchura se anima con max-width para que el disco no se
   mueva: el <a> crece hacia la izquierda porque está anclado a la derecha. */
.btg-whatsapp__texto {
  display: block;
  max-width: 0;
  padding-right: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  font: 600 14px/1 var(--fuente-titulos, var(--fuente));
  letter-spacing: .01em;
  transition: max-width .32s ease, opacity .18s ease .06s, padding-right .32s ease;
}
.btg-whatsapp:hover .btg-whatsapp__texto,
.btg-whatsapp:focus-visible .btg-whatsapp__texto {
  max-width: 240px;
  padding-right: 20px;
  opacity: 1;
}

/* Un anillo que late detrás del disco, discreto, para que se note que está
   ahí sin gritar. Se para al pasar el ratón y con reduced-motion. */
.btg-whatsapp::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--btg-whatsapp);
  opacity: 0;
  z-index: -1;
  animation: btg-ws-latido 3.2s ease-out infinite;
}
.btg-whatsapp:hover::before, .btg-whatsapp:focus-visible::before { animation: none; }
@keyframes btg-ws-latido {
  0%   { transform: scale(1);    opacity: .45; }
  60%  { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* En pantallas estrechas el pasajero tiene el pulgar, no el ratón: solo
   el disco, un poco más pequeño, y el texto solo con foco de teclado. */
@media (max-width: 560px) {
  .btg-whatsapp { height: 50px; right: calc(14px + env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); }
  .btg-whatsapp__icono { width: 50px; height: 50px; }
  .btg-whatsapp__icono svg { width: 26px; height: 26px; }
  .btg-whatsapp:hover .btg-whatsapp__texto { max-width: 0; padding-right: 0; opacity: 0; }
  .btg-whatsapp:focus-visible .btg-whatsapp__texto { max-width: 240px; padding-right: 18px; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .btg-whatsapp, .btg-whatsapp__texto { transition: none; }
  .btg-whatsapp::before { animation: none; }
}

@media print { .btg-whatsapp { display: none; } }