/* NAIA Studio — um arquivo, sem framework, sem build.
   Escala de cinza + uma cor por squad (a `tinta` vem do naia_modelo). */
:root {
  --bg: #0d0e12;
  --painel: #16181f;
  --painel2: #1d202a;
  --linha: #272b37;
  --texto: #e7e9ee;
  --fraco: #9aa0b0;
  --fraquissimo: #848c9f;
  --ok: #3fb950;
  --espera: #d29922;
  --erro: #f85149;
  --acento: #6aa8ff;
  /* texto sobre o acento: no tema escuro o acento é claro, então a tinta é escura */
  --acento-tinta: #0d0e12;
  --raio: 14px;
  /* a luz interna dos cartões (receita do kit Bento, em NAIA_UI/): no escuro é
     um brilho branco fraco vindo de cima; no claro, quase nada. */
  --brilho: rgba(248, 248, 248, .05);
  --borda-acesa: rgba(255, 255, 255, .07);
}
/* ── A VERSÃO CLARA — o creme quente do FundPulse (kit em NAIA_UI/) ─────────
   Não é o cinza-azulado genérico de antes: fundo cream, painéis quase brancos,
   fio na cor de papel. O acento continua o azul da NAIA — o coral é a marca
   do kit, não a nossa. A paleta vale por dois caminhos: o sistema em modo
   claro, ou o botão ☀ do cabeçalho (que vence o sistema nos dois sentidos). */
@media (prefers-color-scheme: light) {
  :root:not([data-tema="escuro"]) {
    --bg: #f5f3ee; --painel: #fdfcf9; --painel2: #efece4; --linha: #e3dfd4;
    --texto: #1c1b17; --fraco: #6e695c; --fraquissimo: #8b8577;
    --ok: #1a7f37; --espera: #986a00; --erro: #c93c2e; --acento: #0b62d6;
    --acento-tinta: #fff;
    --brilho: rgba(255, 255, 255, .55);
    --borda-acesa: rgba(28, 27, 23, .06);
  }
}
:root[data-tema="claro"] {
  --bg: #f5f3ee; --painel: #fdfcf9; --painel2: #efece4; --linha: #e3dfd4;
  --texto: #1c1b17; --fraco: #6e695c; --fraquissimo: #8b8577;
  --ok: #1a7f37; --espera: #986a00; --erro: #c93c2e; --acento: #0b62d6;
  --acento-tinta: #fff;
  --brilho: rgba(255, 255, 255, .55);
  --borda-acesa: rgba(28, 27, 23, .06);
}
* { box-sizing: border-box; }
/* foco de teclado visível em tudo que se clica — inputs mantêm a regra própria */
a:focus-visible, button:focus-visible, summary:focus-visible, [draggable]:focus-visible {
  outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 4px;
}
body {
  margin: 0; background: var(--bg); color: var(--texto);
  font: 15px/1.55 ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* ── o casco: navegação LATERAL em grupos + coluna de conteúdo ──────────────
   Estrutura do FundPulse (kit em NAIA_UI/), promovida do piloto da Aguardando
   você para o sistema inteiro em 14/ago, com o "aplique em todo o sistema". */
/* Escopado no casco de propósito: `revisar.html` e `mundo.html` importam este
   mesmo arquivo e NÃO têm lateral — um grid no body de todos espremia a sala
   de revisão inteira na coluna de 232px (o "toda preta" de 14/ago). */
body:has(> .casco) { display: grid; grid-template-columns: 232px minmax(0, 1fr); }
.casco { min-width: 0; }

.lateral { position: sticky; top: 0; height: 100vh; overflow-y: auto;
           padding: 22px 14px; border-right: 1px solid var(--linha);
           display: flex; flex-direction: column; gap: 2px; }
.lateral .marca { display: block; padding: 0 12px 16px; }
.marca { font-weight: 700; letter-spacing: -.02em; font-size: 17px;
         font-family: ui-monospace, monospace; }
.marca span { color: var(--fraquissimo); font-weight: 400; }
.lateral .grupo { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
                  letter-spacing: .09em; color: var(--fraquissimo);
                  margin: 16px 0 5px; padding: 0 12px; }
.lateral a:not(.marca) { position: relative; display: flex; align-items: center;
                         justify-content: space-between; gap: 8px; padding: 8px 12px;
                         border-radius: 9px; color: var(--fraco); font-size: 14px; }
/* UM contador na lateral, e só um: oito números são decoração, um é um número
   que se lê. Zero não desenha nada — badge com "0" é ruído (18/ago). */
.conta-lat:empty { display: none; }
.conta-lat { min-width: 20px; padding: 0 6px; height: 19px; border-radius: 999px;
             display: inline-flex; align-items: center; justify-content: center;
             font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
             background: var(--acento); color: var(--bg); }
.lateral a:not(.marca):hover { background: var(--painel2); color: var(--texto); }
.lateral a.ativo { background: var(--painel2); color: var(--texto); font-weight: 550; }
.lateral a.ativo::before { content: ''; position: absolute; left: -1px; top: 8px;
                           bottom: 8px; width: 3px; border-radius: 2px;
                           background: var(--acento); }
/* a caixa da NAIA no pé da lateral — presente em toda tela, leva o contexto */
.naia-rapida { margin-top: auto; padding: 14px 4px 2px; }
.naia-rapida input { width: 100%; padding: 9px 13px; font-size: 13px;
                     border-radius: 999px; border: 1px solid var(--linha);
                     background: var(--painel); color: var(--texto); }
.naia-rapida input:focus { outline: none; border-color: var(--acento); }
/* na barra lateral o campo é uma linha só: o microfone entra ao lado dele */
.naia-rapida { display: flex; gap: 6px; align-items: center; }
.naia-rapida input { flex: 1; min-width: 0; }

/* O microfone. Redondo e discreto parado; vermelho e pulsando gravando — o
   estado precisa ser óbvio de longe, porque esquecer o microfone aberto é o
   erro que ninguém percebe olhando a tela. */
.mic {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid var(--linha); background: var(--painel); color: var(--texto);
  font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
}
.mic:hover { border-color: var(--acento); }
.mic.gravando { border-color: #e0574f; background: #e0574f; color: #fff;
                animation: pulsa-mic 1.1s ease-in-out infinite; }
@keyframes pulsa-mic { 50% { opacity: .55; } }

header {
  position: sticky; top: 0; z-index: 10; background: var(--bg);
  border-bottom: 1px solid var(--linha); padding: 12px 20px;
  display: flex; align-items: center; gap: 14px;
}
.tema { margin-left: auto; width: 34px; height: 34px; border-radius: 50%;
        border: 1px solid var(--linha); background: var(--painel);
        color: var(--fraco); cursor: pointer; font-size: 15px; line-height: 1;
        flex: none; }
.tema:hover { border-color: var(--acento); color: var(--texto); }
.trilha { color: var(--fraco); font-size: 13px; display: flex; gap: 6px;
          flex-wrap: wrap; min-height: 20px; }
.trilha a:hover { color: var(--texto); }
.trilha i { color: var(--fraquissimo); font-style: normal; }
main { padding: 24px 28px 64px; max-width: 1180px; margin: 0 auto; }
h1 { font-size: 26px; letter-spacing: -.02em; margin: 0 0 4px; text-wrap: balance; }
/* título de seção editorial (FundPulse): frase em caixa normal, peso forte —
   o uppercase espremido ficou só para micro-rótulo (.rotulo, .grupo, .acao) */
h2 { font-size: 16px; font-weight: 650; letter-spacing: -.01em;
     color: var(--texto); margin: 36px 0 10px; }
/* onde o h2 era rótulo de gaveta ou de squad, ele continua rótulo pequeno */
.gavetas h2, .garagem h2 { font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--fraco); }
.sub { color: var(--fraco); margin: 0 0 22px; }

@media (max-width: 900px) {
  body:has(> .casco) { display: block; }
  .lateral { position: static; height: auto; flex-direction: row;
             flex-wrap: wrap; align-items: center; gap: 3px;
             border-right: 0; border-bottom: 1px solid var(--linha);
             padding: 10px 14px; }
  .lateral .marca { width: 100%; padding: 2px 12px 8px; }
  .lateral #destinos { display: flex; flex-wrap: wrap; gap: 3px; }
  .lateral .grupo { display: none; }
  .lateral a.ativo::before { display: none; }
}

