/* Fundação visual do sistema. Estilos aplicados a tags HTML puras (não a classes) sempre que
possível, para que templates existentes herdem a aparência sem precisar de edição. */

:root {
  /* Fase A — Identidade Núcleo Regente. Grafite-tinta como estrutura, Papel como fundo,
     Verde-ardósia para dados positivos, Bronze só em elementos não-textuais — nunca em
     texto corrido, nunca em área grande.

     Fase A.1 — refinamento semântico: --color-border/--color-neutral-bg/--color-success-bg/
     --color-brand-ink-muted eram resíduos frios (levemente azulados) herdados da paleta
     antiga; foram reaquecidos para a família neutra do Papel/Grafite, sem alterar a
     luminância (contraste preservado — ver matriz no relatório da fase). --color-success
     (#3E5C56) foi reavaliado e MANTIDO: é a cor oficial da identidade, contraste forte
     (6.4–7.3:1) — a leitura fica mais discreta que o vermelho ao lado por ser
     deliberadamente menos saturada (ver relatório para a alternativa avaliada e não
     aplicada). Vermelho/âmbar não são resíduos — não fazem parte da paleta de marca, são
     semântica de status, mantidos como estavam. */
  --color-bg: #f3f0e8;
  --color-surface: #ffffff;
  --color-border: #e4e0d6;
  --color-text: #1b1f1d;
  /* Era #667085 (frio, azulado — B>G>R) até a Fase E: escapou do reaquecimento da Fase A.1
     porque não tinha "resíduo" no nome, mas é usado em quase toda a interface (cabeçalhos de
     tabela, badge neutro, subnav, rótulos) e em alguns desses contextos (badge-neutral sobre
     --color-neutral-bg, texto direto sobre --color-bg) o contraste real ficava abaixo de
     4.5:1 (4.07–4.37:1) — não só uma questão de tom, uma falha de contraste real. Reaquecido
     para a mesma família R>G>B de --color-border/--color-neutral-bg/--color-brand-ink-muted,
     com luminância ajustada (não só preservada) para restabelecer >=4.5:1 no pior caso. */
  --color-text-muted: #6a655d;
  --color-primary: #1b1f1d;
  --color-primary-hover: #2e332f;
  --color-primary-soft: #e9e7e1;
  /* Fase E.1 — Era #1b1f1d (igual a --color-primary, só reaproveitado). Na inspeção visual
     real, a superfície escura (Hero + Login) lia como cinza genérico, não como um grafite
     rico. Aprofundado para #0e1612, mesma família de matiz (G>B>R, a mesma direção de
     --color-success #3e5c56 — "leve leitura de verde/grafite") só que mais escura e mais
     acentuada nessa direção — não um desvio para azul (B continua o canal mais baixo, nunca
     o mais alto). Mantido como o mesmo --color-brand (não um token novo): afeta Hero e Login
     igualmente, o que é desejado — as duas únicas superfícies escuras do sistema devem
     pertencer ao mesmo grafite. Contraste recalculado e MELHOROU em todo lugar que usa este
     token de fundo (ver relatório da fase). */
  --color-brand: #0e1612;
  --color-accent: #9c6b34;
  --color-success: #3e5c56;
  --color-success-bg: #e3efe7;
  --color-danger: #c02626;
  --color-danger-bg: #fde8e8;
  --color-warning: #a15c07;
  --color-warning-bg: #fef1d6;
  --color-neutral-bg: #ece8de;

  /* Superfície escura (Hero da Home) — reaproveita --color-brand. --color-brand-ink-muted
     era azulado (calibrado para o navy antigo); reaquecido para a família neutra — mesma
     luminância, contraste contra o grafite melhora (7.9:1). ink/line/surface preservados,
     já eram neutros/translúcidos. */
  --color-brand-ink: #eef1fb;
  --color-brand-ink-muted: #b7b3a6;
  --color-brand-line: rgba(255, 255, 255, 0.14);
  --color-brand-surface: rgba(255, 255, 255, 0.06);
  /* Fase E.2 — aplicação em superfície escura de --color-success/--color-danger. As cores
     "de página" (#3e5c56 / #c02626) foram desenhadas para texto sobre fundos claros —
     usadas diretas sobre --color-brand (#0e1612) ficam em 2.5:1 / 3.1:1, abaixo dos 4.5:1
     de texto normal. Mesma família semântica (verde-ardósia / vermelho), luminância
     levantada até cravar >=4.5:1 no fundo do Hero — não são cores novas "inventadas", são a
     versão clareada das mesmas duas cores oficiais, mesmo raciocínio já usado para
     --color-brand-ink-muted. Ver matriz de contraste no relatório da fase. */
  --color-success-on-brand: #648f80;
  --color-danger-on-brand: #c96b5c;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
  /* Antes tingido de navy (22,38,92) para casar com o --color-brand antigo — trocado para
     grafite (27,31,29) para não deixar um resquício azul sob o Hero agora que a estrutura é
     grafite, não navy. Token não fazia parte da lista aprovada, mas ficaria inconsistente se
     não fosse ajustado junto — mesmo raciocínio do --doc-color-accent em documento.css. */
  --shadow-lg: 0 24px 48px -16px rgba(27, 31, 29, 0.32);
  --transition: 120ms ease;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 var(--space-4); text-wrap: balance; }
h2 { font-size: 1.1rem; font-weight: 700; margin: var(--space-5) 0 var(--space-3); }
h3 { font-size: 0.95rem; font-weight: 600; margin: var(--space-4) 0 var(--space-2); }

a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Marca do produto — usada no cabeçalho e no login, mesmo elemento nos dois lugares para
   reforçar identidade sem depender de imagem/logo (que é opcional, por empresa). */
