/* =============================================================================
   PERFECTUM DS — UI-3 · Componentes
   Convergência (não redesign) do que já existe: um sistema de cabeçalho,
   um de botão, um estado-vazio, + toast. Usa os tokens --pds-* (UI-1).
   Carregar DEPOIS de style.css e ANTES de perfectum-themes.css:
   assim vence o CSS legado por ordem de fonte, e o motor de temas ainda
   manda nas cores por tema (Corporate / Executive Light / Obsidian).
   Sem !important salvo onde é preciso vencer um !important legado morto.
   Zero mudança de layout/grid. Zero regra de negócio.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1 · CABEÇALHO DE PÁGINA — 11 "hero" + .top + 4 "kicker" convergem no tipo
   --------------------------------------------------------------------------- */

/* sobre-título (kicker/eyebrow): um tamanho legível, um tracking, cor de acento */
.page-kicker,.eyebrow,.scale-kicker,.kicker-mini,
.op2-k,.qk,.k,.r102-k,.rh-k,.abs-k,.sub-k,.cov-k,.c360-k,.p360 .k{
  font-size:11px;
  line-height:1.3;
  letter-spacing:.14em;
  font-weight:800;
  text-transform:uppercase;
  color:var(--pds-accent);
}

/* título da página: uma escala. Contrato-cliente / escalas / center-state
   deixam de ter 34/24/21px avulsos. */
.top h1,
.center-state h1,
.scale-hero h1,
.op2-hero h1,
[class$="-hero"] h1,
[class*="-hero"] > div > h1{
  font-size:var(--pds-fs-h1);
  line-height:1.15;
  letter-spacing:-.02em;
}
.top .sub,
.scale-hero p,
.op2-hero p,
[class*="-hero"] p{
  font-size:var(--pds-fs-sm);
}

/* ---------------------------------------------------------------------------
   2 · BOTÃO — estrutura única. Cores primária/secundária continuam vindo do
   motor de temas; aqui normalizamos forma, peso, tamanho e consertamos as
   variantes que hoje não têm estilo (ghost) ou saem com a cor errada (danger).
   --------------------------------------------------------------------------- */
.btn{
  border-radius:var(--pds-radius-sm);
  font-weight:650;
  font-family:var(--pds-font-sans);
  letter-spacing:0;
  gap:8px;
  padding:9px 15px;
  min-height:38px;
  transition:transform var(--pds-dur) var(--pds-ease),filter var(--pds-dur) var(--pds-ease),background-color var(--pds-dur) var(--pds-ease),border-color var(--pds-dur) var(--pds-ease);
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.04)}
.btn:active{transform:translateY(0)}

/* dois tamanhos (small consolida .small/.compact; tiny para linha de tabela) */
.btn.small,.btn.compact,.btn.sm{padding:7px 11px;font-size:12px;min-height:32px}
.btn.tiny{padding:4px 9px;font-size:11px;min-height:auto}
.btn.full-btn,.btn.full{width:100%}

/* GHOST — hoje sem regra (renderiza como primária). Passa a ser discreta. */
.btn.ghost,.btn.compact.ghost{
  background:transparent;
  border-color:var(--pds-line);
  color:var(--pds-ink-soft);
  box-shadow:none;
}
.btn.ghost:hover{
  background:color-mix(in srgb,var(--pds-accent) 7%,transparent);
  border-color:color-mix(in srgb,var(--pds-accent) 40%,var(--pds-line));
  color:var(--pds-ink);
}

/* DESTRUTIVA — .danger-btn / .danger / .danger-button convergem num vermelho
   sólido (não mais gradiente marrom). Baseline; o motor de temas reforça. */
.btn.danger-btn,.btn.danger,.btn.danger-button{
  background:var(--pds-danger);
  border-color:transparent;
  color:#fff;
  box-shadow:none;
}
.btn.danger-btn:hover,.btn.danger:hover,.btn.danger-button:hover{
  filter:brightness(1.06) saturate(1.05);
}
/* danger "de texto" (link) — mantém, só padroniza a cor */
.btn.danger-link,a.danger-link{
  background:transparent!important;
  border-color:var(--pds-line)!important;
  color:var(--pds-danger)!important;
  box-shadow:none!important;
}

