/* ==========================================================================
   🔧 FLOATING MENU - MENÚ FLOTANTE CORPORATIVO REFACTORIZADO
   ========================================================================== */

:root {
  /* Variables específicas del menú flotante */
  --floating-menu-primary: #2B7B31;
  --floating-menu-primary-dark: #1f5923;
  --floating-menu-primary-light: #4CAF50;
  --floating-menu-secondary: #f8f9fa;
  --floating-menu-white: #ffffff;
  --floating-menu-shadow: rgba(43, 123, 49, 0.3);
  --floating-menu-shadow-hover: rgba(43, 123, 49, 0.5);
  --floating-menu-radius: 16px;
  --floating-menu-size: 60px;
  --floating-menu-z-index: 9999;
}

/* ==========================================================================
   CONTENEDOR PRINCIPAL - BOTÓN FLOTANTE
   ========================================================================== */

.floating-menu {
  /* Posicionamiento */
  position: fixed !important;
  left: 20px !important;
  bottom: 20px !important; /* Mismo nivel que el chat pero en lado opuesto */
  z-index: var(--floating-menu-z-index) !important;
  
  /* Dimensiones */
  width: var(--floating-menu-size) !important;
  height: var(--floating-menu-size) !important;
  
  /* Estilo visual */
  background: linear-gradient(135deg, var(--floating-menu-primary) 0%, var(--floating-menu-primary-light) 100%) !important;
  border: 3px solid var(--floating-menu-white) !important;
  border-radius: 50% !important;
  box-shadow: 
    0 6px 20px var(--floating-menu-shadow),
    0 2px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  
  /* Interacción */
  cursor: pointer !important;
  outline: none !important;
  
  /* Layout */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  /* Transiciones */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  
  /* Color del texto/iconos */
  color: var(--floating-menu-white) !important;
  
  /* Fuente */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Estados de interacción del botón */
.floating-menu:hover {
  transform: translateY(-4px) scale(1.1) !important;
  box-shadow: 
    0 12px 30px var(--floating-menu-shadow-hover),
    0 4px 15px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  background: linear-gradient(135deg, var(--floating-menu-primary-light) 0%, var(--floating-menu-primary) 100%) !important;
}

.floating-menu:active {
  transform: translateY(-2px) scale(1.05) !important;
  transition: all 0.1s ease !important;
}

.floating-menu:focus {
  outline: 3px solid rgba(43, 123, 49, 0.4) !important;
  outline-offset: 4px !important;
}

/* Estado activo (menú abierto) */
.floating-menu.active {
  background: linear-gradient(135deg, var(--floating-menu-primary-dark) 0%, var(--floating-menu-primary) 100%) !important;
  transform: rotate(180deg) scale(1.1) !important;
  box-shadow: 
    0 8px 25px var(--floating-menu-shadow-hover),
    0 3px 12px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* ==========================================================================
   ICONOS DEL BOTÓN
   ========================================================================== */

.floating-menu svg {
  width: 28px !important;
  height: 28px !important;
  fill: currentColor !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: absolute !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)) !important;
}

/* Icono de herramientas (estado normal) */
.floating-menu .tools-icon {
  opacity: 1 !important;
  transform: rotate(0deg) scale(1) !important;
}

/* Icono de cerrar (estado oculto inicialmente) */
.floating-menu .close-icon {
  opacity: 0 !important;
  transform: rotate(-180deg) scale(0.8) !important;
}

/* Estados cuando el menú está activo */
.floating-menu.active .tools-icon {
  opacity: 0 !important;
  transform: rotate(180deg) scale(0.8) !important;
}

.floating-menu.active .close-icon {
  opacity: 1 !important;
  transform: rotate(0deg) scale(1) !important;
}

/* ==========================================================================
   CONTENEDOR DEL MENÚ DESPLEGABLE
   ========================================================================== */


.floating-menu-items {
  /* Posicionamiento */
  position: fixed !important;
  left: 20px !important;
  bottom: 90px !important; /* Encima del botón principal que está en 20px */
  z-index: 10010 !important;
  /* Fondo reforzado para mejor contraste */
  background: rgba(255,255,255,0.98) !important;
  box-shadow: 0 8px 32px rgba(43,123,49,0.18), 0 2px 8px rgba(0,0,0,0.10) !important;
  border-radius: 20px !important;
  padding: 16px 8px !important;
  /* Layout */
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  /* Lista reset */
  list-style: none !important;
  margin: 0 !important;
  /* Transiciones */
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(20px) scale(0.9) !important;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  pointer-events: none !important;
}