.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  color: var(--color-brand);
}
.brand-mark-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Marca Núcleo Regente — lockup único e compacto (glifo + wordmark + descritor subordinado).
   Fase E.1: até aqui o cabeçalho tinha DOIS <svg> no DOM (#i-nucleo "completo" +
   #i-nucleo-reduzido, alternando via display:none/block por media query) — mesmo funcionando
   como projetado, essa duplicação estrutural criava risco real de as duas marcas aparecerem
   juntas (foi exatamente o que a inspeção visual desta fase flagrou). Corrigido eliminando o
   glifo completo do cabeçalho: agora só existe UM <svg> na navegação, usando
   #i-nucleo-reduzido — símbolo já existente (não é uma redução da arte, é a expressão que a
   própria identidade já reservava para contextos pequenos/compactos), num tamanho fixo,
   pequeno e proporcional ao wordmark, sem alternância nenhuma. O glifo completo (#i-nucleo,
   3 arcos) permanece exclusivo do momento de marca do Login, onde faz sentido ter mais
   presença. Geometria do símbolo (arcos, núcleo, bronze) intocada — só escala e composição
   mudaram. */
.nr-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--color-text); }
.nr-brand-glifo { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-text); }
.nr-brand-texto { display: flex; flex-direction: column; line-height: 1.1; }
.nr-brand-titulo { font-size: 0.92rem; font-weight: 600; letter-spacing: -0.01em; color: var(--color-text); }
.nr-brand-ponto {
  display: inline-block; width: 3px; height: 3px; border-radius: 50%;
  background: var(--color-accent); margin: 0 4px; vertical-align: middle;
}
.nr-brand-descritor {
  font-size: 0.6rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-text-muted); margin-top: 0;
}
/* Abaixo de 480px o cabeçalho fica curto demais para o lockup completo disputar espaço com
   seletor de empresa/usuário/sair — o descritor (a informação menos essencial da marca,
   já subordinada por design) some; glifo e wordmark permanecem sempre visíveis. Escopado em
   ".nr-brand" (só o cabeçalho) — mesmo cuidado da Fase E: a classe é reaproveitada por
   ".login-brand" com seu próprio layout, e uma regra sem esse prefixo vazaria e escondia
   "GESTÃO INTEGRADA" no login também, que é exatamente onde a marca mais precisa aparecer
   inteira. */
@media (max-width: 480px) {
  .nr-brand .nr-brand-descritor { display: none; }
}

/* Login — fundo predominante em grafite (a superfície escura que a identidade reserva para
   login/capa), com o formulário numa superfície clara de alto contraste (.card, sem nenhuma
   cor nova: mesmo branco/borda/sombra de sempre) flutuando por cima. Como só o FUNDO da
   página muda, todo o conteúdo do formulário — labels, inputs, botão primário, foco,
   mensagem de erro — herda exatamente o mesmo visual já validado no resto do sistema, sem
   precisar de nenhuma variante "escura" desses componentes. */
.login-page { background: var(--color-brand); }
.login-main {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-5); padding: var(--space-6) var(--space-4);
}
/* Fase E.1 — glifo/wordmark/descritor precisam ler como UMA unidade compacta, não como um
   símbolo grande seguido, distante, de um texto solto. Glifo reduzido de 44px para 30px
   (ainda maior que o do cabeçalho — é o momento de marca principal, mas sem dominar a tela);
   gap interno reduzido de var(--space-2) para 8px→6px; wordmark reduzido de 1.4rem para
   1.05rem para ficar proporcional ao símbolo menor, não flutuando isolado. */
.login-brand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.login-brand .nr-brand-glifo { width: 30px; height: 30px; color: var(--color-bg); }
.login-brand .nr-brand-titulo { font-size: 1.05rem; color: var(--color-bg); }
.login-brand .nr-brand-descritor { color: var(--color-brand-ink-muted); }
.login-card {
  width: 100%; max-width: 360px; margin: 0;
}
/* Especificidade .card.login-card (não .login-card sozinho) para vencer de propósito o
   "border" shorthand de .card — mesma especificidade textual não bastava e a ordem no
   arquivo fazia .card (declarado depois) apagar este border-top sempre, silenciosamente. */
.card.login-card {
  border-top: 3px solid var(--color-accent);
}
.login-card h1 { font-size: 1.15rem; }
@media (max-width: 480px) {
  .login-main { padding: var(--space-5) var(--space-4); gap: var(--space-4); }
  .login-brand .nr-brand-glifo { width: 26px; height: 26px; }
  .login-brand .nr-brand-titulo { font-size: 0.98rem; }
}

/* Cabeçalho */
.app-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 10px var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.app-brand { font-weight: 700; font-size: 1rem; }
.app-user { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: 0.9rem; }

/* Fase E.2 — o seletor de empresa ativa (formulário + label + select + botão "Trocar") virava
   duas linhas dentro do cabeçalho: a regra global "label { display:block }" (pensada para
   rótulos de formulário de página inteira) forçava o texto "Empresa ativa:"+select para uma
   linha e empurrava "Trocar" para a linha seguinte — inflando a altura do cabeçalho inteiro
   sem necessidade. Aqui o formulário vira um grupo compacto de uma linha só (rótulo, select e
   botão lado a lado), sem alterar em nada o rótulo/label de formulários normais no resto do
   sistema (a regra é escopada nestas classes, não no elemento <label> global). */
.empresa-ativa-form { display: inline-flex; align-items: center; gap: 8px; }
.empresa-ativa-label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
.empresa-ativa-label-texto { font-size: 0.78rem; color: var(--color-text-muted); font-weight: 600; white-space: nowrap; }
.empresa-ativa-form select { width: auto; min-height: 34px; padding: 6px 30px 6px 10px; font-size: 0.85rem; }
.empresa-ativa-form button { min-height: 34px; padding: 6px 14px; font-size: 0.85rem; }
/* "admin" + "Sair" alinhados à mesma altura compacta dos demais controles do cabeçalho. */
.app-user > span { font-size: 0.85rem; color: var(--color-text-muted); }
.app-user form[action*="logout"] button { min-height: 34px; padding: 6px 14px; font-size: 0.85rem; }

