/* Estilos para el botón flotante */
.floating-action-menu {
   position: fixed;
   bottom: 80px;
   right: 30px;
   z-index: 999;
}

.floating-buttons {
   position: absolute;
   bottom: 70px;
   right: 0;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 15px;
   opacity: 0;
   visibility: hidden;
   transform: translateY(20px);
   transition: all 0.3s ease;
}

.floating-buttons.active {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}

.floating-button {
   height: 56px;
   border-radius: 28px;
   border: none;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   cursor: pointer;
   transition: all 0.3s ease;
   position: relative;
   padding: 0 20px;
}

.main-button {
   background: #28c963;
   color: white;
   font-size: 1.5rem;
   z-index: 2;
   width: 56px;
   padding: 0;
   float: right;
   box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
}

.main-button i {
   transition: transform 0.3s ease;
}

.main-button.active i {
   transform: scale(0.9);
}

.secondary-button {
   background: white;
   color: #333;
   font-size: 1.2rem;
   padding: 0 20px;
   gap: 15px;
   white-space: nowrap;
   transform-origin: right center;
   width: 170px;
   justify-content: flex-start;
}

.secondary-button i {
   width: 24px;
   text-align: center;
}

.secondary-button .btn-label {
   font-family: 'Arial', sans-serif;
   font-size: 1rem;
   font-weight: 500;
}

.secondary-button:hover {
   background: #f5f5f5;
   transform: scale(1.05);
}

/* Tooltip para los botones secundarios ya no se usa, pero lo dejamos oculto por si acaso o lo borramos. Lo mejor es borrarlo ya que la leyenda está adentro. */
.secondary-button::before {
   display: none;
}

/* Animación de pulso para el botón principal */
@keyframes pulse {
   0% {
       box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
   }
   70% {
       box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
   }
   100% {
       box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
   }
}

.main-button:not(.active) {
   animation: pulse 2s infinite;
}