/* Estado visible del menú */
.floating-menu-items.show {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

/* Estado oculto */
.floating-menu-items.hidden {
  display: flex !important; /* Mantener flex para las transiciones */
}

/* ==========================================================================
   ELEMENTOS INDIVIDUALES DEL MENÚ
   ========================================================================== */

.floating-menu-items li {
  /* Reset de lista */
  margin: 0 !important;
  padding: 0 !important;
  
  /* Animación inicial */
  opacity: 0 !important;
  transform: translateX(-20px) !important;
  transition: all 0.3s ease !important;
}

/* Animación escalonada cuando se muestra */
.floating-menu-items.show li {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.floating-menu-items.show li:nth-child(1) { transition-delay: 0.1s !important; }
.floating-menu-items.show li:nth-child(2) { transition-delay: 0.15s !important; }
.floating-menu-items.show li:nth-child(3) { transition-delay: 0.2s !important; }
.floating-menu-items.show li:nth-child(4) { transition-delay: 0.25s !important; }
.floating-menu-items.show li:nth-child(5) { transition-delay: 0.3s !important; }
.floating-menu-items.show li:nth-child(6) { transition-delay: 0.35s !important; }
.floating-menu-items.show li:nth-child(7) { transition-delay: 0.4s !important; }
.floating-menu-items.show li:nth-child(8) { transition-delay: 0.45s !important; }

/* ==========================================================================
   BOTONES Y ENLACES DEL MENÚ
   ========================================================================== */

.floating-menu .menu-link {
  /* Layout */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  
  /* Dimensiones */
  width: 54px !important;
  height: 54px !important;
  
  /* Estilo visual */
  background: var(--floating-menu-white) !important;
  border: 2px solid var(--floating-menu-secondary) !important;
  border-radius: 50% !important;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.1),
    0 2px 6px rgba(0, 0, 0, 0.05) !important;
  
  /* Colores */
  color: var(--floating-menu-primary) !important;
  text-decoration: none !important;
  
  /* Interacción */
  cursor: pointer !important;
  outline: none !important;
  
  /* Transiciones */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  
  /* Reset de botón */
  font-family: inherit !important;
  position: relative !important;
}

/* Estados hover generales */
.floating-menu .menu-link:hover {
  transform: translateX(8px) scale(1.1) !important;
  box-shadow: 
    0 8px 20px rgba(0, 0, 0, 0.15),
    0 4px 10px rgba(0, 0, 0, 0.08) !important;
  border-color: var(--floating-menu-primary) !important;
}

.floating-menu .menu-link:focus {
  outline: 2px solid var(--floating-menu-primary) !important;
  outline-offset: 3px !important;
}

/* ==========================================================================
   COLORES ESPECÍFICOS POR FUNCIÓN
   ========================================================================== */

/* Navegación - Verde corporativo */
.floating-menu .menu-link[href="#hero"]:hover,
.floating-menu .menu-link[href="#services"]:hover,
.floating-menu .menu-link[href="#about"]:hover,
.floating-menu .menu-link[href="#contact"]:hover {
  background: var(--floating-menu-primary) !important;
  color: var(--floating-menu-white) !important;
  box-shadow: 0 8px 20px var(--floating-menu-shadow) !important;
}

/* Accesibilidad - Azul */
.floating-menu .accessibility-toggle:hover {
  background: #007bff !important;
  color: var(--floating-menu-white) !important;
  box-shadow: 0 8px 20px rgba(0, 123, 255, 0.3) !important;
  border-color: #007bff !important;
}

/* Asegurar visibilidad específica del botón de accesibilidad */
.floating-menu #floating-accessibility-toggle.accessibility-toggle {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.floating-menu #floating-accessibility-toggle.accessibility-toggle svg {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  fill: currentColor !important;
  width: 24px !important;
  height: 24px !important;
}

/* Chat - Púrpura */
.floating-menu .chat-toggle:hover {
  background: #6f42c1 !important;
  color: var(--floating-menu-white) !important;
  box-shadow: 0 8px 20px rgba(111, 66, 193, 0.3) !important;
  border-color: #6f42c1 !important;
}

/* WhatsApp - Verde WhatsApp */
.floating-menu .whatsapp-toggle:hover {
  background: #25d366 !important;
  color: var(--floating-menu-white) !important;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3) !important;
  border-color: #25d366 !important;
}

/* ==========================================================================
   ICONOS DE LOS ELEMENTOS DEL MENÚ
   ========================================================================== */

.floating-menu .menu-link svg {
  width: 24px !important;
  height: 24px !important;
  fill: var(--floating-menu-primary) !important;
  transition: all 0.3s ease !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.10)) !important;
}

.floating-menu .menu-link:hover svg {
  transform: scale(1.1) !important;
}

/* ==========================================================================
   SEPARADOR
   ========================================================================== */

.floating-menu-items .menu-separator {
  height: 2px !important;
  background: linear-gradient(
    90deg, 
    transparent, 
    var(--floating-menu-primary), 
    transparent
  ) !important;
  border: none !important;
  margin: 8px 0 !important;
  border-radius: 1px !important;
  opacity: 0.6 !important;
}

/* ==========================================================================
   TOOLTIPS
   ========================================================================== */

.floating-menu .tooltip {
  /* Posicionamiento */
  position: absolute !important;
  left: 70px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  
  /* Estilo visual */
  background: var(--floating-menu-primary) !important;
  color: var(--floating-menu-white) !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  
  /* Tipografía */
  font-size: 12px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  font-family: inherit !important;
  
  /* Transiciones */
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-50%) translateX(-8px) !important;
  transition: all 0.3s ease !important;
  pointer-events: none !important;
  z-index: calc(var(--floating-menu-z-index) + 1) !important;
}

