/**
 * assets/css/pins.css — componente de selo (pin) e suas coleções.
 *
 * FONTE ÚNICA do .pin-badge. Antes ele existia duplicado em admin.css e
 * profissional.css, e as duas cópias já tinham começado a divergir. Toda
 * página que mostra pin carrega este arquivo:
 *   profissional.php, painel.php, pin-solicitar.php,
 *   admin/pins-tipos.php, admin/pin-solicitacoes.php
 *
 * O HTML do selo NUNCA é escrito à mão — sai de Pin::badgeHtml(), que decide
 * a classe de forma a partir da categoria. Ver o bloco FORMAS_POR_CATEGORIA
 * em app/gamificacao/Pin.php para o racional das 4 formas.
 *
 * POR QUE drop-shadow E NÃO box-shadow: o hexágono é feito
 * com clip-path, e clip-path recorta o box-shadow junto — a sombra some. Já o
 * filter: drop-shadow() é aplicado DEPOIS do recorte, então acompanha a
 * silhueta real. Mesma razão pela qual o brilho de cima é um gradiente em
 * ::after (que o clip-path recorta corretamente) em vez de um inset ring:
 * inset box-shadow segue o retângulo do elemento, não o hexágono.
 */

/* ============ Selo ============ */

.pin-badge {
    /* --pin-tamanho compensa a área que cada forma ocupa dentro da caixa:
       o hexágono preenche só ~65% dela, então precisa ser maior que o
       círculo para ter o MESMO peso visual na grade. */
    --pin-tamanho: 48px;
    /* Respiro do ícone como FRAÇÃO DO PRÓPRIO SELO, não em %. Padding em
       porcentagem resolve contra a largura do PAI: dentro do .pin-item (78px
       fixos) os 18% davam 14px e ninguém notou, mas o mesmo selo numa lista de
       620px virava um disco de 224px. Com calc o selo fica autocontido e pode
       ser usado em qualquer largura. Os fatores abaixo reproduzem o padding em
       px que as formas já tinham na grade — nada muda onde já funcionava. */
    --pin-respiro-fator: .29;

    position: relative;
    box-sizing: border-box;
    width: var(--pin-tamanho);
    height: var(--pin-tamanho);
    padding: calc(var(--pin-tamanho) * var(--pin-respiro-fator));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
    background: var(--cor-destaque);
    filter: drop-shadow(0 2px 5px rgba(66, 38, 34, 0.32));
}

/* Brilho de topo — dá o acabamento de medalha. Fica por cima inclusive das
   imagens enviadas, e o clip-path da forma o recorta junto com o resto. */
.pin-badge::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.06) 46%, rgba(0, 0, 0, 0.08) 100%);
    pointer-events: none;
}

/* ============ As 4 formas ============ */

/* Círculo — formação e certificação. */
.pin-forma-circulo {
    border-radius: 50%;
}
/* O ::after é o brilho sobreposto e tem `inset: 0` — sem herdar o raio, ele
   fica QUADRADO por cima do círculo e aparece como um halo nos cantos. O
   quadrado já tinha essa linha; o círculo não, e o defeito estava no ar. */
.pin-forma-circulo::after { border-radius: 50%; }

/* Quadrado arredondado — "carteirinha": títulos do diretório e parceiros. */
.pin-forma-quadrado {
    --pin-tamanho: 46px;
    --pin-respiro-fator: .27;
    border-radius: 14px;
}
.pin-forma-quadrado::after { border-radius: 14px; }

/* Hexágono — vínculo com o Congresso Nacional de Epilação. Geometria da marca
   (mesma família do grafismo da landing e do padrão de fundo do auth).
   Vértices em cima e embaixo. */
/* Cantos ARREDONDADOS desde 30/07. O recorte vem de um <clipPath> em
   objectBoundingBox emitido por Pin::defsSvg() — polygon() não arredonda,
   path() seria em px (e o selo tem 4 tamanhos) e mask-image mataria o
   drop-shadow. O porquê completo está no comentário de Pin::defsSvg().
   O polygon fica como reserva: se o <defs> não estiver na página, o
   clip-path: url() é ignorado e o selo cairia QUADRADO — com as duas
   declarações, a de baixo vence quando resolve e a de cima segura o caso
   contrário. */
