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

   A base (shell, botões, cards, tabela, toast) é a mesma do
   sistema de recrutamento, de propósito: quem entra nas duas
   plataformas não deve sentir que trocou de empresa.
   ============================================================ */

*, *::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); }

/* Título de grupo da barra: existe porque Onboarding é a primeira
   seção de várias (Treinamentos, PDI). Sem o título, a segunda seção
   apareceria como se fosse mais um item solto. */
.sidebar__grupo {
  padding: 0 var(--space-3);
  margin-bottom: var(--space-2);
  color: rgba(244, 240, 232, 0.45);
  font-size: var(--font-size-ui-2xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-widest);
}
.sidebar__grupo + .sidebar__grupo { margin-top: var(--space-5); }

.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; }

/* Seção que ainda não existe: aparece apagada, para a pessoa saber
   que vem, sem prometer um clique que não leva a lugar nenhum. */
.navlink--breve { color: rgba(244, 240, 232, 0.32); cursor: default; }
.navlink--breve:hover { background: none; color: rgba(244, 240, 232, 0.32); }
.navlink--breve small {
  margin-left: auto;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.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); }

/* ------------------------------------------------------------
   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; }

/* ------------------------------------------------------------
   ABAS — as quatro do Onboarding
   ------------------------------------------------------------ */
.abas {
  display: flex;
  gap: var(--space-1);
  padding: 0 var(--space-8);
  border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
  background: var(--color-bg-subtle);
  position: sticky; top: 53px; z-index: var(--z-sticky);
  overflow-x: auto;
}
.aba {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-ui-sm);
  color: var(--color-text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: var(--transition-colors);
}
.aba:hover { color: var(--color-text-primary); text-decoration: none; }
.aba[aria-current="page"] {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  border-bottom-color: var(--color-brand);
}

/* ------------------------------------------------------------
   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[disabled] { opacity: .5; cursor: not-allowed; }

.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); }

.btn--grande { padding: var(--space-3) var(--space-6); font-size: var(--font-size-ui-md); }

/* Concluir um marco é a ação mais importante da plataforma inteira.
   Ouro, e só ela — nenhum outro botão usa a cor da marca. */
.btn--marco {
  background: var(--color-brand);
  color: var(--color-text-on-brand);
  font-weight: var(--font-weight-semibold);
}
.btn--marco:hover { background: var(--color-brand); filter: brightness(1.08); }

.btn--perigo { background: transparent; color: var(--color-error); border-color: var(--color-error); }
.btn--perigo:hover { background: var(--color-error-bg); }

/* ------------------------------------------------------------
   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; display: inline-block; }
.dot--ok { background: var(--color-success); }
.dot--warn { background: var(--color-warning); }
.dot--muted { background: var(--color-text-tertiary); }

/* ------------------------------------------------------------
   A JORNADA — o coração da plataforma
   ------------------------------------------------------------
   Um caminho que desce serpenteando, com um marco em cada curva.
   A posição de cada marco é uma senoide calculada no JS; o traço
   que liga um ao outro é um SVG desenhado por trás, com a mesma
   conta. Por isso a coluna tem largura fixa: se ela esticasse com
   a tela, o traço e as bolinhas sairiam de sincronia.
   ------------------------------------------------------------ */
/* O caminho vive dentro de uma folha, e não solto na página: sem a
   moldura ele virava uma fita fina perdida no meio de um campo vazio. */
.trilha {
  display: flex; flex-direction: column; align-items: center;
  max-width: 780px; margin: 0 auto;
  padding: var(--space-4) var(--space-6) var(--space-2);
}

/* Cabeçalho de capítulo: Gente, Negócio, Específico. */
/* As três cores dos capítulos. São cores da marca, não inventadas: ouro,
   navy e verde-dólar. São três matizes diferentes (amarelo, azul, verde),
   e não três tons do mesmo — quem enxerga cor de um jeito diferente
   continua distinguindo os capítulos pela posição no caminho. */
