/**
 * assets/css/componentes.css — peças reutilizáveis do sistema visual
 * Depende de design-tokens.css (camada --ui-*) carregado antes.
 *
 * DE ONDE VEIO: cada componente aqui nasceu no perfil público e foi promovido
 * em 29/07/2026, depois de ter sobrevivido ao mockup aprovado. Nada entra
 * neste arquivo por antecipação — só sobe o que já provou servir numa tela de
 * verdade. Componente inventado antes do uso é dívida com aparência de
 * sistema.
 *
 * COMO NOMEAR: prefixo `.ui-`, nome do que a peça É, nunca de onde ela veio.
 * `.ui-cartao`, não `.perfil-cartao` — o cartão de formação e o cartão do
 * diretório são a mesma peça, e um nome de origem trava a segunda tela.
 *
 * O QUE NÃO ENTRA AQUI:
 *   · o selo (.pin-badge e família) — mora em pins.css, que é anterior a este
 *     arquivo e já é fonte única.
 *   · qualquer coisa que só uma página use: capa, avatar, cabeçalho do perfil.
 *     Isso fica no CSS da página.
 *
 * QUEM CARREGA: por enquanto profissional.php. Toda tela que adotar a camada
 * --ui-* carrega este arquivo junto. Ver a "regra do tudo ou nada" em
 * design-tokens.css antes de adotar numa tela nova.
 */

/* ============ Seção com título-sobrancelha ============ */
/* O título é um RÓTULO, não uma manchete: caixa-alta miúda, cinza, com uma
   régua embaixo. Quem carrega a hierarquia é o conteúdo. Empilhar manchetes
   de 24px numa página com 9 seções faz cada uma gritar e nenhuma ser lida. */

.ui-secao {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ui-secao-titulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    font-family: var(--fonte-corpo);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--ui-tinta-3);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ui-linha-suave);
}
/* Fora do caixa-alta do título: "5 de 12" é um número lido, não um rótulo. */
.ui-secao-contagem {
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: none;
    white-space: nowrap;
}

/* Mesma família do título, para rótulo solto fora de seção. */
.ui-eyebrow {
    font-size: .69rem;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--ui-tinta-3);
}

/* ============ Botões ============ */

.ui-botao {
    /* Sem isto, `flex-basis: 100%` (botão de largura total no mobile, ver
       diretorio.css) soma o padding POR CIMA dos 100% — o botão estoura a
       borda do card. box-sizing não muda nada no uso normal (largura por
       conteúdo): só passa a valer quando alguém força uma largura. */
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 24px;
    border-radius: 14px;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.ui-botao svg { width: 18px; height: 18px; }
/* Primário é TINTA, não amarelo: o amarelo institucional não segura texto
   escuro com contraste suficiente em botão cheio, e um botão amarelo grande
   ao lado dos selos amarelos faz a ação sumir no meio da decoração. */
.ui-botao-primario {
    background: var(--ui-tinta);
    color: var(--ui-superficie);
    box-shadow: var(--ui-sombra);
}
.ui-botao-secundario {
    background: var(--ui-superficie);
    color: var(--ui-tinta);
    border-color: var(--ui-linha);
}
.ui-botao:hover { transform: translateY(-1px); }
.ui-botao-primario:hover { box-shadow: 0 8px 20px -8px rgba(36, 23, 21, .45); }
.ui-botao-secundario:hover { background: var(--ui-superficie-2); }
.ui-botao:focus-visible { outline: 2px solid var(--ui-acento); outline-offset: 3px; }

/* ============ Chips ============ */
/* Lista de rótulos curtos e fechados: especialidades, técnicas, filtros. */

.ui-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.ui-chips li {
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--ui-superficie);
    border: 1px solid var(--ui-linha);
    color: var(--ui-tinta-2);
    font-size: .85rem;
}

/* ============ Cartão e lista dentro dele ============ */

.ui-cartao {
    background: var(--ui-superficie);
    border: 1px solid var(--ui-linha);
    border-radius: 18px;
    box-shadow: var(--ui-sombra);
    overflow: hidden;
}
.ui-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ui-lista li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    font-size: .92rem;
}
/* Divisória ENTRE itens, nunca no primeiro nem depois do último: com
   border-bottom em todos, o último filete encosta na borda do cartão e
   desenha uma linha dupla. */
.ui-lista li + li { border-top: 1px solid var(--ui-linha-suave); }
.ui-lista .pin-badge { flex-shrink: 0; }

/* ============ Linha do tempo ============ */
/* A régua vertical carrega informação real — o conteúdo É uma sequência
   cronológica. Não usar como enfeite em lista que não tem ordem. */

