/**
 * =====================================================
 * FLOTANTES FIX v5 - DEFINITIVO
 * Tablao Flamenco Las Setas
 * Fecha: 1 febrero 2026
 * =====================================================
 * 
 * PROBLEMA RESUELTO:
 * - chatbot.css tenía z-index: 999998 que ganaba a todo
 * - chatbot.css tenía bottom: 85px en móvil que subía mucho el chatbot
 * - scroll-to-top de Astra no se posicionaba correctamente
 * 
 * SOLUCIÓN:
 * - Especificidad MÁXIMA con html body div#id
 * - Valores hardcodeados (no variables CSS)
 * - z-index coherentes en orden correcto
 * - Reset completo de top/left para evitar conflictos
 * 
 * JERARQUÍA (de abajo a arriba):
 * 1. Chatbot: bottom 20px, z-index 999990
 * 2. Scroll-to-top: bottom 92px, z-index 999991
 * =====================================================
 */

/* =====================================================
   RESET - Eliminar cualquier posición heredada
===================================================== */

/* Reset para evitar que otros CSS interfieran */
html body div#tfs-chatbot,
html body #tfs-chatbot,
body div#tfs-chatbot,
body #tfs-chatbot,
div#tfs-chatbot,
#tfs-chatbot {
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
  transform: none !important;
}

html body a#ast-scroll-top,
html body #ast-scroll-top,
body a#ast-scroll-top,
body #ast-scroll-top,
a#ast-scroll-top,
#ast-scroll-top,
.ast-scroll-top {
  top: auto !important;
  left: auto !important;
  margin: 0 !important;
}

/* =====================================================
   DESKTOP (> 768px)
   Chatbot: esquina inferior derecha
   Scroll-top: encima del chatbot
===================================================== */

html body div#tfs-chatbot,
html body #tfs-chatbot,
body div#tfs-chatbot,
body #tfs-chatbot,
div#tfs-chatbot,
#tfs-chatbot {
  position: fixed !important;
  right: 20px !important;
  bottom: 20px !important;
  z-index: 999990 !important;
}

html body a#ast-scroll-top,
html body #ast-scroll-top,
body a#ast-scroll-top,
body #ast-scroll-top,
a#ast-scroll-top,
#ast-scroll-top,
.ast-scroll-top {
  position: fixed !important;
  right: 20px !important;
  bottom: 92px !important;
  z-index: 999991 !important;
  /* Asegurar visibilidad */
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Estilo visual del scroll-to-top */
html body a#ast-scroll-top,
html body #ast-scroll-top,
a#ast-scroll-top,
#ast-scroll-top,
.ast-scroll-top {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  background: #E3AD43 !important;
  color: #1A1512 !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(227, 173, 67, 0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

html body a#ast-scroll-top:hover,
html body #ast-scroll-top:hover,
#ast-scroll-top:hover,
.ast-scroll-top:hover {
  background: #F5C96A !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 20px rgba(227, 173, 67, 0.45) !important;
}

#ast-scroll-top svg,
.ast-scroll-top svg {
  width: 20px !important;
  height: 20px !important;
  fill: currentColor !important;
}

/* =====================================================
   TABLET (481px - 768px)
===================================================== */

@media screen and (max-width: 768px) {
  html body div#tfs-chatbot,
  html body #tfs-chatbot,
  body div#tfs-chatbot,
  body #tfs-chatbot,
  div#tfs-chatbot,
  #tfs-chatbot {
    position: fixed !important;
    right: 16px !important;
    bottom: 16px !important;
    z-index: 999990 !important;
    top: auto !important;
    left: auto !important;
  }

  html body a#ast-scroll-top,
  html body #ast-scroll-top,
  body a#ast-scroll-top,
  body #ast-scroll-top,
  a#ast-scroll-top,
  #ast-scroll-top,
  .ast-scroll-top {
    position: fixed !important;
    right: 16px !important;
    bottom: 86px !important;
    z-index: 999991 !important;
    top: auto !important;
    left: auto !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
  }
}

/* =====================================================
   MOBILE (< 480px)
===================================================== */

@media screen and (max-width: 480px) {
  html body div#tfs-chatbot,
  html body #tfs-chatbot,
  body div#tfs-chatbot,
  body #tfs-chatbot,
  div#tfs-chatbot,
  #tfs-chatbot {
    position: fixed !important;
    right: 14px !important;
    bottom: 14px !important;
    z-index: 999990 !important;
    top: auto !important;
    left: auto !important;
  }

  html body a#ast-scroll-top,
  html body #ast-scroll-top,
  body a#ast-scroll-top,
  body #ast-scroll-top,
  a#ast-scroll-top,
  #ast-scroll-top,
  .ast-scroll-top {
    position: fixed !important;
    right: 14px !important;
    bottom: 80px !important;
    z-index: 999991 !important;
    top: auto !important;
    left: auto !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }
}