:root {
  --cap-gente:      var(--color-brand);
  --cap-negocio:    var(--color-accent-navy);
  --cap-especifico: var(--primitive-dark-800);
}

/* A legenda no alto da folha: é ela que ensina o que cada cor quer dizer,
   já que o caminho virou um só e não tem mais três títulos no meio. */
.legenda {
  display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center;
  /* Respiro até a trilha: sem ele a bandeirinha do primeiro capítulo
     encostava na pastilha da legenda, e as duas pareciam a mesma coisa. */
  margin-bottom: var(--space-8);
}
.legenda__item {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-bg-subtle);
  font-size: var(--font-size-ui-2xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.legenda__bola { width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--cor); flex: none; }
.legenda__conta { font-variant-numeric: tabular-nums; color: var(--color-text-tertiary); }

.caminho { position: relative; }
.caminho__traco { position: absolute; inset: 0; pointer-events: none; }
.caminho__traco path { fill: none; stroke-linecap: round; }
/* Mesmo o trecho que falta leva a cor do capítulo, só que lavada: sem
   isso, uma trilha recém-começada ficava cinza inteira e as três cores
   só apareciam depois de concluir alguma coisa. */
.traco-fundo { stroke: color-mix(in srgb, var(--cor) 38%, transparent); stroke-width: 3; stroke-dasharray: 2 9; }
.traco-feito { stroke: var(--cor, var(--color-brand)); stroke-width: 3; }

/* O botão é só a bolinha, plantada no ponto calculado. O nome fica ao
   LADO, virado para fora da curva: embaixo da bolinha ele era atravessado
   pelo tracejado que desce para o marco seguinte. */
.marco {
  position: absolute;
  width: 64px; height: 64px;
  transform: translate(-50%, -50%);
  background: none; border: none; padding: 0;
}
.marco__bolha {
  position: relative;
  width: 64px; height: 64px;
  border-radius: var(--radius-full);
  display: grid; place-items: center;
  font-size: var(--font-size-ui-lg);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-tertiary);
  transition: transform var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
}
.marco__nome {
  position: absolute; top: 50%;
  width: var(--lado, 150px);
  transform: translateY(-50%);
  font-size: var(--font-size-ui-2xs);
  line-height: var(--line-height-snug);
  color: var(--color-text-secondary);
}
.marco[data-lado="dir"] .marco__nome { left:  var(--off, 80px); text-align: left; }
.marco[data-lado="esq"] .marco__nome { right: var(--off, 80px); text-align: right; }
.marco:hover .marco__bolha { transform: translateY(-2px); }

/* Feito: a cor do capítulo, cheia, com o certo dentro. */
.marco--feito .marco__bolha {
  background: var(--cor);
  border-color: var(--cor);
  color: var(--primitive-cream-200);
}
.marco--feito .marco__nome { color: var(--color-text-primary); }
.marco--feito .marco__bolha .ic { width: 26px; height: 26px; }

/* Agora: é onde a pessoa está. Anel pulsando, e o nome em destaque. */
.marco--agora .marco__bolha {
  background: var(--color-surface);
  border-color: var(--cor);
  color: var(--cor);
  box-shadow: 0 0 0 6px var(--cor-fraca);
  animation: pulso 2.4s var(--ease-default) infinite;
}
.marco--agora .marco__nome { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }

@keyframes pulso {
  0%, 100% { box-shadow: 0 0 0 6px var(--cor-fraca); }
  50%      { box-shadow: 0 0 0 12px var(--cor-fraca); }
}
@media (prefers-reduced-motion: reduce) {
  .marco--agora .marco__bolha { animation: none; }
}

/* Livre: o papo, que acontece quando a agenda deixa. Aberto como o de
   agora, mas sem o anel pulsando — quem pulsa é um só, senão a trilha
   inteira pisca e nada chama atenção. */
