/* 1. Posicionamiento flotante arriba a la derecha */
.xsocial {
    list-style: none; /*[cite: 2] */
    padding: 0; /*[cite: 2] */
    margin: 0;
    position: absolute; /* Anclaje flotante */
    top: 15px; /* Margen desde arriba */
    right: 15px; /* Margen desde la derecha */
    z-index: 10;
    display: flex; /* Alineación limpia */
}

.xsocial ul { 
    padding: 0; /*[cite: 2] */
    margin: 0; /*[cite: 2] */
}

/* 2. Diseño redondo y transparente para los iconos */
.xsocial li {
    padding: 0; /*[cite: 2] */
    margin: 0 5px 0 0; /*[cite: 2] */
    border-radius: 50%; /* Círculo perfecto */
    /* Fondo transparente tipo cristal oscuro */
    background-color: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition-property: opacity, background-color, transform;
    transition-duration: 300ms; /* Más fluido que los 500ms originales[cite: 2] */
}

.xsocial li a {
    display: block; /*[cite: 2] */
    width: 20px; /* Ligeramente más grande que los 25px originales para que el círculo se vea mejor[cite: 2] */
    height: 20px; /*[cite: 2] */
    position: relative; /*[cite: 2] */
}

/* 3. Logos de redes: Usamos solo la imagen (quitamos el color sólido base) */
li.sfb { background-image: url("/framework/res/facebook-16.png"); background-repeat: no-repeat; background-position: center; } /*[cite: 2] */
li.stwitter { background-image: url("/framework/res/twitter-x-16.png"); background-repeat: no-repeat; background-position: center; } /*[cite: 2] */
li.slinkedin { background-image: url("/framework/res/linkedin-16.png"); background-repeat: no-repeat; background-position: center; } /*[cite: 2] */
li.spinterest { background-image: url("/framework/res/pinterest-16.png"); background-repeat: no-repeat; background-position: center; } /*[cite: 2] */
li.sinstagram { background-image: url("/framework/res/instagram-16.png"); background-repeat: no-repeat; background-position: center; } /*[cite: 2] */
li.swsp { background-image: url("/framework/res/whatsapp-16.png"); background-repeat: no-repeat; background-position: center; } /*[cite: 2] */

/* 4. Tooltips (etiquetas de texto) */
.xsocial a { 
    font-family: "Roboto", Arial, sans-serif; /*[cite: 2] */
    color: #fff; /* Mejor contraste en tooltip negro */
    font-size: 10px; /*[cite: 2] */
    text-decoration: none;
}

.xsocial li a strong { 
    position: absolute; /*[cite: 2] */
    left: 50%; /* Centrado horizontal */
    top: 10px; /*[cite: 2] */
    transform: translateX(-50%);
    background-color: rgba(0,0,0,0.8); /* Fondo del tooltip */
    padding: 4px 8px;
    border-radius: 4px;
    opacity: 0; /*[cite: 2] */
    transition-property: opacity, top; /*[cite: 2] */
    transition-duration: 250ms; /*[cite: 2] */
    pointer-events: none; /* Evita que el tooltip bloquee el click */
    white-space: nowrap;
}

/* 5. Comportamiento al pasar el cursor (Hover) */
.xsocial:hover li { 
    opacity: 0.3; /*[cite: 2] */
}

.xsocial li:hover { 
    opacity: 1; /*[cite: 2] */
    transform: scale(1.1); /* Efecto de crecimiento circular */
    z-index: 999;
}

/* Al hacer hover, recuperan sus colores originales[cite: 2] */
.xsocial li.sfb:hover { background-color: #3B5998 !important; border-color: #3B5998; z-index: 999; }
.xsocial li.stwitter:hover { background-color: #000000 !important; border-color: #000000; z-index: 999; }
.xsocial li.slinkedin:hover { background-color: #0e76a8 !important; border-color: #0e76a8; z-index: 999; }
.xsocial li.spinterest:hover { background-color: #E60023 !important; border-color: #E60023; z-index: 999; }
.xsocial li.sinstagram:hover { background-color: #E1306C !important; border-color: #E1306C; z-index: 999; }
.xsocial li.swsp:hover { background-color: #128c7e !important; border-color: #128c7e; z-index: 999; }

.xsocial li:hover a strong { 
    opacity: 1; /*[cite: 2] */
    top: -30px; /* Desplaza el tooltip hacia arriba */
    z-index: 999;
}