/* ============================================================
   Sistema de Recrutamento Aurea — estilos do produto
   Só tokens do design system. Nenhum hex literal.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--color-bg-default);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--font-size-ui-md);
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-action); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; font-size: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.num { font-variant-numeric: tabular-nums; }

/* Ícone inline: sempre dimensionado, nunca herda o tamanho do contêiner. */
.ic { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: -3px; }
.ic--lg { width: 24px; height: 24px; }

.eyebrow {
  font-size: var(--font-size-ui-2xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-widest);
  color: var(--color-text-tertiary);
}

/* ------------------------------------------------------------
   SHELL — sidebar verde-dólar + área de conteúdo
   ------------------------------------------------------------ */
.shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  background: var(--color-inverse-surface);
  color: var(--color-text-on-dark);
  padding: var(--space-6) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  position: sticky;
  top: 0;
  height: 100vh;
}

/* 160px é o tamanho da logo na intranet (aurea-plataforma) — mesma medida aqui. */
.sidebar__logo { --logo-w: 160px; display: block; padding: 0 var(--space-2); }
.sidebar__logo:hover { text-decoration: none; }
.sidebar__logo img { width: var(--logo-w); height: auto; display: block; }

/* A arte tem folga própria: o wordmark termina a 62,5% da altura, sobrando
   ~37,5% de vazio embaixo. A margem negativa desconta essa folga para o
   rótulo encostar no nome, e é proporcional para acompanhar --logo-w. */
.sidebar__produto {
  display: block;
  margin-top: calc(var(--space-1) - var(--logo-w) * 0.12);
  margin-left: calc(var(--logo-w) * 0.36);
  color: var(--color-brand-on-dark);
  font-size: var(--font-size-ui-2xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.sidebar__nav { display: flex; flex-direction: column; gap: var(--space-1); }

.navlink {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-on-dark-secondary);
  font-size: var(--font-size-ui-md);
  transition: var(--transition-colors);
}
.navlink:hover { background: var(--color-inverse-container); color: var(--color-text-on-dark); text-decoration: none; }
.navlink[aria-current="page"] {
  background: var(--color-inverse-container);
  color: var(--color-text-on-dark);
  font-weight: var(--font-weight-semibold);
}
.navlink .ic { width: 17px; height: 17px; }

/* Botão de bug: mesma linguagem do nav, colado no rodapé da sidebar. */
.navlink--foot {
  margin-top: auto;
  background: none;
  border: none;
  text-align: left;
  width: 100%;
  font-size: var(--font-size-ui-sm);
  color: var(--color-text-on-dark-secondary);
}
.navlink--foot:hover { background: var(--color-inverse-container); color: var(--color-text-on-dark); }

/* ------------------------------------------------------------
   MODAL
   ------------------------------------------------------------ */
.overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(11, 26, 15, 0.5);
  display: grid; place-items: center;
  padding: var(--space-6);
}

.modal {
  position: relative;
  width: 100%; max-width: 520px;
  max-height: calc(100vh - var(--space-12));
  overflow-y: auto;
  background: var(--color-bg-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
  padding: var(--space-8);
}
/* Os botões ficam sempre alcançáveis, mesmo com lista longa. */
.modal__acoes {
  position: sticky; bottom: calc(var(--space-8) * -1);
  background: var(--color-bg-subtle);
  padding: var(--space-4) 0 0;
}
.modal h2 {
  font-family: var(--font-display);
  font-size: var(--font-size-ui-2xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  margin: 0 0 var(--space-2);
  padding-right: var(--space-8);
}
.modal > p {
  margin: 0 0 var(--space-6);
  color: var(--color-text-secondary);
  font-size: var(--font-size-ui-sm);
  line-height: var(--line-height-relaxed);
}
.modal__x {
  position: absolute; top: var(--space-5); right: var(--space-5);
  background: none; border: none; padding: var(--space-1);
  color: var(--color-text-tertiary); border-radius: var(--radius-sm);
  display: flex;
}
.modal__x:hover { color: var(--color-text-primary); background: var(--color-bg-muted); }

.modal label { display: block; margin-bottom: var(--space-2); }
.modal textarea {
  width: 100%; min-height: 150px; resize: vertical;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-family: inherit; font-size: var(--font-size-ui-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
}
.modal textarea:focus { outline: 2px solid var(--color-action); outline-offset: -1px; }

.modal__erro {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-error-bg); color: var(--color-error);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-ui-sm);
}
.modal__acoes { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-6); }

.linkish {
  background: none; border: none; padding: 0;
  color: var(--color-action); font: inherit; text-decoration: underline;
  display: inline-flex; align-items: center; gap: var(--space-1);
}
.linkish:hover { color: var(--color-action-hover); }

/* ------------------------------------------------------------
   EDITOR DO INTAKE
   ------------------------------------------------------------ */
.modal--largo { max-width: 760px; }
.modal--largo h3.section-title { font-size: var(--font-size-ui-lg); }

.ik-doc {
  padding: var(--space-4);
  background: var(--color-bg-muted);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-6);
}
.ik-doc .eyebrow { display: block; margin-bottom: var(--space-2); }
.ik-doc__atual {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.ik-doc input[type="file"] { font-size: var(--font-size-ui-sm); max-width: 100%; }
.ik-doc .hint { margin: var(--space-2) 0 0; }

.ik-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-5); }
.ik-grid textarea { min-height: 120px; }

.ik-comp {
  display: grid; gap: var(--space-2);
  padding: var(--space-4) 0;
  border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
}
.ik-comp:last-of-type { border-bottom: none; }
.ik-comp textarea { min-height: 60px; }
.modal--largo textarea, .modal--largo .input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-family: inherit; font-size: var(--font-size-ui-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
  resize: vertical;
}
.modal--largo .field { margin-bottom: var(--space-5); }
.modal--largo .field label { display: block; font-weight: var(--font-weight-semibold); font-size: var(--font-size-ui-sm); margin-bottom: var(--space-1); }

/* ------------------------------------------------------------
   CONTEÚDO
   ------------------------------------------------------------ */
.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-8);
  border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
  background: var(--color-bg-subtle);
  font-size: var(--font-size-ui-sm);
  color: var(--color-text-secondary);
  position: sticky; top: 0; z-index: var(--z-sticky);
}
.crumbs { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.crumbs .sep { color: var(--color-text-tertiary); }
.crumbs a { color: var(--color-text-secondary); }
.crumbs strong { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }

.view { padding: var(--space-8); max-width: 1440px; width: 100%; }

.page-head { display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-6); }
.page-head__text { min-width: 0; }
.page-head h1 {
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  margin: 0 0 var(--space-1);
}
.page-head p { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-ui-sm); }
.page-head__actions { margin-left: auto; display: flex; gap: var(--space-2); flex: none; }