.marco--livre .marco__bolha {
  background: var(--color-surface);
  border-color: color-mix(in srgb, var(--cor) 70%, transparent);
  color: var(--cor);
}
.marco--livre .marco__nome { color: var(--color-text-secondary); }

/* Ainda trancado: visível, mas sem convidar ao clique. */
/* Selo de tipo, mordendo a borda da bolha: documento ou papo. */
.marco__tipo {
  position: absolute; right: -4px; bottom: -4px;
  width: 24px; height: 24px;
  border-radius: var(--radius-full);
  display: grid; place-items: center;
  background: var(--cor);
  color: var(--primitive-cream-200);
  border: 2px solid var(--color-surface);
}
.marco__tipo .ic { width: 12px; height: 12px; }

/* Bandeirinha do capítulo, presa ao primeiro marco de cada um. Com o
   caminho virando um só, é ela que diz onde Gente acaba e Negócio começa. */
.marco__capitulo {
  position: absolute; left: 50%; top: -34px;
  transform: translateX(-50%);
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  background: var(--cor);
  color: var(--primitive-cream-200);
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  white-space: nowrap;
}

/* Bandeira do fim do caminho. */
.chegada {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}
/* Cinza-claro sobre cinza-claro: o troféu apagado sumia no fundo e
   lia-se como imagem borrada, não como "ainda não". Agora ele é um
   contorno com traço firme — apagado por não estar preenchido, não
   por estar sem contraste. */
.chegada__bolha {
  width: 72px; height: 72px; border-radius: var(--radius-full);
  display: grid; place-items: center;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  color: var(--color-text-secondary);
}
.chegada--feita .chegada__bolha {
  background: var(--color-brand); border-color: var(--color-brand);
  color: var(--color-text-on-brand);
}
.chegada__bolha .ic { width: 34px; height: 34px; }
.chegada h3 {
  font-family: var(--font-display); font-size: var(--font-size-ui-xl);
  font-weight: var(--font-weight-semibold); margin: 0;
}
.chegada p { margin: 0; max-width: 420px; font-size: var(--font-size-ui-sm); color: var(--color-text-secondary); }

/* ---- barra de progresso, no topo da trilha ---- */
.progresso { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.progresso__texto { font-size: var(--font-size-ui-sm); color: var(--color-text-secondary); }
.progresso__texto b { color: var(--color-text-primary); font-size: var(--font-size-ui-lg); }
.barra-prog {
  flex: 1 1 200px; height: 10px; min-width: 160px;
  background: var(--color-bg-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.barra-prog__feito {
  height: 100%;
  background: var(--color-brand);
  border-radius: var(--radius-full);
  transition: width var(--duration-normal) var(--ease-default);
}

/* ------------------------------------------------------------
   PAINEL DO MARCO — abre por cima quando a bolinha é clicada
   ------------------------------------------------------------ */
.marco-doc { line-height: var(--line-height-relaxed); }
.marco-doc__texto {
  white-space: pre-wrap;
  font-size: var(--font-size-ui-sm);
  line-height: var(--line-height-relaxed);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  max-height: 340px; overflow-y: auto;
  margin: 0;
}
.marco-doc__link {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-ui-sm);
}
.marco-doc__link .ic { color: var(--color-brand); }

/* ------------------------------------------------------------
   LÍDER — cartão de cada pessoa
   ------------------------------------------------------------ */

/* O que veio do recrutamento aparece com moldura própria: é leitura
   de outra plataforma, não algo que se edite aqui. */
.do-recrutamento {
  border-left: 3px solid var(--color-info);
  background: var(--color-info-bg);
}
.do-recrutamento .eyebrow { color: var(--color-info); }

.bloco + .bloco {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--border-width-thin) solid var(--color-border-subtle);
}
.bloco .eyebrow { margin: 0 0 var(--space-2); }
.bloco__texto { margin: 0; white-space: pre-wrap; font-size: var(--font-size-ui-sm); line-height: var(--line-height-relaxed); }

/* ------------------------------------------------------------
   BIBLIOTECA
   ------------------------------------------------------------ */
.item-lista {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) auto auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
}
.item-lista:last-child { border-bottom: none; }
.item-lista:hover { background: var(--color-bg-subtle); }
/* A pega de arrastar, com a posição ao lado. Os pontinhos ficam
   apagados até o mouse chegar: numa lista de catorze marcos, catorze
   pegas acesas competem com os títulos, que são o assunto. */
