/* assets/css/redes_flotantes.css */

.flotante-redes-container {
    position: fixed;
    bottom: 25px;
    right: 20px;
    display: flex;
    flex-direction: column-reverse; /* El botón principal queda abajo, las redes suben */
    align-items: center;
    gap: 15px;
    z-index: 9999;
}

/* El botón principal que abre/cierra */
.btn-toggle-redes {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #9b6dff;
    color: white;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    cursor: pointer;
    transition: transform 0.3s ease, background 0.3s ease;
    z-index: 2;
}

/* El contenedor de las redes (Oculto por defecto) */
.flotante-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px); /* Arranca un poco más abajo */
    transition: all 0.3s ease;
}

/* Cuando le damos la clase "activo" desde JS */
.flotante-redes-container.activo .flotante-links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Sube a su posición original */
}

/* Animación del ícono principal al abrir (Gira 180 grados) */
.btn-toggle-redes i {
    transition: transform 0.3s ease;
}
.flotante-redes-container.activo .btn-toggle-redes i {
    transform: rotate(180deg);
}

/* Diseño de los botoncitos de redes */
.float-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 22px;
    text-decoration: none;
    box-shadow: 0 3px 8px rgba(0,0,0,0.4);
    transition: transform 0.2s;
}
.float-btn:hover {
    transform: scale(1.1);
    color: white;
}

/* Colores oficiales */
.btn-wsp { background: #25D366; }
.btn-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.btn-fb { background: #1877F2; }
.btn-tk { background: #121212; border: 1px solid #444; }