/* ── cards ── */
.grade { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); }
.card {
  background: var(--painel); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 16px; display: block;
  transition: border-color .15s, transform .15s;
}
a.card:hover { border-color: var(--acento); transform: translateY(-2px); }
.card .topo { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.ponto { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.card h3 { margin: 0; font-size: 15.5px; letter-spacing: -.01em; }
.card .slug { color: var(--fraquissimo); font-size: 12px; font-family: ui-monospace, monospace; }
.numeros { display: flex; gap: 22px; margin-top: 16px; }
.numeros div { display: flex; flex-direction: column; }
.numeros b { font-size: 22px; font-weight: 650; letter-spacing: -.02em;
             font-variant-numeric: tabular-nums; }
.numeros small { color: var(--fraco); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }

/* ── etiquetas de estado ── */
.tag {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--linha);
  color: var(--fraco); background: var(--painel2); white-space: nowrap;
}
.tag.executavel { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.tag.concluido  { color: var(--ok); }
.tag.aguarda    { color: var(--espera); border-color: color-mix(in srgb, var(--espera) 40%, transparent); }
.tag.ruim       { color: var(--erro); border-color: color-mix(in srgb, var(--erro) 45%, transparent); }
.tag.forte      { font-weight: 600; }
/* selo que quase todo card tem é fundo, não alerta — vem depois do `.forte`
   de propósito, para desfazer o negrito de quem se marca `forte` em série. */
.tag.discreto   { color: var(--fraquissimo); font-weight: 400;
                  background: none; border-style: dashed; }

/* ── listas de funcionário ── */
.pessoa {
  display: block; background: var(--painel); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 16px 18px; margin-bottom: 12px;
  transition: border-color .15s;
}
a.pessoa:hover { border-color: var(--acento); }
.pessoa .id { font-family: ui-monospace, monospace; font-size: 14px; font-weight: 600; }
.pessoa .funcao { color: var(--fraco); font-size: 13.5px; margin-top: 3px; }
.linha-topo { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.chip {
  font-size: 11.5px; padding: 3px 9px; border-radius: 8px;
  background: var(--painel2); border: 1px solid var(--linha); color: var(--fraco);
}
.chip.hab { border-style: dashed; color: var(--texto); }
/* O destravamento é consequência, não estado — por isso não usa nenhuma das
   cores de status. Ele é o número que decide a ordem da fila, então carrega
   contraste próprio e numeral tabular para as linhas alinharem. */
.chip.solta { color: var(--texto); border-color: color-mix(in srgb, var(--texto) 30%, transparent);
              font-variant-numeric: tabular-nums; font-weight: 600; }
.rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
          color: var(--fraquissimo); margin: 14px 0 6px; }

/* ── fluxo da rotina ── */
.fluxo { display: flex; flex-direction: column; gap: 0; }
.etapa {
  background: var(--painel); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 16px 18px;
}
/* estado = borda inteira tingida + fundo com a mesma tinta, não listra lateral */
.etapa.e-executavel { border-color: color-mix(in srgb, var(--ok) 35%, var(--linha));
                      background: color-mix(in srgb, var(--ok) 4%, var(--painel)); }
.etapa.e-aguarda    { border-color: color-mix(in srgb, var(--espera) 35%, var(--linha));
                      background: color-mix(in srgb, var(--espera) 4%, var(--painel)); }
.etapa.e-ruim       { border-color: color-mix(in srgb, var(--erro) 35%, var(--linha));
                      background: color-mix(in srgb, var(--erro) 4%, var(--painel)); }
.etapa.e-concluido  { border-color: color-mix(in srgb, var(--ok) 25%, var(--linha)); opacity: .72; }
.etapa .nome { font-weight: 650; font-size: 16px; letter-spacing: -.01em; }
.etapa .entrega { color: var(--fraco); font-size: 13.5px; margin-top: 2px; }
.seta { height: 26px; margin-left: 26px; border-left: 2px dashed var(--linha); }
.campos { display: grid; gap: 10px 26px; margin-top: 14px;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.campo small { display: block; font-size: 10.5px; text-transform: uppercase;
               letter-spacing: .07em; color: var(--fraquissimo); margin-bottom: 2px; }
.campo span { font-size: 13.5px; }
.mono { font-family: ui-monospace, monospace; font-size: 13px; }
.motivo { margin-top: 12px; font-size: 13px; color: var(--espera); }
.etapa.e-ruim .motivo { color: var(--erro); }

/* ── cadeia da operação: a equipe inteira numa olhada ── */
.cadeia { display: flex; flex-direction: column; gap: 2px; }
.elo {
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--painel); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 12px 16px;
}
.elo.foco { border-color: color-mix(in srgb, var(--ok) 45%, var(--linha)); }
.elo .sinal { font-size: 15px; line-height: 1.5; width: 18px; text-align: center;
              color: var(--fraquissimo); flex: none; }
.elo .sinal.concluido, .elo .sinal.executavel { color: var(--ok); }
.elo .sinal.aguarda { color: var(--espera); }
.elo .sinal.ruim { color: var(--erro); }
.elo .corpo { flex: 1; min-width: 0; }
.elo .nome { font-weight: 600; font-size: 14.5px; }
.elo .entrega { color: var(--fraco); font-size: 12.5px; margin-top: 2px; }
.elo .motivo { margin-top: 6px; font-size: 12.5px; }

/* ── botões ── */
.botoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.btn {
  border: 1px solid var(--linha); background: var(--painel2); color: var(--texto);
  padding: 10px 18px; border-radius: 10px; cursor: pointer; font-size: 14px;
  transition: border-color .15s, background .15s;
}
.btn:hover { border-color: var(--acento); }
.btn.principal { background: var(--acento); border-color: var(--acento); color: var(--acento-tinta); font-weight: 600; }
.btn.principal:hover { filter: brightness(1.1); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.fantasma { background: transparent; }

/* ── wizard ── */
.passos-wizard { display: flex; gap: 6px; margin-bottom: 26px; flex-wrap: wrap; }
.bolinha { height: 4px; flex: 1 1 30px; border-radius: 2px; background: var(--linha); }
.bolinha.feito { background: var(--acento); }
.pergunta { font-size: 24px; letter-spacing: -.02em; margin: 0 0 6px; }
.ajuda { color: var(--fraco); margin: 0 0 20px; font-size: 14px; }
input[type=text], textarea, select {
  width: 100%; background: var(--painel); border: 1px solid var(--linha);
  color: var(--texto); border-radius: 10px; padding: 12px 14px; font: inherit;
}
textarea { min-height: 130px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--acento); outline-offset: -1px; }
.aviso {
  border: 1px solid color-mix(in srgb, var(--espera) 45%, transparent);
  background: color-mix(in srgb, var(--espera) 10%, transparent);
  border-radius: 10px; padding: 14px 16px; font-size: 13.5px; margin: 18px 0;
}
.aviso.ruim { border-color: color-mix(in srgb, var(--erro) 45%, transparent);
              background: color-mix(in srgb, var(--erro) 10%, transparent); }
.aviso.bom  { border-color: color-mix(in srgb, var(--ok) 45%, transparent);
              background: color-mix(in srgb, var(--ok) 10%, transparent); }
.aviso b { display: block; margin-bottom: 4px; }
.vazio { color: var(--fraco); padding: 40px 0; text-align: center; }
pre { background: var(--painel2); border: 1px solid var(--linha); border-radius: 10px;
      padding: 12px 14px; overflow-x: auto; font-size: 12.5px; }

/* ── onboarding do cliente e workspace ── */
.linha-fina { color: var(--fraco); font-size: 13px; margin: 8px 0 0; }
.linha-form { display: flex; gap: 10px; align-items: center; }
.linha-form input { flex: 1; }
textarea.alto { min-height: 190px; }
.chip.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
a.chip:hover { border-color: var(--acento); color: var(--texto); }
.pessoa .rotulo:first-child { margin-top: 0; }

/* zona de arrastar arquivo — desenhada para parecer alvo, não campo */
.solta {
  margin-top: 14px; padding: 22px 16px; text-align: center;
  border: 1.5px dashed var(--linha); border-radius: var(--raio);
  color: var(--fraco); font-size: 13.5px; transition: border-color .15s, background .15s;
}
.solta.sobre { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 10%, transparent); }
button.link {
  background: none; border: 0; color: var(--acento); cursor: pointer;
  padding: 0; font: inherit; text-decoration: underline;
}

/* ── flow builder ── */
.acoes { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mini {
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--linha); background: var(--painel2); color: var(--fraco);
  line-height: 1; padding: 0;
}
.mini:hover { border-color: var(--acento); color: var(--texto); }
.mini.ruim:hover { border-color: var(--erro); color: var(--erro); }
input.nota { flex: 1 1 220px; width: auto; }

/* ── MESA DE MONTAGEM: a operação montada arrastando ──────────────────────
   Estrutura vinda do editor de fluxo do n8n (refero fbb39ef8): esteira
   horizontal de nós ligados por seta, e a DERIVAÇÃO pendurada abaixo do nó,
   que é como o modelo e as ferramentas aparecem lá — e é o desenho certo para
   "a skill é do funcionário naquela etapa", não da etapa.

   Profundidade por borda e tom, nunca por sombra (Linear Changelog, refero
   11d3e58a). Nenhuma animação decorativa: `sobre` diz que o alvo aceita,
   `recusa` diz que não, e `encaixou` prova que o que você soltou entrou. */
.mesa { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) 300px;
        align-items: start; margin-top: 18px; }