.item-lista__pega {
  display: inline-flex; align-items: center; gap: var(--space-1);
  color: var(--color-text-tertiary); font-size: var(--font-size-ui-sm);
  font-variant-numeric: tabular-nums;
  padding: var(--space-1); border-radius: var(--radius-sm);
  cursor: grab; user-select: none;
}
.item-lista__pega .ic { width: 16px; height: 16px; opacity: 0; transition: opacity .12s; }
.item-lista:hover .item-lista__pega .ic,
.item-lista__pega:focus-visible .ic { opacity: 1; }
.item-lista__pega:active { cursor: grabbing; }

.item-lista--arrastando { opacity: .4; }
/* A linha de destino desenha onde o marco vai cair. Two pixels da cor
   da marca: fina o bastante para não empurrar a lista, forte o
   bastante para não passar por borda comum. */
.item-lista--antes  { box-shadow: inset 0 2px 0 var(--color-brand); }
.item-lista--depois { box-shadow: inset 0 -2px 0 var(--color-brand); }

.item-lista__nome { min-width: 0; }
.item-lista__nome b { display: block; font-weight: var(--font-weight-semibold); font-size: var(--font-size-ui-sm); }
.item-lista__nome span { display: block; font-size: var(--font-size-ui-2xs); color: var(--color-text-secondary); }
.item-lista__acoes { display: flex; gap: var(--space-1); }

.mover {
  background: none; border: none; padding: var(--space-1);
  color: var(--color-text-tertiary); line-height: 0; border-radius: var(--radius-sm);
}
.mover:hover { color: var(--color-text-primary); background: var(--color-bg-muted); }
.mover[disabled] { opacity: .25; cursor: default; }

/* ------------------------------------------------------------
   FORMULÁRIOS
   ------------------------------------------------------------ */
.input, .select, textarea.input {
  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);
  width: 100%;
}
textarea.input { resize: vertical; line-height: var(--line-height-relaxed); }

.campo { margin-top: var(--space-4); }
.campo > label {
  display: block; 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-bottom: var(--space-2);
}
.campo .hint { margin: var(--space-2) 0 0; font-size: var(--font-size-ui-2xs); color: var(--color-text-secondary); }

.escolhas { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.escolha {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--font-size-ui-sm);
  cursor: pointer;
  transition: var(--transition-colors);
}
.escolha input { position: absolute; opacity: 0; pointer-events: none; }
.escolha:hover { background: var(--color-bg-muted); }
.escolha:has(input:checked) {
  background: var(--color-action);
  border-color: var(--color-action);
  color: var(--primitive-cream-200);
  font-weight: var(--font-weight-medium);
}

.dropzone {
  display: block; cursor: pointer; text-align: center;
  padding: var(--space-6);
  border: var(--border-width-thin) dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle);
  font-size: var(--font-size-ui-sm);
  color: var(--color-text-secondary);
  transition: border-color var(--duration-fast), background var(--duration-fast);
}
.dropzone:hover { border-color: var(--color-brand); background: var(--color-bg-muted); }