.btn:disabled,.btn[disabled],.btn[aria-disabled="true"]{
  opacity:.5;cursor:not-allowed;transform:none;filter:none;
}
.btn[aria-busy="true"]{cursor:progress;opacity:.85}

/* ---------------------------------------------------------------------------
   3 · ESTADO VAZIO — style.css define .empty-state 2x (tabela vs grid).
   Harmoniza num só, sem !important (esta folha carrega depois).
   --------------------------------------------------------------------------- */
.empty-state{
  display:grid;
  place-items:center;
  gap:6px;
  text-align:center;
  min-height:150px;
  padding:32px 24px;
  border:1px dashed var(--pds-line);
  border-radius:var(--pds-radius-md);
  color:var(--pds-ink-soft);
  background:transparent;
}
.empty-state strong,.empty-state h3{
  display:block;
  color:var(--pds-ink);
  font-size:var(--pds-fs-lg);
  font-weight:600;
  margin:0;
}
.empty-state p{margin:0;font-size:var(--pds-fs-sm);color:var(--pds-ink-soft);max-width:42ch}
.empty-state .btn{margin-top:8px}

/* ---------------------------------------------------------------------------
   4 · TOAST — feedback efêmero pós-ação. Não existia; sucesso deixa de exigir
   reload + alerta no topo. JS: window.perfectumToast(msg, tone) em base.html.
   --------------------------------------------------------------------------- */
.pds-toast-wrap{
  position:fixed;
  right:18px;bottom:18px;
  z-index:1400;
  display:flex;flex-direction:column;gap:8px;
  max-width:min(380px,calc(100vw - 36px));
  pointer-events:none;
}
.pds-toast{
  pointer-events:auto;
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 14px;
  border:1px solid var(--pds-line);
  border-left:3px solid var(--pds-accent);
  border-radius:var(--pds-radius-md);
  background:var(--pds-surface);
  color:var(--pds-ink);
  box-shadow:var(--pds-elev-2);
  font-size:var(--pds-fs-sm);
  line-height:1.45;
  opacity:0;transform:translateY(8px);
  transition:opacity var(--pds-dur) var(--pds-ease),transform var(--pds-dur) var(--pds-ease);
}
.pds-toast.in{opacity:1;transform:translateY(0)}
.pds-toast.success{border-left-color:var(--pds-ok)}
.pds-toast.warning{border-left-color:var(--pds-warn)}
.pds-toast.danger{border-left-color:var(--pds-danger)}
.pds-toast b{font-weight:600}
.pds-toast .pds-toast-x{
  margin-left:auto;flex:0 0 auto;
  border:0;background:transparent;color:var(--pds-ink-faint);
  font-size:16px;line-height:1;cursor:pointer;padding:0 2px;
}
.pds-toast .pds-toast-x:hover{color:var(--pds-ink)}
@media (prefers-reduced-motion:reduce){
  .pds-toast{transition:none;opacity:1;transform:none}
}

/* ===========================================================================
   UI-4 · CAMPO / MOBILE — fundações. Só CSS global, sem markup.
   Prioridade: Operação e RH de campo (celular). Telas financeiras densas
   mantêm rolagem horizontal — não viram app.
   =========================================================================== */

/* iOS: campo com fonte < 16px faz o Safari dar zoom ao focar. Elimina isso. */
@media (max-width:767px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,textarea{ font-size:16px; }
}

/* Alvos de toque. Em ponteiro grosso ou tela estreita, nada de botão < 40px. */
@media (pointer:coarse), (max-width:640px){
  .btn{ min-height:44px; }
  .btn.small,.btn.compact,.btn.sm{ min-height:40px; padding-top:9px; padding-bottom:9px; }
  .btn.tiny{ min-height:36px; }
  .row-actions .btn,
  .mini-form .btn,.mini-form button,
  .inline-form .btn,.inline-form button,
  .financial-action .btn{ min-height:40px; }
  .mini-form input,.inline-form select,.inline-resolve input{ min-height:40px; }
  .row-actions,.financial-action{ gap:8px; }
  /* checkboxes/radios operacionais: área tocável decente */
  input[type="checkbox"],input[type="radio"]{ min-width:20px; min-height:20px; }
  /* ícone de ajuda: mantém o círculo, amplia a área de toque */
  .help-icon,.field-help,.inline-help-icon{ min-width:28px; min-height:28px; }
  /* linha de ações comprimida: 2 por linha em vez de 4 minúsculos */
  .row-actions > .btn,
  .row-actions > form > .btn{ flex:1 1 auto; min-width:calc(50% - 4px); justify-content:center; }
  .row-actions > form{ flex:1 1 auto; min-width:calc(50% - 4px); }
  .row-actions > form > .btn{ width:100%; }
}

