/* =====================================================================
   Bússola: sistema de design "luxo discreto" (pedido do Tony, 2026-11-11)
   O luxo vem de espaço, tipografia e contenção: superfícies planas, linhas
   finas, um raio só, uma cor de destaque, quase nenhuma sombra, pouco
   movimento. Tipografia: Gabarito (títulos) e JUST Sans (texto).

   TOKENS (variáveis no topo; o tema claro troca só as cores)
     cor ........ --bg --surface --surface-2 --line --line-soft --borda-campo
                  --text --text-2 --muted --link --accent --accent-fg
                  --ok --warn --err (cada um com -bg)
     raio ....... --radius (cartão, 12px) --radius-s (botão e campo, 8px)
     texto ...... --fs-xs --fs-s --fs-m --fs-l --fs-xl --fs-2xl
     espaço ..... --esp-1 (4px) a --esp-7 (48px)
     movimento .. --mov-rapido (140ms) --mov (180ms) --mov-curva
   A cor da marca da empresa (cor-marca.js) troca --accent, --accent-fg,
   --accent-grad e --navy-400. --accent-grad continua existindo como apelido
   (cor lisa, sem degradê) para os arquivos que ainda usam o nome antigo.

   COMPONENTES (use estes antes de criar estilo novo num módulo)
     .pg-topo ......... cabeçalho de página: <header class="pg-topo"><div>
                        <h1 class="pg-titulo"> + <p class="pg-desc"></div>
                        <div class="pg-acoes"> com UM .btn principal</header>
     .abas-pg ......... abas sublinhadas (role=tablist). Monte com
                        uiAbas(el, {abas, ativa, aoTrocar}) de js/ui-abas.js.
                        As barras antigas .tabs/.tab têm o mesmo visual.
     .kpis > .kpi ..... indicadores: .kpi-num (número grande e leve,
                        data-contar para contar ao aparecer), .kpi-rot
                        (rótulo em caixa normal), .kpi-var (variação:
                        .sobe ou .desce). .metricas/.metrica são apelidos.
     .lista-linhas .... <ul class="lista-linhas"><li> com .linha-ic,
                        .linha-txt (.linha-titulo, .linha-apoio),
                        .linha-estado e .linha-fim (ações à direita).
                        Substitui grades de cartões.
     .secao ........... bloco plano com .secao-cab (título h2 e ação à
                        direita) e linha fina; use no lugar de um .card
                        quando o cartão não agrupa de verdade.
     .estado-vazio .... estado vazio: .estado-vazio-ic, uma frase <p>, uma
                        ação (o nome .vazio já é usado como modificador).
     .esqueleto ....... bloco de carregamento (uiEsqueleto(n) em
                        js/ui-movimento.js) no lugar de "Carregando...".
     .btn ............. principal (sólido; um por tela). .btn.secondary
                        (contorno), .btn.ghost (só texto), .btn.danger,
                        .btn.small, .btn.block, .btn-link (parece link).
     .badge ........... selo de estado em pílula (.ok .warn .err .neutral
                        .tipo). .chip: etiqueta neutra de canto reto.
     .hint .form-erro .aviso (.ok .erro .info): textos de apoio e avisos.
     .ui-entra ........ entrada de conteúdo (fade com 4px de subida).
   Movimento: tudo é desligado por prefers-reduced-motion (regra no fim
   deste arquivo). Nada de animação em laço.
   ===================================================================== */

@font-face {
  font-family: "Gabarito";
  /* WOFF (a mesma fonte variável, comprimida: 76 KB em vez de 159 KB); o TTF fica de reserva */
  src: url("../fonts/Gabarito.woff") format("woff"), url("../fonts/Gabarito.ttf") format("truetype");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "JUST Sans";
  src: url("../fonts/JustSans.woff") format("woff"), url("../fonts/JustSans.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* escala neutra e profunda do tema escuro; os nomes "navy" ficam porque muitos arquivos os usam
     (navy-950 = fundo, navy-900 = superfície elevada: janelas e menus) */
  --navy-950: #0A0B0E;
  --navy-900: #14151A;
  --navy-850: #101B37;
  --navy-800: #182B54;
  --navy-700: #213A72;
  --navy-600: #28498E;
  --navy-500: #3258AB;
  --navy-400: #3B67CA;
  --blue-500: #3B67CA;
  --blue-300: #7695B4;
  --blue-250: #85A0BF;
  --blue-200: #9BB9DD;
  --slate-500: #4F6479;
  --slate-400: #5E7086;
  --slate-300: #7088A2;

  --bg: var(--navy-950);
  --text: #F1F2F4;
  --text-2: #B6BAC3;
  --muted: #8C919C; /* 5.9:1 sobre as superfícies escuras (WCAG AA) */
  --line: rgba(255, 255, 255, .12);
  /* contorno dos campos (texto, lista, caixa de texto): 3:1 com o fundo, para dar para ver onde
     fica o campo (WCAG 1.4.11; auditoria de acessibilidade, pedido do Tony, 2026-11-11) */
  --borda-campo: rgba(255, 255, 255, .42);
  --line-soft: rgba(255, 255, 255, .07);
  --surface: rgba(255, 255, 255, .035);
  --surface-2: rgba(255, 255, 255, .07);
  --elevado: var(--navy-900); /* janelas, menus e gavetas */

  --accent: var(--navy-400); /* a única cor de destaque: o índigo da marca */
  --link: #A9C0F2; /* links sem classe própria: 10:1 no tema escuro */
  --accent-grad: linear-gradient(var(--accent), var(--accent)); /* apelido antigo: cor lisa, sem degradê */
  --accent-fg: #fff; /* texto sobre a cor principal; a cor da marca da empresa troca as duas (cor-marca.js) */
  --accent-suave: rgba(59, 103, 202, .16);

  --ok: #8FC7A6;
  --ok-bg: rgba(143, 199, 166, .12);
  --warn: #D9BE93;
  --warn-bg: rgba(217, 190, 147, .12);
  --err: #D99A9A;
  --err-bg: rgba(217, 154, 154, .12);

  --d-color: #3B67CA;
  --i-color: #9BB9DD;
  --s-color: #7695B4;
  --c-color: #5E7086;

  --radius: 12px;
  --radius-s: 8px;
  --font-display: "Gabarito", -apple-system, sans-serif;
  --font-body: "JUST Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-xs: .76rem;
  --fs-s: .86rem;
  --fs-m: 1rem;
  --fs-l: 1.15rem;
  --fs-xl: 1.45rem;
  --fs-2xl: 1.9rem;
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --esp-7: 48px;
  --mov-rapido: 140ms;
  --mov: 180ms;
  --mov-curva: cubic-bezier(.2, .7, .3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  font-family: var(--font-body);
  font-weight: 360;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  font-size: 15.5px;
  letter-spacing: .005em;
}

h1, h2, h3, .metrica .num, .kpi-num {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.005em;
}

.container { max-width: 1120px; margin: 0 auto; padding: 40px 24px 96px; }
.container.narrow { max-width: 760px; }
/* painéis do gestor e do dono: aproveitam telas largas (as páginas do candidato e o site seguem em 1120px) */
.pg-gestor .container, .pg-gestor .topbar .inner, .pg-dono .container, .pg-dono .topbar .inner { max-width: 1680px; }
.pg-gestor .container, .pg-dono .container { padding-top: 32px; }
@media (min-width: 1400px) {
  .pg-gestor .container, .pg-gestor .topbar .inner, .pg-dono .container, .pg-dono .topbar .inner { padding-left: 40px; padding-right: 40px; }
}

/* ---------- cabeçalho (topo fino) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--topbar-bg, rgba(10, 11, 14, .82));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar .inner {
  max-width: 1120px; margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.topbar .brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar .brand img { height: 26px; display: block; }
.topbar .brand .sep { width: 1px; height: 20px; background: var(--line); }
.topbar h1 { font-size: 1rem; font-weight: 560; color: var(--text); line-height: 1.25; }
.topbar .sub { font-size: .78rem; color: var(--muted); line-height: 1.3; }
.topbar .actions { display: flex; gap: 8px; align-items: center; }

/* ---------- cartões (planos: só quando agrupam de verdade) ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 24px 26px;
  margin-bottom: 20px;
}
.card .card { background: transparent; }
.card h2 { font-size: var(--fs-l); margin-bottom: 6px; font-weight: 560; line-height: 1.3; }
.card h3 {
  font-size: .95rem; margin: 24px 0 10px; color: var(--text);
  font-weight: 600; font-family: var(--font-body);
}
.card .desc, .desc { color: var(--text-2); font-size: .9rem; font-weight: 340; }
.card .desc { margin-bottom: 14px; }

.grid { display: grid; gap: 18px; }
/* min(..., 100%): numa caixa mais estreita que a coluna mínima (celular de 320 px) a grade não passa da tela (WCAG 1.4.10) */
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }

/* ---------- botões: um principal por tela (sólido), os outros discretos ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: var(--accent-fg, #fff); border: 1px solid transparent; cursor: pointer;
  padding: 9px 18px; border-radius: var(--radius-s); font-size: .9rem; font-weight: 520; line-height: 1.35;
  font-family: var(--font-body); letter-spacing: .005em; min-height: 40px;
  transition: background-color var(--mov-rapido), border-color var(--mov-rapido), color var(--mov-rapido), filter var(--mov-rapido);
  text-decoration: none;
}
.btn:hover { filter: brightness(1.1); }
.btn:active { filter: brightness(.95); }
.btn:disabled { opacity: .4; cursor: not-allowed; filter: none; }
.btn.secondary, .btn.on-dark {
  background: transparent; color: var(--text);
  border-color: var(--line);
}
.btn.secondary:hover, .btn.on-dark:hover { background: var(--surface-2); filter: none; }
.btn.ghost { background: transparent; color: var(--text-2); border-color: transparent; }
.btn.ghost:hover { color: var(--text); background: var(--surface-2); filter: none; }
.btn.danger { background: transparent; color: var(--err); border-color: var(--err-bg); }
.btn.danger:hover { background: var(--err-bg); filter: none; }
.btn.small { padding: 5px 12px; font-size: .82rem; min-height: 32px; }
.btn.block { width: 100%; }
.btn svg { width: 15px; height: 15px; }
/* botão com cara de link (ação secundária dentro de um texto ou de uma linha) */
.btn-link {
  background: none; border: 0; padding: 0; font: inherit; color: var(--link); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; min-height: 24px;
}
.btn-link:hover { color: var(--text); }

/* ---------- formulários ---------- */
label.field { display: block; margin-bottom: 18px; font-size: .86rem; font-weight: 460; color: var(--text-2); }
label.field span.hint { font-weight: 320; color: var(--muted); }
input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
  width: 100%; margin-top: 6px; padding: 10px 12px;
  border: 1px solid var(--borda-campo, var(--line)); border-radius: var(--radius-s);
  font-size: .95rem; font-family: var(--font-body); font-weight: 360;
  background: rgba(7, 11, 20, .5); color: var(--text);
  transition: border-color var(--mov-rapido), box-shadow var(--mov-rapido);
}
/* telefone, endereço, busca e datas ficavam com o fundo branco do navegador no tema escuro
   (campo de telefone do cadastro do candidato, link do portal); mesma aparência dos outros campos */
input[type=tel], input[type=url], input[type=search], input[type=date], input[type=time],
input[type=datetime-local], input[type=month] {
  padding: 10px 12px; border: 1px solid var(--borda-campo, var(--line)); border-radius: var(--radius-s);
  font-size: .95rem; font-family: var(--font-body); font-weight: 360;
  background: rgba(7, 11, 20, .5); color: var(--text); color-scheme: dark;
  transition: border-color var(--mov-rapido), box-shadow var(--mov-rapido);
}
label.field > input[type=tel], label.field > input[type=url], label.field > input[type=search],
label.field > input[type=date], label.field > input[type=time], label.field > input[type=datetime-local],
label.field > input[type=month] { width: 100%; margin-top: 6px; }
html[data-tema="claro"] input[type=tel], html[data-tema="claro"] input[type=url],
html[data-tema="claro"] input[type=search], html[data-tema="claro"] input[type=date],
html[data-tema="claro"] input[type=time], html[data-tema="claro"] input[type=datetime-local],
html[data-tema="claro"] input[type=month] { color-scheme: light; }
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blue-200);
  box-shadow: 0 0 0 3px rgba(155, 185, 221, .28);
}
html[data-tema="claro"] input:focus, html[data-tema="claro"] select:focus, html[data-tema="claro"] textarea:focus {
  border-color: var(--navy-500); box-shadow: 0 0 0 3px rgba(50, 88, 171, .22);
}
/* caixas de marcar, opções e arquivo: o "outline: none" acima apagava o foco (a sombra fraca quase não aparece
   nesses controles); contorno visível pelo teclado, como nos botões (WCAG 2.4.7) */
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible, input[type=file]:focus-visible,
input[type=range]:focus-visible, input[type=color]:focus-visible {
  outline: 2px solid var(--blue-200); outline-offset: 2px;
}
html[data-tema="claro"] input[type=checkbox]:focus-visible, html[data-tema="claro"] input[type=radio]:focus-visible,
html[data-tema="claro"] input[type=file]:focus-visible, html[data-tema="claro"] input[type=range]:focus-visible,
html[data-tema="claro"] input[type=color]:focus-visible { outline-color: var(--navy-500); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
select option { background: var(--navy-900); color: var(--text); }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* foco visível pelo teclado em botões, links e abas (os campos têm o próprio) */
a:focus-visible, button:focus-visible, [role="tab"]:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--blue-200); outline-offset: 2px;
}
html[data-tema="claro"] a:focus-visible, html[data-tema="claro"] button:focus-visible,
html[data-tema="claro"] [role="tab"]:focus-visible, html[data-tema="claro"] summary:focus-visible,
html[data-tema="claro"] [tabindex]:focus-visible { outline-color: var(--navy-500); }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
label:focus-within:has(> .sr-only) { outline: 2px solid var(--blue-200); outline-offset: 2px; }
.modal[tabindex="-1"]:focus, .modal[tabindex="-1"]:focus-visible { outline: none; }
[role="main"][tabindex="-1"]:focus, [role="main"][tabindex="-1"]:focus-visible { outline: none; }
/* título que recebe o foco na troca de tela (candidato.js, focarTituloTela): o leitor de tela anuncia, sem contorno */
#app h2[tabindex="-1"]:focus, #app h2[tabindex="-1"]:focus-visible { outline: none; }
/* link "Pular para o conteúdo" (a11y.js): só aparece quando recebe o foco pelo teclado (WCAG 2.4.1) */
.a11y-pular { position: absolute; left: 12px; top: -60px; z-index: 3000; padding: 10px 16px; border-radius: 8px;
  background: var(--navy-900); color: var(--text); border: 2px solid var(--blue-200); text-decoration: none; font-weight: 600; }
.a11y-pular:focus { top: 12px; }
html[data-tema="claro"] .a11y-pular { background: #FFFFFF; border-color: var(--navy-500); }

/* ---------- textos de apoio e avisos ---------- */
.hint { color: var(--text-2); font-size: .86rem; }
.form-erro { color: var(--err); font-size: .86rem; margin: 10px 0; min-height: 1.2em; }
.aviso {
  background: var(--warn-bg); color: var(--warn); border: 0; border-left: 2px solid var(--warn);
  border-radius: var(--radius-s); padding: 12px 16px; font-size: .87rem;
}
.aviso.ok { background: var(--ok-bg); color: var(--ok); border-left-color: var(--ok); }
.aviso.erro { background: var(--err-bg); color: var(--err); border-left-color: var(--err); }
.aviso.info { background: var(--surface-2); color: var(--text-2); border-left-color: var(--line); }

/* ---------- selos de estado (pílula só aqui) e etiquetas ---------- */
.badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: .74rem; font-weight: 520; letter-spacing: .01em; line-height: 1.5;
}
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.err { background: var(--err-bg); color: var(--err); }
.badge.neutral { background: var(--accent-suave); color: var(--blue-200); }
.badge.tipo { background: var(--surface-2); color: var(--text-2); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 6px;
  border: 1px solid var(--line); color: var(--text-2); font-size: .78rem; line-height: 1.5;
}

/* ---------- progresso ---------- */
.progress-wrap { background: var(--surface-2); border-radius: 999px; height: 4px; overflow: hidden; margin: 14px 0 24px; }
.progress-bar { background: var(--accent); height: 100%; border-radius: 999px; transition: width .5s var(--mov-curva); }