/* ------------------------------------------------------------
   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: top; }
.table tbody tr:last-child td { border-bottom: none; }

/* ------------------------------------------------------------
   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: 560px;
  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);
}
.modal--largo { max-width: 720px; }
.modal h2 {
  font-family: var(--font-display); font-size: var(--font-size-ui-2xl);
  font-weight: var(--font-weight-semibold); margin: 0 0 var(--space-2);
}
.modal > p { margin: 0 0 var(--space-4); font-size: var(--font-size-ui-sm); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); }
.modal__x {
  position: absolute; top: var(--space-4); right: var(--space-4);
  background: none; border: none; padding: var(--space-2); line-height: 0;
  color: var(--color-text-tertiary); border-radius: var(--radius-sm);
}
.modal__x:hover { background: var(--color-bg-muted); color: var(--color-text-primary); }
.modal__acoes {
  position: sticky; bottom: calc(var(--space-8) * -1);
  background: var(--color-bg-subtle);
  display: flex; justify-content: flex-end; gap: var(--space-2);
  padding: var(--space-4) 0 0;
  margin-top: var(--space-6);
}

/* ------------------------------------------------------------
   AVISOS E UTILITÁRIOS
   ------------------------------------------------------------ */
.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--info .ic { color: 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--warn .ic { color: var(--color-warning); }
.callout .ic { width: 18px; height: 18px; margin-top: 2px; }

.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); }

.stack > * + * { margin-top: var(--space-6); }
.linha { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.mt-2 { margin-top: var(--space-2); }
.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); }
.hint { font-size: var(--font-size-ui-sm); color: var(--color-text-secondary); }
.tiles { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.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); }

/* ------------------------------------------------------------
   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);
  max-width: min(560px, calc(100vw - var(--space-8)));
}
.toast .ic { color: var(--color-brand-on-dark); }
/* ------------------------------------------------------------
   VISÃO DO LÍDER / ADMIN
   ------------------------------------------------------------
   Duas colunas: a lista de quem está chegando à esquerda, e a
   pessoa escolhida à direita. A lista fica sempre visível para
   trocar de pessoa sem perder o lugar.
   ------------------------------------------------------------ */
.lider { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.lider__lista { position: sticky; top: 108px; padding: var(--space-2); }

.pessoa-item {
  display: block; width: 100%; text-align: left;
  padding: var(--space-3) var(--space-4);
  border: none; background: none;
  border-radius: var(--radius-md);
  transition: var(--transition-colors);
}
.pessoa-item:hover { background: var(--color-bg-subtle); text-decoration: none; }
.pessoa-item[aria-current="true"] { background: var(--color-bg-muted); }
/* O trilho da barra tem a mesma cor do item selecionado. Sem trocar por
   branco aqui, a barra de quem está escolhido sumia no fundo. */
.pessoa-item[aria-current="true"] .barra-prog { background: var(--color-surface); }
.pessoa-item__nome {
  font-size: var(--font-size-ui-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}
.pessoa-item__area { margin: 0 0 var(--space-3); font-size: var(--font-size-ui-sm); color: var(--color-text-tertiary); }
.pessoa-item__linha { display: flex; align-items: center; gap: var(--space-3); }
.pessoa-item__pct { font-size: var(--font-size-ui-sm); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; flex: none; }

/* A barra da lista usa verde-dólar, não a cor de capítulo: aqui ela
   resume a trilha inteira, que passa pelas três cores. */
.barra-prog--cheia .barra-prog__feito { background: var(--primitive-dark-800); }

.secao__cabeca { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.secao__cabeca h3 { margin: 0; }
.secao__cabeca .hint { margin: 0; }

/* O 30/60/90 em três colunas: os prazos são irmãos, não uma lista. */
.prazos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-5); }
.prazo { padding-left: var(--space-4); border-left: 3px solid var(--color-brand); }
.prazo__quando {
  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-brand); margin: 0 0 var(--space-2);
}
.prazo__o { margin: 0; font-size: var(--font-size-ui-sm); line-height: var(--line-height-relaxed); white-space: pre-wrap; }

