/* ============================================================================ 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. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* ---------------------------------------------------------------------------- 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) */ --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, #0071e3 — 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. */ --brand-blue: #0071e3; /* ação · link · foco (systemBlue) */ --brand-blue-700: #0058b8; /* hover do azul */ --brand-blue-50: #e8f1fd; /* tint do azul (fundo tinted ~13%) */ --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 #e5453f (#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(0,0,0,.10); /* macOS 27 · Fills 1 Primary */ /* o cinza translúcido da Apple (botão secundário, segmented, busca) */ --fill-hover: rgba(0,0,0,.15); /* proporcional ao Primary (o kit não tem estado de hover) */ /* --- 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. */ --success: var(--sys-green); /* estado OK · toggle ligado */ --success-700: #1f9a3f; /* texto verde sobre tint claro */ --success-50: rgba(52,199,89,.15); /* tint verde (~15%) */ /* ⟳ 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: #e5453f; /* impedimento · destrutivo */ --danger-700: #bf3a34; /* hover / texto vermelho sobre tint */ --danger-50: rgba(229,69,63,.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. */ --positive: var(--sys-green); /* valor positivo / pill "recebido|pago" */ --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%) */ --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: var(--warning-bg); --pill-open-fg: var(--warning); /* em aberto */ --pill-partial-bg: var(--brand-blue-50); --pill-partial-fg: var(--brand-blue); /* parcial */ --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 QUANTO DE COR AQUI É O QUANTO DE VIDRO SE VÊ — provado na tela em 18/08: com o fundo forte (azul/laranja/verde) o material aparece nítido; com o wash lavado ele some, por mais desfoque que se ponha. Este é o meio-termo: cor perceptível atrás do cromo, sem competir com a leitura (os cards e tabelas são brancos por cima e cobrem quase tudo). ⚠️ Para MAIS vidro: escurecer/saturar estes 4 pontos. Para MENOS: aproximá-los do branco. */ --bg-wash: linear-gradient(135deg, #a9c4ea 0%, #cfdcef 32%, #f2d5c2 66%, #c9e4d6 100%); --bg-subtle: #efeff2; /* faixa/zebra */ --surface: #ffffff; /* cards, modais, campos */ --surface-2: #f7f7f9; /* cabeçalho de tabela, header de filtro */ --border: rgba(0,0,0,.10); /* macOS 27 · Separators (era #e8e8ed = preto a ~9% sobre branco) */ /* borda padrão */ --border-strong: #d2d2d7; /* borda de campo/input */ --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. */ /* 🔴🔴 VIDRO: UM DESFOQUE, OPACIDADE POR PAPEL (Rafael 2026-08-18: "a tela do buscar está com um efeito de glass diferente do menu"). MEDIDO: havia CINCO superfícies com TRÊS receitas — .72/blur30 na sidebar e na barra · .80/blur28 na paleta · .94/blur30 no painel · .90/blur28 no menu de conta. Foi o preço de eu ir aplicando valor local a cada pedido. A régua: o DESFOQUE é sempre o mesmo (é ele que faz o material); o que muda é QUANTO o fundo aparece, e isso depende do que está atrás: --glass-cromo (.72) → sidebar e title bar: atrás delas está o FUNDO da página --glass (.80) → o que flutua sobre CONTEÚDO: paleta, menu de conta, calendário, drawer ⚠️ o painel do 2º nível fica em .94 e a razão está no mb-sidebar.css: o backdrop-filter dele é cancelado pela sidebar (ancestral com filtro), então sem opacidade alta o texto de trás vaza. */ --glass: rgba(255,255,255,.80); /* ⚠️ .52 e não .72: a conta é implacável — 72%% de branco sobre o wash devolve rgb(245,249,253), dez pontos do branco puro. Vidro que não deixa o fundo passar não é vidro, é branco. */ --glass-cromo: rgba(255,255,255,.52); --glass-blur: blur(30px) saturate(1.8); --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,.47); /* ⚠️ NOSSO — a Apple usa 25% (1,83 no branco: some). 47% empata com o #86868b antigo (3,6) e ganha no vidro */ /* placeholder, linha esmaecida */ --text-on-dark: #ffffff; /* texto sobre navy */ --link: var(--brand-blue); /* --- 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; /* --- 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); --sh-lg: 0 12px 32px rgba(0, 0, 0, .14), 0 0 0 .5px rgba(0, 0, 0, .06); --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: -.005em; /* v8: SF/Inter pedem tracking levemente negativo */ -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 */ /* Padrão de fonte: nada de monospace na UI (o /
// 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). */
.mb-btn {
  --_bg:        var(--fill);
  --_bg-hover:  var(--fill-hover);
  --_fg:        var(--text);
  --_border:    transparent;
  --_ring:      rgba(0, 113, 227, .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: -.005em;
  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: pointer;
  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],
.mb-btn.is-disabled {
  cursor: not-allowed;
  opacity: .5;
  pointer-events: none;
}

/* Í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 —
    + 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(0, 113, 227, .35); font-weight: var(--fw-semibold);
}
.mb-btn--secondary {
  --_bg: var(--brand-blue-50); --_bg-hover: rgba(0,113,227,.20);
  --_fg: var(--brand-blue-700); --_ring: rgba(0, 113, 227, .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(0, 113, 227, .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:
    */
.mb-btn--levi {
  --_bg: var(--brand-blue-50); --_bg-hover: rgba(0,113,227,.20);
  --_fg: var(--brand-blue-700); --_border: transparent;
  --_ring: rgba(0, 113, 227, .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; }

/* --- 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: pointer;
  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 {
  outline: none; border-color: var(--brand-blue);
  box-shadow: var(--ring) rgba(0, 113, 227, .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: pointer;
  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(183,24,42,.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(183,24,42,.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: pointer; }
.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: pointer; 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(--brand-blue); }
.mb-upload input[type="file"] { display: none; }
.mb-upload__hint { font-size: var(--fs-12); color: var(--text-subtle); }
.mb-upload b { color: var(--brand-blue); 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: pointer; }
.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: pointer;
  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: pointer;
  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(--brand-blue); 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: 46px; }
  /* 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. */
.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(--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); }
.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; }