/* ---------- teste DISC ---------- */
.disc-opcoes { display: grid; gap: 10px; margin-top: 18px; }
.disc-opcao {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px;
  border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 14px 16px;
  background: var(--surface); transition: border-color var(--mov-rapido);
}
.disc-opcao:hover { border-color: var(--line); }
.disc-opcao .palavra { font-weight: 440; font-size: .98rem; }
.disc-pick {
  cursor: pointer; border: 1px solid var(--line); background: transparent;
  border-radius: var(--radius-s); padding: 7px 14px; font-size: .74rem; font-weight: 560;
  letter-spacing: .04em; color: var(--muted); font-family: var(--font-body); min-height: 32px;
  transition: color var(--mov-rapido), border-color var(--mov-rapido), background-color var(--mov-rapido);
}
.disc-pick:hover { color: var(--text); border-color: var(--blue-250); }
.disc-pick.mais.ativo { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.disc-pick.menos.ativo { border-color: var(--err); background: var(--err-bg); color: var(--err); }

/* ---------- teste BASE (cartas) ---------- */
.base-cartas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 20px; }
.base-carta {
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--surface); padding: 26px 20px; cursor: pointer; text-align: center;
  position: relative; transition: border-color var(--mov), background-color var(--mov); min-height: 150px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px;
}
.base-carta:hover { border-color: var(--navy-400); background: var(--surface-2); }
.base-carta.escolhida {
  border-color: var(--navy-400); background: var(--accent-suave);
  cursor: default;
}
.base-carta .ordem {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: var(--accent-fg, #fff); border-radius: 999px;
  min-width: 27px; height: 27px; display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 560; padding: 0 9px; letter-spacing: .04em;
}
.base-carta .icone-carta { color: var(--blue-200); }
.base-carta .icone-carta svg { width: 26px; height: 26px; }
.base-carta strong { font-weight: 500; font-size: .98rem; }
.base-carta .sub-carta { font-size: .8rem; color: var(--muted); font-weight: 340; }

/* ---------- resultados: barras ---------- */
.perfil-barras { display: grid; gap: 16px; margin: 22px 0; }
.perfil-barra { display: grid; grid-template-columns: 130px 1fr 52px; align-items: center; gap: 14px; }
.perfil-barra .rotulo { font-size: .85rem; font-weight: 420; color: var(--text-2); }
.perfil-barra .trilha { background: var(--surface-2); height: 6px; border-radius: 999px; overflow: hidden; }
.perfil-barra .valor { height: 100%; border-radius: 999px; transition: width .5s var(--mov-curva); }
.perfil-barra .num { font-size: .88rem; font-weight: 520; text-align: right; font-family: var(--font-display); }

.match-geral { display: flex; align-items: baseline; gap: 14px; margin: 18px 0 6px; }
.match-geral .match-num {
  font-family: var(--font-display); font-weight: 450; font-size: 3.2rem; line-height: 1;
  letter-spacing: -.02em; color: var(--text);
}
.match-geral .match-rotulo { font-size: .84rem; color: var(--muted); }

.perfil-destaque {
  border: 0; border-left: 2px solid var(--accent);
  background: var(--surface-2);
  padding: 18px 22px; border-radius: var(--radius-s); margin: 22px 0;
}
.perfil-destaque .titulo { font-family: var(--font-display); font-weight: 560; font-size: 1.15rem; }
.perfil-destaque > div:last-child { color: var(--text-2); font-size: .9rem; }

.lista-simples { margin: 8px 0 8px 18px; font-size: .92rem; color: var(--text-2); }
.lista-simples li { margin-bottom: 7px; }
.lista-simples li strong { color: var(--text); font-weight: 500; }
.lista-simples li::marker { color: var(--muted); }

/* ---------- tabelas: linhas finas, cabeçalho calmo, sem caixa em volta ---------- */
.tabela-wrap { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.tabela th, table.tabela td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line-soft); }
table.tabela th {
  font-size: .8rem; color: var(--muted); font-weight: 500; border-bottom-color: var(--line);
}
table.tabela td { color: var(--text-2); font-weight: 360; }
table.tabela td strong { color: var(--text); font-weight: 500; }
table.tabela tr:last-child td { border-bottom: none; }
table.tabela td.num, table.tabela th.num { text-align: center; }
table.tabela th:first-child, table.tabela td:first-child { padding-left: 0; }
table.tabela th:last-child, table.tabela td:last-child { padding-right: 0; }

.celula-gap {
  display: inline-block; min-width: 54px; text-align: center; padding: 3px 10px;
  border-radius: 999px; font-weight: 520; font-size: .76rem;
}
.celula-gap.ok { background: var(--ok-bg); color: var(--ok); }
.celula-gap.medio { background: var(--warn-bg); color: var(--warn); }
.celula-gap.alto { background: var(--err-bg); color: var(--err); }
.celula-gap.vazio { background: var(--surface-2); color: var(--muted); font-weight: 340; }

/* ---------- abas sublinhadas: padrão único (.abas-pg do ui-abas.js e as barras antigas .tabs/.tab) ---------- */
.tabs, .abas-pg {
  display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto; max-width: 100%;
  margin: 0 0 24px; padding: 0; box-shadow: inset 0 -1px 0 var(--line);
  scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
}
.tabs::-webkit-scrollbar, .abas-pg::-webkit-scrollbar { display: none; }
.tab, .abas-pg > [role="tab"] {
  flex: 0 0 auto; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  padding: 10px 14px; min-height: 42px; font-size: .9rem; font-weight: 440; color: var(--muted);
  border-radius: 0; font-family: var(--font-body); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color var(--mov-rapido), border-color var(--mov-rapido), background-color var(--mov-rapido);
}
.tab:hover, .abas-pg > [role="tab"]:hover { color: var(--text); }
.tab.ativa, .abas-pg > [role="tab"][aria-selected="true"] { color: var(--text); font-weight: 560; border-bottom-color: var(--accent); }
/* o contorno de foco fica por dentro: a barra corta o que passa da borda (rolagem lateral) */
.tab:focus-visible, .abas-pg > [role="tab"]:focus-visible { outline-offset: -2px; }
.abas-n {
  min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--text-2);
  font-size: .72rem; font-weight: 560; line-height: 20px; text-align: center;
}
.abas-painel[hidden] { display: none; }

