/* =========================================================
   KING'S CAVE — WHATSAPP GLOBAL
   Botón flotante para página pública + aplicación
========================================================= */

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

.kc-whatsapp-float {
  position: fixed !important;

  right: 22px !important;
  bottom: calc(
    22px + env(safe-area-inset-bottom)
  ) !important;

  z-index: 9990 !important;

  width: 58px !important;
  height: 58px !important;

  padding: 0 !important;
  margin: 0 !important;

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  flex-shrink: 0 !important;

  color: #ffffff !important;

  background:
    linear-gradient(
      145deg,
      #2ee66b 0%,
      #25d366 52%,
      #1ebe5d 100%
    ) !important;

  border:
    1px solid
    rgba(255, 255, 255, 0.38) !important;

  border-radius: 50% !important;

  text-decoration: none !important;

  box-shadow:
    0 12px 26px
      rgba(0, 0, 0, 0.22),
    0 5px 12px
      rgba(0, 0, 0, 0.12),
    0 0 0 5px
      rgba(37, 211, 102, 0.11) !important;

  cursor: pointer !important;

  overflow: visible !important;

  isolation: isolate;

  -webkit-tap-highlight-color:
    transparent;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease !important;
}


/* =========================================================
   HOVER
========================================================= */

.kc-whatsapp-float:hover {
  color: #ffffff !important;

  background:
    linear-gradient(
      145deg,
      #32ea70 0%,
      #25d366 48%,
      #1aad52 100%
    ) !important;

  transform:
    translateY(-3px)
    scale(1.045);

  box-shadow:
    0 16px 34px
      rgba(0, 0, 0, 0.27),
    0 7px 16px
      rgba(0, 0, 0, 0.13),
    0 0 0 7px
      rgba(37, 211, 102, 0.12) !important;
}


/* =========================================================
   FOCUS
========================================================= */

.kc-whatsapp-float:focus-visible {
  outline:
    3px solid
    rgba(191, 153, 90, 0.72);

  outline-offset: 5px;
}


/* =========================================================
   OCULTAR SVG ANTERIOR

   El JS actualmente está insertando un SVG.
   Lo ocultamos porque el dibujo anterior
   no representa correctamente el logo.
========================================================= */

.kc-whatsapp-float > svg {
  display: none !important;
}


/* =========================================================
   LOGO DE WHATSAPP

   Se genera directamente desde CSS para evitar
   problemas con el SVG insertado desde JavaScript.
========================================================= */

.kc-whatsapp-float::before {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: 31px;
  height: 31px;

  transform:
    translate(-50%, -50%);

  background-color: #ffffff;

  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L.1 480l117.7-30.9c32.4 17.7 68.9 27 106 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.8l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.4-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.1-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.6-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E");

  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L.1 480l117.7-30.9c32.4 17.7 68.9 27 106 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.8l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.4-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.1-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.6-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-size: contain;
  mask-size: contain;

  pointer-events: none;

  z-index: 2;
}


/* =========================================================
   TOOLTIP
========================================================= */

.kc-whatsapp-float__tooltip {
  position: absolute;

  right: calc(100% + 13px);

  top: 50%;

  transform:
    translateY(-50%)
    translateX(6px);

  min-width: max-content;

  padding:
    9px
    12px;

  color: #ffffff;

  background:
    #1d1a13;

  border:
    1px solid
    rgba(191, 153, 90, 0.28);

  border-radius: 3px;

  font-family:
    "Open Sans",
    Arial,
    Helvetica,
    sans-serif;

  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;

  white-space: nowrap;

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  box-shadow:
    0 10px 24px
    rgba(0, 0, 0, 0.22);

  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s ease;
}


/* Pequeña flecha del tooltip */

.kc-whatsapp-float__tooltip::after {
  content: "";

  position: absolute;

  top: 50%;
  right: -5px;

  width: 9px;
  height: 9px;

  background: #1d1a13;

  border-top:
    1px solid
    rgba(191, 153, 90, 0.20);

  border-right:
    1px solid
    rgba(191, 153, 90, 0.20);

  transform:
    translateY(-50%)
    rotate(45deg);
}


/* Mostrar tooltip */

.kc-whatsapp-float:hover
.kc-whatsapp-float__tooltip,
.kc-whatsapp-float:focus-visible
.kc-whatsapp-float__tooltip {
  opacity: 1;

  visibility: visible;

  transform:
    translateY(-50%)
    translateX(0);
}


/* =========================================================
   EFECTO SUAVE EXTERIOR
========================================================= */

.kc-whatsapp-float::after {
  content: "";

  position: absolute;

  inset: -6px;

  z-index: -1;

  border-radius: 50%;

  border:
    1px solid
    rgba(37, 211, 102, 0.18);

  opacity: 0.8;

  pointer-events: none;
}


/* =========================================================
   MÓVIL
========================================================= */

@media (max-width: 640px) {

  .kc-whatsapp-float {
    right: 16px !important;

    bottom:
      calc(
        16px +
        env(safe-area-inset-bottom)
      ) !important;

    width: 56px !important;
    height: 56px !important;

    box-shadow:
      0 11px 25px
        rgba(0, 0, 0, 0.22),
      0 0 0 4px
        rgba(37, 211, 102, 0.11)
        !important;
  }


  .kc-whatsapp-float::before {
    width: 30px;
    height: 30px;
  }


  .kc-whatsapp-float__tooltip {
    display: none;
  }

}


/* =========================================================
   PANTALLAS MUY PEQUEÑAS
========================================================= */

@media (max-width: 390px) {

  .kc-whatsapp-float {
    right: 14px !important;

    bottom:
      calc(
        14px +
        env(safe-area-inset-bottom)
      ) !important;

    width: 54px !important;
    height: 54px !important;
  }


  .kc-whatsapp-float::before {
    width: 29px;
    height: 29px;
  }

}


/* =========================================================
   ACCESIBILIDAD
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .kc-whatsapp-float,
  .kc-whatsapp-float__tooltip {
    transition:
      none !important;
  }


  .kc-whatsapp-float:hover {
    transform: none;
  }

}