/* Bloco 3 — sino de notificações no cabeçalho + badge de não lidas. Reaproveita --color-danger*
   (já usado em .badge-danger) — nenhuma cor nova introduzida. O número nunca é o único indicador
   de "tem coisa nova": o próprio sino já é um alvo de clique claro, e a Central lista tudo com
   rótulo textual "Lida"/"Não lida" (nunca só cor). */
.notificacoes-sino {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 1.2rem;
  line-height: 1;
  text-decoration: none;
  padding: 4px;
}
.notificacoes-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  border: 2px solid var(--color-surface);
}

/* Central Interna — linha de notificação não lida ganha uma borda de destaque à esquerda
   (--color-warning, já usado em .badge-warning) e peso de fonte maior no título — dois sinais
   além da cor, para quem não distingue bem cor sozinha. */
.notificacao-nao-lida { border-left: 3px solid var(--color-warning); background: var(--color-warning-bg); }
.notificacao-nao-lida .agenda-corpo strong { font-weight: 800; }

/* Navegação global de módulos */
.app-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: 0 var(--space-5);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.app-nav a, .app-nav .nav-disabled {
  padding: var(--space-3) var(--space-3);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color var(--transition);
}
.app-nav a:hover { color: var(--color-text); text-decoration: none; }
/* #c3c8d1 (frio) trocado por um cinza claro da mesma família aquecida de --color-border —
   mesmo nível de discrição do estado desabilitado original, sem o resíduo azulado. */
.nav-disabled { color: #c7c1b2; cursor: default; }
/* Estado ativo: texto em grafite (não bronze — bronze não é texto de leitura), borda inferior
   fina em bronze como único acento de cor — o uso "estado ativo" que a identidade autoriza. */
.app-nav a.nav-current, .app-nav details.nav-group summary.nav-current {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}
.app-nav .nav-group-links a.nav-current { border-bottom: none; text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Grupos de navegação (Vendas & Atendimento / Operação / Pessoas / Gestão) — <details> nativo,
   sem JS: expande no próprio fluxo da página em vez de um menu flutuante, o que funciona bem
   tanto em toque (mobile) quanto em clique (desktop) sem precisar de posicionamento/z-index. */
.app-nav details.nav-group { position: relative; }
.app-nav details.nav-group summary {
  padding: var(--space-3) var(--space-3);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.app-nav details.nav-group summary::-webkit-details-marker { display: none; }
.app-nav details.nav-group summary::after { content: '▾'; font-size: 0.7em; margin-left: 4px; }
.app-nav details.nav-group[open] summary::after { content: '▴'; }
.app-nav details.nav-group summary:hover,
.app-nav details.nav-group[open] summary { color: var(--color-text); }
.app-nav details.nav-group .nav-group-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-1) 0 var(--space-2) var(--space-3);
  margin-left: var(--space-2);
  border-left: 2px solid var(--color-border);
}
.app-nav details.nav-group .nav-group-links a { padding: var(--space-2) var(--space-3); }
.nav-soon {
  font-size: 0.65rem; background: var(--color-neutral-bg); color: var(--color-text-muted);
  border-radius: 999px; padding: 1px 6px;
}

/* Subnavegação (dentro de um módulo) */
.subnav { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-4); font-size: 0.9rem; }
.subnav a { color: var(--color-text-muted); font-weight: 500; }
.subnav a:hover { color: var(--color-primary); text-decoration: none; }

main { max-width: 1100px; margin: 0 auto; padding: var(--space-5); }

/* Cards */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

/* Cards de navegação — link inteiro clicável, usados em landing pages de módulo (ex.: Financeiro)
   para substituir listas de texto por atalhos visuais claros. */