/* Touch: o "lift" de hover fica preso ao tocar. Remove em telas sem hover. */
@media (hover:none){
  .btn:hover,
  .card:hover,.section:hover,
  .nav-link:hover,
  .quick-action:hover,.report-card:hover,.scale-doc-card:hover,
  [class*="-card"]:hover,[class*="-hero"]:hover{ transform:none; }
}

/* Elementos fixos respeitam o entalhe do aparelho. */
.help-fab{ bottom:max(20px, env(safe-area-inset-bottom, 20px)); }
.pds-toast-wrap{ bottom:max(18px, env(safe-area-inset-bottom, 18px)); }
@media (max-width:600px){
  .pds-toast-wrap{ left:12px; right:12px; max-width:none; }
}

/* ===========================================================================
   UI-6 · REFINAMENTO — tabs, breadcrumb, paginação, skeleton, modal.
   Convergência dos padrões existentes + primitivas para adoção gradual.
   Carrega depois de style.css: vence por ordem, sem !important.
   =========================================================================== */

/* --- Tabs de filtro (status/visão). Tokeniza .client-view-tabs (hoje hex,
   só escuro) e define .pds-tabs para novas telas. Mesmo visual nos 3 temas. --- */
.client-view-tabs,.pds-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:-2px 0 16px}
.client-view-tabs a,.pds-tabs a,.pds-tabs button{
  display:inline-flex;gap:8px;align-items:center;
  padding:8px 13px;border:1px solid var(--pds-line);border-radius:var(--pds-radius-pill);
  background:var(--pds-surface-2);color:var(--pds-ink-soft);
  font-size:var(--pds-fs-caption);font-weight:600;line-height:1;cursor:pointer;
  transition:border-color var(--pds-dur) var(--pds-ease),color var(--pds-dur) var(--pds-ease),background-color var(--pds-dur) var(--pds-ease);
}
.client-view-tabs a:hover,.pds-tabs a:hover,.pds-tabs button:hover{border-color:color-mix(in srgb,var(--pds-accent) 40%,var(--pds-line));color:var(--pds-ink)}
.client-view-tabs a.active,.pds-tabs a.active,.pds-tabs [aria-selected="true"]{
  border-color:var(--pds-accent);color:var(--pds-accent);
  background:var(--pds-accent-soft);font-weight:700;
}
.client-view-tabs b,.pds-tabs b{color:var(--pds-accent);font-variant-numeric:tabular-nums}

/* --- Breadcrumb (telas de detalhe aninhado). Adoção opcional. --- */
.pds-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px;font-size:var(--pds-fs-caption);color:var(--pds-ink-soft)}
.pds-breadcrumb a{color:var(--pds-ink-soft);text-decoration:none}
.pds-breadcrumb a:hover{color:var(--pds-accent)}
.pds-breadcrumb .sep{color:var(--pds-line-soft)}
.pds-breadcrumb [aria-current]{color:var(--pds-ink);font-weight:600}

/* --- Paginação (padrão 50 · 25/50/100 · sem "mostrar tudo"). --- */
.pds-pagination{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px;font-size:var(--pds-fs-sm);color:var(--pds-ink-soft)}
.pds-pagination .pds-pglinks{display:flex;gap:6px;align-items:center}
.pds-pagination a,.pds-pagination span.pg{
  min-width:34px;min-height:34px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 9px;border:1px solid var(--pds-line);border-radius:var(--pds-radius-sm);
  color:var(--pds-ink);text-decoration:none;font-variant-numeric:tabular-nums;
}
.pds-pagination a:hover{border-color:var(--pds-accent);color:var(--pds-accent)}
.pds-pagination span.pg.current{border-color:var(--pds-accent);color:var(--pds-accent);background:var(--pds-accent-soft);font-weight:700}
.pds-pagination span.pg.disabled{opacity:.45;pointer-events:none}
.pds-pagination select{min-height:34px;padding:4px 8px;width:auto}
@media (pointer:coarse),(max-width:640px){
  .pds-pagination a,.pds-pagination span.pg,.pds-pagination select{min-height:40px}
}