/* =====================================================
   CON BOOKING BAR VISIBLE
   Subir ambos elementos para no tapar la barra
===================================================== */

html body.tfs-has-bookingbar div#tfs-chatbot,
html body.tfs-has-bookingbar #tfs-chatbot,
body.tfs-has-bookingbar div#tfs-chatbot,
body.tfs-has-bookingbar #tfs-chatbot {
  bottom: 90px !important;
  right: 20px !important;
  top: auto !important;
  left: auto !important;
}

html body.tfs-has-bookingbar a#ast-scroll-top,
html body.tfs-has-bookingbar #ast-scroll-top,
body.tfs-has-bookingbar a#ast-scroll-top,
body.tfs-has-bookingbar #ast-scroll-top,
body.tfs-has-bookingbar .ast-scroll-top {
  bottom: 162px !important;
  right: 20px !important;
  top: auto !important;
  left: auto !important;
}

@media screen and (max-width: 768px) {
  html body.tfs-has-bookingbar div#tfs-chatbot,
  html body.tfs-has-bookingbar #tfs-chatbot,
  body.tfs-has-bookingbar div#tfs-chatbot,
  body.tfs-has-bookingbar #tfs-chatbot {
    bottom: 96px !important;
    right: 16px !important;
    top: auto !important;
    left: auto !important;
  }

  html body.tfs-has-bookingbar a#ast-scroll-top,
  html body.tfs-has-bookingbar #ast-scroll-top,
  body.tfs-has-bookingbar a#ast-scroll-top,
  body.tfs-has-bookingbar #ast-scroll-top,
  body.tfs-has-bookingbar .ast-scroll-top {
    bottom: 166px !important;
    right: 16px !important;
    top: auto !important;
    left: auto !important;
  }
}

@media screen and (max-width: 480px) {
  html body.tfs-has-bookingbar div#tfs-chatbot,
  html body.tfs-has-bookingbar #tfs-chatbot,
  body.tfs-has-bookingbar div#tfs-chatbot,
  body.tfs-has-bookingbar #tfs-chatbot {
    bottom: 90px !important;
    right: 14px !important;
    top: auto !important;
    left: auto !important;
  }

  html body.tfs-has-bookingbar a#ast-scroll-top,
  html body.tfs-has-bookingbar #ast-scroll-top,
  body.tfs-has-bookingbar a#ast-scroll-top,
  body.tfs-has-bookingbar #ast-scroll-top,
  body.tfs-has-bookingbar .ast-scroll-top {
    bottom: 158px !important;
    right: 14px !important;
    top: auto !important;
    left: auto !important;
  }
}

/* =====================================================
   BOOKING BAR z-index (más bajo que flotantes)
===================================================== */

.tfs-bookingbar,
#tfsBookingBar,
[class*="booking-bar"],
[class*="bookingbar"] {
  z-index: 99980 !important;
}

/* =====================================================
   WHATSAPP BUTTON (si existe - Click to Chat plugin)
   Colocarlo a la izquierda para no competir
===================================================== */

.cht-widget,
#cht_widget,
.whatsapp_float,
.whatsapp-button,
a[class*="whatsapp-float"],
div[class*="cht-widget"] {
  position: fixed !important;
  left: 20px !important;
  right: auto !important;
  bottom: 20px !important;
  z-index: 999989 !important;
}

