/**
 * Padrão de foto do Club — "squircle" (superelipse: nem quadrado, nem
 * círculo). Vale para foto de usuário e de cliente em todo o sistema.
 *
 * Uso novo:   <img class="club-av" …>              (só a forma)
 *             <span class="club-av-moldura"><img class="club-av" …></span>
 *                                                   (com borda/anel; cor em --club-av-cor)
 * PHP:        club_avatar_img($url, $tamanho, $alt) em functions/_helpers.php
 *
 * As fotos antigas (img.rounded-circle e as classes de avatar de cada tela)
 * são convertidas aqui mesmo, sem precisar mexer em cada template.
 * Ficam de fora, de propósito, as prévias que imitam o Instagram
 * (.ig-fone-avatar, .pc-ig-perfil), que lá é redondo.
 *
 * Exceção: VÁRIAS pessoas sobrepostas (equipe, time) ficam em círculo —
 * marque o contêiner com .club-av-grupo.
 */
:root {
    --club-squircle: polygon(100% 50%, 99.92% 66.9%, 99.66% 72.96%, 99.24% 77.42%, 98.64% 81.04%, 97.86% 84.1%, 96.9% 86.74%, 95.76% 89.06%, 94.41% 91.08%, 92.86% 92.86%, 91.08% 94.41%, 89.06% 95.76%, 86.74% 96.9%, 84.1% 97.86%, 81.04% 98.64%, 77.42% 99.24%, 72.96% 99.66%, 66.9% 99.92%, 50% 100%, 33.1% 99.92%, 27.04% 99.66%, 22.58% 99.24%, 18.96% 98.64%, 15.9% 97.86%, 13.26% 96.9%, 10.94% 95.76%, 8.92% 94.41%, 7.14% 92.86%, 5.59% 91.08%, 4.24% 89.06%, 3.1% 86.74%, 2.14% 84.1%, 1.36% 81.04%, 0.76% 77.42%, 0.34% 72.96%, 0.08% 66.9%, 0% 50%, 0.08% 33.1%, 0.34% 27.04%, 0.76% 22.58%, 1.36% 18.96%, 2.14% 15.9%, 3.1% 13.26%, 4.24% 10.94%, 5.59% 8.92%, 7.14% 7.14%, 8.92% 5.59%, 10.94% 4.24%, 13.26% 3.1%, 15.9% 2.14%, 18.96% 1.36%, 22.58% 0.76%, 27.04% 0.34%, 33.1% 0.08%, 50% 0%, 66.9% 0.08%, 72.96% 0.34%, 77.42% 0.76%, 81.04% 1.36%, 84.1% 2.14%, 86.74% 3.1%, 89.06% 4.24%, 91.08% 5.59%, 92.86% 7.14%, 94.41% 8.92%, 95.76% 10.94%, 96.9% 13.26%, 97.86% 15.9%, 98.64% 18.96%, 99.24% 22.58%, 99.66% 27.04%, 99.92% 33.1%);
}

/* ── Forma ───────────────────────────────────────────────────────────── */
.club-av,
img.rounded-circle,
img[style*="border-radius:50%"],
img[style*="border-radius: 50%"],
/* Dashboard */
.pn-mc img, .pn-av img, .pn-p img, .pn-conta-cab img, .pn-hdr-foto img,
/* Job / Add Job */
.user-card img, .jra-tarefa-avatar,
/* Stories */
.st-cli-logo,
/* Plano de Conteúdo (logo do cliente) */
.pc-capa-logo, .pc-mini-logo, .pc-final-cliente, .pc-hero-logo {
    clip-path: var(--club-squircle) !important;
    border-radius: 0 !important;
    object-fit: cover;
}
/* Sombra não aparece em elemento recortado: quem precisa de destaque usa a moldura. */
.club-av, img.rounded-circle { box-shadow: none !important; }

/* ── Moldura opcional (borda/anel no mesmo formato) ──────────────────── */
.club-av-moldura {
    display: inline-block;
    line-height: 0;
    padding: var(--club-av-borda, 2px);
    background: var(--club-av-cor, #5d87ff);
    clip-path: var(--club-squircle);
    flex-shrink: 0;
}
.club-av-moldura > img,
.club-av-moldura > .club-av {
    display: block;
    clip-path: var(--club-squircle) !important;
    border-radius: 0 !important;
    border: 0 !important;
}
/* Brilho suave em volta (no elemento de fora, pra não ser recortado) */
.club-av-brilho { filter: drop-shadow(0 4px 14px color-mix(in srgb, var(--club-av-cor, #5d87ff) 40%, transparent)); }

/* Iniciais quando não há foto */
.club-av-iniciais {
    display: inline-flex; align-items: center; justify-content: center;
    clip-path: var(--club-squircle);
    background: linear-gradient(135deg, var(--club-av-cor, #5d87ff), color-mix(in srgb, var(--club-av-cor, #5d87ff) 55%, #000));
    color: #fff; font-weight: 800; line-height: 1; flex-shrink: 0;
}

/* ── Exceção: grupo de pessoas sobrepostas → círculo com anel da cor do card ── */
.club-av-grupo img,
.club-av-grupo .club-av,
.club-av-grupo img.rounded-circle {
    clip-path: none !important;
    border-radius: 50% !important;
    border: 0 !important;
    box-shadow: 0 0 0 2px var(--club-card, #fff) !important;
}