/* social-float-bar.css */

#social-float-bar {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    padding: 6px 3px; /* Espaciado interno de la barra general, más pequeño */
    border-radius: 0 8px 8px 0;
    box-shadow: 2px 0 8px rgba(0,0,0,0.2);
    z-index: 9999;
    /* background-color de la BARRA principal se establecerá dinámicamente desde PHP */
}

#social-float-bar a {
    display: block;
    margin-bottom: 5px; /* Espacio entre los círculos de iconos, más pequeño */
    line-height: 1;
    text-decoration: none;
}

/* El wrapper para el icono y su fondo circular */
.sfb-icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;   /* TAMAÑO DEL CÍRCULO - MÁS PEQUEÑO */
    height: 35px;  /* TAMAÑO DEL CÍRCULO - MÁS PEQUEÑO */
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.sfb-icon-wrapper img {
    width: 20px; /* TAMAÑO DE LA IMAGEN DEL ICONO DENTRO DEL CÍRCULO - MÁS PEQUEÑO */
    height: 20px;
    display: block;
}

/* Colores de fondo para cada círculo de red social (sin cambios) */
.sfb-icon-wrapper.instagram-circle {
    background-color: #E1306C;
}

.sfb-icon-wrapper.facebook-circle {
    background-color: #1877F2;
}

.sfb-icon-wrapper.youtube-circle {
    background-color: #fafbfd;
}

.sfb-icon-wrapper.x-circle {
    background-color: #000000;
}

.sfb-icon-wrapper.whatsapp-circle {
    background-color: #25D366;
}

/* Efecto hover en el enlace (sin cambios) */
#social-float-bar a:hover .sfb-icon-wrapper {
    transform: scale(1.1);
    opacity: 0.9;
}

/* Ajuste del último icono para que no tenga margen inferior extra (sin cambios) */
#social-float-bar a:last-child {
    margin-bottom: 0;
}

/* Media Queries para Responsividad (ajustadas a los nuevos tamaños base) */
@media (max-width: 768px) {
    #social-float-bar {
        padding: 5px 2px;
    }
    .sfb-icon-wrapper {
        width: 30px;
        height: 30px;
    }
    .sfb-icon-wrapper img {
        width: 18px;
        height: 18px;
    }
}