/* ------------------------------------------------------------
   BOTÕES
   ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-width-thin) solid transparent;
  font-size: var(--font-size-ui-sm);
  font-weight: var(--font-weight-medium);
  transition: var(--transition-colors);
  white-space: nowrap;
}
.btn .ic { width: 15px; height: 15px; vertical-align: 0; }
.btn:hover { text-decoration: none; }

.btn--primary { background: var(--color-action); color: var(--primitive-cream-200); }
.btn--primary:hover { background: var(--color-action-hover); }

.btn--ghost { background: transparent; color: var(--color-text-primary); border-color: var(--color-border); }
.btn--ghost:hover { background: var(--color-bg-muted); }

.btn--quiet { background: transparent; color: var(--color-text-secondary); padding: var(--space-2) var(--space-3); }
.btn--quiet:hover { background: var(--color-bg-muted); color: var(--color-text-primary); }

/* Aprovar / Reprovar: pastel enquanto não escolhido, cheio quando escolhido.
   Os textos usam os passos 900 para passar contraste sobre o pastel. */
.btn--yes {
  background: var(--color-success-bg);
  color: var(--primitive-success-900);
  border-color: transparent;
}
.btn--no {
  background: var(--color-error-bg);
  color: var(--primitive-error-900);
  border-color: transparent;
}
.btn--yes:hover { background: var(--primitive-success-bg-light); filter: brightness(0.96); }
.btn--no:hover  { background: var(--primitive-error-bg-light);   filter: brightness(0.96); }

.btn[aria-pressed="true"].btn--yes {
  background: var(--primitive-success-900);
  color: var(--primitive-cream-200);
  box-shadow: 0 0 0 3px var(--color-success-bg);
  filter: none;
}
.btn[aria-pressed="true"].btn--no {
  background: var(--primitive-error-900);
  color: var(--primitive-cream-200);
  box-shadow: 0 0 0 3px var(--color-error-bg);
  filter: none;
}

/* ------------------------------------------------------------
   CARDS / SUPERFÍCIES
   ------------------------------------------------------------ */
.card {
  background: var(--color-surface);
  border: var(--border-width-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-low);
}

.panel { padding: var(--space-6); }

.section-title {
  font-family: var(--font-display);
  font-size: var(--font-size-ui-xl);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-4);
}

/* ------------------------------------------------------------
   BADGES / DOTS
   ------------------------------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-ui-2xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  white-space: nowrap;
}
.badge--neutral { background: var(--color-bg-muted); color: var(--color-text-secondary); }
.badge--ok      { background: var(--color-success-bg); color: var(--color-success); }
.badge--warn    { background: var(--color-warning-bg); color: var(--color-warning); }
.badge--err     { background: var(--color-error-bg);   color: var(--color-error); }
.badge--info    { background: var(--color-info-bg);    color: var(--color-info); }
.badge--brand   { background: var(--color-brand-subtle); color: var(--color-brand); }

.dot { width: 7px; height: 7px; border-radius: var(--radius-full); flex: none; }
.dot--ok { background: var(--color-success); }
.dot--warn { background: var(--color-warning); }
.dot--muted { background: var(--color-text-tertiary); }

/* ------------------------------------------------------------
   LISTA DE VAGAS
   ------------------------------------------------------------ */
.vagas { display: flex; flex-direction: column; gap: var(--space-3); }

.vaga-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto auto;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border: var(--border-width-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-low);
  transition: var(--transition-shadow), var(--transition-colors);
  color: inherit;
}
.vaga-row:hover { box-shadow: var(--shadow-mid); border-color: var(--color-border); text-decoration: none; }

.vaga-row__title {
  font-family: var(--font-display);
  font-size: var(--font-size-ui-lg);
  font-weight: var(--font-weight-semibold);
  margin: 0;
}

.vaga-row__count { text-align: right; }
.vaga-row__count b {
  display: block;
  font-size: var(--font-size-ui-2xl);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.vaga-row__count span { font-size: var(--font-size-ui-2xs); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); }

.chev { color: var(--color-text-tertiary); display: flex; }
.chev .ic { width: 18px; height: 18px; }

/* ------------------------------------------------------------
   INTAKE
   ------------------------------------------------------------ */
.intake { margin-bottom: var(--space-6); overflow: hidden; }
.intake > summary {
  list-style: none; cursor: pointer;
  padding: var(--space-4) var(--space-6);
  display: flex; align-items: center; gap: var(--space-3);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-ui-md);
}
.intake > summary::-webkit-details-marker { display: none; }
.intake > summary::after { content: '▾'; margin-left: auto; color: var(--color-text-tertiary); transition: var(--transition-transform); }
.intake[open] > summary::after { transform: rotate(180deg); }
/* Fechada, a seção precisa dizer o que tem dentro — senão a pessoa
   abre só para descobrir se vale abrir. Some quando está aberta: o
   conteúdo já está à vista. */
.intake > summary .intake__resumo {
  margin-left: var(--space-4);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-ui-sm);
  color: var(--color-text-tertiary);
}
.intake[open] > summary .intake__resumo { display: none; }

.intake > summary .intake__link { margin-left: auto; font-weight: var(--font-weight-regular); font-size: var(--font-size-ui-sm); }
.intake > summary .intake__link + * { margin-left: var(--space-3); }
.intake > summary::after { margin-left: var(--space-3); }

.intake__body {
  padding: var(--space-5) var(--space-6) var(--space-6);
  border-top: var(--border-width-thin) solid var(--color-border-subtle);
}


.intake__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6) var(--space-8); }
.intake__block--largo { grid-column: 1 / -1; }
.intake__block h4 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-ui-2xs);
  text-transform: uppercase; letter-spacing: var(--letter-spacing-widest);
  color: var(--color-text-tertiary);
  font-weight: var(--font-weight-semibold);
}
.intake__block p, .intake__block ol, .intake__block ul { margin: 0; font-size: var(--font-size-ui-sm); line-height: var(--line-height-relaxed); }
.intake__block ol, .intake__block ul { padding-left: var(--space-5); }

/* Responsabilidades em largura cheia, must-have e nice-to-have lado a
   lado embaixo. Ver o comentário em viewVaga: é o arranjo que tira o
   branco sem esticar o cartão. Em tela estreita vira uma coluna só. */
.intake__linhas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6) var(--space-8);
}
@media (max-width: 720px) { .intake__linhas { grid-template-columns: 1fr; } }

/* Os prazos ficam numa faixa própria, abaixo das três colunas: são a
   parte que olha para a frente, e viram o ponto de partida do
   30/60/90 combinado na oferta. */
.intake__prazos {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: var(--border-width-thin) solid var(--color-border-subtle);
}
.intake__prazos > h4 {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-ui-2xs);
  text-transform: uppercase; letter-spacing: var(--letter-spacing-widest);
  color: var(--color-text-tertiary);
  font-weight: var(--font-weight-semibold);
}
.intake__prazos .eyebrow { margin: 0 0 var(--space-1); color: var(--color-brand); }