.ui-timeline {
    list-style: none;
    margin: 0;
    padding: 0 0 0 26px;
    position: relative;
}
.ui-timeline::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 9px;
    bottom: 9px;
    width: 1px;
    background: var(--ui-linha);
}
.ui-timeline li {
    position: relative;
    padding-bottom: 22px;
}
.ui-timeline li:last-child { padding-bottom: 0; }
.ui-timeline li::before {
    content: "";
    position: absolute;
    left: -26px;
    top: 7px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--ui-superficie);
    border: 2px solid var(--ui-linha);
}
/* O mais recente é o único preenchido — a lista vem em ordem decrescente. */
.ui-timeline li:first-child::before {
    border-color: var(--ui-acento);
    background: var(--ui-acento);
}
.ui-timeline-nome { font-size: .92rem; }
.ui-timeline-meta {
    display: block;
    margin-top: 1px;
    font-size: .78rem;
    color: var(--ui-tinta-3);
    font-variant-numeric: tabular-nums;
}

/* ============ Grade de fatos ============ */
/* Fatos curtos com ícone de confirmação, duas colunas. Serve para
   "informações rápidas" e para o resumo de um card de listagem. */

.ui-fatos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 22px;
}
.ui-fatos li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .9rem;
    color: var(--ui-tinta-2);
}
.ui-fatos svg {
    width: 16px;
    height: 16px;
    color: var(--ui-positivo);
    flex-shrink: 0;
}

/* ============ Avatar (foto ou inicial) ============ */
/* Promovido em 29/07 quando o diretório precisou do mesmo avatar do perfil —
   é o gatilho de promoção deste sistema: sobe quando a SEGUNDA tela usa.
   --ui-avatar-tamanho não tem valor padrão de propósito: cada tela define o
   seu (perfil usa 116px, diretório usa um valor menor para a lista), e o
   font-size do placeholder tem que ser definido junto — não é uma fração
   fixa do tamanho, é escolhido a olho para cada contexto. */
.ui-avatar,
.ui-avatar-placeholder {
    width: var(--ui-avatar-tamanho);
    height: var(--ui-avatar-tamanho);
    border-radius: 50%;
    border: 4px solid var(--ui-superficie);
    box-shadow: var(--ui-sombra);
    box-sizing: border-box;
    flex-shrink: 0;
}

/* .ui-avatar é a MOLDURA e a <img> vai dentro — não é o <img> direto, como
   era até 30/07. O motivo é o zoom: `transform: scale()` aplicado à própria
   imagem aumentaria o círculo inteiro; para aproximar o conteúdo é preciso
   alguém recortando por fora, e é esse o papel do overflow: hidden aqui.
   Enquadramento entra por três variáveis, geradas em Perfil::enquadramentoCss().
   Sem elas o padrão é centro e sem zoom — igual ao que era antes. */
.ui-avatar {
    display: block;
    overflow: hidden;
}
.ui-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: var(--foto-x, 50%) var(--foto-y, 50%);
    transform: scale(var(--foto-zoom, 1));
    /* transform-origin NO MESMO PONTO do object-position, e não no centro.
       object-position alinha o ponto X%/Y% da FOTO com o ponto X%/Y% da
       moldura; ancorar o zoom ali mantém fixo exatamente o que ela escolheu.
       Com a origem no centro (o padrão), aproximar jogava o recorte de volta
       para o meio da imagem e desfazia o reposicionamento — medido em
       30/07: rosto enquadrado sumia e voltava o tronco ao passar de 100%. */
    transform-origin: var(--foto-x, 50%) var(--foto-y, 50%);
}
.ui-avatar-placeholder {
    display: grid;
    place-items: center;
    background: linear-gradient(155deg, #D8C9AC, var(--ui-acento) 70%);
    color: var(--cor-branco);
    font-family: var(--fonte-display);
    font-weight: 500;
    user-select: none;
}

/* ============ Grade de fotos ============ */

.ui-galeria {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
/* Proporção travada em 4:3. Grade de fotos com proporções mistas é o detalhe
   que mais faz uma página parecer template — e as fotos chegam do celular
   dela, em orientação qualquer. */
.ui-foto {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: 14px;
    border: 1px solid var(--ui-linha);
    background: var(--ui-superficie-2);
}

/* ============ Preferências do sistema ============ */

@media (prefers-reduced-motion: reduce) {
    .ui-botao { transition: none; }
    .ui-botao:hover { transform: none; }
}

@media (max-width: 520px) {
    .ui-galeria { grid-template-columns: repeat(2, 1fr); }
    .ui-fatos { grid-template-columns: 1fr; }
}