/* --- Skeleton (carregamento). window.perfectumSkeleton opcional. --- */
.pds-skel{display:block;border-radius:6px;background:linear-gradient(90deg,var(--pds-surface-2) 25%,color-mix(in srgb,var(--pds-ink) 8%,var(--pds-surface-2)) 37%,var(--pds-surface-2) 63%);background-size:400% 100%;animation:pds-skel 1.4s ease infinite}
.pds-skel.line{height:12px;margin:8px 0}
.pds-skel.line.short{width:40%}
.pds-skel.block{height:120px}
@keyframes pds-skel{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.pds-skel{animation:none}}

/* --- Modal (primitiva única; overlays legados continuam funcionando). --- */
.pds-modal-overlay{position:fixed;inset:0;z-index:1300;display:grid;place-items:center;padding:20px;
  background:color-mix(in srgb, #000 62%, transparent);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity var(--pds-dur) var(--pds-ease),visibility var(--pds-dur)}
.pds-modal-overlay.open{opacity:1;visibility:visible}
.pds-modal{width:min(560px,calc(100vw - 32px));max-height:88vh;overflow:auto;
  background:var(--pds-surface);color:var(--pds-ink);border:1px solid var(--pds-line);
  border-radius:var(--pds-radius-lg);box-shadow:var(--pds-elev-2);padding:22px}
.pds-modal h2,.pds-modal h3{margin-top:0}
@media (prefers-reduced-motion:reduce){.pds-modal-overlay{transition:none}}

/* =============================================================================
   UI-6.1 · REFINAMENTO VISÍVEL DE LISTAS
   Aditivo sobre style.css (carrega antes). Sem !important. Cor continua
   resolvida pelo motor de temas (perfectum-themes.css não toca em
   font-size/padding de th/td). Escopo restrito a telas de LISTA
   (.section.table-section) — tabelas largas de detalhe/conciliação usam
   min-width próprio e seguem intactas.
   ========================================================================== */

/* ---- A · piso de fonte 12px + legibilidade -------------------------------- */
/* style.css: th=10px, .table-counter=10.5px. Sobem para o piso do DS (12px).
   td já está em 12.5px (acima do piso) — deixado como está p/ não reflowar. */
.table-section thead th{font-size:var(--pds-fs-caption);letter-spacing:.055em}
.table-section .table-counter{font-size:var(--pds-fs-caption)}
.table-section td .muted,
.table-section td div.muted{font-size:var(--pds-fs-caption);line-height:1.4}
.table-section .table-toolbar label,
.audit-filters label{font-size:var(--pds-fs-caption)}

/* ---- D · tabela de lista vira cartão < 640px ----------------------------- */
/* Zero markup. Rótulo de coluna opcional via td[data-th] (adotado tela a
   tela na UI-6.2); sem ele, o cartão empilha valor a valor.
   UI-6.2: min-width:0 anula os `min-width` locais de <style> das telas
   (ex.: talent-bank 1040px) só nesta faixa, p/ o cartão empilhar de fato. */
@media (max-width:640px){
  .table-section .table-wrap{overflow:visible;border:0}
  .table-section .table-wrap>table,
  .table-section .table-wrap>table>tbody,
  .table-section .table-wrap>table>tbody>tr,
  .table-section .table-wrap>table>tbody>tr>td{display:block;width:auto}
  .table-section .table-wrap>table{min-width:0}
  .table-section .table-wrap>table>thead{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .table-section .table-wrap>table>tbody>tr{
    margin:0 0 10px;padding:12px 14px;border:1px solid var(--pds-line);
    border-radius:var(--pds-radius-md);background:var(--pds-surface)}
  .table-section .table-wrap>table>tbody>tr:hover{background:var(--pds-surface)}
  .table-section .table-wrap>table>tbody>tr>td{
    padding:6px 0;border:0;display:flex;gap:12px;align-items:baseline;
    justify-content:space-between;font-size:var(--pds-fs-sm)}
  .table-section .table-wrap>table>tbody>tr>td:last-child{padding-bottom:0}
  .table-section .table-wrap>table>tbody>tr>td[data-th]::before{
    content:attr(data-th);flex:0 0 auto;color:var(--pds-ink-soft);
    font-size:var(--pds-fs-caption);font-weight:600;letter-spacing:.04em;
    text-transform:uppercase}
  /* 1ª célula = título do cartão: valor sozinho, largura cheia, sem rótulo.
     [data-th] no seletor eleva a especificidade acima da regra ::before acima. */
  .table-section .table-wrap>table>tbody>tr>td:first-child{
    display:block;padding-top:0;font-size:var(--pds-fs-body);font-weight:600}
  .table-section .table-wrap>table>tbody>tr>td:first-child[data-th]::before,
  .table-section .table-wrap>table>tbody>tr>td:first-child::before{content:none;display:none}
  .table-section .table-wrap>table>tbody>tr>td[colspan]{justify-content:flex-start}
  .table-section .table-wrap>table>tbody>tr>td .row-actions{
    width:100%;justify-content:flex-start;flex-wrap:wrap;margin-top:2px}
  .table-section .table-wrap>table>tbody>tr>td>details,
  .table-section .table-wrap>table>tbody>tr>td pre{max-width:100%;min-width:0;overflow:auto}
}

/* =============================================================================
   UI-4.1 · MENU "⋯" DE AÇÕES EM LINHA DE TABELA (só < 640px)
   Zero mudança no desktop: .pds-row-menu{display:contents} remove o wrapper
   do fluxo, então .row-actions renderiza exatamente como hoje (o gatilho "⋯"
   fica display:none). Abaixo de 640px vira dropdown de verdade, posicionado
   via JS (fixed, calculado no clique — evita corte por overflow:auto do
   .table-wrap). JS: base.html, próximo aos outros dropdowns da página.
   ========================================================================== */
.pds-row-menu{position:relative;display:contents}
.pds-row-menu-trigger{display:none}
@media (max-width:640px){
  .pds-row-menu{display:inline-block}
  .pds-row-menu-trigger{
    display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;border-radius:var(--pds-radius-sm);
    cursor:pointer;font-size:20px;font-weight:700;line-height:1;
    color:var(--pds-ink-soft);border:1px solid var(--pds-line);
    background:var(--pds-surface-2);padding:0}
  .pds-row-menu.is-open>.pds-row-menu-trigger{color:var(--pds-accent);border-color:var(--pds-accent)}
  .table-section .table-wrap>table>tbody>tr>td .pds-row-menu>:is(.row-actions,.proposal-actions){
    position:fixed;z-index:2000;display:none;width:auto;margin-top:0;
    min-width:200px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);overflow:auto;
    flex-direction:column;flex-wrap:nowrap;gap:4px;padding:8px;
    background:var(--pds-surface);border:1px solid var(--pds-line);
    border-radius:var(--pds-radius-md);box-shadow:var(--pds-elev-2)}
  .pds-row-menu.is-open>:is(.row-actions,.proposal-actions){display:flex}
  .pds-row-menu>:is(.row-actions,.proposal-actions) .btn,
  .pds-row-menu>:is(.row-actions,.proposal-actions) form{width:100%}
  .pds-row-menu>:is(.row-actions,.proposal-actions) .btn{justify-content:flex-start;text-align:left}
}

/* =============================================================================
   UI-5.1 · MENU LATERAL RECOLHÍVEL (trilha de ícones) — só desktop (>900px)
   Zero mudança no menu aberto (estado padrão). Botão + JS: base.html.
   Monograma (.nav-mono) é gerado por JS a partir do próprio texto do link —
   não precisa de ícone por módulo; data-tooltip (já existe em cada link)
   mostra o nome completo ao passar o mouse quando recolhido.
   ========================================================================== */
.sidebar-collapse-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;flex:0 0 auto;border-radius:var(--pds-radius-sm);
  border:1px solid var(--pds-line);background:var(--pds-surface-2);
  color:var(--pds-ink-soft);cursor:pointer}
.sidebar-collapse-btn:hover{color:var(--pds-accent);border-color:var(--pds-accent)}
.sidebar-toggle-icon{display:inline-block;transition:transform var(--pds-dur) var(--pds-ease)}
.nav-mono{display:none}
@media (max-width:900px){.sidebar-collapse-btn{display:none}}
@media (min-width:901px){
  body.sidebar-collapsed{--sidebar:68px}
  body.sidebar-collapsed .sidebar-brand{flex-direction:column;gap:10px;padding:16px 8px}
  body.sidebar-collapsed .brand-copy,
  body.sidebar-collapsed .sidebar-close{display:none}
  body.sidebar-collapsed .sidebar-toggle-icon{transform:rotate(180deg)}
  body.sidebar-collapsed .sidebar-scroll{padding:8px 6px 14px}
  body.sidebar-collapsed .nav-group summary{
    height:10px;padding:8px 0 2px;font-size:0;line-height:0;pointer-events:none}
  body.sidebar-collapsed .nav-link{justify-content:center;padding:9px 4px;gap:0}
  body.sidebar-collapsed .nav-link span:last-child,
  body.sidebar-collapsed .nav-dot{display:none}
  body.sidebar-collapsed .nav-mono{
    display:inline-flex;align-items:center;justify-content:center;
    width:28px;height:22px;border-radius:var(--pds-radius-sm);
    background:var(--pds-surface-2);color:var(--pds-ink-soft);
    font-size:10px;font-weight:700;letter-spacing:.02em}
  body.sidebar-collapsed .nav-link.active .nav-mono{background:var(--pds-accent-soft);color:var(--pds-accent)}
  body.sidebar-collapsed .sidebar-footer .user-meta,
  body.sidebar-collapsed .sidebar-footer .logout-link span:last-child{display:none}
  body.sidebar-collapsed .sidebar-footer .logout-link{justify-content:center;display:flex}
  body.sidebar-collapsed .build-stamp{display:none}
}

/* UI-6.3 · fix contraste: .scale-hero tem fundo azul-marinho fixo (style.css,
   nunca tokenizado) mas o <h1> não define cor própria — herdava a tinta padrão
   do tema (escura no Executive Light), ficando ilegível. Kicker/subtítulo já
   tinham cor fixa clara; título ganha a mesma tratativa. */
html[data-perfectum-theme="light"] .scale-hero h1{color:#eef6fb!important}
/* Corporate/Obsidian: --pt-ink-strong ja e claro nesses temas, sem conflito. */


/* =============================================================================
   Guia de uso dos módulos (/help/guia-operacao) — UI-7
   100% em cima dos tokens --pds-* (ja resolvidos por tema em perfectum-ds.css),
   nenhuma cor fixa nova. Aditivo: nao reutiliza nem altera classes existentes.
   ========================================================================== */
.help-guide-intro{display:flex;gap:var(--pds-space-4);align-items:flex-start;background:var(--pds-accent-soft);border-radius:var(--pds-radius-lg);padding:var(--pds-space-5);margin:0 0 var(--pds-space-6)}
.help-guide-intro .dot{width:9px;height:9px;border-radius:5px;background:var(--pds-accent);flex:0 0 auto;margin-top:7px}
.help-guide-intro p{margin:0;font-size:var(--pds-fs-lg);color:var(--pds-ink);line-height:var(--pds-lh-body)}
.help-guide-toc{display:flex;flex-wrap:wrap;gap:var(--pds-space-2);margin:0 0 var(--pds-space-6)}
.help-guide-toc a{font-size:var(--pds-fs-sm);font-weight:var(--pds-weight-semibold);color:var(--pds-accent-2);background:var(--pds-surface-2);border-radius:var(--pds-radius-pill);padding:8px 16px;text-decoration:none}
.help-guide-toc a:hover{text-decoration:underline}
.help-module{margin-top:var(--pds-space-7);padding-top:var(--pds-space-5);border-top:1px solid var(--pds-line)}
.help-module:first-of-type{margin-top:0;padding-top:0;border-top:none}
.help-module-num{display:inline-block;font-size:var(--pds-fs-caption);font-weight:var(--pds-weight-semibold);letter-spacing:var(--pds-tracking-label);text-transform:uppercase;color:var(--pds-accent-2);background:var(--pds-surface-2);border-radius:var(--pds-radius-pill);padding:4px 12px;margin:0 0 var(--pds-space-3)}
.help-module h2{font-size:var(--pds-fs-h1);margin:0 0 var(--pds-space-2)}
.help-module h3{font-size:var(--pds-fs-h2);margin:var(--pds-space-6) 0 4px}
.help-module .dek{font-size:var(--pds-fs-lg);color:var(--pds-ink-soft);margin:0 0 var(--pds-space-5);max-width:640px;line-height:var(--pds-lh-body)}
.help-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--pds-space-4);margin:0 0 var(--pds-space-5)}
.help-order-note{display:flex;align-items:center;gap:var(--pds-space-3);background:var(--pds-surface-2);border-radius:var(--pds-radius-lg);padding:var(--pds-space-4) var(--pds-space-5);margin:0 0 var(--pds-space-5)}
.help-order-note p{margin:0;font-size:var(--pds-fs-body);color:var(--pds-ink-soft)}
.help-steps{list-style:none;margin:0 0 var(--pds-space-5);padding:0;counter-reset:helpstep}
.help-steps li{counter-increment:helpstep;display:flex;gap:var(--pds-space-4);padding:var(--pds-space-3) 0;border-bottom:1px solid var(--pds-line-soft)}
.help-steps li:last-child{border-bottom:none}
.help-steps li::before{content:counter(helpstep);font-family:var(--pds-font-sans);flex:none;width:28px;height:28px;border-radius:14px;background:var(--pds-accent);color:#fff;font-size:var(--pds-fs-sm);font-weight:var(--pds-weight-semibold);display:flex;align-items:center;justify-content:center}
.help-steps li p{margin:3px 0 0;font-size:var(--pds-fs-body);color:var(--pds-ink);line-height:var(--pds-lh-body)}
.help-shot{border-radius:var(--pds-radius-lg);overflow:hidden;border:1px solid var(--pds-line);box-shadow:var(--pds-elev-2);margin:4px 0 var(--pds-space-2);max-width:620px}
.help-shot img{display:block;width:100%;height:auto}
.help-shot-cap{font-size:var(--pds-fs-caption);color:var(--pds-ink-faint);margin:0 0 var(--pds-space-5)}
.help-tip{background:var(--pds-surface-2);border-left:3px solid var(--pds-accent);border-radius:10px;padding:var(--pds-space-3) var(--pds-space-4);font-size:var(--pds-fs-sm);color:var(--pds-ink-soft);margin:0 0 var(--pds-space-2)}
.help-tip b{color:var(--pds-ink)}
@media(max-width:720px){.help-info-grid{grid-template-columns:1fr}}


/* =============================================================================
   Central de Ajuda — hub (/help) — R10.20
   Aditivo ao bloco .help-* da R10.19. Mesmos tokens --pds-*.
   ========================================================================== */
.help-hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--pds-space-4);margin-top:var(--pds-space-2)}
@media(max-width:900px){.help-hub-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.help-hub-grid{grid-template-columns:1fr}}
.help-hub-card{display:flex;flex-direction:column;gap:var(--pds-space-2);background:var(--pds-surface);border:1px solid var(--pds-line);border-radius:var(--pds-radius-lg);padding:var(--pds-space-5);text-decoration:none;color:var(--pds-ink);transition:transform var(--pds-dur) var(--pds-ease),border-color var(--pds-dur) var(--pds-ease)}
a.help-hub-card:hover{transform:translateY(-2px);border-color:var(--pds-accent)}
.help-hub-card h3{font-size:var(--pds-fs-h3);margin:0;color:var(--pds-ink)}
.help-hub-card p{font-size:var(--pds-fs-sm);color:var(--pds-ink-soft);margin:0;line-height:var(--pds-lh-body)}
.help-hub-badge{align-self:flex-start;font-size:11px;font-weight:var(--pds-weight-semibold);letter-spacing:var(--pds-tracking-label);text-transform:uppercase;border-radius:var(--pds-radius-pill);padding:3px 11px}
.help-hub-badge.ready{color:var(--pds-ok-ink);background:var(--pds-ok-soft)}
.help-hub-badge.soon{color:var(--pds-ink-faint);background:var(--pds-surface-2)}
.help-hub-card.disabled{opacity:.6;cursor:default}
.help-hub-card.disabled:hover{transform:none;border-color:var(--pds-line)}


