/* ============================================================================
   morada-ca.css — Design System "Morada-CA" · v8 (padrão Apple, fase 1: tokens + shell — 2026-08-17)
   ----------------------------------------------------------------------------
   Padrão visual oficial do sistema Morada Blindada, baseado na Conta Azul.
   Cobertura: tokens · botões · forms · dropdowns (+ menu de conta) · KPI strip ·
   tabelas · pills/chips · modais · empty state · datepicker · banners ·
   paginação · dashboard (card · stat-card · lista de contas · charts SVG · layout) ·
   assistente Levi (avatar · chip · ação de IA · painel · welcome · análise).
   (v2 acrescentou datepicker, banners e paginação — seções 11–13.
    v3 acrescentou os primitivos de dashboard e os charts SVG — seção 14.
    v4 acrescentou o menu de conta/configurações — seção 5.3.
    v5 acrescentou o assistente Levi — seção 15.
    v6 documentou a marca/logo na galeria — sem novos componentes CSS.
    v7 [Guia Visual/FASE 0]: thead do .mb-table agora NAVY + underline laranja
       (padrão fechado no PADROES.md — antes era cinza e cada tela sobrescrevia);
       + .mb-tablewrap (moldura arredondada) · .mb-table--compact · tfoot totalizador ·
       .mb-search · .mb-checkbox/.mb-radio standalone · .mb-upload/.mb-file ·
       [readonly] e .is-invalid · seção 16 ajuda de campo (.pf-help/.pf-orient/.pf-rule,
       promovidas do pessoa_form) · seção 17 toasts (.mb-toast) · seção 18 skeleton.)

   Decisões travadas (handoff 2026-05-29 + amostragem das capturas):
     - Fonte ................ Plus Jakarta Sans (Google Fonts)
     - Rail/sidebar ......... --navy  #0a1d3a
     - Accent de marca ...... --brand-orange #ea5811  (nav/detalhe, NUNCA botão)
     - Azul secundário/link . --brand-blue #15669d     (amostrado)
     - Verde principal ...... #1d9c45  (botão Salvar/Confirmar/Criar — amostrado)
     - Vermelho destrutivo .. #b7182a  (botão Excluir/Descartar — amostrado)

   Regra de botões (conforme conversa anterior + decisão 2026-05-29):
     VERDE     = ação principal (Salvar, Confirmar, Criar)
     AZUL      = secundária, SEMPRE SÓLIDA (Cancelar, Exportar, Voltar, Aplicar)
     VERMELHO  = destrutiva (Excluir, Descartar)
   Nota: .mb-btn--ghost (azul-outline) NÃO é a secundária canônica — a
   secundária é azul sólido. Os usos legados de --ghost na galeria (Voltar/
   Exportar/Ações ▾/modal) ficaram pendentes de limpeza em conversa dedicada.
   ============================================================================ */

/* v8 (2026-08-17): a fonte é a do SISTEMA — SF Pro no Mac/iPhone (via -apple-system) e Inter nos
   demais. A Plus Jakarta saiu (era a marca do v7/Conta Azul). Inter é o fallback carregado.
   🔴 INTER HOSPEDADA AQUI (23/08, Rafael: "o carregamento está estranho… recarrega sempre o menu e a barra de cima"):
   o `@import` do Google era uma ida externa EM SÉRIE a cada troca de tela — o navegador baixava este CSS, só então
   descobria o import, ia ao Google e só depois pintava. Agora os dois arquivos (latin · latin-ext, fonte variável
   400–700) moram em /sistema/fonts e só são baixados onde a Inter é usada (no Mac nem isso: SF Pro vem antes).
   ❌ Nada externo no caminho da primeira pintura. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ----------------------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------------------- */
:root {
  /* --- Marca ------------------------------------------------------------- */
  --navy:            #0a1d3a;   /* rail / sidebar                            */
  --navy-700:        #102845;   /* hover de item no rail                     */
  --brand-orange:    #ea5811;   /* accent de navegação/detalhe (não-botão)  */
  /* Verde do WhatsApp — cor de MARCA DE TERCEIRO, não da nossa régua: existe só no ícone/botão
     que abre a conversa. Promovido em 19/08 por estar em 2 telas (pessoas.php e a ficha) com o
     mesmo valor escrito à mão. ⚠️ Não usar para "positivo" — para isso a régua tem o verde dela. */
  --wa-green:        #1fa855;
  --brand-orange-50: #fdeee6;   /* tint do accent                           */
  --brand-orange-700:#b8470f;   /* laranja queimado (texto sobre tint claro) */
  /* v8: o azul é o systemBlue da Apple (o da web, #14487f — mais contraste em texto que o
     #007AFF do iOS). É a cor de AÇÃO: botão primário, link, foco. Navy fica só para SELEÇÃO. */
  /* 🔴🔴 PALETA FECHADA (Rafael, 2026-08-19: "aceito tua proposta"). O azul de ação era o
     systemBlue #0071e3 e o vermelho o #e5453f — os dois "gritantes" na avaliação dele.
     A troca não foi por gosto: o navy #0a1d3a já é a MARCA (logo, sidebar) e hoje virou também
     o menu e o foco, então o azul da Apple deixava o sistema com DUAS identidades na mesma tela
     — e a mais viva ganhava. Agora o azul de ação é o MESMO tom do navy, só mais claro.
     ⚠️ Isto NÃO revoga a decisão de 18/08 ("vamos usar as cores atuais"): lá ele recusou
     alinhar nossos hex ao kit da Apple; aqui ele pediu justamente sair do azul da Apple.
     Contraste sobre branco: azul 9:1 · vermelho 7:1 (mínimo 4,5). */
  --brand-blue:      var(--navy);   /* 🔴 22/08 (E, "um azul só"): ação · link · foco = o NAVY. O #14487f saiu do visível. */
  --brand-blue-700:  #061426;       /* hover do navy (mais fechado) */
  --brand-blue-50:   rgba(10,29,58,.08);   /* tint do navy (fundo dos botões secundários, chips) */
  --tint:            var(--brand-blue);   /* apelido v8 (o guia chama de --tint) */
  /* v8: cores de SISTEMA da Apple, como estão (iOS/macOS claro). Papel fixo: green OK ·
     red impedimento · orange atenção · purple demonstração/score · indigo pessoas · teal/pink
     livres para gráfico. Tag/pílula/banner = fundo a ~15% + texto NA COR (receita "tinted"). */
  /* 🔴 DECISÃO FECHADA (Rafael, 2026-08-18): "vamos usar as cores atuais do nosso sistema".
     Estas são as NOSSAS — 5 delas divergem de propósito do Apple macOS 27 UI Kit:
     blue #007aff (kit #0088FF) · orange #ff9500 (#FF8D28) · purple #af52de (#CB30E0) ·
     teal #30b0c7 (#00C3D0) · indigo #5856d6 (#6155F5); e --danger #a4262c (#FF383C), que
     ele ajustou à mão em 18/08 por ser mais discreto em texto. Green/yellow/pink JÁ batem.
     ⚠️ NÃO "atualizar" para os valores do kit — foi visto lado a lado e recusado. */
  --sys-blue:   #007aff; --sys-green: #34c759; --sys-red:    #ff3b30; --sys-orange: #ff9500;
  --sys-yellow: #ffcc00; --sys-purple:#af52de; --sys-indigo: #5856d6; --sys-teal:   #30b0c7;
  --sys-pink:   #ff2d55; --sys-gray:  #8e8e93;
  /* 🔴🔴 CINZAS POR OPACIDADE — régua do Apple macOS 27 UI Kit (Rafael mandou o arquivo do Sketch em
     2026-08-18; grupos Labels/Fills/Separators do tema Light, lidos do próprio kit).
     POR QUE MUDOU: os hex antigos (#1d1d1f · #6e6e73 · #86868b) vinham do SITE da Apple — cor de
     marketing, pensada para fundo branco conhecido. O sistema define texto e preenchimento como
     PRETO COM ALFA, e a diferença aparece exatamente onde o v8 investiu: sobre VIDRO. Texto opaco
     não deixa o fundo atravessar e o material lê como plástico branco; com alfa, ele acompanha.
     Medido no vidro fino (fundo efetivo rgb(174,194,218)): o secundário sai de 2,79 para 3,46 de
     contraste.
     ⚠️ O TERCIÁRIO É NOSSO, NÃO O DA APPLE: ela usa 25%, que mede 1,75 sobre vidro e 1,83 sobre
     branco — ilegível para quem passa o dia lendo linha de tabela ("desde 15/08", "atualizado
     há…", os rótulos dos tiles). Ficou em 40%, que preserva a adaptação ao fundo sem sumir.
     ⚠️ Não usar estes tokens sobre fundo ESCURO — ali a cor é branca explícita (menu ativo,
     `#fff` do navy). Conferido: nenhum uso de --text sobre navy. */
  --fill:            rgba(120,120,128,.12);   /* 🔴 22/08 (E): os FILLS DA APPLE são CINZA (120,120,128), não preto — tertiarySystemFill .12 (campo, trilho, hover). Era preto 10%: medido #e5e5e5 no campo e #dcdcde no trilho sobre o fundo (Rafael: "os cinzas muito escuros"). */
  --fill-hover:      rgba(120,120,128,.16);   /* secondarySystemFill — pressionado/hover do fill */
  --fill-soft:       rgba(120,120,128,.10);   /* o trilho das abas SOBRE O FUNDO cinza (um degrau abaixo do campo, senão escurece) */

  /* --- Semânticas (ação) ------------------------------------------------- */
  /* v8: o botão principal deixou de ser VERDE (é azul, --brand-blue). O verde e o vermelho
     seguem como ESTADO (pílula, banner, toggle) e o vermelho cheio no destrutivo do modal. */
  /* 19/08: último resquício do systemGreen cru — é o fundo do TOGGLE ligado, e ele ficou
     verde-neon ao lado de tudo o mais que baixou de tom. Agora é o mesmo verde do sistema. */
  --success:         var(--success-700); /* estado OK · toggle ligado             */
  /* 🔴 19/08 (Rafael, com o print do selo "88 · Excelente": "o ativo pode ser assim"): o verde do
     sistema passou a ser o MESMO do selo de score depois que ele foi dessaturado. Antes: tint do
     systemGreen a 15% + texto #1f9a3f — vivo demais ao lado do azul e do vermelho novos, e ainda
     por cima aparecendo em TODA linha de lista ("Ativo").
     ⚠️ Um verde só no sistema: pílula Ativo, tag verde e selo de score agora combinam. */
  --success-700:     #436426;   /* texto verde (= o do selo de score)        */
  --success-50:      #eaf2e3;   /* tint verde (= o do selo de score)         */
  /* ⟳ 2026-08-17 (Rafael: "testar um vermelho um pouco mais discreto"): o systemRed #ff3b30 é neon
     demais em pílula/número; o vermelho de ESTADO ficou um passo mais fechado e menos saturado.
     `--sys-red` continua sendo a referência da Apple (gráficos/ícones), o estado usa estes três. */
  --danger:          #a4262c;   /* impedimento · destrutivo                 */
  --danger-700:      #831d22;   /* hover / texto vermelho sobre tint        */
  --danger-50:       rgba(164,38,44,.13);  /* tint vermelho                  */
  /* 🔴 SOBRE O NAVY (faixa `.mb-hero`): os tons normais somem no fundo escuro — `--danger`
     (#b7182a) sobre o navy fica ilegível. Estes são os pares claros, e existem como TOKEN
     porque hex solto em tela é o que o check_padroes pega (e com razão: a 2ª tela usaria
     outro vermelho). 1º uso: contadores do "Meu dia". */
  /* v8 (2026-08-17): a faixa deixou de ser navy (virou tiles brancos) — os tokens ficam pelo NOME
     (16 telas os usam) mas apontam para o vermelho/laranja de TEXTO sobre fundo claro. */
  --on-navy-danger:  var(--danger-700);
  --on-navy-warning: var(--warning);

  /* --- Semânticas (estado/valor) ----------------------------------------
     Usadas em valores numéricos e pills de status, NÃO em botões.          */
  /* 🔴 19/08: era o systemGreen CRU (#34c759) — o verde mais vivo que sobrava no sistema, e ele
     pintava a TAG verde, o ✓ do toast e a régua de feedback. Agora é o mesmo verde do selo de
     score, fechando o assunto: existe UM verde no MB 360. */
  --positive:        var(--success-700);  /* valor positivo / tag verde / ✓ do toast */
  --positive-700:    #1f9a3f;   /* verde escuro: TEXTO sobre tint verde claro (par do
                                   --brand-blue-700 e --brand-orange-700). Nasceu do chip de
                                   tamanho selecionado em Uniformes e EPIs, que carregava o
                                   hex solto — o verde do DS (#28b745) não tem contraste
                                   suficiente como texto sobre fundo claro. */
  --negative:        var(--danger-700);  /* valor negativo em TEXTO — o tom fechado (Rafael 17/08: "textos" mais discretos) */
  --warning:         #c46f00;   /* texto de aviso (systemOrange escurecido p/ texto) */
  --warning-bg:      rgba(255,149,0,.15);  /* tint laranja (~15%)             */
  --warning-700:     #8f5000;   /* âmbar escuro: TEXTO sobre --warning-bg. Fecha o par que
                                   faltava (já existiam --brand-orange-700, --positive-700,
                                   --brand-blue-700, --danger-700 com essa mesma função).
                                   🔴 Medido em 19/08: --warning sobre --warning-bg dá 3,31:1,
                                   abaixo do mínimo de 4,5:1 para texto pequeno; este dá 5,61:1.
                                   ⚠️ Use-o para TEXTO sobre o tint; --warning segue valendo
                                   para ícone/traço e para texto sobre fundo branco.
                                   Aplicado em: --pill-partial-fg, .mb-banner--warning e
                                   .mb-tag--demo (os 3 pontos do DS que punham texto âmbar
                                   sobre o tint âmbar). Para voltar ao tom anterior, é trocar
                                   --warning-700 por --warning nesses três — mas o contraste
                                   cai de 5,61:1 para 3,31:1. */
  --purple-700:      #9a3fca;   /* texto roxo sobre tint (demonstração/score) */
  --purple-50:       rgba(175,82,222,.14);
  --info:            var(--brand-blue);  /* pill "parcial"                  */

  /* --- Pills de status (referenciam os tokens semânticos — padrão único) - */
  --pill-paid-bg:    var(--success-50);    --pill-paid-fg:    var(--success-700); /* recebido/pago */
  --pill-open-bg:    rgba(120,120,128,.14); --pill-open-fg:  #55606e;             /* pausado       */
  /* 🔴🔴 RÉGUA DAS PÍLULAS (Rafael, 2026-08-19: "muda a cor da pílula" + a sugestão aceita).
     O problema: `partial` (banco de talentos, admissão em andamento, análise, proposta) usava o
     AZUL — a mesma cor que no sistema inteiro significa "clique aqui". Havia pílula azul que não
     era clicável, e depois da paleta nova ela ficou idêntica ao botão primário.
     Agora o mapa é um só, e cada cor tem UM significado:
       🟢 verde  = está em ordem (ativo, pago)
       🟡 âmbar  = em trânsito, ainda não terminou (banco, admissão, análise, proposta)
       🔴 vermelho = pendência ou fim de linha (desligado, bloqueado, cadastro pendente)
       ⚪ cinza  = pausado, sem alarme (afastado — o vínculo existe, a pessoa é que não está)
     🔵 AZUL NÃO É MAIS COR DE PÍLULA: ficou só para o que se CLICA.
     ⚠️ `open` era âmbar e virou cinza no mesmo movimento — senão afastado e em-trânsito ficariam
     com a MESMA cor e significados diferentes, que é o problema que estamos resolvendo.
     ⚠️ O comentário do mb_status_pill() (pessoas_lib.php) dizia "afastado = azul" e estava
     desatualizado desde antes disto — corrigido junto. */
  --pill-partial-bg: var(--warning-bg);    --pill-partial-fg: var(--warning-700); /* em trânsito   */
  --pill-overdue-bg: var(--danger-50);     --pill-overdue-fg: var(--danger-700);  /* vencido       */

  /* --- Neutros / superfícies (cool grays da UI CA) ----------------------- */
  /* v8: neutros da Apple — fundo #f5f5f7, superfícies brancas, bordas quase invisíveis. */
  --bg:              #f5f5f7;   /* fundo da página                          */
  /* v8: o wash de fundo (um azul quase branco no topo) é o que dá tom ao vidro da sidebar e da title bar
     — Liquid Glass sobre cinza chapado não se distingue de um fundo opaco */
  /* 🔴 O FUNDO É O QUE O VIDRO REVELA (Rafael 2026-08-18: "o efeito vidro está fraco demais…
     não aparece o fundo"). O wash anterior ia de #eef2f9 a #f5f5f7 — branco translúcido sobre
     quase-branco não mostra NADA, por mais desfoque que se ponha. No macOS o que aparece atrás
     da sidebar é o WALLPAPER; aqui o equivalente é este gradiente, e ele precisa ter cor.
     ⚠️ Ele é o fundo da ÁREA DE TRABALHO — os cards e tabelas são brancos por cima, então a cor
     aparece nas bordas e por trás do cromo, não sob o conteúdo. */
  /* ⚠️ A COR TEM DE PERCORRER A DIAGONAL, não só o topo: a sidebar é uma COLUNA vertical e um
     gradiente que só colore os primeiros 400px deixa 80%% dela sobre cinza morto — foi o que
     aconteceu na 1ª tentativa. Este é o mesmo desenho que o CATÁLOGO usa para mostrar vidro
     (linear 135deg, azul → pêssego → verde), com menos saturação porque aqui é fundo de
     trabalho e não vitrine. */
  /* ⚠️ O FUNDO FICA CLARO — decisão do Rafael em 18/08 ("não muda a cor do fundo… volta atrás"),
     depois de vermos na tela o que a cor faz. CONSEQUÊNCIA ACEITA E MEDIDA: o vidro da sidebar e da
     title bar fica IMPERCEPTÍVEL — branco translúcido sobre um fundo quase branco devolve
     rgb(245,249,253), dez pontos do branco puro. Não é defeito do material nem do desfoque: não há
     o que revelar. O teste que provou isso está no histórico (fundo forte → vidro nítido).
     ⚠️ Onde o vidro CONTINUA valendo é no que flutua sobre CONTEÚDO — paleta ⌘K, menu de conta,
     calendário, drawer do Levi —, porque ali atrás há tabela, não fundo. */
  --bg-wash:         #f5f5f7;   /* 22/08 (E): chapado, neutro — o cinza de janela do macOS. O degradê azulado (#eef2f9) competia com o navy e amarelava o branco dos cartões. */
  --bg-subtle:       #efeff2;   /* faixa/zebra                              */
  --surface:         #ffffff;   /* cards, modais, campos                    */
  --surface-2:       #f7f7f9;
  /* 🔴 ABA ATIVA (Rafael 2026-08-19: "tira aquele retângulo branco… está forte demais").
     Era branco puro + sombra: sobre a barra cinza clara isso vira um bloco que salta mais que
     o próprio texto. Agora é um cinza que EMPILHA sobre o --fill da barra (.10 sobre .10 ≈ .19),
     então a aba ativa aparece por ser mais escura que as irmãs, sem virar um cartão branco.
     ⚠️ UM TOKEN SÓ porque a regra vive em 3 arquivos (DS, abas_nav.php, pessoa_form.php) —
     antes disso, mudar de ideia custava três edições e duas ficavam para trás.
     ⚠️ REVERTIDO EM 20/08 — o branco voltou (ver o token abaixo). O texto acima fica como
     HISTÓRICO: ele explica por que o cinza existiu de 19 a 20/08. */
  --seg-ativo-bg:    var(--surface);   /* 🔴 DE VOLTA AO BRANCO (Rafael 2026-08-20, no item 3 do catálogo: "vamos voltar para o branco") — a régua da Apple: o segmento ativo é ELEVADO, não mais escuro. O cinza .06 tinha sido a divergência consciente de 19/08 ("mais um branco não lê como elevação"); o que mudou é que hoje METADE dos segmenteds do sistema já é branca (configuracoes · calculadora · permissoes_log · admissoes_analise · acompanhamento), então o cinza é que passou a ser a exceção. Elevação = --seg-ativo-sh, abaixo. */
  --seg-ativo-sh:    0 1px 3px rgba(0,0,0,.14), 0 0 0 .5px rgba(0,0,0,.04);   /* a elevação do segmento ativo — os MESMOS valores que os segmenteds já brancos usam */
  --border:          rgba(0,0,0,.08);     /* 22/08 (E): UMA força de linha — eram 6/8/10/12/17% espalhados. separatorColor do macOS. */
  --border-strong:   rgba(0,0,0,.12);     /* borda de controle (campo, paginação, select) — era #d2d2d7 (17%) */
  --overlay:         rgba(0, 0, 0, .35);  /* scrim de modal                 */
  /* Rafael 2026-08-17 (print do menu de conta com a tela atravessando): "efeito vidro está exagerado" —
     de .72 para .90 e blur maior. É a dose da Apple no macOS (menus ~90% opacos): o vidro se percebe
     na borda e no tom, não lendo o que está atrás. */
  /* ❌❌ O LIQUID GLASS SAIU DO SISTEMA (Rafael, 2026-08-18: "vamos tirar o efeito vidro de tudo").
     POR QUÊ, e é medição, não gosto: o material ficou espremido entre dois extremos.
       · onde ele APARECIA (painel do menu, paleta) ele ATRAPALHAVA — flutuam sobre TEXTO, e texto
         atrás de texto é ilegível: o painel teve de ir a 94%% de opacidade para o menu ser lido.
       · onde ele NÃO atrapalhava (sidebar, title bar) ele era INVISÍVEL — atrás delas só há o fundo
         da página, e branco a 72%% sobre #eef2f9 devolve rgb(245,249,253): dez pontos do branco puro.
     Testamos tudo na tela: fundo colorido, fundo forte, opacidade de .52 a .94. O efeito só valia
     sobre GRÁFICO — que é a minoria das telas. Um sistema de dados é branco com texto escuro; não é
     o wallpaper do macOS, e o material não tem o que revelar.
     Os tokens FICAM (dezenas de regras os usam) apontando para superfície OPACA. A profundidade
     agora vem de SOMBRA + ANEL, que é o que sempre separou as camadas de verdade.
     ⚠️ Para reverter: --glass .80 · --glass-cromo .72 · --glass-blur blur(30px) saturate(1.8). */
  --glass:           var(--surface);
  --glass-cromo:     var(--surface);
  --glass-blur:      none;
  --glass-ring:      inset 0 0 0 .5px rgba(255,255,255,.7), 0 0 0 .5px rgba(0,0,0,.06);
  /* v8 fase 3 (2026-08-17): CABEÇALHO DE TABELA — era navy + filete laranja; virou claro (a lista
     "inset" da Apple). Tokens porque ~12 telas repetem a regra do thead à mão (sticky/grid): todas
     apontam para cá, e mexer aqui muda todas. */
  --th-bg:           var(--surface);
  --th-fg:           var(--text-muted);
  --th-border:       var(--border-strong);

  /* --- Texto ------------------------------------------------------------- */
  --text:            rgba(0,0,0,.85);     /* macOS 27 · Labels 1 Primary */   /* corpo / títulos (Apple label)            */
  --text-muted:      rgba(0,0,0,.55);     /* ⚠️ 55%, não os 50% do kit — MEDIDO: 50% dá 3,98 de contraste sobre branco (o #6e6e73 antigo dava 5,07) e a leitura piorava; 55% dá 4,76 no branco E 4,01 no vidro (era 2,79) */   /* labels, legendas (secondary label)       */
  --text-subtle:     rgba(0,0,0,.40);     /* 22/08 (E): 40% — placeholder/desabilitado um degrau de verdade abaixo dos 55% (47 não se distinguia). A Apple usa 25%: some. */
  --text-on-dark:    #ffffff;   /* texto sobre navy                         */
  /* 🔴 19/08: o texto clicável é NAVY, não azul. O azul ficou para o que é FUNDO (botão primário,
     checkbox marcado, anel de foco) — a letra usa o navy da marca. ⚠️ Se um dia o link precisar
     voltar a se distinguir por cor, é AQUI (uma linha), não regra a regra. */
  --link:            var(--navy);

  /* --- Tipografia -------------------------------------------------------- */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', 'Helvetica Neue', 'Segoe UI', sans-serif;
  --fs-11: .6875rem;  /* 11px — micro/badge        */
  --fs-12: .75rem;    /* 12px — legenda            */
  --fs-13: .8125rem;  /* 13px — label, tabela      */
  --fs-14: .875rem;   /* 14px — corpo (base)       */
  --fs-16: 1rem;      /* 16px — corpo grande       */
  --fs-18: 1.125rem;  /* 18px — subtítulo          */
  --fs-20: 1.25rem;   /* 20px — título de seção    */
  --fs-24: 1.5rem;    /* 24px — título de tela     */
  --fs-30: 1.875rem;  /* 30px — KPI/valor grande   */
  /* ⟳ 17/08: o topo da escala. Nasceu no "1º/2º contrato de experiência" (Admissões e
     rescisões), onde o índice É o assunto do card e precisa ser maior que um KPI de faixa.
     ⚠️ NÃO usar para KPI de faixa nem título: `--fs-30` continua sendo o valor grande normal.
     Este é o número em DESTAQUE, um por card, no máximo. */
  --fs-44: 2.75rem;   /* 44px — número em destaque */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-extra:   800;
  --lh-tight:   1.2;
  --lh-normal:  1.5;
  /* tracking BASE do sistema (Rafael 2026-08-20: "espaçamento mais justo… normalmente uso
     -10" = -1% do corpo). Os trackings específicos (títulos -.022, uppercase +.02) ficam. */
  --tracking:   -0.01em;

  /* --- Espaçamento (escala 4px) ------------------------------------------ */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* --- Raios ------------------------------------------------------------- */
  /* v8: raios da Apple — 6 chip/segmento · 8 botão/campo · 12 banner/popover · 16 card/modal */
  --r-sm:   6px;
  --r-md:   8px;   /* botões, campos              */
  --r-lg:   12px;
  --r-xl:   16px;  /* cards, modais               */
  --r-pill: 999px;

  /* --- Sombras (frias, suaves) ------------------------------------------- */
  /* v8: sombra quase invisível + anel de .5px (a Apple não usa borda em card) */
  --sh-sm: 0 1px 2px rgba(0, 0, 0, .05), 0 0 0 .5px rgba(0, 0, 0, .04);
  --sh-md: 0 2px 8px rgba(0, 0, 0, .08), 0 0 0 .5px rgba(0, 0, 0, .05);
  /* 🔴 AS SOMBRAS DO macOS (Rafael 2026-08-22, três prints: Finder, Ajustes do Sistema e o menu
     "Visualizar" do Finder — "usar esse sombreamento em pop-ups" / "olha como são os filtros").
     A escala ganhou um degrau e os dois de cima passaram a ser os do macOS:
       --sh-lg = MENU (anel fino + sombra de contato + sombra difusa) — TODO popover: `mb-menu`
                 (select, multi, sugestões do filtro), calendário, "?", menu de conta, sino, ⌘K,
                 painel do 2º nível do menu, drawer do Levi;
       --sh-xl = JANELA (a sombra larga e funda da janela de Ajustes) — só o `.mb-modal`, que é a
                 única coisa do sistema que é uma janela. ⚠️ Não usar --sh-xl em popover: no macOS
                 o menu tem menos sombra que a janela, e é essa diferença que diz o que é o quê. */
  --sh-lg: 0 0 0 .5px rgba(0, 0, 0, .10), 0 2px 6px rgba(0, 0, 0, .08), 0 14px 36px rgba(0, 0, 0, .20);
  --sh-xl: 0 0 0 .5px rgba(0, 0, 0, .12), 0 22px 70px 4px rgba(0, 0, 0, .56);
  --ring:  0 0 0 3px;  /* usado com cor de foco por componente              */

  /* --- Movimento --------------------------------------------------------- */
  --t-fast: 120ms ease;
  --t-base: 180ms ease;

  /* --- Camadas ----------------------------------------------------------- */
  --z-dropdown: 1000;
  --z-sticky:   1020;
  --z-modal:    1080;
  --z-toast:    1100;
}