.pin-forma-hexagono {
    --pin-tamanho: 53px;
    --pin-respiro-fator: .31;
    clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
    clip-path: url(#pin-hexagono);
}

/* NÃO existe .pin-forma-losango: o losango foi descartado no ajuste de
   2026-07-27. Premiação e produção científica passaram a ser hexágono, por
   serem conquistas do congresso. Três formas, não quatro. */

/* ============ Conteúdo do selo ============ */

/* contain (e não cover): as imagens de pin são logos PNG/WEBP transparentes,
   então cover cortaria o logo — ainda mais dentro do hexágono. */
.pin-badge-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* ============ Selo com imagem ============ */
/* A imagem OCUPA O SELO INTEIRO — sem respiro e sem anel. O padding de .29
   existe para o EMOJI, que é um glifo pequeno precisando de margem; aplicado a
   uma imagem ele a transforma num adesivo flutuando no meio do selo. A imagem
   já vem no enquadramento final, então a forma recorta ela e ponto.
   `overflow: hidden` é o que faz o border-radius do selo recortar a imagem —
   border-radius sozinho não recorta filho. No hexágono quem recorta é o
   clip-path, que já se aplica aos filhos. Uma regra só, em vez de repetir o
   raio de cada forma e ter que manter os dois em sincronia para sempre. */
.pin-badge-com-imagem {
    padding: 0;
    overflow: hidden;
}
.pin-badge-com-imagem .pin-badge-img {
    object-fit: cover;
}
/* O brilho de cima atrapalha quando o conteúdo é foto: escurece o rosto/logo
   sem acrescentar relevo, porque a imagem já tem volume próprio. */
.pin-badge-com-imagem::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0.10) 100%);
}

.pin-badge-pequeno {
    --pin-tamanho: 38px;
    font-size: 1rem;
}
.pin-forma-quadrado.pin-badge-pequeno  { --pin-tamanho: 36px; }
.pin-forma-hexagono.pin-badge-pequeno  { --pin-tamanho: 42px; }

/* ============ Estado bloqueado (ainda não conquistado) ============ */
/* SÓ aparece na área logada, no painel da própria profissional. O perfil
   público mostra exclusivamente o que já foi conquistado. */

.pin-badge-bloqueado {
    background: var(--cor-marrom-20);
    filter: drop-shadow(0 1px 3px rgba(66, 38, 34, 0.16));
    /* Truque para achatar o emoji num vulto cinza: o glifo colorido fica
       transparente e o text-shadow sem blur redesenha ele numa cor só. */
    color: transparent;
    text-shadow: 0 0 0 var(--cor-marrom-60);
}
.pin-badge-bloqueado::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 60%);
}
.pin-badge-bloqueado .pin-badge-img {
    filter: grayscale(1);
    opacity: 0.4;
}

/* ============ Grade de pins ============ */

/* Alinhada à ESQUERDA por padrão: no painel são listas longas por categoria e
   centralizar faz cada linha começar num ponto diferente, o que atrapalha a
   varredura. O perfil público sobrescreve para centralizar — lá são poucos
   selos e a leitura é de vitrine, não de lista. */
.pins-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 14px;
    justify-content: flex-start;
}
.perfil-conquistas .pins-grid {
    justify-content: center;
}

/* Uma linha só no perfil público (30/07). Quem decide quantos cabem é o JS de
   profissional.php, medindo o offsetTop real — daqui sai só o estado. A grade
   continua com flex-wrap: os itens que sobram existem no DOM, ficam ocultos,
   e o [Ver todos] os traz de volta sem recarregar a página. */
.pins-grid-cortada { overflow: hidden; }
.pin-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 78px;
    text-align: center;
}
/* DEPOIS de .pin-item, não antes: as duas são seletor de classe única, então
   quem vence é a que vier por último. Declarada acima, `display: none` perdia
   para o `display: flex` do .pin-item e o item "escondido" continuava na tela
   — o JS marcava certo e nada acontecia. */
.pin-item-oculto { display: none; }

/* Altura fixa da área do selo: sem isso os nomes desalinham entre si, porque
   cada forma tem uma altura diferente. */
.pin-item-selo {
    height: 57px;
    display: flex;
    align-items: center;
}
.pin-item-nome {
    font-size: 0.7rem;
    line-height: 1.25;
    color: var(--cor-texto-suave);
}
.pin-item-bloqueado .pin-item-nome {
    color: var(--cor-marrom-60);
}

/* Pin bloqueado que dá pra solicitar é um link — precisa PARECER clicável,
   senão a pré-seleção do formulário nunca é descoberta. */
a.pin-item-solicitavel {
    text-decoration: none;
    border-radius: 12px;
    padding: 6px 2px;
    margin: -6px -2px;
    transition: background .15s ease, transform .15s ease;
}
a.pin-item-solicitavel:hover,
a.pin-item-solicitavel:focus-visible {
    background: var(--cor-amarelo-20);
    transform: translateY(-2px);
}
a.pin-item-solicitavel:hover .pin-badge-bloqueado,
a.pin-item-solicitavel:focus-visible .pin-badge-bloqueado {
    background: var(--cor-marrom-40);
}
a.pin-item-solicitavel:focus-visible {
    outline: 2px solid var(--cor-destaque);
    outline-offset: 2px;
}
.pin-item-status {
    font-size: 0.62rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--cor-marrom-60);
}
.pin-item-status-analise {
    color: #8a6d00;
}