/* Onde a pessoa está agora, no alto da seção de progresso. */
.agora-card {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}
.agora-card__bola {
  width: 40px; height: 40px; border-radius: var(--radius-full);
  display: grid; place-items: center; flex: none;
  background: var(--cor, var(--color-brand)); color: var(--primitive-cream-200);
}
.agora-card__texto { min-width: 0; }
.agora-card__texto b { display: block; font-size: var(--font-size-ui-md); }
.agora-card__texto span { font-size: var(--font-size-ui-2xs); color: var(--color-text-secondary); }

/* Cada marco na lista de progresso, com a cor do capítulo na lateral. */
.marco-linha {
  display: grid; grid-template-columns: 22px minmax(0,1fr) auto;
  gap: var(--space-3); align-items: center;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--cor);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.marco-linha + .marco-linha { margin-top: var(--space-1); }
.marco-linha--feito { background: var(--color-bg-subtle); }
.marco-linha__ic { color: var(--cor); line-height: 0; }
.marco-linha__nome { min-width: 0; font-size: var(--font-size-ui-sm); }
.marco-linha__nome span { display: block; font-size: var(--font-size-ui-2xs); color: var(--color-text-secondary); }
.marco-linha__quando { font-size: var(--font-size-ui-2xs); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }

/* Quem sou eu agora — enquanto não há login, vive na barra de cima. */
.quemsou { display: flex; align-items: center; gap: var(--space-2); }
.quemsou__rotulo { font-size: var(--font-size-ui-2xs); color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); }
.quemsou .select { padding: var(--space-1) var(--space-2); font-size: var(--font-size-ui-2xs); width: auto; }


/* ------------------------------------------------------------
   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__grupo, .navlink--foot { display: none; }
  .view, .topbar, .abas { padding-left: var(--space-5); padding-right: var(--space-5); }
  .abas { position: static; }
  .lider { grid-template-columns: 1fr; }
  .lider__lista { position: static; }
}

/* ------------------------------------------------------------
   ENTRAR
   ------------------------------------------------------------
   A tela de login não usa o shell: quem não entrou não tem barra
   lateral nem abas para ver. Fundo verde-dólar, que é a superfície
   da marca, e um cartão creme no meio.
   ------------------------------------------------------------ */
.entrar {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6);
  background: var(--primitive-dark-800);
}
.entrar__cartao {
  width: 100%; max-width: 420px;
  background: var(--color-bg-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-overlay);
  text-align: center;
}
.entrar__logo { width: 150px; height: auto; margin: 0 auto var(--space-6); display: block; }
.entrar__cartao h1 {
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-1);
}
.entrar__sub { margin: 0 0 var(--space-6); color: var(--color-text-secondary); font-size: var(--font-size-ui-sm); }
.entrar__botao { width: 100%; justify-content: center; }
.entrar__dica { margin-top: var(--space-3); }

.entrar__alternativa { margin-top: var(--space-6); text-align: left; }
.entrar__alternativa summary {
  cursor: pointer; font-size: var(--font-size-ui-sm);
  color: var(--color-text-secondary); padding: var(--space-2) 0;
}
.entrar__alternativa summary:hover { color: var(--color-text-primary); }
.entrar__form { display: flex; gap: var(--space-2); margin: var(--space-2) 0; }
.entrar__form .input { flex: 1; }

.entrar__rodape {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-4);
  border-top: var(--border-width-thin) solid var(--color-border-subtle);
  font-size: var(--font-size-ui-xs);
  color: var(--color-text-tertiary);
}
.entrar .callout { text-align: left; margin-bottom: var(--space-4); }

/* quem entrou, na barra de cima */
.quementrou { display: flex; align-items: center; gap: var(--space-1); }
.quementrou__nome {
  font-size: var(--font-size-ui-xs); color: var(--color-text-tertiary);
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.selo--local {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--font-size-ui-xs);
  color: var(--color-warning);
  background: var(--color-warning-bg);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}
.selo--local .ic { width: 13px; height: 13px; }