/* ----------------------------------------------------------------------------
   2. BASE mínima (escopo do design system; não substitui reset global)
   ---------------------------------------------------------------------------- */
.mb {
  font-family: var(--font);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--text);
  letter-spacing: var(--tracking);   /* v8: SF/Inter pedem tracking negativo; valor no token */
  -webkit-font-smoothing: antialiased;
}
.mb a { color: var(--link); text-decoration: none; }
.mb a:hover { text-decoration: none; }   /* Rafael 2026-07-22: links NÃO sublinham no hover (em nenhuma tela) — a cor já sinaliza */
/* 🔴🔴 SEM CURSOR DE MÃO — AGORA DE VERDADE (Rafael 24/08, na tela de Escala: "vc deixou a
   mãozinha… tu acha bom e bonito isso?"). A régua é de 19/08 ("a Apple usa a seta"), mas nunca
   valeu de fato: `<a>` e `<button>` trazem `cursor: pointer` do NAVEGADOR, e a mão só sumia onde
   alguém escrevia `cursor: default` à mão — eram 228 elementos com mãozinha só naquela tela.
   Num app, quem avisa que algo responde é o HOVER (fundo da linha, pílula do item, sombra do
   card), não o ponteiro; a mão é convenção de DOCUMENTO, de quando link era navegação de página.
   ⚠️ Trocar em UM lugar: `--cursor-acao`. Voltar à mãozinha = `pointer` aqui.
   ⚠️ NÃO toca em campo de texto (segue `text`), em `resize`, `grab` nem no cursor de estado
   (`not-allowed` de desabilitado): a régua é sobre AÇÃO, não sobre todo cursor. */
:root { --cursor-acao: default; }
.mb a, .mb button, .mb summary, .mb label, .mb [role="button"], .mb [role="menuitem"],
.mb [role="tab"], .mb .mb-btn, .mb select { cursor: var(--cursor-acao); }
/* AS TRÊS EXCEÇÕES (Rafael aprovou em 24/08): o cursor só muda quando ele é a ÚNICA pista —
   quando não existe hover capaz de contar a mesma coisa. Fora destas, tudo é seta.
     1. o que se ARRASTA          → mão aberta, virando punho enquanto arrasta
     2. divisa de COLUNA que se puxa → seta dupla (`.mb-colgrip`; ainda não há tela que use)
     3. o DESABILITADO            → proibido (é estado, não ação) */
:root { --cursor-arrastar: grab; --cursor-arrastando: grabbing; --cursor-coluna: col-resize; }
.mb [draggable="true"] { cursor: var(--cursor-arrastar); }
.mb [draggable="true"]:active, .mb [draggable="true"].is-drag { cursor: var(--cursor-arrastando); }
.mb .mb-colgrip { cursor: var(--cursor-coluna); }
.mb :disabled, .mb [aria-disabled="true"] { cursor: not-allowed; }
/* Padrão de fonte: nada de monospace na UI (o <code>/<pre>/<kbd>/<samp> do navegador
   vem com mono de "zero pontilhado"). Força a fonte do DS — uma fonte só em toda a UI.
   Números tabulares = Plus Jakarta + font-variant-numeric:tabular-nums (não monospace). */
.mb code, .mb kbd, .mb samp, .mb pre, .mb tt { font-family: var(--font); }

/* ----------------------------------------------------------------------------
   3. BOTÕES
   ----------------------------------------------------------------------------
   Estrutura:
     .mb-btn                       base
     .mb-btn--primary              verde  (ação principal)
     .mb-btn--secondary            azul sólido (Aplicar/Confirmar-secundário)
     .mb-btn--ghost                azul outline/texto (Voltar/Exportar/Cancelar)
     .mb-btn--danger               vermelho (destrutiva)
     .mb-btn--danger-ghost         vermelho outline
   Tamanhos: .mb-btn--sm | (padrão) | .mb-btn--lg
   Estados:  :hover :focus-visible :active [disabled] .is-loading
   Split:    .mb-btn-split  (wrapper com botão + gatilho de chevron)
   ---------------------------------------------------------------------------- */
/* v8 (2026-08-17) — receita da Apple: a BASE (sem variante) é o "bordered": cinza translúcido
   (--fill), sem borda, texto escuro. --primary = systemBlue CHEIO (o "prominent", ex-verde).
   --secondary = tinted azul (cor a ~13% + texto azul). --ghost/--neutral = a base. --danger =
   vermelho CHEIO (só no botão final do modal); --danger-ghost = tinted vermelho (na tela). */
/* 🔴 BOTÃO NÃO QUEBRA EM DUAS LINHAS (Rafael 2026-08-20: "aumentar tamanho do botão para o texto
   ficar em uma linha"). Em barra apertada o rótulo quebrava e o botão virava um bloco de 2 linhas
   no meio de uma fileira de 32px. Quem cede é o espaço, nunca o rótulo — e rótulo que não cabe é
   rótulo longo demais. */
.mb-btn { white-space: nowrap; }
.mb-btn {
  --_bg:        var(--fill);
  --_bg-hover:  var(--fill-hover);
  --_fg:        var(--text);
  --_border:    transparent;
  --_ring:      rgba(10, 29, 58, .30);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--tracking);
  padding: 11px 16px;
  min-height: 40px;
  border: 1px solid var(--_border);
  /* 🔴 CÁPSULA — Rafael 2026-08-18, no macOS 27 UI Kit: "olha como são os botões… os cantos
     arredondados… as tags tb devem ser assim". É a assinatura do Liquid Glass: do macOS 26 em
     diante o botão deixou de ser retângulo arredondado e virou cápsula. Tag, pílula e chip já
     estavam em --r-pill desde a manhã de hoje — o botão é que tinha ficado para trás em 8px. */
  border-radius: var(--r-pill);
  background: var(--_bg);
  color: var(--_fg);
  cursor: var(--cursor-acao);
  user-select: none;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast),
              box-shadow var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.mb-btn:hover    { background: var(--_bg-hover); border-color: var(--_bg-hover); }
.mb-btn:active   { transform: translateY(1px); }
.mb-btn:focus-visible {
  outline: none;
  box-shadow: var(--ring) var(--_ring);
}
.mb-btn[disabled] {
  cursor: not-allowed;
  opacity: .5;
  /* ⚠️ SEM `pointer-events: none` (24/08): ele faz o mouse NÃO VER o botão — o cursor vira o do
     contêiner e o balão que EXPLICA por que está desabilitado nunca aparece. Em `<button>`/`<input>`
     nativo o navegador já barra clique, foco e submit, então a trava era só custo. */
}
.mb-btn.is-disabled {
  cursor: not-allowed;
  opacity: .5;
  pointer-events: none;   /* aqui é `<a>` fingindo botão: sem isto o clique passa (preço: sem cursor) */
}

/* Ícone dentro do botão acompanha o texto */
.mb-btn svg,
.mb-btn .mb-btn__icon { width: 18px; height: 18px; flex: none; }
/* botão de IA (Rafael 2026-07-04): toda ação do Levi leva o AVATAR dele no botão —
   <img class="mb-btn__levi" src="img/levi.png" alt=""> + rótulo ("Análise do Levi", "Revisar texto") */
.mb-btn .mb-btn__levi { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex: none; }

/* --- Variantes --------------------------------------------------------- */
.mb-btn--primary {
  --_bg: var(--brand-blue); --_bg-hover: var(--brand-blue-700);
  --_fg: #fff; --_ring: rgba(10, 29, 58, .35); font-weight: var(--fw-semibold);
}
.mb-btn--secondary {
  --_bg: var(--brand-blue-50); --_bg-hover: rgba(10, 29, 58,.20);
  --_fg: var(--brand-blue-700); --_ring: rgba(10, 29, 58, .30); font-weight: var(--fw-semibold);
}
.mb-btn--danger {
  --_bg: var(--danger); --_bg-hover: var(--danger-700);
  --_fg: #fff; --_ring: rgba(255, 59, 48, .35); font-weight: var(--fw-semibold);
}

/* Ghost/outline azul — Voltar, Exportar, Cancelar (fundo branco, texto azul) */
.mb-btn--ghost {
  --_bg: var(--fill); --_bg-hover: var(--fill-hover);
  --_fg: var(--text); --_border: transparent;
  --_ring: rgba(10, 29, 58, .25);
}
.mb-btn--ghost:hover { color: var(--text); border-color: transparent; }

/* neutro: ação secundária DISCRETA (abrir/consultar algo já preenchido) — texto cinza,
   sem competir com as ações da linha (decisão Rafael 2026-07-04) */
.mb-btn--neutral {
  --_bg: var(--fill); --_bg-hover: var(--fill-hover);
  --_fg: var(--text-muted); --_border: transparent;
  --_ring: rgba(16, 40, 69, .18);
}
.mb-btn--neutral:hover { color: var(--text); border-color: transparent; }

/* LEVI: variante OFICIAL de botão de IA (Rafael 2026-07-04) — borda no AZUL de ação
   (mesma família do mb-ai-action), texto azul-escuro e o avatar do Levi com ARO LARANJA
   (a identidade dele). Hover = tint azul suave. Uso:
   <button class="mb-btn mb-btn--levi mb-btn--sm">
     <img class="mb-btn__levi" src="img/levi.png" alt=""><span>Análise do Levi</span></button> */
.mb-btn--levi {
  --_bg: var(--brand-blue-50); --_bg-hover: rgba(10, 29, 58,.20);
  --_fg: var(--brand-blue-700); --_border: transparent;
  --_ring: rgba(10, 29, 58, .25);
}
.mb-btn--levi:hover { color: var(--brand-blue-700); border-color: var(--brand-blue-700); }
.mb-btn--levi .mb-btn__levi { background: var(--brand-orange); box-shadow: 0 0 0 1.5px var(--brand-orange); }

.mb-btn--danger-ghost {
  --_bg: var(--danger-50); --_bg-hover: rgba(255,59,48,.22);
  --_fg: var(--danger-700); --_border: transparent;
  --_ring: rgba(255, 59, 48, .25); font-weight: var(--fw-semibold);
}
.mb-btn--danger-ghost:hover { color: var(--danger-700); border-color: transparent; }

/* 🔴 SIM × NÃO NA MESMA LINHA (nasceu na importação de planilha, Rafael 2026-08-20: "Gravar botão
   verde · Não gravar vermelho"). É o PAR do `--danger-ghost`: os dois são TINTED, nunca cheios —
   numa lista de ~70 decisões, dois botões sólidos por linha viram uma parede de cor e o olho perde
   a tabela. Verde = confirma · vermelho = descarta; use os dois juntos ou nenhum. */
.mb-btn--ok {
  --_bg: var(--success-50); --_bg-hover: rgba(67,100,38,.20);
  --_fg: var(--success-700); --_border: transparent;
  --_ring: rgba(67, 100, 38, .25); font-weight: var(--fw-semibold);
}
.mb-btn--ok:hover { color: var(--success-700); border-color: transparent; }

/* --- Tamanhos ---------------------------------------------------------- */
.mb-btn--sm { padding: 7px 12px;  min-height: 32px; font-size: var(--fs-13); border-radius: var(--r-pill); }
/* 🔴 AÇÃO DENTRO DE LINHA DE TABELA = 28px (Rafael 2026-08-18: "parecem mais altos que o padrão").
   O `--sm` de 32 é o certo numa BARRA (ao lado de campo de 42) e continua sendo; dentro da linha ele
   competia com o texto de 13px e as pílulas de 26 — o botão virava o elemento mais alto da linha.
   Escopado a `td`: vale nas ~20 listas de uma vez e não toca em barra, modal nem rodapé. */
.mb-table td .mb-btn--sm { min-height: 28px; padding: 4px 12px; }
.mb-table td .mb-btn--sm.mb-btn--ico { padding: 0 8px; }
.mb-btn--lg { padding: 14px 24px; min-height: 48px; font-size: var(--fs-16); }

/* --- Largura cheia ----------------------------------------------------- */
.mb-btn--block { display: flex; width: 100%; }

/* --- Estado de carregamento (spinner) ---------------------------------- */
.mb-btn.is-loading { color: transparent !important; pointer-events: none; position: relative; }
.mb-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: #fff;
  animation: mb-spin .6s linear infinite;
}
/* Em botões ghost o spinner usa a cor do texto da variante */
.mb-btn--ghost.is-loading::after        { color: var(--text); border-right-color: transparent; }
.mb-btn--danger-ghost.is-loading::after { color: var(--danger-700);     border-right-color: transparent; }
@keyframes mb-spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------------------------
   3.1 SPLIT BUTTON  (ex.: "Salvar ▾" / "Nova ▾" / "Novo registro ▾")
   ---------------------------------------------------------------------------- */
.mb-btn-split { display: inline-flex; align-items: stretch; }
.mb-btn-split > .mb-btn:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.mb-btn-split > .mb-btn__caret {
  --_bg: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; min-height: 40px;
  border: 1px solid transparent;
  border-left: 1px solid rgba(255, 255, 255, .25);
  border-top-right-radius: var(--r-md);
  border-bottom-right-radius: var(--r-md);
  background: inherit; color: inherit; cursor: var(--cursor-acao);
  transition: background var(--t-fast);
}
/* O caret herda a cor da variante por reutilizar a mesma classe base */
.mb-btn-split > .mb-btn__caret svg { width: 16px; height: 16px; }

/* ============================================================================
   4. CAMPOS DE FORMULÁRIO
   ---------------------------------------------------------------------------- */
.mb-field { display: flex; flex-direction: column; gap: 6px; }
.mb-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text-muted);
}
.mb-label .req { color: var(--danger-700); font-weight: var(--fw-bold); margin-left: -4px; }
.mb-help {
  width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.4px solid var(--text-subtle); color: var(--text-subtle);
  font-size: 10px; font-weight: 700; cursor: default; flex: none;
}
.mb-input, .mb-select, .mb-textarea {
  font-family: var(--font); font-size: var(--fs-14); color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); padding: 10px 12px; min-height: 42px; width: 100%;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.mb-textarea { min-height: 88px; resize: vertical; line-height: var(--lh-normal); }
.mb-input::placeholder, .mb-textarea::placeholder { color: var(--text-subtle); }
.mb-input:focus, .mb-select:focus, .mb-textarea:focus {
  /* 🔴 O anel de foco usa o NAVY da Morada, não o systemBlue (Rafael, 19/08) — mesma decisão do
     item escolhido no menu. O halo continua sendo o mesmo azul em 18%, para o campo focado
     continuar 'acendendo' e não parecer desabilitado. */
  outline: none; border-color: var(--brand-blue);
  box-shadow: var(--ring) rgba(10, 29, 58, .18);
}
.mb-input:disabled, .mb-select:disabled, .mb-textarea:disabled {
  background: var(--surface-2); color: var(--text-subtle); cursor: not-allowed;
}
/* Select com chevron desenhado */
.mb-select {
  appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: var(--cursor-acao);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
/* Grupo com prefixo (R$) */
.mb-input-group { display: flex; align-items: stretch; }
.mb-input-group .mb-affix {
  display: inline-flex; align-items: center; padding: 0 12px;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-right: none;
  border-radius: var(--r-md) 0 0 var(--r-md); color: var(--text-muted);
  font-size: var(--fs-13); font-weight: var(--fw-semibold);
}
.mb-input-group .mb-input { border-radius: 0 var(--r-md) var(--r-md) 0; }
/* Estado de erro */
.mb-field.is-error .mb-input,
.mb-field.is-error .mb-select { border-color: var(--danger); box-shadow: var(--ring) rgba(164, 38, 44,.14); }
.mb-error { font-size: var(--fs-12); color: var(--danger-700); font-weight: var(--fw-medium); }
/* Alias por controle (validação JS marca o campo direto; PADROES "sem balão nativo") */
.mb-input.is-invalid, .mb-select.is-invalid,
.mb-textarea.is-invalid { border-color: var(--danger); box-shadow: var(--ring) rgba(164, 38, 44,.12); }
/* Somente leitura — travado porém legível (≠ disabled: o valor importa, só não edita) */
.mb-input[readonly], .mb-textarea[readonly] { background: var(--surface-2); cursor: default; }
.mb-input[readonly]:focus, .mb-textarea[readonly]:focus { border-color: var(--border-strong); box-shadow: none; }

/* --- Busca (input com lupa) --------------------------------------------- */
.mb-search { position: relative; display: block; }
.mb-search > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--text-subtle); pointer-events: none; }
.mb-search .mb-input { padding-left: 38px; border-radius: var(--r-pill); }   /* campo de BUSCA é
   cápsula no macOS (Search Field); campo de texto comum continua em --r-md — não igualar os dois. */

/* --- Checkbox / radio standalone (fora de dropdown; reusa .mb-check) ----- */
.mb-checkbox, .mb-radio { display: inline-flex; align-items: center; gap: 9px; position: relative;
  font-size: var(--fs-14); color: var(--text); cursor: var(--cursor-acao); }
.mb-checkbox input, .mb-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.mb-checkbox input:checked + .mb-check { background: var(--brand-blue); border-color: var(--brand-blue); }
.mb-checkbox input:checked + .mb-check svg { opacity: 1; }
.mb-radio__dot { width: 20px; height: 20px; border-radius: 50%; border: 1.6px solid var(--border-strong);
  background: var(--surface); flex: none; display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--t-fast); }
.mb-radio__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--brand-blue); transform: scale(0); transition: transform var(--t-fast); }
.mb-radio input:checked + .mb-radio__dot { border-color: var(--brand-blue); }
.mb-radio input:checked + .mb-radio__dot::after { transform: scale(1); }
.mb-checkbox input:focus-visible + .mb-check,
.mb-radio input:focus-visible + .mb-radio__dot { box-shadow: var(--ring) rgba(21,102,157,.25); }

/* --- Upload de arquivo (dropzone + linha de arquivo) --------------------- */
.mb-upload { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 26px 18px; border: 1.6px dashed var(--border-strong); border-radius: var(--r-lg);
  background: var(--surface-2); color: var(--text-muted); font-size: var(--fs-13); text-align: center;
  cursor: var(--cursor-acao); transition: border-color var(--t-fast), background var(--t-fast); }
.mb-upload:hover, .mb-upload.is-drag { border-color: var(--brand-blue); background: var(--brand-blue-50); }
.mb-upload svg { width: 26px; height: 26px; color: var(--link); }
.mb-upload input[type="file"] { display: none; }
.mb-upload__hint { font-size: var(--fs-12); color: var(--text-subtle); }
.mb-upload b { color: var(--link); font-weight: var(--fw-semibold); }
.mb-file { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-13); }
.mb-file svg { width: 16px; height: 16px; color: var(--text-muted); flex: none; }
.mb-file__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: var(--fw-semibold); color: var(--text); }
.mb-file__size { color: var(--text-subtle); font-size: var(--fs-12); }

/* ----------------------------------------------------------------------------
   4.1 TOGGLE (pill on/off)
   ---------------------------------------------------------------------------- */