/* ---------- indicadores (.kpi; .metrica é o nome antigo, com o mesmo desenho) ---------- */
.kpis, .metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(128px, 100%), 1fr)); gap: 8px 24px; margin: 0 0 28px; }
.kpi, .metrica {
  background: none; border: 0; border-top: 1px solid var(--line);
  border-radius: 0; padding: 14px 0 8px; min-width: 0;
}
.kpi-num, .metrica .num {
  font-size: 2.1rem; font-weight: 420; line-height: 1.12; letter-spacing: -.015em; color: var(--text);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.kpi-rot, .metrica .rot { font-size: .84rem; color: var(--muted); font-weight: 380; margin-top: 4px; line-height: 1.35; }
.kpi-var { font-size: .78rem; color: var(--muted); margin-top: 4px; }
.kpi-var.sobe { color: var(--ok); }
.kpi-var.desce { color: var(--err); }

/* ---------- cabeçalho de página ---------- */
.pg-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin: 0 0 28px; }
.pg-topo > div:first-child { min-width: 0; flex: 1 1 320px; }
.pg-titulo, .pg-topo h1 {
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 440; line-height: 1.15;
  letter-spacing: -.015em; color: var(--text); margin: 0; overflow-wrap: anywhere;
}
.pg-titulo[tabindex="-1"]:focus, .pg-topo h1[tabindex="-1"]:focus { outline: none; }
.pg-desc { color: var(--text-2); font-size: .95rem; margin: 6px 0 0; max-width: 64ch; }
.pg-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- seção plana (no lugar de um cartão que não agrupa de verdade) ---------- */
.secao { margin: 0 0 36px; min-width: 0; }
.secao-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.secao-cab h2 { font-size: var(--fs-l); font-weight: 560; line-height: 1.3; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.secao-desc { color: var(--muted); font-size: .86rem; margin: 10px 0 0; }

/* ---------- lista de linhas (título, apoio, estado e ação à direita) ---------- */
.lista-linhas { list-style: none; margin: 0; padding: 0; }
.lista-linhas > li {
  display: flex; align-items: center; gap: 14px; padding: 14px 0; min-width: 0;
  border-top: 1px solid var(--line-soft);
}
.lista-linhas > li:first-child { border-top: 0; }
.linha-ic { flex: 0 0 auto; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.linha-ic svg { width: 18px; height: 18px; }
.linha-ic.err { color: var(--err); }
.linha-txt { flex: 1; min-width: 0; }
.linha-titulo { font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.linha-apoio { font-size: .84rem; color: var(--muted); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.linha-estado { flex: 0 0 auto; }
.linha-fim { display: flex; gap: 4px; align-items: center; flex: 0 0 auto; position: relative; }

/* ---------- estado vazio: ícone discreto, uma frase, uma ação ---------- */
.estado-vazio { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 36px 16px; color: var(--text-2); }
.estado-vazio-ic { color: var(--muted); display: inline-flex; }
.estado-vazio-ic svg { width: 26px; height: 26px; }
.estado-vazio p { max-width: 44ch; font-size: .92rem; margin: 0; }

/* ---------- esqueleto de carregamento (parado: nada de animação em laço) ---------- */
.esqueleto { display: block; height: 12px; border-radius: 6px; background: var(--surface-2); animation: ui-aparece var(--mov) ease-out both; }
.esqueleto.titulo { height: 18px; width: 42%; }
.esqueleto.curto { width: 30%; }
.esqueleto.medio { width: 62%; }
.esqueleto-grupo { display: grid; gap: 12px; padding: 14px 0; }
.esqueleto-linha { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line-soft); }
.esqueleto-linha:first-child { border-top: 0; }

/* ---------- movimento: entrada de conteúdo (uma vez) ---------- */
@keyframes ui-entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ui-aparece { from { opacity: 0; } to { opacity: 1; } }
.ui-entra { animation: ui-entra 160ms var(--mov-curva) backwards; }

/* ---------- menu lateral dos painéis (gestor-layout.js e dono-layout.js) ---------- */
.gl-grupo, .dl-grupo { display: block; font-size: .76rem; font-weight: 500; color: var(--muted); padding: 18px 12px 6px; }
.gl-grupo:first-child, .dl-grupo:first-child { padding-top: 0; }
.gl-ic, .dl-ic { display: inline-flex; flex: none; }
.gl-ic svg, .dl-ic svg { width: 17px; height: 17px; }
.gl-abrir, .gl-fundo, .gl-rodape { display: none; }
.menu-painel .tab {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; white-space: normal;
  border: 0; border-radius: var(--radius-s); padding: 8px 12px; min-height: 38px;
  color: var(--text-2); font-weight: 400; font-size: .9rem; line-height: 1.3;
}
.menu-painel .tab:hover { background: var(--surface); color: var(--text); }
/* item ativo discreto: fundo suave e uma barra fina da cor de destaque */
.menu-painel .tab.ativa { background: var(--surface-2); color: var(--text); font-weight: 560; box-shadow: inset 2px 0 0 var(--accent); }
.menu-painel .tab.ativa .gl-ic, .menu-painel .tab.ativa .dl-ic { color: var(--accent); }
html:not([data-tema="claro"]) .menu-painel .tab.ativa .gl-ic, html:not([data-tema="claro"]) .menu-painel .tab.ativa .dl-ic { color: var(--blue-200); }
.menu-painel .tab:focus-visible { outline-offset: -2px; }
.gl-rodape img { height: 18px; width: auto; display: block; opacity: .6; }
@media (min-width: 1000px) {
  #app.gl-grade, #app.dl-grade { display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 44px; align-items: start; }
  /* avisos soltos no topo (cota de voz, fim do teste, e-mail pendente) ocupam a largura toda, nunca a coluna do menu */
  #app.gl-grade > #plano-banner, #app.gl-grade > .aviso, #app.dl-grade > .aviso { grid-column: 1 / -1; margin-bottom: 0; }
  .tabs.menu-painel {
    flex-direction: column; align-items: stretch; gap: 2px; overflow-x: visible; overflow-y: auto; box-shadow: none; margin: 0;
    position: sticky; top: 84px; max-height: calc(100vh - 104px);
  }
  .menu-painel .gl-rodape { display: block; margin-top: auto; padding: 28px 12px 4px; }
}
/* celular e tablet: o menu vira gaveta, aberta pelo botão com o nome da tela */
@media (max-width: 999px) {
  .gl-abrir {
    display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 20px; padding: 10px 14px; min-height: 44px;
    border-radius: var(--radius-s); border: 1px solid var(--line); background: transparent; color: var(--text);
    font: inherit; font-weight: 520; cursor: pointer; text-align: left;
  }
  .tabs.menu-painel {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 61; width: min(300px, 86vw); margin: 0; padding: 20px 12px 24px;
    flex-direction: column; align-items: stretch; gap: 2px; overflow-x: hidden; overflow-y: auto;
    background: var(--elevado); box-shadow: 1px 0 0 var(--line);
    transform: translateX(-102%); visibility: hidden;
    transition: transform var(--mov) var(--mov-curva), visibility 0s linear var(--mov);
  }
  .gl-aberto > .menu-painel { transform: none; visibility: visible; transition: transform var(--mov) var(--mov-curva), visibility 0s; }
  .gl-fundo { display: block; position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: opacity var(--mov); }
  .gl-aberto > .gl-fundo { opacity: 1; pointer-events: auto; }
  .menu-painel .tab { min-height: 44px; }
  .menu-painel .gl-rodape { display: block; padding: 24px 12px 0; }
}
html[data-tema="claro"] .menu-painel { --elevado: var(--bg); }

/* ---------- passos do candidato ---------- */
.passo {
  display: flex; align-items: center; gap: 18px;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--surface); padding: 18px 22px; margin-bottom: 12px;
  transition: border-color var(--mov);
}
.passo:hover { border-color: var(--line); }
.passo .icone {
  width: 40px; height: 40px; border-radius: var(--radius-s); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--blue-200);
}
.passo .icone svg { width: 20px; height: 20px; }
.passo .info { flex: 1; }
.passo .info .titulo { font-weight: 500; font-size: 1rem; }
.passo .info .sub { font-size: .82rem; color: var(--muted); font-weight: 340; margin-top: 2px; }

/* ---------- autoavaliação ---------- */
.comp-item { border-bottom: 1px solid var(--line-soft); padding: 18px 0; }
.comp-item:last-child { border-bottom: none; }
.comp-item .nome { font-weight: 460; margin-bottom: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.escala { display: flex; gap: 6px; flex-wrap: wrap; }
.escala button {
  border: 1px solid var(--line); background: transparent; cursor: pointer;
  border-radius: var(--radius-s); padding: 6px 12px; font-size: .8rem; font-weight: 400; min-height: 32px;
  color: var(--text-2); font-family: var(--font-body);
  transition: color var(--mov-rapido), border-color var(--mov-rapido), background-color var(--mov-rapido);
}
.escala button:hover { color: var(--text); border-color: var(--blue-250); }
.escala button.ativo { background: var(--accent); border-color: transparent; color: var(--accent-fg, #fff); font-weight: 520; }

/* ---------- modal ---------- */
.modal-fundo {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .66);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 48px 20px; z-index: 50; overflow-y: auto;
  animation: ui-aparece var(--mov-rapido) ease-out;
}
.modal {
  background: var(--navy-900); border: 1px solid var(--line);
  border-radius: var(--radius); max-width: 880px; width: 100%; padding: 32px;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .7);
  animation: ui-entra var(--mov) var(--mov-curva);
}
.modal .fechar { float: right; }
.modal .card { background: var(--surface); }

/* ---------- utilidades ---------- */
.oculto { display: none !important; }
.texto-centro { text-align: center; }
.mt { margin-top: 18px; }
.mb { margin-bottom: 18px; }
.linha-acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

/* ---------- pipeline kanban ---------- */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(215px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.kanban-col {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 12px; min-height: 180px;
  display: flex; flex-direction: column; gap: 8px;
}
.kanban-col.arrastando { border-color: var(--navy-400); background: var(--accent-suave); }
.kanban-col .titulo-col {
  font-size: .82rem; color: var(--text-2); font-weight: 560; display: flex; justify-content: space-between;
}
.kanban-card {
  background: var(--navy-900); border: 1px solid var(--line-soft);
  border-radius: var(--radius-s); padding: 10px 12px; cursor: grab;
  transition: border-color var(--mov-rapido);
}
.kanban-card:hover { border-color: var(--line); }
.kanban-card .nome-card { font-weight: 500; font-size: .88rem; }
.kanban-card .sub-card { font-size: .76rem; color: var(--muted); margin-top: 2px; }
.kanban-card .match-card { font-family: var(--font-display); font-weight: 560; color: var(--blue-200); font-size: .84rem; }
.kanban-card select {
  margin-top: 8px; padding: 5px 8px; font-size: .76rem; border-radius: 6px;
}

/* ---------- timeline ---------- */
.timeline { position: relative; margin: 14px 0 4px 8px; padding-left: 20px; border-left: 1px solid var(--line); }
.timeline-item { position: relative; padding-bottom: 16px; }
.timeline-item::before {
  content: ""; position: absolute; left: -24.5px; top: 7px;
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--muted);
}
.timeline-item.destaque::before { background: var(--navy-400); box-shadow: 0 0 0 3px var(--accent-suave); }
.timeline-item .quando { font-size: .76rem; color: var(--muted); }
.timeline-item .texto-evento { font-size: .88rem; color: var(--text-2); margin-top: 2px; }
.timeline-item .texto-evento strong { color: var(--text); font-weight: 500; }

/* ---------- vagas (portal) ---------- */
.vaga-card {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--surface); padding: 22px 26px; margin-bottom: 12px; flex-wrap: wrap;
  transition: border-color var(--mov);
}
.vaga-card:hover { border-color: var(--line); }
.vaga-card .info-vaga { flex: 1; min-width: 240px; }
.vaga-card h2 { font-size: 1.15rem; margin-bottom: 4px; font-weight: 560; }
.vaga-card .meta { font-size: .84rem; color: var(--muted); }
.vaga-fatos { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.vaga-fato { font-size: .8rem; padding: 3px 9px; border-radius: 6px; color: var(--text-2); border: 1px solid var(--line); }
.vaga-fato.vaga-salario { font-weight: 600; color: var(--text); }
/* descrição em até 3 linhas no cartão; o texto inteiro fica em Ver detalhes */
.vaga-resumo { margin: 8px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vaga-eeo { margin: 18px 4px 0; font-size: .76rem; line-height: 1.5; color: var(--muted); }

.hero { text-align: center; padding: 56px 24px 40px; }
.hero img.simbolo { height: 56px; margin-bottom: 26px; opacity: .95; }
.hero h2 {
  font-family: var(--font-display); font-size: 2.4rem; font-weight: 440;
  line-height: 1.15; letter-spacing: -.02em; color: var(--text);
  margin-bottom: 14px;
}
.hero p { color: var(--text-2); max-width: 520px; margin: 0 auto; font-size: 1rem; font-weight: 340; }

.icone-titulo { display: inline-flex; align-items: center; gap: 10px; }
.icone-titulo svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }

.selo-final {
  width: 60px; height: 60px; border-radius: 999px; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ok-bg); color: var(--ok);
}
.selo-final svg { width: 28px; height: 28px; }

/* ---------- ajustes para celular ---------- */
@media (max-width: 540px) {
  .container { padding: 20px 14px 64px; }
  .card { padding: 20px 16px; }
  .modal { padding: 24px 18px; }
  .topbar .inner { padding: 10px 14px; }
  .topbar .brand img { height: 24px; }
  /* 375px: os botões do topo quebram linha em vez de criar rolagem lateral */
  .topbar .actions { flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
  .topbar .actions .btn.small { padding: 5px 10px; }
  code { overflow-wrap: anywhere; word-break: break-word; }
  .hero { padding: 36px 14px 24px; }
  .hero h2 { font-size: 1.7rem; }
  .hero img.simbolo { height: 44px; margin-bottom: 18px; }
  .disc-opcao { grid-template-columns: auto auto; justify-content: start; padding: 13px 14px; }
  .disc-opcao .palavra { grid-column: 1 / -1; }
  .perfil-barra { grid-template-columns: 92px 1fr 44px; gap: 8px; }
  .perfil-barra .rotulo { font-size: .76rem; }
  .match-geral .match-num { font-size: 2.6rem; }
  /* passos do candidato: selo Concluído e botão (Nova tentativa, Refazer) descem de linha
     em vez de alargar a página no celular */
  .passo { flex-wrap: wrap; gap: 12px 16px; padding: 16px; }
  .passo .info { flex: 1 1 170px; min-width: 0; }
  /* minmax(0, 1fr): valores longos ("US$ 6,45", "$1,234") quebram dentro do cartão
     em vez de alargar a página no celular (Relatórios, custo da triagem por voz) */
  .metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; }
  .metrica { min-width: 0; }
  .metrica .num { font-size: 1.75rem; overflow-wrap: anywhere; }
  .kpi-num { font-size: 1.75rem; }
  /* abas numa linha só no celular, com rolagem lateral suave e sem barra de rolagem à vista */
  .tabs, .abas-pg { gap: 0; margin-bottom: 20px; }
  .tab, .abas-pg > [role="tab"] { padding: 10px 12px; }
  .pg-topo { margin-bottom: 22px; }
  .pg-titulo, .pg-topo h1 { font-size: 1.55rem; }
  .pg-acoes, .pg-acoes > .btn { width: 100%; }
  .lista-linhas > li { flex-wrap: wrap; gap: 8px 12px; }
  /* celular: as ações descem para baixo do texto, alinhadas à direita */
  .lista-linhas > li > .linha-txt { flex: 1 1 calc(100% - 40px); }
  .linha-fim { margin-left: auto; }
  .kanban { grid-auto-columns: minmax(200px, 82vw); }
  .vaga-card { padding: 18px 16px; }
}

@media print {
  .topbar, .btn, .tabs, .abas-pg, .no-print { display: none !important; }
  body { background: #fff; color: #111; }
  .card { border: 1px solid #ddd; page-break-inside: avoid; background: #fff; }
  .perfil-barra .rotulo, .card .desc, table.tabela td, .lista-simples { color: #333; }
  .card h2, .perfil-destaque .titulo, table.tabela td strong { color: #101B37; }
  .perfil-destaque { background: #f4f6fa; border-color: #ddd; }
}

/* ---------- landing page ---------- */
.btn.big { padding: 13px 28px; font-size: .98rem; border-radius: 10px; }

.landing .container { max-width: 1080px; }
.ld-glow {
  position: fixed; border-radius: 50%; pointer-events: none; z-index: 0;
  filter: blur(90px); opacity: .55;
}
.ld-glow-1 { width: 640px; height: 640px; top: -260px; right: -160px;
  background: radial-gradient(circle, rgba(59, 103, 202, .38), transparent 70%); }
.ld-glow-2 { width: 520px; height: 520px; top: 46%; left: -240px;
  background: radial-gradient(circle, rgba(40, 73, 142, .32), transparent 70%); }
.landing .container > * { position: relative; z-index: 1; }

.ld-eyebrow {
  display: inline-block; font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue-200); font-weight: 480;
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px;
  background: var(--surface); margin-bottom: 22px;
}
.ld-hero { text-align: center; padding: 72px 0 30px; }
.ld-hero h2 {
  font-size: clamp(2.4rem, 6vw, 4.1rem); line-height: 1.08;
  letter-spacing: -.015em; margin-bottom: 20px;
}
.ld-grad {
  background: linear-gradient(100deg, #9BB9DD, #5B84DB 45%, #3B67CA);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ld-hero p { max-width: 620px; margin: 0 auto; color: var(--text-2); font-size: 1.06rem; }
.ld-cta { justify-content: center; margin-top: 34px; }

.ld-mock { display: flex; justify-content: center; margin: 44px 0 10px; perspective: 1200px; }
.ld-mock-janela {
  width: 100%; max-width: 780px; border-radius: 22px; overflow: hidden;
  border: 1px solid var(--line); background: rgba(11, 17, 34, .82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .5), 0 0 0 1px rgba(155, 185, 221, .04),
    0 0 120px rgba(59, 103, 202, .18);
}
.ld-mock-topo { display: flex; gap: 7px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }
.ld-mock-topo span { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-2); }
.ld-mock-corpo { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; padding: 26px 30px 30px; }
.ld-mock-rot { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; font-weight: 460; }
.ld-mock-match { font-family: var(--font-display); font-size: 2.6rem; font-weight: 650; line-height: 1; margin-bottom: 8px; }
.ld-mock-barra { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-bottom: 18px; }
.ld-mock-barra i { display: block; height: 100%; background: var(--accent-grad); border-radius: 999px; }
.ld-mock-linha { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; }
.ld-mock-linha span { flex: 0 0 108px; font-size: .78rem; color: var(--text-2); }
.ld-mock-linha i { flex: 1; height: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.ld-mock-linha b { display: block; height: 100%; background: var(--accent-grad); border-radius: 999px; }
.ld-mock-etapa {
  display: flex; justify-content: space-between; align-items: center;
  border: 1px solid var(--line-soft); border-radius: 10px; padding: 8px 14px;
  margin-bottom: 7px; font-size: .84rem; color: var(--text-2); background: var(--surface);
}
.ld-mock-etapa b { font-family: var(--font-display); color: var(--text); }
.ld-mock-etapa.ativo { border-color: rgba(91, 132, 219, .45); color: var(--text);
  background: rgba(59, 103, 202, .12); }
.ld-mock-codigo { display: flex; gap: 8px; }
.ld-mock-codigo span {
  width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; font-family: var(--font-display); font-weight: 650;
  color: #fff; font-size: 1rem;
}

.ld-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin: 46px 0 10px; text-align: center;
}
.ld-stats > div {
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--surface); padding: 22px 14px;
}
.ld-stats b { display: block; font-family: var(--font-display); font-size: 1.9rem; font-weight: 650; }
.ld-stats span { font-size: .8rem; color: var(--text-2); }

.ld-secao { margin-top: 84px; text-align: center; }
.ld-secao .grid { text-align: left; }
.ld-titulo { font-size: clamp(1.5rem, 3.4vw, 2.1rem); letter-spacing: -.01em; margin-bottom: 30px; }

.ld-recurso { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.ld-recurso:hover {
  transform: translateY(-4px); border-color: rgba(91, 132, 219, .4);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .35), 0 0 44px rgba(59, 103, 202, .10);
}

.ld-passos h3 { margin-bottom: 18px; }
.ld-passo { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px;
  color: var(--text-2); font-size: .93rem; }
.ld-passo span {
  flex: 0 0 28px; height: 28px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; background: var(--accent-grad); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: .82rem; margin-top: 1px;
}

.ld-acesso { padding: 36px 26px; transition: transform .25s ease, border-color .25s ease; }
.ld-acesso:hover { transform: translateY(-4px); border-color: rgba(91, 132, 219, .4); }
.ld-acesso-icone { display: flex; justify-content: center; margin-bottom: 14px; }
.ld-acesso-icone svg { width: 30px; height: 30px; stroke: var(--blue-200); }

.ld-final {
  margin-top: 90px; text-align: center; padding: 60px 30px;
  border: 1px solid var(--line); border-radius: 26px;
  background:
    radial-gradient(600px 300px at 50% -40%, rgba(59, 103, 202, .28), transparent 70%),
    var(--surface);
}
.ld-final .simbolo { width: 44px; opacity: .9; margin-bottom: 18px; }
.ld-final h2 { font-size: clamp(1.5rem, 3.6vw, 2.2rem); margin-bottom: 10px; }
.ld-final p { color: var(--text-2); margin-bottom: 6px; }

.revela { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.revela.visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .revela { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 760px) {
  .ld-mock-corpo { grid-template-columns: 1fr; }
  .ld-stats { grid-template-columns: repeat(2, 1fr); }
  .ld-hero { padding-top: 44px; }
}

/* ---------- landing: faixa de capacidades ---------- */
.ld-marquee {
  margin: 64px -32px 0; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ld-marquee-trilho { display: flex; gap: 12px; width: max-content; animation: ld-rolar 36s linear infinite; }
.ld-marquee-trilho span {
  white-space: nowrap; font-size: .82rem; color: var(--text-2); padding: 9px 18px;
  border: 1px solid var(--line-soft); border-radius: 999px; background: var(--surface);
}
@keyframes ld-rolar { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ld-marquee-trilho { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } }

/* ---------- landing: vitrine bento ---------- */
.ld-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; text-align: left; }
.ld-bento-item {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 20px;
  padding: 24px 26px; transition: transform .25s ease, border-color .25s ease;
}
.ld-bento-item:hover { transform: translateY(-3px); border-color: rgba(91, 132, 219, .4); }
.ld-b-matriz { grid-column: span 3; }
.ld-b-radar { grid-column: span 3; }
.ld-b-funil { grid-column: span 2; }
.ld-b-email { grid-column: span 2; }
.ld-b-ia { grid-column: span 2; }
.ld-bento-desc { font-size: .84rem; color: var(--text-2); margin: 2px 0 14px; }

.ld-mini-aderencia { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 14px; }
.ld-mini-aderencia b { font-family: var(--font-display); font-size: 2rem; font-weight: 650; }
.ld-mini-aderencia span { font-size: .78rem; color: var(--text-2); }
.ld-mini-aderencia i { font-style: normal; margin-left: auto; }
.ld-mini-tabela div {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--line-soft); font-size: .82rem;
}
.ld-mini-tabela div:last-child { border-bottom: none; }
.ld-mini-tabela span { flex: 1; color: var(--text-2); }
.ld-mini-tabela em { font-style: normal; color: var(--muted); font-size: .74rem; }
.ld-mini-tabela u {
  text-decoration: none; font-size: .68rem; font-weight: 520; padding: 3px 9px; border-radius: 999px;
}
.ld-mini-tabela u.ok { background: rgba(66, 148, 108, .16); color: #7fc9a5; }
.ld-mini-tabela u.medio { background: rgba(186, 148, 66, .14); color: #d9b96e; }
.ld-mini-tabela u.alto { background: rgba(186, 84, 74, .14); color: #de8b82; }
.ld-mini-plano { margin-top: 12px; font-size: .74rem; color: var(--muted); }

.ld-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 38px; font-style: normal;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: .82rem; font-weight: 600; color: #fff;
}
.av-1 { background: linear-gradient(135deg, #3258AB, #3B67CA); }
.av-2 { background: linear-gradient(135deg, #182B54, #5E7086); }
.av-3 { background: linear-gradient(135deg, #5E7086, #85A0BF); }
.av-4 { background: linear-gradient(135deg, #3B67CA, #85A0BF); }

.ld-mini-sugestao { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.ld-mini-sugestao:last-child { border-bottom: none; }
.ld-mini-sugestao b { display: block; font-size: .88rem; font-weight: 480; }
.ld-mini-sugestao span { font-size: .74rem; color: var(--muted); }
.ld-mini-sugestao div { flex: 1; }
.ld-match-badge {
  font-style: normal; font-family: var(--font-display); font-weight: 650; font-size: .95rem;
  background: rgba(59, 103, 202, .16); color: var(--blue-200); padding: 6px 12px; border-radius: 999px;
}

.ld-mini-funil div { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ld-mini-funil span { flex: 0 0 86px; font-size: .76rem; color: var(--text-2); }
.ld-mini-funil i { display: block; height: 9px; border-radius: 999px; background: var(--accent-grad); opacity: .85; }
.ld-mini-funil b { font-family: var(--font-display); font-size: .84rem; flex: 0 0 22px; text-align: right; }

.ld-mini-email { border: 1px solid var(--line-soft); border-radius: 14px; padding: 14px 16px; background: rgba(7, 11, 20, .35); }
.ld-mini-email-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ld-mini-email-topo b { display: block; font-size: .84rem; }
.ld-mini-email-topo span { font-size: .72rem; color: var(--muted); }
.ld-mini-email p { font-size: .8rem; color: var(--text-2); margin: 0 0 12px; line-height: 1.5; }
.ld-mini-email p strong { color: var(--text); }
.ld-mini-email-btn {
  display: inline-block; font-size: .74rem; font-weight: 500; padding: 7px 14px;
  border-radius: 999px; background: var(--accent-grad); color: #fff;
}

.ld-mini-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ld-mini-chips span {
  font-size: .76rem; color: var(--text-2); padding: 7px 13px;
  border: 1px solid var(--line-soft); border-radius: 999px; background: rgba(7, 11, 20, .3);
}

/* ---------- landing: depoimentos ---------- */
.ld-depos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: left; }
.ld-depo {
  position: relative; background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 14px;
  transition: transform .25s ease, border-color .25s ease;
}
.ld-depo:hover { transform: translateY(-3px); border-color: rgba(91, 132, 219, .4); }
.ld-depo-aspas { position: absolute; top: 20px; right: 22px; opacity: .16; }
.ld-depo-aspas svg { width: 34px; height: 34px; }
.ld-estrelas { display: flex; gap: 3px; color: var(--blue-200); }
.ld-estrelas svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.ld-depo p { font-size: .92rem; color: var(--text-2); line-height: 1.65; margin: 0; flex: 1; }
.ld-depo-autor { display: flex; align-items: center; gap: 12px; }
.ld-depo-autor b { display: block; font-size: .88rem; font-weight: 500; }
.ld-depo-autor span { font-size: .76rem; color: var(--muted); }

@media (max-width: 900px) {
  .ld-bento { grid-template-columns: 1fr 1fr; }
  .ld-b-matriz, .ld-b-radar, .ld-b-funil, .ld-b-email, .ld-b-ia { grid-column: span 2; }
  .ld-depos { grid-template-columns: 1fr; }
}

/* ---------- landing: seção do autor ---------- */
.ld-autor {
  display: grid; grid-template-columns: 1fr 1.35fr; gap: 48px; align-items: center;
  text-align: left; background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: 24px; padding: 44px; overflow: hidden; position: relative;
}
.ld-autor::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(520px 320px at 12% 20%, rgba(59, 103, 202, .14), transparent 70%);
}
.ld-autor-foto { position: relative; }
.ld-autor-foto img {
  display: block; width: 100%; border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  -webkit-mask-image: linear-gradient(180deg, #000 78%, rgba(0,0,0,.45));
          mask-image: linear-gradient(180deg, #000 78%, rgba(0,0,0,.45));
}
.ld-autor-texto h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -.01em; margin: 6px 0 14px; }
.ld-autor-texto p { color: var(--text-2); font-size: .95rem; margin-bottom: 12px; }
.ld-autor-frase {
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 560;
  border-left: 3px solid var(--blue-500); padding: 6px 0 6px 18px; margin: 20px 0 18px;
}
.ld-autor-pilares { display: flex; flex-wrap: wrap; gap: 8px; }
.ld-autor-pilares span {
  font-size: .78rem; color: var(--text-2); padding: 8px 15px;
  border: 1px solid var(--line-soft); border-radius: 999px; background: rgba(7, 11, 20, .3);
}
@media (max-width: 900px) {
  .ld-autor { grid-template-columns: 1fr; padding: 26px; gap: 26px; }
  .ld-autor-foto { max-width: 380px; margin: 0 auto; }
}

/* ---------- botão de tema e bandeiras de idioma ---------- */
.btn-tema {
  width: 34px; height: 34px; border-radius: var(--radius-s); cursor: pointer;
  background: transparent; border: 1px solid transparent; color: var(--text-2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: color var(--mov-rapido), background-color var(--mov-rapido);
}
.btn-tema:hover { color: var(--text); background: var(--surface-2); }
.btn-tema svg { width: 17px; height: 17px; }
.ld-bandeiras { display: flex; gap: 7px; align-items: center; margin-right: 4px; }
.ld-bandeiras button {
  padding: 0; border: 1px solid var(--line); border-radius: 5px; cursor: pointer;
  background: none; line-height: 0; opacity: .55; transition: opacity .2s ease, transform .2s ease;
}
.ld-bandeiras button:hover { opacity: 1; transform: translateY(-1px); }
.ld-bandeiras button.ativa { opacity: 1; border-color: var(--blue-250); box-shadow: 0 0 0 2px rgba(91, 132, 219, .25); }
.ld-bandeiras svg { width: 24px; height: 17px; border-radius: 4px; display: block; }

/* =====================================================================
   TEMA CLARO: marfim suave (fundo quente, superfícies quase brancas, texto grafite)
   ===================================================================== */
html[data-tema="claro"] {
  --bg: #F6F3EC;
  --text: #1C1D21;
  --text-2: #4B4D54;
  --muted: #62646A; /* 5.3:1 sobre o fundo marfim (WCAG AA) */
  --link: var(--navy-500);
  /* o azul claro dos destaques (selos, títulos de grupo, ícones) vira azul escuro no fundo claro */
  --blue-200: #28498E;
  --line: rgba(30, 28, 22, .15);
  --borda-campo: rgba(30, 28, 22, .5); /* contorno dos campos: 3:1 no fundo claro (WCAG 1.4.11) */
  --line-soft: rgba(30, 28, 22, .09);
  --surface: #FFFEFB;
  --surface-2: rgba(40, 34, 20, .055);
  --elevado: #FFFEFB;
  --accent-suave: rgba(50, 88, 171, .1);
  --topbar-bg: rgba(246, 243, 236, .88);
  /* tons escurecidos para 4.5:1 nos selos (badge) sobre o fundo claro */
  --ok: #26704B; --ok-bg: rgba(38, 112, 75, .1);
  --warn: #7A5D24; --warn-bg: rgba(122, 93, 36, .12);
  --err: #9E4545; --err-bg: rgba(158, 69, 69, .1);
}
html[data-tema="claro"] body { background: var(--bg); }
/* números grandes: texto grafite no tema claro (o degradê antigo sumia no cartão branco) */
html[data-tema="claro"] .metrica .num,
html[data-tema="claro"] .match-geral .match-num { color: var(--text); }
html[data-tema="claro"] .topbar .brand img,
html[data-tema="claro"] .gl-rodape img,
html[data-tema="claro"] .hero .simbolo,
html[data-tema="claro"] .ld-final .simbolo { filter: invert(.88); }
html[data-tema="claro"] .ld-bento-item,
html[data-tema="claro"] .ld-depo,
html[data-tema="claro"] .ld-autor,
html[data-tema="claro"] .ld-mock-janela {
  box-shadow: 0 10px 34px rgba(30, 28, 22, .06);
}
html[data-tema="claro"] .ld-glow { opacity: .35; }
html[data-tema="claro"] .ld-mini-email,
html[data-tema="claro"] .ld-mini-chips span,
html[data-tema="claro"] .ld-autor-pilares span,
html[data-tema="claro"] .ld-passo span { background: rgba(30, 28, 22, .05); }
html[data-tema="claro"] .ld-autor-foto img { box-shadow: 0 18px 44px rgba(30, 28, 22, .22); }
html[data-tema="claro"] pre { background: rgba(30, 28, 22, .05) !important; }
html[data-tema="claro"] .ld-marquee-trilho span { background: #FFFFFF; }
html[data-tema="claro"] .ld-stats > div { background: #FFFFFF; }
html[data-tema="claro"] .ld-mock-topo span { background: rgba(30, 28, 22, .14); }

/* tema claro: campos, janelas e cartões do kanban tinham fundo escuro fixo
   (texto escuro sobre cinza escuro, contraste abaixo de 3:1) */
html[data-tema="claro"] input[type=text], html[data-tema="claro"] input[type=email],
html[data-tema="claro"] input[type=password], html[data-tema="claro"] input[type=number],
html[data-tema="claro"] input[type=date], html[data-tema="claro"] input[type=time],
html[data-tema="claro"] input[type=tel], html[data-tema="claro"] input[type=url],
html[data-tema="claro"] input[type=search], html[data-tema="claro"] select,
html[data-tema="claro"] textarea { background: #FFFFFF; color: var(--text); }
html[data-tema="claro"] select option { background: #FFFFFF; color: var(--text); }
html[data-tema="claro"] .modal { background: var(--elevado); box-shadow: 0 24px 60px -30px rgba(30, 28, 22, .35); }
html[data-tema="claro"] .modal-fundo { background: rgba(30, 28, 22, .42); }
html[data-tema="claro"] .kanban-card { background: #FFFFFF; }
html[data-tema="claro"] .gl-fundo { background: rgba(30, 28, 22, .38); }

/* ---------- app instalável e notificações (app-pwa.js, gestor-app.js, portal-app.js) ---------- */
.app-faixa { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 1000;
  display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); box-sizing: border-box;
  padding: 10px 12px 10px 16px; border-radius: var(--radius); background: var(--navy-900, #14151A); color: #fff;
  border: 1px solid var(--line); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6); font-size: .9rem; }
.app-folha-fundo { position: fixed; inset: 0; z-index: 1001; background: rgba(8, 14, 30, .6); display: flex;
  align-items: flex-end; justify-content: center; padding: 16px; box-sizing: border-box; }
.app-folha { width: 100%; max-width: 440px; background: var(--bg); color: var(--text); border-radius: var(--radius);
  padding: 20px; border: 1px solid var(--line); max-height: 85vh; overflow: auto; }
.app-folha h2 { font-size: 1.1rem; margin: 0 0 10px; }
.app-folha ol { margin: 0 0 12px 20px; padding: 0; line-height: 1.6; }
.app-folha-nota { font-size: .85rem; color: var(--muted); }
.app-folha-aviso { background: var(--warn-bg); color: var(--warn); border-radius: 10px; padding: 8px 10px; font-size: .85rem; }
.app-topicos { display: grid; gap: 6px; margin: 10px 0; }
.app-topicos label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.app-topicos input { width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px; }
.app-silencio { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.app-silencio select { width: auto; min-width: 96px; }
.app-aparelho { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.app-aparelho:last-child { border-bottom: 0; }
.app-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 8px; }
.app-acoes:empty { display: none; }
#portal-app { padding-top: 0; }
.av-item { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 12px 0;
  border-bottom: 1px solid var(--line-soft); }
.av-item:last-child { border-bottom: 0; }
.av-item .av-txt { min-width: 0; }
.av-item strong { display: block; overflow-wrap: anywhere; }
.av-item small { display: block; color: var(--muted); font-size: .8rem; margin-top: 3px; }
.av-legal { background: var(--warn-bg); color: var(--warn); border-radius: 10px; padding: 10px 12px; font-size: .84rem; margin: 10px 0; }
.av-tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.av-tabela th, .av-tabela td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line-soft); }
.av-link-edit { width: 100%; margin-top: 6px; }
@media (max-width: 520px) { .av-item { flex-direction: column; } .av-item .btn { align-self: flex-start; } }

/* "Como usar a matriz de gaps" (render.js htmlAjudaMatriz) e perguntas sugeridas por gap */
.ajuda-matriz { border: 1px solid var(--line-soft); border-radius: var(--radius-s); background: var(--surface-2); margin: 12px 0 14px; }
.ajuda-matriz > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; list-style: none; }
.ajuda-matriz > summary::-webkit-details-marker { display: none; }
.ajuda-matriz > summary::after { content: "+"; margin-left: auto; color: var(--muted); font-weight: 400; }
.ajuda-matriz[open] > summary::after { content: "\2212"; }
.ajuda-matriz > summary svg { width: 18px; height: 18px; flex: none; }
.ajuda-matriz-corpo { padding: 0 16px 14px; font-size: .88rem; line-height: 1.5; }
.ajuda-matriz-corpo h4 { margin: 12px 0 6px; font-size: .9rem; }
.ajuda-matriz-passos { margin: 0; padding-left: 20px; }
.ajuda-matriz-passos li { margin: 4px 0; }
.ajuda-matriz-legenda { margin: 0; padding-left: 18px; }
.ajuda-matriz-legenda li { margin: 5px 0; overflow-wrap: anywhere; }
.ajuda-matriz-legenda .celula-gap { display: inline-block; min-width: 0; }
.perguntas-gap { margin: 12px 0; }
.perguntas-gap > summary { cursor: pointer; font-weight: 600; }
.dica-confirmar { font-size: .84rem; color: var(--muted); margin: 10px 0 0; }

/* Configurações como menu (gestor-config-secoes.js): uma seção por vez, cartões recolhidos no título.
   Menu lateral no computador, fileira de botões no celular. */
.cfg-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 24px; align-items: start; }
.cfg-indice { position: sticky; top: calc(var(--cfg-topo, 70px) + 12px); display: flex; flex-direction: column; gap: 10px;
  max-height: calc(100vh - var(--cfg-topo, 70px) - 24px); overflow-y: auto; padding: 8px; border: 1px solid var(--line-soft);
  border-radius: var(--radius-s); background: var(--surface); }
.cfg-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cfg-chips a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--text-2);
  text-decoration: none; font-size: .9rem; transition: background .15s, color .15s; }
.cfg-chips a:hover, .cfg-chips a:focus-visible { background: var(--surface-2); color: var(--text); }
.cfg-chips a[aria-current="page"] { background: var(--surface-2); color: var(--text); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent, #3b67ca); }
.cfg-chips .cfg-ic svg { width: 17px; height: 17px; }
.cfg-chip-txt { flex: 1; min-width: 0; }
.cfg-n:not(:empty) { font-size: .72rem; padding: 1px 7px; border-radius: 999px; background: var(--accent, #3b67ca); color: var(--accent-fg, #fff); }
.cfg-secoes { min-width: 0; }
.cfg-busca { margin: 0 0 14px; }
.cfg-busca input { width: 100%; margin: 0; }
.cfg-layout:not(.buscando) .cfg-secao:not(.ativa) { display: none; }
.cfg-secao { margin-bottom: 18px; scroll-margin-top: calc(var(--cfg-topo, 70px) + 12px); }
.cfg-layout:not(.buscando) .cfg-secao.ativa { animation: cfg-entra .18s ease-out; }
@keyframes cfg-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cfg-item { scroll-margin-top: calc(var(--cfg-topo, 70px) + 16px); }
.cfg-secao-cab { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.cfg-secao-cab .cfg-ic svg { width: 24px; height: 24px; }
.cfg-ic { display: inline-flex; flex: none; }
.cfg-ic svg { width: 20px; height: 20px; color: var(--text-2); }
.cfg-tit { flex: 1; min-width: 0; display: flex; flex-direction: column; margin: 0; font-size: 1rem; }
.cfg-tit:focus { outline: none; }
.cfg-tit > span { font-weight: 650; font-size: 1.2rem; }
.cfg-tit small { color: var(--muted); font-size: .82rem; font-weight: 400; margin-top: 2px; overflow-wrap: anywhere; }
.cfg-secao-acoes { display: flex; gap: 4px; flex-wrap: wrap; }
.cfg-layout.buscando .cfg-secao-acoes { display: none; }
.cfg-item.cfg-filtrado, .cfg-item .card.cfg-filtrado { display: none; }
/* cartão recolhido: só o título, que abre com um clique */
.cfg-secao-corpo .card { margin-bottom: 10px; }
.card.cfg-recolhivel > .cfg-card-tit { cursor: pointer; user-select: none; position: relative; padding-right: 30px; width: 100%; box-sizing: border-box; }
.card.cfg-recolhivel > .cfg-card-tit::after { content: ""; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform .15s; }
.cfg-layout:not(.buscando) .card.cfg-fechado > .cfg-card-tit::after { transform: translateY(-40%) rotate(-45deg); }
/* 2026-11-11: o título é um <h2>/<h3> com um <button> dentro (cfg-card-btn), sem aparência de botão */
.card.cfg-recolhivel > .cfg-card-tit > .cfg-card-btn { font: inherit; color: inherit; letter-spacing: inherit; text-align: left; background: none;
  border: 0; padding: 0; margin: 0; cursor: inherit; display: inline-flex; align-items: center; gap: inherit; flex: 1 1 9em; min-width: 0; max-width: 100%; }
.card.cfg-recolhivel > .cfg-card-tit:not(.icone-titulo) > .cfg-card-btn { display: inline; }
.card.cfg-recolhivel > .cfg-card-tit > .cfg-card-btn:focus-visible { outline: 2px solid var(--blue-200); outline-offset: 4px; border-radius: 6px; }
.cfg-layout:not(.buscando) .card.cfg-fechado > :not(.cfg-card-tit):not(.cfg-resumo):not(.cfg-resumo-proprio) { display: none !important; }
/* reforma de 2026-11-11: uma linha do que é (registro CFG_CARTOES), selo de estado da Central e subtítulos */
.cfg-resumo { color: var(--muted); font-size: .86rem; margin: 4px 0 0; }
.card.cfg-recolhivel:not(.cfg-fechado) > .cfg-resumo, .cfg-layout.buscando .cfg-resumo { display: none; }
.cfg-layout:not(.buscando) .card.cfg-fechado > .cfg-resumo-proprio { margin: 4px 0 0; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfg-layout:not(.buscando) .card.cfg-fechado > .cfg-resumo + .cfg-resumo-proprio { display: none !important; }
.cfg-card-tit .cfg-selo { margin-left: 8px; font-size: .68rem; vertical-align: middle; white-space: nowrap; }
.card.cfg-recolhivel > .cfg-card-tit.icone-titulo { flex-wrap: wrap; row-gap: 4px; }
.card.cfg-recolhivel > .cfg-card-tit.icone-titulo > svg, .card.cfg-recolhivel > .cfg-card-tit.icone-titulo > .cfg-card-btn > svg { flex: none; }
.card.cfg-recolhivel > .cfg-card-tit.icone-titulo > span:not(.cfg-selo),
.card.cfg-recolhivel > .cfg-card-tit.icone-titulo > .cfg-card-btn > span { flex: 1 1 9em; min-width: 0; }
.cfg-grupo-tit { font-size: .84rem; color: var(--muted); font-weight: 600; margin: 18px 0 8px; }
.cfg-grupo:first-child .cfg-grupo-tit { margin-top: 0; }
.cfg-grupo.oculto { display: none; }
.cfg-n.cfg-n-falta:not(:empty) { background: var(--warn-bg); color: var(--warn); }
.cfg-inicio { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.cfg-area { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--text); text-decoration: none; min-width: 0; }
.cfg-area:hover, .cfg-area:focus-visible { border-color: var(--blue-250); background: var(--surface-2); }
.cfg-area .cfg-ic svg { width: 22px; height: 22px; }
.cfg-area-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cfg-area-txt small { color: var(--muted); font-size: .8rem; line-height: 1.35; overflow-wrap: anywhere; }
.cfg-area-txt .badge { align-self: flex-start; margin-top: 4px; }
.cfg-fora-lista { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cfg-fora-lista li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between;
  padding: 8px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-s); }
.cfg-fora-info { flex: 1 1 220px; min-width: 0; }
.cfg-fora-info .badge { margin-left: 6px; }
.cfg-layout:not(.buscando) .card.cfg-fechado { padding-top: 14px; padding-bottom: 14px; }
.cfg-layout:not(.buscando) .card.cfg-fechado > .cfg-card-tit { margin: 0; }
.card.cfg-recolhivel:hover { border-color: var(--blue-250); }
@media (max-width: 900px) {
  .cfg-layout { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cfg-indice { top: var(--cfg-topo, 60px); z-index: 30; background: var(--bg); padding: 8px 0; max-height: none; overflow: visible;
    border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  .cfg-chips { flex-direction: row; overflow-x: auto; gap: 6px; scrollbar-width: none; padding-bottom: 2px; }
  .cfg-chips::-webkit-scrollbar { display: none; }
  .cfg-chips a { white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: .82rem; gap: 6px; }
  .cfg-chips a[aria-current="page"] { box-shadow: none; border-color: var(--accent, #3b67ca); }
  .cfg-chips .cfg-ic { display: none; }
  .cfg-secao-cab { flex-wrap: wrap; gap: 8px 10px; }
  .cfg-secao-cab .cfg-tit { flex: 1 1 calc(100% - 40px); }
  .cfg-tit > span { font-size: 1.08rem; }
  .cfg-secao-acoes { width: 100%; justify-content: flex-end; }
  .cfg-secao, .cfg-item { scroll-margin-top: calc(var(--cfg-topo, 60px) + 72px); } /* abaixo da fileira de botões */
  .cfg-inicio { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cfg-area { padding: 12px 14px; }
  .cfg-layout:not(.buscando) .card.cfg-fechado > .cfg-resumo-proprio { white-space: normal; }
}

/* Relatórios: período em cada número e "Como é calculado" */
.metrica-periodo { font-size: .72rem; color: var(--muted); margin-top: 4px; overflow-wrap: anywhere; }
.como-calc { display: inline-block; margin-left: 6px; vertical-align: middle; text-transform: none; letter-spacing: normal; }
.como-calc > summary { list-style: none; cursor: pointer; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line);
  color: var(--text-2); font-size: .7rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.como-calc > summary::-webkit-details-marker { display: none; }
/* WCAG 2.5.8: o círculo continua com 18 px, mas a área de toque vai a 24x24 */
.como-calc > summary { position: relative; }
.como-calc > summary::after { content: ""; position: absolute; inset: -4px; }
/* seletor de idioma do topo (PT EN ES): 23,5 px de altura com o texto pequeno; 24 px no mínimo (WCAG 2.5.8) */
.seletor-idioma button { min-height: 24px; }
.como-calc > summary:focus-visible { outline: 2px solid var(--blue-200); outline-offset: 2px; }
.como-calc[open] { display: block; margin: 6px 0 0; }
.como-calc > p { margin: 6px 0 0; padding: 8px 10px; border-radius: var(--radius-s); background: var(--surface-2); color: var(--text-2);
  font-size: .8rem; font-weight: 400; line-height: 1.45; text-align: left; overflow-wrap: anywhere; }
h2 .como-calc > p { font-size: .82rem; }

/* Visão geral: primeiro passo de uma empresa sem vaga aberta (gestor-inicio.js) */
.ini-primeiro { margin: 14px 0 4px; padding: 14px 16px; border: 0; border-left: 2px solid var(--accent);
  border-radius: var(--radius-s); background: var(--surface-2); }
.ini-primeiro h3 { margin: 0 0 4px; font-size: 1rem; color: var(--text); }
.ini-primeiro .desc { margin: 0 0 10px; }
/* Adicionar candidato: opção sem canal de envio (gestor-pipeline-auto.js) */
.pa-cartao.desligado { opacity: .7; cursor: not-allowed; }
/* Configuração guiada: página de vagas ainda sem vagas */
.gs-vazia { border-left: 2px solid var(--warn); }
/* Faixa da demo e do suporte (gestor-conta.js): no celular, texto curto e botão numa linha */
#faixa-suporte .fx-curto { display: none; }
@media (max-width: 540px) {
  #faixa-suporte { font-size: .78rem !important; padding: 6px 10px !important; gap: 6px 10px !important; }
  #faixa-suporte .fx-longo, #faixa-suporte .fx-hora { display: none; }
  #faixa-suporte .fx-curto { display: inline; }
  #faixa-suporte-encerrar { padding: 4px 10px !important; font-size: .75rem !important; }
}
/* Painel do dono: 9 abas cabem numa linha a 1280px (sem "Sistema" sozinha na segunda linha) */
.tabs.tabs-dono { gap: 2px; }
.tabs.tabs-dono .tab { padding: 9px 11px; }
/* Duas colunas de campos: quando um rótulo quebra linha, os campos continuam alinhados embaixo */
.grid.alinhar-base { align-items: end; }

/* Painel do gestor no celular (até 540px): topo compacto que rola junto com a página (antes
   ficava fixo com 186px e, com a faixa da demo, cobria cerca de 28% da tela). O menu do painel
   vira gaveta (regras do menu lateral, mais acima). */
@media (max-width: 540px) {
  .pg-gestor .topbar { position: static; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .pg-gestor .topbar .inner { padding: 8px 12px; gap: 6px 10px; }
  .pg-gestor .topbar .brand { gap: 8px; min-width: 0; }
  .pg-gestor .topbar .brand img { height: 20px; }
  .pg-gestor .topbar .brand .sep { display: none; }
  .pg-gestor .topbar h1 { font-size: .85rem; }
  .pg-gestor .topbar .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 58vw; font-size: .74rem; }
  .pg-gestor .topbar .actions { gap: 4px; flex-wrap: wrap; justify-content: flex-start; }
  .pg-gestor .topbar .actions .btn.small { padding: 5px 8px; font-size: .74rem; }
  .pg-gestor .topbar .seletor-idioma { margin-right: 0; }
  .pg-gestor .topbar .seletor-idioma button { padding: 6px 7px; }
  .pg-gestor .topbar .btn-tema { width: 30px; height: 30px; }
}

/* Candidatos a 1280px: filtros com a largura do próprio texto (antes cortavam "Triagem por vo")
   e tabela mais compacta, com a coluna de ações à vista sem rolagem interna */
.filtros-cand { display: flex; flex-wrap: wrap; gap: 10px; }
.filtros-cand > input, .filtros-cand > select { flex: 1 1 auto; width: auto; min-width: 150px; margin: 0; }
.filtros-cand > input[type="text"] { flex-basis: 220px; }
/* Visão geral: últimos candidatos em linhas compactas e números em 2 colunas na coluna da direita */
.lista-compacta { list-style: none; margin: 0; padding: 0; }
.lista-compacta li { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.lista-compacta li:first-child { border-top: 0; }
.lista-compacta .lc-nome { min-width: 0; display: flex; flex-direction: column; }
.lista-compacta .lc-sub { color: var(--muted); font-size: .8rem; }
.lista-compacta .lc-selos { display: flex; gap: 6px; flex-wrap: wrap; }
.ini-grade > div > .card, .ini-grade > div > #assistente-visao > .card { margin-bottom: 18px; }
.filtros-mais { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--line-soft); }
.filtros-mais[hidden] { display: none; }
.filtros-mais > input, .filtros-mais > select { flex: 1 1 auto; width: auto; min-width: 150px; margin: 0; }
.filtros-cand > .filtros-mais-btn { flex: 0 0 auto; align-self: center; }
table.tabela.tab-cand th, table.tabela.tab-cand td { padding: 10px 8px; }
table.tabela.tab-cand th { white-space: normal; }
table.tabela.tab-cand td span[style*="muted"] { overflow-wrap: anywhere; }
table.tabela.tab-cand td:has(> strong > a[data-detalhe]) { min-width: 150px; }
table.tabela.tab-cand td.num .badge { max-width: 120px; }
table.tabela.tab-cand .badge { white-space: normal; }
/* Pipeline: colunas um pouco mais estreitas (as seis etapas cabem a 1280px) e, quando ainda passam
   da área, a borda do lado que tem mais colunas some num degradê (gestor.js marca .mais-dir/.mais-esq) */
@media (min-width: 541px) { .kanban { grid-auto-columns: minmax(165px, 1fr); } }
.kanban.mais-dir { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.kanban.mais-esq { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); }
.kanban.mais-dir.mais-esq { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }

/* Saúde da triagem por voz (gestor-voz-falhas.js): motivo clicável e lista para abrir ou arquivar */
button.metrica.vf-motivo { font: inherit; color: inherit; text-align: inherit; cursor: pointer; width: 100%; transition: border-color .15s, transform .15s; }
button.metrica.vf-motivo:hover { border-color: var(--blue-250); transform: translateY(-1px); }
button.metrica.vf-motivo:focus-visible { outline: 2px solid var(--blue-200); outline-offset: 2px; }
button.metrica.vf-motivo.ativa { border-color: var(--accent, #3b67ca); box-shadow: 0 0 0 1px var(--accent, #3b67ca) inset; }
.vf-lista-caixa { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line-soft); border-radius: var(--radius-s); background: var(--surface-2); }

/* Navegação do portal da equipe (portal-nav.js, 2026-11-11): a barra de abas quebra linha em vez de rolar
   para o lado; com muitas abas vira barra curta + botão "Mais" com a lista agrupada por tema.
   "nav.pt-abas" vence o ".pt-abas" do <style> de cada página do portal. */
nav.pt-abas { flex-wrap: wrap; }
nav.pt-abas .pn-mais { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 10px;
  border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit;
  font-weight: 600; font-size: .9rem; cursor: pointer; }
nav.pt-abas .pn-mais[aria-expanded="true"] { border-color: var(--accent); }
nav.pt-abas .pn-seta { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
nav.pt-abas .pn-mais[aria-expanded="true"] .pn-seta { transform: translateY(2px) rotate(-135deg); }
nav.pt-abas .pn-painel { flex: 1 1 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px;
  padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
nav.pt-abas .pn-painel[hidden] { display: none; }
nav.pt-abas .pn-grupo-t { margin: 0 0 6px; font-size: .8rem; font-weight: 600; color: var(--text-2); }
nav.pt-abas .pn-grupo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
nav.pt-abas .pn-painel a { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: none; text-align: left;
  padding: 9px 12px; border-radius: 10px; font-size: .9rem; }
nav.pt-abas .pn-selo { display: inline-block; min-width: 1.5em; margin-left: 6px; padding: 0 6px; border-radius: 99px; background: #B42318;
  color: #fff; font-size: .74rem; font-weight: 700; line-height: 1.5em; text-align: center; }
nav.pt-abas .pn-mais .pn-selo { margin-left: 0; }
nav.pt-abas .pn-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* seletor de idioma do topo (PT EN ES): controle segmentado de canto reto, como os botões */
.topbar .seletor-idioma { border-radius: var(--radius-s); }


/* =====================================================================
   Layout novo, agente "equipe" (pedido do Tony, 2026-11-11): telas dos
   grupos Equipe e Empresa do painel do gestor (Equipe e a ficha da
   pessoa, Treinamento, Desempenho, Cargos, Competências, Relatórios,
   Configurações, Novidades, Guia e Plano). Só usa os tokens e os
   componentes da base; nada de cor fixa.
   ===================================================================== */

/* ---------- Equipe: barra de vistas e seções da ficha com cara de abas sublinhadas ---------- */
.eq > .eq-vistas, .eq-secoes {
  display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto; max-width: 100%;
  margin: 0 0 24px; padding: 0; box-shadow: inset 0 -1px 0 var(--line);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.eq > .eq-vistas::-webkit-scrollbar, .eq-secoes::-webkit-scrollbar { display: none; }
.eq > .eq-vistas > button, .eq-secoes > button {
  flex: 0 0 auto; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  padding: 10px 14px; min-height: 42px; font: inherit; font-size: .9rem; font-weight: 440; color: var(--muted);
  border-radius: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px;
  transition: color var(--mov-rapido), border-color var(--mov-rapido);
}
.eq > .eq-vistas > button:hover, .eq-secoes > button:hover { color: var(--text); }
.eq > .eq-vistas > button[aria-pressed="true"], .eq-secoes > button[aria-current="true"] {
  color: var(--text); font-weight: 560; border-bottom-color: var(--accent); background: none;
}
.eq > .eq-vistas > button:focus-visible, .eq-secoes > button:focus-visible { outline-offset: -2px; }
/* "Mais telas": discreto, no fim da barra; no celular fica preso à direita enquanto a barra rola */
.eq > .eq-vistas > button.eqv-mais {
  margin-left: auto; position: sticky; right: 0; background: var(--bg); color: var(--text-2);
  font-size: .86rem; gap: 6px; border-bottom: 1px solid var(--line);
}
.eq > .eq-vistas > button.eqv-mais[aria-expanded="true"] { color: var(--text); }
/* a mesma classe dentro de uma vista (Semana | Mês, Ativos | Encerrados...) é um seletor pequeno de canto reto */
.eq-vistas {
  display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: 2px; padding: 2px;
  border: 1px solid var(--line); border-radius: var(--radius-s);
}
.eq-vistas > button {
  border: 0; background: none; color: var(--text-2); font: inherit; font-size: .84rem; padding: 4px 12px; min-height: 28px;
  border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: color var(--mov-rapido), background-color var(--mov-rapido);
}
.eq-vistas > button:hover { color: var(--text); }
.eq-vistas > button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); font-weight: 560; }
.eq > .eq-vistas { border: 0; border-radius: 0; }
.eq .eq-limite { font-size: .86rem; color: var(--muted); }

/* abas de estado da lista (Ativos, Onboarding...): segundo nível, mais leve que a barra de vistas */
.eq .eq-abas { box-shadow: none; margin: 0 0 16px; gap: 4px; }
.eq .eq-abas .tab {
  min-height: 32px; padding: 5px 12px; border: 0; border-radius: var(--radius-s); font-size: .86rem;
}
.eq .eq-abas .tab.ativa { background: var(--surface-2); }
.eq .eq-abas .tab .n { color: var(--text-2); font-weight: 440; font-variant-numeric: tabular-nums; margin-left: 0; }
.eq .eq-filtros { margin-bottom: 16px; }

/* vistas dos módulos: o cartão de fora vira superfície plana (o título da vista é o título da seção) */
#eq-corpo > .card, #eq-corpo > .eq-dir {
  background: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 32px;
}
#eq-corpo > .card + .card { padding-top: 28px; border-top: 1px solid var(--line-soft); }
#eq-corpo .eq-topo { align-items: flex-start; margin-bottom: 20px; }
#eq-corpo .eq-topo h2, #eq-corpo > .card > h2 { font-size: var(--fs-l); font-weight: 560; }
#eq-corpo .eq-topo .desc { max-width: 64ch; }

/* ---------- ficha da pessoa: cabeçalho claro, seções em abas, cartões planos ---------- */
.eq-voltar { margin: 0 0 16px; }
.eq-ficha-topo { margin: 0 0 24px; }
.eq-ficha-topo .aviso { margin-top: 16px; }
.eq-selos { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.eq-cab-fim { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.eq-perfil { display: block; }
#eq-secao { max-width: 980px; }
#eq-secao > .card, #eq-secao > div > .card {
  background: none; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0;
  padding: 0 0 24px; margin: 0 0 24px;
}
#eq-secao > .card:last-child, #eq-secao > div:last-child > .card:last-child { border-bottom: 0; }
#eq-secao .eq-bloco .cab { margin-bottom: 12px; }
#eq-secao .eq-bloco h3 { font-size: 1.02rem; font-weight: 560; }
@media (max-width: 700px) {
  .eq-cab-fim { align-items: flex-start; }
}

/* =====================================================================
   Agente recrut (layout de 2026-11-11): Vagas, pipeline, ficha do
   candidato, Candidatos, Mensagens, Triagem por voz e a parte de baixo
   da Visão geral. Só acréscimos: usa os tokens e os componentes da base.
   ===================================================================== */

/* ---------- Vagas: cabeçalho, indicadores e abas de página ---------- */
.vg-titulo { font-family: var(--font-body); font-size: 1rem; font-weight: 500; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.vg-lista > li, .ct-lista > li { align-items: flex-start; padding-top: 16px; padding-bottom: 16px; }
.vg-lista .linha-apoio { display: block; margin-bottom: 0; }
.vg-lista .mc-barra { margin-top: 10px; max-width: 520px; }
.vg-acoes, .ct-acoes { flex-wrap: wrap; justify-content: flex-end; }
.btn.vg-excluir { color: var(--err); }
.btn.vg-excluir:hover { background: var(--err-bg); color: var(--err); }
.ct-lista .linha-ic { margin-top: 2px; }
.ct-lista .linha-titulo { font-family: var(--font-body); font-size: 1rem; font-weight: 500; }
.ct-lista p.linha-apoio { display: block; color: var(--text-2); font-size: .88rem; max-width: 62ch; }
.ct-estado { font-size: .8rem; margin-top: 6px; }
.ct-kpis .ct-sem-dado { font-size: var(--fs-l); color: var(--text-2); padding: 8px 0 4px; }
/* blocos dos módulos dentro das abas (vagas internas, pedidos de vaga, reposições): seção plana, sem cartão */
.vg-pagina [data-vg-slot] .card {
  background: none; border: 0; border-top: 1px solid var(--line-soft); border-radius: 0;
  padding: 28px 0 0; margin: 28px 0 0;
}
.vg-pagina [data-vg-slot]:first-child .card, .vg-pagina [data-vg-slot]:empty + [data-vg-slot] .card { border-top: 0; margin-top: 0; padding-top: 0; }
.vg-pagina [data-vg-slot] .ct-lista + * { margin-top: 0; }
@media (max-width: 540px) {
  .vg-acoes, .ct-acoes { justify-content: flex-start; margin-left: 0; width: 100%; }
  .ct-lista > li > .linha-txt { flex: 1 1 calc(100% - 40px); }
}

/* =====================================================================
   Bloco do agente "dono" (layout de 2026-11-11): painel do dono, portal
   da equipe, páginas do candidato e públicas, login e landing. Só usa os
   tokens e os componentes da base; nada de cor fixa nova.
   ===================================================================== */

/* ---------- painel do dono: página com cabeçalho, abas de página e blocos planos (dono-layout.js) ---------- */
.dl-principal { min-width: 0; }
.dl-principal > #dl-abas:empty, .dl-sem-abas > #dl-abas { display: none; }
.card.dl-oculto, .card.dl-vazio { display: none !important; }
.pg-dono #conteudo .card.dl-bloco { background: none; border: 0; border-radius: 0; padding: 0; margin-bottom: 36px; }
.pg-dono #conteudo .card.dl-bloco > h2 { padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.pg-dono #conteudo .dl-h2-oculto {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pg-dono #conteudo [role="tabpanel"]:focus-visible { outline-offset: 4px; }
.pg-dono #conteudo h3 { font-size: .95rem; font-weight: 600; font-family: var(--font-body); color: var(--text); margin: 24px 0 10px; }
.pg-dono #conteudo h3.emp-sub, .pg-dono #conteudo .secao-cab h3 { margin: 0; }
.pg-dono #conteudo .comp-item .nome strong { font-weight: 560; }
/* Guia: continua em sanfona, agora em linhas (sem caixa) */
.pg-dono #conteudo .card.dl-recolhivel { background: none; border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; padding: 16px 0; margin: 0; }
.card.dl-recolhivel > h2 { cursor: pointer; user-select: none; position: relative; padding-right: 32px; display: flex; align-items: center; width: 100%; font-size: 1rem; margin: 0; }
.card.dl-recolhivel > h2 > span { min-width: 0; }
.card.dl-recolhivel > h2::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted); transform: translateY(-75%) rotate(45deg); transition: transform var(--mov-rapido);
}
.card.dl-fechado > h2::after { transform: translateY(-35%) rotate(-45deg); }
.card.dl-recolhivel > h2:hover { color: var(--text); }
.card.dl-fechado > :not(h2) { display: none !important; }
.card.dl-recolhivel:not(.dl-fechado) > h2 { margin-bottom: 14px; }

/* Visão geral do dono: atenção à esquerda, integrações e servidor à direita */
.dvg-grade { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 0 56px; align-items: start; }
@media (max-width: 1180px) { .dvg-grade { grid-template-columns: minmax(0, 1fr); } }
.lista-linhas.dvg-compacta > li { padding: 10px 0; }
.dvg-fatos { margin: 4px 0 0; }
.dvg-fatos > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: .9rem; }
.dvg-fatos > div:first-child { border-top: 0; }
.dvg-fatos dt { color: var(--text-2); }
.dvg-fatos dd { color: var(--text); font-weight: 500; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.dvg-log {
  font-size: .76rem; line-height: 1.55; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow-y: auto;
  background: var(--surface-2); padding: 16px; border-radius: var(--radius-s);
}
html[data-tema="claro"] pre.dvg-log { background: var(--surface-2) !important; }

/* Empresas: filtros da lista e página de detalhe */
.emp-filtros { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }
.emp-filtros > input { flex: 1 1 220px; max-width: 380px; margin: 0; }
.emp-filtros > select { flex: 0 1 220px; width: auto; margin: 0; }
.emp-volta { margin: 0 0 14px; }
.emp-volta .btn-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--text-2); }
.emp-volta .btn-link:hover { color: var(--text); }
.emp-volta svg { width: 15px; height: 15px; }
.emp-det-topo { margin-bottom: 20px; }
.emp-det-topo .pg-titulo { font-size: var(--fs-xl); }
.emp-det-topo .pg-desc { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: .86rem; overflow-wrap: anywhere; }
.emp-campo-grupo { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
.emp-campo-grupo > legend, .emp-rot { display: block; font-size: .86rem; font-weight: 460; color: var(--text-2); margin: 0 0 8px; padding: 0; }
.emp-mod { display: inline-flex; align-items: center; gap: 8px; margin: 0 20px 6px 0; min-height: 28px; font-size: .92rem; cursor: pointer; }
.emp-logo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.emp-logo img { height: 32px; max-width: 140px; background: #fff; border-radius: 6px; padding: 3px 8px; }
.emp-logo label { cursor: pointer; }
.emp-suporte { margin-top: 8px; }
#ne-form { margin-bottom: 28px; }
@media (max-width: 540px) {
  .dvg-fatos > div { flex-wrap: wrap; gap: 2px 16px; }
  .emp-filtros > input, .emp-filtros > select { flex: 1 1 100%; max-width: none; }
  .pg-dono #conteudo .card.dl-bloco { padding: 0; }
}
@media (min-width: 900px) { #dvg-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dvg-grade .secao-cab { min-height: 44px; }
#emp-linhas .linha-apoio { gap: 2px 0; }
#emp-linhas .linha-apoio > span + span::before { content: "\00B7"; margin: 0 8px; color: var(--muted); }
.pg-dono #conteudo .card.dl-bloco > h2.icone-titulo { display: flex; flex-wrap: wrap; }
.pg-dono #conteudo .linha-acoes + label.field { margin-top: 20px; }
.abas-pg.dl-mais-dir { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
.abas-pg.dl-mais-esq { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); }
.abas-pg.dl-mais-dir.dl-mais-esq { -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.lista-linhas.dvg-compacta > li { flex-wrap: nowrap; }
.lista-linhas.dvg-compacta > li > .linha-txt { flex: 1 1 auto; }
#emp-linhas .linha-apoio { display: block; }

/* ---------- portal da equipe: cabeçalho, marca e abas sublinhadas num lugar só (antes cada página
   repetia as pílulas no próprio <style>). "nav.pt-abas" e a barra curta com "Mais" são do portal-nav.js. ---------- */
.tr-idiomas, .vf-idiomas, .av-idiomas, .ac-idiomas { display: flex; gap: 2px; }
.tr-idiomas button, .vf-idiomas button, .av-idiomas button, .ac-idiomas button {
  padding: 5px 9px; font-size: .76rem; font-weight: 560; min-height: 32px; border-color: transparent; color: var(--text-2);
}
.tr-idiomas button.ativo, .vf-idiomas button.ativo, .av-idiomas button.ativo, .ac-idiomas button.ativo {
  background: var(--surface-2); color: var(--text); border-color: var(--line);
}
.tr-marca, .bt-marca, .cs-marca, .tg-marca { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.tr-marca { margin-bottom: 4px; }
.tr-marca img, .bt-marca img, .cs-marca img, .tg-marca img { max-height: 48px; max-width: 200px; border-radius: var(--radius-s); background: #fff; padding: 4px; }
.tr-marca .nome, .bt-marca .nome, .cs-marca .nome, .tg-marca .nome {
  font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 460; letter-spacing: -.01em; line-height: 1.2; overflow-wrap: anywhere;
}
/* o cartão do topo (nome da empresa e abas) fica plano: é o cabeçalho da página, não um grupo */
.card:has(> nav.pt-abas) { background: none; border: 0; border-radius: 0; padding: 4px 0 0; margin-bottom: 8px; }
nav.pt-abas { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 14px 0 12px; box-shadow: inset 0 -1px 0 var(--line); }
nav.pt-abas a {
  flex: 0 1 auto; display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: 10px 12px; min-height: 42px;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--muted);
  font-weight: 440; font-size: .9rem; text-decoration: none;
  transition: color var(--mov-rapido), border-color var(--mov-rapido), background-color var(--mov-rapido);
}
nav.pt-abas a:hover { color: var(--text); }
nav.pt-abas a[aria-current="page"] { background: none; color: var(--text); font-weight: 560; border-bottom-color: var(--accent); }
nav.pt-abas a:focus-visible, nav.pt-abas .pn-mais:focus-visible { outline-offset: -2px; }
nav.pt-abas .pn-mais {
  flex: 0 0 auto; margin-left: auto; padding: 10px 12px; min-height: 42px; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: none; color: var(--text-2); font-weight: 520;
}
nav.pt-abas .pn-mais:hover { color: var(--text); }
nav.pt-abas .pn-mais[aria-expanded="true"] { color: var(--text); border-bottom-color: var(--accent); }
nav.pt-abas .pn-seta { border-right-width: 1.5px; border-bottom-width: 1.5px; }
nav.pt-abas .pn-painel { margin-top: 10px; padding: 16px; gap: 18px; background: var(--elevado); animation: ui-entra 160ms var(--mov-curva) backwards; }
nav.pt-abas .pn-grupo-t { font-weight: 500; color: var(--muted); }
nav.pt-abas .pn-grupo ul { gap: 2px 6px; }
nav.pt-abas .pn-painel a {
  justify-content: space-between; text-align: left; min-height: 40px; padding: 8px 10px; border: 0; border-radius: var(--radius-s); color: var(--text-2);
}
nav.pt-abas .pn-painel a:hover { background: var(--surface-2); color: var(--text); }
nav.pt-abas .pn-painel a[aria-current="page"] { background: var(--surface-2); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
@media (max-width: 420px) { nav.pt-abas a, nav.pt-abas .pn-mais { padding: 10px 9px; font-size: .86rem; } }
/* defeito da base: no tema claro, o campo de mês e o de data e hora ficavam com o fundo escuro dos campos do tema escuro */
html[data-tema="claro"] input[type=month], html[data-tema="claro"] input[type=datetime-local] { background: #FFFFFF; color: var(--text); }
/* fim do bloco do agente "dono" */

/* ---------- agente "equipe" (continuação): Treinamento e Desempenho, cabeçalho de página, abas e corpo plano ---------- */
.pg-limite { font-size: .86rem; color: var(--muted); }
#tr-corpo > .card, #ds-corpo > .card {
  background: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 32px;
}
#tr-corpo > .card + .card, #ds-corpo > .card + .card, #ds-corpo > .ds-colunas + .card { padding-top: 28px; border-top: 1px solid var(--line-soft); }
#tr-corpo .tr-topo, #ds-corpo .ds-topo { align-items: center; margin-bottom: 16px; }
#tr-corpo .tr-topo h2, #ds-corpo .ds-topo h2, #tr-corpo > .card > h2, #ds-corpo > .card > h2 { font-size: var(--fs-l); font-weight: 560; margin: 0; }
#ds-corpo .ds-colunas { margin-bottom: 32px; gap: 20px; }
#ds-corpo .ds-colunas > .card { margin: 0; }

/* ---------- Relatórios: blocos em abas, indicadores e gráficos com respiro ---------- */
.rel-abas .metricas { margin-bottom: 32px; }
.rel-abas .card { margin-bottom: 24px; }
.rel-abas .perfil-barras { margin-top: 12px; }
.rel-funis { margin-top: 12px; }
.rel-funis .secao-cab { margin-bottom: 20px; }
.rel-funis-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 16px; }
.rel-funis-grade > .card { margin: 0; }
.rel-filtros-dica { margin: 0 0 20px; }

/* ---------- Guia: um assunto por aba, texto com medida de leitura ---------- */
.guia-texto { max-width: 78ch; }
.guia-texto > .pg-desc { margin: 0; font-size: 1rem; }
.guia-texto h2 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; margin: 28px 0 8px; }
.guia-texto > h2:first-child { margin-top: 0; }
.guia-texto p { color: var(--text-2); }
.guia-perfil { border-top: 1px solid var(--line-soft); padding-top: 14px; min-width: 0; }
.guia-perfil h3 { font-family: var(--font-body); font-size: .95rem; font-weight: 600; margin: 0 0 4px; }
.guia-perfil p { font-size: .9rem; margin: 0; }

/* ---------- Novidades: uma seção por dia, lista de linhas ---------- */
.nov-lista { max-width: 860px; }
.nov-lista .secao { margin-bottom: 28px; }
.nov-lista .secao-cab h2 { font-size: 1rem; color: var(--text-2); font-weight: 500; }
.nov-texto { color: var(--text-2); font-size: .9rem; margin: 4px 0 6px; max-width: 72ch; }
.nov-link { font-size: .86rem; }

/* ---------- pipeline da vaga: cabeçalho de página, modos em abas, colunas e cartões limpos ---------- */
.pp-topo { margin-bottom: 20px; align-items: flex-start; }
.btn-link.pp-voltar { display: inline-flex; align-items: center; margin-bottom: 10px; font-size: .86rem; color: var(--text-2); text-decoration: none; }
.btn-link.pp-voltar:hover { color: var(--text); text-decoration: underline; }
.pp-topo .mc-barra { margin-top: 14px; max-width: 520px; }
.pp-barra {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap;
  margin: 0 0 20px; box-shadow: inset 0 -1px 0 var(--line);
}
.pp-barra .pp-vistas { margin: 0; box-shadow: none; flex: 0 1 auto; }
.pp-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-bottom: 6px; }
.kanban-col { background: var(--surface); border-color: transparent; padding: 12px 10px; gap: 8px; }
.kanban-col .titulo-col { align-items: center; padding: 0 2px 4px; font-size: .84rem; color: var(--text); }
.pp-col-fim { display: inline-flex; align-items: center; gap: 2px; }
.pp-col-n { color: var(--muted); font-weight: 440; font-variant-numeric: tabular-nums; min-width: 18px; text-align: center; }
.btn.pp-col-mais { padding: 0; min-width: 28px; min-height: 28px; }
.kanban-card { background: var(--elevado); padding: 12px; }
.kanban-card .nome-card a { text-decoration: none; }
.kanban-card .nome-card a:hover { text-decoration: underline; }
.kanban-card .pp-card-acoes { margin-top: 8px; gap: 6px; }
.kanban-card .pp-card-acoes .btn-link { font-size: .8rem; }
.kanban-card select { width: 100%; }
/* nome de etapa mais longo que a coluna (em tagalo, "Mga assessment"): reticências no lugar do corte seco */
.kanban-card select { text-overflow: ellipsis; }
.pp-dica { margin: 14px 0 0; color: var(--muted); max-width: 80ch; }
.cel-vazia { color: var(--muted); opacity: .7; }
/* blocos abaixo do quadro (banco de talentos, radar): seção plana com uma linha fina em cima */
#banco-vaga > .card, #radar-talentos > .card, .pp-dica ~ .card {
  background: none; border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; padding: 28px 0 0; margin: 28px 0 0 !important;
}
@media (max-width: 540px) {
  .pp-acoes { width: 100%; }
}

/* ---------- Candidatos: uma ação principal, menu "Mais", filtros numa linha, tabela sem cartão ---------- */
.menu-mais { position: relative; display: inline-flex; }
.menu-mais[hidden] { display: none; }
.menu-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 230px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--elevado); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 16px 40px -24px rgba(0, 0, 0, .6); animation: ui-entra var(--mov-rapido) ease-out;
}
.menu-pop[hidden] { display: none; }
.menu-pop .btn { width: 100%; justify-content: flex-start; color: var(--text); font-weight: 440; padding: 8px 10px; min-height: 36px; font-size: .88rem; }
.menu-pop .btn:disabled { color: var(--muted); opacity: 1; }
.cand-pagina .filtros-cand { margin: 0 0 8px; }
.cand-pagina #ft-resultado { margin-top: 16px; }
.cand-rodape { justify-content: center; align-items: center; gap: 12px; margin-top: 16px; }
@media (max-width: 540px) {
  .pg-acoes > .menu-mais, .pg-acoes > .menu-mais > .btn { width: 100%; }
  .menu-pop { left: 0; right: 0; }
}

/* ---------- Visão geral, parte de baixo: seções planas e listas de linhas ---------- */
.ini-grade > div > .secao { margin-bottom: 36px; }
.as-barra { margin: 16px 0 8px; }
.as-progresso, .as-dica { color: var(--muted); font-size: .82rem; margin: 0; }
.as-dica { margin-top: 12px; }
.as-acoes { margin-top: 16px; }
.as-guiado { margin-top: 8px; }
.as-guiado > li { padding: 10px 0; }
.as-mais { margin-top: 16px; }
.as-mais > summary { cursor: pointer; color: var(--text-2); font-size: .9rem; min-height: 24px; }
.as-marca { width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid var(--borda-campo); }
.as-marca.feito { border-color: transparent; background: var(--ok-bg); color: var(--ok); }
.as-marca svg { width: 12px; height: 12px; }
.assistente-passos > li, .pr-lista > li { align-items: flex-start; }
.pr-secao .pr-estado { margin: 16px 0 4px; }
.pr-lista .linha-titulo { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.qd-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 20px 32px; margin-top: 16px; }
.qd-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.qd-rot { font-size: .9rem; font-weight: 500; color: var(--text); }
.qd-lista > li { padding: 10px 0; }
.qd-lista a.linha-titulo { color: var(--text); }
.qd-vazio { color: var(--muted); font-size: .86rem; margin: 10px 0 0; }
.lista-compacta.lista-linhas li { padding: 12px 0; flex-wrap: wrap; }
.lista-compacta .lc-selos { flex: 0 1 auto; }
.lc-pendente { color: var(--muted); font-size: .8rem; }
/* ---------- ficha do candidato (o resto do desenho está no gestor-perfil.js) ---------- */
.btn-link.cp-voltar { font-size: .86rem; color: var(--text-2); text-decoration: none; }
.btn-link.cp-voltar:hover { color: var(--text); text-decoration: underline; }


/* ---------- Triagem por voz: cabeçalho de página, avisos planos e seções sem cartão ---------- */
.voz-estado-linha { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 12px 0 0; }
.voz-faixas { display: flex; flex-direction: column; gap: 8px; margin: 0 0 24px; }
.voz-faixa {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--text);
  border-left: 2px solid var(--line); padding: 10px 14px; border-radius: var(--radius-s); font-size: .92rem;
}
[data-voz-sec] > .card {
  background: none; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; padding: 0 0 28px; margin: 0 0 28px;
}
[data-voz-sec] > .card:last-child { border-bottom: 0; }
[data-voz-sec] > .card > h3:first-child, [data-voz-sec] > .card > div:first-child > h3 { font-size: var(--fs-l); font-weight: 560; font-family: var(--font-display); }


/* ---------- agente "equipe" (continuação): Plano e Configurações ---------- */
.fa-plano-atual { font-size: var(--fs-l); font-weight: 520; color: var(--text); margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fa-topo .pg-desc { margin-top: 4px; }

/* Configurações: índice plano (sem caixa), áreas do início em lista calma, cartões recolhidos como linhas */
.cfg-indice { border: 0; background: none; padding: 0; border-radius: 0; }
.cfg-chips a { border-radius: var(--radius-s); padding: 8px 12px; }
.cfg-chips a[aria-current="page"] { box-shadow: none; font-weight: 560; }
.cfg-n:not(:empty) { background: var(--surface-2); color: var(--text-2); font-weight: 560; }
.cfg-tit > span { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 440; letter-spacing: -.01em; line-height: 1.2; }
.cfg-tit small { font-size: .9rem; color: var(--text-2); margin-top: 4px; }
.cfg-secao-cab { margin-bottom: 20px; }
.cfg-inicio { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 0 32px; }
.cfg-area { border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; background: none; padding: 16px 4px; align-items: center;
  transition: background-color var(--mov-rapido); }
.cfg-area:hover, .cfg-area:focus-visible { background: var(--surface); border-color: var(--line-soft); }
.cfg-area .cfg-ic svg { width: 20px; height: 20px; color: var(--muted); }
.cfg-area-txt strong { font-weight: 520; }
.cfg-layout:not(.buscando) .cfg-secao-corpo .card.cfg-fechado {
  background: none; border-color: transparent; border-bottom-color: var(--line-soft); border-radius: 0;
  margin-bottom: 0; padding-left: 4px; padding-right: 4px;
}
.cfg-layout:not(.buscando) .cfg-secao-corpo .card.cfg-fechado:hover { border-color: transparent; border-bottom-color: var(--line-soft); background: var(--surface); }
.cfg-secao-corpo .card:not(.cfg-fechado) { margin: 10px 0 14px; }
.cfg-secao-corpo .card.cfg-recolhivel:not(.cfg-fechado):hover { border-color: var(--line); }
@media (max-width: 900px) {
  /* celular: as áreas viram uma barra de abas sublinhadas que rola para o lado (sem pílulas) */
  .cfg-indice { padding: 0; border-bottom: 0; }
  .cfg-chips { gap: 2px; padding-bottom: 0; box-shadow: inset 0 -1px 0 var(--line); }
  .cfg-chips a { border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 10px 12px; min-height: 40px; font-size: .86rem; }
  .cfg-chips a:hover, .cfg-chips a:focus-visible { background: none; }
  .cfg-chips a[aria-current="page"] { background: none; border-bottom-color: var(--accent); }
  .cfg-inicio { gap: 0; }
}

/* ---------- agente cliques (2026-11-11): indicadores clicáveis (.kpi-link, uiKpiLinks no ui-movimento.js) ----------
   O indicador continua plano; o rótulo é um link de verdade e o ::after dele cobre o bloco inteiro. No hover e no
   foco a linha de cima ganha a cor de destaque e aparece uma seta discreta. Nada de fundo, sombra ou cara de botão. */
.kpi-clicavel { position: relative; transition: border-color var(--mov-rapido); }
.kpi-clicavel:hover, .kpi-clicavel:focus-within { border-top-color: var(--accent); }
.kpi-link { color: inherit; text-decoration: none; font: inherit; border-radius: 4px; }
.kpi-link::after { content: ""; position: absolute; inset: 0; }
.kpi-clicavel:hover .kpi-link, .kpi-link:focus-visible { color: var(--text); }
.kpi-seta { display: inline-block; margin-left: 6px; color: var(--link); opacity: 0; transform: translateX(-3px);
  transition: opacity var(--mov-rapido), transform var(--mov-rapido); }
.kpi-clicavel:hover .kpi-seta, .kpi-link:focus-visible .kpi-seta { opacity: 1; transform: none; }
.kpi-clicavel .como-calc { position: relative; z-index: 1; }
@media (hover: none) { .kpi-seta { opacity: .7; transform: none; } }
/* filtro aplicado por um indicador (lista de vagas) e selo Beta do painel do dono */
.kl-chip { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 12px; }
.kl-chip .btn { min-width: 24px; min-height: 24px; padding: 0 6px; }
.linha-estado .badge + .badge { margin-left: 6px; }
/* fim do bloco do agente cliques */

/* =====================================================================
   agente "recursos" (pedido do Tony, 2026-11-11): Central de recursos em
   grade de cartões, no espírito dos modelos do Treinamento
   (gestor-recursos.js), e cartões de Configurações > Mensagens com os
   sub-itens em linhas (gestor-sms.js, gestor-wa-qr.js,
   gestor-sms-externo.js, gestor-sms-isv.js).
     .cr-grade > .cr-cartao .. cartão de recurso: .cr-cab (ícone e nome),
                               .cr-frase, .cr-selos, .cr-rodape (UMA ação)
     .cr-painel ............... detalhe do recurso em painel lateral
     .sub-itens > li .......... sub-itens de um cartão em linhas: .sub-cab
                               (.sub-titulo, selo, .sub-fim), .sub-apoio,
                               .sub-corpo
     details.opc .............. opção recolhida em linha (sem caixa)
     details.mais-opcoes ...... "Mais opções" de um cartão
   ===================================================================== */
.cr-intro { color: var(--muted); font-size: .9rem; line-height: 1.5; margin: 0 0 20px; max-width: 78ch; }
.cr-intro strong { color: var(--text-2); font-weight: 520; }
.cr-central .abas-pg { margin-bottom: 20px; }
.cr-filtros { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; margin: 0; }
.cr-filtros .field { margin: 0; flex: 1 1 180px; max-width: 260px; min-width: 0; }
.cr-filtros .field:first-child { flex: 2 1 240px; max-width: 420px; }
.cr-msg { color: var(--ok); font-size: .88rem; font-weight: 520; margin: 12px 0 0; }
.cr-msg:empty, .cr-p-msg:empty { display: none; }
.cr-grupo { margin: 32px 0 0; }
.cr-grupo-tit {
  font-family: var(--font-display); font-size: var(--fs-l); font-weight: 480; color: var(--text); letter-spacing: normal;
  text-transform: none; margin: 0 0 14px; display: flex; align-items: center; gap: 10px;
}
.cr-grupo-n {
  min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--text-2);
  font-family: var(--font-body); font-size: .72rem; font-weight: 560; line-height: 20px; text-align: center;
}
.cr-grade { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
.cr-cartao {
  border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface); padding: 18px;
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  transition: border-color var(--mov-rapido), background-color var(--mov-rapido);
}
.cr-cartao:hover, .cr-cartao:focus-within { border-color: var(--line); }
.cr-cab { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.cr-ic { flex: none; display: inline-flex; color: var(--muted); margin-top: 3px; }
.cr-ic svg { width: 18px; height: 18px; }
.cr-nome { margin: 0; min-width: 0; font-family: var(--font-body); font-size: .98rem; font-weight: 560; line-height: 1.35; letter-spacing: normal; text-transform: none; }
.cr-nome-btn {
  font: inherit; color: var(--text); background: none; border: 0; padding: 0; margin: 0; text-align: left; cursor: pointer;
  min-height: 24px; overflow-wrap: anywhere; border-radius: 4px;
}
.cr-nome-btn:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cr-frase {
  margin: 0; color: var(--text-2); font-size: .86rem; line-height: 1.5; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
}
.cr-selos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cr-selos .chip { font-size: .74rem; }
.cr-rodape { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: auto; padding-top: 8px; }
.cr-links { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.cr-det, .cr-saiba {
  font: inherit; font-size: .82rem; color: var(--text-2); background: none; border: 0; padding: 0; cursor: pointer;
  min-height: 24px; display: inline-flex; align-items: center; text-decoration: none; border-radius: 4px;
  transition: color var(--mov-rapido);
}
.cr-det:hover, .cr-saiba:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* detalhe do recurso: painel lateral (a grade fica no lugar, por baixo) */
.modal-fundo.cr-painel-fundo { justify-content: flex-end; align-items: stretch; padding: 0; overflow: hidden; }
.modal.cr-painel {
  max-width: 460px; width: 100%; border: 0; border-left: 1px solid var(--line); border-radius: 0; box-shadow: none;
  background: var(--elevado); padding: 24px 28px 28px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px;
  animation: cr-painel-entra var(--mov) var(--mov-curva);
}
@keyframes cr-painel-entra { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.cr-painel .fechar { float: none; align-self: flex-end; margin: 0 -8px -8px 0; }
.cr-p-cab { display: flex; gap: 12px; align-items: flex-start; }
.cr-p-cab .cr-ic { margin-top: 26px; }
.cr-p-cat { margin: 0; font-size: .8rem; color: var(--muted); }
.cr-p-nome { margin: 2px 0 0; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 480; line-height: 1.25; letter-spacing: -.01em; overflow-wrap: anywhere; }
.cr-p-desc { margin: 0; color: var(--text-2); font-size: .92rem; line-height: 1.55; }
.cr-p-dados { margin: 0; }
.cr-p-dados > div { padding: 12px 0; border-top: 1px solid var(--line-soft); }
.cr-p-dados dt, .cr-p-tit { font-family: var(--font-body); font-size: .8rem; font-weight: 460; color: var(--muted); letter-spacing: normal; text-transform: none; }
.cr-p-dados dd { margin: 2px 0 0; font-size: .9rem; line-height: 1.5; color: var(--text); }
.cr-p-tit { margin: 0; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.cr-p-lista { margin-top: -10px; }
.cr-p-lista > li { padding: 8px 0; border-top: 0; font-size: .9rem; }
.cr-p-msg { margin: 0; color: var(--ok); font-size: .88rem; font-weight: 520; }
.cr-p-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line-soft); }

/* sub-itens de um cartão em linhas limpas (canais, números): estado e ação na própria linha, sem caixa dentro de caixa */
.sub-itens { list-style: none; margin: 16px 0; padding: 0; border-top: 1px solid var(--line-soft); }
.sub-itens > li { padding: 14px 0; border-bottom: 1px solid var(--line-soft); min-width: 0; }
.sub-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.sub-cab > input[type=checkbox] { flex: none; margin: 0; }
.sub-titulo { flex: 1 1 220px; min-width: 0; font-weight: 520; color: var(--text); overflow-wrap: anywhere; }
label.sub-titulo { cursor: pointer; }
.sub-fim { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sub-apoio { color: var(--muted); font-size: .84rem; line-height: 1.5; margin: 4px 0 0; }
.sub-itens > li > .sub-apoio.recuo, .sub-itens > li > .sub-corpo.recuo { margin-left: 30px; }
.sub-marcar { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0; font-size: .92rem; line-height: 1.45; color: var(--text); cursor: pointer; }
.sub-marcar > input[type=checkbox] { flex: none; margin: 3px 0 0; }
.sub-marcar > span { min-width: 0; }
.sub-corpo { margin-top: 10px; min-width: 0; }
.sub-corpo > :last-child { margin-bottom: 0; }
.sub-secao-tit { font-family: var(--font-body); font-size: .8rem; font-weight: 460; color: var(--muted); letter-spacing: normal; text-transform: none; margin: 22px 0 0; }
.sub-secao-tit + .sub-itens { margin-top: 8px; }
/* opção recolhida em linha (no lugar de <details> solto ou de caixa): seta à direita, abre no lugar */
details.opc { border-top: 1px solid var(--line-soft); }
details.opc:last-of-type { border-bottom: 1px solid var(--line-soft); }
details.opc > summary {
  list-style: none; cursor: pointer; position: relative; padding: 12px 28px 12px 0; min-height: 24px;
  font-weight: 500; color: var(--text); overflow-wrap: anywhere; transition: color var(--mov-rapido);
}
details.opc > summary::-webkit-details-marker { display: none; }
details.opc > summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform var(--mov-rapido);
}
details.opc[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
details.opc > summary .hint { font-weight: 400; }
details.opc[open] { padding-bottom: 16px; }
details.opc[open] > summary { margin-bottom: 4px; }
details.opc > :last-child { margin-bottom: 0; }
.sub-corpo > details.opc:last-child { border-bottom: 0; margin-bottom: -14px; }
.sub-corpo > details.opc:last-child[open] { margin-bottom: -4px; padding-bottom: 4px; }
/* selo do próprio módulo no título de um cartão das Configurações: do tamanho do texto (não estica) */
.card.cfg-recolhivel > .cfg-card-tit.icone-titulo > span.badge:not(.cfg-selo) { flex: 0 0 auto; margin-left: 0 !important; }
/* "Mais opções" do cartão: o que não é do dia a dia fica recolhido */
details.mais-opcoes { margin: 18px 0 0; }
details.mais-opcoes > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 32px;
  color: var(--text-2); font-size: .9rem; font-weight: 500; transition: color var(--mov-rapido);
}
details.mais-opcoes > summary::-webkit-details-marker { display: none; }
details.mais-opcoes > summary::after {
  content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform var(--mov-rapido);
}
details.mais-opcoes[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
details.mais-opcoes > summary:hover { color: var(--text); }
details.mais-opcoes[open] > summary { margin-bottom: 10px; }
.sub-salvar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; }
/* aviso dentro do cartão: linha fina à esquerda, sem caixa colorida */
.sub-aviso { border-left: 2px solid var(--warn); padding: 2px 0 2px 12px; margin: 12px 0; color: var(--text-2); font-size: .88rem; line-height: 1.5; }
.sub-aviso.err { border-left-color: var(--err); }
.sub-aviso > :last-child { margin-bottom: 0; }
@media (max-width: 700px) {
  .cr-filtros .field, .cr-filtros .field:first-child { flex: 1 1 100%; max-width: none; }
  .cr-cartao { padding: 16px; }
  .modal.cr-painel { max-width: none; border-left: 0; padding: 18px 18px 24px; }
  .sub-itens > li > .sub-apoio.recuo, .sub-itens > li > .sub-corpo.recuo { margin-left: 0; }
}
/* fim do bloco do agente "recursos" */

/* =====================================================================
   agente "config" (pedido do Tony, 2026-11-11): Configurações em grade de
   cartões, no espírito dos modelos do Treinamento e da Central de recursos,
   e o ajuste aberto sozinho na tela (gestor-config-secoes.js).
     .cfg-grade > .cfg-cartao .. cartão: .cfg-cartao-ic (ícone), .cfg-cartao-nome
                                 (o link cobre o cartão inteiro), .cfg-cartao-frase,
                                 .cfg-cartao-pe (selo e a ação discreta)
     .cfg-cartao.cfg-atalho .... atalho mais leve para outra tela
     .cfg-grupo-tit ............ subtítulo leve com contagem (.cfg-grupo-n)
     .cfg-foco-cab ............. cabeçalho do cartão aberto: voltar, título, frase, selo
   ===================================================================== */
.cfg-grade { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }
.cfg-grade.oculto, .cfg-grade:empty { display: none; }
.cfg-grade.cfg-inicio { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }
.cfg-cartao {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 18px;
  border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface);
  transition: border-color var(--mov-rapido), background-color var(--mov-rapido);
}
.cfg-cartao:hover, .cfg-cartao:focus-within { border-color: var(--accent); }
.cfg-cartao-ic {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: var(--radius-s); background: var(--accent-suave); color: var(--link); margin-bottom: 8px;
}
.cfg-cartao-ic svg { width: 18px; height: 18px; }
.cfg-cartao-nome { margin: 0; min-width: 0; font-family: var(--font-body); font-size: .98rem; font-weight: 560; line-height: 1.35; letter-spacing: normal; text-transform: none; }
.cfg-cartao-link {
  font: inherit; color: var(--text); background: none; border: 0; padding: 0; margin: 0; text-align: left; text-decoration: none;
  cursor: pointer; overflow-wrap: anywhere;
}
.cfg-cartao-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
/* foco pelo teclado: o contorno vai para o cartão inteiro (o ::after) e o nome fica sublinhado */
.cfg-cartao-link:focus-visible { outline: none; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cfg-cartao-link:focus-visible::after { outline: 2px solid var(--blue-200); outline-offset: 2px; }
html[data-tema="claro"] .cfg-cartao-link:focus-visible::after { outline-color: var(--navy-500); }
.cfg-cartao-area { color: var(--muted); font-size: .78rem; line-height: 1.3; }
.cfg-cartao-frase {
  margin: 0; color: var(--text-2); font-size: .86rem; line-height: 1.5; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
}
.cfg-cartao-pe { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: auto; padding-top: 10px; min-height: 24px; }
.cfg-cartao-abrir {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); font-size: .82rem; line-height: 1.3;
  transition: color var(--mov-rapido);
}
.cfg-cartao-abrir svg { flex: none; width: 14px; height: 14px; transition: transform var(--mov-rapido); }
.cfg-cartao:hover .cfg-cartao-abrir, .cfg-cartao:focus-within .cfg-cartao-abrir { color: var(--link); }
.cfg-cartao:hover .cfg-cartao-abrir svg, .cfg-cartao:focus-within .cfg-cartao-abrir svg { transform: translateX(3px); }
/* atalho para outra tela: sem fundo nem ícone, com a seta de "abre outra tela" */
.cfg-cartao.cfg-atalho { background: none; padding: 14px 16px; gap: 4px; }
.cfg-cartao.cfg-atalho .cfg-cartao-nome { font-size: .92rem; font-weight: 520; }
.cfg-cartao.cfg-atalho .cfg-cartao-pe { padding-top: 6px; }
.cfg-cartao.cfg-atalho .cfg-cartao-abrir { margin-left: 0; flex: 1 1 100%; color: var(--muted); }
.cfg-cartao.cfg-atalho .cfg-cartao-abrir svg { margin-left: auto; transform: rotate(-45deg); }
.cfg-cartao.cfg-atalho:hover .cfg-cartao-abrir svg, .cfg-cartao.cfg-atalho:focus-within .cfg-cartao-abrir svg { transform: translate(2px, -2px) rotate(-45deg); }
/* subtítulo leve com contagem (grupos de Integrações, "em outras telas" e resultados da busca) */
.cfg-grupo-tit {
  display: flex; align-items: center; gap: 10px; margin: 32px 0 14px; font-family: var(--font-display); font-size: var(--fs-l);
  font-weight: 480; color: var(--text); letter-spacing: normal; text-transform: none;
}
.cfg-grupo:first-child .cfg-grupo-tit, .cfg-resultados .cfg-grupo-tit { margin-top: 0; }
.cfg-grupo-n {
  min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--text-2);
  font-family: var(--font-body); font-size: .72rem; font-weight: 560; line-height: 20px; text-align: center;
}
.cfg-grupo-n:empty { display: none; }
.cfg-secao-corpo > .cfg-grupo + .cfg-grade:not(:empty):not(.oculto) { margin-top: 32px; }
.cfg-fora:empty { display: none; }
.cfg-secao.cfg-direta .cfg-fora .cfg-grupo-tit { margin-top: 32px; }
/* o que aparece: a grade enquanto nenhum cartão está aberto; aberto, só o contêiner dele */
.cfg-layout.buscando .cfg-secao { display: none; }
.cfg-layout:not(.cfg-foco) .cfg-secao:not(.cfg-direta) .cfg-item:not(.cfg-fora) { display: none; }
.cfg-layout.cfg-foco .cfg-item:not(.cfg-aberto), .cfg-layout.cfg-foco .cfg-grade, .cfg-layout.cfg-foco .cfg-grupo-tit,
.cfg-layout.cfg-foco .cfg-secao-cab, .cfg-layout.cfg-foco .cfg-busca { display: none; }
.cfg-item.cfg-aberto .card.cfg-fora-foco { display: none; }
/* cartão aberto (e o cartão único de uma área): plano, sem caixa em volta */
.cfg-secao-corpo .cfg-item.cfg-aberto .card.cfg-principal, .cfg-secao.cfg-direta .cfg-secao-corpo .cfg-item > .card {
  border: 0; border-radius: 0; background: none; padding: 0; margin: 0 0 24px;
}
.card.cfg-principal > .cfg-card-tit.cfg-tit-simples, .card.cfg-principal > .cfg-resumo, .cfg-secao.cfg-direta .cfg-resumo { display: none; }
.cfg-item.cfg-aberto .card.cfg-recolhivel:not(.cfg-fechado) { margin: 12px 0; }
.cfg-foco-cab { margin: 0 0 24px; padding: 0 0 20px; border-bottom: 1px solid var(--line-soft); }
.cfg-voltar {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin: 0 0 14px; color: var(--text-2); font-size: .9rem;
  text-decoration: none; border-radius: 4px; transition: color var(--mov-rapido);
}
.cfg-voltar svg { flex: none; width: 16px; height: 16px; transition: transform var(--mov-rapido); }
.cfg-voltar:hover { color: var(--text); }
.cfg-voltar:hover svg { transform: translateX(-3px); }
.cfg-foco-linha { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.cfg-foco-linha .cfg-cartao-ic { margin: 2px 0 0; }
.cfg-foco-txt { flex: 1; min-width: 0; }
.cfg-foco-nome { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.cfg-foco-tit { margin: 0; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 440; letter-spacing: -.01em; line-height: 1.2; overflow-wrap: anywhere; }
.cfg-foco-desc { margin: 6px 0 0; color: var(--text-2); font-size: .9rem; line-height: 1.5; }
.cfg-vazio.estado-vazio { border: 0; background: none; }
@media (max-width: 700px) {
  /* celular: uma coluna, com o ícone ao lado do texto para o cartão ficar baixo */
  .cfg-grade, .cfg-grade.cfg-inicio { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cfg-cartao { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 14px 16px; }
  .cfg-cartao > * { grid-column: 2; }
  .cfg-cartao > .cfg-cartao-ic { grid-column: 1; grid-row: 1 / span 4; margin: 0; }
  .cfg-cartao.cfg-atalho { display: flex; }
  .cfg-cartao-pe { padding-top: 6px; }
  .cfg-foco-cab { margin-bottom: 20px; padding-bottom: 16px; }
  .cfg-foco-linha { gap: 12px; }
}
/* fim do bloco do agente "config" */

/* ---- bloco do agente "donolista" (acabamento, 2026-11-11): último acesso, selo de alertas e ordem na lista
   de empresas do painel do dono (dono.js). O selo de alertas é um botão com cara de selo: alvo de 24 px. */
button.badge.emp-alertas { border: 0; font-family: inherit; cursor: pointer; min-height: 24px; white-space: nowrap; transition: box-shadow var(--mov-rapido) var(--mov-curva); }
button.badge.emp-alertas:hover { box-shadow: inset 0 0 0 1px currentColor; }
.emp-filtros > select.emp-ordem { flex: 0 1 240px; margin-left: auto; }
.ac-so { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 0 0 12px; }
@media (max-width: 700px) {
  .emp-filtros > select.emp-ordem { flex: 1 1 100%; margin-left: 0; }
}
/* fim do bloco do agente "donolista" */

/* ---- bloco do agente "miudos" (acabamento, 2026-11-11): atalhos "em outras telas" das Configurações
   (gestor-config-secoes.js). Área com muitos atalhos mostra os que pedem atenção e os primeiros; o botão
   .cfg-fora-mais ("Ver todos os N atalhos") abre o resto no lugar. No celular a fileira de atalhos vira
   lista compacta de linhas (nome e selo na mesma linha, "Fica em" embaixo), sem caixa em volta de cada um. */
.cfg-fora-mais { display: inline-flex; align-items: center; min-height: 32px; margin: 12px 0 0; font-size: .9rem; }
@media (max-width: 700px) {
  .cfg-grade.cfg-atalhos { gap: 0; border-top: 1px solid var(--line-soft); }
  .cfg-atalhos > .cfg-cartao.cfg-atalho {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; min-height: 52px;
    padding: 10px 2px; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0;
  }
  .cfg-atalhos > .cfg-cartao.cfg-atalho > * { grid-column: auto; }
  .cfg-atalhos > .cfg-cartao.cfg-atalho:hover, .cfg-atalhos > .cfg-cartao.cfg-atalho:focus-within { border-color: var(--line-soft); background: var(--surface); }
  .cfg-atalhos .cfg-cartao-nome { grid-column: 1; grid-row: 1; }
  .cfg-atalhos .cfg-cartao-area { grid-column: 1; }
  .cfg-atalhos .cfg-cartao-pe { display: contents; }
  .cfg-atalhos .cfg-cartao-pe .badge { grid-column: 2; grid-row: 1; justify-self: end; }
  .cfg-atalhos .cfg-cartao.cfg-atalho .cfg-cartao-abrir { grid-column: 1 / -1; font-size: .78rem; }
  .cfg-atalhos .cfg-cartao-link::after { border-radius: 0; }
  .cfg-fora-mais { min-height: 44px; }
}
/* fim do bloco do agente "miudos" */

/* ---------- agente "botoes" (acabamento, 2026-11-11): janelas, confirmações e indicador que filtra ----------
   UM bloco para todas as janelas do gestor e do dono (antes cada módulo trazia o seu):
     .modal-fundo > .modal ... janela de formulário ou de detalhe. Cabeçalho: botão .fechar e o primeiro <h2>;
                              corpo com respiro; rodapé .modal-pe com Cancelar discreto e a ação principal à
                              direita (o a11y.js arruma o rodapé das janelas antigas: padronizarRodape).
                              No celular a janela ocupa a tela inteira.
     .uid-fundo > .uid-caixa . confirmação ou aviso curto (ui-dialogo.js): caixa pequena no centro, também no
                              celular. .uid-perigo é o botão sólido de ação destrutiva (cor lisa).
     button.kpi ............. indicador que liga e desliga um filtro (aria-pressed), com o desenho do .kpi. */
.modal { background: var(--elevado); padding: 28px 32px; }
.modal > .fechar { margin: -6px -10px 8px 12px; }
.modal > h2, .modal > form > h2 {
  font-size: var(--fs-xl); font-weight: 480; line-height: 1.25; letter-spacing: -.01em; margin: 0 0 6px; overflow-wrap: anywhere;
}
.modal > h2 + .desc { margin-bottom: 18px; }
.modal-pe {
  display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line-soft);
}
.modal-pe .btn { min-width: 104px; }
.modal-pe .modal-pe-inicio { margin-right: auto; }
.modal .form-erro:empty { min-height: 0; margin: 0; }
@media (max-width: 640px) {
  /* bloco (não flex): a janela tem pelo menos a altura da tela e cresce com o conteúdo, que rola no fundo */
  .modal-fundo:not(.cr-painel-fundo) { display: block; padding: 0; }
  .modal-fundo:not(.cr-painel-fundo) > .modal {
    max-width: none !important; width: 100% !important; min-height: 100%; height: auto !important;
    border: 0; border-radius: 0; box-shadow: none; padding: 20px 16px 24px;
  }
  .modal > .fechar { margin: -4px -6px 8px 12px; }
  .modal-pe .btn { flex: 1 1 auto; }
}

.uid-fundo {
  position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
  padding: 16px; overflow-y: auto; background: rgba(0, 0, 0, .66); animation: ui-aparece var(--mov-rapido) ease-out;
}
.uid-caixa {
  width: 100%; max-width: 440px; margin: auto; padding: 24px 24px 20px; color: var(--text);
  background: var(--elevado); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .7); animation: ui-entra var(--mov) var(--mov-curva);
}
.uid-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.uid-icone {
  width: 32px; height: 32px; border-radius: 999px; flex: none; display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: .95rem; background: var(--accent-suave); color: var(--blue-200);
}
.uid-icone svg { width: 16px; height: 16px; }
.uid-icone.perigo, .uid-icone.erro { background: var(--err-bg); color: var(--err); }
.uid-titulo { font-family: var(--font-display); font-size: var(--fs-l); font-weight: 520; line-height: 1.3; margin: 0; overflow-wrap: anywhere; }
.uid-texto { margin: 0 0 20px; color: var(--text-2); font-size: .93rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.uid-botoes { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.uid-botoes .btn { min-width: 104px; }
/* ação destrutiva confirmada: vermelho liso (texto branco a 5,4:1), sem degradê */
.btn.uid-perigo, .btn.uid-perigo:hover { background: #C0392B; color: #fff; border-color: transparent; }
.btn.uid-perigo:hover { filter: brightness(1.08); }
html[data-tema="claro"] .uid-fundo { background: rgba(30, 28, 22, .42); }
html[data-tema="claro"] .uid-caixa { box-shadow: 0 24px 60px -30px rgba(30, 28, 22, .35); }
@media (max-width: 480px) { .uid-botoes .btn { flex: 1 1 auto; } }

button.kpi {
  display: block; width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer;
  -webkit-appearance: none; appearance: none; transition: border-color var(--mov-rapido);
}
button.kpi .kpi-num, button.kpi .kpi-rot, .kpi > span.kpi-num, .kpi > span.kpi-rot { display: block; }
button.kpi .kpi-num { font-family: var(--font-display); }
button.kpi:hover { border-top-color: var(--blue-250); }
button.kpi[aria-pressed="true"] { border-top: 2px solid var(--blue-200); padding-top: 13px; }
button.kpi[aria-pressed="true"] .kpi-rot { color: var(--text); font-weight: 560; }
button.kpi[aria-pressed="true"] .kpi-rot::before { content: "\2713\00a0"; }
/* fim do bloco do agente "botoes" */

/* Conheça a triagem por voz (agente "vozup", 2026-11-11): tela da aba quando a voz está fora do plano.
   Usa só os componentes da base; aqui ficam a largura de leitura e o número dos 3 passos. */
.vcn { max-width: 860px; }
.vcn .pg-desc a { white-space: nowrap; }
.vcn .secao-desc { margin-bottom: 4px; }
.vcn-n {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border: 1px solid var(--line); border-radius: 50%; font-size: var(--fs-xs); color: var(--text-2);
}
.vcn-passos .linha-ic { width: 24px; height: 24px; }
.vcn .linha-estado .chip { white-space: nowrap; }
.vcn h2[tabindex="-1"]:focus { outline: none; }
/* fim do bloco do agente "vozup" */

/* Vendas do painel do dono (dono-vendas.js, 2026-11-12): só componentes da base; aqui ficam o valor de cada
   linha à direita e o respiro dos filtros. */
.vd-filtros { margin: 14px 0 6px; }
.vd-lista .vd-valor { min-width: 96px; justify-content: flex-end; font-weight: 500; color: var(--text); white-space: nowrap; }
.vd-lista .vd-valor.vd-gratis { color: var(--muted); font-weight: 400; }
/* fim do bloco da aba Vendas */

/* Janela "Comprar minutos" (gestor-plano.js, 2026-11-13): cada pacote é uma linha de escolha com o preço à direita */
.pm-opcoes { display: grid; gap: 8px; margin: 14px 0 12px; }
.pm-opcao {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 44px; cursor: pointer; font-weight: 400;
  border: 1px solid var(--line); border-radius: var(--radius-s); background: transparent;
}
.pm-opcao:hover { background: var(--surface-2); }
.pm-opcao:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pm-opcao input { width: auto; margin: 0; flex: none; }
.pm-opcao .pm-texto { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pm-opcao .pm-sub { font-size: .82rem; color: var(--muted); }
.pm-opcao .pm-preco { font-size: 1.15rem; font-weight: 500; white-space: nowrap; }

/* movimento reduzido (prefers-reduced-motion): sem animações nem transições longas em nenhuma tela
   (auditoria de acessibilidade, pedido do Tony, 2026-11-11) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}