/* ------------------------------------------------------------
   QUADRO (kanban)
   ------------------------------------------------------------ */
.board {
  display: grid; grid-auto-flow: column; grid-auto-columns: 268px;
  gap: var(--space-4);
  overflow-x: auto;
  padding-bottom: var(--space-4);
  /* A rolagem de lado para no fim do quadro em vez de virar rolagem
     da página inteira. Ver js/app.js, "mover o quadro de lado". */
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.col { background: var(--color-bg-muted); border-radius: var(--radius-md); padding: var(--space-3); min-height: 140px; align-self: start; }
.col__head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2) var(--space-3); }
.col__head h3 { margin: 0; font-size: var(--font-size-ui-sm); font-weight: var(--font-weight-semibold); }
.col__head .count {
  margin-left: auto; font-variant-numeric: tabular-nums;
  background: var(--color-surface); border-radius: var(--radius-full);
  padding: 0 var(--space-2); font-size: var(--font-size-ui-2xs); color: var(--color-text-secondary);
  border: var(--border-width-thin) solid var(--color-border-subtle);
}
.col__list {
  display: flex; flex-direction: column; gap: var(--space-2);
  max-height: 460px; overflow-y: auto;
  padding: var(--space-px);   /* espaço pro box-shadow dos cards não ser cortado */
  scrollbar-width: thin;
}
/* colunas de estado final entram recolhidas visualmente — o foco é o pipeline */
.col--final { opacity: .82; }
.col--final:hover, .col--final:focus-within { opacity: 1; }
.col__empty { padding: var(--space-4) var(--space-2); color: var(--color-text-tertiary); font-size: var(--font-size-ui-sm); text-align: center; }

.cand-card {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: var(--border-width-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-low);
  color: inherit;
  transition: var(--transition-shadow), var(--transition-transform);
}
.cand-card:hover { box-shadow: var(--shadow-mid); transform: translateY(-1px); text-decoration: none; }
.cand-card { cursor: grab; }
.cand-card:active { cursor: grabbing; }
.cand-card.arrastando { opacity: .4; }

/* Coluna sob o cursor durante o arraste. */
.col--alvo {
  background: var(--color-action-subtle);
  outline: var(--border-width-default) dashed var(--color-action);
  outline-offset: -2px;
}
.col--alvo.col--final { opacity: 1; }