/* ============================================================================
   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: pointer;
  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); }
.mb-menu__item.is-active { background: var(--brand-blue-50); color: var(--brand-blue); 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(--brand-blue); font-weight: var(--fw-semibold); font-size: var(--fs-14);
  padding: 10px 12px; border-top: 1px solid var(--border); cursor: pointer; 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(--brand-blue); cursor: pointer; 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: pointer; 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  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:
     
   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: pointer;
  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(--brand-blue); }
.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 ------------ */
.mb-tag { display: inline-block; font-size: var(--fs-12); font-weight: var(--fw-semibold);
  padding: 3px 10px; border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent); }
.mb-tag--demo   { background: var(--warning-bg); color: var(--warning); }
/* 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(--brand-blue); }
.mb-tag--orange { background: var(--brand-orange-50); color: var(--brand-orange); }
.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: pointer; 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: pointer;
  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(--brand-blue); padding: 3px 8px;
  border-radius: var(--r-sm); font-size: var(--fs-11); font-weight: var(--fw-semibold);
  border: none; cursor: pointer; 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. */
.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: pointer;
  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: pointer; 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(0,113,227,.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: pointer; 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(0,113,227,.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: pointer; 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: default; pointer-events: none; }
@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(--brand-blue); font-weight: var(--fw-bold); }
.mb-assistant-welcome__cta { 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: pointer;
  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(--brand-blue); outline: none; }
.pf-help__tip { position: absolute; bottom: calc(100% + 8px); left: 0; width: var(--tip-w, 300px); max-width: 70vw;
  /* 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);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease; 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 { opacity: 1; visibility: visible; transform: translateY(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