/* ===========================================
   SUPERFÍCIES / CARDS
   Casco compartilhado das superfícies claras do app (cadastro, feed, install).
   Invariante universal: raio --radius-md + fundo claro; fundo, borda e sombra
   variam por modificador. Superfícies com geometria própria (raio só embaixo do
   painel colapsável, borda colorida da busca de área, gradiente do ic-card,
   borda 1.5px do display de serviço) mantêm sua regra bespoke SOBRE esta base.
   ======================================== */
.card {
  background: var(--bg-white);
  border: none;   /* zera a borda de UA de <button>/<input> usados como card */
  border-radius: var(--radius-md);
}

.card--soft {
  background: var(--bg-soft);
}

.card--shadow {
  box-shadow: var(--shadow-sm);
}


/* ===========================================
   CHECKBOX — primitivo compartilhado (.check-box)
   Caixa de marcação 24×24 usada no check "perfil público" (cadastro) e no
   "exigir currículo" (criar vaga) — antes eram dois blocos idênticos em
   arquivos diferentes. O estado marcado é lido do aria-pressed do BOTÃO-pai
   que contém a caixa (contrato genérico), então serve a qualquer toggle novo.
   ======================================== */
.check-box {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  border: 2px solid var(--border-mid);
  background: transparent;
  transition: var(--transition);
}

.check-box .icon {
  font-size: 1.1rem;
  color: var(--t-light);
  opacity: 0;
  transition: opacity 0.15s ease;
}

[aria-pressed="true"] .check-box {
  background: var(--info-blue);
  border-color: var(--info-blue);
}

[aria-pressed="true"] .check-box .icon {
  opacity: 1;
}


/* ===========================================
   ÍNDICE DE CONFIANÇA — Componente ic-bar
   Reutilizado em cards do feed e na agenda
   ======================================== */
/* MOLDURA-ESCUDO (contorno) com o NÚMERO dentro — versão reduzida do "70" do card
   de IC do cadastro (ic-hero). Substitui o antigo "escudo-glifo + número". A cor do
   tier vai no CONTAINER: o stroke do SVG usa currentColor e o número herda. */
.ic-bar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
  vertical-align: middle;   /* alinha o badge ao texto quando inline (ex.: comentários) */
}

/* Moldura em forma de escudo: SVG só de contorno (mesma do ic-hero, reduzida). */
.ic-bar__frame {
  display: block;
  width: 1.8rem;
  height: 1.95rem;
}

/* SEM linha de borda e SEM sombra. Preenchimento SÓLIDO na cor padrão do tier
   (currentColor, das cores do :root). Fonte ÚNICA do escudo: vale para TODO
   .ic-bar, inclusive os hardcoded da lista de pedidos. O número (.ic-bar__value)
   é texto branco por cima. */
.ic-bar__frame path {
  fill: currentColor;
  stroke: none;
}

/* Número DENTRO da moldura; o centro visual do escudo é um pouco acima do centro
   da caixa (o desenho afunila para baixo), daí o -54% (como no ic-hero). Branco
   sobre o fundo sólido do tier. */
.ic-bar__value {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -54%);
  font-size: var(--fs-3);
  font-weight: var(--fw-heavy);
  line-height: 1;
  color: var(--t-light);
}

/* Cor do escudo + número variam pela faixa do índice (100→0 em 4 partes). */
.ic-bar--ok   { color: var(--success-fill); }  /* 75–100: verde médio (gpp_good) */
.ic-bar--warn { color: var(--a-gold); }        /* 50–74: amarelo do tema */
.ic-bar--alert{ color: var(--danger); }        /* 25–49: vermelho (gpp_maybe) */
.ic-bar--bad  { color: var(--t-main); }        /* 0–24: cinza-petróleo escuro */

/* ESCALAS por contexto (o badge deve ficar condizente com os vizinhos da linha):
   - padrão (sem modificador): cards com avatar grande (lista de pedidos, popup
     de indicados) — casa com o avatar de 28px+;
   - --sm: linhas compactas onde o badge divide espaço com texto/avatar pequenos
     (comentários, divulgador de vaga, card de ajudante);
   - --lg: cabeçalho do card de profissional (3 linhas de texto → mais respiro),
     com número um degrau maior para leitura destacada. */
.ic-bar--sm .ic-bar__frame { width: 1.3rem; height: 1.4rem; }
.ic-bar--sm .ic-bar__value { font-size: var(--fs-1); }

/* --lg é usado só no cabeçalho do card de profissional, onde o escudo ACOMPANHA
   a altura das 3 linhas empilhadas (nome/profissão/disponibilidade) — a regra de
   preenchimento fica em css/feed/cards-pro.css (.pro-card__head-right .ic-bar--lg),
   junto do contexto que estica. Estes são só o fallback fixo p/ qualquer outro uso. */
.ic-bar--lg .ic-bar__frame { width: 2.4rem; height: 2.6rem; }
.ic-bar--lg .ic-bar__value { font-size: var(--fs-7); }