/* "Mover para" no perfil */
.mover { align-items: center; }
.mover__label {
  font-size: var(--font-size-ui-2xs); text-transform: uppercase;
  letter-spacing: var(--letter-spacing-widest); color: var(--color-text-tertiary);
  font-weight: var(--font-weight-semibold);
}
.cand-card__body { min-width: 0; flex: 1; }
.cand-card__name { font-weight: var(--font-weight-semibold); font-size: var(--font-size-ui-sm); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cand-card__estado { display: block; margin-top: var(--space-1); }

.avatar {
  width: 34px; height: 34px; flex: none;
  border-radius: var(--radius-full);
  background: var(--color-inverse-surface);
  color: var(--color-brand-on-dark);
  display: grid; place-items: center;
  font-size: var(--font-size-ui-2xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
}
.avatar--lg { width: 56px; height: 56px; font-size: var(--font-size-ui-lg); }
.avatar { position: relative; overflow: hidden; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* As iniciais ficam por baixo: se a imagem falhar, ela se remove e sobram elas. */
/* A imagem é absoluta e cobre as iniciais; se ela falhar, o onerror a
   remove e as iniciais reaparecem. Nada de z-index negativo aqui —
   isso jogava as iniciais para trás do próprio fundo do avatar. */
.avatar__ini { position: relative; }

/* ------------------------------------------------------------
   PERFIL / SCORECARD
   ------------------------------------------------------------ */
.profile-head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.profile-head h1 { font-family: var(--font-display); font-size: var(--font-size-h3); font-weight: var(--font-weight-semibold); margin: 0; letter-spacing: var(--letter-spacing-tight); }
.profile-head p { margin: 2px 0 0; color: var(--color-text-secondary); font-size: var(--font-size-ui-sm); }
.profile-head .page-head__actions { align-self: center; }

/* Na etapa "contratado" a fila de botões cresce — carta-proposta, carta
   assinada, gerar contrato, pasta no Drive, e ainda o seletor de etapa.
   Com `flex: none` neles e nada segurando a coluna do texto, ela era
   espremida até sobrar uma palavra por linha: "Bruno / C", e o cargo
   descendo por cima do selo da etapa.

   Agora a linha quebra: o nome tem largura mínima de gente, e os botões
   caem para a linha de baixo quando não couberem. */
.profile-head { flex-wrap: wrap; row-gap: var(--space-3); }
.profile-head .page-head__text { flex: 1 1 260px; min-width: 240px; }
.profile-head .page-head__actions { flex-wrap: wrap; justify-content: flex-end; }

.layout-2col { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: var(--space-6); align-items: start; }

.comp { padding: var(--space-5) 0; border-bottom: var(--border-width-thin) solid var(--color-border-subtle); }
.comp:first-of-type { padding-top: 0; }
.comp:last-of-type { border-bottom: none; padding-bottom: 0; }
.comp__title { font-weight: var(--font-weight-semibold); font-size: var(--font-size-ui-md); margin: 0 0 2px; }
.comp__desc  { color: var(--color-text-secondary); font-size: var(--font-size-ui-sm); margin: 0 0 var(--space-3); }

/* Cabeçalho de grupo de competências (Filtro, Transversal, Competências…) */
.comp-grupo {
  font-size: var(--font-size-ui-2xs); text-transform: uppercase;
  letter-spacing: var(--letter-spacing-widest); color: var(--color-text-tertiary);
  font-weight: var(--font-weight-semibold);
  margin: var(--space-6) 0 0;
  padding-top: var(--space-5);
  border-top: var(--border-width-thin) solid var(--color-border);
}
/* Só o título simples (usado no bloco herdado) perde o respiro do topo.
   A faixa verde tem padding próprio — zerar aqui cortava o retângulo. */
.comp-grupo:not(.comp-grupo--chip):first-of-type { margin-top: 0; padding-top: 0; border-top: none; }

/* Título de grupo do scorecard: faixa verde clara, como o selo "Aberta".
   Texto no passo 900 do verde para passar contraste sobre o fundo pastel. */
.comp-grupo--chip {
  display: block;
  background: var(--color-success-bg);
  color: var(--primitive-success-900);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  border-top: none;
  margin: var(--space-8) 0 var(--space-5);
  letter-spacing: var(--letter-spacing-wide);
  font-size: var(--font-size-ui-2xs);
}
/* Sem espaço extra só quando a faixa é a primeira coisa depois do título
   da seção; se vier depois de uma competência, mantém o respiro. */
.section-title + .comp-grupo--chip { margin-top: 0; }

.comp--filtro { border-left: 3px solid var(--color-error); padding-left: var(--space-4); }
.comp__aviso {
  display: flex; gap: var(--space-2); align-items: flex-start;
  background: var(--color-error-bg); color: var(--color-error);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--font-size-ui-2xs); margin: 0 0 var(--space-3);
}

/* E1 v2: pergunta-guia, "O que observar", rodapé e regras de uso. */
.comp__pergunta { font-style: italic; font-size: var(--font-size-ui-md); margin: 0 0 var(--space-2); }
.comp__observar-rotulo {
  font-size: var(--font-size-ui-2xs); font-weight: var(--font-weight-semibold);
  text-transform: uppercase; letter-spacing: var(--letter-spacing-widest);
  color: var(--color-text-tertiary); margin: var(--space-4) 0 var(--space-2);
}
.comp__observar { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); }
.comp__observar li {
  position: relative; padding-left: var(--space-5);
  font-size: var(--font-size-ui-sm); color: var(--color-text-secondary);
}
.comp__observar li::before {
  content: ''; position: absolute; left: 4px; top: .55em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--color-brand);
}
.comp__observar b { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.comp__nota {
  background: var(--color-bg-subtle); border-radius: var(--radius-sm);
  padding: var(--space-3); margin: 0 0 var(--space-4);
  font-size: var(--font-size-ui-2xs); color: var(--color-text-secondary);
}
.comp__evidencia { max-width: 520px; }
.regras-uso {
  margin-top: var(--space-8); padding: var(--space-4) var(--space-5);
  background: var(--color-brand-subtle); border-left: 3px solid var(--color-brand);
  border-radius: var(--radius-sm);
}
.regras-uso__titulo { font-weight: var(--font-weight-semibold); margin: 0 0 var(--space-2); }
.regras-uso ul { margin: 0; padding-left: var(--space-5); font-size: var(--font-size-ui-sm); color: var(--color-text-secondary); }
.regras-uso li + li { margin-top: var(--space-1); }

.comp__comentario {
  display: block; width: 100%; max-width: 420px; margin-top: var(--space-3);
  min-height: 52px; resize: vertical;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: var(--font-size-ui-sm);
  background: var(--color-bg-subtle); color: var(--color-text-primary);
}

/* Sugestões de pergunta — recolhidas por padrão. */
.sugestoes { margin-top: var(--space-3); }
.sugestoes > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--font-size-ui-2xs);
  color: var(--color-action);
  padding: var(--space-1) 0;
}
.sugestoes > summary::-webkit-details-marker { display: none; }
.sugestoes > summary::marker { content: ''; }
.sugestoes > summary::before { content: '▸'; }
.sugestoes[open] > summary::before { content: '▾'; }
.sugestoes > summary:hover { text-decoration: underline; }
.sugestoes ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.sugestoes li { padding: var(--space-2) 0 var(--space-2) var(--space-4); border-left: 2px solid var(--color-border-subtle); }
.sugestoes li + li { margin-top: var(--space-2); }
.sugestoes__q { display: block; font-size: var(--font-size-ui-sm); }
.sugestoes__foco {
  display: block; margin-top: var(--space-1);
  font-size: var(--font-size-ui-2xs); font-style: italic;
  color: var(--color-brand);
}
/* O "como conduzir" não é uma nota de rodapé: é a primeira coisa a ler. */
.sugestoes--intro { border-left: 3px solid var(--color-brand); }
.sugestoes--intro > summary {
  font-family: var(--font-display);
  font-size: var(--font-size-ui-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  padding: 0;
}
/* Precisa vencer .sugestoes[open] > summary::before, daí o [open] aqui também. */
.sugestoes--intro > summary::before,
.sugestoes--intro[open] > summary::before { content: none; }
.sugestoes--intro > summary::after {
  content: '▾';
  margin-left: var(--space-2);
  font-size: var(--font-size-ui-sm);
  color: var(--color-text-tertiary);
}
.sugestoes--intro[open] > summary::after { content: '▴'; }
.sugestoes--intro > summary:hover { text-decoration: none; color: var(--color-brand); }
.sugestoes--intro p {
  font-size: var(--font-size-ui-md);
  color: var(--color-text-primary);
  margin: var(--space-4) 0 0;
  line-height: var(--line-height-relaxed);
}
.sugestoes--intro p:first-of-type { margin-top: var(--space-5); }

/* O que veio da etapa anterior */
.herdado { background: var(--color-bg-subtle); border-left: 3px solid var(--color-success); }
.herdado p { white-space: pre-wrap; font-size: var(--font-size-ui-sm); margin: 0; line-height: var(--line-height-relaxed); }

/* Checklist do must-have */
.checklist { list-style: none; margin: var(--space-5) 0 0; padding: 0; }
.checklist li + li { margin-top: var(--space-1); }
.checklist label {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-ui-sm);
  line-height: var(--line-height-snug);
  cursor: pointer;
}
.checklist label:hover { background: var(--color-bg-muted); }
.checklist input { width: 17px; height: 17px; flex: none; margin-top: 1px; accent-color: var(--color-action); }
.checklist input:checked + span { color: var(--color-text-secondary); }

/* Lista do aviso de campos em branco — na ordem em que aparecem na tela */
.pendencias { list-style: none; margin: 0; padding: 0; }
.pendencias > li {
  padding: var(--space-4);
  background: var(--color-surface);
  border: var(--border-width-thin) solid var(--color-border-subtle);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-sm);
}
.pendencias > li + li { margin-top: var(--space-3); }

.pendencias__cabeca {
  display: flex; gap: var(--space-2); align-items: center;
  font-size: var(--font-size-ui-md);
  line-height: var(--line-height-snug);
}
.pendencias__cabeca .ic { color: var(--color-warning); }

.pendencias__detalhe {
  margin: var(--space-1) 0 0 26px;
  font-size: var(--font-size-ui-2xs);
  color: var(--color-text-secondary);
  line-height: var(--line-height-snug);
}

.pendencias__itens {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0 0 0 26px;
}
.pendencias__itens li {
  position: relative;
  padding: var(--space-1) 0 var(--space-1) var(--space-4);
  font-size: var(--font-size-ui-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-snug);
}
.pendencias__itens li::before {
  content: ''; position: absolute; left: 0; top: 11px;
  width: 5px; height: 5px; border-radius: var(--radius-full);
  background: var(--color-text-tertiary);
}

