/* ======================================================= */
/* VARIABLES DE DISEÑO */
/* ======================================================= */
:root {
  --fab-size: 3.7rem; /* Tamaño base del botón */
  --fab-spacing: 1.7rem; /* Espacio desde los bordes */
  --fab-gap: 0.75rem; /* Espacio entre botones */
  --fab-main-color: #0f3a5d; /* Color principal (simula fab-main-color) */
  --fab-main-color-hover: #0a263e;
  --color-whatsapp: #25d366;
  --color-magic: #8a2be2; /* Azul violeta */
  --color-chat: #4f46e5; /* Indigo */
  --color-tooltip-bg: #1f2937; /* gray-800 */
  --color-white: #ffffff;
}

/* ======================================================= */
/* I. CONTENEDOR Y POSICIONAMIENTO (fab-container) */
/* ======================================================= */

.fab-container {
  position: fixed;
  /* Posicionamiento: Abajo a la derecha */
  bottom: var(--fab-spacing);
  right: var(--fab-spacing);

  /* Usa flexbox en columna inversa para que el botón principal esté abajo */
  display: flex;
  flex-direction: column-reverse;
  align-items: center;

  /* Espacio entre los elementos (solo aplica a los elementos hijos directos) */
  gap: var(--fab-gap);

  z-index: 1000;
}

/* ======================================================= */
/* II. ESTILOS BASE DE LOS BOTONES */
/* ======================================================= */

.fab-main,
.fab-option {
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  font-size: 1.25rem;
  color: var(--color-white);
  position: relative; /* Necesario para el tooltip */
  transition: transform 0.3s ease, background-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* ------------------ */
/* Botón Principal */
/* ------------------ */
.fab-main {
  background-color: var(--primary-color);
  z-index: 10; /* Siempre sobre las opciones */
}

.fab-main:hover {
  background-color: var(--fab-main-color-hover);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* ------------------ */
/* Botones de Opción */
/* ------------------ */

.fab-option--whatsapp {
  background-color: var(--color-whatsapp);
}
.fab-option--magic {
  background-color: var(--color-magic);
}
.fab-option--chat {
  background-color: var(--color-chat);
}

.fab-option--whatsapp:hover {
  background-color: #128c7e;
}
.fab-option--magic:hover {
  background-color: #6a0dad;
}
.fab-option--chat:hover {
  background-color: #3730a3;
}

/* ======================================================= */
/* III. LÓGICA DE OCULTAR/MOSTRAR OPCIONES */
/* ======================================================= */

.fab-option {
  /* Estado inicial: oculto y sin espacio */
  position: absolute; /* Permite que se superpongan */
  transform: translateY(0);
  opacity: 0;
  pointer-events: none; /* No se puede hacer clic si está oculto */

  /* Ajuste inicial para que el botón principal esté visible */
  bottom: 0;
  /* Nota: Usamos JS para moverlo al estado 'active' */
}

/* ------------------ */
/* ESTADO EXPANDIDO (.active) */
/* ------------------ */
.fab-option.active {
  opacity: 1;
  pointer-events: auto; /* Se puede hacer clic */
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 10000; /* Asegura que se despliegue por encima del botón de reclutamiento durante el movimiento */
}

/* Cuando el botón principal tiene la clase 'expanded', movemos las opciones */
.fab-main.expanded ~ .fab-option {
  /* Aquí se define la posición final cuando está expandido */
  /* El desplazamiento se calculará en JS */
}

/* Si usas la lógica del script, el desplazamiento se maneja con JS añadiendo la clase 'active' */
/* El script que proporcionaste usa setTimeout, por lo que las transiciones CSS solo necesitan la clase 'active' */

/* Aplicamos las posiciones fijas al estar activo */
#fab-option-whatsapp.active {
  transform: translateY(calc(-1 * (var(--fab-size) + var(--fab-gap)) * 5));
}
#fab-option-magic.active {
  transform: translateY(calc(-1 * (var(--fab-size) + var(--fab-gap)) * 4));
}
#fab-option-chat.active {
  transform: translateY(calc(-1 * (var(--fab-size) + var(--fab-gap)) * 3));
}


/* ======================================================= */
/* IV. TOOLTIPS (Labels) */
/* ======================================================= */

.fab-option__label,
.fab-main__tooltip {
  /* Estilos del tooltip (absolute right-full mr-4 px-3 py-2 bg-gray-800 text-white text-sm rounded-md shadow-lg) */
  position: absolute;
  right: 100%; /* right-full */
  margin-right: 1rem; /* mr-4 */
  padding: 0.5rem 0.75rem; /* px-3 py-2 */
  background-color: var(--color-tooltip-bg);
  color: var(--color-white);
  font-size: 0.875rem; /* text-sm */
  border-radius: 0.375rem; /* rounded-md */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* shadow-lg */
  white-space: nowrap; /* whitespace-nowrap */

  /* Estado inicial: oculto */
  opacity: 0;
  visibility: hidden; /* Para que no interactúe con el mouse */
  pointer-events: none;

  /* Transición */
  transition: opacity 0.3s ease;
}

/* Efecto de hover del tooltip */
.fab-option:hover .fab-option__label,
.fab-main:hover .fab-main__tooltip {
  opacity: 1;
  visibility: visible;
}

/* Manejo de Tooltips del Botón Principal */
.fab-main__tooltip--open.hidden,
.fab-main__tooltip--closed.hidden {
  display: none; /* Oculta el tooltip usando la clase 'hidden' de JS */
}

/* Asegurar que el tooltip abierto o cerrado aparezca al hacer hover */
.fab-main:hover .fab-main__tooltip:not(.hidden) {
  opacity: 1;
  visibility: visible;
}