/* =====================================================
   BOTONES FLOTANTES – WHATSAPP + TELÉFONO
   Proyecto: Estudio jurídico laboral
   Uso: Global (todas las URLs)
===================================================== */

/* =====================================================
   CONTENEDOR PRINCIPAL
===================================================== */
.botones-flotantes {
    position: fixed;
    right: 16px;
    bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;

    opacity: 0;
    visibility: hidden;

    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.botones-flotantes.visible {
    opacity: 1;
    visibility: visible;
}

/* =====================================================
   BOTÓN BASE
===================================================== */
.boton-flotante {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    font-size: 20px;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

/* =====================================================
   BOTÓN CERRAR (X)
===================================================== */
.btn-close-float {
    width: 28px;
    height: 28px;
    border-radius: 50%;

    background-color: rgba(104, 187, 227, 0.95); /* celeste corporativo */
    border: none;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 4px;
    cursor: pointer;

    box-shadow: 0 4px 10px rgba(0,0,0,.25);
    align-self: center;          
    transform: translateX(1px);  
}
.btn-close-float i {
    color: #ffffff;
    font-size: 13px;
    line-height: 1;
    display: block;
    transform: translateX(0.5px);
}

/* =====================================================
   BOTONES DE CONTACTO
===================================================== */

/* WhatsApp */
.btn-whatsapp {
    background-color: #1EBE5D;
}

/* Teléfono */
.btn-telefono {
    background-color: #1E5EFF;
}

/* =====================================================
   BOTÓN REACTIVAR (BURBUJA DE CHAT)
===================================================== */
.btn-reactivar {
    position: fixed;
    right: 16px;
    bottom: 18px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;

    background: #f2f4f7;
    color: #3a4a5a;
    font-size: 18px;

    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    z-index: 9999;
}

/* Visible cuando el usuario ocultó los botones */
.btn-reactivar.visible {
    display: flex;
}

/* =====================================================
   HOVER SOLO DESKTOP
===================================================== */
@media (hover: hover) {
    .boton-flotante:hover {
        transform: scale(1.05);
    }

    .btn-reactivar:hover {
        transform: scale(1.05);
    }
}