/* ============ Grupos por categoria ============ */

.pins-grupo + .pins-grupo {
    margin-top: 26px;
}
.pins-grupo-titulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--cor-borda);
    font-family: var(--fonte-display);
    font-size: 0.85rem;
    font-weight: var(--peso-display-padrao);
    color: var(--cor-texto);
}
.pins-grupo-contagem {
    font-family: var(--fonte-corpo);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cor-texto-suave);
    white-space: nowrap;
}

/* ============ Legenda das formas ============ */
/* Sem isto a forma é só enfeite — é a legenda que transforma em código legível. */

.pins-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin: 0 0 24px;
    padding: 14px 16px;
    list-style: none;
    background: var(--cor-off-white);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-padrao);
}
.pins-legenda li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--cor-texto-suave);
}
/* 15px era pequeno demais: nesse tamanho as arestas do hexágono somem e ele
   lê como círculo — justo a distinção que a legenda existe para ensinar. */
.pins-legenda-forma {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    background: var(--cor-marrom-40);
}
.pins-legenda-forma.pin-forma-hexagono { width: 20px; height: 20px; }
.pins-legenda-forma.pin-forma-quadrado { border-radius: 5px; }

/* ============ Linha do tempo de eventos ============ */
/* Substituiu os pins por evento: um selo por edição de congresso poluía a
   grade e obrigava a cadastrar pin novo a cada ano. A régua vertical carrega
   informação real — os eventos SÃO uma sequência cronológica. Os pins de
   congresso agora caem desta lista (>=1 Congressista, >=5 Legacy). */

.eventos-timeline {
    list-style: none;
    margin: 0;
    padding: 0 0 0 26px;
    position: relative;
}
.eventos-timeline::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: var(--cor-borda);
}
.evento-linha {
    position: relative;
    padding-bottom: 20px;
}
.evento-linha:last-child { padding-bottom: 0; }
.evento-linha::before {
    content: "";
    position: absolute;
    left: -26px;
    top: 6px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--cor-fundo);
    border: 2px solid var(--cor-borda);
}
/* O marcador cheio é sempre o mais recente — a lista vem ordenada por ano. */
.evento-linha:first-child::before {
    background: var(--cor-destaque);
    border-color: var(--cor-destaque);
}
.evento-nome {
    font-size: 0.95rem;
    color: var(--cor-texto);
    line-height: 1.35;
}
.evento-meta {
    display: block;
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--cor-texto-suave);
    font-variant-numeric: tabular-nums;
}
.evento-pendente {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--cor-amarelo-20);
    color: #8a6d00;
    font-size: 0.68rem;
    font-weight: 600;
}

/* ============ Faixa de troféus (trilhas especiais) ============ */
/* Trilha especial não é pin: é o resultado de juntar vários pins. Fica numa
   faixa própria acima da grade, em tamanho maior, para não competir com as
   dezenas de selos de 48px que vêm logo abaixo. */

.trofeus-faixa {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    justify-content: center;
    margin-bottom: 28px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--cor-borda);
}
.trofeu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 108px;
    text-align: center;
}
.trofeu-selo {
    /* Mesmo motivo do --pin-tamanho: `padding: 18%` resolvia contra a largura
       do .trofeu (108px) e não contra o troféu, então qualquer contêiner de
       largura diferente mudava o respiro. Ver o bloco do .pin-badge. */
    --trofeu-tamanho: 76px;
    width: var(--trofeu-tamanho);
    height: var(--trofeu-tamanho);
    box-sizing: border-box;
    padding: calc(var(--trofeu-tamanho) * .26);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    line-height: 1;
    border-radius: 50%;
    background: var(--cor-destaque);
    filter: drop-shadow(0 4px 12px rgba(66, 38, 34, 0.34));
}
/* Troféu com imagem segue a regra do selo: preenche o disco inteiro. O :has()
   é o que permite reagir ao conteúdo aqui — o troféu não passa por
   Pin::badgeHtml(), então não existe classe no servidor para marcar o caso. */
.trofeu-selo:has(.pin-badge-img) {
    padding: 0;
    overflow: hidden;
}
.trofeu-selo .pin-badge-img { object-fit: cover; }
.trofeu-nome {
    font-family: var(--fonte-display);
    font-size: 0.78rem;
    font-weight: var(--peso-display-padrao);
    line-height: 1.25;
    color: var(--cor-texto);
}

@media (max-width: 480px) {
    .pins-grid { gap: 14px 8px; }
    .pin-item { width: 68px; }
    .trofeus-faixa { gap: 14px; }
    .trofeu { width: 92px; }
    .trofeu-selo { --trofeu-tamanho: 64px; font-size: 1.7rem; }
}