/* Vários scorecards na mesma etapa (E3: duas pessoas validam) */
.scorecard-item + .scorecard-item {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: var(--border-width-thin) solid var(--color-border-subtle);
}
.scorecard-item .eyebrow { margin: 0 0 var(--space-3); }
.acoes-scorecard { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
/* Apagar fica discreto: existe, mas não convida. */
.btn.apagar { color: var(--color-text-tertiary); }
.btn.apagar:hover { color: var(--color-error); background: var(--color-error-bg); }
.herdado__autor {
  margin: var(--space-5) 0 0;
  font-size: var(--font-size-ui-2xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}
.herdado__autor:first-child { margin-top: 0; }

.registro {
  margin: var(--space-4) 0 0;
  font-size: var(--font-size-ui-2xs);
  color: var(--color-text-tertiary);
}

.scale { display: inline-flex; border: var(--border-width-thin) solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; flex-wrap: wrap; }
.scale button {
  background: var(--color-surface);
  border: none;
  border-right: var(--border-width-thin) solid var(--color-border);
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-ui-sm);
  color: var(--color-text-secondary);
  transition: var(--transition-colors);
}
.scale button:last-child { border-right: none; }
.scale button:hover { background: var(--color-bg-muted); }
.scale button[aria-pressed="true"][data-tipo="no"]     { background: var(--color-error);   color: var(--primitive-cream-200); font-weight: var(--font-weight-semibold); }
.scale button[aria-pressed="true"][data-tipo="yes"]    { background: var(--color-success); color: var(--primitive-cream-200); font-weight: var(--font-weight-semibold); }
.scale button[aria-pressed="true"][data-tipo="neutro"] { background: var(--color-bg-muted); color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }

.field label { display: block; font-weight: var(--font-weight-semibold); font-size: var(--font-size-ui-md); margin-bottom: var(--space-1); }
.field .hint { color: var(--color-text-secondary); font-size: var(--font-size-ui-sm); margin: 0 0 var(--space-3); }
.field textarea {
  width: 100%; min-height: 160px; resize: vertical;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit; font-size: var(--font-size-ui-sm); line-height: var(--line-height-relaxed);
  background: var(--color-bg-subtle); color: var(--color-text-primary);
}
.field textarea:focus { outline: 2px solid var(--color-action); outline-offset: -1px; background: var(--color-surface); }

.or { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0; color: var(--color-text-tertiary); font-size: var(--font-size-ui-2xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-widest); }
.or::before, .or::after { content: ''; height: 1px; background: var(--color-border-subtle); flex: 1; }

.dropzone {
  border: var(--border-width-default) dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-ui-sm);
  background: var(--color-bg-subtle);
}
.dropzone b { display: block; color: var(--color-text-primary); margin: var(--space-2) 0 2px; }
.dropzone .ic--lg { color: var(--color-text-tertiary); }

/* O alvo é clicável: vira <label> do input escondido. */
label.dropzone { display: block; cursor: pointer; transition: border-color .12s, background .12s; }
label.dropzone:hover { border-color: var(--color-brand); background: var(--color-bg-muted); }
/* Virou instrução de duas linhas, não mais uma lista de extensões:
   precisa de medida de leitura para não atravessar o cartão. */
.dropzone__formatos {
  display: block;
  margin: var(--space-2) auto 0;
  max-width: 48ch;
  line-height: 1.5;
  color: var(--color-text-tertiary);
}

/* Arquivo por cima, esperando soltar. */
.dropzone--sobre {
  border-color: var(--color-brand);
  border-style: solid;
  background: var(--color-bg-muted);
}

/* Lendo o arquivo — um .docx grande leva um instante. */
.dropzone--lendo { opacity: .6; pointer-events: none; }

/* Já tem transcrição: o alvo deixa de convidar e passa a informar. */
.dropzone--cheia {
  border-style: solid;
  border-color: var(--color-brand);
  background: var(--color-bg-subtle);
}
.dropzone--cheia .ic--lg { color: var(--color-brand); }
.dropzone--cheia b { word-break: break-all; }
.dropzone__acoes {
  display: flex; gap: var(--space-2);
  justify-content: center; margin-top: var(--space-3);
}

.sintese { background: var(--color-bg-subtle); border-left: 3px solid var(--color-brand); }
.sintese__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.sintese__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: var(--space-6); }
.sintese h4, .sintese label { margin: 0 0 var(--space-1); font-size: var(--font-size-ui-sm); font-weight: var(--font-weight-semibold); display: flex; align-items: center; gap: var(--space-2); }
.sintese textarea { min-height: 130px; }

/* O fieldset só existe para desligar o scorecard de quem não é dono:
   não pode virar caixa nem mudar o espaçamento da coluna. */
.trava { display: contents; border: 0; margin: 0; padding: 0; min-width: 0; }
.herdado__rotulo {
  margin: var(--space-5) 0 var(--space-1);
  font-size: var(--font-size-ui-sm);
  font-weight: var(--font-weight-semibold);
}
.herdado__rotulo:first-child { margin-top: 0; }
.herdado__texto {
  margin: 0;
  white-space: pre-wrap;
  font-size: var(--font-size-ui-sm);
  line-height: var(--line-height-relaxed);
}
.herdado__etapa + .herdado__etapa {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: var(--border-width-thin) solid var(--color-border-subtle);
}
.herdado__etapa .eyebrow { margin: 0 0 var(--space-3); }
.herdado--vazio { border-left-color: var(--color-border); }
.herdado .fortes h4 { color: var(--color-success); }
.herdado .atencao h4 { color: var(--color-warning); }
.sintese ul { margin: 0; padding-left: var(--space-5); font-size: var(--font-size-ui-sm); line-height: var(--line-height-relaxed); }
.sintese li + li { margin-top: var(--space-2); }
.sintese .fortes h4 { color: var(--color-success); }
.sintese .atencao h4 { color: var(--color-warning); }

.decisao__row {
  display: flex; gap: var(--space-3); flex-wrap: wrap;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
}
/* A decisão da E3 é a última porta antes da oferta: pesa mais na página. */
.decisao--final {
  border: var(--border-width-thick) solid var(--color-brand);
  box-shadow: var(--shadow-mid);
}
.decisao--final .section-title { font-size: var(--font-size-h4); }
.decisao__selo {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: var(--space-1) var(--space-3);
  background: var(--color-brand-subtle);
  color: var(--color-brand);
  border-radius: var(--radius-full);
  font-size: var(--font-size-ui-2xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}
.decisao--final .decisao__row .btn { font-size: var(--font-size-ui-md); padding: var(--space-3) var(--space-5); }

.quem { margin-top: var(--space-6); }
.quem .input { max-width: 320px; }

.decisao__erro {
  margin: var(--space-4) 0 0;
  padding: var(--space-2) var(--space-3);
  background: var(--color-warning-bg); color: var(--color-warning);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-ui-sm);
}

/* Pisca o par Aprovar/Reprovar quando alguém tenta salvar sem escolher. */
@keyframes pisca {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  25%, 75% { box-shadow: 0 0 0 5px var(--color-warning-bg); }
}
.pisca { animation: pisca 900ms var(--ease-default) 2; }

/* Card que acabou de mudar de coluna. */
@keyframes chegou {
  0%   { box-shadow: 0 0 0 4px var(--color-success-bg); transform: scale(1.02); }
  100% { box-shadow: var(--shadow-low); transform: none; }
}
.cand-card--novo {
  animation: chegou 1600ms var(--ease-out) 1;
  border-color: var(--color-success);
}