.card-link-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-bottom: var(--space-4); }
@media (min-width: 560px) {
  .card-link-grid { grid-template-columns: repeat(2, 1fr); }
}
.card-link {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.card-link:hover { text-decoration: none; border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.card-link strong { display: block; font-size: 1rem; margin-bottom: 2px; }
.card-link span { font-size: 0.85rem; color: var(--color-text-muted); }

/* Botões */
button, .btn {
  display: inline-block;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  min-height: 40px;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
button:hover, .btn:hover { background: var(--color-neutral-bg); text-decoration: none; }
button:active, .btn:active { transform: scale(0.98); }
button:disabled, .btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
button[type="submit"], .btn-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
button[type="submit"]:hover, .btn-primary:hover { background: var(--color-primary-hover); }

/* Formulários */
input, select, textarea {
  font-family: inherit;
  font-size: 0.95rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  min-height: 40px;
  width: 100%;
  max-width: 420px;
  transition: border-color var(--transition);
}
/* Mesmo #c3c8d1 (frio) trocado aqui — este hover é um reforço leve e opcional (só mouse);
   o indicador que carrega a responsabilidade de acessibilidade é o :focus logo abaixo
   (borda grafite, ~16.7:1), que sozinho já cumpre WCAG 1.4.11 para o estado interativo. */
input:hover, select:hover, textarea:hover { border-color: #c7c1b2; }
input:focus, select:focus, textarea:focus { border-color: var(--color-primary); }
/* Altura pequena por padrão, cresce sozinho conforme o usuário digita — sem JS.
   field-sizing é ignorado com segurança em navegadores sem suporte (o textarea só fica com
   `min-height` fixo, sem quebrar); max-height evita crescimento infinito tomando a página. */
textarea {
  min-height: 2.6em;
  max-height: 60vh;
  field-sizing: content;
}
input[type="checkbox"] { width: auto; min-height: auto; }
label { display: block; margin: var(--space-3) 0 var(--space-1); font-size: 0.9rem; font-weight: 600; }
form p { margin: var(--space-2) 0; }

/* Formulário de filtro/busca em linha (listas) — inputs e botão lado a lado no desktop,
   empilhados no mobile, mesma lógica visual de .periodo-filtro. */
.filtro-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-4); }
.filtro-inline > div { flex: 1 1 160px; }
.filtro-inline label { margin-top: 0; }
.filtro-inline input, .filtro-inline select { max-width: none; }
.filtro-inline > button, .filtro-inline > input[type="submit"] { flex: 0 0 auto; align-self: flex-end; }

/* Tabelas */
.table-responsive {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  margin-bottom: var(--space-4);
}
table.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.table th, table.table td { text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--color-border); }
table.table th { background: var(--color-bg); color: var(--color-text-muted); font-weight: 700; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
table.table tbody tr:hover { background: var(--color-bg); }
table.table tr:last-child td { border-bottom: none; }
.text-nowrap { white-space: nowrap; }

/* Badges de status */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-danger { background: var(--color-danger-bg); color: var(--color-danger); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-neutral { background: var(--color-neutral-bg); color: var(--color-text-muted); }

/* Melhoria 2 — aviso de que o Master está operando dentro do contexto de uma empresa (nunca um
   estado silencioso: precisa ser visível em toda página, ao lado do usuário no header). Reaproveita
   os mesmos tokens de --color-warning já usados em .badge-warning/.messages .warning — nenhuma
   cor nova introduzida. */
.modo-admin-banner { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; background: var(--color-warning-bg); color: var(--color-warning); }

/* Botões de ação em destaque (uso mobile: empilhados e grandes; lado a lado no desktop) */
.action-buttons { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-4) 0; }
.action-buttons form { margin: 0; }
.action-buttons .btn, .action-buttons button {
  width: 100%;
  min-height: 48px;
  font-size: 1rem;
  text-align: center;
}
@media (min-width: 480px) {
  .action-buttons { flex-direction: row; flex-wrap: wrap; }
  .action-buttons form, .action-buttons .btn { flex: 1 1 auto; min-width: 140px; }
}

/* Mensagens de sucesso/erro */
.messages { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.messages li { padding: var(--space-3); border-radius: var(--radius); margin-bottom: var(--space-2); font-size: 0.9rem; font-weight: 500; }
.messages .success { background: var(--color-success-bg); color: var(--color-success); }
.messages .error { background: var(--color-danger-bg); color: var(--color-danger); }
.messages .warning { background: var(--color-warning-bg); color: var(--color-warning); }

/* Estado vazio */
.empty-state {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-6) var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}

/* Disclosure "Ver mais" (indicadores secundários no Dashboard, etc.) — <details> nativo,
   sem JS, mesmo princípio dos grupos de navegação. */
.ver-mais { margin-top: var(--space-3); }
.ver-mais summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
  list-style: none;
  user-select: none;
}
.ver-mais summary::-webkit-details-marker { display: none; }
.ver-mais summary::before { content: '+ '; }
.ver-mais[open] summary::before { content: '− '; }
.ver-mais .stat-grid { margin-top: var(--space-4); }

/* Agenda: cards de evento (mobile-first — hora à esquerda, conteúdo à direita) */
.agenda-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: inherit;
  transition: background var(--transition);
}
.agenda-item:hover { text-decoration: none; background: var(--color-bg); }
.agenda-hora {
  min-width: 52px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.agenda-corpo { flex: 1; min-width: 0; }
.agenda-corpo strong { display: block; font-size: 1rem; }
.agenda-corpo p { margin: 2px 0 0; font-size: 0.85rem; color: var(--color-text-muted); }
.agenda-lista { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; }
.agenda-lista .agenda-item + .agenda-item { border-top: 1px solid var(--color-border); }

/* Agenda: calendário mensal, grade simples de 7 colunas */
.calendario-cabecalho { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
.calendario-mes { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.calendario-dia-nome { text-align: center; font-size: 0.72rem; font-weight: 600; color: var(--color-text-muted); padding: var(--space-1); }
.calendario-dia {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  min-height: 56px;
  padding: 3px;
  font-size: 0.68rem;
}
.calendario-dia.vazio { background: transparent; border-color: transparent; }
.calendario-dia.hoje { border-color: var(--color-primary); border-width: 2px; }
.calendario-dia-numero { font-weight: 600; font-size: 0.75rem; }
.calendario-evento { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 768px) {
  .calendario-dia { min-height: 90px; font-size: 0.75rem; padding: var(--space-1); }
}

/* Dashboard: grade de indicadores (empilhada no mobile, colunas a partir de 480px) */
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (min-width: 480px) {
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
}
.stat-valor { font-size: 1.4rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 2px; }

/* Utilitário de cor semântica — reaproveitado em qualquer elemento (stats, linhas de lista,
   badges de texto), não só em .stat-valor. Entradas/recebido/saldo positivo -> positivo;
   saídas/pago/saldo negativo -> negativo; pendente/vencido/atenção -> alerta. */
.positivo { color: var(--color-success); }
.negativo { color: var(--color-danger); }
.alerta { color: var(--color-warning); }

/* Dashboard: filtro de período — controles fáceis de tocar no mobile */
.periodo-filtro { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-4); }
.periodo-filtro > div { flex: 1 1 140px; }
.periodo-filtro label { margin-top: 0; }

/* Dashboard: lista de alertas */
.alertas-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.alertas-lista li {
  background: var(--color-warning-bg); color: var(--color-warning);
  border-radius: var(--radius); padding: var(--space-3); font-size: 0.9rem; font-weight: 600;
}

/* Financeiro: linha simples de categoria/conta (nome + valor) — sem tabela, cabe em qualquer largura */
.linha-valor {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); gap: var(--space-3);
}
.linha-valor:last-child { border-bottom: none; }
.linha-valor-nome { font-size: 0.92rem; }
.linha-valor-total { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Financeiro: evolução diária — barras horizontais simples (sem biblioteca de gráfico) */
.fluxo-dia { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.fluxo-dia:last-child { border-bottom: none; }
.fluxo-dia-data { font-size: 0.78rem; color: var(--color-text-muted); margin-bottom: 4px; }
.fluxo-barra-linha { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 3px; }
.fluxo-barra-fundo { flex: 1; background: var(--color-neutral-bg); border-radius: 4px; height: 8px; overflow: hidden; }
.fluxo-barra-preenchimento { height: 100%; border-radius: 4px; }
.fluxo-barra-preenchimento.entrada { background: var(--color-success); }
.fluxo-barra-preenchimento.saida { background: var(--color-danger); }
.fluxo-barra-valor { min-width: 76px; text-align: right; font-size: 0.8rem; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   HOME — Central de Comando. Sistema visual próprio da página inicial,
   construído sobre os mesmos tokens de :root (nenhuma cor nova fora deles).
   ========================================================================== */

/* Breakout: só a Home ganha mais largura que o `main` global (1100px) — nenhuma outra
   página é afetada, porque nenhuma outra página tem `.dashboard-wide`. Técnica de duas
   camadas: o wrapper externo escapa do container centralizado do `main` até a borda da
   viewport (via margin negativo calculado em vw); o `.dashboard-grid` interno então
   recentraliza com seu próprio teto de largura, para não virar uma faixa infinita em
   monitores ultra-wide. 1400px foi o valor testado (1280/1440/1600/1920) que ainda lê
   como "coluna de conteúdo", não como página inteira ocupada. */
.dashboard-wide {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.dashboard-grid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-5);
}

/* Layout: DOM segue a ordem de prioridade MOBILE E DESKTOP (hero, atenção, ações,
   financeiro, comercial, operação, agenda, compras, estoque, clientes) — ordem do
   documento = ordem de leitura = ordem visual em qualquer largura, para tab-order e
   leitor de tela não divergirem do que a tela mostra. Em telas largas,
   grid-template-areas reorganiza em 2 colunas sem duplicar HTML nem JS — só reposiciona
   visualmente o que o DOM já apresenta na ordem certa. */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  grid-template-areas:
    "hero" "attention" "acoes"
    "financeiro"
    "comercial" "operacao" "agenda"
    "rentabilidade"
    "suprimentos"
    "compras" "estoque" "producao"
    "clientes";
}
@media (min-width: 980px) {
  .dashboard-grid {
    grid-template-columns: 1.15fr 0.85fr;
    grid-template-areas:
      "hero        hero"
      "attention   attention"
      "acoes       acoes"
      "financeiro  financeiro"
      "comercial   agenda"
      "operacao    agenda"
      "rentabilidade rentabilidade"
      "suprimentos suprimentos"
      "compras     estoque"
      "producao    producao"
      "clientes    clientes";
  }
}
.area-hero { grid-area: hero; }
.area-attention { grid-area: attention; }
.area-agenda { grid-area: agenda; }
.area-acoes { grid-area: acoes; }
.area-comercial { grid-area: comercial; }
.area-operacao { grid-area: operacao; }
.area-financeiro { grid-area: financeiro; }
.area-rentabilidade { grid-area: rentabilidade; }
.area-suprimentos { grid-area: suprimentos; }
.area-compras { grid-area: compras; }
.area-estoque { grid-area: estoque; }
.area-producao { grid-area: producao; }
.area-clientes { grid-area: clientes; }

.dashboard-area-titulo {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-text-muted); margin: 0 0 var(--space-3);
}
.panel-head-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-4); }
.panel-head-row h2 { margin: 0; }
.panel-head-row a { font-size: 0.8rem; font-weight: 600; }
.icon-inline { width: 15px; height: 15px; display: inline-block; vertical-align: -3px; flex-shrink: 0; }