.palco {
  overflow: auto hidden; border: 1px solid var(--linha); border-radius: var(--raio);
  /* a grade diz "isto é uma mesa que rola" e nada mais — se ela competir com o
     nó, virou textura decorativa, que é o que esta casa não faz */
  --tinta-grade: color-mix(in srgb, var(--linha) 40%, transparent);
  background:
    repeating-linear-gradient(to right, var(--tinta-grade) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(to bottom, var(--tinta-grade) 0 1px, transparent 1px 26px),
    var(--bg);
}
.trilho { display: flex; align-items: stretch; padding: 16px; min-width: min-content; }
.no {
  flex: 0 0 296px; display: flex; flex-direction: column; gap: 3px;
  background: var(--painel); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 14px; transition: border-color .15s;
}
.no[draggable="true"] { cursor: grab; }
.no.arrastando { opacity: .4; }
.no.alvo { border-color: var(--acento);
           box-shadow: 0 0 0 2px color-mix(in srgb, var(--acento) 35%, transparent); }
.no.e-executavel { border-color: color-mix(in srgb, var(--ok) 35%, var(--linha)); }
.no.e-aguarda    { border-color: color-mix(in srgb, var(--espera) 35%, var(--linha)); }
.no.e-ruim       { border-color: color-mix(in srgb, var(--erro) 35%, var(--linha)); }
.no.mexida       { border-color: color-mix(in srgb, var(--acento) 50%, var(--linha)); }
.no-topo { display: flex; gap: 10px; align-items: start; margin-bottom: 6px; }
.no-quem { flex: 1; min-width: 0; }
.no .nome { font-weight: 650; font-size: 15px; letter-spacing: -.01em; }
/* a entrega é prosa de tamanho imprevisível, e uma linha a mais num nó
   desalinha a fila inteira. Três linhas e o resto no `title` — o texto completo
   continua a um passe de mouse, e a esteira continua legível como esteira. */
.no .entrega {
  color: var(--fraco); font-size: 12.5px; margin-top: 2px; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
}
.no .campos { grid-template-columns: 1fr; gap: 6px; margin-top: 10px; }
.no .rotulo { margin-top: 10px; }
.ordinal {
  flex: none; width: 22px; height: 22px; border-radius: 50%; font-size: 12px;
  display: grid; place-items: center; font-variant-numeric: tabular-nums;
  background: var(--painel2); border: 1px solid var(--linha); color: var(--fraco);
}
.no.mexida .ordinal { background: var(--acento); border-color: var(--acento);
                      color: var(--acento-tinta); font-weight: 600; }
.no-pe { display: flex; gap: 6px; margin-top: auto; padding-top: 12px; }
.no .mais { margin-top: 10px; }
.no .mais summary { cursor: pointer; font-size: 12px; color: var(--fraco); }
.no .mais input[type=text] { padding: 8px 10px; font-size: 13px; }
.no .mais textarea { min-height: 74px; padding: 8px 10px; font-size: 13px; }
/* a seta ancora no ALTO, não no meio: uma etapa aberta fica muito mais alta que
   as vizinhas, e centralizar deixaria o elo boiando longe dos títulos que ele
   liga */
.seta {
  flex: 0 0 36px; align-self: flex-start; height: 0; position: relative;
  margin-top: 44px; border-top: 2px dashed var(--linha);
}
.seta::after { content: '›'; position: absolute; right: -3px; top: -14px;
               color: var(--fraquissimo); font-size: 17px; }

/* o alvo do arrasto: tracejado enquanto espera, sólido quando alguém sentou */
.slot {
  display: flex; gap: 9px; align-items: center; padding: 8px 10px;
  background: var(--painel2); border: 1px dashed var(--linha); border-radius: 10px;
  transition: border-color .15s, background .15s, transform .15s;
}
.slot-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.slot-nome { font-weight: 600; font-size: 12.5px; overflow-wrap: anywhere; }
.slot-sub { color: var(--fraco); font-size: 12px; }
.slot.mexido { border-style: solid;
               border-color: color-mix(in srgb, var(--acento) 45%, var(--linha)); }
.slot.candidato { border-color: color-mix(in srgb, var(--acento) 60%, var(--linha)); }
.slot.grave { border-color: var(--erro); border-style: solid; }
.slot.sobre {
  border-style: solid; border-color: var(--acento); transform: scale(1.02);
  background: color-mix(in srgb, var(--acento) 14%, transparent);
}
.slot.recusa { border-color: var(--erro); cursor: no-drop; }
@keyframes encaixe {
  from { transform: scale(.94); border-color: var(--acento); }
  to   { transform: scale(1); }
}
.slot.encaixou { animation: encaixe .18s ease-out; }
.mini.aqui { width: auto; height: 24px; padding: 0 9px; font-size: 11.5px;
             border-color: var(--acento); color: var(--acento); }
.antes { margin: 5px 0 0; font-size: 11.5px; color: var(--fraquissimo); }
.alerta-skill { margin: 6px 0 0; font-size: 12px; color: var(--erro); }
.alerta-skill b { color: var(--texto); }

/* o que mudou no último encaixe — some no gesto seguinte, então grita baixo */
.recado {
  margin: 6px 0 0; font-size: 12px; color: var(--texto);
  border-left: 2px solid var(--acento); padding-left: 8px;
}
.recado.novo { border-left-color: var(--espera); }

/* o que o funcionário SABE (squads.csv) × o que ESTA etapa usa (jornadas.csv).
   O par é o ensino: várias cápsulas, uma acesa. */
.sabe-usar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
             margin: 8px 0 0; }
.sabe-rotulo { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
               color: var(--fraquissimo); }
.sabe-usar .chip { font-size: 11px; }
.sabe-usar .chip.em-uso {
  color: var(--texto); border-color: color-mix(in srgb, var(--acento) 55%, var(--linha));
  background: color-mix(in srgb, var(--acento) 12%, transparent);
}
.sabe-usar .chip.nova { border-style: dashed; }
.sabe-nada { font-size: 11.5px; color: var(--fraquissimo); }
.alerta-novo { margin: 6px 0 0; font-size: 12px; color: var(--fraco); }
.alerta-novo b { color: var(--texto); }

/* a cápsula que se clica. Escolher a capacidade da etapa é UM clique entre as
   que o funcionário já sabe — então a cápsula precisa parecer clicável sem
   virar outro componente: mesmo desenho do chip, cursor e foco de botão. */
button.chip { font: inherit; font-size: 11.5px; cursor: pointer; line-height: 1.4; }
button.chip:hover { border-color: var(--acento); color: var(--texto); }
button.chip:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.chip.nova { border-style: dashed; }
.chip.ruim { color: var(--erro);
             border-color: color-mix(in srgb, var(--erro) 45%, transparent); }
/* o × dentro da cápsula: tirar capacidade é raro e destrutivo — discreto até o
   ponteiro chegar, e nunca do tamanho de um alvo que se acerta sem querer */
.chip .tira {
  margin-left: 5px; padding: 0 2px; font: inherit; line-height: 1; cursor: pointer;
  background: none; border: 0; color: var(--fraquissimo);
}
.chip .tira:hover { color: var(--erro); }
.solta.candidato { border-color: var(--acento); border-style: solid; }

/* a derivação: a skill pendura ABAIXO de quem a usa, ligada por um cotovelo —
   é o que diz que a capacidade é daquele par, e não da etapa */
.derivacao { position: relative; padding-left: 16px; }
.derivacao::before {
  content: ''; position: absolute; left: 6px; top: 4px; width: 8px; height: 26px;
  border-left: 2px dotted var(--linha); border-bottom: 2px dotted var(--linha);
  border-bottom-left-radius: 7px;
}

/* as gavetas: o registro real, do lado, sempre carregado */
.gavetas { position: sticky; top: 78px; display: grid; gap: 14px; }
.gavetas section { background: var(--painel); border: 1px solid var(--linha);
                   border-radius: var(--raio); padding: 12px 13px; }
.gavetas h2 { margin: 0 0 9px; }
.gavetas input[type=text] { padding: 8px 11px; font-size: 13px; margin-bottom: 9px; }
.lista-pecas { display: grid; gap: 6px; max-height: 264px; overflow-y: auto; }
.peca {
  display: flex; gap: 9px; align-items: center; width: 100%; text-align: left;
  cursor: grab; padding: 7px 9px; border-radius: 10px; color: var(--texto);
  background: var(--painel2); border: 1px solid var(--linha);
  transition: border-color .15s, background .15s;
}
.peca:hover { border-color: var(--acento); }
.peca.escolhida { border-color: var(--acento);
                  background: color-mix(in srgb, var(--acento) 14%, transparent); }