.mb-toggle { display: inline-flex; align-items: center; cursor: var(--cursor-acao); }
.mb-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.mb-toggle__track {
  position: relative; width: 52px; height: 28px; border-radius: var(--r-pill);
  background: rgba(120,120,128,.24); transition: background var(--t-base);
  display: inline-flex; align-items: center; flex: none;
}
.mb-toggle__track::after {
  content: ""; position: absolute; left: 3px; width: 22px; height: 22px;
  background: #fff; border-radius: 50%; box-shadow: var(--sh-sm);
  transition: transform var(--t-base);
}
/* ícones ✓ / ✕ dentro do track */
.mb-toggle__track::before {
  content: "✕"; position: absolute; right: 8px; font-size: 11px; font-weight: 700;
  color: var(--text-muted); transition: opacity var(--t-fast);
}
.mb-toggle input:checked + .mb-toggle__track { background: var(--success); box-shadow: none; }
.mb-toggle input:checked + .mb-toggle__track::after { transform: translateX(24px); }
.mb-toggle input:checked + .mb-toggle__track::before { content: "✓"; right: auto; left: 9px; color: #fff; }
.mb-toggle input:focus-visible + .mb-toggle__track { box-shadow: var(--ring) rgba(21,102,157,.25); }

/* ----------------------------------------------------------------------------
   4.2 SEGMENTED CONTROL  (ex.: "Tipo da venda" / Diário·Mensal)
   ---------------------------------------------------------------------------- */
/* v8: o segmented da Apple — trilho cinza translúcido, o ativo é BRANCO com sombra (não azul) */
.mb-segmented { display: inline-flex; background: var(--fill);
  border: none; border-radius: 9px; padding: 2px; gap: 2px; }
.mb-segmented button {
  font-family: var(--font); font-size: var(--fs-13); font-weight: var(--fw-medium);
  color: var(--text); background: transparent; border: none; cursor: var(--cursor-acao);
  padding: 6px 14px; border-radius: 7px; transition: all var(--t-fast);
}
.mb-segmented button:hover { color: var(--text); }
.mb-segmented button.is-active { background: var(--surface); color: var(--text); font-weight: var(--fw-semibold);
  box-shadow: 0 1px 3px rgba(0,0,0,.14), 0 0 0 .5px rgba(0,0,0,.04); }

/* ----------------------------------------------------------------------------
   4.3 TABS  (ex.: Observações / Anexo)
   ---------------------------------------------------------------------------- */
.mb-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--border); }
.mb-tab {
  font-family: var(--font); font-size: var(--fs-14); font-weight: var(--fw-semibold);
  color: var(--text-muted); background: none; border: none; cursor: var(--cursor-acao);
  padding: 12px 2px; margin-bottom: -1px; border-bottom: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.mb-tab:hover { color: var(--text); }
.mb-tab.is-active { color: var(--link); border-bottom-color: var(--brand-blue); }

/* ----------------------------------------------------------------------------
   4.4 SUB-ABAS DE MÓDULO  (barra horizontal logo abaixo do topbar)
   ----------------------------------------------------------------------------
   PROMOVIDO AO DS em 2026-07-28: nasceu como `.fin-nav*` dentro do
   financeiro_nav.php e, na 2ª tela que precisou dela (Minha agenda), virou
   componente — a regra é promover, nunca copiar o CSS para o segundo módulo.
   Os componentes por módulo (financeiro_nav.php, agenda_nav.php) continuam
   existindo: eles guardam a LISTA de abas; a APARÊNCIA mora aqui.

   Diferença para o `.mb-tabs` acima: aquele são abas DENTRO de um card/bloco
   (azul, sublinhado azul); este é a faixa de navegação do módulo, colada no
   topbar (ativa = navy + underline LARANJA), e é sticky.

   Aba sem tela pronta = `.is-soon` (apagada, sem link) — mesmo princípio do
   menu lateral: ligar o href tira o apagado sozinho. Sem selo "Em breve".
   Altura em --subnav-h (a tela desconta no cálculo de 100vh).             */
:root { --subnav-h: 64px; }   /* 🔴 46 → 64 (2026-08-20): era a ÚNICA barra de abas fora do padrão — as locais (abas_nav · entrevistas · linhas · score) já eram 64 desde 19/08, quando o Rafael pediu mais respiro ("está com muito conflito essa barra"). Rafael hoje: "todas as barras no mesmo alinhamento vertical, espaçamentos… tipo uma barra fixa; o que muda é o tamanho horizontal em função da quantidade de ícones". ⚠️ `--fin-nav-h` e `--agenda-nav-h` são apelidos deste token e acompanham sozinhos. */
  /* v8 (2026-08-17, fase 2 — revisado no mesmo dia): SEGMENTED de verdade. A barra fica com 46px
     (o app-shell desconta esse número) e TRANSPARENTE; dentro dela o TRILHO (`__seg`, cinza
     translúcido, raio 9, 2px de folga) envolve as abas; a ativa é a pílula BRANCA com sombra.
     ⚠️ `.mb a` pinta link de azul (0,1,1) e vence `.__tab` (0,1,0) — por isso a cor é forçada
     com `.mb a.__tab`. ❌ Filete laranja e linha de baixo saíram. */
.mb-subnav{ display:flex; align-items:center; gap:10px; height:var(--subnav-h); padding:0 24px;
    background:transparent; border-bottom:0; overflow-x:auto; scrollbar-width:none; }
.mb-subnav::-webkit-scrollbar{ display:none; }
/* ══ 🔴🔴 SEGMENTED — a peça #3, promovida em 2026-08-18 (Rafael: "vamos homologar uma a uma") ══
   POR QUE: a receita estava COPIADA em 7 telas (`pf-tabs` · `cfg-tabs` · `cv-tabs` · `lg-seg` ·
   `ac-seg-ctl` · `an-seg` + as 4 barras de nav). Hoje, para trocar o raio para cápsula, foi preciso
   varrer 9 arquivos — e o do próprio DS escapou na 1ª passada. Uma peça, um lugar.
   ⚠️ AS CLASSES LOCAIS FICAM NO MARKUP: `.pf-tab`, `.cfg-tab` e `.cv-tab` são HOOK DE JS
   (querySelectorAll). O que sai das telas é o CSS visual, não a classe.
   Anatomia: TRILHO cinza (--fill) com a aba ativa em pílula BRANCA e sombra. */
/* ⚠️ box-sizing próprio: a barra tem alturas FIXAS (64 · 32 · 28) e a `financeiro_dre.php` não
   declara reset — sem isto o trilho media 36 só lá, e as barras deixavam de bater entre telas. */
.mb-subnav, .mb-subnav *, .mb-seg, .mb-seg *{ box-sizing: border-box; }
.mb-seg, .mb-subnav__seg{ display:inline-flex; align-items:center; gap:2px; height:32px; padding:2px;
    background:var(--fill); border-radius:var(--r-pill); flex:none; }
.mb-seg--sm{ height: 28px; }
.mb-seg--sm .mb-seg__tab{ height: 24px; padding: 0 10px; font-size: var(--fs-12); }
.mb-seg__tab, .mb-subnav__tab{ display:inline-flex; align-items:center; height:28px; padding:0 14px; font-size:var(--fs-13);
    font-weight:var(--fw-medium); color:var(--text); background:transparent; text-decoration:none; white-space:nowrap;
    border:0; margin:0; border-radius:var(--r-pill); position:relative; transition:background .12s, color .12s; }
.mb a.mb-subnav__tab, .mb a.mb-seg__tab, .mb-seg__tab:hover, .mb-subnav__tab:hover{ color:var(--text); text-decoration:none; }
.mb-seg__tab:hover, .mb-subnav__tab:hover{ background:rgba(120,120,128,.10); }
.mb-seg__tab.is-active, .mb-subnav__tab.is-active{ background:var(--seg-ativo-bg); color:var(--navy); font-weight:var(--fw-semibold);
    box-shadow: var(--seg-ativo-sh); }
.mb-seg__tab.is-soon, .mb-subnav__tab.is-soon{ color:var(--text-subtle); cursor:default; }
.mb-subnav { position: sticky; top: var(--tb-h, 52px); z-index: 40; }
/* o link do DS é azul e sublinha no hover — a aba não é link comum */
.mb .mb-seg__tab:hover, .mb .mb-subnav__tab:hover { text-decoration: none; }

/* o <html> tem o MESMO fundo da página (22/08): entre uma tela e outra o browser pinta o html antes do body — branco
   e depois cinza era um clarão a cada troca de menu. */
html { background: var(--bg-wash, #f5f5f7); }

/* ❌ VIEW TRANSITION ENTRE DOCUMENTOS — TENTADA E DESFEITA (22–23/08). Entrou para acabar com o vazio entre telas
   (`@view-transition { navigation: auto }`, barra e topo com nome próprio). Rafael: "está estranho esse carregamento" e
   depois "algo estragou": segurar a tela antiga até a nova ficar pronta parece clique que não funcionou, e o cruzamento
   parecia fantasma. O carregamento normal do browser fica. Não reativar sem ele pedir. */

/* linha de progresso da navegação de app (js/mb-app.js): 2px navy no topo enquanto a próxima tela é buscada */
.mb-app-prog { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--navy); z-index: 1000; opacity: 0; pointer-events: none;
  transition: width .8s cubic-bezier(.2,.6,.3,1), opacity .2s; }
.mb-app-prog.is-on { opacity: 1; width: 70%; }
.mb-app-prog.is-fim { width: 100%; transition: width .12s ease-out, opacity .2s .1s; opacity: 0; }

/* ============================================================================
   5. DROPDOWN / MENU
   ---------------------------------------------------------------------------- */
.mb-dropdown { position: relative; display: inline-block; }
.mb-menu {
  /* v8 (2026-08-17): popover em VIDRO (Liquid Glass) — é o lugar em que o blur se vê, porque o menu
     flutua SOBRE o conteúdo. Cartão de dado continua opaco. */
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: none;
  border-radius: 12px; box-shadow: var(--sh-lg), var(--glass-ring); padding: 6px;
  min-width: 220px; z-index: var(--z-dropdown);
}
.mb-menu__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font-family: var(--font); font-size: var(--fs-14); color: var(--text);
  background: none; border: none; text-align: left; cursor: var(--cursor-acao);
  padding: 10px 12px; border-radius: var(--r-sm); transition: background var(--t-fast);
}
.mb-menu__item[hidden] { display: none; }   /* busca do mb-select: item filtrado some (o display:flex acima vencia o [hidden] do navegador) */
.mb-menu__item:hover { background: var(--surface-2); }
/* 🔴 O ITEM ESCOLHIDO USA O NOSSO AZUL (Rafael 2026-08-19: "não tem como usar o nosso azul? mais
   fechado"). Estava em --brand-blue #14487f, que apesar do nome é o systemBlue da Apple — o azul
   da Morada é o --navy #0a1d3a, o da logo e da barra lateral. O tint do fundo fica: ele é o que
   marca a linha; o navy é o que dá a identidade. Vale para TODO menu do DS (select, filtro,
   menu de ação), que é onde a coerência aparece. */
.mb-menu__item.is-active { background: var(--brand-blue-50); color: var(--navy); font-weight: var(--fw-semibold); }
.mb-menu__sep { height: 1px; background: var(--border); margin: 6px 4px; }
.mb-menu__foot {
  display: flex; align-items: center; gap: 8px; justify-content: flex-start;
  color: var(--link); font-weight: var(--fw-semibold); font-size: var(--fs-14);
  padding: 10px 12px; border-top: 1px solid var(--border); cursor: var(--cursor-acao); margin-top: 4px;
}

/* 5.1 Period stepper  ‹  Maio de 2026 ▾  › */
.mb-period { display: inline-flex; align-items: stretch; border: 1px solid var(--border-strong);
  border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.mb-period button { font-family: var(--font); background: var(--surface-2); border: none;
  color: var(--link); cursor: var(--cursor-acao); display: inline-flex; align-items: center;
  justify-content: center; transition: background var(--t-fast); }
.mb-period button:hover { background: var(--brand-blue-50); }
.mb-period .mb-period__nav { width: 44px; }
.mb-period .mb-period__label { padding: 10px 18px; gap: 8px; font-weight: var(--fw-bold);
  border-left: 1px solid var(--border-strong); border-right: 1px solid var(--border-strong); }
.mb-period svg { width: 18px; height: 18px; }

/* 5.2 Multi-select (lista de checkbox + Aplicar) */
.mb-checkrow { display: flex; align-items: center; gap: 12px; padding: 11px 12px;
  border-bottom: 1px solid var(--border); cursor: var(--cursor-acao); font-size: var(--fs-14); }
.mb-checkrow:last-of-type { border-bottom: none; }
.mb-check { width: 20px; height: 20px; border-radius: var(--r-sm); border: 1.6px solid var(--border-strong);
  background: var(--surface); flex: none; display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--t-fast); }
.mb-check svg { width: 13px; height: 13px; color: #fff; opacity: 0; }
.mb-checkrow input { position: absolute; opacity: 0; }
.mb-checkrow input:checked + .mb-check { background: var(--brand-blue); border-color: var(--brand-blue); }
.mb-checkrow input:checked + .mb-check svg { opacity: 1; }

/* 5.2b Select do DS (js/mb-select.js) — todo <select class="mb-select"> é
   promovido a botão-gatilho + menu do padrão (o popup nativo do navegador
   some). O select original fica oculto no DOM (form/JS continuam lendo).
   Pular um select específico: atributo data-native. Lista 10+ ganha busca. */
.mb-selecttrig { display: inline-flex; align-items: center; text-align: left; cursor: var(--cursor-acao);
  overflow: hidden; white-space: nowrap; }
/* o rótulo encolhe e corta com reticências ANTES da seta (o padding-right de 38px do
   .mb-select é a reserva dela). min-width:0 é obrigatório: sem ele o item flex não
   encolhe abaixo do min-content e o texto vaza por baixo da seta. */
.mb-selecttrig__lab { flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.mb-selmenu { position: fixed; z-index: 1090;            /* acima do modal (1080), sob o toast */
  max-height: 320px; overflow: auto; padding: 6px; }
.mb-selmenu .mb-menu__item { width: 100%; }
.mb-selmenu .mb-menu__item.is-off { opacity: .45; cursor: not-allowed; }
.mb-selmenu__search { min-height: 36px; margin: 2px 2px 6px; width: calc(100% - 4px); }
.mb-selmenu__cat { position: sticky; top: -6px; background: var(--surface); padding: 8px 12px 4px;
  font-size: var(--fs-11); font-weight: var(--fw-bold); color: var(--text-subtle);
  text-transform: none; letter-spacing: .02em; }
.mb-selmenu__vazio { padding: 14px 12px; font-size: var(--fs-13); color: var(--text-subtle); }

/* 5.3 Menu de conta / configurações (variante larga do .mb-menu) --------- */
.mb-menu--account { min-width: 320px; padding: 0; }
.mb-menu--account .mb-menu__sep { margin: 0; }

.mb-menu__header { display: flex; gap: 14px; align-items: flex-start; padding: 18px; }
.mb-menu__avatar { width: 56px; height: 56px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-blue-50); color: var(--link); }
.mb-menu__avatar svg { width: 30px; height: 30px; }
.mb-menu__identity { min-width: 0; }
.mb-menu__company { font-weight: var(--fw-bold); color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-menu__name { font-size: var(--fs-14); color: var(--text); }
.mb-menu__support { display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-13); color: var(--text-muted); margin-top: 2px; }
.mb-menu__support b { color: var(--text); font-weight: var(--fw-bold); }
.mb-menu__copy { display: inline-flex; background: none; border: none; cursor: var(--cursor-acao);
  color: var(--link); padding: 2px; border-radius: var(--r-sm); }
.mb-menu__copy:hover { background: var(--brand-blue-50); }
.mb-menu__copy svg { width: 16px; height: 16px; }

/* corpo com grupos (cada grupo = título com ícone + links-filhos opcionais) */
.mb-menu__body { padding: 8px 8px 6px; }
.mb-menu__group + .mb-menu__group { margin-top: 2px; }
.mb-menu__grouptitle { display: flex; align-items: center; gap: 10px; width: 100%;
  font-family: var(--font); font-size: var(--fs-14); font-weight: var(--fw-bold);
  color: var(--text); background: none; border: none; text-align: left; cursor: var(--cursor-acao);
  padding: 9px 12px; border-radius: var(--r-sm); transition: background var(--t-fast); }
.mb-menu__grouptitle:hover { background: var(--surface-2); text-decoration: none; }
.mb-menu__grouptitle.is-active { color: var(--link); }
.mb-menu__ico { display: inline-flex; align-items: center; justify-content: center;
  width: 18px; flex: none; color: var(--text-muted); }
.mb-menu__grouptitle svg { width: 18px; height: 18px; }
.mb-menu__grouptitle.is-active .mb-menu__ico { color: var(--link); }
/* monograma circular (ex.: "CA" em Conta PJ) no lugar do ícone */
.mb-menu__mono { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted);
  font-size: 9px; font-weight: var(--fw-bold); flex: none; }
/* links-filhos: indentados sob o título (alinham após o ícone: 12+18+10=40px) */
.mb-menu__sublink { display: block; font-size: var(--fs-14); color: var(--link);
  padding: 8px 12px 8px 40px; border-radius: var(--r-sm); cursor: var(--cursor-acao); }
.mb-menu__sublink:hover { background: var(--surface-2); text-decoration: none; }

/* rodapé: itens com ícone (Termos de uso / Sair) */
.mb-menu__footlinks { padding: 6px 8px 8px; }
.mb-menu__footlink { display: flex; align-items: center; gap: 10px; width: 100%;
  font-family: var(--font); font-size: var(--fs-14); color: var(--link);
  background: none; border: none; text-align: left; cursor: var(--cursor-acao);
  padding: 9px 12px; border-radius: var(--r-sm); transition: background var(--t-fast); }
.mb-menu__footlink:hover { background: var(--surface-2); text-decoration: none; }
.mb-menu__footlink svg { width: 18px; height: 18px; flex: none; }

/* ============================================================================
   6. KPI STRIP
   ---------------------------------------------------------------------------- */
.mb-kpi-strip { display: flex; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; }
.mb-kpi { flex: 1; padding: 16px 20px; text-align: center; border-right: 1px solid var(--border);
  border-top: 3px solid transparent; }
.mb-kpi:last-child { border-right: none; }
.mb-kpi.is-active { border-top-color: var(--brand-blue); background: var(--surface); }
.mb-kpi__label { font-size: var(--fs-13); color: var(--text-muted); margin-bottom: 6px; }
.mb-kpi__value { font-size: var(--fs-20); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.mb-kpi__value.is-pos { color: var(--positive); }
.mb-kpi__value.is-neg { color: var(--negative); }
.mb-kpi__value.is-info { color: var(--link); }

/* ============================================================================
   7. TABELAS
   ---------------------------------------------------------------------------- */
.mb-table { width: 100%; border-collapse: collapse; font-size: var(--fs-13); background: var(--surface); }
/* Cabeçalho PADRÃO (fechado no PADROES.md): navy + texto branco + underline laranja.
   Mesma fonte/altura em TODAS as tabelas (fs-13 / padding 14px 16px). */
/* v8 fase 3: cabeçalho CLARO — texto cinza 12/600, fundo branco, linha de 1px embaixo. O navy e o
   filete laranja saíram (v7). A seta de ordenar segue: cinza em toda coluna, LARANJA na ativa. */
.mb-table thead th { background: var(--th-bg); color: var(--th-fg); font-weight: var(--fw-semibold);
  font-size: var(--fs-12); text-align: left; padding: 11px 16px; white-space: nowrap; letter-spacing: .01em;
  border-bottom: 1px solid var(--th-border); }
.mb-table thead th .mb-sort { display: inline-flex; vertical-align: middle; margin-left: 6px; color: var(--text-subtle); }
/* Coluna ORDENÁVEL (padrão de tabela — Rafael 2026-07-27: "é útil em quase todas as
   colunas de tabelas do sistema"). O cabeçalho vira link; a seta mostra a direção e só
   fica sólida na coluna que está ordenando. Ordenação é do SERVIDOR: a tabela é
   paginada, e ordenar só a página visível daria um resultado errado. */
.mb-table thead th a.mb-ord { color: inherit; text-decoration: none; display: inline-flex;
  align-items: center; gap: 6px; white-space: nowrap; }
.mb-table thead th a.mb-ord:hover { color: var(--text); text-decoration: none; }
/* ⟳ 19/08: 12px era pequena demais para o que ela faz — é o único aviso de que a coluna
   ordena, e no cabeçalho de 12px ela virava um respingo. 14px + traço mais grosso. */
.mb-table thead th a.mb-ord .mb-sort svg { width: 14px; height: 14px; }
.mb-table thead th a.mb-ord.is-ord .mb-sort { color: var(--brand-orange); }
.mb-table thead th.center a.mb-ord { justify-content: center; }
.mb-table thead th.num a.mb-ord { justify-content: flex-end; }
/* Alinhamento do título = alinhamento da célula (a th leva a MESMA classe da td) */
/* 🔴🔴 FUNDO BRANCO, SEM ZEBRA E SEM FILETE (Rafael 24/08, vendo as três formas lado a lado no mockup:
   "fundo branco"). ❌ A ZEBRA MORREU — não recriar `tr:nth-child(even)` em tabela nenhuma.
   O motivo é a régua do dia anterior: quem avisa que a linha responde é o HOVER, e ele pinta a 10%
   enquanto a zebra pintava a 3% — com metade das linhas já com fundo, o realce chegava numa tabela
   pintada e perdia força justamente onde ele virou regra. Sem ela, o hover é a ÚNICA coisa que pinta
   fundo no corpo da tabela. Quem separa uma linha da outra é o espaço (a linha tem 67px de altura).
   ⚠️ O hover fica no TD, não no TR: em `<tr>` ele ficaria por baixo de qualquer célula com fundo
   próprio (coluna destacada, totalizador), e o realce sumiria em pedaços da linha.
   ⚠️ NÃO desligar a zebra por SOBREPOSIÇÃO — no mockup eu escrevi
   `.x .mb-table tbody tr:nth-child(2n) td { background: transparent }` e essa regra (0,3,3) venceu
   o HOVER (0,2,3): o realce sumia nas linhas pares e parecia defeito da tela, não do mockup.
   Regra que se remove, remove-se. */
.mb-table tbody td { padding: 13px 16px; border-top: 0; vertical-align: middle; }
.mb-table tbody tr:hover td { background: rgba(120,120,128,.10); }
/* 🔴 LINHA CLICÁVEL (22/08, C): quando a última coluna tem UM link Editar/Abrir/Ficha/Ver, o js/mb-tabela.js marca a
   linha `is-abrivel` e o clique na linha abre esse destino. O botão fica e APARECE NO HOVER (e no foco do teclado);
   no toque, sempre visível. ⚠️ SEM cursor de mão: o cursor do macOS é a seta em tudo (Rafael 22/08: "tirei o cursor
   de mão, pois a Apple não usa") — quem avisa que a linha é clicável é o fundo do hover e o botão que aparece. */
.mb-table tr.is-abrivel { cursor: default; }
.mb-table tr.is-abrivel td:last-child .mb-btn { opacity: 0; transition: opacity .12s; }
.mb-table tr.is-abrivel:hover td:last-child .mb-btn, .mb-table tr.is-abrivel:focus-within td:last-child .mb-btn { opacity: 1; }
@media (hover: none) { .mb-table tr.is-abrivel td:last-child .mb-btn { opacity: 1; } }
.mb-table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* 🔴 `.center` DEPOIS de `.num` de propósito (2026-07-28). As duas regras têm a MESMA
   especificidade, então quem vem por último vence — e `.num` vencia. Quem escreve
   `class="center num"` quer o número CENTRALIZADO com algarismos tabulares; a ordem
   antiga entregava alinhado à direita, calado. Eram 8 células em 4 telas (empresas,
   cad_produtos, admissoes_rescisoes, comercial_calculadora) todas erradas assim.
   Não mover para cima: `center` é a classe que se escreve de propósito e deve vencer. */
.mb-table .center { text-align: center; }
/* 🔴🔴 LINK DE TEXTO DENTRO DA TABELA — a afordância é a LINHA, não a cor (Rafael 24/08:
   "vamos na sua recomendação… consegue fazer em todas as tabelas?"). Numa lista de 25 linhas,
   colorir cada link vira parede de azul e o olho perde a tabela; quem diz "isto abre" é o fundo
   do hover na linha inteira (regra acima) + o botão da última coluna, que aparece junto. Ao
   passar o mouse, o texto clicável ESCURECE para o navy — e aí não há dúvida de onde clicar.
   ⚠️ Fica de fora o que já tem cor PRÓPRIA e significado: botão (`mb-btn`), ícone (o WhatsApp é
   verde de marca), tag, pílula e selo de score. `[class*=…]` cobre as variantes locais (`pl-ico--wa`).
   ⚠️ Link SOLTO no meio de um texto (fora de tabela) segue navy permanente: lá não há linha para
   acender. */
.mb-table tbody td a:not([class*="btn"]):not([class*="ico"]):not(.mb-tag):not(.mb-pill):not(.mb-score) { color: inherit; transition: color .12s ease; }
.mb-table tbody tr:hover td a:not([class*="btn"]):not([class*="ico"]):not(.mb-tag):not(.mb-pill):not(.mb-score) { color: var(--link); }
.mb-table .mb-desc__link { font-weight: var(--fw-semibold); }   /* o peso destaca o nome; a COR saiu — ver a régua acima */
.mb-table .mb-desc__sub { display: inline-block; margin-top: 4px; }
.mb-subtag { display: inline-block; font-size: var(--fs-11); color: var(--text-muted);
  background: var(--bg-subtle); border-radius: var(--r-sm); padding: 2px 7px; }
.mb-clip { color: var(--text-subtle); width: 16px; height: 16px; vertical-align: middle; }
/* linha de exceção (vencido) — borda esquerda vermelha */
.mb-table tr.is-overdue td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
/* linha histórica esmaecida */
.mb-table tr.is-muted td { color: var(--text-subtle); }
/* Totalizador no rodapé */
.mb-table tfoot td { padding: 14px 16px; border-top: 2px solid var(--border-strong);
  background: var(--bg-subtle); font-weight: var(--fw-bold); color: var(--navy); }
/* Variação compacta (linhas densas) */
.mb-table--compact thead th, .mb-table--compact tbody td,
.mb-table--compact tfoot td { padding: 9px 12px; }

/* Colunas FIXAS — obrigatório em lista PAGINADA (Rafael 2026-07-26: "ao paginar, as
   colunas mudam de tamanho... tem que ficar fixa"). Sem isto o navegador redimensiona
   cada coluna pelo conteúdo DAQUELA página e a tabela "dança" a cada troca de página.
   Com `table-layout: fixed` as larguras vêm do <thead> (px ou %) e valem para todas as
   páginas; a coluna SEM width divide o que sobrar. Texto longo quebra em 2 linhas —
   para cortar com reticências numa célula, use .mb-td-ellipsis. */
.mb-table--fixed { table-layout: fixed; }
.mb-table--fixed td, .mb-table--fixed th { overflow-wrap: anywhere; }
.mb-table--fixed .mb-td-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 7.0 Moldura padrão da tabela — cantos arredondados + scroll confinado.
   O overflow arredonda os cantos E confina o scroll (thead sticky gruda no topo
   da moldura). Toda tabela de dados vive dentro de um .mb-tablewrap. */
.mb-tablewrap { overflow: auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-sm); }   /* v8: moldura mais leve */
/* 🔴 CABEÇALHO TRAVADO AO ROLAR — em TODA tabela (Rafael 22/08: "tem que travar o cabeçalho da tabela quando rola").
   `sticky` gruda no contêiner que ROLA mais próximo (.pl-table-wrap, .rp-scroll, .mb-tablewrap…). ⚠️ Ancestral com
   `overflow: hidden` entre a tabela e o rolador QUEBRA o sticky sem erro — cartão que recorta o canto usa `overflow: clip`. */
.pl-table-wrap .mb-table thead th, .rp-scroll .mb-table thead th, .mb-tablewrap .mb-table thead th,
.pg-main .mb-card > .mb-table thead th { position: sticky; top: 0; z-index: 2; }
/* 4 cantos SEMPRE arredondados: as células extremas também levam o raio
   (garante o canto redondo mesmo com thead sticky/scrollbar horizontal) */
.mb-tablewrap .mb-table thead th:first-child { border-top-left-radius: calc(var(--r-lg) - 1px); }
.mb-tablewrap .mb-table thead th:last-child  { border-top-right-radius: calc(var(--r-lg) - 1px); }
/* raio inferior SÓ em tbody/tfoot (nunca no thead — tabela sem corpo, ex. estado
   vazio, deixaria o cabeçalho navy com canto de baixo redondo e fresta branca) */
.mb-tablewrap .mb-table > tbody:last-child > tr:last-child > td:first-child,
.mb-tablewrap .mb-table > tfoot:last-child > tr:last-child > td:first-child { border-bottom-left-radius: calc(var(--r-lg) - 1px); }
.mb-tablewrap .mb-table > tbody:last-child > tr:last-child > td:last-child,
.mb-tablewrap .mb-table > tfoot:last-child > tr:last-child > td:last-child { border-bottom-right-radius: calc(var(--r-lg) - 1px); }
/* Coluna de ações: ícones lado a lado, centralizados (padrão único) */
.mb-rowact { display: inline-flex; gap: 6px; justify-content: center; }
.mb-rowact__btn { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r-sm); border: none; background: transparent;
  color: var(--link); cursor: var(--cursor-acao); transition: background var(--t-fast), color var(--t-fast); }