/* ---------- Hero ---------- */
.hero {
  background: var(--color-brand); color: var(--color-brand-ink);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  padding: var(--space-5) var(--space-6) var(--space-6);
}
.hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.hero-eyebrow { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-brand-ink-muted); margin: 0 0 6px; }
.hero-greeting h1 { margin: 0 0 4px; font-size: 1.65rem; font-weight: 700; letter-spacing: -0.015em; color: var(--color-brand-ink); }
.hero-greeting p { margin: 0; color: var(--color-brand-ink-muted); font-size: 0.92rem; }

.periodo-filtro-hero { display: flex; align-items: center; gap: var(--space-2); }
.periodo-filtro-hero select {
  appearance: none; -webkit-appearance: none; background: var(--color-brand-surface);
  border: 1px solid var(--color-brand-line); color: var(--color-brand-ink);
  border-radius: 999px; padding: 8px 34px 8px 16px; font-size: 0.82rem; font-weight: 600;
  min-height: auto; width: auto; max-width: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b3d6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 13px;
}
.periodo-filtro-hero select:focus { border-color: var(--color-primary); outline: none; }
.periodo-filtro-hero .periodo-custom { display: flex; gap: var(--space-2); align-items: center; }
.periodo-filtro-hero .periodo-custom input {
  background: var(--color-brand-surface); border: 1px solid var(--color-brand-line); color: var(--color-brand-ink);
  border-radius: var(--radius); font-size: 0.8rem; padding: 6px 10px; min-height: auto; width: auto;
}
.periodo-filtro-hero .periodo-custom button {
  background: var(--color-primary); border-color: var(--color-primary); color: #fff; min-height: auto; padding: 7px 14px;
}

