/* DAT Float 3D — CSS v1.0.0 — DATXALE */

#dat3d-root {
  position: fixed;
  z-index: 99999;
  bottom: 32px;
  right: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  pointer-events: none;
}
#dat3d-root.pos-izquierda {
  right: auto;
  left: 24px;
  align-items: flex-start;
}

/* ── WRAPPER de cada botón ── */
.dat3d-btn-wrap {
  position: relative;
  display: flex;
  align-items: center;
  pointer-events: all;
  cursor: pointer;
}
#dat3d-root.pos-izquierda .dat3d-btn-wrap {
  flex-direction: row-reverse;
}

/* ── CANVAS THREE.JS (orbe 3D central) ── */
#dat3d-canvas-wrap {
  position: fixed;
  bottom: 32px;
  right: 24px;
  z-index: 99998;
  pointer-events: none;
  transition: right .3s ease, left .3s ease, bottom .3s ease;
}
#dat3d-canvas-wrap.pos-izquierda {
  right: auto;
  left: 24px;
}
#dat3d-canvas {
  display: block;
}

/* ── BOTÓN principal ── */
.dat3d-btn {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  position: relative;
  z-index: 2;
  transition: transform .22s cubic-bezier(.175,.885,.32,1.275),
              box-shadow .22s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.dat3d-btn:hover {
  transform: scale(1.12) translateY(-3px);
  box-shadow: 0 12px 36px rgba(0,0,0,.3);
}
.dat3d-btn:active {
  transform: scale(.95);
}
.dat3d-btn svg {
  width: 26px; height: 26px;
  fill: #fff;
  pointer-events: none;
}

/* ── TOOLTIP ── */
.dat3d-tooltip {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(20,20,20,.92);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  padding: 7px 13px;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  transform: translateY(-50%) translateX(6px);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.dat3d-tooltip::after {
  content: '';
  position: absolute;
  right: -7px; top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: rgba(20,20,20,.92);
  border-right: none;
}
#dat3d-root.pos-izquierda .dat3d-tooltip {
  right: auto;
  left: calc(100% + 14px);
  transform: translateY(-50%) translateX(-6px);
}
#dat3d-root.pos-izquierda .dat3d-tooltip::after {
  right: auto;
  left: -7px;
  border-left: none;
  border-right: 5px solid rgba(20,20,20,.92);
}
.dat3d-btn-wrap:hover .dat3d-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ── PULSO ── */
@keyframes dat3d-pulse {
  0%   { transform: scale(1); opacity: .7; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}
.dat3d-btn-pulse::before,
.dat3d-btn-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: dat3d-pulse 2.2s ease-out infinite;
  z-index: -1;
}
.dat3d-btn-pulse::after {
  animation-delay: .7s;
}

/* ── ESTADO ACTIVO (calling animation) ── */
@keyframes dat3d-ring {
  0%,100%  { transform: rotate(0deg); }
  10%,30%  { transform: rotate(-12deg); }
  20%,40%  { transform: rotate(12deg); }
  50%      { transform: rotate(0deg); }
}
.dat3d-calling { animation: dat3d-ring 1.5s ease-in-out infinite; }

/* ── BADGE de notificación ── */
.dat3d-badge {
  position: absolute;
  top: -3px; right: -3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #ff3b30;
  border: 2px solid #fff;
  z-index: 3;
  animation: dat3d-badge-pop .4s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes dat3d-badge-pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* ── LABEL FLOTANTE (texto junto al botón WA) ── */
.dat3d-label {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%; transform: translateY(-50%);
  background: #25d366;
  color: #fff;
  font-family: -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px; font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  animation: dat3d-label-in .4s .8s ease forwards;
}
@keyframes dat3d-label-in {
  to { opacity: 1; transform: translateY(-50%) translateX(-4px); }
}

/* ── RESPONSIVE ── */
@media (max-width: 480px) {
  #dat3d-root { bottom: 20px; right: 14px; gap: 12px; }
  #dat3d-root.pos-izquierda { right: auto; left: 14px; }
  .dat3d-btn  { width: 52px; height: 52px; }
  .dat3d-btn svg { width: 23px; height: 23px; }
  .dat3d-tooltip { display: none; }
  #dat3d-canvas-wrap { bottom: 20px; right: 14px; }
  #dat3d-canvas-wrap.pos-izquierda { right: auto; left: 14px; }
}