@media (prefers-reduced-motion: reduce) {
  .pisca, .cand-card--novo { animation: none; }
  .cand-card--novo { box-shadow: 0 0 0 3px var(--color-success-bg); }
}

.timeline { display: flex; flex-direction: column; gap: var(--space-3); }
.tl-item { border-left: 2px solid var(--color-border); padding-left: var(--space-4); position: relative; }
.tl-item::before {
  content:''; position:absolute; left:-5px; top: 6px;
  width: 8px; height: 8px; border-radius: var(--radius-full);
  background: var(--color-border);
}
.tl-item--done::before  { background: var(--color-success); }
.tl-item--now::before   { background: var(--color-brand); }
.tl-item h4 { margin: 0 0 2px; font-size: var(--font-size-ui-sm); font-weight: var(--font-weight-semibold); }
.tl-item p  { margin: 0; font-size: var(--font-size-ui-2xs); color: var(--color-text-secondary); }

.kv { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: var(--border-width-thin) solid var(--color-border-subtle); font-size: var(--font-size-ui-sm); }
.kv:last-child { border-bottom: none; }
.kv dt { color: var(--color-text-secondary); margin: 0; }
.kv dd { margin: 0; font-weight: var(--font-weight-medium); text-align: right; }

/* ------------------------------------------------------------
   TABELA
   ------------------------------------------------------------ */
.table { width: 100%; border-collapse: collapse; font-size: var(--font-size-ui-sm); }
.table th {
  text-align: left; padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-ui-2xs); text-transform: uppercase;
  letter-spacing: var(--letter-spacing-widest); color: var(--color-text-tertiary);
  font-weight: var(--font-weight-semibold);
  border-bottom: var(--border-width-thin) solid var(--color-border);
  white-space: nowrap;
}
.table td { padding: var(--space-3) var(--space-4); border-bottom: var(--border-width-thin) solid var(--color-border-subtle); vertical-align: middle; }
.table tbody tr:hover { background: var(--color-bg-subtle); }
.table tbody tr:last-child td { border-bottom: none; }

/* Filtros da lista de candidatos */
.filtros { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.filtros__busca { flex: 1 1 260px; min-width: 0; }

.linha-clicavel { cursor: pointer; }
.linha-clicavel:hover { background: var(--color-bg-subtle); }
.linha-clicavel td:first-child { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.linha-linkedin { display: inline-flex; color: var(--color-text-tertiary); }
.linha-linkedin:hover { color: var(--color-action); }
.linha-linkedin .ic { width: 14px; height: 14px; }

.input, .select {
  padding: var(--space-2) var(--space-3);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-family: inherit; font-size: var(--font-size-ui-sm);
  color: var(--color-text-primary);
}

/* ------------------------------------------------------------
   PORTARIA (senha)
   ------------------------------------------------------------ */
.portaria { width: 100%; max-width: 400px; margin: var(--space-20) auto; text-align: center; }
.portaria__logo { width: 120px; height: auto; margin: 0 auto var(--space-6); display: block; }
.portaria h1 {
  font-family: var(--font-display); font-size: var(--font-size-ui-2xl);
  font-weight: var(--font-weight-semibold); margin: 0 0 var(--space-2);
}
.portaria p { font-size: var(--font-size-ui-sm); line-height: var(--line-height-relaxed); margin: 0 0 var(--space-6); }
.portaria form { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.portaria form .input { flex: 1 1 180px; min-width: 0; }
/* Botão do Google: branco com borda, como manda a identidade deles. */
.btn--google {
  width: 100%;
  justify-content: center;
  gap: var(--space-3);
  background: #FFFFFF;
  color: #1F1F1F;
  border-color: var(--color-border);
  font-weight: var(--font-weight-medium);
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-ui-md);
}
.btn--google:hover { background: #F7F7F7; box-shadow: var(--shadow-low); }
.btn--google .ic { width: 18px; height: 18px; }

/* Caminho alternativo da portaria: discreto, mas encontrável. */
.portaria__alt { margin-top: var(--space-5); text-align: left; }
.portaria__alt > summary {
  list-style: none; cursor: pointer;
  font-size: var(--font-size-ui-2xs);
  color: var(--color-text-tertiary);
  text-align: center;
}
.portaria__alt > summary::-webkit-details-marker { display: none; }
.portaria__alt > summary:hover { color: var(--color-action); text-decoration: underline; }
.portaria__alt form { margin-top: var(--space-3); }
.portaria__alt .small { margin: var(--space-2) 0 0; text-align: left; }

.portaria__aviso--ok {
  background: var(--color-success-bg); color: var(--primitive-success-900);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
  font-size: var(--font-size-ui-sm); margin-bottom: var(--space-4);
  line-height: var(--line-height-snug);
}

.portaria__erro {
  background: var(--color-error-bg); color: var(--color-error);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
  font-size: var(--font-size-ui-sm); margin-bottom: var(--space-4) !important;
}

/* ------------------------------------------------------------
   PIPELINE — funil e distribuição por vaga
   ------------------------------------------------------------
   Rampa ORDINAL do verde-dólar: os estágios têm ordem, então a
   cor mostra a ordem. Um tom só, clara → escura. Validada com
   validate_palette.js --ordinal contra a superfície branca.
   ------------------------------------------------------------ */
:root {
  --pipe-1: #9DB397;   /* Entrevista 1 — 2.25:1 sobre branco */
  --pipe-2: #7A9573;
  --pipe-3: #5E735A;   /* = --primitive-dark-700 */
  --pipe-4: #3E4E3A;   /* = --primitive-dark-900 */
}

/* Números do topo */
.painel-num { display: flex; align-items: stretch; gap: var(--space-8); flex-wrap: wrap; }

.hero { display: flex; flex-direction: column; justify-content: center; }
.hero__valor {
  font-size: 56px; font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tighter); letter-spacing: var(--letter-spacing-tight);
}
.hero__rotulo { color: var(--color-text-secondary); font-size: var(--font-size-ui-sm); margin-top: var(--space-1); }

.tiles { display: flex; gap: var(--space-6); flex-wrap: wrap; align-self: center; }
.saidas {
  align-self: center;
  padding-left: var(--space-8);
  border-left: var(--border-width-thin) solid var(--color-border-subtle);
}
.saidas .tile__valor { font-size: var(--font-size-ui-xl); color: var(--color-text-secondary); }
.tile { display: flex; flex-direction: column; }
.tile__valor { font-size: var(--font-size-ui-2xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); }
.tile__rotulo { color: var(--color-text-tertiary); font-size: var(--font-size-ui-2xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); }

/* Marca de dado: fina, ponta arredondada, base quadrada. */
.barra {
  height: 20px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  min-width: 3px;
  transition: filter var(--duration-fast) var(--ease-default);
}
.barra:hover { filter: brightness(1.08); }

/* Funil */
.funil { display: flex; flex-direction: column; gap: var(--space-4); }
.funil__linha { display: grid; grid-template-columns: 168px minmax(0,1fr) 40px; align-items: center; gap: var(--space-4); }
.funil__rotulo { display: flex; flex-direction: column; line-height: var(--line-height-snug); }
.funil__rotulo b { font-size: var(--font-size-ui-sm); font-weight: var(--font-weight-semibold); }
.funil__trilho { background: var(--color-bg-muted); border-radius: var(--radius-sm); }
.funil__valor { font-size: var(--font-size-ui-lg); font-weight: var(--font-weight-semibold); text-align: right; }

/* Por vaga — barra empilhada, 2px de superfície separando os segmentos */
.vagabar {
  display: grid; grid-template-columns: 200px minmax(0,1fr) 32px;
  align-items: center; gap: var(--space-4);
  padding: var(--space-2) 0;
  color: inherit;
}
.vagabar:hover { text-decoration: none; }
.vagabar:hover .vagabar__nome { color: var(--color-action); }
.vagabar__nome { font-size: var(--font-size-ui-sm); font-weight: var(--font-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vagabar__trilho { background: var(--color-bg-muted); border-radius: var(--radius-sm); }
.vagabar__stack { display: flex; gap: 2px; }
.barra--seg { border-radius: 0; display: grid; place-items: center; }
.vagabar__stack .barra--seg:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.barra__n {
  font-size: var(--font-size-ui-2xs); font-weight: var(--font-weight-semibold);
  color: var(--primitive-cream-200); font-variant-numeric: tabular-nums;
}
.vagabar__total { font-size: var(--font-size-ui-sm); text-align: right; color: var(--color-text-secondary); }

/* Alertas do pipeline: parados e feedback pendente */
.alertas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); }
.alerta { border-left: 3px solid var(--color-warning); }
.alerta .section-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-ui-lg); margin-bottom: var(--space-1); }
.alerta .section-title .ic { color: var(--color-warning); }
.alerta .hint { margin-bottom: var(--space-4); }

