/* FAREVER · APORTADORES DEL CLAN · V10.2
   Una sola fila horizontal + avatares sin halo blanco */

.contributors-panel {
    overflow: hidden;
}

.contributors-strip {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: safe center;
    gap: 18px;
    width: 100%;
    max-width: 100%;
    padding: 4px 3px 13px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(69,117,145,.36) rgba(91,143,172,.08);
}

.contributors-strip::-webkit-scrollbar {
    height: 7px;
}

.contributors-strip::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(91,143,172,.08);
}

.contributors-strip::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(69,117,145,.30);
}

.contributors-strip::-webkit-scrollbar-thumb:hover {
    background: rgba(69,117,145,.48);
}

.contributor-profile {
    flex: 0 0 150px;
    min-width: 150px;
    max-width: 150px;
    scroll-snap-align: start;
}

/*
 * publico.css añade un aro blanco mediante background + padding.
 * Lo anulamos aquí para que la imagen sea el círculo completo.
 */
.contributors-panel .contributor-avatar-wrap {
    position: relative;
    z-index: 2;

    width: 92px;
    height: 92px;
    margin-inline: auto;
    padding: 0;

    overflow: visible;

    border: 2px solid rgba(93, 154, 187, 0.34);
    border-radius: 50%;

    background: transparent;

    box-shadow:
        0 7px 18px rgba(38, 82, 109, 0.18);

    box-sizing: border-box;
}

.contributors-panel .contributor-avatar {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 50%;

    background: transparent;

    box-sizing: border-box;
}

.contributor-pill {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 900px) {
    .contributors-strip {
        justify-content: flex-start;
        gap: 15px;
        padding-bottom: 11px;
    }

    .contributor-profile {
        flex-basis: 140px;
        min-width: 140px;
        max-width: 140px;
    }

    .contributors-panel .contributor-avatar-wrap {
        width: 86px;
        height: 86px;
    }
}

@media (max-width: 650px) {
    .contributors-strip {
        gap: 13px;
        margin-inline: -2px;
        padding-inline: 2px;
        padding-bottom: 9px;
        scroll-snap-type: x mandatory;
    }

    .contributor-profile {
        flex-basis: 128px;
        min-width: 128px;
        max-width: 128px;
    }

    .contributors-panel .contributor-avatar-wrap {
        width: 78px;
        height: 78px;
    }
}


/* =========================================================
   ESTADO REAL DE DISCORD
========================================================= */

.contributors-panel .contributor-avatar-wrap {
    /*
     * El indicador vive dentro del círculo para que no lo recorte el
     * overflow y siga bien colocado en PC, tablet y móvil.
     */
    isolation: isolate;
}

.contributor-presence {
    position: absolute;
    right: -3px;
    bottom: 5px;

    z-index: 5;

    display: block;

    width: 14px;
    height: 14px;

    box-sizing: border-box;

    border: 3px solid rgba(248, 253, 255, 0.98);
    border-radius: 50%;

    background: #9aa7af;

    box-shadow:
        0 1px 4px rgba(22, 45, 59, 0.28);

    pointer-events: none;

    transition:
        background-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

/* Conectado */
.contributor-presence.is-online {
    background: #23a55a;

    box-shadow:
        0 0 0 2px rgba(35, 165, 90, 0.10),
        0 1px 4px rgba(22, 45, 59, 0.28);
}

/* Ausente */
.contributor-presence.is-idle {
    background: #f0b232;
}

/* No molestar */
.contributor-presence.is-dnd {
    background: #f23f43;
}

/*
 * El usuario pidió distinguir claramente al desconectado.
 * Usamos rojo más oscuro para separarlo de "No molestar".
 */
.contributor-presence.is-offline {
    background: #a94b53;
}

/* Discord no respondió: nunca fingimos que el usuario está offline. */
.contributor-presence.is-unknown {
    background: #96a2aa;
}

/* Mientras llega la primera comprobación. */
.contributor-presence.is-checking {
    background: #96a2aa;

    animation:
        discord-presence-pulse
        1.15s ease-in-out infinite;
}


@keyframes discord-presence-pulse {
    0%,
    100% {
        transform: scale(0.88);
        opacity: 0.68;
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }
}


@media (max-width: 650px) {

    .contributor-presence {
        right: -3px;
        bottom: 4px;

        width: 13px;
        height: 13px;

        border-width: 3px;
    }

}


@media (prefers-reduced-motion: reduce) {

    .contributor-presence.is-checking {
        animation: none;
    }

}