/* =============================================================================
   UI-7 · Barra lateral — largura responsiva, texto maior e ALTURA pro menu
   Problema: logo grande no topo + bloco Aparência/usuário/Sair/versão no rodapé
   ocupavam mais da metade da altura, sobrando espaço pra ~1 grupo de módulos.
   Agora: cabeçalho e rodapé compactos; o menu rolável ganha a altura.
   Texto dos itens 15px, títulos de grupo 12px. Recolhido (68px) e mobile iguais.
   Seletores do rodapé usam .sidebar-footer pra vencer perfectum-themes.css
   (carrega depois deste arquivo).
   ========================================================================== */
@media (min-width:901px){
  :root{--sidebar:clamp(300px,17vw,360px)}
}

/* cabeçalho compacto */
.sidebar-brand{padding:10px 12px 8px}
.official-logo-card{min-height:0;padding:5px 10px;border-radius:12px}
.brand-logo-official{width:128px}
.brand-copy{margin-top:8px;padding:0 40px 0 2px;display:flex;align-items:center;gap:8px}
.brand-copy strong{font-size:13px;letter-spacing:.08em;flex:1;min-width:0}
.brand-copy span{display:none}
.brand-copy small{margin:0;font-size:11px;padding:2px 8px}
@media (min-width:901px){
  .sidebar-collapse-btn{position:absolute;right:12px;bottom:8px}
  body.sidebar-collapsed .sidebar-collapse-btn{position:static;display:flex;margin:8px auto 0}
}

