/* ==========================================================================
   `.sf-social*` — bloque «Seguinos en nuestras redes» (IT270)
   --------------------------------------------------------------------------
   Fuente UNICA del patron. Archivo propio (mismo criterio que `_notes.css`
   y `_kpi_strip.css`, IT265/IT76): lo consumen la tienda publica
   (`_components.css`) y el app-shell (`_app_components.css`), y una sola
   definicion evita que las dos copias driftien.

   Markup: `templates/_widgets/_redes_sociales.html`.
   Datos:  `apps/core/configuracion/services/branding.py::redes_del_tenant`.

   Reglas que respeta:
   - Solo tokens `--sf-*` — cero hex sueltos fuera de los colores de MARCA
     de cada red (esos son de Meta/ByteDance, no del design system, y son
     los mismos en los dos temas).
   - Cero `@media (prefers-color-scheme)` propio: los tokens ya flipean.
     La variante `--invert` es dark-BY-DESIGN (el pie de la tienda es una
     inversion deliberada), asi que ahi la tinta va fija a proposito.
   ========================================================================== */

.sf-social {
    min-width: 0;
}

.sf-social__title {
    margin: 0 0 var(--sf-space-2, 0.5rem);
    font-size: var(--sf-font-overline, 0.625rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--sf-tracking-wider, 0.12em);
    color: var(--sf-color-text-muted, #475569);
}

.sf-social__text {
    margin: 0 0 var(--sf-space-3, 0.75rem);
    font-size: var(--sf-font-caption, 0.75rem);
    line-height: var(--sf-leading-relaxed, 1.65);
    color: var(--sf-color-text-muted, #475569);
}

.sf-social__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sf-space-2, 0.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sf-social__link {
    /* `--sf-social-brand` la define cada modificador de red. El fallback
       es el primario del tenant: si alguna vez se suma una red nueva sin
       color propio, hereda la marca de la tienda en vez de quedar gris. */
    --sf-social-brand: var(--sf-color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sf-space-2, 0.5rem);
    height: 2.25rem;
    width: 2.25rem;
    border-radius: var(--sf-radius-md, 8px);
    border: 1px solid var(--sf-color-border, #e2e8f0);
    background: var(--sf-color-bg-elevated, #f8fafc);
    color: var(--sf-color-text-muted, #475569);
    text-decoration: none;
    transition:
        background var(--sf-motion-fast, 150ms) ease,
        border-color var(--sf-motion-fast, 150ms) ease,
        color var(--sf-motion-fast, 150ms) ease,
        transform var(--sf-motion-fast, 150ms) ease;
}

/* Variante con nombre al lado del icono (landings, fichas publicas). */
.sf-social__link--wide {
    width: auto;
    padding: 0 var(--sf-space-3, 0.75rem);
}

.sf-social__icon {
    height: 1rem;
    width: 1rem;
    flex: none;
}

.sf-social__label {
    font-size: var(--sf-font-body-sm, 0.875rem);
    font-weight: 600;
    line-height: 1;
}

.sf-social__link:hover,
.sf-social__link:focus-visible {
    background: color-mix(in srgb, var(--sf-social-brand) 14%, transparent);
    border-color: color-mix(in srgb, var(--sf-social-brand) 45%, transparent);
    color: var(--sf-social-brand);
    transform: translateY(-1px);
}

.sf-social__link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-social-brand) 28%, transparent);
}

.sf-social__link:active {
    transform: none;
}

/* Colores de marca de cada red (constantes, no del design system). */
.sf-social__link--whatsapp  { --sf-social-brand: #25d366; }
.sf-social__link--facebook  { --sf-social-brand: #1877f2; }
.sf-social__link--instagram { --sf-social-brand: #e1306c; }
.sf-social__link--tiktok    { --sf-social-brand: #25f4ee; }

/* --------------------------------------------------------------------------
   Variante `--invert`: superficies dark-BY-DESIGN (el pie de la tienda).
   La tinta NO sigue al tema — igual criterio que `.sf-footer .sf-ink-muted`:
   en modo claro `--sf-color-text-muted` es slate oscuro y los iconos
   desaparecian sobre el fondo negro del pie.
   -------------------------------------------------------------------------- */
.sf-social--invert .sf-social__title { color: #ffffff; }
.sf-social--invert .sf-social__text { color: #94a3b8; }

.sf-social--invert .sf-social__link {
    border-color: transparent;
    background: color-mix(in srgb, var(--sf-pal-surface, #94a3b8) 14%, transparent);
    color: rgb(255 255 255 / 0.72);
}

.sf-social--invert .sf-social__link:hover,
.sf-social--invert .sf-social__link:focus-visible {
    background: color-mix(in srgb, var(--sf-social-brand) 34%, transparent);
    border-color: transparent;
    color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
    .sf-social__link { transition: none; }
    .sf-social__link:hover,
    .sf-social__link:focus-visible { transform: none; }
}