/* ============================================================
   DataTrust WhatsApp · botón flotante
   Todo el aspecto se controla con las variables --dtwa-* que
   inyecta PHP desde los ajustes. Sin imágenes: SVG en línea.
   ============================================================ */
.dtwa{
  position:fixed;z-index:99990;bottom:var(--dtwa-dy,28px);
  display:inline-flex;align-items:center;gap:10px;
  text-decoration:none;line-height:1;
  font-family:inherit;
  -webkit-tap-highlight-color:transparent;
}
.dtwa--right{right:var(--dtwa-dx,28px)}
.dtwa--left{left:var(--dtwa-dx,28px);flex-direction:row-reverse}

.dtwa__ico{
  width:var(--dtwa-size,60px);height:var(--dtwa-size,60px);
  border-radius:50%;background:var(--dtwa-bg,#5FCE72);color:var(--dtwa-ico,#fff);
  display:flex;align-items:center;justify-content:center;flex:none;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.35);
  transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s;
}
.dtwa__ico svg{width:62%;height:62%;display:block}
.dtwa:hover .dtwa__ico{transform:scale(1.06);box-shadow:0 14px 32px -8px rgba(0,0,0,.42)}
.dtwa:active .dtwa__ico{transform:scale(.97)}

/* Halo suave alrededor del círculo */
.dtwa--halo .dtwa__ico{
  box-shadow:0 10px 26px -8px rgba(0,0,0,.35),
             0 0 0 10px color-mix(in srgb,var(--dtwa-bg,#5FCE72) 16%,transparent),
             0 0 0 20px color-mix(in srgb,var(--dtwa-bg,#5FCE72) 7%,transparent);
}
@supports not (color: color-mix(in srgb,#000 50%,#fff)){
  .dtwa--halo .dtwa__ico{box-shadow:0 10px 26px -8px rgba(0,0,0,.35),0 0 0 10px rgba(95,206,114,.16),0 0 0 20px rgba(95,206,114,.07)}
}

/* Texto opcional al lado */
.dtwa__txt{
  background:#fff;color:#17161A;font-size:14px;font-weight:600;
  padding:11px 16px;border-radius:100px;white-space:nowrap;
  box-shadow:0 8px 22px -10px rgba(0,0,0,.35);
}

.dtwa--nodesk{display:none}
@media(max-width:781px){
  .dtwa{bottom:var(--dtwa-my,18px)}
  .dtwa--right{right:var(--dtwa-mx,18px)}
  .dtwa--left{left:var(--dtwa-mx,18px)}
  .dtwa--nodesk{display:inline-flex}
  .dtwa--nomob{display:none}
  /* En móvil el texto ocupa demasiado: solo el círculo. */
  .dtwa--withtext .dtwa__txt{display:none}
}
@media(prefers-reduced-motion:reduce){
  .dtwa__ico{transition:none}
}
@media print{.dtwa{display:none}}