/* Contenedor principal de los botones flotantes */
.contenedor-flotante-whatsapp {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;

}

/* Estilos generales para todos los botones flotantes */
.boton-flotante {
    width: 50px;
    height: 50px;
    background-color: #25D366;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease-in-out;
    overflow: visible;
    z-index: 2;
}

/* El botón principal de WhatsApp (Botón 1) tiene una posición inicial específica */
.boton-flotante.boton-principal {
    position: absolute;
    bottom: 0;
    right: 0;
    margin-top: 0;
}

/* Color específico para el botón de Servicio Técnico */
.boton-flotante.servicio-tecnico {
    background-color: #01b3e1;
}
/* Color específico para el botón de catálogo */
.boton-flotante.catalogo {
    background-color: #314a9a;
}

/* Color y estilo para el botón de cerrar (X) */
.boton-flotante.boton-cerrar {
    background-color: #dc3545;
}



/* Iconos dentro de los botones */
.icono-flotante {
    width: 32px;
    height: 32px;
    filter: invert(100%);
    display: block;
}

/* Estado inicial de los botones secundarios y el de cerrar (ocultos) */
.boton-flotante.boton-secundario {
    opacity: 0;
    pointer-events: none;
    transform: translateY(100px);
}

/* Clases para mostrar/ocultar y animar con JS */
.boton-flotante.mostrar {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}

/* Estilo para el botón principal cuando está activo (sube) */
.boton-flotante.boton-principal.activo {
    /* CAMBIO CLAVE: Multiplicador cambiado de 4 a 2 porque ahora solo hay 2 botones secundarios visibles. */
    transform: translateY(calc(-2 * (50px + 15px)));
}

/* ---------------------------------------------------- */
/* Estilos para los Mensajes Flotantes */
/* ---------------------------------------------------- */
.mensaje-flotante {
    width: auto;
    min-width: 80px;
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    background-color: #f3f3f3;
    color: #000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 10px 15px;
    border-radius: 14px 0 0 14px;
    white-space: nowrap;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-out;
    pointer-events: none;
    z-index: 1;
}

/* Efecto hover: el mensaje aparece de derecha a izquierda (sale del botón) */
.boton-flotante:hover .mensaje-flotante {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(-15px);
}


/* --- Mensajes Específicos del Botón Principal --- */

/* Oculta ambos mensajes por defecto en el botón principal */
.boton-principal .mensaje-estado-cerrado,
.boton-principal .mensaje-estado-abierto {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out, transform 0.3s ease-out;
}

/* Muestra el mensaje "cerrado" del botón principal SÓLO cuando no está activo y se hace hover */
.boton-principal:not(.activo):hover .mensaje-estado-cerrado {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/* Muestra el mensaje "abierto" del botón principal SÓLO cuando está activo y se hace hover */
.boton-principal.activo:hover .mensaje-estado-abierto {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/* Asegura que el mensaje "cerrado" esté oculto cuando el botón principal está activo (desplegado) */
.boton-principal.activo .mensaje-estado-cerrado {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Asegura que el mensaje "abierto" esté oculto cuando el botón principal NO está activo (plegado) */
.boton-principal:not(.activo) .mensaje-estado-abierto {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* Móviles (Ancho máximo 768px) */
@media (max-width: 767px) {

    /* Contenedor principal de los botones flotantes */
    .contenedor-flotante-whatsapp {

        bottom: 10px;
        right: 10px;

    }

    /* Estilo para el botón principal cuando está activo (sube) */
    .boton-flotante.boton-principal.activo {
        /* CAMBIO CLAVE: Multiplicador cambiado de 4 a 2 para móviles también. */
        transform: translateY(calc(-2 * (50px + 10px)));
    }
    /* Estilos generales para todos los botones flotantes */
    .boton-flotante {
        margin-top: 10px;
    }


    .mensaje-flotante {

        padding: 10px 20px;
        border-radius: 14px;


    }

    .boton-principal.activo .mensaje-flotante.mensaje-estado-cerrado {
        opacity: 0; /* Asegura que el mensaje 'Asesor 1' esté oculto */
        visibility: hidden;
    }

    .boton-principal.activo .mensaje-flotante.mensaje-estado-abierto {
        opacity: 1; /* Muestra el mensaje 'Ventas 1' */
        visibility: visible;
        pointer-events: all; /* Hace que sea interactuable si fuera necesario */
        transform: translateY(-50%) translateX(-20px); /* Posición fija como en hover */
        transition: none; /* No hay transición, aparece inmediatamente */
    }

    /* Para los botones secundarios que están visibles (tienen la clase 'mostrar') */
    .boton-flotante.boton-secundario.mostrar .mensaje-flotante {
        opacity: 1; /* Los mensajes secundarios se muestran */
        visibility: visible;
        pointer-events: all;
        transform: translateY(-50%) translateX(-20px); /* Posición fija como en hover */
        transition: none; /* No hay transición, aparecen inmediatamente */
    }

    /* Anula el efecto hover en pantallas pequeñas para los mensajes, ya que siempre estarán visibles */
    .boton-flotante:hover .mensaje-flotante {
        opacity: 1; /* Se mantiene visible */
        visibility: visible;
        transform: translateY(-50%) translateX(-20px); /* Se mantiene en la posición fija */
    }
}