/* ------------------------------------------------------------
   DOCUMENTOS — os papéis da contratação
   ------------------------------------------------------------ */
.doc + .doc { margin-top: var(--space-4); }
.doc__topo { display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-4); }
.doc__topo .badge { margin-left: auto; flex: none; }
.doc__bloco + .doc__bloco {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--border-width-thin) solid var(--color-border-subtle);
}
.doc__linha { margin: 0 0 var(--space-1); font-size: var(--font-size-ui-sm); }
.doc__arquivos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.doc__arquivos li { font-size: var(--font-size-ui-sm); }
.doc__arquivos .ic { width: 15px; height: 15px; vertical-align: -2px; margin-right: var(--space-1); }
.doc .callout { margin-top: var(--space-3); }
.doc .btn { margin-top: var(--space-3); }

/* Botão que se comporta como link: a ação é buscar o endereço
   assinado, mas para quem lê a tela é "abrir o arquivo". */
.btn-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--color-action); font: inherit;
}
.btn-link:hover { text-decoration: underline; }
.btn-link[disabled] { opacity: .5; cursor: wait; }

/* ---------- lista de quem pode começar um onboarding ----------
   Linha própria em vez da grade da Biblioteca: dentro do modal
   aquela espreme o nome numa coluna de duas letras. */
.pronto {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle);
}
.pronto:last-child { border-bottom: 0; }
.pronto__quem { flex: 1; min-width: 0; }
/* O nome e o selo da contratação na mesma linha; o cargo embaixo. */
.pronto__quem b { display: inline; margin-right: var(--space-2); }
.pronto__quem .badge { vertical-align: 1px; }
.pronto__quem > span:not(.badge) {
  display: block; color: var(--color-text-secondary);
  font-size: var(--font-size-ui-sm); margin-top: 2px;
}
.pronto .btn { flex: 0 0 auto; }
@media (max-width: 520px) {
  .pronto { flex-wrap: wrap; }
  .pronto .btn { width: 100%; }
}

/* ---------- a trilha com o 30/60/90 ao lado ----------
   O combinado é o que explica por que a trilha existe; embaixo de
   catorze marcos ninguém rola até lá. A classe só é aplicada quando
   a tela comporta as duas colunas — quem decide é o JS, que já mede
   a largura para desenhar o caminho. */
.trilha-lado {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-6);
  align-items: start;
}
.plano-card { position: sticky; top: 112px; }

/* Quem concluiu continua na lista, com outra cor e o selo. Sumir seria
   a leitura errada: a pessoa não deixou de ser do time por ter
   terminado a trilha, e o líder ainda abre o 30/60/90 dela nos três
   meses seguintes. */
.pessoa-item--feito .pessoa-item__nome,
.pessoa-item--feito .pessoa-item__area { color: var(--color-text-tertiary); }
.pessoa-item--feito .barra-prog__feito { background: var(--color-success); }
.pessoa-item--feito .badge { margin-left: var(--space-2); vertical-align: 2px; }
.pessoa-item__nome .badge { font-weight: var(--font-weight-regular); }

/* ---------- seção que abre e fecha ----------
   `<details>` de propósito: o navegador já sabe abrir, fechar, achar
   com Ctrl+F e falar no leitor de tela. Um botão com JS faria os
   quatro pior. O triângulo padrão sai e entra uma seta nossa. */
