/* === ESTILOS GENERALES Y RESET === */
/* Usamos 'html body' para superar cualquier especificidad del tema */
html body #social-big-container {
    position: fixed;
    z-index: 2147483647 !important;
    /* Max int z-index */
    transition: transform 0.4s ease, opacity 0.4s ease;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

html body #social-big-container .sb-icons-wrapper {
    background: #ffffff !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1) !important;
    display: flex !important;
    gap: 8px !important;
    padding: 10px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

/* Reset agresivo para enlaces e iconos */
html body #social-big-container a.sb-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    /* Cancelar min-widths del tema */
}

html body #social-big-container a.sb-icon:hover {
    opacity: 0.8 !important;
    transform: scale(1.1);
}

/* Soporte dual para <i> (WebFont) y <svg> (JS/SVG) */
html body #social-big-container a.sb-icon i,
html body #social-big-container a.sb-icon svg,
html body #social-big-container a.sb-icon .svg-inline--fa {
    font-family: "Font Awesome 5 Brands", "Font Awesome 6 Brands", "FontAwesome", sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    text-shadow: none !important;
    /* Asegurar que SVG escale como fuente */
    font-size: inherit !important;
}

/* Colores de Redes - Por defecto (Gris Elegante) */
/* Estilo base con menor especificidad. La regla .sb-brand-colors lo sobrescribirá por tener una clase extra. */
html body #social-big-container a.sb-icon i,
html body #social-big-container a.sb-icon svg {
    color: #555555 !important;
    fill: #555555 !important;
    transition: color 0.3s ease, fill 0.3s ease, transform 0.3s ease;
}

/* Hover en modo Gris: Se oscurece a negro */
/* Solo aplicamos esto si NO tenemos la clase de marca, para evitar sobrescribir el hover de marca si fuera necesario, 
   o simplemente dejamos que el hover de marca gane por especificidad */
html body #social-big-container a.sb-icon:hover i,
html body #social-big-container a.sb-icon:hover svg {
    color: #000000 !important;
    fill: #000000 !important;
}

/* Colores de Marca Forzados (Sobrescribe Tema con !important) */
/* CORRECCIÓN: a.sb-icon.sb-facebook (sin espacio) porque la clase está en el enlace, no dentro */

/* Facebook */
html body #social-big-container.sb-brand-colors a.sb-icon.sb-facebook i,
html body #social-big-container.sb-brand-colors a.sb-icon.sb-facebook svg,
html body #social-big-container.sb-brand-colors a.sb-icon.sb-facebook .svg-inline--fa {
    color: #1877f2 !important;
    fill: #1877f2 !important;
}

/* Twitter / X */
html body #social-big-container.sb-brand-colors a.sb-icon.sb-twitter i,
html body #social-big-container.sb-brand-colors a.sb-icon.sb-twitter svg,
html body #social-big-container.sb-brand-colors a.sb-icon.sb-x-twitter i,
html body #social-big-container.sb-brand-colors a.sb-icon.sb-x-twitter svg {
    color: #000000 !important;
    fill: #000000 !important;
}

/* LinkedIn */
html body #social-big-container.sb-brand-colors a.sb-icon.sb-linkedin i,
html body #social-big-container.sb-brand-colors a.sb-icon.sb-linkedin svg {
    color: #0077b5 !important;
    fill: #0077b5 !important;
}

/* Instagram */
html body #social-big-container.sb-brand-colors a.sb-icon.sb-instagram i,
html body #social-big-container.sb-brand-colors a.sb-icon.sb-instagram svg {
    color: #e1306c !important;
    fill: #e1306c !important;
}

/* WhatsApp */
html body #social-big-container.sb-brand-colors a.sb-icon.sb-whatsapp i,
html body #social-big-container.sb-brand-colors a.sb-icon.sb-whatsapp svg {
    color: #25D366 !important;
    fill: #25D366 !important;
}

/* TikTok */
html body #social-big-container.sb-brand-colors a.sb-icon.sb-tiktok i,
html body #social-big-container.sb-brand-colors a.sb-icon.sb-tiktok svg {
    color: #000000 !important;
    fill: #000000 !important;
}

/* === ESCRITORIO (>= 1025px) === */
@media (min-width: 1025px) {
    html body #social-big-container {
        top: 50%;
        transform: translateY(-50%);
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
    }

    html body #social-big-container .sb-icons-wrapper {
        flex-direction: column !important;
        padding: 20px 10px !important;
    }

    /* POSICIONES ESCRITORIO */
    html body #social-big-container.sb-pos-left {
        left: 0 !important;
        right: auto !important;
    }

    html body #social-big-container.sb-pos-left .sb-icons-wrapper {
        border-radius: 0 10px 10px 0 !important;
    }

    html body #social-big-container.sb-pos-right {
        right: 0 !important;
        left: auto !important;
    }

    html body #social-big-container.sb-pos-right .sb-icons-wrapper {
        border-radius: 10px 0 0 10px !important;
        box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1) !important;
    }

    /* TAMAÑOS ESCRITORIO */
    html body #social-big-container.sb-size-normal a.sb-icon i,
    html body #social-big-container.sb-size-normal a.sb-icon svg {
        font-size: 24px !important;
        width: 24px !important;
        height: 24px !important;
        line-height: 24px !important;
    }

    html body #social-big-container.sb-size-large a.sb-icon i,
    html body #social-big-container.sb-size-large a.sb-icon svg {
        font-size: 34px !important;
        width: 34px !important;
        height: 34px !important;
        line-height: 34px !important;
    }

    html body #social-big-container.sb-size-large .sb-icons-wrapper {
        padding: 25px 12px !important;
        gap: 12px !important;
    }

    /* EFECTO SCROLL ESCRITORIO */
    html body #social-big-container.sb-scroll-hidden {
        opacity: 0.3 !important;
    }

    html body #social-big-container.sb-pos-left.sb-scroll-hidden {
        transform: translateY(-50%) translateX(-80%) !important;
    }

    html body #social-big-container.sb-pos-right.sb-scroll-hidden {
        transform: translateY(-50%) translateX(80%) !important;
    }

    html body #social-big-container:hover {
        opacity: 1 !important;
        transform: translateY(-50%) translateX(0) !important;
    }
}

/* === MÓVIL Y TABLET (<= 1024px) === */
@media (max-width: 1024px) {
    html body #social-big-container {
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        top: auto !important;
        transform: translateY(0);
    }

    html body #social-big-container .sb-icons-wrapper {
        flex-direction: row !important;
        justify-content: space-around !important;
        align-items: center !important;
        padding: 15px 0 !important;
        border-top: 1px solid #eee !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
        width: 100% !important;
        border-radius: 0 !important;
    }

    body {
        padding-bottom: 80px !important;
    }

    /* TAMAÑOS MÓVIL */
    html body #social-big-container.sb-size-normal a.sb-icon i,
    html body #social-big-container.sb-size-normal a.sb-icon svg {
        font-size: 25px !important;
        width: 25px !important;
        height: 25px !important;
    }

    html body #social-big-container.sb-size-large a.sb-icon i,
    html body #social-big-container.sb-size-large a.sb-icon svg {
        font-size: 35px !important;
        width: 35px !important;
        height: 35px !important;
    }

    html body #social-big-container a.sb-icon {
        padding: 5px;
        flex: 1;
        justify-content: center;
    }

    /* EFECTO SCROLL MÓVIL */
    html body #social-big-container.sb-scroll-hidden {
        transform: translateY(80%) !important;
        opacity: 0.5 !important;
    }
}