.mb-rowact__btn:hover { background: var(--brand-blue-50); }
.mb-rowact__btn.is-danger { color: var(--danger-700); }
.mb-rowact__btn.is-danger:hover { background: var(--danger-50); }
.mb-rowact__btn svg { width: 16px; height: 16px; }

/* 7.1 Tabela-matriz (grade completa, fluxo mensal) */
.mb-matrix { width: 100%; border-collapse: collapse; font-size: var(--fs-13); background: var(--surface); }
.mb-matrix th, .mb-matrix td { border: 1px solid var(--border); padding: 12px 16px; }
.mb-matrix thead th { background: var(--surface-2); color: var(--text-muted); font-weight: var(--fw-semibold); text-align: center; }
.mb-matrix tbody th { text-align: left; font-weight: var(--fw-medium); color: var(--text); position: relative; }
.mb-matrix tbody td { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.mb-matrix tr.row-rec th { box-shadow: inset 4px 0 0 var(--positive); }
.mb-matrix tr.row-pag th { box-shadow: inset 4px 0 0 var(--danger); }
.mb-matrix tr.row-tra th { box-shadow: inset 4px 0 0 var(--brand-blue); }
.mb-matrix tr.is-strong td, .mb-matrix tr.is-strong th { font-weight: var(--fw-bold); }

/* ============================================================================
   8. PILLS & CHIPS
   ---------------------------------------------------------------------------- */
.mb-pill { display: inline-flex; align-items: center; font-size: var(--fs-12);
  /* 🔴 2026-08-18 (Rafael, com print do cabeçalho da ficha: "as tags têm formatos diferentes — conseguimos
     deixar isso padrão? arredondamento dos cantos, altura"): a `mb-pill` era a ÚNICA em raio 7 e 28px de
     altura; `mb-tag`, `mb-score` e `mb-chipf` já eram CÁPSULA de 26 (padding 3px 10px). Alinhada às três —
     uma anatomia só para todo selo de estado. ⚠️ Selo novo copia esta linha, não inventa raio. */
  font-weight: var(--fw-semibold); padding: 3px 10px; border-radius: var(--r-pill); white-space: nowrap;
  /* v8 (2026-08-17): receita "tinted" da Apple — fundo = cor a ~15%, texto = a PRÓPRIA cor,
     SEM borda (a borda sutil de 2026-07-04 era o v7). Raio 7 (não pílula cheia). */
  border: 1px solid transparent; }
.mb-pill--paid    { background: var(--pill-paid-bg);    color: var(--pill-paid-fg); }
.mb-pill--open    { background: var(--pill-open-bg);    color: var(--pill-open-fg); }
.mb-pill--partial { background: var(--pill-partial-bg); color: var(--pill-partial-fg); }
.mb-pill--overdue { background: var(--pill-overdue-bg); color: var(--pill-overdue-fg); }
/* badge "Novo" (nav) */
.mb-badge-new { background: var(--brand-blue-50); color: var(--brand-blue-700);
  font-size: var(--fs-11); font-weight: var(--fw-bold); padding: 3px 9px; border-radius: 6px;
  border: 1px solid transparent; }

/* Score (0–100) — selo ÚNICO de score do sistema (Rafael 2026-07-04: "precisamos ter um padrão").
   Cor POR FAIXA via --sc-hue no style, IGUAL às réguas das telas de score (nada de gradiente
   contínuo): helpers score_hue()/entrevista_hue() na pessoas_lib — vermelho 0 · laranja 30 · verdes 92–111.
   ⟳ 2026-08-17 (Rafael): SEM a palavra "Score" no selo — só "<b>nº</b> · Classe" (fica subentendido; o rótulo da coluna/linha diz do que é).
   Uso: <span class="mb-score" style="--sc-hue:<?= score_hue($score) ?>">Score geral <b>30</b> · Crítico</span> */
.mb-score { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-12); font-weight: var(--fw-semibold); white-space: nowrap;
  /* 🔴 19/08 (Rafael: "o verde do selo de score não está muito gritante?"): o fundo era 72% de
     saturação — quase o verde puro. Com a paleta nova (azul e vermelho fechados) ele passou a ser
     a cor mais viva da lista, aparecendo em TODA linha. Fundo 72%→38% e texto 55%→45% de saturação,
     um pouco mais escuro para não perder contraste. A régua de matiz não muda (score_hue: 0 crítico ·
     30 atenção · 92 bom · 111 excelente), então a leitura por cor continua a mesma — só sem o brilho. */
  color: hsl(var(--sc-hue,120) 45% 27%); background: hsl(var(--sc-hue,120) 38% 92%);
  border: 1px solid transparent; }
.mb-score b { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: hsl(var(--sc-hue,120) 48% 24%); }

/* "Ajustar texto" (Levi) — linha de ações que o js/mb-levi-texto.js injeta sob
   textareas marcadas com data-levi-fix (campos longos de observações/anotações) */
.mb-levifix { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
/* ⚠️ o display:inline-flex do .mb-btn vence o [hidden] do navegador — sem esta linha o
   "Desfazer" (que nasce escondido) aparecia em TODO campo com data-levi-fix */
.mb-btn[hidden] { display: none; }

/* Chip de filtro removível */
.mb-chip { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-13);
  color: var(--brand-blue-700); background: var(--brand-blue-50);
  border: 1px solid transparent;
  padding: 6px 8px 6px 12px; border-radius: 8px; }
.mb-chip button { display: inline-flex; background: none; border: none; cursor: var(--cursor-acao);
  color: var(--link); padding: 2px; border-radius: 50%; }
.mb-chip button:hover { background: rgba(21,102,157,.15); }
.mb-clear { display: inline-flex; align-items: center; gap: 6px; color: var(--link);
  font-size: var(--fs-13); font-weight: var(--fw-semibold); cursor: var(--cursor-acao); background: none; border: none; }

/* ============================================================================
   9. MODAIS
   ---------------------------------------------------------------------------- */
.mb-overlay { position: fixed; inset: 0; background: var(--overlay); display: grid; place-items: center;
  z-index: var(--z-modal); padding: 24px; }
.mb-modal { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--sh-xl);   /* 22/08: sombra de JANELA do macOS (ver tokens) */
  width: 100%; max-width: 520px; overflow: hidden; }
.mb-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px 24px; border-bottom: 1px solid var(--border); }
/* `flex: 1` para o título encostar no ÍCONE quando ele existe — sem isso o
   `space-between` empurraria o texto para o meio da faixa. Sem ícone, nada muda. */
.mb-modal__head h3 { margin: 0; flex: 1 1 auto; font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--text); }
.mb-modal__head > .mb-modal__title { flex: 1 1 auto; }   /* o título promovido também cresce (pode ser h2/div) */

/* 🔴 ÍCONE DO AVISO — .mb-modal__ico (2026-08-19)
   Rafael: *"os pop ups de aviso tem que ter um ícone… fica muito pobre como está"*.
   O `mbConfirm`/`mbAlert` abria só com título, texto e dois botões — e é o único aviso do
   sistema sem ícone: o toast já tinha (§ .mb-toast svg) e o banner também (.mb-banner__icon).
   🔴 A COR É SEMÂNTICA, não enfeite — ela diz o que vai acontecer ANTES de a pessoa ler:
   vermelho = destrutivo · âmbar = atenção (só OK) · azul = confirmar · verde = concluído.
   Receita tinted da casa (fundo = a cor a ~15%, traço = a própria cor), a mesma de tag,
   pílula e banner. ⚠️ Ícone sem cor de estado seria só ruído: quem não tem estado não leva. */
.mb-modal__ico { width: 40px; height: 40px; border-radius: var(--r-pill); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-blue-50); color: var(--brand-blue); }
.mb-modal__ico svg { width: 22px; height: 22px; }
.mb-modal__ico--danger  { background: var(--danger-50);  color: var(--danger-700); }
.mb-modal__ico--warning { background: var(--warning-bg); color: var(--warning-700); }
.mb-modal__ico--success { background: var(--success-50); color: var(--success-700); }
/* 🔴 TÍTULO DO MODAL — .mb-modal__title (promovido 2026-08-19, varredura do sistema).
   Estava escrito à mão em 12 modais: 9 com o MESMO estilo inline copiado
   (`style="margin:0;font-size:var(--fs-20);font-weight:var(--fw-extra)"`) e 3 usando esta
   classe, que não existia no CSS — nesses o título saía sem tamanho nem peso.
   Serve em qualquer tag (h2/h3/div); use a classe, nunca o estilo inline. */
.mb-modal__title { margin: 0; font-size: var(--fs-20); font-weight: var(--fw-extra);
  color: var(--text); line-height: 1.25; }
.mb-modal__close { background: none; border: none; cursor: var(--cursor-acao); color: var(--text-muted);
  width: 32px; height: 32px; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; }
.mb-modal__close:hover { background: var(--surface-2); }
.mb-modal__body { padding: 20px 24px; color: var(--text); }
.mb-modal__foot { display: flex; justify-content: space-between; gap: 12px;
  padding: 16px 24px 20px; }
.mb-modal__foot.is-end { justify-content: flex-end; }
.mb-modal__foot.is-center { justify-content: center; }
/* variante anúncio de feature: borda superior azul + corpo centralizado */
.mb-modal--feature { max-width: 460px; border-top: 4px solid var(--brand-blue); text-align: center; }
.mb-modal--feature .mb-modal__body { padding: 28px 32px; }
.mb-modal__illus { width: 96px; height: 96px; margin: 0 auto 18px; color: var(--link); }

/* ============================================================================
   10. EMPTY STATE
   ---------------------------------------------------------------------------- */
.mb-empty { display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 48px 24px; color: var(--text-muted); }
.mb-empty__illus { width: 132px; height: 110px; margin-bottom: 18px; }
.mb-empty__title { font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--text); margin: 0 0 6px; }
.mb-empty__sub { font-size: var(--fs-14); color: var(--text-muted); margin: 0; }

/* ============================================================================
   11. DATEPICKER / CALENDÁRIO
   ----------------------------------------------------------------------------
   Campo-gatilho (visual de campo) + popover de calendário (.mb-cal).
   Navegação de mês = mesmo padrão de setas do period stepper.
   Dia selecionado / extremos de intervalo = --brand-blue (igual KPI/segmented).
   Variantes: single (padrão) e .mb-cal--range (faixa --brand-blue-50 entre
   os extremos). Demo estático na galeria; lógica de datas vem na migração PHP.
   ---------------------------------------------------------------------------- */
.mb-datepicker { position: relative; display: inline-block; }

/* Campo-gatilho — herda o visual do .mb-input, com ícone de calendário */
.mb-datefield {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font); font-size: var(--fs-14); color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); padding: 0 12px; min-height: 42px; min-width: 210px;
  cursor: var(--cursor-acao); transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.mb-datefield:hover { border-color: var(--brand-blue); }
.mb-datefield:focus-visible,
.mb-datefield.is-open { outline: none; border-color: var(--brand-blue);
  box-shadow: var(--ring) rgba(21, 102, 157, .18); }
.mb-datefield svg { width: 18px; height: 18px; color: var(--text-muted); flex: none; }
.mb-datefield__val { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* 21/08: placeholder/valor numa linha só — campo que não cabe alarga, não quebra */
.mb-datefield.is-placeholder .mb-datefield__val { color: var(--text-subtle); }

/* Popover do calendário */
.mb-cal {
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: none;   /* v8: vidro */
  border-radius: 12px; box-shadow: var(--sh-lg), var(--glass-ring);
  padding: 14px; width: 300px; z-index: var(--z-dropdown);
}
.mb-cal--range { width: 320px; }

/* Cabeçalho: ‹  Maio de 2026  › */
.mb-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mb-cal__nav {
  width: 34px; height: 34px; border-radius: var(--r-md); border: none;
  background: transparent; color: var(--link); cursor: var(--cursor-acao);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t-fast);
}
.mb-cal__nav:hover { background: var(--brand-blue-50); }
.mb-cal__nav svg { width: 18px; height: 18px; }
.mb-cal__title {
  font-family: var(--font); font-size: var(--fs-14); font-weight: var(--fw-bold);
  color: var(--text); background: none; border: none; cursor: var(--cursor-acao);
  padding: 6px 10px; border-radius: var(--r-sm); transition: background var(--t-fast);
}
.mb-cal__title:hover { background: var(--surface-2); }
/* mês/ano em selects no cabeçalho do calendário (troca de ano em 2 cliques) */
.mb-cal__mid { display: inline-flex; gap: 6px; align-items: center; }
.mb-cal__sel {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  font-family: var(--font); font-size: var(--fs-13); font-weight: var(--fw-bold);
  color: var(--navy); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 5px 22px 5px 9px; cursor: var(--cursor-acao);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315669d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center; background-size: 12px;
}
.mb-cal__sel:hover { border-color: var(--brand-blue); }

/* Cabeçalho dos dias da semana */
.mb-cal__dow { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 2px; }
.mb-cal__dow span {
  text-align: center; font-size: var(--fs-11); font-weight: var(--fw-semibold);
  color: var(--text-subtle); padding: 6px 0; text-transform: lowercase;
}

/* Grade de dias */
.mb-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.mb-cal__cell { display: flex; align-items: center; justify-content: center; padding: 1px 0; }
.mb-cal__day {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font); font-size: var(--fs-13); color: var(--text);
  background: transparent; border: none; cursor: var(--cursor-acao); position: relative;
  transition: background var(--t-fast), color var(--t-fast);
}
.mb-cal__day:hover { background: var(--brand-blue-50); }
.mb-cal__day.is-muted { color: var(--text-subtle); }            /* dia de outro mês */
.mb-cal__day.is-today { box-shadow: inset 0 0 0 1.5px var(--brand-blue); font-weight: var(--fw-bold); }
.mb-cal__day.is-selected { background: var(--brand-blue); color: #fff; }
.mb-cal__day.is-selected:hover { background: var(--brand-blue-700); }
.mb-cal__day[disabled] { color: var(--text-subtle); opacity: .5; cursor: not-allowed; }

/* Intervalo: a faixa fica na CÉLULA (atrás do círculo) p/ ficar contínua */
.mb-cal--range .mb-cal__cell.is-in-range    { background: var(--brand-blue-50); }
.mb-cal--range .mb-cal__cell.is-range-start { background: linear-gradient(to right, transparent 50%, var(--brand-blue-50) 50%); }
.mb-cal--range .mb-cal__cell.is-range-end   { background: linear-gradient(to left,  transparent 50%, var(--brand-blue-50) 50%); }
.mb-cal--range .mb-cal__day.is-range-start,
.mb-cal--range .mb-cal__day.is-range-end    { background: var(--brand-blue); color: #fff; }

/* Rodapé: atalho de texto (Hoje/Limpar) + Aplicar (azul sólido = secundária) */
.mb-cal__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--border);
}
.mb-cal__hint { font-size: var(--fs-11); color: var(--text-muted); line-height: 1.3; }
.mb-cal__day.is-disabled { opacity: .3; pointer-events: none; }   /* fora de data-min/data-max (ex.: RAS não mostra semana futura) */
/* ── STEPPER DE PERÍODO (item 57 do catálogo, promovido 2026-08-18 para a RAS): ‹ [período] › numa cápsula
   cinza da família do segmented; o miolo é um mb-datefield (modo week/month/single) que abre o calendário. */
.mb-stepper { display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 2px; background: var(--fill); border-radius: var(--r-pill); }
.mb-stepper__btn { width: 28px; height: 28px; border: 0; background: transparent; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; color: var(--text); cursor: var(--cursor-acao); text-decoration: none; font-size: 15px; line-height: 1; }
.mb .mb-stepper__btn, .mb a.mb-stepper__btn { color: var(--text); text-decoration: none; }
.mb-stepper__btn:hover { background: rgba(120,120,128,.14); }
.mb-stepper__btn[aria-disabled="true"] { opacity: .3; pointer-events: none; }
.mb-stepper .mb-datefield { height: 28px; min-height: 0; min-width: 0; border: 0; background: var(--surface); border-radius: var(--r-pill); box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); padding: 0 10px; font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text); gap: 8px; }
.mb-stepper .mb-datefield svg { width: 14px; height: 14px; color: var(--text-muted); }

/* ----------------------------------------------------------------------------
   11.1 CALENDÁRIO — MODO MÊS  (data-mode="month" no mb-datepicker.js)
   ----------------------------------------------------------------------------
   Escolhe um MÊS, não um dia: grade 3×4 + setas de ANO. Existe porque filtro de
   mês com calendário de dia obriga a pessoa a clicar num dia qualquer para dizer
   o mês (Aniversariantes, Tempo de Morada; DRE e relatórios pedem o mesmo).
   O valor gravado é YYYY-MM.                                                  */