.peca.arrastando { opacity: .4; }
.peca.grave .peca-nome { color: var(--erro); }
.peca[hidden] { display: none; }
.peca-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.peca-nome { font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.peca-sub { color: var(--fraco); font-size: 11.5px; }
.peca-selos { display: flex; gap: 4px; flex-wrap: wrap; }
.peca-selos .tag { font-size: 10px; padding: 1px 7px; }
/* o avatar é uma JANELA de 48×84 sobre a folha de sprites escalada 3×. Mexer só
   na janela recorta o vazio — quem encolhe é a escala junto, na mesma
   proporção. Aqui vale metade: o cartão da Garagem apresenta a pessoa, a mesa
   só precisa reconhecê-la. */
.peca .avatar, .slot .avatar { width: 24px; height: 42px; border-radius: 7px; }
.peca .avatar img, .slot .avatar img { transform: scale(1.5); }

/* o que está na mão, quando o caminho é teclado ou toque */
.barra-escolha {
  position: sticky; top: 70px; z-index: 5; display: flex; gap: 10px; margin: 14px 0;
  align-items: center; flex-wrap: wrap; padding: 8px 14px; border-radius: 999px;
  background: var(--painel); border: 1px solid var(--acento); font-size: 13px;
}
.barra-escolha .onde { color: var(--fraco); }
.barra-escolha .mini { width: auto; padding: 0 10px; font-size: 12px; }

@media (max-width: 940px) {
  .mesa { grid-template-columns: 1fr; }
  .gavetas { position: static; grid-template-columns: 1fr 1fr; }
  .no { flex-basis: 84vw; max-width: 320px; scroll-snap-align: start; }
  .palco { scroll-snap-type: x proximity; }
}
@media (max-width: 640px) {
  .gavetas { grid-template-columns: 1fr; }
  .no .campos { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  main { padding: 18px 14px 56px; }
  h1 { font-size: 22px; }
  .numeros { gap: 16px; }
  .campos { grid-template-columns: 1fr 1fr; }
  .linha-topo { flex-direction: column; }
  .linha-form { flex-direction: column; align-items: stretch; }
}

/* ── AGÊNCIA HOJE: painel de gerente, não tabela ──────────────────────────
   A hierarquia é a da frente: o que exige o Beto tem borda quente e botão; o
   que anda sozinho é discreto de propósito. */
.placar {
  display: grid; gap: 12px; margin: 0 0 8px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.placar div {
  background: var(--painel); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 14px 16px;
}
.placar b { display: block; font-size: 30px; font-weight: 650; letter-spacing: -.03em;
            font-variant-numeric: tabular-nums; }
.placar small { color: var(--fraco); font-size: 11px; text-transform: uppercase;
                letter-spacing: .06em; }
.placar .quente { border-color: color-mix(in srgb, var(--espera) 55%, transparent); }
.placar .quente b { color: var(--espera); }

.alvo {
  background: var(--painel); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 12px 16px; margin-bottom: 8px;
}
/* ── a fila estilo Mercury: um contêiner, uma linha por item ──────────────
   Fechada, a linha é a frase e a idade; aberta, mostra motivo e ações. A cor
   do tipo mora no ponto à esquerda — âmbar decide, azul é missão. */
.fila { border: 1px solid var(--linha); border-radius: var(--raio);
        background: var(--painel); overflow: hidden; }
.fila .vazio { padding: 28px 16px; }
details.alvo { padding: 0; margin: 0; }
.fila details.alvo { border: 0; border-radius: 0; }
.fila details.alvo + details.alvo { border-top: 1px solid var(--linha); }
details.alvo summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: 12px; padding: 11px 16px; min-width: 0;
  color: inherit; font-size: inherit;   /* o details genérico da missão esmaece */
}
details.alvo[open] summary { margin-bottom: 0; }
details.alvo summary::-webkit-details-marker { display: none; }
details.alvo summary:hover { background: var(--painel2); }
details.alvo[open] summary { background: var(--painel2); }
.ponto-fila { width: 7px; height: 7px; border-radius: 50%; flex: none;
              background: var(--espera); }
details.alvo.de-missao .ponto-fila { background: var(--acento); }
/* Título e contexto empilhados, SEMPRE — e não só no celular.
   Na linha única eles disputavam a mesma largura, e quem perdia era o título:
   `aprovar as 9 pautas do …`, `publicar o card Dia dos P…`. A fila existe para
   dizer o que trava nele; cortar justo aí é cortar a única coisa que importa.
   O contexto continua numa linha com reticência — ali o corte é barato. */
.resumo-fila { flex: 1; min-width: 0; display: flex; flex-direction: column;
               gap: 3px; }
.resumo-fila b { font-weight: 600; font-size: 14px; line-height: 1.35;
                 text-wrap: balance; }
.onde-fila { color: var(--fraquissimo); font-size: 12.5px; white-space: nowrap;
             overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* Referência de máquina não é frase: em mono ela se lê como endereço e para de
   competir com o texto de gente pela mesma atenção. */
.resumo-fila b.ref-tecnica { font-family: ui-monospace, monospace;
                             font-size: 13px; font-weight: 500; }
.corpo-fila { padding: 4px 16px 14px 35px; }
.corpo-fila .acao { margin-bottom: 6px; }
.corpo-fila .motivo { margin-top: 0; }
/* O empilhamento subiu para a regra base — era override só de celular, e o
   desktop sofria do problema que o celular já não tinha. */
@media (max-width: 700px) {
  .corpo-fila { padding-left: 16px; }
}

/* ── a mesma fila em CARTAS: frente é o item, verso é a decisão ───────────
   Flip 3D por CSS puro. As duas faces dividem a mesma célula de grid, então a
   carta tem a altura da face maior — sem altura fixa, sem medir nada em JS. */
.titulo-acoes { display: flex; align-items: center; justify-content: space-between;
                gap: 12px; flex-wrap: wrap; }
/* **Controle com rótulo, não glifo.** Dois ícones de 32px em cinza fraco
   eram invisíveis: o Beto procurou o botão em duas telas e concluiu que ele
   não existia (18/ago). Rótulo, contraste de verdade no estado ativo, e alvo
   de toque de 34px de altura. */
.ver-como { display: flex; gap: 2px; padding: 2px; border-radius: 10px;
            border: 1px solid var(--linha); background: var(--painel); }
.ver-como a {
  height: 30px; padding: 0 12px; display: inline-flex; align-items: center;
  gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap;
  border-radius: 8px; color: var(--fraco); background: transparent;
}
.ver-como a:hover { color: var(--texto); background: var(--painel2); }
.ver-como a.ativo { color: var(--bg); background: var(--acento); }
/* As abas de `A agência` são o MESMO objeto do Lista/Cards — um estilo de aba
   por casa. Só o espaçamento é próprio, porque aqui ela abre a página. */
.abas { margin-bottom: 16px; align-self: flex-start; }

.cartas { display: grid; gap: 14px;
          grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.carta { perspective: 1200px; cursor: pointer; }
.carta-miolo {
  display: grid; transform-style: preserve-3d; height: 100%;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.carta.virada .carta-miolo { transform: rotateY(180deg); }
.carta .face {
  grid-area: 1 / 1; backface-visibility: hidden; min-width: 0;
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--painel); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.carta .verso { transform: rotateY(180deg); background: var(--painel2); }
.carta .frase { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.carta .onde { color: var(--fraco); font-size: 12.5px; }
.carta .motivo { margin-top: 0; }
.carta-pe { display: flex; gap: 6px; align-items: center; margin-top: auto;
            padding-top: 10px; }
.carta-pe .virar { margin-left: auto; color: var(--acento); font-size: 12px;
                   white-space: nowrap; }
.carta .acoes-linha { margin-top: 4px; }
.carta .acoes-linha .nota { flex: 1 1 100%; }
/* borda pela cor DO CLIENTE (15/ago) — decisão sem cliente fica âmbar */
.carta { border-radius: var(--raio); }
.carta .frente { border-top: 3px solid var(--tinta-cli,
  color-mix(in srgb, var(--espera) 55%, var(--linha))); }
.carta.de-missao .frente { border-top-color: var(--tinta-cli,
  color-mix(in srgb, var(--acento) 55%, var(--linha))); }
.carta-cli { font-size: 11px; font-weight: 750; text-transform: uppercase;
             letter-spacing: .07em; color: var(--fraco); }
.carta .frase { font-size: 15px; }
.carta .carta-cta { margin-left: auto; padding: 6px 13px; font-size: 12.5px; }
.carta .carta-pe { align-items: center; }
/* ── Banca de Skills: a mesma carta, com o defeito visível de fora ──────── */
.carta.de-skill .frente { border-top-color: color-mix(in srgb, var(--ok) 45%, var(--linha)); }
.carta.de-skill.ausente .frente { border-top: 2px solid var(--erro); }
.carta.de-skill .face { gap: 4px; }
.carta.de-skill .acao { margin-top: 8px; }
.carta.de-skill .face > .acao:first-child { margin-top: 0; }
/* As duas faces dividem a mesma célula, então a carta cresce até o VERSO — que
   aqui é longo. Altura fixa e verso rolável: 34 cartas com meio metro de vazio
   na frente é o oposto de denso. */
/* `grid-template-rows` é o que faz a altura pegar: a linha implícita é `auto` e
   cresce com o conteúdo, então só `height` deixava a frente vazar por baixo e
   levar os selos junto. */
.carta.de-skill .carta-miolo { height: 250px; grid-template-rows: 100%; }
.carta.de-skill .verso { overflow-y: auto; }
/* O vazio no meio da frente era o descritivo que o motor já devolvia e a tela
   não usava. Ele ocupa a folga até o pé e corta com fade — o texto inteiro está
   no verso, a um clique. */
.carta.de-skill .resumo {
  flex: 1 1 auto; min-height: 0; overflow: hidden; margin-top: 6px;
  display: flex; flex-direction: column; gap: 5px;
  -webkit-mask-image: linear-gradient(#000 72%, transparent);
  mask-image: linear-gradient(#000 72%, transparent);
}
.carta .chips-selo { display: flex; gap: 5px; flex-wrap: wrap; min-width: 0; }
.carta.de-skill .carta-pe .virar { flex: none; }
.contexto .alerta b { color: var(--erro); }
/* prosa do card é texto fraco; o `.motivo` global é âmbar, que ali viraria
   alerta em cima de descrição comum */
.carta.de-skill .motivo { margin: 0; font-size: 12.5px; color: var(--fraco); }
.carta.de-skill .motivo.fora { color: var(--espera); }
.carta.de-skill .motivo.fora b { color: var(--texto); }
.carta.de-skill .detalhes { margin: 2px 0 0; padding-left: 16px;
                            font-size: 12.5px; color: var(--fraco); }
.carta.de-skill .detalhes li { margin: 2px 0; }

.alvo .acao { font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
              color: var(--fraquissimo); text-transform: uppercase; margin-bottom: 3px; }
.alvo .frase { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.alvo .onde { color: var(--fraco); font-size: 12.5px; margin-top: 3px; }
.alvo .motivo { margin-top: 6px; font-size: 12.5px; color: var(--fraco); }
.alvo .direita { display: flex; gap: 6px; align-items: center; flex: none; }
.acoes-linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.acoes-linha:empty { display: none; }
.acoes-linha .btn { padding: 7px 14px; font-size: 13px; }
.acoes-linha .nota { flex: 1 1 260px; width: auto; padding: 8px 12px; font-size: 13px; }

.proximas { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 7px; }
.proximas li { display: flex; gap: 10px; font-size: 13.5px; color: var(--fraco); }
.proximas li.auto { color: var(--texto); }
.proximas .bico { color: var(--fraquissimo); flex: none; width: 12px; }
.proximas li.auto .bico { color: var(--ok); }
.proximas em { font-style: normal; color: var(--fraquissimo); }
.proximas a:hover { color: var(--acento); }

/* ── missão: a entrega e o histórico das tentativas ── */
pre.saida { white-space: pre-wrap; font-size: 13px; line-height: 1.55; max-height: 60vh;
            overflow-y: auto; }
details { border: 1px solid var(--linha); border-radius: 10px; padding: 10px 14px;
          margin-bottom: 10px; background: var(--painel); }
details summary { cursor: pointer; color: var(--fraco); font-size: 13px; }
details[open] summary { margin-bottom: 10px; }
.btn.ruim { color: var(--erro); border-color: color-mix(in srgb, var(--erro) 45%, transparent); }

/* ── a Porta da Frente ──────────────────────────────────────────────────────
   A navegação saiu do topo e virou a lateral do casco — as pílulas .destinos
   morreram com a promoção do piloto FundPulse ao sistema inteiro. */

/* A porta é UMA coluna de leitura, não um painel de controle: saudação, a
   caixa da NAIA, três números e a fila em ordem de importância. Largura de
   texto, não de dashboard — a densidade continua nas telas de bastidor. */
main:has(.porta) { max-width: 920px; }

.porta .manchete { font-size: 38px; line-height: 1.15; margin: 10px 0 6px; }
.porta .manchete b { color: var(--espera); font-variant-numeric: tabular-nums; }
.contexto { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline;
            color: var(--fraco); font-size: 14px; margin: 0 0 26px; }
.contexto b { color: var(--texto); font-weight: 650; font-variant-numeric: tabular-nums; }
.contexto i { font-style: normal; color: var(--fraquissimo); }

.porta .palco-escritorio { min-height: 0; }
.palco-escritorio {
  border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden;
  background: #0d1016; min-height: 380px;
}
.palco-escritorio iframe { width: 100%; height: 100%; border: 0; display: block; }
.legenda-palco { color: var(--fraquissimo); font-size: 12.5px; margin: 9px 0 24px; }
.legenda-palco a { color: var(--acento); }
.porta.cheia .legenda-palco { margin-bottom: 0; }
/* O cérebro é a única tela que quer a largura toda: 139 nós num corredor de
   920px viram novelo, e o resto da Porta continua com a medida de leitura. */
main:has(#palco-cerebro) { max-width: none; }

/* fila à esquerda, dominante; o dia da agência acompanha à direita */
.duas-colunas { display: grid; gap: 30px; grid-template-columns: 3fr 2fr; align-items: start; }
.duas-colunas h2 { margin-top: 0; }
.duas-colunas section { min-width: 0; }
@media (max-width: 1000px) {
  .duas-colunas { grid-template-columns: 1fr; }
  .porta .manchete { font-size: 28px; }
}
/* no celular o palco não cabe — o painel interno de 352px engole o mapa.
   A porta vira despacho puro; o Escritório continua a um toque, em tela cheia. */
@media (max-width: 700px) {
  .porta .palco-escritorio { display: none; }
  .porta .so-largo { display: none; }
}

.conta {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 99px;
  background: var(--painel2); border: 1px solid var(--linha);
  font-size: 11.5px; color: var(--fraco);
}
/* O item que a Front Door não fecha. Ele fica visível de propósito — esconder
   trabalho parado é pior —, mas sem botão nenhum. */
.alvo .motivo.fora { color: var(--espera); }
.alvo .motivo.fora b { color: var(--texto); }

/* ── O parecer do verificador ───────────────────────────────────────────────
   As cláusulas do DoD conferidas uma a uma, e as voltas do gauntlet. Lista
   simples de propósito: o que importa é ler o motivo, não a decoração. */
.provas { margin: 8px 0 0; padding-left: 0; list-style: none;
  font-size: 12.5px; color: var(--fraco); }
.provas li { padding: 3px 0; border-top: 1px solid var(--linha); }
.provas li:first-child { border-top: 0; }
.provas b { color: var(--texto); }

/* ── Entregas: tabela escura, uma linha por peça ────────────────────────────
   Referência Column: primeira célula com título + arquivo, estado como única
   tag, divisórias finas. No celular a linha empilha e o cabeçalho some. */
.tabela-pecas { border: 1px solid var(--linha); border-radius: var(--raio);
                background: var(--painel); overflow: hidden; }
.cab-pecas, .linha-peca {
  display: grid; gap: 14px; align-items: center; padding: 10px 16px;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1.3fr) auto auto;
}
.cab-pecas { padding: 8px 16px; font-size: 10.5px; text-transform: uppercase;
             letter-spacing: .07em; color: var(--fraquissimo);
             border-bottom: 1px solid var(--linha); }
.linha-peca + .linha-peca { border-top: 1px solid var(--linha); }
.peca-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.peca-info b { font-size: 13.5px; font-weight: 600; }
.peca-info .mono { font-size: 12px; color: var(--fraco); overflow: hidden;
                   text-overflow: ellipsis; white-space: nowrap; }
.peca-info small { font-size: 12px; color: var(--espera); overflow: hidden;
                   text-overflow: ellipsis; white-space: nowrap; }
.peca-meta { font-size: 12.5px; color: var(--fraco); min-width: 0; }
.peca-acoes { display: flex; gap: 12px; align-items: center; white-space: nowrap; }
.peca-acoes .btn { padding: 6px 13px; font-size: 13px; }
.peca-acoes .arquivo { color: var(--acento); font-size: 12.5px; }
@media (max-width: 800px) {
  .cab-pecas { display: none; }
  .linha-peca { grid-template-columns: 1fr auto; }
  .peca-info { grid-column: 1 / -1; }
  .peca-meta { grid-column: 1 / -1; }
  .peca-acoes { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ── ficha do funcionário em duas colunas (referência Lemni) ────────────────
   centro = quem ele é e o que faz; lateral = o que ele pode. */
.ficha-topo { display: flex; gap: 16px; align-items: center; margin-bottom: 8px; }
.ficha-topo .sub { margin-bottom: 0; }
.ficha-colunas { display: grid; gap: 30px; align-items: start;
                 grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.ficha-colunas aside h2:first-child { margin-top: 0; }
.ficha-colunas .vazio { padding: 6px 0; text-align: left; }
@media (max-width: 1000px) { .ficha-colunas { grid-template-columns: 1fr; } }

/* ── Garagem de Agentes ─────────────────────────────────────────────────────
   Um cartão por funcionário, agrupado por squad. O avatar é a folha 16×32 do
   Escritório recortada por CSS: moldura com overflow escondido, imagem em
   escala 3× ancorada no topo-esquerda (o quadro parado da folha). */
.garagem-grupo { margin-bottom: 8px; }
.avatar {
  width: 48px; height: 84px; overflow: hidden; flex: none; display: block;
  border-radius: 10px; background: var(--painel2);
}
.avatar img {
  transform: scale(3); transform-origin: top left;
  image-rendering: pixelated; display: block;
}
.agente { display: flex; flex-direction: column; gap: 12px; }
/* cada informação do cartão com o nome em cima — nada de frase solta
   (15/ago, o Beto: "está tudo muito solto, precisa arrumar esses textos") */
.bloco-agente { display: flex; flex-direction: column; gap: 4px; }
.micro { font-size: 10px; font-weight: 700; text-transform: uppercase;
         letter-spacing: .09em; color: var(--fraquissimo); }
.agente-funcao { list-style: none; margin: 0; padding: 0; display: flex;
                 flex-direction: column; gap: 2px; }
.agente-funcao li { font-size: 12.5px; color: var(--fraco); padding-left: 12px;
                    position: relative; }
.agente-funcao li::before { content: '·'; position: absolute; left: 2px;
                            color: var(--fraquissimo); }
.agente-missao b { color: var(--texto); font-weight: 600; }
.quem-missao { color: var(--fraquissimo); font-size: 12px; }
.agente-topo { display: flex; gap: 14px; align-items: flex-start; }
.agente-quem { flex: 1; min-width: 0; }
.agente-quem .id { font-size: 14px; font-weight: 600; overflow: hidden;
                   text-overflow: ellipsis; white-space: nowrap; }
.agente-quem .funcao { color: var(--fraco); font-size: 12.5px; margin-top: 3px; }
.agente-missao { margin: 0; font-size: 13px; color: var(--fraco); }
.agente-pe {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--linha);
  font-size: 12px; color: var(--fraquissimo);
}
.agente-pe a { color: var(--acento); white-space: nowrap; }
.agente.ocioso .avatar img { opacity: .62; }

/* ── Falar com a NAIA ───────────────────────────────────────────────────────
   Conversa, não chat de produto: sem avatar, sem digitando, sem bolha
   redonda de mensageiro. O que importa é ler a resposta e clicar na ação —
   e o histórico é DOM, porque a operação não mora aqui. */
.conversa { max-width: 860px; }
#fio { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; }
.fala { border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 15px; }
.fala.beto { background: var(--painel2); align-self: flex-end; max-width: 78%; }
.fala.naia { background: var(--painel); }
.fala .frase { margin: 6px 0; font-size: 15.5px; }
/* Linha de lista: o recuo é do CSS, e o marcador some do texto. Assim a mesma
   resposta serve ao Telegram (texto puro) sem levar `-` visível para cá. */
.fala .frase.item { margin: 3px 0 3px 2px; padding-left: 12px;
                    border-left: 2px solid var(--linha); }
.fala .frase.item + .frase:not(.item) { margin-top: 10px; }
.fala .detalhes { margin: 8px 0 0; padding-left: 18px; color: var(--fraco); font-size: 13.5px; }
.fala .detalhes li { margin: 2px 0; }
/* A leitura gerencial vem antes e vem legível; o dump técnico continua ali,
   fechado. Trocar a ordem das duas é a diferença entre responder e despejar. */
.fala .sintese { margin: 8px 0 0; padding-left: 18px; font-size: 14.5px; }
.fala .sintese li { margin: 3px 0; }
.fala .detalhes-bloco { margin-top: 10px; }
.fala .detalhes-bloco summary {
  cursor: pointer; color: var(--fraco); font-size: 12.5px; }
.fala .acoes-linha { margin-top: 10px; }
.dizer { display: flex; gap: 8px; }
.dizer input {
  flex: 1; padding: 11px 14px; border-radius: 10px; font-size: 15px;
  background: var(--painel); color: var(--texto); border: 1px solid var(--linha);
}
.dizer input:focus { outline: none; border-color: var(--acento); }

/* ── A LINHA (14/ago): a porta desenhada, não despejada ─────────────────────
   Aprovada no rascunho estático. Três decisões, e as três valem para toda
   tela que herdar isto:
   1. hierarquia — UMA coisa em destaque (`.comece`), o resto em linhas calmas;
   2. cor só onde tem significado — âmbar espera, vermelho travou, verde anda;
      idade é texto fraco, não mais um selo gritando;
   3. português no lugar de slug — a referência técnica sobrevive no `title`. */

.saudacao { padding: 30px 0 0; }
.saudacao h1 { font-size: 34px; letter-spacing: -.02em; }
.saudacao p { color: var(--fraco); font-size: 16px; margin: 10px 0 0;
              text-wrap: balance; }
.saudacao b { color: var(--texto); font-weight: 650;
              font-variant-numeric: tabular-nums; }

.perguntar { margin: 26px 0 8px; }
.perguntar input { padding: 14px 20px; font-size: 16px; border-radius: 999px;
                   background: linear-gradient(180deg, var(--painel2), var(--painel)); }
.perguntar .btn.principal { border-radius: 999px; padding: 0 26px; }
.dicas { color: var(--fraquissimo); font-size: 13px; margin: 0 0 30px; }
.dicas a { color: var(--fraco); border-bottom: 1px dotted var(--fraquissimo); }
.dicas a:hover { color: var(--texto); }

/* três números, não seis: esperando você (o quente), trabalhando, entregue.
   O desenho do cartão vem da referência Bento (14/ago): raio generoso, número
   grande, profundidade por gradiente sutil — não por sombra nem borda dura. */
.porta .placar { grid-template-columns: repeat(3, 1fr); margin: 0 0 36px; gap: 14px; }
.porta .placar div {
  border-radius: 18px; padding: 20px 22px;
  background: linear-gradient(180deg, var(--painel2), var(--painel));
  border-color: color-mix(in srgb, var(--linha) 70%, transparent);
}
.porta .placar b { font-size: 36px; }
.porta .placar small { font-size: 11.5px; letter-spacing: .08em; }

/* a única coisa em destaque da página — o item que mais destrava */
.comece {
  background: linear-gradient(180deg, var(--painel2), var(--painel));
  border: 1px solid color-mix(in srgb, var(--espera) 32%, var(--linha));
  border-radius: 18px; padding: 22px 24px; margin: 0 0 36px;
}
.comece .acao { font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
                color: var(--espera); text-transform: uppercase; }
.comece .frase { font-size: 19px; font-weight: 650; letter-spacing: -.01em;
                 margin: 6px 0 4px; text-wrap: balance; }
.comece .onde { color: var(--fraco); font-size: 14px; }
.comece .acoes-linha { margin-top: 16px; }

/* o cliente é o destaque da linha — nome na tinta dele, antes da ação */
.cli { font-weight: 750; letter-spacing: .01em; }
.cli-sep { color: var(--fraquissimo); font-weight: 400; }

/* idade é contexto, não alarme — texto fraco, âmbar só quando esfriou */
.idade { color: var(--fraquissimo); font-size: 12.5px; white-space: nowrap;
         font-variant-numeric: tabular-nums; flex: none; }
.idade.quente { color: var(--espera); }

/* quem está com a mão na massa: linha de prosa, não card */
.agora { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px;
         color: var(--fraco); font-size: 14px; }
.agora li { display: flex; gap: 10px; align-items: baseline; }
.agora .spin { color: var(--ok); font-size: 9px; flex: none; }
.agora b { color: var(--texto); font-weight: 600; }
.agora .sq { color: var(--fraquissimo); }

.porta section { margin-bottom: 40px; }
.porta .fila + .botoes { margin-top: 12px; }

/* A assinatura do cartão Bento (o kit está em NAIA_UI/), em duas camadas:
   luz interna vinda de cima (`inset`) e uma borda que APAGA descendo — o
   `mask-image` some com ela nos últimos 25%. É o que dá o "iluminado de cima"
   sem sombra pesada. Só nas superfícies de destaque: aplicar em 15 linhas de
   fila viraria textura, e o blur(50px) do kit ficou de fora de propósito —
   custo de GPU para um efeito que ninguém percebe em painel opaco. */
.comece, .porta .placar div, .perguntar input {
  position: relative;
  box-shadow: inset 2px 4px 16px var(--brilho);
}
.comece::after, .porta .placar div::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  border: 1.5px solid var(--borda-acesa); pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 75%);
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}
.porta .placar div { border-color: color-mix(in srgb, var(--linha) 45%, transparent); }
@media (max-width: 640px) {
  .saudacao h1 { font-size: 27px; }
  .porta .placar { grid-template-columns: 1fr 1fr; }
}

/* ── GARAGEM: a tela PILOTO da pele Bento (kit em NAIA_UI/) ─────────────────
   Escopo fechado em `.garagem` de propósito — é a amostra para o Beto julgar.
   A receita completa do kit: raio 24, vidro escuro, luz interna, borda que
   apaga descendo, título maior e chips-pílula. Nenhuma cor de estado mudou:
   o significado (verde anda, âmbar espera, vermelho travou) fica fora da
   pele — pele que muda semântica não é pele. */
.garagem .card {
  position: relative; border-radius: 24px; padding: 20px;
  background: linear-gradient(180deg, var(--painel2), var(--painel));
  border-color: color-mix(in srgb, var(--linha) 40%, transparent);
  box-shadow: inset 2px 4px 16px var(--brilho);
}
.garagem .card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  border: 1.5px solid var(--borda-acesa); pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 75%);
  mask-image: linear-gradient(to bottom, black, transparent 75%);
}
.garagem .card:hover { border-color: color-mix(in srgb, var(--texto) 18%, transparent); }
.garagem .grade { gap: 18px; }
.garagem .avatar { border-radius: 14px;
                   box-shadow: inset 2px 4px 16px var(--brilho); }
.garagem .agente-quem .id { font-size: 15px; }
.garagem .agente-quem .funcao { margin-top: 4px; }
.garagem .chip { border-radius: 999px; padding: 4px 11px;
                 background: color-mix(in srgb, var(--painel2) 60%, transparent); }
.garagem .agente-pe { border-top-color: color-mix(in srgb, var(--linha) 55%, transparent); }
.garagem .agente-pe a {
  padding: 6px 14px; border-radius: 999px; color: var(--texto);
  background: color-mix(in srgb, var(--painel2) 80%, transparent);
  border: 1px solid var(--linha); transition: border-color .15s;
}
.garagem .agente-pe a:hover { border-color: var(--acento); }
.garagem h2 { display: flex; align-items: center; gap: 8px;
              margin-top: 44px; font-size: 12.5px; }
.garagem .garagem-grupo:first-of-type h2 { margin-top: 24px; }

/* ── AS LINHAS FLAT (FundPulse, promovido do piloto ao sistema) ─────────────
   A fila sem caixa: fio entre linhas, respiro vertical, hover leve, contexto
   em small-caps, direita empilhada (selo em cima, idade embaixo). Vale na
   porta, no Hoje e no Aguardando você — as três usam o mesmo itemDaFila.
   As cores de estado não mudam: pele não altera semântica. */
.fila { background: transparent; border: 0; border-radius: 0; overflow: visible; }
.fila details.alvo + details.alvo { border-top: 1px solid
  color-mix(in srgb, var(--linha) 70%, transparent); }
details.alvo summary { padding: 14px 6px; border-radius: 10px; }
details.alvo summary:hover,
details.alvo[open] summary { background:
  color-mix(in srgb, var(--painel2) 55%, transparent); }
.corpo-fila { padding-left: 25px; }
/* sem uppercase: o subtítulo é contexto (funcionário · missão), e caixa alta
   num texto cortado a 120 colunas gritava mais que o selo de estado (15/ago) */
.resumo-fila > .onde-fila:first-of-type {
  font-size: 11px; letter-spacing: .02em; }
summary .direita { flex-direction: column; align-items: flex-end; gap: 4px; }
.idade { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.tag { background: transparent; border-radius: 7px; }

/* a régua da missão: adiar N dias / arquivar / encerrar — separada das ações
   principais por um respiro, porque ela gerencia a missão, não a etapa */
.regua-missao { display: inline-flex; gap: 6px; align-items: center;
                margin-left: auto; padding-left: 12px; }
.regua-missao .dias { width: 58px; padding: 6px 8px; font-size: 13px;
                      border-radius: 8px; background: var(--painel);
                      border: 1px solid var(--linha); color: var(--texto);
                      font-variant-numeric: tabular-nums; }
.regua-missao .btn { padding: 7px 12px; font-size: 12.5px; }

/* ── A JORNADA numa linha (pedido do Beto, 14/ago): um passo por etapa, ícone
   da etapa na bolinha, cor do aro = estado, detalhe abre embaixo no clique. */
.jornada { display: flex; overflow-x: auto; padding: 8px 0 4px; margin: 0 0 10px; }
.jpasso { flex: 1 0 78px; min-width: 78px; position: relative; background: none;
          border: 0; cursor: pointer; font: inherit; color: var(--fraco);
          display: flex; flex-direction: column; align-items: center; gap: 7px;
          padding: 0 4px; }
.jpasso::before { content: ''; position: absolute; top: 19px; right: 50%;
                  width: 100%; height: 2px; background: var(--linha); }
.jpasso:first-child::before { display: none; }
.jpasso.concluido::before {
  background: color-mix(in srgb, var(--ok) 45%, var(--linha)); }
.jbola { width: 38px; height: 38px; border-radius: 50%; display: grid;
         place-items: center; font-size: 16px; position: relative; z-index: 1;
         background: var(--painel); border: 2px solid var(--linha);
         transition: border-color .15s, box-shadow .15s; }
.jpasso.concluido .jbola { border-color: var(--ok); }
.jpasso.executavel .jbola { border-color: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.jpasso.aguarda .jbola { border-color: var(--espera); }
.jpasso.ruim .jbola { border-color: var(--erro); }
.jpasso.foco .jbola, .jpasso.aberto .jbola { border-color: var(--acento); }
.jpasso.aberto { color: var(--texto); }
.jnome { font-size: 10.5px; font-family: ui-monospace, monospace;
         white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
         max-width: 100%; }
#etapa-detalhe { margin-bottom: 6px; }
/* a caixa de explicação no hover da etapa (15/ago) */
.jpasso[data-dica]::after {
  content: attr(data-dica); position: absolute; bottom: calc(100% + 10px);
  left: 50%; transform: translateX(-50%); width: 240px; z-index: 30;
  background: var(--painel2); border: 1px solid var(--linha);
  border-radius: 10px; padding: 10px 12px; font-size: 12px; line-height: 1.45;
  color: var(--texto); text-align: left; white-space: normal;
  font-family: -apple-system, "Segoe UI", sans-serif;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
  opacity: 0; pointer-events: none; transition: opacity .12s; }
.jpasso[data-dica]:hover::after { opacity: 1; }
.jpasso.beto .jbola { border-color: var(--espera);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--espera) 22%, transparent); }
.jflag { font-size: 9.5px; color: var(--espera); text-transform: uppercase;
         letter-spacing: .05em; white-space: nowrap; }
.chip.etapa-do-agente { color: var(--texto);
  border-color: color-mix(in srgb, var(--acento) 45%, var(--linha)); }

/* a entrega em LINHA, sem scroll (pedido de 14/ago): a grade divide a largura
   da página entre as peças e quebra para a linha de baixo se precisar — tudo
   à vista, nada escondido atrás de rolagem. Cartão quase quadrado.
   Verde = os dois vereditos dados; âmbar = espera você; vermelho = ajuste. */
/* auto-FILL, não auto-fit: missão de UMA peça mantinha a trilha única e o
   cartão explodia na largura inteira (15/ago) — fill preserva as colunas
   vazias e o cartão fica do tamanho de cartão */
.pecas-linha { display: grid; gap: 10px; padding: 4px 0 8px;
               grid-template-columns: repeat(auto-fill, minmax(104px, 156px)); }
.pcard { aspect-ratio: 1.15; display: flex; flex-direction: column; gap: 3px;
         align-items: center; justify-content: center; text-align: center;
         cursor: pointer; min-width: 0;
         font: inherit; color: var(--texto); padding: 10px;
         background: var(--painel); border-radius: 14px;
         border: 1.5px solid color-mix(in srgb, var(--espera) 45%, var(--linha));
         transition: border-color .15s, transform .15s; }
.pcard:hover { transform: translateY(-2px); border-color: var(--acento); }
.pcard.ok { border-color: color-mix(in srgb, var(--ok) 55%, var(--linha)); }
.pcard.ruim { border-color: color-mix(in srgb, var(--erro) 55%, var(--linha)); }
.pcard-icone { font-size: 17px; margin-bottom: 3px; }
.pcard.ok .pcard-icone { color: var(--ok); }
.pcard-nome { font-weight: 650; font-size: 13.5px; }
.pcard-sub { font-size: 10.5px; color: var(--fraquissimo);
             text-transform: uppercase; letter-spacing: .04em;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
             max-width: 100%; }

/* a aba MISSÕES: linha clicável com a jornada em miniatura embaixo (15/ago) —
   ✓ verde no feito, aceso onde está, apagado no que ainda não chegou */
a.linha-missao, div.linha-missao { display: block; padding: 13px 16px 11px; }
/* o bloco da OPERAÇÃO (a missão completa, como o Beto fala) */
.operacao-bloco { background: var(--painel); border: 1px solid var(--linha);
                  border-radius: 16px; padding: 16px 18px; margin: 0 0 16px; }
.operacao-bloco h3 { margin: 0 0 6px; font-size: 15.5px; letter-spacing: -.01em;
                     display: flex; align-items: center; gap: 8px; }
.operacao-bloco .jornada { margin: 4px 0 6px; }
.operacao-bloco .jpasso { cursor: default; }
.jquem { font-size: 10px; color: var(--fraquissimo);
         font-family: ui-monospace, monospace; white-space: nowrap;
         overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* a equipe da operação em cards com o bonequinho da Garagem */
.equipe-grid { display: grid; gap: 10px; margin: 8px 0 10px;
               grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.agente-mini { background: color-mix(in srgb, var(--painel2) 55%, transparent);
               border: 1px solid var(--linha); border-radius: 12px;
               padding: 11px 13px; display: grid; min-width: 0;
               transform-style: preserve-3d; transition: transform .35s;
               transform: perspective(900px) rotateY(0deg); }
.agente-mini.virada { transform: perspective(900px) rotateY(180deg); }
/* as duas faces ocupam a MESMA célula: a altura do card é a da face maior,
   e nenhuma delas encolhe quando o card vira */
.mini-face { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 7px;
             min-width: 0; backface-visibility: hidden; }
.mini-face.verso { transform: rotateY(180deg); }
/* o verso rola em vez de esticar o card: quem tem 9 especialidades não pode
   definir a altura da grade inteira */
.mini-face.verso .agente-funcao, .mini-face.verso .chips { overflow-y: auto;
               max-height: 78px; }
.agente-mini:not(.virada) .mini-face.verso,
.agente-mini.virada .mini-face.frente { visibility: hidden; }
.mini-rodape { margin-top: auto; display: flex; gap: 10px; align-items: baseline;
               justify-content: space-between; flex-wrap: wrap; }
.mini-virar { background: none; border: 0; padding: 0; cursor: pointer;
              font: inherit; font-size: 12px; color: var(--fraco); }
.mini-virar:hover { color: var(--acento); }
.agente-mini-topo { display: flex; gap: 10px; align-items: center; }
.agente-mini .avatar { width: 34px; height: 60px; border-radius: 8px; }
.agente-mini .avatar img { transform: scale(2.1); }
.agente-mini b { font-size: 13px; overflow: hidden; text-overflow: ellipsis;
                 white-space: nowrap; }
.agente-mini .agente-funcao li { font-size: 11.5px; }
.ficha-link { font-size: 12px; color: var(--acento); }
.operacao-bloco .fila { margin-top: 4px; }
div.linha-missao.sem-tela { cursor: default; opacity: .75; }
div.linha-missao.sem-tela:hover { background: transparent; }
.linha-missao-topo { display: flex; align-items: center; gap: 12px; min-width: 0; }
a.linha-missao:hover { background: color-mix(in srgb, var(--painel2) 55%, transparent); }
.jornada-mini { display: flex; align-items: center; gap: 0; margin: 9px 0 0 19px; }
.jmini { width: 26px; height: 26px; border-radius: 50%; flex: none;
         display: grid; place-items: center; font-size: 11px;
         background: var(--painel); border: 1.5px solid var(--linha); }
.jmini.feita { border-color: var(--ok); color: var(--ok); font-weight: 700; }
.jmini.pronta { border-color: var(--ok);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 25%, transparent); }
.jmini.sua-vez { border-color: var(--espera);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--espera) 22%, transparent); }
.jmini.longe { opacity: .38; filter: grayscale(1); }
.jmini-fio { width: 14px; height: 2px; flex: none; background: var(--linha); }

/* o modal da revisão: a sala inteira, sem sair da missão */
dialog.modal-revisao { width: min(1240px, 96vw); height: 93vh; padding: 0;
  border: 1px solid var(--linha); border-radius: 16px; background: var(--bg);
  overflow: hidden; }
dialog.modal-revisao::backdrop { background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(2px); }
dialog.modal-revisao iframe { width: 100%; height: 100%; border: 0; display: block; }
dialog.modal-revisao .fechar { position: absolute; top: 10px; right: 12px;
  z-index: 2; padding: 7px 14px; font-size: 13px; }

/* quem pediu menos movimento recebe menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  a.card:hover { transform: none; }
}

/* O botão de recomeçar fica ao lado do título, não escondido no rodapé do
   histórico: conversa que não se fecha vira conversa eterna. */
.topo-conversa { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.topo-conversa h1 { margin-bottom: 0; }

/* ── o selo da família ──────────────────────────────────────────────────────
   O ícone diz DE QUE a pendência é; a linha e o card já dizem o que fazer.
   Largura fixa para que os selos formem coluna: emoji tem avanço variável, e
   sem a caixa os títulos entrariam desalinhados um do outro. */
.icone-fila { flex: 0 0 1.5rem; font-size: .95rem; line-height: 1;
              text-align: center; }
.carta-icone { margin-right: .4rem; font-size: .9rem; }
.icone-secao { font-size: .9rem; margin-right: .15rem; }

/* ── o modal do funcionário: leitura de dez segundos ────────────────────────
   Reuso do <dialog> que a sala de revisão já usa. Estreito de propósito: se
   couber tudo aqui, a ficha não precisava ser página; o que não cabe é
   justamente o que é bancada (a gaveta de 47, o desligar, o contrato). */
dialog.modal-func { width: min(560px, 94vw); max-height: 88vh; padding: 0;
                    border: 1px solid var(--linha); border-radius: var(--raio);
                    background: var(--painel); color: var(--texto); overflow: hidden; }
dialog.modal-func::backdrop { background: rgba(0, 0, 0, .55); }
dialog.modal-func .corpo { padding: 22px 24px 20px; overflow-y: auto; max-height: 88vh; }
dialog.modal-func .fechar { position: absolute; top: 10px; right: 12px; z-index: 2;
                            background: var(--painel2); color: var(--texto);
                            border: 1px solid var(--linha); border-radius: 8px;
                            width: 30px; height: 30px; cursor: pointer; }
dialog.modal-func .func-topo { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
dialog.modal-func .func-topo h2 { margin: 0 0 2px; font-size: 19px; }
dialog.modal-func .func-topo .sub { margin: 0; font-size: 13px; color: var(--fraco); }
dialog.modal-func .micro { margin-top: 16px; }

/* o cartão da Garagem: uma frase, não uma ficha */
.agente-resumo { margin: 0 0 4px; font-size: 13.5px; line-height: 1.5; color: var(--fraco); }

/* ── a ficha do funcionário: encurtar sem perder informação ─────────────────
   Etapas em grade. Empilhadas em largura inteira, seis viravam seis telas de
   rolagem para dizer seis palavras. */
.grade-etapas { display: grid; gap: 10px; margin-bottom: 18px;
                grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.etapa-cartao { display: block; padding: 12px 13px; border: 1px solid var(--linha);
                border-radius: 11px; background: var(--painel2); }
.etapa-cartao:hover { border-color: var(--acento); }
.etapa-cartao .id { font-weight: 600; font-size: 13.5px; margin-bottom: 3px; }
.etapa-cartao .funcao { font-size: 12.5px; color: var(--fraco); line-height: 1.45;
                        margin-bottom: 8px; }

/* a gaveta de 47: ferramenta, e por isso fechada até alguém precisar dela */
details.gaveta-banca > summary { cursor: pointer; list-style: none;
                                 display: flex; align-items: baseline; gap: 10px; }
details.gaveta-banca > summary::-webkit-details-marker { display: none; }
details.gaveta-banca > summary h2 { display: inline; }
details.gaveta-banca > summary .dica { font-size: 12px; color: var(--fraquissimo); }
details.gaveta-banca[open] > summary .dica { visibility: hidden; }

/* as fontes do funcionário: uma linha cada, com a procedência no title.
   Eram quatro linhas por referência — 80% da altura da ficha. */
.fonte-linha { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
               padding: 8px 0; border-bottom: 1px solid var(--linha); font-size: 13px; }
.fonte-linha:last-child { border-bottom: 0; }
.fonte-linha b { flex: 0 0 auto; }
.fonte-linha .serve { color: var(--fraco); flex: 1 1 220px; min-width: 0; }

details.fontes-func > summary { cursor: pointer; list-style: none;
                                display: flex; align-items: baseline; gap: 10px; }
details.fontes-func > summary::-webkit-details-marker { display: none; }
details.fontes-func > summary h2 { display: inline; }
details.fontes-func > summary .dica { font-size: 12px; color: var(--fraquissimo); }
details.fontes-func[open] > summary .dica { visibility: hidden; }

/* ── Aprendizados da NAIA (Bloco 4B) ────────────────────────────────────────
   Reaproveita `.card`, `.tag`, `.aviso` e `.acoes`. O que entra aqui é só o
   que não existia: o empilhamento da lista, a lista de evidências e a borda
   que distingue os quatro estados sem inventar cor nova — as quatro saem das
   variáveis que a paleta já declara. */
.licoes { display: flex; flex-direction: column; gap: 12px; }
.card.licao { border-left: 3px solid var(--linha); }
.card.licao[data-estado="candidata"] { border-left-color: var(--espera); }
.card.licao[data-estado="aprovada"]  { border-left-color: var(--ok); }
.card.licao[data-estado="contrato"]  { border-left-color: var(--acento); }
.card.licao[data-estado="rejeitada"] { opacity: .62; }
.licao-texto { margin: 10px 0 4px; font-size: 15px; line-height: 1.45; }
.card.licao .acoes { margin-top: 12px; }
.card.licao details { margin-top: 10px; }
.card.licao summary { cursor: pointer; color: var(--fraco); font-size: 13px; }
.evidencias { margin: 8px 0 0; padding-left: 18px; color: var(--fraco);
              font-size: 13.5px; line-height: 1.5; }
.evidencias b { color: var(--texto); font-family: ui-monospace, monospace;
                font-size: 12.5px; }

/* O selo de jornada validada. Verde por pedido do Beto, 20/ago/2026: a
   `cast-youtube` foi a primeira provada de ponta a ponta, e ele quer bater o
   olho e ver isso. Fica ao lado do estado, nunca no lugar dele — ATIVA e
   VALIDADA respondem perguntas diferentes: uma é "está ligada?", a outra é
   "alguém já provou que funciona?". */
.chip.selo-validada {
  background: #0f3d24;
  color: #4ade80;
  border-color: #166534;
  font-weight: 600;
}

/* 🖥 — a etapa roda dentro do navegador do Beto, pela extensão. Discreto de
   propósito: é informação de manutenção (o Chrome precisa estar aberto), não
   um estado da operação. */
.no-navegador { opacity: .75; font-size: .85em; }