/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FLOATKIT — Variables & Reset
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  --fk-gap:        20px;       /* margen derecho e inferior */
  --fk-pill-h:     56px;
  --fk-radius:     999px;
  --fk-icon-size:  32px;
  --fk-shadow:     0 6px 24px rgba(0,0,0,.28);
  --fk-shadow-lg:  0 10px 36px rgba(0,0,0,.38);
  --fk-font:       'Segoe UI', system-ui, Arial, sans-serif;
  --fk-transit:    0.38s cubic-bezier(.4,0,.2,1);
 
  /* colores temáticos */
  --fk-wa-bg:      #25D366;
  --fk-wa-glow:    rgba(37,211,102,.45);
  --fk-loc-bg:     #ffffff;
  --fk-loc-color:  #111;
  --fk-toggle-bg:  #ffffff;
  --fk-toggle-color: #222;
}
 
/* ── Root container ── */
#fk-root {
  position: fixed;
  right: var(--fk-gap);
  bottom: var(--fk-gap);
  z-index: 999990;         /* alto para no quedar detrás de otros widgets del sitio */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  /* draggable va a mover este elemento */
  user-select: none;
  touch-action: none;
  box-sizing: border-box;
  isolation: isolate;      /* contexto de apilamiento propio, no interfiere con el z-index de la página */
  /* CLAVE: el contenedor NO capta clicks/toques por defecto.
     Así, cuando está colapsado (botones invisibles pero aún ocupando layout),
     el "hueco" invisible deja pasar clicks/scroll hacia el contenido de abajo
     en vez de bloquearlos. */
  pointer-events: none;
}
#fk-root * { box-sizing: border-box; }
/* Sólo los elementos realmente visibles/interactivos recuperan los eventos */
#fk-toggle,
.fk-btn-wrap {
  pointer-events: auto;
}
 
/* ── Grupo de botones ── */
#fk-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
 
/* Botón sin datos configurados → se oculta por completo (no ocupa espacio ni eventos) */
.fk-btn-wrap.fk-hidden {
  display: none !important;
}

/* ── Wrapper individual ── */
.fk-btn-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  transition: opacity var(--fk-transit), transform var(--fk-transit);
}
 
/* ── Pill base ── */
.fk-pill {
  display: inline-flex;
  align-items: center;
  height: var(--fk-pill-h);
  border-radius: var(--fk-radius);
  padding: 0 18px 0 10px;
  box-shadow: var(--fk-shadow);
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: var(--fk-font);
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, padding .4s ease;
  -webkit-tap-highlight-color: transparent;
}
.fk-pill:active { transform: scale(.95); }
.fk-pill:hover  { box-shadow: var(--fk-shadow-lg); transform: translateY(-2px) scale(1.02); }
 
/* Efecto reflejo interior */
.fk-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35) 0%, transparent 65%);
  pointer-events: none;
  animation: fk-shine 4s ease-in-out infinite;
}
@keyframes fk-shine {
  0%,100% { opacity: .7; transform: translate(0,0); }
  50%      { opacity: 1;  transform: translate(5%,5%); }
}
 