.mb-cal--month { min-width: 268px; }
.mb-cal--month .mb-cal__ano {
  font-family: var(--font); font-size: var(--fs-14); font-weight: var(--fw-bold);
  color: var(--text); font-variant-numeric: tabular-nums; padding: 0 6px;
}
.mb-cal__meses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mb-cal__mes {
  font-family: var(--font); font-size: var(--fs-13); font-weight: var(--fw-semibold);
  color: var(--text-muted); background: transparent; border: 1px solid transparent;
  border-radius: var(--r-md); padding: 9px 0; cursor: var(--cursor-acao);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.mb-cal__mes:hover { background: var(--surface-2); color: var(--text); }
/* mês corrente = só o anel (referência); mês escolhido = navy cheio (é a seleção) */
.mb-cal__mes.is-today { border-color: var(--brand-blue); color: var(--link); }
.mb-cal__mes.is-selected { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ============================================================================
   12. BANNERS
   ----------------------------------------------------------------------------
   Faixa de comunicação. Família semântica na mesma lógica das pills
   (referencia tokens; sem hex solto). Cross-sell = navy + accent laranja
   (derivado de tokens — decisão 2026-05-29; sem hex novo); CTA usa o verde
   principal pelo contraste sobre navy (laranja segue "nunca em botão").
   Base = full-bleed (topo de página/topbar); .mb-banner--inline arredonda.
   ---------------------------------------------------------------------------- */
.mb-banner {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px;
  font-size: var(--fs-14); color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-left-width: 1px;   /* v8: sem a barra lateral grossa */
}
.mb-banner__icon { width: 20px; height: 20px; flex: none; }
.mb-banner__body { flex: 1; }
.mb-banner__body strong { font-weight: var(--fw-bold); }
.mb-banner__actions { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.mb-banner__close {
  background: none; border: none; cursor: var(--cursor-acao); color: inherit; opacity: .6;
  width: 28px; height: 28px; border-radius: var(--r-sm); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: opacity var(--t-fast), background var(--t-fast);
}
.mb-banner__close:hover { opacity: 1; background: rgba(10, 29, 58, .07); }
.mb-banner__close svg { width: 16px; height: 16px; }
.mb-banner--inline { border-radius: var(--r-lg); }

/* Variantes semânticas (tints existentes; bordas laterais nos tokens-base) */
/* v8: tinted — fundo a ~15%, texto e ícone na PRÓPRIA cor, sem borda */
.mb-banner--warning { background: var(--warning-bg);    border-color: transparent; color: var(--warning-700); }
.mb-banner--info    { background: var(--brand-blue-50);  border-color: transparent; color: var(--brand-blue-700); }
.mb-banner--success { background: var(--success-50);     border-color: transparent; color: var(--success-700); }
.mb-banner--danger  { background: var(--danger-50);      border-color: transparent; color: var(--danger-700); }
.mb-banner--warning .mb-banner__icon { color: var(--warning); }
.mb-banner--info    .mb-banner__icon { color: var(--link); }
.mb-banner--success .mb-banner__icon { color: var(--success-700); }
.mb-banner--danger  .mb-banner__icon { color: var(--danger-700); }
.mb-banner--warning .mb-banner__body strong { color: var(--warning); }

/* Cross-sell (promocional) — navy + accent laranja; CTA verde */
.mb-banner--crosssell {
  background: linear-gradient(95deg, var(--navy) 0%, var(--navy-700) 100%);
  color: var(--text-on-dark); border: none;
}
.mb-banner--crosssell .mb-banner__icon { color: var(--brand-orange); }
.mb-banner--crosssell .mb-accent { color: var(--brand-orange); font-weight: var(--fw-bold); }
.mb-banner--crosssell .mb-banner__close { color: var(--text-on-dark); }
.mb-banner--crosssell .mb-banner__close:hover { background: rgba(255, 255, 255, .14); }

/* ============================================================================
   13. PAGINAÇÃO
   ----------------------------------------------------------------------------
   Per-page (.mb-select) + páginas numéricas + "Ir para página".
   Página ativa = --brand-blue sólido (igual KPI/segmented ativo).
   ---------------------------------------------------------------------------- */
/* 🔴 RESPIRO ACIMA DO PAGINADOR (Rafael 2026-08-19: "aqui precisamos dar um espaçamento
   entre o fim da tabela e o rodapé, não?"). MEDIDO: a última linha da tabela encostava no
   rodapé — os `.pl-foot`/`.ll-foot`/`.tp-foot`… davam só 10–12px de padding-top e a moldura
   da tabela terminava rente à divisória.
   ⚠️ Vai no COMPONENTE e não nos 6 rodapés locais: eles têm paddings diferentes entre si
   (10 e 12), e corrigir um a um deixaria a folga desigual de tela para tela. */
.mb-pagination {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; font-size: var(--fs-13); color: var(--text-muted);
  margin-top: 10px;
}
.mb-pagination__info { display: inline-flex; align-items: center; gap: 8px; }
.mb-pagination__info .mb-select { min-height: 34px; padding: 6px 30px 6px 10px; width: auto; }
.mb-pagination__nav { display: inline-flex; align-items: center; gap: 6px; }
/* O "21–40 de 350". Existia em 3 telas (pessoas_lib, cadastros_completar e a ficha) SEM regra
   nenhuma no DS — o texto herdava o que viesse. Promovido em 19/08. Herda a cor e o corpo do
   .mb-pagination; o que ele acrescenta é o essencial: número de largura fixa, senão a linha
   "pula" a cada troca de página. */
.mb-pagination__range { font-variant-numeric: tabular-nums; white-space: nowrap; }

.mb-pg {
  min-width: 36px; height: 36px; padding: 0 8px; border-radius: var(--r-md);
  border: 1px solid var(--border-strong); background: var(--surface);
  font-family: var(--font); font-size: var(--fs-13); font-weight: var(--fw-semibold);
  color: var(--text); cursor: var(--cursor-acao); transition: all var(--t-fast);
  display: inline-flex; align-items: center; justify-content: center;
}
.mb-pg:hover { border-color: var(--brand-blue); color: var(--link); background: var(--brand-blue-50); }
.mb-pg.is-active { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
.mb-pg[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.mb-pg svg { width: 16px; height: 16px; }
.mb-pg--icon { padding: 0; }
.mb-pg__gap { min-width: 22px; text-align: center; color: var(--text-subtle); user-select: none; }

.mb-pagination__jump { display: inline-flex; align-items: center; gap: 8px; }
.mb-pagination__jump .mb-input { width: 64px; min-height: 36px; padding: 6px 10px; text-align: center; }

/* ============================================================================
   14. DASHBOARD — card, stat-card, lista de contas, charts (SVG), layout
   ----------------------------------------------------------------------------
   Primitivos da tela inicial (amostrados do dashboard da Conta Azul).
   Charts são SVG puro (zero dependência, igual ao resto do DS); as cores vêm
   de classes que apontam para os tokens — NENHUM hex dentro do SVG.
   ---------------------------------------------------------------------------- */

/* 14. Card genérico (cabeçalho opcional + corpo) -------------------------- */
.mb-card { background: var(--surface); border: none;
  border-radius: var(--r-xl); box-shadow: var(--sh-sm); }
.mb-card__head { display: flex; align-items: center; gap: 10px;
  padding: 18px 22px; border-bottom: 1px solid var(--border); }
.mb-card__title { font-size: var(--fs-20); font-weight: var(--fw-bold);
  color: var(--text); margin: 0; }
.mb-card__body { padding: 22px; }

/* 14.0 Ícone de título de seção/card (quadradinho colorido + SVG branco) ---
   Antes de todo título de bloco/card. A COR tem significado e se repete por tema
   (navy = identidade/estrutura · blue = informação · green = ok/positivo ·
   orange = atenção · red = crítico). Usar dentro do <h2> ou do cabeçalho flex.  */
/* Bloco de formulário (cartão + título com ícone colorido). PROMOVIDO ao DS em
   2026-07-28: a definição era IDÊNTICA e copiada em pessoa_form.php e empresa_form.php,
   e o formulário do plano de contas seria a 3ª cópia. Regra da casa: promover na 2ª tela.
   As telas seguem livres para acrescentar regras próprias sobre .pf-card (altura, grid…). */
/* v8 fase 4: card da ficha SEM borda (só sombra quase invisível + anel .5px do token), raio 16 */
.pf-card { background: var(--surface); border: none; border-radius: var(--r-xl);
  box-shadow: var(--sh-sm); padding: 24px; }
.pf-card + .pf-card { margin-top: 18px; }
.pf-sec-title { font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--text);
  margin: 0 0 16px; display: flex; align-items: center; gap: 8px; }
.pf-ico { width: 24px; height: 24px; border-radius: 7px; flex: none;
  display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.pf-ico svg { width: 14px; height: 14px; }
/* v8: ícone de título em GRADIENTE das cores de sistema (item 62 do catálogo) */
/* 🔴 19/08 (Rafael: "50 — alterar para as cores discretas"): os gradientes eram feitos com as
   cores CRUAS da Apple (systemIndigo/Blue/Green/Orange/Red) e ficaram gritando ao lado da paleta
   nova. Agora cada um sai do PRÓPRIO token, clareado por `color-mix` — nenhum tom foi escolhido
   à mão: o topo do gradiente é o token com 40% de branco. Trocar o token muda o ícone junto.
   ⚠️ `--navy` aqui era systemIndigo, que não tem nada a ver com o navy da marca: corrigido. */
.pf-ico--navy   { background: linear-gradient(160deg, color-mix(in srgb, var(--navy) 60%, #fff), var(--navy)); }
.pf-ico--blue   { background: linear-gradient(160deg, color-mix(in srgb, var(--brand-blue) 60%, #fff), var(--brand-blue)); }
.pf-ico--green  { background: linear-gradient(160deg, color-mix(in srgb, var(--success-700) 60%, #fff), var(--success-700)); }
.pf-ico--orange { background: linear-gradient(160deg, color-mix(in srgb, var(--brand-orange) 60%, #fff), var(--brand-orange)); }
.pf-ico--red    { background: linear-gradient(160deg, color-mix(in srgb, var(--danger) 60%, #fff), var(--danger)); }

/* 14.1 Seletor de arquivo (substitui o input file nativo) ------------------
   O input file do navegador não aceita estilo — por isso o campo é um <label>
   com a caixa do DS (mesma borda/altura do mb-input), um botão falso e o nome
   do arquivo; o <input type="file"> vai escondido dentro. Ao escolher, o JS da
   tela troca o texto e liga `.has-file`. `.is-over` = arrastando um arquivo
   por cima (zona de soltar). Markup:
     <label class="pf-filepick">
       <span class="pf-filepick__btn"><svg…/>Escolher</span>
       <span class="pf-filepick__name">Nenhum arquivo selecionado</span>
       <input type="file" name="arquivo">
     </label>
   Promovido ao DS em 2026-07-26 (estava copiado em pessoa_form, empresa_form
   e importacoes_md_processar; a 4ª tela seria cad_linhas_contratos).          */
/* altura EXATA de 42px (= mb-input): 4 + botão 32 + 4 + 2 de borda. Antes o padding 5
   dava 46 e o campo destoava dos vizinhos na mesma fileira (Rafael 2026-07-26). */
.pf-filepick { position: relative; display: flex; align-items: center; gap: 12px; height: 42px;
  padding: 4px 12px 4px 5px; border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--surface); cursor: var(--cursor-acao);
  transition: border-color var(--t-fast,.15s), box-shadow var(--t-fast,.15s), background var(--t-fast,.15s); }
.pf-filepick:hover { border-color: var(--brand-blue); }
.pf-filepick:focus-within, .pf-filepick.is-over { border-color: var(--brand-blue); box-shadow: var(--ring) rgba(21,102,157,.18); }
.pf-filepick.is-over { background: var(--brand-blue-50, var(--bg-subtle)); }
.pf-filepick > input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.pf-filepick__btn { display: inline-flex; align-items: center; gap: 6px; flex: none; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px 12px; font-size: var(--fs-13);
  font-weight: var(--fw-semibold); color: var(--text); }
.pf-filepick__btn svg { color: var(--link); }
.pf-filepick__name { min-width: 0; color: var(--text-subtle); font-size: var(--fs-14);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-filepick.has-file .pf-filepick__name { color: var(--text); font-weight: var(--fw-medium); }

/* Tag de rótulo (ex.: "Demonstração" âmbar) — neutra/semântica ------------ */
/* 🔴 SEM MOLDURA, E DA ALTURA DA PÍLULA (Rafael 2026-08-19: "não pode ter moldura, todas com a
   mesma altura. Tem alguma justificativa para ter moldura?"). A borda existia para separar TAG
   (descreve o registro: origem, pendência) de PÍLULA (descreve a situação) quando aparecem na
   mesma linha — distinção que ninguém lê num contorno de 28%: o que se via era uma com contorno
   e outra sem, na mesma coluna. A diferença que importa continua sendo a COR e o texto.
   ⚠️ Duas mudanças, não uma: sem a borda E `inline-flex` + `align-items:center` como a pílula —
   era o `inline-block` (mais 1px de borda em cima e embaixo) que deixava a tag mais alta. */
/* 🔴 A BASE GANHOU FUNDO (Rafael 2026-08-19: "origem automática tem que ter a tag" + "quando
   for neutro pode ser 0, cinza claro a tag"). A regra só tinha LAYOUT — padding, raio, sem
   borda — e nenhum fundo: `class="mb-tag"` sem variante de cor renderizava como TEXTO SOLTO.
   Eram 15 usos em 9 telas parecendo texto ("Automática", "Grupo", "neutro", campos…), e por
   isso a coluna Origem mostrava "Manual" com pílula azul ao lado de "Automática" pelada.
   Cinza claro = a variante NEUTRA da família (as outras usam tint -50 + texto -700). */
.mb-tag { display: inline-flex; align-items: center; font-size: var(--fs-12); font-weight: var(--fw-semibold);
  padding: 3px 10px; border-radius: var(--r-pill); border: 0;
  background: var(--bg-subtle); color: var(--text-muted); }
.mb-tag--demo   { background: var(--warning-bg); color: var(--warning-700); }
/* variantes de cor p/ diferenciar origens/estados (ex.: Automático azul · Manual laranja · Novo verde) */
.mb-tag--blue   { background: var(--brand-blue-50);   color: var(--link); }
/* 19/08 (Rafael: "no 41 o laranja está muito gritante"): o TEXTO usava o --brand-orange, que é
   o laranja da MARCA (o B da logo) — vivo por natureza. O DS já tinha o --brand-orange-700
   ("laranja queimado, texto sobre tint claro") justamente para isto, e ninguém usava. */
.mb-tag--orange { background: var(--brand-orange-50); color: var(--brand-orange-700); }
.mb-tag--green  { background: var(--success-50);      color: var(--positive); }
/* vermelha: estado que IMPEDE algo (1º uso: "Entrevista vencida" na ficha do candidato).
   ⚠️ Não confundir com a --demo (âmbar), que é "dado ilustrativo", nem com a mb-pill--overdue,
   que é situação de registro; a tag descreve o registro, a pílula descreve a situação dele. */
.mb-tag--danger { background: var(--danger-50); color: var(--danger-700); }

/* Combobox (busca com lista) — campo de busca que abre a LISTAGEM COMPLETA no foco
   e filtra conforme se digita; resultados agrupados por categoria (cabeçalho fixo).
   Promovido da Calculadora (picker de produtos e de condomínio) em 2026-07-17.
   Uso: .mb-combo > .mb-search (input) + .mb-combo__drop (hidden); valor escolhido
   vai num input hidden — digitar de novo invalida a escolha. ---------------------- */
.mb-combo { position: relative; }
.mb-combo .mb-search { width: 100%; }
.mb-combo__drop { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--sh-md);
  z-index: 300; max-height: 280px; overflow: auto; }
.mb-combo__item { padding: 9px 12px; cursor: var(--cursor-acao); border-bottom: 1px solid var(--border); font-size: var(--fs-13); }
.mb-combo__item:last-child { border-bottom: none; }
.mb-combo__item:hover { background: var(--surface-2); }
.mb-combo__item small { color: var(--text-muted); display: block; margin-top: 2px; }
.mb-combo__cat { position: sticky; top: 0; z-index: 1; padding: 6px 12px 5px; background: var(--surface-2);
  color: var(--text-muted); font-size: var(--fs-12); font-weight: var(--fw-bold); border-bottom: 1px solid var(--border); }
.mb-combo__empty { padding: 10px 12px; color: var(--text-muted); font-size: var(--fs-13); }

/* 14.1 Stat-card (KPI elevado: prefixo R$ + valor grande + rótulo) -------- */
.mb-stat { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--sh-sm); padding: 22px 24px; text-align: center; }
.mb-stat__value { font-size: var(--fs-30); font-weight: var(--fw-bold);
  line-height: var(--lh-tight); font-variant-numeric: tabular-nums; }
.mb-stat__value .mb-stat__cur { font-size: var(--fs-16); font-weight: var(--fw-semibold);
  margin-right: 3px; }                 /* "R$" herda a cor do valor */
.mb-stat__value.is-pos { color: var(--positive); }
.mb-stat__value.is-neg { color: var(--negative); }
.mb-stat__label { font-size: var(--fs-14); font-weight: var(--fw-semibold);
  color: var(--text); margin-top: 8px; }
.mb-stat__sub { font-size: var(--fs-13); color: var(--text-muted); margin-top: 2px; }

/* Grupo de stat-cards com título (ex.: "A receber" / "A pagar") ----------- */
.mb-stat-group__head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.mb-stat-group__title { font-size: var(--fs-20); font-weight: var(--fw-bold); color: var(--text); }

/* 14.2 Lista de contas financeiras (dentro de um card) ------------------- */
.mb-acct-total { text-align: center; padding: 2px 0 18px; }
.mb-acct-total__value { font-size: var(--fs-24); font-weight: var(--fw-bold); color: var(--text); }
.mb-acct-total__label { font-size: var(--fs-13); color: var(--text-muted); }
.mb-acct { display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; }
.mb-acct + .mb-acct { margin-top: 14px; }
.mb-acct__logo { width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold); font-size: var(--fs-14); color: var(--text-on-dark); }
.mb-acct__body { flex: 1; min-width: 0; }
.mb-acct__name { font-weight: var(--fw-bold); color: var(--text); }
.mb-acct__type { font-size: var(--fs-13); color: var(--text-muted); }
.mb-acct__value { font-size: var(--fs-14); color: var(--text); margin-top: 2px; }
.mb-acct__foot { margin-top: 10px; }
.mb-acct__link { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--link); }

/* 14.3 Charts (SVG puro) -------------------------------------------------- */
.mb-chart svg { display: block; width: 100%; height: auto; font-family: var(--font); overflow: visible; }
.mb-chart .mb-grid-mid   { stroke: var(--border); stroke-width: 1; }
.mb-chart .mb-grid--zero { stroke: var(--border-strong); stroke-width: 1.5; }
.mb-chart .mb-axis-label    { fill: var(--text-subtle); font-size: 11px; }
.mb-chart .mb-axis-label--x { fill: var(--text-muted); font-size: 12px; }
.mb-chart .mb-bar--pos { fill: var(--positive); }   /* recebimentos / faturamento */
.mb-chart .mb-bar--neg { fill: var(--danger); }      /* pagamentos */
.mb-chart .mb-line { fill: none; stroke: var(--navy); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round; }
.mb-chart .mb-line__dot { fill: var(--navy); }

/* Legenda do chart */
.mb-chart__legend { display: flex; flex-wrap: wrap; justify-content: center;
  gap: 20px; margin-top: 14px; }
.mb-chart__legend-item { display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-13); color: var(--text-muted); }
.mb-chart__swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.mb-chart__swatch--pos  { background: var(--positive); }
.mb-chart__swatch--neg  { background: var(--danger); }
.mb-chart__swatch--line { width: 18px; height: 2px; border-radius: 0; background: var(--navy); }

/* 14.4 Layout do dashboard (grids responsivos) --------------------------- */
.mb-dash-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mb-stat-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mb-dash-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px; margin-top: 24px; }
@media (max-width: 720px) {
  .mb-dash-stats { grid-template-columns: 1fr; }
}

/* ============================================================================
   15. ASSISTENTE (Levi) — avatar · chip · ação de IA · painel · welcome · análise
   ----------------------------------------------------------------------------
   Porte fiel do assistente "Levi" do mockup dre_v105 para os tokens do DS.
   Mapeamento de cor:
     mockup --azul (#08212e, fazia papel duplo de navy+texto):
        · como SUPERFÍCIE escura (header do painel, bolha do usuário, enviar) → --navy
        · como ÊNFASE de texto (negrito na bolha do bot)                      → --brand-blue
     mockup --laranja → --brand-orange (anel do avatar, ponto do rodapé, sub-label)
   Ação de IA usa o azul do sistema (--brand-blue) — sem cor fora da paleta CA.
   Os translúcidos rgba(255,255,255,…) são o tratamento "sobre navy" (sem token
   próprio no DS, mantidos do mockup — mesma lógica do gx-nav sobre o rail).
   ---------------------------------------------------------------------------- */

/* 15. Avatar (primitivo reutilizável; Levi é uma instância) --------------- */
.mb-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-blue-50); }
.mb-avatar__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; } /* corte enquadra o rosto (leitura facial) */
.mb-avatar__fallback { width: 100%; height: 100%; display: flex; align-items: center;
  justify-content: center; font-weight: var(--fw-bold); color: var(--text-on-dark);
  background: var(--navy); font-size: var(--fs-14); }
.mb-avatar--sm { width: 26px; height: 26px; }
.mb-avatar--sm .mb-avatar__fallback { font-size: var(--fs-11); }
.mb-avatar--lg { width: 56px; height: 56px; }
.mb-avatar--ring { border: 1.5px solid var(--brand-orange); }

/* 15.1 Chip do assistente (gatilho no header; vive SOBRE superfície navy) - */
.mb-assistant-chip { display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 12px 3px 3px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.20); background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.85); font-family: var(--font); font-size: var(--fs-14);
  font-weight: var(--fw-semibold); letter-spacing: -.01em; cursor: var(--cursor-acao);
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
.mb-assistant-chip:hover { background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.35); color: #fff; }
.mb-assistant-chip:active { transform: scale(.97); }
.mb-assistant-chip__label { line-height: 1; }

/* 15.2 Ação de IA ("Analisar oportunidades") — chip azul (cor de ação do DS) */
.mb-ai-action { display: inline-flex; align-items: center; gap: 5px;
  background: var(--brand-blue-50); color: var(--link); padding: 3px 8px;
  border-radius: var(--r-sm); font-size: var(--fs-11); font-weight: var(--fw-semibold);
  border: none; cursor: var(--cursor-acao); font-family: var(--font); line-height: 1.3;
  transition: background var(--t-fast), color var(--t-fast); }
.mb-ai-action:hover { background: var(--brand-blue); color: #fff; }
.mb-ai-action svg { width: 13px; height: 13px; }

/* 15.3 Painel do assistente (drawer lateral conversacional) --------------
   🔴 v8 (2026-08-17, padrão Apple): o drawer virou VIDRO (Liquid Glass) com cabeçalho CLARO — o
   navy saiu do cromo do Levi (era o único bloco escuro que sobrava ao lado das faixas). Bolha do
   usuário = azul de ação (é a única cor cheia do painel: "isto foi você"), bolha do Levi =
   branca; input em cápsula cinza; Enviar = seta azul redonda; chips de sugestão tinted azul.
   Backup v7 em _dev/backup/fase1_v8_20260817/morada-ca.css. */
/* 🔴 O DRAWER TRAZ O PRÓPRIO `box-sizing` (2026-08-20) — ele é filho direto do <body>, então não
   entra na guarda da title bar. Mesma razão do menu lateral: o sistema não tem reset global e a
   `financeiro_dre.php` não declara o dela; sem isto o Levi renderiza em content-box só ali. */
.mb-assistant, .mb-assistant *, .mb-assistant *::before, .mb-assistant *::after { box-sizing: border-box; }
.mb-assistant__overlay { position: fixed; inset: 0; background: rgba(0,0,0,.18);
  z-index: var(--z-modal); opacity: 0; transition: opacity var(--t-base); }
.mb-assistant__overlay[hidden] { display: none; }   /* fechado: fora da árvore de pintura */
.mb-assistant__overlay.is-open { opacity: 1; }
.mb-assistant { position: fixed; top: 10px; right: 10px; bottom: 10px; width: 400px; max-width: 92vw;
  height: auto; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-radius: 18px; box-shadow: var(--sh-lg), var(--glass-ring);
  z-index: calc(var(--z-modal) + 1); transform: translateX(calc(100% + 16px));
  /* ⚠️ `visibility:hidden` enquanto fechado (Rafael 2026-08-17: "cada vez que clica em algo o Levi
     carrega de novo, com um efeito feio"): fechado o painel NÃO é pintado nem participa de transição
     nenhuma na carga da página — o vidro com blur de um painel fora da tela ainda custava um quadro
     visível a cada navegação. A transição só roda ao abrir/fechar. */
  visibility: hidden; transition: transform .22s cubic-bezier(.22,.61,.36,1), visibility 0s .22s;
  display: flex; flex-direction: column; font-family: var(--font); overflow: hidden; }
.mb-assistant.is-open { transform: translateX(0); visibility: visible; transition: transform .22s cubic-bezier(.22,.61,.36,1), visibility 0s; }
.mb-assistant__header { background: transparent; color: var(--text);
  padding: 14px 14px 12px 16px; display: flex; align-items: center; gap: 11px; flex: none;
  border-bottom: 1px solid rgba(0,0,0,.06); }
.mb-assistant__heading { flex: 1; min-width: 0; }
.mb-assistant__heading h3 { margin: 0; font-size: var(--fs-14); font-weight: var(--fw-bold);
  letter-spacing: -.01em; color: var(--text); }
.mb-assistant__sub { font-size: var(--fs-11); color: var(--text-muted);
  font-weight: var(--fw-medium); margin-top: 1px; }
.mb-assistant__sub strong { color: var(--brand-orange); font-weight: var(--fw-bold); }
.mb-assistant__close { background: var(--fill); border: none; color: var(--text-muted);
  width: 28px; height: 28px; border-radius: 50%; font-size: 18px; line-height: 1; cursor: var(--cursor-acao);
  padding: 0; font-family: var(--font); display: inline-grid; place-items: center; flex: none;
  transition: background var(--t-fast), color var(--t-fast); }
.mb-assistant__close:hover { background: var(--fill-hover); color: var(--text); }
/* "Nova conversa" (histórico no banco, 18/08): apaga a conversa do usuário e volta à saudação */
.mb-assistant__nova { background: var(--fill); border: none; color: var(--text-muted); width: 28px; height: 28px; border-radius: 50%;
  cursor: var(--cursor-acao); padding: 0; display: inline-grid; place-items: center; flex: none; margin-right: 6px; transition: background var(--t-fast), color var(--t-fast); }
.mb-assistant__nova:hover { background: var(--fill-hover); color: var(--text); }
.mb-assistant__nova svg { width: 15px; height: 15px; }
.mb-assistant__dia { text-align: center; font-size: var(--fs-11); font-weight: var(--fw-semibold); color: var(--text-subtle); margin: 6px 0 10px; }
.mb-assistant__body { flex: 1; overflow-y: auto; padding: 16px 14px 10px;
  background: transparent; scroll-behavior: smooth; }
.mb-assistant__footer { flex: none; padding: 8px 12px 10px; background: transparent;
  border-top: 1px solid rgba(0,0,0,.06); }
.mb-assistant__inputrow { display: flex; gap: 8px; align-items: center; }
.mb-assistant__input { flex: 1; min-width: 0; border: 1px solid transparent; min-height: 38px;
  border-radius: 99px; padding: 8px 14px; font-size: var(--fs-13);
  font-family: var(--font); color: var(--text); background: var(--fill); outline: none;
  transition: background var(--t-fast), box-shadow var(--t-fast); }
.mb-assistant__input:focus { background: var(--surface); box-shadow: 0 0 0 1px var(--brand-blue), var(--ring) rgba(10, 29, 58,.16); }
.mb-assistant__input::placeholder { color: var(--text-subtle); }
/* Enviar = botão redondo azul (o texto "Enviar" continua no markup para o leitor de tela;
   visualmente é a seta) */
.mb-assistant__send { background: var(--brand-blue); border: none; color: #fff; width: 36px; height: 36px;
  padding: 0; border-radius: 50%; cursor: var(--cursor-acao); font-size: 0; flex: none; position: relative;
  transition: background var(--t-fast), transform var(--t-fast); }
.mb-assistant__send::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
  border-top: 2.2px solid #fff; border-right: 2.2px solid #fff; transform: translate(-60%, -35%) rotate(-45deg); }
.mb-assistant__send:hover { background: var(--brand-blue-700); }
.mb-assistant__send:active { transform: scale(.94); }
.mb-assistant__send:disabled { background: var(--fill); cursor: default; }
.mb-assistant__send:disabled::before { border-color: var(--text-subtle); }
.mb-assistant__note { font-size: var(--fs-11); color: var(--text-subtle); text-align: center;
  margin-top: 6px; }
.mb-assistant__note-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand-orange); margin-right: 4px; vertical-align: 1px; }

/* 15.4 Bolhas de conversa (dentro do painel) ----------------------------- */
.mb-assistant__msg { display: flex; gap: 8px; margin-bottom: 10px; }
.mb-assistant__msg--bot { justify-content: flex-start; }
.mb-assistant__msg--user { justify-content: flex-end; }
.mb-assistant__bubble { max-width: 88%; padding: 9px 13px; border-radius: 16px;
  font-size: var(--fs-13); line-height: var(--lh-normal); color: var(--text);
  word-wrap: break-word; }
.mb-assistant__msg--bot .mb-assistant__bubble { background: var(--surface);
  border: none; border-bottom-left-radius: 5px; box-shadow: var(--sh-sm); }
.mb-assistant__msg--bot .mb-assistant__bubble strong { color: var(--text); font-weight: var(--fw-bold); }
.mb-assistant__msg--user .mb-assistant__bubble { background: var(--brand-blue); color: #fff;
  border-bottom-right-radius: 5px; }
.mb-assistant__msg--user .mb-assistant__bubble strong { color: #fff; }
/* link para tela do sistema dentro da resposta (o fmt() do topbar só renderiza link RELATIVO) */
.mb .mb-assistant__link { color: var(--brand-blue-700); font-weight: var(--fw-semibold); text-decoration: none;
  border-bottom: 1px solid rgba(10, 29, 58,.35); }
.mb .mb-assistant__link:hover { border-bottom-color: var(--brand-blue-700); text-decoration: none; }
.mb-assistant__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.mb-assistant__chip { background: var(--brand-blue-50); border: none;
  color: var(--brand-blue-700); padding: 7px 12px; border-radius: 99px; font-size: var(--fs-12);
  font-weight: var(--fw-semibold); cursor: var(--cursor-acao); line-height: 1.2; text-align: left;
  font-family: var(--font); transition: background var(--t-fast), color var(--t-fast); }
.mb-assistant__chip:hover { background: var(--brand-blue); color: #fff; }
.mb-assistant__chip:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 600px) { .mb-assistant { top: 0; right: 0; bottom: 0; border-radius: 0; max-width: 100vw; } }
/* 15.5 Welcome popover (1ª visita; em produção é position:fixed + JS) ----- */
.mb-assistant-welcome { position: relative; width: 240px; background: var(--surface);
  border: none; border-radius: 14px; box-shadow: var(--sh-lg);
  padding: 11px 28px 11px 14px; font-family: var(--font); }
.mb-assistant-welcome::before { content: ''; position: absolute; top: -6px; right: 24px;
  width: 12px; height: 12px; background: var(--surface); border-left: 1px solid var(--border);
  border-top: 1px solid var(--border); transform: rotate(45deg); }
.mb-assistant-welcome p { margin: 0 0 4px; font-size: var(--fs-12); color: var(--text);
  line-height: var(--lh-normal); }
.mb-assistant-welcome p:last-child { margin-bottom: 0; }
.mb-assistant-welcome strong { color: var(--link); font-weight: var(--fw-bold); }
/* 🔴 19/08 (Rafael: "arrumar o botão do Levi — texto branco"): esta regra nasceu para um CTA de
   TEXTO ("é só me chamar aqui em cima"), mas o markup usa `mb-btn mb-btn--primary` + esta classe
   no mesmo elemento — e o `color` daqui vencia o branco do botão, deixando letra cinza sobre azul.
   O `:not(.mb-btn)` devolve o botão para o DS e mantém o CTA de texto como era. */
.mb-assistant-welcome__cta:not(.mb-btn) { color: var(--text-subtle); font-size: var(--fs-11); }
.mb-assistant-welcome__close { position: absolute; top: 2px; right: 4px; background: none;
  border: none; font-size: 16px; line-height: 1; color: var(--text-subtle); cursor: var(--cursor-acao);
  padding: 3px 6px; font-family: var(--font); }
.mb-assistant-welcome__close:hover { color: var(--text); }

/* 15.6 Análise de IA (conteúdo de modal gerado pelo Levi) ---------------- */
.mb-ai-analysis { font-size: var(--fs-13); color: var(--text-muted); line-height: 1.55; padding: 4px 0; }
.mb-ai-analysis p { margin: 0 0 10px; }
.mb-ai-analysis ol { padding-left: 22px; margin: 8px 0; }
.mb-ai-analysis li { margin-bottom: 8px; }
.mb-ai-analysis strong { color: var(--text); }
.mb-ai-analysis code { background: var(--surface-2); padding: 1px 5px; border-radius: var(--r-sm);
  font-size: var(--fs-12); color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.mb-ai-analysis em { color: var(--text-subtle); font-size: var(--fs-12); }

/* Responsivo: painel ocupa a tela em telas pequenas */
@media (max-width: 600px) {
  .mb-assistant { width: 100vw; max-width: 100vw; }
}

/* ============================================================================
   16. AJUDA DE CAMPO — .pf-help (ícone "?") · .pf-orient (caixa) · .pf-rule (mini-tag)
   ----------------------------------------------------------------------------
   Promovidas do pessoa_form.php para o DS (v7) — fonte ÚNICA; as cópias locais
   nas telas podem ser removidas na limpeza (mesmos valores, sem conflito).
   Regras de uso (PADROES.md):
     .pf-help   = PREFERIDO. "?" ao lado do RÓTULO/título; tooltip navy no
                  hover/foco (tabindex="0" dá acesso por teclado e toque).
                  Existe em todo campo que não for autoexplicativo.
     .pf-orient = caixa azul sempre visível — SÓ para orientação crítica.
     .pf-rule   = mini-tag de regra/condição SEMPRE visível sob o campo
                  (complementa o .pf-help, que guarda a explicação longa).
     .pf-hint   = micro-nota neutra e curta, só quando indispensável.
   ---------------------------------------------------------------------------- */
.pf-help { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  margin-left: 6px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-muted); font-size: 11px; font-weight: var(--fw-bold); cursor: default; position: relative;
  vertical-align: middle; flex: none; }
.pf-help:hover, .pf-help:focus-visible { border-color: var(--brand-blue); color: var(--link); outline: none; }
.pf-help__tip { position: absolute; bottom: calc(100% + 8px); left: 0; width: var(--tip-w, 300px); max-width: 70vw;
  /* 🐛 21/08: o balão mora DENTRO do rótulo — quando o rótulo virou `white-space: nowrap` (ficha, "rótulo nunca
     quebra") o texto do ? herdou o nowrap, virou uma linha de ~1.200px invisível e abriu rolagem horizontal na
     ficha inteira. O balão sempre quebra, seja qual for o rótulo que o carrega. */
  white-space: normal;
  /* v8 (varredura 18/08): o popover do "?" é VIDRO CLARO com texto escuro (item 10 do catálogo) — era navy */
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  color: var(--text); font-size: var(--fs-12); font-weight: var(--fw-regular); line-height: 1.5;
  text-align: left; padding: 10px 12px; border-radius: 12px; box-shadow: var(--sh-lg), var(--glass-ring);
  /* 🐛 21/08 (Rafael, ficha #1330 com rolagem horizontal): escondido era `visibility: hidden` — e elemento
     invisível POSICIONADO continua contando na área de rolagem do contêiner. Um "?" perto da borda direita
     (balão de 300px) empurrava a rolagem da ficha inteira sem ninguém ver nada. Escondido agora é
     `display: none` (fora do layout); a entrada anima por keyframe, a saída é imediata — o mesmo espírito
     do tooltip instantâneo do DS. */
  display: none; z-index: var(--z-dropdown); }
.pf-help__tip b { font-weight: var(--fw-bold); color: var(--text); }
.pf-help:hover .pf-help__tip, .pf-help:focus .pf-help__tip,
.pf-help:focus-within .pf-help__tip { display: block; animation: pf-tip-in .15s ease; }
@keyframes pf-tip-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* perto da borda DIREITA o balão ancora à direita do "?" — classe posta pelo js/mb-help-flip.js no hover */
.pf-help--end .pf-help__tip { left: auto; right: 0; }
/* variante: balão abre PARA BAIXO (quando o "?" está no topo da tela, sem espaço acima).
   Largura maior: setar --tip-w no próprio .pf-help (ex.: style="--tip-w:360px").
   NUNCA copiar o componente para o <style> da tela — foi isso que causou o bug do
   balão colapsado (top+bottom simultâneos, cópia local vs DS). */
.pf-help--down .pf-help__tip { bottom: auto; top: calc(100% + 8px); animation-name: pf-tip-in-down; }
@keyframes pf-tip-in-down { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pf-help--down:hover .pf-help__tip, .pf-help--down:focus .pf-help__tip,
.pf-help--down:focus-within .pf-help__tip { transform: translateY(0); }

/* Tooltip INSTANTÂNEO — [data-mb-tip="texto"] em QUALQUER elemento: balão navy no hover,
   sem o delay do title nativo. Para rótulos curtos (1 linha): régua de passos, ícones de
   ação, células compactas. Texto longo/rico (negrito, regras) → .pf-help.
   Modificadores: .mb-tip--down (abre para baixo) · .mb-tip--wrap (quebra linha, máx. 280px) ·
   .mb-tip--end (alinha o balão pela DIREITA do elemento). */
[data-mb-tip] { position: relative; }
/* 🐛 21/08 (Rafael, "páginas com rolagem horizontal, não pode ter"): o balão escondido era `visibility: hidden`
   — e pseudo-elemento posicionado invisível CONTA na área de rolagem do contêiner. Um número na ponta direita
   da faixa com um balão de 400px (nowrap) esticava a faixa de Admissões e rescisões em 154px, a Entrevista de
   seleção em 30px, a Jornada em 11px… Escondido agora é `display: none` (fora do layout); a entrada anima por
   keyframe (só opacidade — o deslize de 3px saiu junto com a transição). Mesma correção do `.pf-help__tip`. */
[data-mb-tip]::after { content: attr(data-mb-tip); position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%); background: rgba(10,29,58,.92); color: #fff; font-size: var(--fs-12);   /* v8: tooltip escuro translúcido */
  backdrop-filter: none; backdrop-filter: none;
  font-weight: var(--fw-regular); line-height: 1.35; padding: 6px 10px; border-radius: 7px;
  box-shadow: var(--sh-md); white-space: nowrap; display: none; pointer-events: none;
  z-index: var(--z-dropdown); text-transform: none; }
[data-mb-tip]:hover::after, [data-mb-tip]:focus-visible::after { display: block; animation: mb-tip-in .12s ease; }
@keyframes mb-tip-in { from { opacity: 0; } to { opacity: 1; } }
.mb-tip--down::after { bottom: auto; top: calc(100% + 6px); }
.mb-tip--wrap::after { white-space: normal; width: max-content; max-width: 280px; }
/* 🔴 ELEMENTO NA QUINA DIREITA DA TELA (Rafael 2026-07-30: o balão do Exportar saía cortado).
   O balão é centralizado no elemento, então metade dele vaza para fora quando o botão está
   encostado na borda — e some de vez se o container tiver overflow:hidden, como o app-shell.
   --end ancora o balão pela DIREITA: ele cresce para dentro da tela. Combina com --down.
   ⚠️ O `transform` precisa ser reescrito nas 4 combinações: ele carrega o translateX(-50%)
   da centralização, e sobrescrever só o `left` deixaria o balão deslocado meia largura. */
.mb-tip--end::after { left: auto; right: 0; transform: none; }

.pf-orient { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 11px 14px;
  background: var(--brand-blue-50); border: 1px solid var(--border); border-radius: var(--r-lg);
  font-size: var(--fs-13); color: var(--text); line-height: 1.5; }
.pf-orient svg { flex: none; color: var(--link); margin-top: 2px; width: 18px; height: 18px; }
.pf-orient b { font-weight: var(--fw-semibold); }

.pf-rules { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.pf-rule { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-11);
  color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 3px 9px; line-height: 1.3; }
.pf-rule b { font-weight: var(--fw-semibold); color: var(--text); }
/* Regras DENTRO do tooltip do "?" (decisão Rafael 2026-07-03): as mini-tags vivem
   no rodapé do balão, DESTACADAS (termo-chave em laranja sobre o navy) — a regra
   fica junto da explicação, sem poluir a tela. Tag solta sob o campo deixa de ser
   padrão; regra CRÍTICA/bloqueante que precisa estar sempre à vista usa .pf-orient. */
.pf-help__tip .pf-rules { margin-top: 9px; gap: 5px; }
.pf-help__tip .pf-rule { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.28);
  color: #fff; }
.pf-help__tip .pf-rule b { color: var(--brand-orange); font-weight: var(--fw-bold); }

.pf-hint { font-size: var(--fs-12); color: var(--text-subtle); margin-top: 5px; }

/* ============================================================================
   17. TOASTS — confirmação flutuante e efêmera (sucesso/erro/info)
   ----------------------------------------------------------------------------
   Toast = feedback de AÇÃO CONCLUÍDA (salvou, excluiu, enviou) — some sozinho
   (~4s). Aviso que fica na tela = mb-banner; erro de campo = .mb-error.
   🔴 Posição: canto INFERIOR direito, 84px do chão (Rafael 2026-08-10: "colocar
   para baixo, rodapé direita" — no topo o toast navy COLAVA na topbar navy e as
   mensagens perdiam contraste). ⚠️ Os 84px não são chute: é o que pula o rodapé
   fixo de Salvar (.pf-foot) e o paginador (~64px) — foi por cobri-los que o
   toast tinha ido pro topo em versão anterior; assim ele fica embaixo SEM tapar
   a ação da tela. Helper global mbToast(msg, tipo) já vem em toda tela via
   head_assets.php (js/mb-dialog.js); flash de POST+redirect usa
   mb_toast_flash() do config.php.
   ---------------------------------------------------------------------------- */
.mb-toast-stack { position: fixed; right: 20px; bottom: 84px; display: flex;
  flex-direction: column; align-items: flex-end; gap: 10px; z-index: var(--z-toast); }
@media (max-width: 820px) {
  .mb-toast-stack { right: 12px; bottom: 78px; }
  .mb-toast { min-width: 0; max-width: calc(100vw - 24px); }
}
.mb-toast { display: flex; align-items: center; gap: 10px; min-width: 280px; max-width: 400px;
  background: var(--navy); color: #fff; border-radius: 16px; box-shadow: var(--sh-lg);
  padding: 12px 14px; font-size: var(--fs-13); animation: mb-toast-in .22s ease; }
.mb-toast svg { width: 18px; height: 18px; flex: none; }
.mb-toast--success svg { color: var(--positive); }
.mb-toast--danger  svg { color: var(--danger-50); }
.mb-toast--info    svg { color: var(--brand-blue-50); }
.mb-toast__msg { flex: 1; }
.mb-toast__msg b { font-weight: var(--fw-bold); }
.mb-toast__close { background: none; border: none; color: rgba(255,255,255,.6); cursor: var(--cursor-acao);
  padding: 2px; border-radius: var(--r-sm); display: inline-flex; flex: none; }
.mb-toast__close:hover { color: #fff; }
.mb-toast__close svg { width: 14px; height: 14px; }
.mb-toast.is-leaving { animation: mb-toast-out .3s ease forwards; pointer-events: none; }

/* ── AVISO DO SISTEMA (peça 75, 22/08) ─────────────────────────────────────────────────────────────────────
   Rafael, vendo a cápsula "Nova versão disponível" no topo: "será que não precisamos dar uma cor nesse aviso? Ou ele
   teria que ser o nosso padrão no rodapé?" → escolheu esta peça (mockup na tela real). É a NOTIFICAÇÃO do macOS:
   cartão BRANCO (cor só para estado — aviso do sistema é neutro), a MARCA à esquerda no lugar de qualquer bolinha ou
   tint (é ela que dá identidade, como o ícone do app), texto em uma linha, ações à direita, e NÃO some sozinho — é para
   quem precisa decidir (Recarregar · Depois). Mora no canto dos toasts (44), acima do rodapé fixo: um lugar só para
   tudo que flutua e fala com você. Diferença para o toast: o toast some em 4s (confirmação); este fica.
   ⟳ 23/08 (Rafael: "essa barra tem que ser azul mesmo… para chamar a atenção"): o cartão deixou de ser branco e é NAVY, a
   cor do toast — a voz do sistema tem uma cor só. Botão branco com texto navy, "Depois" em branco translúcido e a MARCA na
   versão clara (img/logo-morada-marca-claro.svg: o mesmo desenho, o navy vira branco e o laranja fica).
   Serve para qualquer aviso persistente do sistema (versão nova, sessão expirando, trabalho em segundo plano). */
.mb-aviso { position: fixed; right: 20px; bottom: 70px; z-index: 480;   /* 70: centrado na faixa que o rodapé abre (tabela 18px acima · paginação 20px abaixo) */ display: flex; align-items: center; gap: 12px;
  max-width: min(720px, calc(100vw - 40px)); padding: 12px 12px 12px 16px; background: var(--navy); border-radius: 16px;
  box-shadow: var(--sh-lg); font-size: var(--fs-13); color: #fff; white-space: nowrap; }
.mb-aviso .mb-btn--primary, .mb .mb-aviso .mb-btn--primary { background: #fff; color: var(--navy); border-color: #fff; }
.mb-aviso .mb-btn--primary:hover, .mb .mb-aviso .mb-btn--primary:hover { background: #e6e9ef; color: var(--navy); border-color: #e6e9ef; }
.mb-aviso[hidden] { display: none; }
.mb-aviso__marca { flex: none; width: 20px; height: 15px; display: grid; place-items: center; }   /* 22 → 18 → 15 (Rafael 22/08, duas vezes: "o logo do aviso pode ser um pouco menor?" · "somente o logo menor") */
.mb-aviso__marca img { height: 15px; width: auto; display: block; }
.mb-aviso__txt { flex: 1; min-width: 0; line-height: 1.35; }
.mb-aviso__txt b { font-weight: var(--fw-semibold); }
.mb-aviso .mb-btn { min-height: 30px; padding: 0 12px; font-size: var(--fs-13); flex: none; }
.mb-aviso__depois { background: none; border: 0; cursor: default; color: rgba(255,255,255,.78); font-size: var(--fs-13);
  padding: 4px 6px; border-radius: 6px; flex: none; font-family: var(--font); }
.mb-aviso__depois:hover { background: rgba(255,255,255,.14); color: #fff; }
@media (max-width: 820px) {   /* no celular encosta nas bordas, como o toast, e o texto pode quebrar */
  .mb-aviso { left: 12px; right: 12px; bottom: 78px; max-width: none; white-space: normal; flex-wrap: wrap; }
  .mb-aviso__txt { flex-basis: calc(100% - 42px); }
}
/* 🔴 O AVISO TEM FAIXA PRÓPRIA (Rafael 22/08: "não deixa ficar em cima do final da tabela"): enquanto ele está na tela
   (`body.tem-aviso`, posto pelo JS do topbar), o rodapé fixo das telas app-shell ganha 62px de margem em cima — a
   moldura da tabela (flex: 1) encolhe e o cartão fica no vão entre a tabela e a paginação, sem cobrir nada (70px = 54 do cartão + 2×8). Tela que
   rola a página inteira (sem rodapé em flex) não precisa: o conteúdo passa por baixo. */
body.tem-aviso .pl-foot, body.tem-aviso .pg-main > .mb-foot, body.tem-aviso .pf-app .mb-foot,
body.tem-aviso .un-foot, body.tem-aviso .ue-foot, body.tem-aviso .uc-foot, body.tem-aviso .tp-foot, body.tem-aviso .td-foot,
body.tem-aviso .sr-foot, body.tem-aviso .ras-foot, body.tem-aviso .pfm-foot, body.tem-aviso .dc-foot { margin-top: 70px; }   /* 54 do cartão + 8 de respiro acima + 8 abaixo (medido: o rodapé começa 84 + 54 = 138 acima do pé) */
@media (max-width: 820px) { body.tem-aviso .pl-foot, body.tem-aviso .pg-main > .mb-foot, body.tem-aviso .pf-app .mb-foot { margin-top: 110px; } }
@keyframes mb-toast-in  { from { opacity: 0; transform: translateX(16px); } }
@keyframes mb-toast-out { to   { opacity: 0; transform: translateX(16px); } }

/* ============================================================================
   18. LOADING / SKELETON — placeholder animado enquanto o dado carrega
   ----------------------------------------------------------------------------
   Usar skeleton quando a ÁREA é conhecida (tabela, card, KPI) e o dado vem por
   AJAX; para ação de botão, usar .mb-btn.is-loading (spinner já existente).
   ---------------------------------------------------------------------------- */
.mb-skeleton { position: relative; overflow: hidden; background: var(--bg-subtle);
  border-radius: var(--r-sm); min-height: 12px; }
.mb-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  animation: mb-shimmer 1.4s infinite; }
.mb-skeleton--text   { height: 12px; }
.mb-skeleton--title  { height: 20px; width: 45%; }
.mb-skeleton--circle { border-radius: 50%; }
@keyframes mb-shimmer { to { transform: translateX(100%); } }

/* ============================================================================
   19. EXPORTAR PLANILHA — escolha de colunas (.mb-colpick)
   ----------------------------------------------------------------------------
   Componente de TABELA (Rafael 2026-07-30: "sempre tem um botão de Exportar com
   possibilidades de escolher os dados"). Toda lista do sistema exporta o que
   está FILTRADO e quem exporta escolhe as colunas.
   O markup é gerado pelo helper exportar_modal() da pessoas_lib.php — nunca
   montar à mão, senão cada tela vira uma variação.
   ⚠️ .mb-overlay é display:grid → precisa da regra [hidden] abaixo para fechar.
   ---------------------------------------------------------------------------- */
.mb-overlay[hidden] { display: none; }
.mb-colpick { max-width: 700px; max-height: 86vh; display: flex; flex-direction: column; }
.mb-colpick .mb-modal__body { overflow: auto; }
.mb-colpick__sub { margin: 0 0 10px; font-size: var(--fs-13); color: var(--text-muted); }
.mb-colpick__presets { display: flex; gap: 8px; margin-bottom: 10px; }
.mb-colpick__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 18px; }
.mb-colpick__grid .mb-checkrow { border-bottom: none; padding: 7px 4px; }
@media (max-width: 640px) { .mb-colpick__grid { grid-template-columns: 1fr 1fr; } }

/* ============================================================================
   20. BARRA DE FILTROS — busca + painel "Filtros" + chips (.mb-filtros)
   ----------------------------------------------------------------------------
   Rafael, 2026-07-30, vendo o Cadastro de pessoas: "Não tem como dar uma
   organizada mais profissional nisso? Existe algum filtro que possamos usar
   para reduzir os filtros? tipo um filtro que desce… ou que abre opções".
   O problema não era o componente de cada filtro (o multi já é bom) — era o
   NÚMERO deles à mostra: 6 campos e 3 botões ocupando duas fileiras, todos com
   o mesmo peso, em toda abertura da tela, para escolhas que se fazem de vez em
   quando.

   O desenho, em 3 partes:
   1. **A busca fica sempre visível** — é o filtro de todo dia, e é onde a mão vai.
   2. **Os demais entram num PAINEL** que desce do botão "Filtros", com um contador
      de quantos estão ativos. O painel é `position:absolute` (desce POR CIMA, não
      empurra a tabela) e tem `overflow:visible` — os multiselects de dentro abrem
      para fora dele.
   3. 🔴 **CHIPS do que está filtrando**, abaixo da linha. É a parte que não pode
      faltar: com os filtros escondidos, sem os chips a lista mentiria em silêncio
      (você veria 442 de 1.117 sem nada na tela dizendo por quê). Cada chip fecha
      no ✕ e há "Limpar tudo". Mesma ideia do chip "Filtrando ✕" do drill-down.
   ⚠️ Os chips são renderizados no SERVIDOR, a partir dos filtros que valeram na
   query — não do que está marcado na tela. Assim eles nunca divergem do resultado.
   ---------------------------------------------------------------------------- */
.mb-filtros { position: relative; margin: 0 0 14px; }
.mb-filtros__linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mb-filtros__busca { position: relative; flex: 1 1 380px; max-width: 560px; }
.mb-filtros__busca .mb-input { width: 100%; padding-left: 38px; }
/* 🐛 18/08: `> svg` — só a LUPA (filho direto). Sem o `>`, o ✕ dos tokens e o ícone das sugestões (que agora moram
   DENTRO do campo) também viravam absolutos em left:13px e apareciam sobrepostos à lupa (print do Rafael). */
.mb-filtros__busca > svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-subtle); pointer-events: none; }
/* gatilho: mesma altura dos campos (42) — nunca misturar alturas na mesma fileira */
.mb-filtros__trig { min-height: 42px; gap: 8px; }
/* 🔴 22/08 (D/E): UM SÓ TIPO DE CONTROLE SECUNDÁRIO NA BARRA — "Mais filtros" e Exportar viram a pílula BRANCA ELEVADA
   dos chips (Situação/Função) e do Levi. Eram cinza 10% (3º tratamento na mesma barra). Fica: branco = controle ·
   tint navy = ação secundária · navy cheio = ação principal. */
.mb-filtros__trig, .mb-btn--ghost[data-mb-exportar] { --_bg: var(--surface); --_bg-hover: var(--surface-2); box-shadow: var(--seg-ativo-sh); }
.mb-filtros__trig svg { width: 15px; height: 15px; flex: none; }
.mb-filtros__trig .mb-filtros__caret { transition: transform .15s ease; }
.mb-filtros__trig[aria-expanded="true"] .mb-filtros__caret { transform: rotate(180deg); }

/* ── SCOPE BAR + TOKENS (2026-08-18) — "O que a Apple sugeriria para os filtros?" ──────────────
   `.mb-filtros--scope`: os filtros do dia a dia ficam À VISTA na linha da busca, como CHIPS que
   mostram o valor atual e abrem o menu (`.mb-filtros__escopos` com os `.mb-multi`); o que está
   filtrando vira TOKEN dentro do campo de busca (`.mb-filtros__campo` = os `.mb-chipf` + o input);
   digitar oferece "Rótulo: opção" (`.mb-filtros__sug`, js/mb-filtros.js). O painel continua para o
   raro ("Mais filtros"). O botão Buscar some da vista (Enter busca; ele fica só para o submit
   implícito do form). ⚠️ Chip do escopo = 34px dentro de uma linha de 42: é o único elemento mais
   baixo da linha DE PROPÓSITO — é filtro/estado, não campo (a régua da Apple: scope bar é menor que
   o campo de busca). Não "alinhar" para 42. */
.mb-filtros--scope .mb-filtros__busca { max-width: 640px; }
.mb-filtros__campo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 42px;
  padding: 4px 8px 4px 38px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-pill); transition: border-color .12s, box-shadow .12s; cursor: text; }
.mb-filtros__campo:focus-within { border-color: var(--brand-blue); box-shadow: var(--ring) rgba(10, 29, 58,.18); }
.mb-filtros__campo .mb-chipf { flex: none; max-width: 260px; }
.mb-filtros__toks { display: contents; }   /* tokens montados por JS (filtro do navegador) dentro do campo */
.mb-filtros__toks[hidden] { display: none; }
.mb-filtros__campo .mb-filtros__input { flex: 1 1 140px; min-width: 120px; height: 32px; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: var(--fs-14); color: var(--text); padding: 0 4px; }
.mb-filtros__campo .mb-filtros__input::placeholder { color: var(--text-subtle); }
.mb-filtros__sug { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 70; padding: 6px; max-height: 320px; overflow: auto; }
.mb-filtros__sug[hidden] { display: none; }
.mb-filtros__sugit { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 8px 10px; border-radius: 8px; font: inherit; font-size: var(--fs-13); color: var(--text); cursor: var(--cursor-acao); }
.mb-filtros__sugit svg { width: 15px; height: 15px; color: var(--text-subtle); flex: none; }
.mb-filtros__sugit:hover, .mb-filtros__sugit.is-active { background: var(--fill); }
.mb-filtros__sugrot { flex: none; font-size: var(--fs-11); font-weight: var(--fw-semibold); color: var(--brand-blue-700); background: var(--brand-blue-50); padding: 2px 7px; border-radius: 6px; }
.mb-filtros__escopos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mb-filtros__escopos .mb-field { margin: 0; display: contents; }
.mb-filtros__escopos .mb-label { display: none; }   /* o rótulo vai DENTRO do chip */
.mb-filtros--scope .mb-filtros__escopos .mb-selecttrig[data-rotulo]::before { content: attr(data-rotulo) ':'; color: var(--text-muted); font-weight: var(--fw-medium); margin-right: 5px; }
.mb-filtros--scope .mb-filtros__escopos .mb-selecttrig.is-on::before { color: inherit; }
.mb-filtros--scope .mb-filtros__escopos .mb-selecttrig { width: auto; min-width: 0; height: 34px; min-height: 34px; padding: 0 30px 0 12px; border: 0; border-radius: 999px;
  /* 🔴 PÍLULA BRANCA ELEVADA (Rafael 2026-08-22, print da toolbar do Finder: "olha como são os
     filtros, sombreamento"): o chip deixa de ser cinza translúcido (`--fill`) e vira a pílula branca
     com a elevação do segmented (`--seg-ativo-sh`) — a mesma do stepper de semana, que já era assim.
     Hover = `--surface-2` (o cinza de hover das listas do sino), e o `is-on` segue tinted azul. */
  background-color: var(--surface); color: var(--text); font-size: var(--fs-13); font-weight: var(--fw-medium); box-shadow: var(--seg-ativo-sh); background-position: right 9px center; background-size: 16px; }
.mb-filtros--scope .mb-filtros__escopos .mb-selecttrig:hover { background-color: var(--surface-2); }
.mb-filtros--scope .mb-filtros__escopos .mb-selecttrig.is-on { background-color: var(--brand-blue-50); color: var(--brand-blue-700); }
.mb-filtros--scope .mb-filtros__escopos .mb-selecttrig .mb-selecttrig__lab { max-width: 260px; }   /* 260 = "Gislaine Milene da Silva Viana · Diurno" (RAS) cabe sem reticências */
.mb-filtros--scope .mb-filtros__escopos .mb-multi__trig { width: auto; height: 34px; min-height: 34px; padding: 0 30px 0 12px; border: 0; border-radius: 999px;
  background: var(--surface); color: var(--text); font-size: var(--fs-13); font-weight: var(--fw-medium); gap: 5px; box-shadow: var(--seg-ativo-sh);   /* 22/08: pílula branca elevada (ver .mb-selecttrig acima) */
  background-position: right 9px center; background-size: 16px; }
.mb-filtros--scope .mb-filtros__escopos .mb-multi__trig:hover { background-color: var(--surface-2); }
.mb-filtros--scope .mb-filtros__escopos .mb-multi__trig.is-on { background-color: var(--brand-blue-50); color: var(--brand-blue-700); }
.mb-filtros__escopos .mb-multi__trig .mb-multi__rot { color: var(--text-muted); font-weight: var(--fw-medium); }
.mb-filtros__escopos .mb-multi__trig .mb-multi__rot::after { content: ':'; }
.mb-filtros__escopos .mb-multi__trig.is-on .mb-multi__rot { color: inherit; }
.mb-filtros__escopos .mb-multi__trig > span { max-width: 180px; }
.mb-filtros__escopos .mb-multi__menu { left: 0; right: auto; }
.mb-filtros--scope .mb-filtros__buscar { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* Enter busca; o botão só sustenta o submit implícito */
/* stepper (item 57) DENTRO do escopo — ex.: a semana da RAS: o datefield volta a ser o campo branco de 28px do stepper,
   não o chip de 34; a regra do datefield-chip (0,3,0) venceria a do .mb-stepper (0,2,0) sem esta exceção. Scope bar
   pode não ter campo de busca (RAS): o js/mb-filtros.js só veste o escopo nesse caso. */
.mb-filtros--scope .mb-filtros__escopos .mb-stepper .mb-datefield { height: 28px; min-height: 28px; padding: 0 10px; border-radius: var(--r-pill); background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); font-weight: var(--fw-semibold); }
.mb-filtros--scope .mb-filtros__escopos .mb-stepper .mb-datefield::before { display: none; }
/* datefield (mês/semana/data) como chip do escopo: mesma cápsula de 34px, rótulo pelo data-rotulo */
.mb-filtros--scope .mb-filtros__escopos .mb-datefield { height: 34px; min-height: 34px; min-width: 0; width: auto; padding: 0 12px; border: 0; border-radius: 999px;
  background: var(--surface); color: var(--text); font-size: var(--fs-13); font-weight: var(--fw-medium); box-shadow: var(--seg-ativo-sh); gap: 6px; }   /* 22/08: pílula branca elevada */
.mb-filtros--scope .mb-filtros__escopos .mb-datefield:hover { background: var(--surface-2); }
.mb-filtros--scope .mb-filtros__escopos .mb-datefield[data-rotulo]::before { content: attr(data-rotulo) ":"; color: var(--text-muted); font-weight: var(--fw-medium); }
.mb-filtros--scope .mb-filtros__escopos .mb-datefield svg { width: 14px; height: 14px; }
@media (max-width: 820px) { .mb-filtros__escopos .mb-multi__trig > span { max-width: 120px; } }
.mb-filtros__badge { display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--brand-blue); color: #fff; font-size: var(--fs-11);
  font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
/* "limpar" ao lado do Buscar — aparece só quando há termo (link que não faz nada
   ensina a ignorar o controle). Nasceu no motor das listas de cadastro, 2026-08-05. */
.mb .mb-filtros__limpar { font-size: var(--fs-12); color: var(--link); text-decoration: none; flex: none; }
.mb .mb-filtros__limpar:hover { text-decoration: underline; }
.mb-filtros__acts { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* painel que desce (não empurra a tabela) */
.mb-filtros__painel { position: absolute; z-index: 70; top: calc(100% + 8px); left: 0;
  width: min(920px, 100%); padding: 18px 20px 16px; background: var(--surface);
  border-radius: var(--r-lg); box-shadow: 0 0 0 1px rgba(16,40,69,.10),
  0 2px 6px rgba(16,40,69,.06), 0 18px 44px -8px rgba(16,40,69,.24); }
.mb-filtros__painel[hidden] { display: none; }
.mb-filtros__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 18px; }
@media (max-width: 900px) { .mb-filtros__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mb-filtros__grid .mb-field { margin: 0; min-width: 0; }
.mb-filtros__foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.mb-filtros__foot .mb-filtros__limpar { margin-right: auto; }

/* 🔴 CHIPS DENTRO DO PAINEL (2026-07-30) — passaram por três lugares até aqui: faixa própria
   embaixo da linha (custava uma linha de altura em toda abertura) → na linha da busca (ainda
   competia com a busca e as ações) → **no topo do painel de Filtros**, junto dos campos que os
   produziram, que é onde se vai mexer neles.
   ⚠️ Com o painel FECHADO, quem impede a lista de mentir em silêncio é o CONTADOR do botão
   "Filtros". Tirou o contador? Os chips voltam para fora. Um dos dois tem de estar sempre visível.
   Aqui eles PODEM quebrar linha (há espaço) — ao contrário da versão anterior, que era `nowrap`. */
.mb-filtros__chips { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.mb-filtros__chips:empty { display: none; }
/* 🐛🔴 O `[hidden]` PERDE PARA O DISPLAY DE CLASSE — e por isso mora AQUI, no componente
   (Rafael 2026-08-15: "por que o círculo ficou sem nada? tem outro que não aparece a
   bolinha — temos como padronizar?"). O badge nasce no HTML e quem o liga é o JS; sem esta
   regra ele vira uma BOLINHA AZUL VAZIA e a faixa de chips ocupa espaço sem chip nenhum.
   A mesma pegadinha já tinha sido resolvida À MÃO em 3 telas (pessoas.php, aba de vagas e
   aba Movimentações) — a 4ª (aba Score) esqueceu, e o defeito apareceu. Guarda de
   componente é do COMPONENTE: tela nova nasce certa sem ninguém lembrar. */
.mb-filtros__badge[hidden], .mb-filtros__chips[hidden], .mb-filtros__painel[hidden] { display: none; }

/* 🔴 E A MESMA GUARDA PARA OS OUTROS COMPONENTES QUE AS TELAS LIGAM/DESLIGAM POR `hidden`.
   Varredura de 2026-08-15 (script em _dev): `.mb-field` e `.mb-banner` são `display:flex` de
   CLASSE, então o atributo perdia — e havia 4 telas com campo/banner que NÃO sumiam
   (cad_categorias · cad_linhas · cad_linhas_contratos · cad_entrevista_desligamento), cada
   uma esperando a regra local que ninguém escreveu. Não é `[hidden]` global com !important
   de propósito: código que mostra elemento mexendo no `style.display` sem TIRAR o atributo
   passaria a ficar invisível, e isso é regressão silenciosa. */
.mb-field[hidden], .mb-banner[hidden] { display: none; }
/* 🔴 ETIQUETA E PÍLULA na mesma guarda (2026-08-16). A RAS mostrava "Faltam avaliações" com
   15 de 15 avaliados: o JS fazia `falta.hidden = true` e o `display:inline-block` da
   `.mb-tag` vencia — a reunião parecia incompleta depois de preenchida. É a 3ª vez que esta
   pegadinha aparece num componente do DS; cada tela que liga/desliga um selo por `hidden`
   dependia de uma regra local que ninguém escreve. */
.mb-tag[hidden], .mb-pill[hidden] { display: none; }
.mb-filtros__rot { font-size: var(--fs-12); color: var(--text-subtle); font-weight: var(--fw-semibold); }
.mb-chipf { display: inline-flex; align-items: center; gap: 7px; max-width: 320px;
  padding: 4px 5px 4px 11px; border-radius: var(--r-pill); background: var(--brand-blue-50);
  color: var(--brand-blue-700, #0e4a73); font-size: var(--fs-12); font-weight: var(--fw-semibold);
  white-space: nowrap; }
.mb-chipf__v { overflow: hidden; text-overflow: ellipsis; }
/* Serve como <a> (chip do servidor, com URL) e como <button> (chip montado por JS, quando o
   filtro é do navegador — ex.: as vagas em aberto, que vêm da SULTS e não têm GET para
   filtrar). Sem o reset, o <button> herda borda e fundo do navegador e o chip vira um
   círculo cinza vazio com o ✕ escondido dentro. */
.mb .mb-chipf__x { display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex: none; border-radius: 50%; color: inherit; text-decoration: none;
  background: none; border: 0; padding: 0; font: inherit; cursor: var(--cursor-acao);
  transition: background .12s; }
.mb .mb-chipf__x:hover { background: rgba(21,102,157,.18); text-decoration: none; }
.mb-chipf__x svg { width: 11px; height: 11px; }
.mb .mb-filtros__limpar { font-size: var(--fs-12); font-weight: var(--fw-semibold);
  color: var(--text-muted); text-decoration: none; }
.mb .mb-filtros__limpar:hover { color: var(--danger-700); text-decoration: underline; }

/* Botão de ÍCONE (sem rótulo) — variante do mb-btn. Rafael, 2026-07-30: "Exportar poderia ser
   um ícone com uma imagem apenas… mais clean"; numa barra de ações quem carrega nome é a ação
   PRIMÁRIA, as secundárias viram ícone. ⚠️ SEMPRE com `data-mb-tip` + `aria-label`: ícone sem
   rótulo só é clean quando diz o que é ao passar o mouse — e para o leitor de tela, sempre. */
.mb-btn--ico { width: 42px; min-width: 42px; padding: 0; gap: 0; }
.mb-btn--ico svg { flex: none; }

/* 🔴 BALÃO DA BARRA DE FILTROS ABRE PARA CIMA (Rafael, 2026-07-30: "está ficando em cima da barra
   da tabela, ruim a leitura"). Estes botões carregam `mb-tip--down` porque no CABEÇALHO das outras
   telas o balão para cima bateria na topbar (sobram 22px). Aqui é o contrário: logo ABAIXO deles
   está o thead NAVY da tabela — balão navy sobre barra navy não se lê —, e acima sobra a faixa
   branca do cabeçalho. Então a direção é virada AQUI, pelo lugar, sem mexer no padrão do botão.
   ⚠️ Seletor com as duas classes (0,3,1) para vencer `.mb-tip--end.mb-tip--down::after` (0,2,1)
   por especificidade, e não por ordem no arquivo. */
.mb-filtros__acts .mb-tip--end.mb-tip--down::after { top: auto; bottom: calc(100% + 6px); transform: translateY(3px); }
.mb-filtros__acts .mb-tip--end.mb-tip--down:hover::after,
.mb-filtros__acts .mb-tip--end.mb-tip--down:focus-visible::after { transform: translateY(0); }

/* ── 21. FAIXA DO PAINEL (`mb-hero`) ─────────────────────────────────────────
   Abertura de tela-PAINEL: fundo navy, título + frase à esquerda, os números à direita.
   🔴 Promovida do `pessoas_dashboard.php` (onde nasceu como `.pd-hero`) em 2026-08-05, quando
   o Rafael pediu a mesma faixa no "Meu dia" (*"fazer o navy igual ao Painel Pessoas… Meu dia
   é tipo um painel"*). Com o segundo consumidor ela deixou de ser chrome de uma tela — e a
   regra da casa é que componente não se copia, se promove.
   ⚠️ É de PAINEL, não de lista: telas de trabalho (pessoas.php e as de cadastro) abrem com
   título simples + `?`, e isso não mudou. A faixa custa ~100px de altura, que numa lista sai
   direto da área de tabela.
   ⚠️ Os números **não são links por padrão** — num painel o drill-down é o card logo abaixo.
   Quando um número não tiver card correspondente, `<a class="mb-hero__stat">` dá o realce
   discreto (é o caso de "vagas em aberto", que só existe na SULTS). */
/* 🔴🔴 v8 (2026-08-17, fase 2 do padrão Apple): A FAIXA NAVY MORREU — o MESMO markup (`.mb-hero` >
   título/frase + `.mb-hero__mini` > `.mb-hero__stat`) agora rende um CABEÇALHO CLARO (large title
   30/700 + frase em cinza) com os NÚMEROS EM TILES brancos (raio 14, sombra quase invisível). Nada
   mudou nas 31 telas: mudou o componente. As regras funcionais continuam (todo número clicável,
   divisória antes do Total, `is-on` = escolha do usuário, `nowrap`). Backup do navy em
   _dev/backup/fase1_v8_20260817/morada-ca.css. ⚠️ Cor forçada nos filhos: `.mb a{color:var(--link)}`. */
.mb-hero { background: transparent; color: var(--text); border-radius: 0; box-shadow: none; padding: 6px 0 4px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.mb-hero__hi { font-size: var(--fs-30); font-weight: var(--fw-bold); margin: 0 0 4px; letter-spacing: -.022em; line-height: 1.15; color: var(--text); }
.mb-hero__sub { font-size: var(--fs-14); color: var(--text-muted); margin: 0; }
.mb-hero__sub b { color: var(--text); }
.mb-hero__mini { display: flex; align-items: stretch; gap: 8px; flex-wrap: nowrap; flex: none; }   /* stretch: todo tile com a MESMA altura */
.mb-hero > div:first-child { min-width: 0; }
.mb-hero__num { font-size: 22px; font-weight: var(--fw-bold); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }   /* 22/08 (C): 24 → 22; o principal fica em 30 */
.mb-hero__lbl { font-size: var(--fs-12); color: var(--text-muted); margin-top: 5px; display: block; white-space: nowrap; }
/* separador entre grupos de números que NÃO somam entre si */
.mb-hero__sep { width: 1px; align-self: stretch; min-height: 44px; background: var(--border); margin: 0 4px; }
/* 🔴 UM MARCADOR SÓ — `<a>`, `<button>` e `<span>` usam a MESMA regra (regra de 2026-08-05).
   Tile: branco, raio 14, sombra --sh-sm; hover = --sh-md; `is-on` = anel NAVY (a escolha do usuário —
   e nada abre marcado). O `<span>` (número sem destino) é tile igual, só sem hover. */
/* ⚠️ display EXPLÍCITO (Rafael 2026-08-17, print do Meu dia: "altura de retângulos diferentes"): a faixa
   mistura <a>, <button> e <span> — sem isto o <a> (inline) e o <button> (inline-block) mediam alturas
   diferentes. Flex-coluna centrada + o `stretch` do pai = tiles iguais em qualquer tela. */
.mb-hero__stat { display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 8px 12px; border-radius: 14px; min-width: 84px; min-height: 60px; box-sizing: border-box;   /* 22/08 (C): mais justos (10/14/92/66 → 8/12/84/60) — é o que devolve o título a uma linha */
  background: var(--surface); box-shadow: var(--sh-sm); line-height: 1; margin: 0; }
.mb-hero__stat[hidden] { display: none; }   /* `[hidden]` perde para display de classe */
.mb .mb-hero__stat { color: var(--text); }
.mb a.mb-hero__stat, .mb button.mb-hero__stat { text-decoration: none; border: 0;
  font-family: var(--font); cursor: var(--cursor-acao); transition: box-shadow .12s, transform .12s; }
.mb a.mb-hero__stat:hover, .mb button.mb-hero__stat:hover { box-shadow: var(--sh-md); text-decoration: none; }
/* 🔴 22/08 (Rafael: "faz 3 + 4", escolhido no mockup de 4 jeitos): o tile que está FILTRANDO a lista
   (`is-on`) fica NAVY CHEIO com texto branco — era um anel navy. É a mesma gramática da pílula do menu:
   navy = "você está aqui". ❌ NÃO usar navy em tile por "importância" — cor fica para estado. */
.mb .mb-hero__stat.is-on { background: var(--navy); color: #fff; box-shadow: var(--sh-sm); }
.mb .mb-hero__stat.is-on .mb-hero__num { color: #fff; }
.mb .mb-hero__stat.is-on .mb-hero__lbl { color: rgba(255,255,255,.72); }
/* ❌ TILE PRINCIPAL POR ESCALA (número em 30px) — existiu de 22/08 à tarde até a noite e SAIU: Rafael, vendo no ar,
   "mudar o tamanho eu não gostei". Não recriar `--principal`. */
/* 🔴 TILE EM ZERO SOME (22/08, Rafael: "o que está zerado, escondemos" — depois de eu defender manter os zeros
   esmaecidos; ele decidiu esconder tudo, parcela ou pendência). A classe `is-zero` vem do js/mb-hero.js, que lê o
   número e também recolhe a divisória que ficaria solta quando um grupo inteiro zera; o markup das 28 telas não
   muda. ❌ Revoga a regra de 13/08 ("zerado fica visível com link — o zero é notícia"). */
.mb-hero__stat.is-zero { display: none; }
.mb-hero__sep.is-vazia { display: none; }
/* ══ AÇÃO DO CARD — peça 77 (23/08, Rafael: "precisamos padronizar isso dentro dos cards… tem vários formatos") ══
   A ação secundária que mora DENTRO de um card (Ver todos · Ver todas · Mostrar todos (39) · Mostrar menos): texto navy
   semibold 13px, sem seta, sem moldura — o "Mostrar tudo" do macOS. No cabeçalho fica à direita, depois da contagem
   (`.mb-card__acao`); no rodapé de uma lista com teto vira a linha inteira (`--pe`). Botão fantasma e link com seta
   SAÍRAM desses lugares. A ação PRIMÁRIA do card continua sendo botão (Novo…). */
.mb-card__acao { display: inline-block; font-family: var(--font); font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--link);
  text-decoration: none; white-space: nowrap; background: none; border: 0; padding: 0; margin: 0; cursor: default; }
.mb .mb-card__acao:hover { color: var(--link); text-decoration: underline; }
.mb-card__acao--pe { display: block; width: 100%; text-align: left; padding: 12px 20px 14px; }
/* 🔴 25/08 — `.pg-spacer` EMPURRA A AÇÃO PARA A DIREITA no cabeçalho do card (Rafael: "ver
   todos/todas tem que estar alinhado na direita"). A classe era usada em 4 pontos do Meu dia
   desde julho e NUNCA existiu no DS: só havia uma cópia local presa ao `.cfg-cardhead` das
   Configurações. Sem a regra, o link nascia colado no título em toda tela que a usava.
   ⚠️ É utilitária de LAYOUT (o `margin-left:auto` de um filho de flex), não um componente. */
.pg-spacer { margin-left: auto; }

/* NÍVEL 2 DA TELA (23/08): as pílulas das frentes, coladas às abas da linha de cima e antes do título — primeira coisa dentro
   do <main> (`.mb-seg.mb-seg--sm.mb-frentes`). Conformidade (rh_painel) e Admissões e rescisões usam esta classe. */
.mb-frentes { margin: -21px 0 12px 2px; align-self: flex-start; }
.pg-main:not([style*="flex"]) > .mb-frentes { display: inline-flex; }   /* em <main> que não é coluna flex, não estica */

/* exceção (22/08, Conformidade — Rafael: "era os cards de KPIs de cada seção"): `data-zero="fica"` mantém o tile em zero,
   esmaecido — é um painel de frentes fixas, e o zero ali é notícia ("nenhum exame vencendo"). */
.mb-hero__stat.is-zero-fica .mb-hero__num, .mb-hero__stat.is-zero-fica .mb-hero__lbl { opacity: .38; }
/* ❌ VARIANTE ENXUTA (`.mb-hero--enxuta`) REMOVIDA em 2026-08-13, no mesmo dia em que nasceu.
   Ela existia para a tela SEM números, e o critério deixou de ter caso: **toda tela vai ter
   números** (Rafael: "todos terão números… de alguma forma ou outra, então podemos padronizar a
   altura"). Uma faixa só, uma altura só — que é o que faz as telas lerem como a mesma peça.
   ⚠️ Se algum dia aparecer tela sem número, ela NÃO ganha variante: ou se acha o número que
   ela tem para mostrar, ou a faixa fica com o lado direito vazio mesmo. Duas alturas foi o que
   levou o contador do Meu dia a ficar diferente dos demais e teve de ser desfeito. */

@media (max-width: 820px) { .mb-hero { flex-direction: column; align-items: flex-start; } }
/* ⚠️ ENTRE 821 E 1180px A FILA PODE QUEBRAR (2026-08-15, achado ao pôr o 8º número no
   Admissões e rescisões). Sem isto ela é `nowrap` e, quando não cabe, o último número
   VAZA PARA FORA do card e sai cortado na borda — em 1024 a fila media 940 num card de
   924. Informação cortada é pior que faixa com duas linhas, e o `wrap` só age quando
   falta espaço: faixa que cabe continua exatamente como estava (conferido no Painel de
   pessoas, que segue em 1 linha nos mesmos 1024). A regra "sempre em 1 linha" (Rafael
   2026-08-05) continua valendo onde ela é possível — em 1280 nada mudou. */
@media (min-width: 821px) and (max-width: 1180px) {
  /* ⚠️ o `flex: 0 1 auto` é o que FAZ o wrap acontecer: com o `flex: none` do componente a
     fila mede max-content e nunca quebra — ela só vaza. */
  .mb-hero__mini { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
  .mb-hero__sep  { min-height: 30px; }
}

/* ═══ 22. MOBILE — fundação (2026-08-10) ═════════════════════════════════════
   Rafael: "precisamos que o sistema seja Mobile". Tudo aqui vive atrás do media
   de 820px — o desktop não muda um pixel. Três decisões desta camada:
   1) APP-SHELL DESTRAVADO: o shell fixo (body 100vh + rolagem interna) colapsava
      o miolo no celular (a lista chegou a mostrar UMA linha de tabela). No mobile
      a página volta a rolar normal. ⚠️ Os !important são NECESSÁRIOS e são a
      exceção da casa: o shell é declarado no <style> LOCAL de cada tela (~30
      arquivos), que carrega DEPOIS deste css — sem !important seria editar tela
      por tela para sempre. Componente vence 50 telas de uma vez; é essa a régua.
   2) ABAS deslizam na horizontal (mb-subnav — vale p/ agenda, cadastros, tudo).
   3) FAIXA NAVY: a regra "números sempre em 1 linha" (2026-08-05) é de DESKTOP —
      em 375px ela espremia o texto; aqui os números quebram em fileiras. */
@media (max-width: 820px) {
  body.mb { height: auto !important; min-height: 100vh; overflow-y: auto !important; }
  .pg { height: auto !important; }
  .pg-main { height: auto !important; overflow: visible !important; padding: 16px 14px 40px !important; }

  .mb-subnav { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .mb-subnav::-webkit-scrollbar { display: none; }
  .mb-subnav__tab { flex: none; white-space: nowrap; }

  .mb-hero { padding: 16px 16px 14px; gap: 12px; }
  .mb-hero__hi { font-size: var(--fs-20, 20px); }
  .mb-hero__mini { flex-wrap: wrap; row-gap: 2px; }
  .mb-hero__sep { display: none; }          /* separador vertical não sobrevive à quebra */
  .mb-hero__num { font-size: 22px; }
  .mb-hero__stat { padding: 6px 10px; }
}

/* ── 22. RESUMO DE MÓDULOS DO PERFIL (`mb-modchip`) ──────────────────────────
   Etiqueta que resume quanto de um MÓDULO um perfil de acesso alcança:
   ponto de cobertura (verde = módulo inteiro · âmbar = parte) + nome do
   módulo + detalhe ("3 de 13 · até Editar").
   Consumida pelos cartões de perfil (configuracoes.php, aba Perfis) e pelo
   resumo do perfil na ficha do usuário (usuario_form.php).
   Promovida do chrome local `.mod-chip` do configuracoes em 2026-08-11 —
   apareceu na 2ª tela, virou componente (regra de ouro). Não recriar local. */
.mb-modchip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px;
  border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); font-size: var(--fs-13); font-weight: var(--fw-medium); }
.mb-modchip__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--warning); }
.mb-modchip--full .mb-modchip__dot { background: var(--positive); }
.mb-modchip__lvl { color: var(--text-subtle); font-size: var(--fs-12); }

/* ── 23. MULTISELECT (`mb-multi`) ────────────────────────────────────────────
   Filtro de várias escolhas: gatilho com cara de `.mb-select` + menu de
   `.mb-checkrow` + botão Aplicar (é ele que submete o formulário).
   Promovido do chrome local do `pessoas.php` em 2026-08-16, quando a RAS
   virou o 2º consumidor (o filtro de supervisores, que passou a aceitar mais
   de um). O comportamento vive em `js/mb-multi.js` — `initMulti(root, name,
   allId, applyId)`. Não recriar local.
   ⚠️ O menu é ancorado à DIREITA de propósito: estas telas são app-shell
   (`.pg-main` com overflow hidden) e um menu de 260px alinhado à esquerda
   vaza pela borda e é CORTADO. */
.mb-multi { position: relative; }
.mb-multi__trig { display: flex; align-items: center; width: 100%; text-align: left; cursor: var(--cursor-acao); }
.mb-multi__trig > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-multi__menu { position: absolute; top: calc(100% + 6px); right: 0; left: auto; z-index: 60;
  min-width: 260px; max-height: 340px; overflow: auto; padding: 0; }
.mb-multi__menu[hidden] { display: none; }   /* `[hidden]` perde para o display do .mb-menu */
.mb-multi__foot { padding: 12px; position: sticky; bottom: 0; background: var(--surface); }
.mb-multi__search { position: sticky; top: 0; z-index: 1; padding: 10px 10px 6px; background: var(--surface); }
.mb-multi__search .mb-input { width: 100%; }

/* ── Rodapé "Aplicar" do multiselect da ficha/entrevistas (.pf-ms, 2026-08-18) ─────────────────
   Rafael: "nos campos que tem que escolher tem que ter um botão Aplicar como na tela do cadastro,
   pois causa confusão... como sair da escolha". O painel do .pf-ms só fechava clicando fora.
   ⚠️ A escolha já vale ao marcar — o botão FECHA (por isso "Aplicar", não "Salvar"). O markup é
   criado pelo js/mb-ms.js (o .pf-ms ainda é chrome das telas; a promoção completa está no BACKLOG). */
/* ⚠️ O BOTÃO OCUPA A LARGURA TODA (Rafael 2026-08-18, com print: "o aplicar fica longe… ruim de usabilidade").
   O painel herda a largura do CAMPO (full-width no formulário), então um botão de 70px encostado à direita
   ficava a ~1.900px do checkbox que a pessoa acabou de marcar — o mouse atravessava a tela inteira. Em
   largura total ele nasce logo abaixo da última opção e o alvo é o painel inteiro: não existe "longe". */
/* ⚠️ SEM `position: sticky` (2026-08-18, print do Rafael: "olha o espaço depois do aplicar"): quem rola é a LISTA
   (.pf-ms__opts, max-height 220 + overflow auto), NÃO o painel — então um rodapé sticky não tinha o que acompanhar
   e se grudava no fundo da JANELA, deixando ~59px de buraco embaixo do botão. Ele é só o último bloco do painel. */
/* 🐛🔴 O DEPÓSITO DE `input hidden` ESTAVA OCUPANDO 8px (Rafael 2026-08-19: "espaçamento dos
   avisos estão desiguais"). Desde 19/08 o multiselect não mostra mais chip — o `.pf-ms__chips`
   virou só o lugar onde os `hidden` do POST moram, e cada tela declarou `display:none` nele.
   Só que o elemento também tem a classe `.pf-tags` (`display:flex; margin-top:8px`): mesmo
   peso (0,1,0), e quem vem depois no arquivo ganha. Resultado: o `.pf-ms` media **50px**
   contra 42 de todo outro controle, e o aviso de campo obrigatório saía 8px mais baixo — só
   nos campos de multiselect. Resolvido AQUI, com 2 classes (0,2,0), para valer na ficha e nas
   três entrevistas de uma vez, em vez de acertar a ordem em cada tela.
   ⚠️ `display:none` não atrapalha o POST: `input hidden` continua sendo enviado. */
.pf-ms .pf-ms__chips { display: none; }
.pf-ms__foot { padding: 8px 4px 2px; margin-top: 6px; border-top: 1px solid var(--border); background: var(--surface); }
.pf-ms__foot .mb-btn { width: 100%; min-height: 36px; }

/* ══ 23. LISTA DE BARRAS (.mb-brow) — catálogo #17 ═══════════════════════════════════════════════
   Uma linha por item: rótulo à esquerda, número à direita, barra proporcional embaixo. É como o
   sistema mostra "onde está concentrado" (motivo de saída, saídas por função, por supervisor…).
   🔴 PROMOVIDA em 2026-08-18: vivia como `.ar-brow` (Admissões e rescisões) e `.an-brow` (Análise com
   mais profundidade) — duas cópias que JÁ tinham divergido (padding 6 × 7px, e na Análise o valor
   havia perdido o negrito e os números tabulares). Quando o Rafael pediu a folga entre número e
   percentual em 17/08, foi preciso editar as duas à mão: o sintoma clássico de componente copiado.
   ⚠️ A COR da barra fica na TELA (é semântica dela: verde/vermelho de desempenho, azul de volume);
   o DS entrega a forma. */
.mb-brow { padding: 6px 0; }
.mb-brow__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mb-brow__lab { font-size: var(--fs-13); color: var(--text); }
.mb-brow__val { font-size: var(--fs-13); font-weight: var(--fw-bold); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ⚠️ a folga do `small` é o pedido de 17/08 ("separar um pouco taxa e número"): sem ela "29" e "63%" colam e leem como um número só */
.mb-brow__val small { color: var(--text-subtle); font-weight: var(--fw-regular); margin-left: 7px; }
.mb-brow__track { height: 7px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; margin-top: 5px; }
.mb-brow__fill { display: block; height: 100%; border-radius: var(--r-pill); }
/* linha CLICÁVEL (drill-down): o bloco inteiro é o alvo. ⚠️ `.mb a` pinta de azul e sublinha — daí o `a` no seletor. */
.mb .mb-brow--link, .mb a.mb-brow--link { display: block; border-radius: var(--r-sm); margin: 0 -6px; padding: 6px; color: inherit; text-decoration: none; }
.mb a.mb-brow--link:hover { background: var(--fill); text-decoration: none; }
.mb-brow--link.is-on { background: rgba(10, 29, 58,.08); }



/* ══ 🔴 SCOPE BAR: UMA ALTURA SÓ, 34px (Rafael 2026-08-18/19) ═══════════════════════════════
   Pedido 1: "todos os menus têm que ter a mesma altura… fica ruim quando vc muda isso". MEDIDO:
   a linha tinha TRÊS alturas (campo 42 · botões 40 · chips 34) e três topos — cada elemento
   herdando o padrão da SUA família. Numa barra isso não vale: quem manda é a LINHA.
   Pedido 2: "prefiro que fique mais baixo… 34", apontando as ABAS DA FICHA como referência
   (faixa 46 · barra 32 · aba 28). 34 põe o filtro na mesma pegada das abas: é barra de APOIO,
   não conteúdo — não deve pesar mais que o menu de navegação da tela.
   ⚠️ Esta regra precisa ficar DEPOIS das famílias (.mb-btn, .mb-selecttrig, campos): mesma
   especificidade, quem vence é a de baixo. ══ */
.mb-filtros--scope .mb-filtros__escopos .mb-selecttrig,
.mb-filtros--scope .mb-filtros__escopos .mb-multi__trig,
.mb-filtros--scope .mb-filtros__escopos .mb-datefield,
.mb-filtros--scope .mb-btn,
.mb-filtros--scope .mb-filtros__acts .mb-btn { height: 34px; min-height: 34px; }
/* 🔴 O CAMPO DE BUSCA FICOU DE FORA DA ALTURA FIXA (Rafael 2026-08-19, com dois tokens no
   Cadastro de colaborador). Ele estava no grupo acima e herdava `height:34px` — só que ele é o
   único ali que CRESCE: os tokens do filtro moram dentro dele e, ao passar de uma linha, o
   `flex-wrap` empurrava o input para a 2ª linha enquanto a caixa continuava com 34px. Resultado:
   o "Refinar…" aparecia FORA da cápsula branca, solto no fundo da tela.
   Aqui ele fica só com o PISO — mesma altura dos chips quando está vazio, cresce quando precisa. */
/* 19/08: o campo voltou à altura FIXA porque os tokens saíram de dentro dele (jeito Finder —
   ver busca_barra na pessoas_lib). Enquanto eles moravam aqui, ele precisava crescer; agora só
   tem texto e uma linha basta, sempre. */
.mb-filtros--scope .mb-filtros__campo { height: 34px; min-height: 34px; }
/* o campo perde o padding vertical de formulário, senão o texto encosta em cima */
.mb-filtros--scope .mb-filtros__campo,
.mb-filtros--scope .mb-btn { padding-top: 0; padding-bottom: 0; }
.mb-filtros--scope { align-items: center; }

/* ── §24 · PASSO A PASSO (stepper de etapas) ─────────────────────────────────────
   🔴 PROMOVIDO em 2026-08-20 do `entrevista_ui.php`, onde vivia como `.ev-step*` desde 30/07.
   O importador de planilha desenhou o SEU (`.ip-passos`) e ficou diferente — Rafael: "passo a
   passo diferente do padrão, ver entrevistas". Peça na 2ª tela se PROMOVE, não se copia.
   ⚠️ Os valores vieram do arquivo, não de memória (a lição da guia da entrevista, 30/07).
   Anatomia: bolinha numerada (✓ quando fecha) · trilho ligando as etapas (verde no percorrido) ·
   pílula cinza na etapa ATUAL. A cor é semântica: cinza = falta · verde = fechada · navy = aqui.
   ------------------------------------------------------------------------------ */
.mb-steps { position: relative; display: flex; align-items: stretch; gap: 16px; flex: 1;
min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }

.mb-steps::-webkit-scrollbar { display: none; }

.mb .mb-step { position: relative; display: inline-flex; align-items: center; align-self: center;
height: 34px; gap: 7px;
flex: none; padding: 0 9px; color: var(--text-muted); text-decoration: none;
font-size: var(--fs-13); font-weight: var(--fw-semibold); white-space: nowrap;
transition: color .12s; }

.mb-step__t { white-space: nowrap; }

.mb-step + .mb-step::before { content: ""; position: absolute; left: -15px; top: 50%;
width: 14px; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--border);
transition: background .2s; }

.mb-step.is-depois-ok::before { background: var(--positive); }

.mb .mb-step:hover { color: var(--text); text-decoration: none; }

.mb .mb-step.is-ok { color: var(--positive-700); }

.mb .mb-step.is-active { background: rgba(10,29,58,.07); border-radius: var(--r-md);
font-weight: var(--fw-bold); }

.mb .mb-step.is-active:not(.is-ok):not(.is-erro) { color: var(--navy); }

.mb-step.is-erro .mb-step__n { border-color: var(--danger); color: var(--danger-700); background: var(--surface); box-shadow: none; }

.mb .mb-step.is-erro { color: var(--danger-700); }

.mb-step__n { display: inline-flex; align-items: center; justify-content: center; flex: none;
width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border-strong);
font-size: var(--fs-11, 11px); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
color: var(--text-subtle); background: var(--surface);
transition: background .18s, border-color .18s, color .18s, box-shadow .18s; }

.mb-step.is-active:not(.is-ok):not(.is-erro) .mb-step__n {
border-color: var(--navy); background: var(--navy); color: #fff; }

.mb-step.is-ok .mb-step__n { border-color: var(--positive); background: var(--positive); color: #fff; }

.mb-step__n svg { width: 13px; height: 13px; display: none; }

.mb-step.is-ok .mb-step__n svg { display: block; }

.mb-step.is-ok .mb-step__n i { display: none; }

.mb-step__n i { font-style: normal; }

/* A BARRA do passo a passo — promovida junto (2026-08-20). O stepper solto no fundo da página
   lia como texto; na entrevista ele sempre teve esta faixa branca com borda embaixo, e é ela que
   o separa do conteúdo. `sticky` só age quando há ancestral rolando (na entrevista, o miolo);
   fora disso ela fica parada, sem prejuízo. A sangria de 20px é o padding padrão das telas. */
.mb-steps-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px;
margin: 14px -20px 0; padding: 0 20px; height: 48px; background: var(--surface);
border-bottom: 1px solid var(--border); transition: box-shadow .18s; }
.mb-steps-bar.is-stuck { box-shadow: 0 8px 16px -12px rgba(10,29,58,.55); }

/* ── §25 · RODAPÉ DE AÇÕES (peça 13 do catálogo) ────────────────────────────────
   🔴 PROMOVIDO em 2026-08-20. Ele existia desde 04/07 como `.pf-foot`, mas **dentro do
   pessoa_form.php** — catálogo anunciando a peça e o CSS morando numa tela. A importação de
   planilha deixou os botões soltos embaixo do card (Rafael: "os botões não deveriam estar no
   rodapé à direita?"), que é o que acontece quando a peça não está onde se procura.
   ⚠️ DUAS FORMAS, e a diferença é o SHELL da tela:
     · `.mb-foot` sozinho = barra FIXA no pé da janela (formulário que rola a página).
     · dentro de tela em app-shell (`.pg-main`/`.pf-app`), ele vira o último item do flex —
       a página não rola, então fixar seria fixar sobre nada.
   🔴 AS AÇÕES FICAM À DIREITA em qualquer combinação (`__acts { margin-left: auto }`): com ou
   sem paginador, com ou sem texto à esquerda. É a régua de 14/08.
   ⚠️ O padding de 44px alinha os botões com o CONTEÚDO do card (20 da página + 24 do card).
   ------------------------------------------------------------------------------ */
/* 🔴🔴 O RODAPÉ PERDEU A BARRA BRANCA (Rafael 2026-08-24: "vamos ter que arrumar a barra do rodapé…
   tem que ter um acabamento melhor ali" → "talvez não ter a barra branca… resolveria").
   ELE ERA O ÚNICO ELEMENTO DO CROMO COLADO NAS BORDAS. Medido na ficha (1280×720): o menu é um cartão
   que termina em y=712 (respiro `--sb-gap`, raio 14, sombra — decisão de 22/08, "tipo o Finder") e a
   barra do rodapé descia até 720, encostava na direita, com raio 0 e sem sombra. No canto inferior
   esquerdo os dois terminavam em alturas diferentes: era esse degrau que aparecia no print.
   🔴 A SAÍDA DELE É MELHOR QUE DAR CANTO À BARRA (que foi o que eu tinha feito primeiro): sem
   superfície não há canto para acertar, some uma faixa branca que não carregava informação nenhuma
   (o conteúdo já é branco, logo acima) e o olho vai direto para os botões. Os botões passam a
   flutuar sobre o fundo da página, como o menu flutua.
   ⚠️ ISTO SÓ É SEGURO PORQUE O ESPAÇO É RESERVADO: nas 3 telas com rodapé (ficha, Importar planilha,
   Entrada do cliente) ele é item de FLEX do app-shell e o miolo termina exatamente onde ele começa —
   medido rolando até o fim: nada passa por trás dos botões. 🔴 Se um dia um `.mb-foot` FIXO ficar
   sobre conteúdo que rola, a superfície tem de voltar (senão o texto passa por baixo do botão).
   ⚠️ `.mb-foot` do `enviar_email.php` é OUTRA COISA — um `<td>` de template de e-mail, em documento
   próprio (com `<head>`), que NÃO carrega este arquivo. Colisão de nome, não de estilo. */
.mb-foot { position: fixed; left: var(--sb-w); right: 0; bottom: 0; z-index: 10;
  background: transparent; }
/* 🔴 O padding lateral é 20px — a régua da COLUNA de conteúdo do sistema (`22px 20px`), e é o que faz
   os botões fecharem na mesma vertical dos cards e do cabeçalho (medido na ficha: card 100→1260 e o
   Salvar terminando em 1260). Eram 44px, do tempo em que ele era barra de ponta a ponta: ali o número
   era respiro INTERNO da faixa; sem faixa, o que manda é o alinhamento com o conteúdo. */
.mb-foot__inner { max-width: none; display: flex; align-items: center; gap: 12px;
  padding: 13px 20px; position: relative; }
/* 🔴 24/08 (Rafael): ***"o que acha de termos uma linha bem fina em cima dos botões para ter uma certa
   separação do conteúdo?"*** — é a consequência de tirar a barra branca hoje cedo: sem superfície não
   há sombra separando, e os botões ficavam colados no último bloco de texto.
   ⚠️ É `::before`, não `border-top`: a borda pintaria de ponta a ponta do rodapé (80→1280 na ficha) e
   passaria das bordas dos cards. Com `left/right: 20px` (o padding do inner) o filete começa e termina
   na MESMA vertical dos cards e do cabeçalho — medido: 100→1260 nos dois. Vale igual no `.pg-main`,
   onde a sangria de -20 e o padding de 20 se cancelam. */
.mb-foot__inner::before { content: ''; position: absolute; left: 20px; right: 20px; top: 0;
  height: 1px; background: var(--border); }
.mb-foot__acts { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: none; }
/* ⚠️ A SANGRIA (`margin: 0 -20px`) é SÓ de quem está DENTRO da coluna com padding do
   `.pg-main` — ali a barra precisa ir de ponta a ponta. No `.pf-app` (a ficha) o rodapé já é
   irmão do miolo e ocupa a largura inteira: dar a margem a ele criaria 40px de rolagem
   horizontal. Medido em 2026-08-20 (ficha: 64→1728 numa janela de 1728). */
.pg-main > .mb-foot { position: static; flex: 0 0 auto; left: auto; right: auto; margin: 0 -20px; }
.pf-app .mb-foot { position: static; flex: 0 0 auto; left: auto; right: auto; }