/* menu: mais itens visíveis, texto maior */
.sidebar-scroll{padding:8px 12px 12px}
.nav-group{margin:2px 0 6px}
.nav-group summary{font-size:12px;letter-spacing:.1em;padding:9px 12px 6px}
.nav-group summary::after{font-size:15px}
.nav-link{font-size:15px;line-height:1.25;gap:12px;padding:9px 12px;margin:2px 0}
.nav-dot{width:7px;height:7px;flex:0 0 auto}

/* rodapé compacto: Aparência e usuário em linhas baixas; Sair + versão lado a lado */
.sidebar-footer{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 8px;padding:8px 10px 10px}
.sidebar-footer>.perfectum-theme-trigger,.sidebar-footer>.user-card{grid-column:1/-1}
.sidebar-footer .perfectum-theme-trigger{margin:0;padding:6px 8px;gap:8px}
.sidebar-footer .perfectum-theme-trigger-icon{width:26px;height:26px;font-size:15px}
.sidebar-footer .perfectum-theme-trigger b{font-size:13px}
.sidebar-footer .perfectum-theme-trigger small{margin-top:0;font-size:11px}
.sidebar-footer .user-card{padding:6px 8px;gap:8px}
.sidebar-footer .user-avatar{width:30px;height:30px;font-size:13px}
.sidebar-footer .user-meta strong{font-size:13px}
.sidebar-footer .user-meta span{margin-top:0;font-size:11px}
.sidebar-footer .logout-link{margin:0;padding:4px 6px;font-size:13px}
.sidebar-footer .build-stamp{margin:0;text-align:right;font-size:10.5px;opacity:.6}
.sidebar [data-tooltip]::after{max-width:300px;font-size:13px}

/* rodapé no estado recolhido (68px): só ícones, sem texto vazando */
@media (min-width:901px){
  body.sidebar-collapsed .sidebar-footer{display:block;padding:8px 6px}
  body.sidebar-collapsed .sidebar-footer .perfectum-theme-trigger{justify-content:center;padding:6px 0;margin-bottom:6px}
  body.sidebar-collapsed .sidebar-footer .perfectum-theme-trigger>span:nth-child(2),
  body.sidebar-collapsed .sidebar-footer .perfectum-theme-trigger>i{display:none}
  body.sidebar-collapsed .sidebar-footer .user-card{justify-content:center;padding:6px 0;margin-bottom:6px}
  body.sidebar-collapsed .sidebar-footer .logout-link{font-size:0;text-align:center;padding:6px 0}
  body.sidebar-collapsed .sidebar-footer .logout-link::before{content:"\23FB";font-size:16px}
}