/* ── Icon ring ── */
.fk-icon-ring {
  width: var(--fk-icon-size);
  height: var(--fk-icon-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fk-icon-ring svg,
.fk-icon-ring img {
  width: 22px;
  height: 22px;
}
 
/* ── Label ── */
.fk-label {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  margin-left: 10px;
  transition: opacity .35s ease, transform .35s ease, max-width .4s ease, margin-left .4s ease;
  max-width: 200px;
  overflow: hidden;
}
/* Label oculto */
.fk-label.fk-label--hidden {
  opacity: 0;
  transform: translateX(12px);
  max-width: 0;
  margin-left: 0;
}
/* Pill sin texto → sólo icono */
.fk-pill.fk-pill--icon-only {
  padding: 0 12px;
}
 
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   UBICACIÓN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.fk-location-pill {
  background: var(--fk-loc-bg);
  color: var(--fk-loc-color);
}
.fk-location-pill .fk-icon-ring {
  background: #f0f0f0;
  color: #111;
}
.fk-location-pill .fk-icon-ring svg {
  animation: fk-pin-bounce 2.5s ease-in-out infinite;
}
@keyframes fk-pin-bounce {
  0%,100% { transform: translateY(0); }
  40%     { transform: translateY(-4px); }
  60%     { transform: translateY(-2px); }
}
.fk-location-pill .fk-label { color: #111; }
 
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   REDES SOCIALES — TikTok (default)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.fk-social-pill {
  background: #010101;
  color: #fff;
  transition: background .6s ease, transform .2s ease, box-shadow .2s ease, padding .4s ease;
}
.fk-social-pill .fk-label { color: #fff; }
.fk-social-icon-ring {
  background: transparent;
}
.fk-social-icon-ring img {
  border-radius: 6px;
  animation: fk-pulse-icon 2s ease-in-out infinite;
}
@keyframes fk-pulse-icon {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.18); }
}
 
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   WHATSAPP
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.fk-wa-pill {
  background: var(--fk-wa-bg);
  color: #fff;
}

.fk-wa-pill:hover {
  transform: translateY(-2px);
  box-shadow:
    0 10px 25px rgba(37,211,102,.25);
}

.fk-wa-ring {
  position: relative;
  background: rgba(255,255,255,.15);
}

.fk-wa-ring::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  animation: fk-wa-ring-pulse 2.5s ease-out infinite;
}

@keyframes fk-wa-ring-pulse {
  0% {
    transform: scale(1);
    opacity: .7;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
.fk-wa-ring svg {
  animation: fk-icon-float 3s ease-in-out infinite;
  transform-origin: center;
}

@keyframes fk-icon-float {
  0%,100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}
.fk-wa-pill .fk-label { color: #fff; }
 
/* Pulso exterior WhatsApp */
#fk-wa-wrap::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: var(--fk-radius);
  border: 2px solid rgba(37,211,102,.35);
  opacity: 0;
  pointer-events: none;
  animation: fk-wa-border-pulse 3s ease-out infinite;
}

@keyframes fk-wa-border-pulse {
  0% {
    transform: scale(1);
    opacity: .8;
  }

  70% {
    transform: scale(1.08);
    opacity: 0;
  }

  100% {
    transform: scale(1.08);
    opacity: 0;
  }
}
 
/* Badge */
.fk-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #e53935;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--fk-font);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  opacity: 0;
  transform: scale(0);
  transition: opacity .3s, transform .3s;
  animation: fk-badge-pop 4s ease-in-out infinite;
  pointer-events: none;
}
.fk-badge.fk-badge--visible {
  opacity: 1;
  transform: scale(1);
}
@keyframes fk-badge-swing {
  20% { transform: rotate(12deg) scale(1); }
  40% { transform: rotate(-8deg)  scale(1); }
  60% { transform: rotate(4deg)  scale(1); }
  80% { transform: rotate(-3deg) scale(1); }
  100%{ transform: rotate(0)     scale(1); }
}

@keyframes fk-badge-pop {
  0%,80%,100% {
    transform: scale(1);
  }

  85% {
    transform: scale(1.15);
  }

  90% {
    transform: scale(.95);
  }

  95% {
    transform: scale(1.08);
  }
}
 
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BOTÓN TOGGLE (colapsar)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#fk-toggle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--fk-toggle-bg);
  color: var(--fk-toggle-color);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--fk-shadow);
  flex-shrink: 0;
  transition: transform .25s ease, box-shadow .25s ease, background .3s;
  -webkit-tap-highlight-color: transparent;
  order: 99; /* siempre al final (abajo) */
}
#fk-toggle svg { width: 22px; height: 22px; transition: transform .3s; }
#fk-toggle:hover { transform: scale(1.08); box-shadow: var(--fk-shadow-lg); }
#fk-toggle:active { transform: scale(.93); }
 
/* Toggle cuando está colapsado — rota icono */
#fk-root.fk-collapsed #fk-toggle svg { transform: rotate(90deg); }
 
/* ── Estado colapsado ── */
#fk-root.fk-collapsed .fk-btn-wrap {
  opacity: 0;
  transform: translateY(12px) scale(.85);
  pointer-events: none;
}
/* Stagger de aparición al expandir */
#fk-root:not(.fk-collapsed) #fk-location-wrap {
  transition-delay: .1s;
}
#fk-root:not(.fk-collapsed) #fk-social-wrap {
  transition-delay: .06s;
}
#fk-root:not(.fk-collapsed) #fk-wa-wrap {
  transition-delay: 0s;
}
 
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MODAL UBICACIONES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#fk-loc-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  padding-bottom: 32px;
}
#fk-loc-modal.fk-modal--open {
  opacity: 1;
  pointer-events: all;
}
#fk-loc-modal-box {
  background: #fff;
  border-radius: 20px 20px 16px 16px;
  padding: 28px 24px 24px;
  width: min(92vw, 420px);
  position: relative;
  transform: translateY(32px);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
#fk-loc-modal.fk-modal--open #fk-loc-modal-box {
  transform: translateY(0);
}
#fk-loc-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #f0f0f0;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
#fk-loc-modal-close:hover { background: #e0e0e0; }
#fk-loc-modal-close svg { width: 16px; height: 16px; color: #333; }
#fk-loc-modal-title {
  font-family: var(--fk-font);
  font-size: 18px;
  font-weight: 700;
  color: #111;
  margin-bottom: 18px;
}
#fk-loc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#fk-loc-list li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #f6f6f6;
  text-decoration: none;
  color: #111;
  font-family: var(--fk-font);
  font-size: 14px;
  font-weight: 500;
  transition: background .2s, transform .15s;
}
#fk-loc-list li a:hover { background: #ebebeb; transform: translateX(3px); }
#fk-loc-list li a .fk-loc-pin {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #111;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
#fk-loc-list li a .fk-loc-pin svg { width: 18px; height: 18px; fill: #fff; }
#fk-loc-list li a .fk-loc-info strong { display: block; }
#fk-loc-list li a .fk-loc-info small { color: #666; font-size: 12px; }
 
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MOBILE ADJUSTMENTS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 640px) {
  :root {
    --fk-pill-h: 52px;
    --fk-icon-size: 30px;
  }
  .fk-label { font-size: 14px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ACCESIBILIDAD
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (prefers-reduced-motion: reduce) {
  #fk-root, #fk-root * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}