/* Flecha del tooltip */
.floating-menu .tooltip::after {
  content: '' !important;
  position: absolute !important;
  right: 100% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border: 6px solid transparent !important;
  border-right-color: var(--floating-menu-primary) !important;
}

/* Mostrar tooltip en hover */
.floating-menu .menu-link:hover .tooltip {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(-50%) translateX(0) !important;
}

/* ==========================================================================
   EFECTOS ESPECIALES
   ========================================================================== */

/* Pulse animation para llamar la atención */
@keyframes pulse-corporate {
  0% {
    box-shadow: 0 6px 20px var(--floating-menu-shadow);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 8px 30px var(--floating-menu-shadow-hover);
    transform: scale(1.05);
  }
  100% {
    box-shadow: 0 6px 20px var(--floating-menu-shadow);
    transform: scale(1);
  }
}

.floating-menu.pulse {
  animation: pulse-corporate 2s infinite !important;
}

/* Glow effect para destacar */
.floating-menu.glow {
  box-shadow: 
    0 6px 20px var(--floating-menu-shadow),
    0 0 20px var(--floating-menu-primary),
    0 0 40px rgba(43, 123, 49, 0.2) !important;
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 768px) {
  :root {
    --floating-menu-size: 56px;
  }
  
.floating-menu .menu-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 54px !important;
  height: 54px !important;
  background: var(--floating-menu-white) !important;
  border: 2px solid var(--floating-menu-primary) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgba(43,123,49,0.10), 0 2px 6px rgba(0,0,0,0.05) !important;
  color: var(--floating-menu-primary) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  outline: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-family: inherit !important;
  position: relative !important;
  z-index: 1 !important;
}
  :root {
    --floating-menu-size: 52px;
  }
  
  .floating-menu {
    left: 12px !important;
    bottom: 20px !important;
  }
  
  .floating-menu-items {
    left: 12px !important;
    bottom: 80px !important;
    gap: 8px !important;
  }
  
  .floating-menu .menu-link {
    width: 44px !important;
    height: 44px !important;
  }
  
  .floating-menu .menu-link svg {
    width: 18px !important;
    height: 18px !important;
  }
}

/* ==========================================================================
   MODO OSCURO
   ========================================================================== */

/* ==========================================================================
   MODO OSCURO
   ========================================================================== */

[data-theme="dark"] .floating-menu {
  background: linear-gradient(135deg, #1a472a 0%, #2e7d32 100%) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 
    0 6px 20px rgba(26, 71, 42, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .floating-menu:hover {
  background: linear-gradient(135deg, #2e7d32 0%, #1a472a 100%) !important;
  box-shadow: 
    0 12px 30px rgba(46, 125, 50, 0.5),
    0 4px 15px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

[data-theme="dark"] .floating-menu.active {
  background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%) !important;
}

[data-theme="dark"] .floating-menu-items {
  background: rgba(33, 37, 41, 0.95) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .floating-menu .menu-link {
  background: rgba(52, 58, 64, 0.9) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  backdrop-filter: blur(5px) !important;
}

[data-theme="dark"] .floating-menu .menu-link:hover {
  background: var(--floating-menu-primary) !important;
  border-color: var(--floating-menu-primary) !important;
  transform: translateX(8px) scale(1.1) !important;
  box-shadow: 
    0 8px 20px rgba(43, 123, 49, 0.4),
    0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="dark"] .floating-menu .menu-link svg {
  fill: #ffffff !important;
}

[data-theme="dark"] .floating-menu .menu-link:hover svg {
  fill: #ffffff !important;
}

/* Estilos específicos para cada tipo de botón en modo oscuro */
[data-theme="dark"] .floating-menu .accessibility-toggle:hover {
  background: #1e88e5 !important;
  border-color: #1e88e5 !important;
  box-shadow: 0 8px 20px rgba(30, 136, 229, 0.4) !important;
}

[data-theme="dark"] .floating-menu .whatsapp-toggle:hover {
  background: #25d366 !important;
  border-color: #25d366 !important;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4) !important;
}

[data-theme="dark"] .floating-menu .chat-toggle:hover {
  background: #7c4dff !important;
  border-color: #7c4dff !important;
  box-shadow: 0 8px 20px rgba(124, 77, 255, 0.4) !important;
}

/* Tooltips en modo oscuro */
[data-theme="dark"] .floating-menu .tooltip {
  background: #2c2c2c !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .floating-menu .tooltip::after {
  border-right-color: #2c2c2c !important;
}

/* ==========================================================================
   CLASES UTILITARIAS
   ========================================================================== */

.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.show {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Forzar visibilidad para debugging */
.floating-menu.debug {
  display: flex !important;
  visibility: visible !important;
  background: red !important;
}

.floating-menu-items.debug {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}