/* Fase E.1 — hierarquia entre saldo (principal) e indicadores (secundários) reforçada em
   dois eixos ao mesmo tempo, não só tamanho: a coluna do saldo ganha peso relativo maior no
   grid (1.3fr contra 0.85fr de cada indicador, era 1fr para todos — o saldo já tinha mais
   espaço mínimo, mas crescia proporcionalmente igual aos outros em telas largas); os valores
   secundários (k-value) caem de --color-brand-ink (branco pleno, igual ao saldo) para
   --color-brand-ink-muted — o mesmo tom do rótulo acima deles — e de peso 700 para 600,
   então a diferença entre "o número" e "os números de apoio" fica evidente em tom e peso,
   não só em escala, e a leitura do bloco inteiro fica compreensível em 1-2s. */
.hero-body { display: grid; grid-template-columns: minmax(200px, 1.3fr) 1px repeat(4, minmax(92px, 0.85fr)); gap: 0 var(--space-5); align-items: center; }
.hero-primary-label { font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-brand-ink-muted); margin-bottom: 10px; }
.hero-primary-value { font-size: 3.1rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--color-brand-ink); }
.hero-primary-value .cents { font-size: 1.5rem; color: var(--color-brand-ink-muted); font-weight: 700; }
.hero-primary-sub { margin-top: 10px; font-size: 0.82rem; color: var(--color-brand-ink-muted); }
.hero-divider { background: var(--color-brand-line); height: 100%; min-height: 64px; }
.hero-sub-kpi { display: flex; flex-direction: column; gap: 4px; }
.hero-sub-kpi .k-label { font-size: 0.72rem; color: var(--color-brand-ink-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.hero-sub-kpi .k-value { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--color-brand-ink-muted); }
/* Fase F — "vencido" é informação de atenção, não mais uma cor nova: o texto já comunica o
   estado, o tom continua neutro (mesma família do rótulo), sem introduzir âmbar/vermelho extra
   na superfície escura do Hero (identidade da Fase E.2 preservada). */
.hero-sub-kpi .k-sub { font-size: 0.66rem; color: var(--color-brand-ink-muted); margin-top: 1px; }
@media (max-width: 860px) {
  .hero-body { grid-template-columns: 1fr; }
  .hero-divider { display: none; }
  .hero-sub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-brand-line); }
}
.hero-sub-grid { display: contents; }
@media (max-width: 860px) { .hero-sub-grid { display: grid; } }