.dobra summary { cursor: pointer; list-style: none; }
.dobra summary::-webkit-details-marker { display: none; }
.dobra__cabeca {
  display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
  position: relative; padding-right: var(--space-8);
}
.dobra__cabeca h3 { margin: 0; }
.dobra__cabeca .hint { margin: 0; }
.dobra__cabeca::after {
  content: ""; position: absolute; right: var(--space-2); top: 6px;
  width: 8px; height: 8px;
  border-right: 2px solid var(--color-text-tertiary);
  border-bottom: 2px solid var(--color-text-tertiary);
  transform: rotate(45deg);
  transition: transform var(--duration-fast) var(--ease-default);
}
.dobra[open] > summary .dobra__cabeca::after { transform: rotate(-135deg); top: 9px; }
.dobra[open] > summary .dobra__cabeca { margin-bottom: var(--space-4); }
.dobra__rotulo {
  font-size: var(--font-size-ui-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}
.dobra summary:hover .dobra__rotulo { color: var(--color-text-primary); }

/* Dobra dentro de um card que já existe: sem borda nem fundo próprios,
   só a linha que separa do que vem acima. */
.dobra--dentro {
  border-top: var(--border-width-thin) solid var(--color-border-subtle);
  padding-top: var(--space-4);
}

/* Os prazos em linha, para a página do líder. Frase em coluna estreita
   vira parede de texto com metade da largura vazia; em linha, o prazo
   fica à esquerda e a frase respira. */
.prazos--linhas { grid-template-columns: 1fr; gap: var(--space-3); }
.prazos--linhas .prazo {
  display: grid; grid-template-columns: 76px minmax(0, 1fr);
  gap: var(--space-4); align-items: baseline;
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
}
.prazos--linhas .prazo + .prazo { border-top: var(--border-width-thin) solid var(--color-border-subtle); }
.prazos--linhas .prazo__quando { margin: 0; }
@media (max-width: 640px) {
  .prazos--linhas .prazo { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* O botão de editar, dentro de uma dobra: fora do <summary>, senão o
   clique nele abriria e fecharia a seção junto. */
.dobra__acao { margin-bottom: var(--space-4); }

/* As áreas do marco, em caixinhas. Texto digitado deixava "Dados",
   "dados" e "Dado" virarem três áreas, e a terceira some da trilha de
   todo mundo sem dar erro nenhum. */
.areas-escolha { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.areas-escolha__item {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width-thin) solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--font-size-ui-sm);
  cursor: pointer;
  transition: var(--transition-colors);
}
.areas-escolha__item:hover { background: var(--color-bg-subtle); }
.areas-escolha__item:has(input:checked) {
  border-color: var(--color-brand);
  background: var(--color-brand-subtle, var(--color-bg-muted));
  font-weight: var(--font-weight-semibold);
}

/* ---------- lista de quem tem acesso (Ajustes) ---------- */
.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; }

/* ---------- o material aparecendo dentro do painel ----------
   Altura em vh porque o painel rola: em 70vh o documento cabe sem
   empurrar o botão de concluir para fora da tela. */
.visor {
  display: block; width: 100%; height: 70vh; min-height: 320px;
  border: var(--border-width-thin) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  margin-bottom: var(--space-4);
}
.visor--imagem { height: auto; max-height: 70vh; object-fit: contain; }
@media (max-width: 700px) { .visor { height: 50vh; min-height: 240px; } }

/* ---------- erro dentro do modal, e o link do plano B ---------- */
.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);
}
.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); }


/* ---------- a caixa do visor, com tela cheia ---------- */
.visor-caixa { position: relative; margin-bottom: var(--space-4); }
.visor-caixa .visor { margin-bottom: 0; }
.visor-caixa__cheia {
  position: absolute; top: var(--space-2); right: var(--space-2);
  background: var(--color-surface);
  border: var(--border-width-thin) solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
/* Em tela cheia o botão some: no alto ele cobria a barra do leitor de
   PDF, no rodapé cobria o documento, e botão flutuante sobre conteúdo
   que se lê inteiro não tem canto bom. Quem sai é o Esc. */
.visor-caixa:fullscreen .visor-caixa__cheia { display: none; }
/* Em tela cheia a caixa vira a tela: o quadro precisa acompanhar,
   senão fica um retângulo de 70vh no meio do preto. */
.visor-caixa:fullscreen { background: var(--color-surface); }
.visor-caixa:fullscreen .visor { height: 100vh; max-height: 100vh; border: none; border-radius: 0; }