.fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #007AFF; /* Azul estilo iOS */
    color: white;
    border: none;
    outline: none;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: background-color 0.3s ease;
    z-index: 1000;
}

    .fab:hover {
        background-color: #005BBB;
        cursor: pointer;
    }

/* Contenedor del FAB (botón principal + opciones) */
.fab-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000; /* Asegura que quede por encima del contenido */
}

/* Botón principal y secundarios comparten base de estilo */
.fab-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    color: white;
    background-color: #007bff; /* color de fondo del botón (personalizable) */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* sombra suave alrededor */
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Botón principal (FAB) específico */
.fab-main {
    font-size: 24px; /* tamaño del icono "+" */
}

/* Botones de acción secundarios */
.fab-action {
    position: absolute;
    bottom: 0;
    right: 0;
    /* Inicialmente ocultos */
    opacity: 0;
    transform: translateY(0) scale(0);
    transform-origin: bottom right;
}

/* Estado abierto: mostrar las opciones */
.fab-container.open .fab-action {
    opacity: 1;
    transform: scale(1);
}

    /* Posicionamiento vertical de cada opción (cuando abierto) */
    .fab-container.open .fab-action:nth-of-type(3) { /* primera opción (la de más arriba) */
        transform: translateY(-70px) scale(1);
    }

    .fab-container.open .fab-action:nth-of-type(4) { /* segunda opción */
        transform: translateY(-140px) scale(1);
    }

    .fab-container.open .fab-action:nth-of-type(5) { /* tercera opción */
        transform: translateY(-210px) scale(1);
    }
/* Nota: Ajustar índices según el número de botones y su orden en el HTML */

/* Efecto al pasar el mouse (opcional, para feedback visual) */
.fab-button:hover {
    opacity: 0.8;
}

/* Rotación del ícono "+" cuando el menú está abierto (convirtiéndolo en una "x") */
.fab-container.open .fab-main {
    transform: rotate(45deg);
}