/* ---------- Requer atenção ---------- */
.attention-list { display: flex; flex-direction: column; gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.attention-row {
  display: flex; align-items: center; gap: var(--space-3); background: var(--color-surface); padding: var(--space-3) var(--space-4);
  text-decoration: none; color: var(--color-text); border-left: 3px solid transparent; transition: background var(--transition);
}
.attention-row:hover { background: var(--color-bg); text-decoration: none; }
.attention-row.sev-alta { border-left-color: var(--color-danger); }
.attention-row.sev-media { border-left-color: var(--color-warning); }
.attention-row .a-icon { width: 30px; height: 30px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sev-alta .a-icon { background: var(--color-danger-bg); color: var(--color-danger); }
.sev-media .a-icon { background: var(--color-warning-bg); color: var(--color-warning); }
.attention-row .a-icon svg { width: 16px; height: 16px; }
.attention-row .a-text { flex: 1; font-size: 0.9rem; font-weight: 500; }
.attention-row .a-go { color: var(--color-text-muted); font-size: 0.8rem; display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.attention-row:hover .a-go { color: var(--color-primary); }
.attention-row .a-go svg { width: 13px; height: 13px; }

/* ---------- Comercial: funil ---------- */
.funnel { display: flex; align-items: stretch; gap: 0; }
.funnel-stage { flex: 1; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-bg); }
.funnel-stage .f-label { font-size: 0.76rem; color: var(--color-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; }
.funnel-stage .f-value { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.funnel-stage .f-detail { margin-top: 8px; font-size: 0.8rem; color: var(--color-text-muted); display: flex; justify-content: space-between; gap: var(--space-3); }
.funnel-stage .f-detail strong { color: var(--color-text); font-variant-numeric: tabular-nums; }
.funnel-connector { display: flex; align-items: center; justify-content: center; width: 40px; color: var(--color-text-muted); flex-shrink: 0; }
.funnel-connector svg { width: 18px; height: 18px; }
.funnel-note { margin-top: var(--space-3); font-size: 0.78rem; color: var(--color-text-muted); }
@media (max-width: 560px) {
  .funnel { flex-direction: column; gap: var(--space-3); }
  .funnel-connector { width: 100%; height: 20px; transform: rotate(90deg); }
}

/* ---------- Operação: trilho de estágios ---------- */
.op-track { display: flex; align-items: flex-start; margin-bottom: var(--space-4); }
.op-node { text-align: center; flex: 1; }
.op-node .n-value { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.op-node .n-label { font-size: 0.74rem; color: var(--color-text-muted); margin-top: 3px; font-weight: 600; }
.op-rail { flex: 0 0 32px; height: 2px; background: var(--color-border); position: relative; top: 14px; }
.op-secondary { display: flex; gap: var(--space-5); flex-wrap: wrap; padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.op-secondary .s-item { font-size: 0.82rem; color: var(--color-text-muted); }
.op-secondary .s-item strong { color: var(--color-text); font-variant-numeric: tabular-nums; }

/* ---------- Financeiro: Tier 1 — módulo âncora, largura total acima dos demais.
   Autoridade visual vem de proporção/espaço, não de efeito: acento superior fino,
   respiro interno maior que os outros cards, números com mais peso, sparkline com
   mais altura porque agora tem a largura toda para si. Nenhuma cor nova. ---------- */
.fin-card { border-top: 3px solid var(--color-primary); padding: var(--space-5) var(--space-5) var(--space-6); }
.fin-card .panel-head-row h2 { font-size: 1.2rem; }
.fin-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-bottom: var(--space-6); }
.fin-summary .f-label { font-size: 0.76rem; color: var(--color-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.fin-summary .f-value { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 6px; }
/* Fase F — comparação com o período anterior equivalente. Reaproveita .positivo/.negativo (já
   definidos para o resto do sistema) para a parte colorida; o "vs. período anterior" e o "sem
   histórico comparável" ficam no tom neutro de legenda, nunca competindo com o valor principal
   acima. */
.fin-summary .f-comparacao { font-size: 0.74rem; color: var(--color-text-muted); margin-top: 4px; }
.fin-summary .f-comparacao .positivo, .fin-summary .f-comparacao .negativo { font-weight: 700; }
.spark-wrap { border-top: 1px solid var(--color-border); padding-top: var(--space-5); }
.spark-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; color: var(--color-text-muted); margin-bottom: var(--space-3); }
.spark-legend { display: flex; gap: 12px; }
.spark-legend span { display: inline-flex; align-items: center; gap: 5px; }
.spark-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.spark-legend i.in { background: var(--color-success); }
.spark-legend i.out { background: var(--color-danger); }
.spark-bars { display: flex; align-items: flex-end; gap: 5px; height: 110px; }
.spark-col { flex: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; height: 100%; }
.spark-pair { display: flex; gap: 2px; align-items: flex-end; height: 100%; }
.spark-bar { flex: 1; border-radius: 2px 2px 0 0; min-height: 2px; }
.spark-bar.in { background: var(--color-success); opacity: 0.85; }
.spark-bar.out { background: var(--color-danger); opacity: 0.85; }
@media (max-width: 768px) {
  .fin-card { padding: var(--space-4); }
  .fin-summary { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
  .fin-summary .f-value { font-size: 1.3rem; }
  .spark-bars { height: 84px; }
}

/* ---------- Agenda ---------- */
/* Tier 2 · "trilho": a área de grid já estica .area-agenda para ocupar a altura das
   duas linhas de Comercial+Operação (comportamento padrão do CSS Grid); .card-rail só
   propaga essa altura para o .card interno e empurra o teaser do Meu Dia para o rodapé,
   para o card não terminar com um espaço vazio solto no meio. */
.card-rail { height: 100%; display: flex; flex-direction: column; }
.card-rail .meudia-teaser { margin-top: auto; }
.agenda-track-item { display: flex; gap: var(--space-3); padding: 10px 0; border-bottom: 1px solid var(--color-border); align-items: flex-start; text-decoration: none; color: var(--color-text); }
.agenda-track-item:last-child { border-bottom: none; }
.agenda-track-item:hover { text-decoration: none; }
.agenda-track-item:hover strong { color: var(--color-primary); }
.at-time { font-size: 0.78rem; font-weight: 700; color: var(--color-text-muted); width: 46px; flex-shrink: 0; padding-top: 2px; font-variant-numeric: tabular-nums; }
.at-body { flex: 1; min-width: 0; }
.at-body strong { font-size: 0.88rem; display: block; transition: color var(--transition); }
.at-body span { font-size: 0.8rem; color: var(--color-text-muted); }
.at-tag { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 7px; border-radius: 999px; flex-shrink: 0; }
.at-tag.os { background: var(--color-primary-soft); color: var(--color-primary); }
.at-tag.fu { background: var(--color-warning-bg); color: var(--color-warning); }

/* ---------- Meu Dia teaser ---------- */
.meudia-teaser { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-primary-soft); margin-top: var(--space-4); }
.meudia-teaser .mt-icon { width: 32px; height: 32px; border-radius: var(--radius); background: var(--color-surface); display: flex; align-items: center; justify-content: center; color: var(--color-primary); flex-shrink: 0; }
.meudia-teaser .mt-icon svg { width: 16px; height: 16px; }
.meudia-teaser .mt-text strong { display: block; font-size: 0.85rem; }
.meudia-teaser .mt-text span { font-size: 0.78rem; color: var(--color-text-muted); }
.meudia-teaser .mt-text a { font-weight: 600; }

/* ---------- Tier 3 · Compras/Estoque/Clientes: peso visual reduzido em relação aos
   demais módulos (menos sombra, menos padding), mas SEM apagar contraste — mesmo
   var(--color-text)/var(--color-border) dos outros cards, só menos "alto-relevo". Não é
   um estado desabilitado, é um card operacionalmente mais leve. ---------- */
/* height:100% + flex: quando Compras e Estoque têm quantidades de conteúdo bem diferentes
   (ex.: Estoque com tabela de movimentações, Compras sem), o card mais curto ainda
   preenche a altura da linha (definida pelo mais alto, via grid), em vez de deixar um vão
   vazio abaixo dele — o link "Ver X →" fica ancorado no rodapé do card. */
.card-tier3 { box-shadow: none; padding: var(--space-3) var(--space-4); height: 100%; display: flex; flex-direction: column; }
.card-tier3 h2 { font-size: 0.98rem; margin: 0 0 var(--space-3); }
.card-tier3 > p:last-child { margin-top: auto; padding-top: var(--space-3); }

/* Clientes: faixa horizontal compacta — título+stats à esquerda, link à direita, em vez
   da pilha vertical genérica. É um diretório/relacionamento, não um painel analítico. */
.card-clientes .cli-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.card-clientes .cli-head h2 { margin: 0; flex-shrink: 0; }
.card-clientes .cli-stats { flex: 1; min-width: 240px; gap: var(--space-5); }
.card-clientes .cli-link { font-size: 0.82rem; font-weight: 600; flex-shrink: 0; }
.card-clientes h3 { font-size: 0.85rem; margin: var(--space-4) 0 var(--space-2); }
.card-clientes .cli-retornos { margin-top: 0; }
@media (max-width: 640px) {
  .card-clientes .cli-head { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .card-clientes .cli-stats { min-width: 0; }
}

/* ---------- Ações rápidas: botão único "+ Novo" com menu via Popover API nativa
   (popover/popovertarget) — sem JavaScript, sem dependência nova. O navegador cuida de
   abrir/fechar, ESC, clique fora e da camada de topo (top layer); não recriamos nada disso
   manualmente. Mesmos links e mesmas permissões (pode_criar.*/pode_recibo) de sempre, só a
   apresentação mudou. */
.novo-wrap { display: inline-block; }

.btn-novo {
  /* Nome de âncora para o CSS Anchor Positioning (ver .menu-novo abaixo) — é só um identificador,
     não afeta o layout do próprio botão. */
  anchor-name: --novo-anchor;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--color-primary); border: none; border-radius: 999px;
  color: #fff; font-size: 0.98rem; font-weight: 700; padding: 14px 28px 14px 22px;
  min-height: 50px; cursor: pointer; transition: background var(--transition);
  box-shadow: var(--shadow-md);
}
.btn-novo:hover { background: var(--color-primary-hover); }
.btn-novo svg { width: 18px; height: 18px; }

/* [popover] já vem do navegador com position:fixed + display:none quando fechado (via
   :not(:popover-open) na folha de estilos do UA). IMPORTANTE: não declarar `display` na regra
   base — isso teria especificidade suficiente para vencer o `display:none` do estado fechado e
   deixaria o menu visível o tempo todo. `display:flex` só entra qualificado por :popover-open.

   POSICIONAMENTO — descoberta importante testando no navegador real: um popover aberto é
   promovido para a "top layer" do navegador (é isso que dá ESC/clique-fora de graça). Nessa
   camada, `position:absolute` NÃO ancora mais no ancestral `position:relative` mais próximo
   (.novo-wrap) — o containing block vira o viewport inteiro, então `top:100%` de um wrapper
   pequeno não significa nada e o menu aparece fora da tela. `position:relative` em .novo-wrap
   ficou sem efeito prático por isso (mantido só por não atrapalhar).

   A correção real é CSS Anchor Positioning (anchor-name no botão + anchor() aqui), que ancora
   corretamente mesmo dentro da top layer. Nós dois blocos abaixo: um valor-base seguro (usado
   por navegadores sem suporte a Anchor Positioning) e o aprimoramento dentro de @supports. */
.menu-novo {
  position: fixed; top: var(--space-6); left: var(--space-4); margin: 0;
  width: 248px; max-width: calc(100vw - 2 * var(--space-4));
  padding: var(--space-2); flex-direction: column; gap: 2px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.menu-novo:popover-open { display: flex; }

/* Aprimoramento progressivo: só se aplica em navegadores com suporte real a Anchor Positioning
   (hoje Chrome/Edge). Ancora o menu no botão de verdade — abaixo, alinhado à esquerda — com
   troca automática de lado (position-try-fallbacks) se não houver espaço embaixo/à direita. */
@supports (anchor-name: --novo-anchor) {
  .menu-novo {
    position-anchor: --novo-anchor;
    position-try-fallbacks: flip-block, flip-inline;
    top: calc(anchor(--novo-anchor bottom) + 10px);
    left: anchor(--novo-anchor left);
  }
}
.popover-grupo { padding: var(--space-2) var(--space-2) 4px; }
.popover-grupo + .popover-grupo { border-top: 1px solid var(--color-border); margin-top: 2px; padding-top: var(--space-3); }
.popover-grupo-titulo {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-text-muted); margin: 0 0 6px; padding: 0 4px;
}
.popover-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 8px; border-radius: var(--radius);
  color: var(--color-text); font-size: 0.88rem; font-weight: 500; text-decoration: none;
  min-height: 40px;
}
.popover-item:hover { background: var(--color-bg); text-decoration: none; }
.popover-item svg { width: 16px; height: 16px; color: var(--color-text-muted); flex-shrink: 0; }

/* Mobile: o MESMO elemento (mesmo id, mesmo markup) vira um painel preso ao rodapé — só a
   posição/forma mudam via media query, sem duplicar HTML nem criar um segundo componente. */
@media (max-width: 640px) {
  .menu-novo {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0;
    width: 100%; max-width: none;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    box-shadow: var(--shadow-lg);
  }
  .popover-item { min-height: 44px; font-size: 0.92rem; }
}

/* Pop-up "Bom dia" (briefing do primeiro acesso do dia): <dialog> nativo, sem JS — largura
   travada para caber em 375px sem overflow, altura travada com rolagem interna para conteúdo
   longo (vários destaques), e os botões seguem o padrão .action-buttons já usado no resto do
   sistema. */
.briefing-modal {
  width: min(92vw, 480px);
  max-height: min(85vh, 640px);
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.2);
  padding: var(--space-5);
  margin: auto;
}
.briefing-modal::backdrop { background: rgba(16, 24, 40, 0.55); }
.briefing-modal h2 { margin-top: 0; }
.briefing-modal .agenda-lista { margin-top: var(--space-3); }

/* Responsivo */
@media (max-width: 768px) {
  main { padding: var(--space-3); }
  .app-header { padding: var(--space-3); }
  input, select, textarea { max-width: none; }
  .hero { padding: var(--space-4) var(--space-4) var(--space-5); border-radius: var(--radius-lg); }
  .hero-primary-value { font-size: 2.35rem; }
  .hero-sub-kpi .k-value { font-size: 1.15rem; }
  .funnel-stage .f-value { font-size: 1.4rem; }
  .op-node .n-value { font-size: 1.3rem; }
}