@media screen and (max-width: 768px) {
  .cht-widget,
  #cht_widget,
  .whatsapp_float,
  .whatsapp-button,
  a[class*="whatsapp-float"],
  div[class*="cht-widget"] {
    left: 16px !important;
    bottom: 16px !important;
  }
}

@media screen and (max-width: 480px) {
  .cht-widget,
  #cht_widget,
  .whatsapp_float,
  .whatsapp-button,
  a[class*="whatsapp-float"],
  div[class*="cht-widget"] {
    left: 14px !important;
    bottom: 14px !important;
  }
}

/* =====================================================
   OCULTAR SCROLL-TO-TOP CUANDO CHATBOT ESTÁ ABIERTO
===================================================== */

/* Cuando el chatbot está expandido, ocultar el scroll-to-top */
#tfs-chatbot.tfs-chatbot-open ~ #ast-scroll-top,
#tfs-chatbot.tfs-chatbot-open ~ a#ast-scroll-top,
#tfs-chatbot.tfs-chatbot-open ~ .ast-scroll-top,
body:has(#tfs-chatbot.tfs-chatbot-open) #ast-scroll-top,
body:has(#tfs-chatbot.tfs-chatbot-open) a#ast-scroll-top,
body:has(#tfs-chatbot.tfs-chatbot-open) .ast-scroll-top,
html body:has(#tfs-chatbot.tfs-chatbot-open) #ast-scroll-top,
html body:has(#tfs-chatbot.tfs-chatbot-open) a#ast-scroll-top {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Fallback con clase en body (para navegadores sin :has()) */
body.tfs-chatbot-is-open #ast-scroll-top,
body.tfs-chatbot-is-open a#ast-scroll-top,
body.tfs-chatbot-is-open .ast-scroll-top,
html body.tfs-chatbot-is-open #ast-scroll-top,
html body.tfs-chatbot-is-open a#ast-scroll-top {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =====================================================
   OCULTAR DUPLICADOS DE SCROLL-TO-TOP
===================================================== */

/* Si hay múltiples botones de scroll, mostrar solo el de Astra */
.elementor-scroll-to-top:not(#ast-scroll-top),
.e-scroll-to-top:not(#ast-scroll-top),
button[class*="scroll-top"]:not(#ast-scroll-top) {
  display: none !important;
}

/* =====================================================
   FIX ADICIONAL: Evitar que chatbot.css gane
   Sobreescribir específicamente las reglas problemáticas
===================================================== */

/* El chatbot.css tiene esta regla que debemos anular:
   @media (max-width: 768px) { bottom: 85px !important; } 
   La anulamos con más especificidad */

@media screen and (max-width: 768px) {
  html body div#tfs-chatbot#tfs-chatbot,
  html body #tfs-chatbot#tfs-chatbot,
  body div#tfs-chatbot#tfs-chatbot,
  div#tfs-chatbot#tfs-chatbot {
    bottom: 16px !important;
  }
}

@media screen and (max-width: 480px) {
  html body div#tfs-chatbot#tfs-chatbot,
  html body #tfs-chatbot#tfs-chatbot,
  body div#tfs-chatbot#tfs-chatbot,
  div#tfs-chatbot#tfs-chatbot {
    bottom: 14px !important;
  }
}

/* Sin booking bar, asegurar posición base */
html body:not(.tfs-has-bookingbar) div#tfs-chatbot#tfs-chatbot,
html body:not(.tfs-has-bookingbar) #tfs-chatbot#tfs-chatbot {
  bottom: 20px !important;
}

@media screen and (max-width: 768px) {
  html body:not(.tfs-has-bookingbar) div#tfs-chatbot#tfs-chatbot,
  html body:not(.tfs-has-bookingbar) #tfs-chatbot#tfs-chatbot {
    bottom: 16px !important;
  }
}

@media screen and (max-width: 480px) {
  html body:not(.tfs-has-bookingbar) div#tfs-chatbot#tfs-chatbot,
  html body:not(.tfs-has-bookingbar) #tfs-chatbot#tfs-chatbot {
    bottom: 14px !important;
  }
}