.lista-alerta { list-style: none; margin: 0; padding: 0; }
.lista-alerta li {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: var(--border-width-thin) solid var(--color-border-subtle);
  font-size: var(--font-size-ui-sm);
}
.lista-alerta li:first-child { border-top: none; }
.lista-alerta li b { margin-left: auto; color: var(--color-warning); white-space: nowrap; }
.lista-alerta li .muted { margin-left: auto; }
.lista-alerta li b + .muted, .lista-alerta li .muted + b { margin-left: 0; }

/* Chamada de feedback no perfil */
.feedback-cta {
  display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.feedback-cta__texto { flex: 1; min-width: 260px; }
.feedback-cta h3 {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-size: var(--font-size-ui-xl);
  font-weight: var(--font-weight-semibold); margin: 0 0 var(--space-2);
}
.feedback-cta p { margin: 0; font-size: var(--font-size-ui-sm); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); }
.feedback-cta--pendente { background: var(--color-warning-bg); border-left: 3px solid var(--color-warning); }
.feedback-cta--pendente h3 .ic { color: var(--color-warning); }
.feedback-cta--feito { background: var(--color-success-bg); border-left: 3px solid var(--color-success); }
.feedback-cta--feito h3 .ic { color: var(--color-success); }

/* Barrinha de taxa nas tabelas de Análises */
.taxa { display: flex; align-items: center; gap: var(--space-3); }
.minibarra {
  flex: 1; min-width: 60px; height: 8px;
  background: var(--color-bg-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.minibarra > span { display: block; height: 100%; border-radius: var(--radius-full); }

/* Legenda — identidade nunca é só a cor */
.legenda { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.legenda__item { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-ui-2xs); color: var(--color-text-secondary); }
.swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; }

/* Dica ao passar o mouse: quem está naquela barra */
.dica {
  position: fixed; z-index: var(--z-tooltip); pointer-events: none;
  background: var(--color-inverse-surface); color: var(--color-text-on-dark);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  font-size: var(--font-size-ui-2xs); box-shadow: var(--shadow-high);
  max-width: 340px; line-height: var(--line-height-snug);
}
.dica b { display: block; margin-bottom: var(--space-2); font-size: var(--font-size-ui-sm); }
.dica ul { list-style: none; margin: 0; padding: 0; }
.dica li { padding: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dica p { margin: 0; }
.dica .muted { color: var(--color-text-on-dark-secondary); }

.hero__nota {
  display: inline-flex; align-items: center; gap: var(--space-1);
  margin-top: var(--space-2);
  font-size: var(--font-size-ui-2xs);
  color: var(--color-warning);
}
.hero__nota .ic { width: 13px; height: 13px; }

.empty { text-align: center; padding: var(--space-16) var(--space-6); color: var(--color-text-secondary); }
.empty h3 { font-family: var(--font-display); font-size: var(--font-size-ui-xl); margin: 0 0 var(--space-2); color: var(--color-text-primary); }
.empty p { margin: 0 auto; max-width: 460px; font-size: var(--font-size-ui-sm); }

.callout {
  display: flex; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--font-size-ui-sm);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-6);
}
.callout--info  { background: var(--color-info-bg);    color: var(--color-text-primary); border-left: 3px solid var(--color-info); }
.callout--ok    { background: var(--color-success-bg); color: var(--color-text-primary); border-left: 3px solid var(--color-success); }
.callout--ok .ic { color: var(--color-success); }
.callout--warn  { background: var(--color-warning-bg); color: var(--color-text-primary); border-left: 3px solid var(--color-warning); }
.callout .ic { width: 18px; height: 18px; margin-top: 2px; }

/* Aviso que abre a lista ali mesmo, sem mandar pra outra tela. */
.pendencia { display: block; padding: 0; }
.pendencia > summary {
  list-style: none; cursor: pointer;
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4) var(--space-5);
}
.pendencia > summary::-webkit-details-marker { display: none; }
.pendencia > summary::after { content: '▾'; margin-left: auto; padding-left: var(--space-4); color: var(--color-text-tertiary); }
.pendencia[open] > summary::after { content: '▴'; }
.pendencia__lista { list-style: none; margin: 0; padding: 0 var(--space-5) var(--space-4) 46px; }
.pendencia__lista li {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-2) 0;
  border-top: var(--border-width-thin) solid var(--color-border-subtle);
}
.pendencia__lista li a { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }

.stack > * + * { margin-top: var(--space-6); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.muted { color: var(--color-text-secondary); }
.small { font-size: var(--font-size-ui-2xs); }

/* ------------------------------------------------------------
   TOAST
   ------------------------------------------------------------ */
.toast {
  position: fixed; bottom: var(--space-6); left: 50%; transform: translateX(-50%);
  background: var(--color-inverse-surface); color: var(--color-text-on-dark);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-md);
  box-shadow: var(--shadow-high); z-index: var(--z-toast);
  font-size: var(--font-size-ui-sm);
  display: flex; align-items: center; gap: var(--space-3);
}
.toast a { color: var(--color-brand-on-dark); }

/* ------------------------------------------------------------
   RESPONSIVO
   ------------------------------------------------------------ */
@media (max-width: 1023px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; align-items: center; gap: var(--space-6); padding: var(--space-3) var(--space-4); }
  .sidebar__nav { flex-direction: row; overflow-x: auto; }
  .sidebar__foot { display: none; }
  .view, .topbar { padding-left: var(--space-5); padding-right: var(--space-5); }
  .layout-2col { grid-template-columns: 1fr; }
  .vaga-row { grid-template-columns: minmax(0,1fr) auto; row-gap: var(--space-3); }
}

/* ------------------------------------------------------------
   BASE DE ONBOARDING
   ------------------------------------------------------------ */
/* Chamada no perfil de quem foi aprovado — botão com peso próprio. */
.onb-cta {
  display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap;
  border-left: 3px solid var(--color-success);
  background: var(--color-success-bg);
  margin-bottom: var(--space-6);
}
.onb-cta__texto { flex: 1; min-width: 260px; }
.onb-cta h3 {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--font-size-ui-xl);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-2);
}
.onb-cta h3 .ic { color: var(--color-success); }
.onb-cta p { margin: 0; font-size: var(--font-size-ui-sm); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); }
.btn--grande { padding: var(--space-3) var(--space-6); font-size: var(--font-size-ui-md); }
.onb__origem { margin: calc(var(--space-4) * -1) 0 var(--space-6); }
.onb__bloco + .onb__bloco {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--border-width-thin) solid var(--color-border-subtle);
}
.onb__bloco .eyebrow { margin: 0 0 var(--space-2); }
.onb__texto {
  margin: 0;
  white-space: pre-wrap;
  font-size: var(--font-size-ui-sm);
  line-height: var(--line-height-relaxed);
}
.onb__secao .hint { margin-top: calc(var(--space-3) * -1); }

@media print {
  .sidebar, .topbar, .page-head__actions, .decisao__row, .toast { display: none; }
  .shell { display: block; }
  .card { box-shadow: none; border: none; padding-left: 0; padding-right: 0; }
  .view { padding: 0; }
  .onb__secao { break-inside: auto; }
  .onb__bloco { break-inside: avoid; }
}

/* ---------- filtro de estado das vagas ---------- */
.segm {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  margin-bottom: var(--space-4);
  background: var(--color-bg-muted);
  border-radius: var(--radius-md);
}
.segm__b {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 0; border-radius: var(--radius-sm);
  background: transparent; cursor: pointer;
  font: inherit; font-size: var(--font-size-label); font-weight: 500;
  color: var(--color-text-secondary);
}
.segm__b:hover { color: var(--color-text-primary); }
.segm__b .num {
  font-size: var(--font-size-caption);
  color: var(--color-text-tertiary);
}
.segm__b.is-on {
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-low);
}
.segm__b.is-on .num { color: var(--color-brand); }

/* ---------- fechar várias vagas ---------- */
.lote { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow-y: auto; }
.lote li + li { border-top: var(--border-width-thin) solid var(--color-border-subtle); }
.lote label {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  cursor: pointer;
}
.lote label:hover { background: var(--color-bg-subtle); }
.lote input { margin: 0; flex: none; align-self: center; }
.lote__nome { flex: 1 1 auto; }
.lote__todas { margin: 0 0 var(--space-2); font-size: var(--font-size-label); }
.lote__aviso { margin-top: var(--space-4); }

/* ---------- devolutivas ---------- */
.devo__medidor { margin-bottom: var(--space-5); }
.devo__trilho {
  height: 6px;
  background: var(--color-bg-muted);
  border-radius: 999px;
  overflow: hidden;
}
.devo__feito {
  height: 100%;
  background: var(--color-success);
  border-radius: 999px;
}
.devo__conta { margin: var(--space-2) 0 0; }
.devo__falta { color: var(--color-warning); }

.devo { list-style: none; margin: 0; padding: 0; }
.devo li {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: var(--border-width-thin) solid var(--color-border-subtle);
  flex-wrap: wrap;
}
.devo li:first-child { border-top: none; }
.devo__nome { font-weight: var(--font-weight-medium); }
.devo__espera { margin-left: auto; white-space: nowrap; color: var(--color-text-tertiary); }
.devo__espera--tarde { color: var(--color-warning); }
.devo__btn { flex: none; }
.devo__espera + .devo__btn { margin-left: var(--space-3); }
.devo li > .muted + .devo__btn { margin-left: auto; }

/* ---------- lista de quem tem acesso ---------- */
.pessoas { list-style: none; margin: 0; padding: 0; }
.pessoas li {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: var(--border-width-thin) solid var(--color-border-subtle);
  flex-wrap: wrap;
}
.pessoas li:first-child { border-top: none; }
.pessoas__quem { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
.pessoas__papel { flex: none; }

/* textarea de liberar acesso em lote */
.libera { display: block; width: 100%; font-family: inherit; resize: vertical; margin-bottom: var(--space-2); }
/* ---------- distribuição de notas por competência ---------- */
.comp-dist { display: flex; flex-direction: column; gap: var(--space-3); }
.comp-dist__linha { display: flex; align-items: center; gap: var(--space-4); }
.comp-dist__rotulo {
  flex: 0 0 30%; min-width: 140px;
  display: flex; flex-direction: column; gap: 2px;
}
.comp-dist__trilho {
  flex: 1; min-width: 80px; height: 14px;
  display: flex; gap: 2px;
  background: var(--color-bg-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.comp-dist__seg {
  display: flex; align-items: center; justify-content: center;
  min-width: 3px; cursor: default;
}
.comp-dist__seg--no     { background: var(--color-error); }
.comp-dist__seg--yes    { background: var(--color-success); }
.comp-dist__seg--neutro { background: var(--color-border); }
.comp-dist__valor { flex: 0 0 44px; text-align: right; color: var(--color-text-tertiary); }
.comp-dist__valor--no { color: var(--color-error); }

/* Botão desligado precisa parecer desligado. Sem isto ele fica
   idêntico a um que funciona, e quem clica não entende por que nada
   acontece — foi o que ia acontecer com o "Gerar contrato" antes de
   o formulário estar ligado. */
.btn[disabled], .btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Botão do que já foi feito. Não é um botão desligado: continua
   clicável, porque refazer a carta ou trocar o arquivo é legítimo.
   É só a diferença entre "falta fazer" e "já está feito", que o
   botão não contava antes. */
.btn--feito {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-color: transparent;
}
.btn--feito:hover { background: var(--color-success-bg); filter: brightness(.96); }
.btn--feito .ic { color: var(--color-success); }