/* recalcula — sistema visual (versão 2026-07, redesign "recalcula").
   Fundo neutro claro com gradiente + blobs decorativos, cartões retos com
   sombra suave, tipografia Onest. Verde/vermelho ficam reservados ao
   significado fiscal (ganho/perda, pago/pendente) como regra geral — a
   única exceção deliberada é o par --tint-green-vivid-1/2 (redesign
   "recalcula"/Figma), usado só como tratamento decorativo dos "step rows" de
   ação (fundo em gradiente), nunca para comunicar resultado fiscal.
   Fonte auto-hospedada em static/fonts/ (o CSP do site restringe
   font-src a 'self' — nunca referenciar fonte de CDN externo aqui). */

@font-face {
  font-family: 'Onest';
  src: url("../fonts/Onest-Variable.1c318527f22c.woff2") format('woff2-variations'),
       url("../fonts/Onest-Variable.1c318527f22c.woff2") format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* Material Symbols Outlined — auto-hospedado: a CSP (font-src 'self') bloqueia
   o CDN do Google, então o woff2 vive em static/fonts/. */
@font-face {
  font-family: 'Material Symbols Outlined';
  src: url("../fonts/material-symbols-outlined.eb7252f424a7.woff2") format('woff2-variations'),
       url("../fonts/material-symbols-outlined.eb7252f424a7.woff2") format('woff2');
  font-weight: 100 700;
  font-style: normal;
  /* block (não swap): durante o carregamento o glifo fica invisível em vez de
     mostrar o texto do ligature ("home", "upload"...) — evita o FOUC de texto.
     O woff2 é subsetado (poucos ícones), então carrega quase instantâneo. */
  font-display: block;
}
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

:root {
  --paper: oklch(93.2% 0.006 85);
  --card: oklch(98.7% 0.003 90);
  --card-border: oklch(20% 0.006 90 / 0.07);
  --ink: oklch(23% 0.006 90);
  --ink-soft: oklch(38% 0.006 90);
  --muted: oklch(58% 0.006 90);
  --muted-2: oklch(48% 0.006 90);
  --line: oklch(89% 0.006 90);

  --accent: oklch(22% 0.006 90);         /* = --black-ui: ação primária geral */
  --accent-hover: oklch(30% 0.006 90);
  --accent-ink: #ffffff;
  --accent-soft: oklch(94% 0.006 90);
  --black-ui: oklch(22% 0.006 90);

  --positive: oklch(52% 0.13 150);
  --positive-soft: oklch(93% 0.06 150);
  --positive-hover: oklch(44% 0.13 150);
  --negative: oklch(55% 0.17 22);
  --negative-soft: oklch(93% 0.06 22);
  --negative-hover: oklch(46% 0.17 22);
  --warning: #B8791A;
  --warning-soft: #FBF0DC;
  /* Ação comercial (contratar) — mesma família de matiz 265 já usada em
     --current-blue/--tint-blue-*, só mais saturada/escura para servir de
     fundo sólido de botão com texto branco. */
  --acao-azul: oklch(52% 0.16 265);
  --acao-azul-hover: oklch(44% 0.16 265);

  /* Redesign "recalcula" (Figma) — só 4 tokens genuinamente novos; o resto da
     paleta do Figma já batia com tokens existentes (--lime, --lime-ink,
     --ink, --avatar-blue-*). */
  --tint-green-vivid-1: oklch(81% 0.245 145);  /* step rows: início do gradiente */
  --tint-green-vivid-2: oklch(86% 0.056 192);  /* step rows: fim do gradiente */
  --icon-chip-bg: oklch(36% 0 90);             /* fundo escuro dos ícones em step rows/menu */
  --tint-amber-wash: oklch(83% 0.158 77.6 / 0.1); /* fundo do painel "Impostos a pagar" */

  /* Fundo/superfícies do gradiente e vidro fosco (topbar/sidebar) */
  --bg-topo: oklch(96.5% 0.005 90);
  --bg-base: oklch(93.2% 0.006 85);
  --sidebar-glass: oklch(99% 0.003 90 / 0.5);

  /* Tingimentos de cartão (Jornada = sage, gráficos = azul) */
  --tint-sage-1: oklch(93% 0.05 145);
  --tint-sage-2: oklch(97% 0.02 145);
  --tint-sage-ink: oklch(24% 0.02 145);
  --tint-sage-ink-soft: oklch(42% 0.03 145);
  --tint-blue-1: oklch(91% 0.035 265);
  --tint-blue-2: oklch(96% 0.016 265);
  --tint-blue-ink: oklch(22% 0.02 265);
  --tint-blue-ink-soft: oklch(42% 0.02 265);

  /* Acentos de papel fixo — não trocar o papel de cada um */
  --lime: oklch(92% 0.19 118);            /* progresso/CTA de gamificação — NUNCA "concluído" */
  --lime-ink: oklch(28% 0.05 118);
  --current-blue: oklch(72% 0.10 265);    /* estado "passo atual" */
  --avatar-blue-bg: oklch(90% 0.04 265);
  --avatar-blue-ink: oklch(34% 0.13 265);
  --locked: oklch(80% 0.006 90);          /* ícone 🔒 (mês não contratado) */
  --locked-bg: oklch(94% 0.004 90);

  --radius-lg: 26px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --radius-full: 999px;
  --raio-reto: 0;                    /* cartões de grid (.box/.stat/.darf-stub etc.) */
  --raio-componente-lg: 20px;        /* subpainéis dentro de um cartão */
  --raio-componente-md: 13px;        /* ícones de passo, marca do logo */
  --raio-pill: var(--radius-full);

  --shadow-sm: 0 1px 3px oklch(20% 0.02 50 / 0.05);
  --shadow-md: 0 14px 34px oklch(20% 0.02 50 / 0.05);
  --shadow-lg: 0 24px 60px oklch(20% 0.02 50 / 0.14);
  /* Sombra padrão de TODOS os boxes do site (mesma do Figma "recalcula") e a
     de alta elevação (painéis flutuantes, cartão de destaque da home). */
  --sombra-card: 0 14px 34px rgba(30, 19, 14, 0.05), 0 1px 3px rgba(30, 19, 14, 0.04);
  --sombra-alta: 0 24px 60px rgba(30, 19, 14, 0.14), 0 2px 6px rgba(30, 19, 14, 0.06);
  --sombra-botao: 0 1px 3px oklch(20% 0.02 50 / 0.06);

  /* Zebra das tabelas (Material 3): tinta SUAVE da marca (verde-sage), não
     cinza. Derivada da paleta verde do sistema, bem clara e de baixa croma. */
  --tint-tabela: oklch(96.5% 0.022 165 / 0.6);
  --tint-tabela-hover: oklch(92.5% 0.045 165 / 0.55);

  --peso-titulo-card: 600;
  --tam-titulo-card: 13px;
  --peso-valor-kpi: 700;
  --tam-valor-kpi: 34px;
  --tam-valor-kpi-decimal: 20px;

  --font-display: 'Onest', ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  --font-body: 'Onest', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Sem fonte monoespaçada no produto: rótulos/crumbs/badges usam a
     mesma Onest do resto (só uso técnico de verdade justificaria mono). */
  --font-mono: 'Onest', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Espaçamento — escala única, múltiplos de 4. Todo gap/padding/margin do
     código usa um destes tokens; nenhum valor solto (ver DESIGN_SYSTEM.md). */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 20px;
  --esp-6: 24px;
  --esp-8: 32px;
  --esp-10: 40px;

  /* Tipografia — 7 tamanhos cobrem toda a UI (ver DESIGN_SYSTEM.md para o
     papel de cada um). Line-heights: apertado para títulos, confortável
     para texto corrido/parágrafos de diálogo. */
  --texto-xs: 11px;
  --texto-sm: 12px;
  --texto-base: 14px;
  --texto-md: 16px;
  --texto-lg: 20px;
  --texto-xl: 26px;
  --texto-hero: 38px;
  --lh-titulo: 1.2;
  --lh-texto: 1.55;

  /* Controles — botões, selects e inputs na mesma linha ficam com a MESMA
     altura e a mesma espessura de borda, sem exceção. */
  --altura-controle: 38px;
  --altura-controle-pq: 30px;
  --borda: 1.5px;
}

* { box-sizing: border-box; }

/* [hidden] é estado semântico "não renderizado" — sempre vence qualquer
   `display` de componente (ex.: .btn/.modal-fundo definem display:flex ou
   inline-flex com a MESMA especificidade de um seletor [hidden] solto, e
   nesse empate o elemento continuava aparecendo). Único !important
   intencional do projeto: aqui a regra é sempre "hidden é hidden". */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--ink-soft);
  background: radial-gradient(120% 90% at 50% 0%, var(--bg-topo), var(--bg-base) 75%);
  background-attachment: fixed;
}

/* Fundo animado (blob único, orgânico) — atrás de todo o conteúdo, em toda
   página (ver templates/base.html, sempre renderizado logo após <body>).
   4 animações independentes, com durações "primas" entre si (23s/37s/29s/19s)
   somadas no mesmo elemento — a sobreposição de ciclos que nunca coincidem
   exatamente é o que faz o movimento parecer orgânico/vivo em vez de um
   loop mecânico óbvio: forma (amebaForma), deslocamento (amebaMove),
   pulso de tamanho (amebaPulso, até ~150%) e leve variação de opacidade
   entre 80% e 100% (amebaOpacidade). */
.ir-bg-blobs { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ir-blob {
  position: absolute;
  top: -15%; left: -10%;
  width: 90%; height: 90%;
  background: radial-gradient(circle, oklch(87% 0.025 220) 0%, transparent 65%);
  filter: blur(58px);
  opacity: .9;
  border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
}
@media (prefers-reduced-motion: no-preference) {
  .ir-blob {
    animation:
      amebaForma 23s ease-in-out infinite,
      amebaMove 37s ease-in-out infinite,
      amebaPulso 29s ease-in-out infinite,
      amebaOpacidade 19s ease-in-out infinite;
  }
}
@keyframes amebaForma {
  0%   { border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; }
  20%  { border-radius: 60% 40% 30% 70% / 55% 65% 35% 45%; }
  40%  { border-radius: 35% 65% 55% 45% / 65% 35% 65% 35%; }
  60%  { border-radius: 65% 35% 45% 55% / 40% 60% 40% 60%; }
  80%  { border-radius: 48% 52% 70% 30% / 30% 55% 45% 70%; }
  100% { border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; }
}
@keyframes amebaMove {
  0%   { translate: -10% -10%; }
  18%  { translate: 40% -22%; }
  34%  { translate: 55% 12%; }
  52%  { translate: 22% 48%; }
  70%  { translate: 58% 55%; }
  88%  { translate: 6% 16%; }
  100% { translate: -10% -10%; }
}
@keyframes amebaPulso {
  0%   { scale: 1; }
  25%  { scale: 1.28; }
  50%  { scale: 1.5; }
  75%  { scale: 1.15; }
  100% { scale: 1; }
}
@keyframes amebaOpacidade {
  0%   { opacity: .9; }
  22%  { opacity: 1; }
  41%  { opacity: .82; }
  63%  { opacity: .97; }
  85%  { opacity: .8; }
  100% { opacity: .9; }
}
.app { position: relative; z-index: 1; }
.center-page, .auth-box { position: relative; z-index: 1; }

a { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
  border-color: var(--accent);
}

h1, h2, h3, h4 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.01em;
}
h1 { font-size: 26px; }
h2 { font-size: 17px; }
h3 {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin: 22px 0 10px;
}
main h3:first-child { margin-top: 0; }
/* Carteira: cada módulo é <h3> + <div.table-wrap> como irmãos diretos do main
   (flex, gap:32px). O negative margin cancela o gap entre o título e a SUA
   tabela — a tabela cola no título (só o margin-bottom do h3 os separa), sem
   afetar o espaçamento entre módulos. */
.pagina-carteira > h3 + .table-wrap { margin-top: -32px; }
p { margin: 0 0 10px; line-height: 1.55; }

@media (prefers-reduced-motion: no-preference) {
  a, button, .btn, .card-link, input, select, textarea {
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
  }
}

/* ---------- Shell (app logada) ---------- */
.app {
  display: grid;
  grid-template-columns: 80px 1fr;
  grid-template-rows: auto 1fr;
  gap: 18px;
  padding: 18px;
  min-height: 100vh;
  align-items: start;
  max-width: 1440px;
  margin: 0 auto;
}

.topbar {
  grid-column: 1 / 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Sem fundo (Figma "recalcula"): topbar e sidebar flutuam direto sobre o
     cinza da página — só o main tem cartão branco. Padding-esquerdo de
     98px = coluna da sidebar (80) + gap do grid (18): alinha a borda
     esquerda da logo com a borda esquerda do cartão branco do main.
     Padding lateral EXTRA de 24px em cada lado (98+24 na esquerda, 0+24 na
     direita), pra respiro do conteúdo da topbar. */
  background: none;
  padding: 24px 24px 6px 122px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  color: var(--ink);
  text-decoration: none;
}
.brand .mark {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* O ícone da marca (recalcula.ai) já é um quadrado arredondado com fundo
   próprio (navy), então o .mark não precisa mais de fundo/círculo. */
.brand .mark img { width: 100%; height: 100%; display: block; }
.brand .mark svg { width: 26px; height: 26px; }
/* ".ai" verde da marca (recalcula.ai) — usado no topbar e nas telas de acesso. */
.brand-ai { color: #3ee6a8; }
.user-area { display: flex; align-items: center; gap: 32px; }

/* Perfil: avatar + nome vira o gatilho de um dropdown em hover/clique
   (Minha conta / Configurações / Atividade e alertas) — Sair continua
   como ícone separado (mesma estrutura do Figma). */
.profile-trigger {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}
.profile-trigger:hover .avatar { background: var(--avatar-blue-ink); color: var(--avatar-blue-bg); }
.user-area form { display: inline-flex; }
.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
}
.icon-btn:hover { background: var(--paper); border-color: var(--muted); color: var(--ink); }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn .material-symbols-outlined {
  font-size: 20px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.modo-teste-botao {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--radius-full);
  border: 1.5px dashed var(--line);
  background: var(--card);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  white-space: nowrap;
}
.modo-teste-botao .marcador {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
  flex-shrink: 0;
}
.modo-teste-botao:hover { border-color: var(--muted); color: var(--ink); }
.modo-teste-botao.ativo {
  border-style: solid;
  border-color: var(--warning);
  background: var(--warning-soft);
  color: var(--warning);
}
.modo-teste-botao.ativo .marcador { background: var(--warning); }
.avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  background: var(--avatar-blue-bg);
  color: var(--avatar-blue-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
  text-transform: uppercase;
  flex-shrink: 0;
}
.badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  color: var(--warning);
  background: var(--warning-soft);
  margin-right: 4px;
  white-space: nowrap;
}

.sidebar {
  background: none;
  padding: 32px 8px;
  /* Ocupa a coluna 1 nas DUAS linhas do grid (topbar + main), então começa lá
     em cima e pode preencher a viewport inteira — assim "Suporte" (empurrado
     pelo flex:1 do grupo de topo) fica sempre no rodapé da tela, visível.
     Rola junto com a página (sticky). O modo é definido por sidebar-sticky.js:
     - cabe na tela  -> .sidebar-cabe: preenche a viewport (top a bottom).
     - maior que a tela -> .sidebar-alto: altura natural, top negativo
       calculado (rola até "Suporte" ficar visível com 40px abaixo). */
  grid-row: 1 / 3;
  grid-column: 1;
  position: sticky;
  top: 0;
  /* margin negativo cancela o padding-top de 18px do .app: a caixa do menu
     encosta no topo REAL da viewport (0), então a altura 100vh preenche a tela
     inteira e o primeiro item cai exatamente a 138px do topo via padding-top. */
  margin-top: -18px;
  align-self: start;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 18px = padding do .app em cima e embaixo — o menu preenche de borda a borda
   da viewport com a mesma folga do restante do layout. */
/* Altura 100% da tela; padding-top 138px = distância do topo ao 1º item. O
   grupo de topo (flex:1) empurra "Suporte" pro rodapé. */
.sidebar.sidebar-cabe { height: 100vh; top: 0; padding-top: 138px; }
.sidebar.sidebar-alto { height: auto; top: var(--sidebar-stick-top, 0px); padding-top: 138px; }
/* 5 ícones (menu simplificado) — grupo de topo cresce pra empurrar
   "Suporte" pro rodapé da sidebar, igual ao Figma. O <nav> é um flex
   coluna de verdade (não display:contents) porque sidebar-rolagem.js
   aplica transform nele — transform não tem efeito em display:contents. */
.sidebar nav {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.sidebar .menu-grupo-topo {
  /* basis auto + shrink 0: o grupo cresce pra empurrar "Suporte" pro
     rodapé, mas NUNCA encolhe abaixo do próprio conteúdo — em janela
     baixa o Suporte para logo abaixo do último item (e a sidebar rola),
     em vez de subir por cima dos itens. */
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}
.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-body);
}
.menu-item .menu-item-icone {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #191919;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.menu-item .menu-item-icone svg { width: 32px; height: 32px; }
.menu-item .menu-item-icone .material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-size: 28px;
  line-height: 1;
  color: #fff;
  /* Outline por padrão (FILL 0); preenchido no ativo/hover abaixo. */
  font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
}
/* Ativo E hover: mesma cor — chip lime, ícone preto preenchido. */
.menu-item.ativo .menu-item-icone,
.menu-item:hover .menu-item-icone { background: #69EF87; color: #000; }
.menu-item.ativo .menu-item-icone .material-symbols-outlined,
.menu-item:hover .menu-item-icone .material-symbols-outlined {
  color: #000;
  font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 0, 'opsz' 24;
}
.menu-item .menu-item-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink-soft);
  text-align: center;
}
.menu-item.ativo .menu-item-label { color: var(--ink); font-weight: 700; }
.menu-item:hover .menu-item-label { color: var(--ink); }

main {
  /* Coluna 2, linha 2 explícitas: a sidebar agora ocupa a coluna 1 nas duas
     linhas (grid-row 1/3); sem fixar main aqui, o auto-placement o empurraria
     pra uma linha nova (a topbar perderia o lugar na linha 1). */
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 32px; /* distância padrão entre blocos: sempre 32px */
  min-width: 0;
  /* Cartão branco flutuante (Figma "recalcula") — a única superfície com
     fundo; topbar e sidebar flutuam direto no cinza da página. */
  background: #fff;
  border-radius: 30px;
  box-shadow: 0 0 20px oklch(0% 0 0 / 0.1);
  padding: 48px;
}
/* Páginas sem cartão (ex.: Adicionar notas): conteúdo direto no cinza. */
main.main-transparente { background: none; box-shadow: none; }

/* Campo de formulário em erro (ex.: login que falhou) */
input.campo-erro, select.campo-erro, textarea.campo-erro {
  border-color: var(--negative) !important;
  box-shadow: 0 0 0 3px var(--negative-soft);
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.page-head .crumb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.page-head .crumb a { color: inherit; text-decoration: none; }
.page-head .crumb a:hover { color: var(--ink); text-decoration: underline; }
.page-head h1 { margin: 0; }

/* Atalho em cartão (ex.: "Como conseguir notas de corretagem?" no topo
   direito de Adicionar notas) — mesmo vocabulário dos boxes da home. */
.card-atalho {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  box-shadow: var(--sombra-card);
  border-radius: var(--raio-reto);
  padding: 23px 18px; /* +~33% de altura vs. os 14px anteriores */
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
}
.card-atalho .seta {
  background: var(--lime); color: var(--lime-ink);
  border-radius: var(--radius-full);
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.card-atalho:hover .seta { background: var(--lime-ink); color: var(--lime); }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Cartões e grids ---------- */
.box {
  background: #fff;
  border-radius: var(--raio-reto);
  box-shadow: var(--sombra-card);
  padding: 32px;
}
.box.dashed {
  border: 1.5px dashed var(--line);
  box-shadow: none;
  color: var(--muted);
  text-align: center;
  background: var(--card);
}
.box-grid { display: grid; gap: 32px; }
.box-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.box-grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.box-grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.stat {
  background: #fff;
  border-radius: var(--raio-reto);
  box-shadow: var(--sombra-card);
  padding: 32px;
}
.stat .label {
  font-family: var(--font-body);
  font-weight: var(--peso-titulo-card);
  font-size: var(--tam-titulo-card);
  letter-spacing: .01em;
  color: var(--muted-2);
}
.stat .value {
  font-family: var(--font-display);
  font-size: var(--tam-valor-kpi);
  font-weight: var(--peso-valor-kpi);
  color: var(--ink);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.stat .value.neg { color: var(--negative); }
.stat .value.pos { color: var(--positive); }
.stat .meta { font-size: 11px; color: var(--muted); margin: 4px 0 0; }

/* Sub-resumo secundário (ex.: meses abertos/fechados) — menos destaque que
   os .stat principais: só texto corrido, sem cartão próprio. */
.resumo-secundario {
  display: flex;
  gap: var(--esp-5);
  flex-wrap: wrap;
  margin-top: var(--esp-4);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
}
.resumo-secundario strong { color: var(--ink-soft); font-variant-numeric: tabular-nums; }


/* Selo de DARF — elemento de assinatura da interface: um canhoto de
   bilhete, com perfuração e recortes, para o número mais importante da
   tela (o imposto do mês). */
.darf-stub {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: var(--raio-reto);
  box-shadow: var(--sombra-card);
  overflow: hidden;
}
.darf-stub .principal {
  flex: 1;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
}
.darf-stub .principal .label {
  font-family: var(--font-body);
  font-weight: var(--peso-titulo-card);
  font-size: var(--tam-titulo-card);
  letter-spacing: .01em;
  color: var(--muted-2);
}
.darf-stub .principal .valor {
  font-family: var(--font-display);
  font-size: var(--tam-valor-kpi);
  font-weight: var(--peso-valor-kpi);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.darf-stub .principal .valor.pos { color: var(--positive); }
.darf-stub .principal .valor.neg { color: var(--negative); }
.darf-stub .principal .meta { font-size: 13px; color: var(--muted); margin: 0; }
.darf-stub .selo {
  position: relative;
  flex-shrink: 0;
  width: 168px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  background: var(--paper);
  border-left: 2px dashed var(--line);
}
.darf-stub .selo::before,
.darf-stub .selo::after {
  content: "";
  position: absolute;
  left: -12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--paper);
}
.darf-stub .selo::before { top: -12px; }
.darf-stub .selo::after { bottom: -12px; }
.darf-stub .selo .codigo {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: .04em;
}

/* Componente "Sua jornada" (Início) — cartão único de gamificação (3
   passos do mês corrente + anel de progresso), substituindo os antigos
   cartões separados por passo. */
.jornada-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--tint-sage-1), var(--tint-sage-2));
  border-radius: var(--raio-reto);
  box-shadow: var(--sombra-card);
  padding: 32px;
  margin-bottom: 22px;
}
.jornada-card--contorno { border: 6px solid var(--ink); }
.jornada-card__blob {
  position: absolute; top: -60px; right: -40px; width: 280px; height: 280px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 42% 40%, oklch(72% 0.15 40 / 0.4), transparent 66%);
  filter: blur(4px);
}
.jornada-card__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.55fr 1fr; gap: 28px; align-items: stretch;
}
@media (max-width: 860px) { .jornada-card__grid { grid-template-columns: 1fr; } }

.jornada-eyebrow-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.jornada-eyebrow { font: var(--peso-titulo-card) var(--tam-titulo-card)/1 var(--font-body); letter-spacing: .01em; color: var(--tint-sage-ink-soft); }
.jornada-count-badge { font: 700 12px/1 var(--font-body); color: oklch(28% 0.02 145); background: var(--lime); padding: 5px 11px; border-radius: var(--raio-pill); }
.jornada-heading { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.12; margin: 0 0 20px; letter-spacing: -.02em; color: var(--ink); }

.jornada-steps { display: flex; flex-direction: column; gap: 9px; }
.jornada-step {
  display: flex; align-items: center; gap: 15px;
  padding: 14px 16px; border-radius: var(--raio-componente-lg);
  background: oklch(99% 0.004 145 / 0.68);
}
.jornada-step-icon {
  width: 42px; height: 42px; border-radius: var(--raio-componente-md);
  display: flex; align-items: center; justify-content: center; flex: none;
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
}
.jornada-step-icon--done    { background: var(--positive); color: #fff; font-size: 18px; }
.jornada-step-icon--current { background: var(--black-ui); color: #fff; }
.jornada-step-icon--locked  { background: var(--locked-bg); color: var(--locked); font-weight: 500; }

.jornada-step-body { flex: 1; min-width: 0; }
.jornada-step-label { font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--ink); }
.jornada-step-desc { font-family: var(--font-body); font-size: 13px; line-height: 1.4; color: var(--muted); margin-top: 2px; }

.jornada-step-cta {
  border: none; background: var(--lime); color: var(--lime-ink);
  font-family: var(--font-body); font-weight: 600; font-size: 13.5px;
  padding: 12px 18px; border-radius: var(--raio-pill);
  cursor: pointer; flex: none; white-space: nowrap; text-decoration: none;
  display: inline-flex; align-items: center;
}
.jornada-step-status--done { font-family: var(--font-body); font-weight: 600; font-size: 12.5px; color: var(--positive); flex: none; }
.jornada-step-status--locked { font-family: var(--font-body); font-weight: 500; font-size: 12.5px; color: oklch(68% 0.006 90); flex: none; }
.jornada-step-status--dropzone { font-family: var(--font-body); font-weight: 500; font-size: 12.5px; color: var(--tint-sage-ink-soft); flex: none; }

.jornada-progress-panel {
  background: oklch(99% 0.004 145 / 0.62); border-radius: var(--raio-componente-lg);
  padding: 26px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center;
}
.jornada-ring-wrap { position: relative; width: 150px; height: 150px; }
.jornada-ring-value { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.jornada-ring-pct { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.jornada-ring-label { font-family: var(--font-body); font-weight: 500; font-size: 11px; color: var(--tint-sage-ink-soft); margin-top: 5px; }
.jornada-ring-wrap circle:last-child { transition: stroke-dashoffset .4s ease; }

.jornada-remaining { font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 1.4; margin-top: 20px; color: var(--tint-sage-ink); }
.jornada-streak-badge {
  font-family: var(--font-body); font-weight: 600; font-size: 12px; color: var(--lime-ink); background: var(--lime);
  padding: 7px 13px; border-radius: var(--raio-pill); margin-top: 12px; display: inline-block;
}
.jornada-award-icon {
  width: 44px; height: 44px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  margin-top: 20px; box-shadow: 0 2px 8px oklch(20% 0.02 50 / 0.12);
}
.jornada-award-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.3; margin-top: 12px; color: var(--tint-sage-ink); }

/* Passo 1 (Enviar notas) é a zona de arrastar-e-soltar original
   (#dropzone-home, ver upload-relay.js) — só reskinada com o visual de
   linha da Jornada. */
.jornada-step.dropzone-passo { cursor: pointer; outline: none; }
.jornada-step.dropzone-passo:focus-visible { box-shadow: 0 0 0 3px var(--current-blue); }
.jornada-step.dropzone-passo.dragover {
  background: var(--lime);
  outline: 2px dashed var(--lime-ink);
  outline-offset: -6px;
}
.jornada-step.dropzone-passo.dragover .jornada-step-icon--current,
.jornada-step.dropzone-passo.dragover .jornada-step-icon--done { background: var(--lime-ink); }
@media (prefers-reduced-motion: no-preference) {
  .jornada-step.dropzone-passo { transition: background-color .15s ease; }
}

/* Estado "sem movimento" (mês de referência declarado sem operações) —
   os 3 passos ficam neutros, nem "feito" nem "bloqueado". */
.jornada-step-icon--neutro { background: var(--locked-bg); color: var(--muted); font-weight: 500; }
.jornada-step-status--neutro { font-family: var(--font-body); font-weight: 500; font-size: 12.5px; color: var(--muted); flex: none; }

.jornada-link-discreto {
  border: none; background: none; padding: 8px 4px; margin-top: 2px;
  font-family: var(--font-body); font-weight: 600; font-size: 12.5px;
  color: var(--tint-sage-ink-soft); text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer; align-self: flex-start;
}
.jornada-link-discreto:hover { color: var(--tint-sage-ink); }
.jornada-link-discreto:focus-visible { outline: 2px solid var(--current-blue); outline-offset: 2px; }
.jornada-sem-movimento-form { display: flex; }

.jornada-dica-proximo-ciclo {
  font-family: var(--font-body); font-size: 12.5px; line-height: 1.5;
  color: var(--tint-sage-ink-soft); margin: 14px 0 0; max-width: 220px;
}

/* ---------- Redesign "recalcula" (Início): hero de boas-vindas + dropzone
   gigante animada + cartões "Ações pendentes"/"Situação das notas"/
   "Carteira atual" em step-rows com gradiente verde vívido. ---------- */
/* Hero: welcome em 60% da largura do main body; o pulsar (500px) fica
   absoluto no canto direito, transbordando 100px abaixo do hero — é isso
   (382 + 18 de gap do main = 400) que deixa os cartões seguintes tampando
   ~1/5 dos 500px dele, sem margin negativa. */
.recalcula-hero {
  position: relative;
  min-height: 382px;
  margin-bottom: 0;
}
.recalcula-hero-texto {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px; /* Figma 22:174: 16px entre a saudação e o bloco título+sub */
}
.recalcula-hero-texto p.saudacao {
  font-family: var(--font-body); font-weight: 300; font-size: 24px;
  color: var(--ink); margin: 0;
}
.recalcula-hero-texto h1 {
  font-family: var(--font-display); font-weight: 800; font-size: 26px;
  color: var(--ink); letter-spacing: -.01em; margin: 0;
}
.recalcula-hero-texto .sub {
  font-family: var(--font-body); font-weight: 300; font-size: 42px;
  color: var(--muted); letter-spacing: -.01em; margin: 0;
}

/* Dropzone-pulsar: elipse com gradiente radial (lime → verde-claro →
   transparente, mesmos stops do Figma), 500×500, pulsando contínua e
   lentamente em 3D — como uma estrela liberando energia do núcleo: o
   núcleo respira (scale), o corpo deriva em rotateX/rotateY (durações
   primas entre si, 7s/13s, pra nunca repetir o ciclo exato — mesmo truque
   do .ir-blob) e um halo (::before) se expande e desvanece a partir do
   centro. Só transform/opacity animam. Ao soltar um arquivo,
   dropzone-hero.js desenha ondas concêntricas no canvas por cima, como se
   algo caísse na água (mesmas cores da elipse, sem introduzir cor nova).
   z-index:0 cria um contexto de empilhamento próprio: os cartões abaixo
   podem subir por cima do pulsar (tampando ~1/5 dele) sem que o rótulo
   (z:2 interno) vaze por cima deles. */
.dropzone-pulsar {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  perspective: 700px;
}
.dropzone-pulsar:focus-visible { box-shadow: 0 0 0 4px var(--current-blue); border-radius: 50%; }
.dropzone-pulsar__blob {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* Borda dissolvida: o gradiente termina em transparente ANTES do limite
     do círculo (68%) e um blur derrete o que sobra — sem aro visível. */
  /* núcleo no centro EXATO — aros (::before/::after) e ondas do canvas
     também partem de 50%/50%: tudo pulsa a partir do mesmo ponto. */
  background: radial-gradient(circle at 50% 50%,
    var(--lime) 0%,
    oklch(90% 0.15 145 / 0.5) 34%,
    oklch(92% 0.08 165 / 0.22) 52%,
    oklch(93% 0.05 200 / 0) 68%);
  filter: blur(18px);
  transform-origin: center;
}
/* Dois aros de energia emitidos do centro pra borda — ciclo de 7s casado
   com o do núcleo: o núcleo comprime (até ~40%), expande (~55%), e é na
   expansão que os aros "nascem" e viajam pra fora, desvanecendo. O segundo
   aro (::after) parte meio ciclo depois, pra emissão contínua. */
.dropzone-pulsar::before,
.dropzone-pulsar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle,
    oklch(92% 0.19 118 / 0) 46%,
    oklch(92% 0.19 118 / 0.55) 56%,
    oklch(90% 0.15 145 / 0.25) 62%,
    oklch(92% 0.19 118 / 0) 70%);
  filter: blur(6px);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  /* `scale` e `transform` são propriedades independentes — dá pra rodar o
     pulso do núcleo e a deriva 3D como animações separadas sem uma
     sobrescrever a outra (duas animações no MESMO `transform` não compõem:
     a última vence). */
  .dropzone-pulsar__blob {
    animation:
      pulsar-nucleo 7s ease-in-out infinite,
      pulsar-deriva-3d 13s ease-in-out infinite;
  }
  .dropzone-pulsar::before { animation: pulsar-aro 7s ease-out infinite; }
  .dropzone-pulsar::after { animation: pulsar-aro 7s ease-out 3.5s infinite; }
}
@keyframes pulsar-nucleo {
  0%   { scale: 1; }
  40%  { scale: 0.93; }  /* compressão */
  58%  { scale: 1.07; }  /* expansão — momento em que o aro é emitido */
  100% { scale: 1; }
}
@keyframes pulsar-deriva-3d {
  0%, 100% { transform: rotateX(0deg) rotateY(0deg); }
  30%      { transform: rotateX(7deg) rotateY(-5deg); }
  62%      { transform: rotateX(-6deg) rotateY(6deg); }
}
@keyframes pulsar-aro {
  0%, 42% { transform: scale(0.3); opacity: 0; }
  55%     { opacity: 0.9; }
  78%     { opacity: 0.35; }
  100%    { transform: scale(1.3); opacity: 0; }
}
.dropzone-pulsar.dragover .dropzone-pulsar__blob { animation-play-state: paused; scale: 1.08; }

/* Energização (arquivos soltos no pulsar): o núcleo reage como se
   recebesse uma massa com mais energia — vibra em amplitudes decrescentes
   e se aproxima do usuário (scale maior + leve rotateX de "inclinação"),
   voltando lentamente ao pulso normal; as ondas de água violentas são
   desenhadas no canvas (dropzone-hero.js). A deriva 3D contínua segue
   rodando em paralelo (propriedades scale/transform independentes). */
.dropzone-pulsar.energizado .dropzone-pulsar__blob {
  animation:
    pulsar-energizado 4.2s cubic-bezier(0.25, 0.9, 0.35, 1) 1,
    pulsar-deriva-3d 13s ease-in-out infinite;
  filter: blur(14px) saturate(1.35) brightness(1.06);
}
.dropzone-pulsar.energizado::before,
.dropzone-pulsar.energizado::after {
  /* frequência inalterada — só a amplitude sobe: banda do aro mais grossa
     e mais opaca enquanto durar o surto */
  background: radial-gradient(circle,
    oklch(92% 0.19 118 / 0) 40%,
    oklch(92% 0.19 118 / 0.85) 54%,
    oklch(90% 0.15 145 / 0.45) 63%,
    oklch(92% 0.19 118 / 0) 74%);
  filter: blur(4px);
}
@keyframes pulsar-energizado {
  0%   { scale: 1;    opacity: 1; }
  6%   { scale: 1.22; opacity: 1; }  /* impacto: massa entra no núcleo */
  13%  { scale: 1.06; }
  22%  { scale: 1.17; }
  32%  { scale: 1.05; }
  44%  { scale: 1.12; }
  58%  { scale: 1.04; }
  74%  { scale: 1.08; }
  100% { scale: 1.02; opacity: 1; }
}

/* Na página "Adicionar notas" o pulsar vive no fluxo normal (não absoluto
   como no hero da home), centralizado na aba de envio. */
.envio-pulsar-wrap { display: flex; justify-content: center; padding: 12px 0 24px; margin-top: -80px; }
.envio-pulsar-wrap .dropzone-pulsar { position: relative; top: auto; right: auto; }
.dropzone-pulsar__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.dropzone-pulsar__label {
  position: relative; z-index: 2;
  font-family: var(--font-display); font-weight: 700; font-size: 21px;
  letter-spacing: -.02em; color: var(--ink); text-align: center;
  max-width: 260px; pointer-events: none;
}
.dropzone-pulsar__sublabel {
  display: block;
  margin-top: 8px;
  font-family: var(--font-body); font-weight: 400; font-size: 13px;
  letter-spacing: 0; color: var(--muted);
}

/* Telas médias: pulsar menor pra não invadir o texto de 60%, mantendo a
   proporção de ~1/5 tampado pelos cartões. */
@media (max-width: 1280px) and (min-width: 1025px) {
  .dropzone-pulsar { width: 400px; height: 400px; }
  .recalcula-hero { min-height: 302px; }
}

/* Cartões-duo "Ações pendentes" + "Sua jornada" lado a lado — o pulsar
   (absoluto no hero) transborda 100px pra dentro desta faixa, então os
   cartões tampam ~1/5 da altura dele (ver .recalcula-hero). */
.dashboard-duo {
  display: flex; gap: 32px; align-items: stretch; min-width: 0;
  position: relative;
  z-index: 1;
}
/* Usuário sem nenhuma nota: os dois cartões trocam de lugar E de fração
   do grid — "Sua jornada" assume o slot largo (1.7) à esquerda e o módulo
   de vídeo de boas-vindas (que substitui "Ações pendentes" nesse estado)
   o estreito (1.1) à direita. */
.dashboard-duo.invertido { flex-direction: row-reverse; }
.dashboard-duo.invertido .acoes-pendentes-card,
.dashboard-duo.invertido .video-boasvindas-card { flex: 1.1; }
.dashboard-duo.invertido .sua-jornada-card { flex: 1.7; }

/* Layout do Início: welcome em cima; abaixo, container 2 colunas — pulsar à
   ESQUERDA e sidebar (Ações pendentes + Sua jornada empilhados) à DIREITA.
   Proporção 1.7 : 1.1 mantém a coluna direita com a MESMA largura que o
   módulo "Sua jornada" tinha no layout antigo. */
.home-layout {
  display: flex;
  gap: 32px;
  align-items: stretch;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.home-pulsar-col {
  flex: 1.7;
  min-width: 0;
  /* âncora do pulsar (posicionado absoluto): assim a coluna NÃO herda os 500px
     do pulsar — o container fica da altura do "Sua jornada", e a distância até
     "Situação das notas" fica os 32px do gap do main. */
  position: relative;
}
.home-pulsar-col .dropzone-pulsar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.home-sidebar {
  flex: 1.1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
/* Cartões da sidebar em altura natural (não esticam na coluna) — precisa de
   especificidade >= a de .acoes-pendentes-card/.sua-jornada-card (flex:1.7/1.1). */
.home-sidebar > .acoes-pendentes-card,
.home-sidebar > .sua-jornada-card,
.home-sidebar > .video-boasvindas-card { flex: 0 0 auto; }

/* Módulo dedicado ao vídeo de instruções — substitui "Ações pendentes"
   por completo quando o usuário não tem nenhuma pendência E nunca enviou
   uma nota (ver templates/core/dashboard.html); nos demais casos "Ações
   pendentes" é exibido normalmente, sem vídeo embutido. */
.video-boasvindas-card {
  background: #fff;
  box-shadow: var(--sombra-alta);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1.7;
  min-width: 0;
}
.video-instrucoes { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.video-instrucoes iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--raio-componente-lg);
  background: var(--locked-bg);
}

/* "Sua jornada" (Figma 21:144) — componente próprio do redesign, separado
   do .jornada-card antigo (que o Início 2 ainda usa): cantos retos, sem
   anel de progresso; linhas de 72px com fundo branco translúcido, ícone
   de 24px sem chip e CTA lime compacto. */
/* "Sua jornada" (Figma 22:186) — cartão branco com sombra; as linhas usam o
   mesmo estilo "vivido" (gradiente verde + chip escuro do ícone) que era do
   "Ações pendentes" (que saiu da home). */
.sua-jornada-card {
  background: #fff;
  box-shadow: var(--sombra-card);
  border-radius: var(--raio-reto);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1.1;
  min-width: 0;
}
/* Eyebrow + título agrupados: 12px entre eles (Figma 56:512). */
.sua-jornada-cabecalho { display: flex; flex-direction: column; gap: 12px; }
.sua-jornada-titulo {
  font-family: var(--font-body); font-weight: 700; font-size: 21px;
  letter-spacing: -.02em; color: var(--ink); margin: 0;
}
.sua-jornada-titulo .leve { font-weight: 300; }
.sua-jornada-passos { display: flex; flex-direction: column; gap: 16px; }
.sua-jornada-row {
  display: flex; align-items: center; gap: 15px;
  min-height: 74px; padding: 10px 16px;
  border-radius: var(--raio-componente-lg);
  background: linear-gradient(90deg, oklch(81% 0.245 145 / 0.68), oklch(86% 0.056 192 / 0.68));
}
.sua-jornada-row .icone {
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--icon-chip-bg); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sua-jornada-row .icone svg { width: 22px; height: 22px; display: block; }
.sua-jornada-row .rotulo {
  flex: 1; min-width: 0;
  font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--ink);
}
.sua-jornada-row .cta {
  background: var(--lime); color: var(--lime-ink);
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  padding: 12px 18px; border-radius: var(--radius-full);
  text-decoration: none; flex-shrink: 0; white-space: nowrap;
}
/* Status legível sobre o fundo verde da linha. */
.sua-jornada-row .jornada-step-status--done { color: var(--lime-ink); }
.sua-jornada-row .jornada-step-status--locked,
.sua-jornada-row .jornada-step-status--neutro { color: oklch(40% 0.03 150); }
.acoes-pendentes-card {
  /* Sem fundo nem sombra (a pedido): o módulo "Ações pendentes" flutua direto
     sobre o cartão branco do main, sem virar um card próprio. */
  background: none;
  box-shadow: none;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1.7;
  min-width: 0;
}
/* margin-top:auto empurra os itens para o rodapé do card (o card estica pra
   igualar a altura do "Sua jornada" ao lado). */
.acoes-pendentes-lista { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.acoes-pendentes-card .jornada-eyebrow-row { margin: 0; }
.acoes-pendentes-heading {
  font-family: var(--font-display); font-weight: 700; font-size: 21px;
  letter-spacing: -.02em; color: var(--ink); margin: 0;
}
.acoes-pendentes-heading .leve { font-family: var(--font-body); font-weight: 400; }
.step-row-vivido {
  display: flex; align-items: center; gap: 15px;
  padding: 10px 16px;
  border-radius: var(--raio-componente-lg);
  background: linear-gradient(90deg, oklch(81% 0.245 145 / 0.68), oklch(86% 0.056 192 / 0.68));
  text-decoration: none;
}
.step-row-vivido .icone {
  width: 36px; height: 36px; border-radius: 9px;
  background: var(--icon-chip-bg); color: var(--lime);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.step-row-vivido .icone svg { width: 22px; height: 22px; }
.step-row-vivido .texto {
  flex: 1; min-width: 0;
  font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--ink);
}
.step-row-vivido .cta {
  background: var(--lime); color: var(--lime-ink);
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  padding: 12px 18px; border-radius: var(--radius-full);
  text-decoration: none; flex-shrink: 0; white-space: nowrap;
}
.acoes-pendentes-vazio { font-family: var(--font-body); font-size: 13.5px; color: var(--muted); margin: 0; }
/* Sem pendências: thumbs-up grande (120px) em cinza claro, centralizado */
.pendencias-vazio-otimo {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px 0 12px;
  text-align: center;
}
.pendencias-vazio-otimo .icone-otimo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 3px solid var(--line);
  color: var(--locked);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pendencias-vazio-otimo .icone-otimo svg { width: 56px; height: 56px; }
.pendencias-vazio-otimo p {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--muted);
}
/* "Ver tudo" agora vive na eyebrow row, ao lado do badge (Figma 21:100):
   12px, bold, sublinhado, tracking apertado. */
.acoes-pendentes-ver-tudo {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: -0.24px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* Módulo "Situação das notas": cartão branco com sombra padrão. */
.situacao-notas-card {
  background: #fff;
  box-shadow: var(--sombra-card);
  border-radius: var(--raio-reto);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* Situação das notas: 3 sub-painéis (2 neutros + 1 âmbar p/ impostos) */
.situacao-notas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 0; }
@media (max-width: 860px) { .situacao-notas-grid { grid-template-columns: 1fr; } }
.situacao-notas-painel {
  /* min-height (não height fixo): o grid estica todos os painéis à altura do
     mais alto, então nenhum conteúdo transborda e os botões (margin-top:auto)
     alinham na mesma linha em todos os cards. */
  min-height: 250px;
  padding: 32px;
  display: flex; flex-direction: column; gap: 12px;
}
.situacao-notas-painel.neutro { background: linear-gradient(90deg, oklch(95.8% 0 90 / .68), oklch(95.2% 0.017 192 / .68)); }
/* (o alinhamento do CTA ao rodapé agora vem do margin-top:auto abaixo, não
   mais de space-between — assim todos os cards alinham o botão igual.) */
/* Painel de "Impostos": o bloco superior vira flex-column com o mesmo gap dos
   demais painéis, pra a distância título→conteúdo bater com os outros dois. */
.situacao-notas-painel.espacado > div { display: flex; flex-direction: column; gap: 12px; }
/* Título → conteúdo abaixo = 24px nos três painéis: 12px do margin + 12px do
   gap do flex (mesma soma dentro do bloco de "Impostos"). */
.situacao-notas-painel h4 { margin: 0 0 12px; font-family: var(--font-body); font-weight: 700; font-size: 18px; color: var(--ink); }
/* Todos os botões (CTA) alinhados ao rodapé do respectivo card. */
.situacao-notas-painel .pill-lime-cta { margin-top: auto; }
.situacao-notas-linha { display: flex; align-items: baseline; gap: 8px; }
.situacao-notas-linha .num { font-family: var(--font-body); font-weight: 800; font-size: 18px; color: var(--ink); }
.situacao-notas-linha .rotulo { font-family: var(--font-body); font-weight: 400; font-size: 14px; color: var(--ink-soft); }
.situacao-notas-valor-grande { font-family: var(--font-body); font-weight: 800; font-size: 24px; color: var(--ink); letter-spacing: -.02em; }
.pill-lime-cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lime); color: var(--lime-ink);
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  padding: 10px 14px; border-radius: var(--radius-full);
  text-decoration: none; white-space: nowrap; align-self: flex-start;
}

/* Cartão "Carteira / Posição atual" (Figma 22:525) — branco com sombra, e
   o conteúdo (a tabela real do usuário; o painel do Figma vem vazio) vive
   dentro de um painel com o gradiente verde vívido arredondado. */
.carteira-card {
  background: #fff;
  box-shadow: var(--sombra-card);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.carteira-painel {
  background: linear-gradient(90deg, oklch(81% 0.245 145 / 0.68), oklch(86% 0.056 192 / 0.68));
  border-radius: var(--raio-componente-lg);
  padding: 16px;
}
.carteira-painel table { background: none; }

/* Módulo "Próximos passos" (Início) — livro-razão agregado do que está
   esperando ação do usuário, em todos os meses (ao contrário da jornada,
   que só olha o mês de referência). Ver ESTRATEGIA-JORNADA-PENDENCIAS.md §5. */
.proximos-passos-card {
  background: #fff;
  border-radius: var(--raio-reto);
  box-shadow: var(--sombra-card);
  padding: 32px;
  margin-top: 18px;
}
.proximos-passos-titulo { margin: 0 0 14px; }
.proximos-passos-em-dia {
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
  color: var(--positive); margin: 0;
}
.proximos-passos-lista { display: flex; flex-direction: column; gap: 8px; }
.proximos-passos-item {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 16px; border-radius: var(--raio-componente-md);
  background: var(--paper); border: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
.proximos-passos-item:hover { background: var(--locked-bg); }
.proximos-passos-item:focus-visible { outline: 2px solid var(--current-blue); outline-offset: 2px; }
.proximos-passos-icone { font-size: 17px; flex: none; }
.proximos-passos-texto {
  flex: 1; min-width: 0;
  font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--ink);
}
.proximos-passos-seta { flex: none; color: var(--muted); font-size: 15px; }

/* Tabelas no estilo Material Design 3: SEM bordas verticais entre células (só
   divisores horizontais), cabeçalho limpo com um divisor mais forte embaixo, e
   zebra com uma tinta SUAVE da marca (verde-sage) — nunca cinza em todas as
   linhas. Hover com "state layer" sutil, como o M3. */
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
caption { text-align: left; font-weight: 700; margin-bottom: 8px; color: var(--ink); }
th {
  background: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1.5px solid var(--line);
  white-space: nowrap;
}
td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink-soft);
}
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-family: var(--font-mono); }
td.num.neg { color: var(--negative); font-weight: 700; }
/* Zebra: só linhas pares do corpo (fora a linha de total), com a tinta da marca. */
tbody tr:nth-child(even):not(.total) td { background: var(--tint-tabela); }
/* Hover: realce sutil (Material 3 state layer). */
tbody tr:not(.total):hover td { background: var(--tint-tabela-hover); }

/* ---------- Tabela de notas (Minhas notas) ------------------------------
   <details> nativo por linha (acessível, sem JS para abrir/fechar), mas com
   cara de TABELA de verdade: um único container com cantos retos (--raio-
   reto, mesmo idioma visual de .box/.stat/.darf-stub), linhas encostadas
   (sem raio nem margem individual) e colunas alinhadas via CSS Grid — o
   cabeçalho e cada linha compartilham o mesmo --grid-notas, então a
   posição X de cada coluna é idêntica em toda a tabela. O checkbox de
   seleção em lote fica FORA do <details> (irmão, no .nota-linha) — dentro
   do <summary> o clique no checkbox também abriria/fecharia o acordeão;
   por isso .nota-linha é a grid externa (checkbox | conteúdo) e .nota-acc
   summary é a grid interna (as colunas de dado em si). */
.notas-tabela {
  --grid-notas: 90px 110px minmax(140px, 1fr) 90px 120px 90px 16px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--raio-reto);
  box-shadow: var(--sombra-card);
  overflow-x: auto;
}
.notas-tabela-cabecalho {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.notas-tabela-cabecalho input[type="checkbox"] { margin: 0 0 0 16px; }
.notas-tabela-cabecalho .cols {
  display: grid;
  grid-template-columns: var(--grid-notas);
  gap: 14px;
  padding: 10px 16px 10px 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.notas-tabela-cabecalho .cols .num { text-align: right; }
.nota-linha {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: start;
  border-bottom: 1px solid var(--line);
}
.nota-linha:last-child { border-bottom: none; }
.nota-linha > input[type="checkbox"] { margin: 16px 0 0 16px; }
.nota-acc { min-width: 0; }
.nota-acc summary {
  display: grid;
  grid-template-columns: var(--grid-notas);
  gap: 14px;
  align-items: center;
  padding: 12px 16px 12px 0;
  cursor: pointer;
  list-style: none;
  font-size: 13.5px;
}
.nota-acc summary::-webkit-details-marker { display: none; }
.nota-acc summary::after {
  content: "▾";
  color: var(--muted);
  font-size: 12px;
  justify-self: end;
}
@media (prefers-reduced-motion: no-preference) {
  .nota-acc summary::after { transition: transform .15s ease; }
}
.nota-acc[open] summary::after { transform: rotate(180deg); }
.nota-acc summary:hover { background: var(--paper); }
.nota-acc summary:focus-visible { outline: 3px solid var(--warning); outline-offset: -3px; }
.nota-acc .col-corretora { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nota-acc .col-total { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.nota-acc .nota-detalhe {
  border-top: 1px solid var(--line);
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nota-acc .custos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px 18px;
}
.nota-acc .custos-grid .item .rotulo {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
mark.destaque-busca {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  border-radius: 3px;
  padding: 0 2px;
}
.nota-acc .custos-grid .item .valor {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
tr.total td { font-weight: 700; background: var(--paper); color: var(--ink); }
/* overflow-x:auto é necessário para rolagem horizontal em telas estreitas.
   Definir overflow-y:visible aqui NÃO impede o recorte vertical — a spec
   CSS força overflow-y a "auto" sempre que overflow-x não é visible,
   mesmo com overflow-y declarado explicitamente. Por isso o tooltip
   (.tooltip-content) usa position:fixed em vez de confiar neste container. */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); margin-bottom: 4px; }
td .sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; font-family: var(--font-body); }

form .field { margin-bottom: 14px; }
form label, .field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: 6px;
}
form input, form select, form textarea {
  width: 100%;
  max-width: 360px;
  padding: 9px 13px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 13.5px;
  background: var(--card);
  color: var(--ink);
}
form input[type="checkbox"] { width: auto; max-width: none; }
.field-row { display: flex; gap: 14px; flex-wrap: wrap; }
.field-row .field { flex: 1; min-width: 160px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  padding: 9px 18px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--paper); border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.acao-contratar { background: var(--acao-azul); border-color: var(--acao-azul); color: #fff; box-shadow: var(--shadow-sm); }
.btn.acao-contratar:hover { background: var(--acao-azul-hover); border-color: var(--acao-azul-hover); }
.btn.ghost { background: transparent; }
.btn.small { padding: 5px 13px; font-size: 12px; }
.btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}
.btn:disabled:hover { background: var(--card); border-color: var(--line); }
.btn.primary:disabled:hover { background: var(--accent); border-color: var(--accent); }

/* Tabs no estilo Material 3 (primary tabs): linha de divisão embaixo de toda a
   faixa + indicador (barra de 3px) sob a aba ativa, texto ativo em destaque —
   nada de fundo/pílula (que dava aparência de toggle/segmented control).
   position/z-index: fica ACIMA do pulsar (que sobe com margin-top negativo),
   então dá pra clicar nas abas. */
.tabs {
  display: flex;
  gap: 4px;
  padding: 0;
  background: none;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
  width: 100%;
  position: relative;
  z-index: 2;
}
.tabs button,
.tabs a.aba-notas-link {
  border: none;
  border-radius: 8px 8px 0 0;
  background: transparent;
  padding: 13px 20px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  position: relative;
  text-decoration: none;
  transition: color .15s ease, background .15s ease;
}
.tabs button:hover,
.tabs a.aba-notas-link:hover { color: var(--ink); background: var(--paper); }
.tabs button.active { color: var(--ink); background: transparent; box-shadow: none; }
.tabs button.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px; /* sobre a linha de divisão */
  height: 3px;
  background: var(--accent);
  border-radius: 3px 3px 0 0;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.filter-bar {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-end;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.filter-bar .field { margin-bottom: 0; }

.toggle-group { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.toggle-group a,
.toggle-group button {
  display: inline-block;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-full);
  background: var(--card);
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--ink-soft);
  text-decoration: none;
  line-height: 1.4;
  cursor: pointer;
}
.toggle-group a:hover:not(.active),
.toggle-group button:hover:not(.active) { border-color: var(--accent); color: var(--accent); }
.toggle-group a.active,
.toggle-group button.active { background: var(--ink); border-color: var(--ink); color: #fff; }

.alert-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: var(--radius-md);
  padding: 11px 15px;
  margin-bottom: 8px;
  font-size: 13.5px;
  box-shadow: var(--shadow-sm);
}
.alert-item.success { border-left-color: var(--positive); background: var(--positive-soft); }
.alert-item.error { border-left-color: var(--negative); background: var(--negative-soft); }
.alert-item.warning { border-left-color: var(--warning); background: var(--warning-soft); }
.alert-item .when {
  display: block;
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 3px;
}

.pill {
  display: inline-block;
  border-radius: var(--radius-full);
  padding: 3px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  background: var(--line);
  color: var(--ink-soft);
}
.pill.ok { background: var(--positive-soft); color: var(--positive); }
.pill.pending { background: var(--warning-soft); color: var(--warning); }
.pill.blocked, .pill.error { background: var(--negative-soft); color: var(--negative); }

.tooltip-container {
  display: inline-block;
  position: relative;
  margin-left: 6px;
  vertical-align: middle;
}
.tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: help;
  flex-shrink: 0;
}
.tooltip-icon:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.tooltip-content {
  display: none;
  /* fixed (não absolute): escapa de qualquer ancestral com overflow-x:auto
     — o CSS força overflow-y para "auto" também nesse caso (regra da spec,
     não bug), o que recortaria um tooltip absolute antes dele aparecer.
     top/right/bottom são calculados em JS (static/js/tooltip.js). */
  position: fixed;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  box-shadow: var(--shadow-md);
  min-width: 280px;
  max-width: 380px;
  z-index: 1000;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  /* o tooltip herda estilos da célula onde mora — dentro de td.num isso
     significa nowrap (texto longo estourava a largura), fonte mono e
     alinhamento à direita. Reset explícito: */
  white-space: normal;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 400;
  font-variant-numeric: normal;
  /* mora dentro do <label> (uppercase + tracking) quando o gatilho é o "?"
     ao lado do rótulo — reset pra o texto de ajuda ler em caixa normal. */
  text-transform: none;
  letter-spacing: normal;
}
.tooltip-content::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 12px;
  border: 6px solid transparent;
  border-top-color: var(--line);
}
.tooltip-content::before {
  content: "";
  position: absolute;
  top: 100%;
  right: 13px;
  border: 5px solid transparent;
  border-top-color: var(--card);
}
.tooltip-container:hover .tooltip-content {
  display: block;
}
.tooltip-content > div {
  margin-bottom: 8px;
}
.tooltip-content > div:last-child {
  margin-bottom: 0;
}

/* Tooltip do próprio site em qualquer elemento com [data-tooltip] — aparece
   IMEDIATAMENTE no hover/foco (o title nativo do navegador demora ~2s e tem a
   UI do SO). Abre PARA BAIXO (bom p/ botões do topbar). Mesmo visual do
   .tooltip-content do sistema. */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--card);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px 10px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 1200;
  transition: opacity .1s ease;
}
[data-tooltip]::before {
  content: "";
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: var(--card);
  filter: drop-shadow(0 -1px 0 var(--line));
  opacity: 0;
  pointer-events: none;
  z-index: 1201;
  transition: opacity .1s ease;
}
[data-tooltip]:hover::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::after,
[data-tooltip]:focus-visible::before {
  opacity: 1;
}

/* ---------- Sino de alertas (menu suspenso no topbar) ---------- */
.alerts-dropdown { position: relative; }
.alerts-dropdown .icon-btn { position: relative; }
.alerts-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: var(--radius-full);
  background: var(--negative);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* Painel de alertas: gaveta deslizante que entra pela DIREITA por cima do
   site (não mais dropdown ancorado no sino), largura máx. 390px, flutuando
   com a sombra padrão dos boxes. */
.alerts-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(390px, 100vw);
  overflow-y: auto;
  background: #fff;
  box-shadow: var(--sombra-card);
  padding: 32px;
  z-index: 1100;
  transform: translateX(100%);
  visibility: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .alerts-panel { transition: transform .25s ease, visibility .25s; }
}
.alerts-panel.open { transform: translateX(0); visibility: visible; }
.alerts-panel-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.alerts-panel h4 {
  margin: 2px 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.alerts-fechar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.alerts-fechar:hover { background: var(--paper); color: var(--ink); }
.alerts-fechar .material-symbols-outlined { font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; }
/* Linhas achatadas: sem borda, sem borda lateral e sem espaço entre elas. */
.alerts-panel .alert-item {
  font-size: 12.5px;
  margin-bottom: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.alerts-panel .empty { padding: 20px 8px; text-align: center; color: var(--muted); font-size: 13px; }
.alerts-panel .ver-todos {
  display: block;
  text-align: center;
  padding: 8px 4px 2px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  border-top: 1px solid var(--line);
  margin-top: 6px;
}

/* Dropdown genérico (perfil no topbar + submenus do menu lateral) — mesmo
   padrão de posicionamento via JS do .alerts-panel (getBoundingClientRect
   + position:fixed), só com nome de classe neutro pra ser reaproveitado
   por sidebar-flyout.js e profile-dropdown.js. */
.flyout-panel {
  display: none;
  position: fixed;
  min-width: 220px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 8px;
  z-index: 1000;
}
.flyout-panel.open { display: block; }
.flyout-panel a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 600;
}
.flyout-panel a:hover { background: var(--paper); color: var(--ink); }
.flyout-panel a.active { color: var(--ink); background: var(--accent-soft); }

/* ---------- Envio de notas: arrastar-e-soltar ---------- */
.dropzone {
  border: 2px dashed var(--line);
  border-radius: var(--radius-lg);
  padding: 48px 24px;
  text-align: center;
  cursor: pointer;
  background: var(--card);
}
.dropzone.dragover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.dropzone .dz-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  color: var(--muted);
}
.dropzone.dragover .dz-icon { color: var(--accent); }
.dropzone p { margin: 0 0 4px; }
.dropzone .dz-hint { font-size: 12.5px; color: var(--muted); }

/* Início 2 — versão alternativa do painel principal: mesma área de
   arrastar-e-soltar acima, só que como a única ação da tela (maior,
   com título e hint em destaque em vez de texto pequeno). */
.dropzone-gigante {
  border: 2px dashed var(--line);
  border-radius: var(--radius-lg);
  padding: 96px 32px;
  text-align: center;
  cursor: pointer;
  background: var(--card);
  box-shadow: var(--sombra-card);
}
.dropzone-gigante:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--current-blue); }
.dropzone-gigante.dragover { border-color: var(--accent); background: var(--accent-soft); }
.dropzone-gigante .dz-icon-gigante { width: 72px; height: 72px; margin: 0 auto 22px; color: var(--muted); }
.dropzone-gigante.dragover .dz-icon-gigante { color: var(--accent); }
.dropzone-gigante h2 {
  font-family: var(--font-display); font-weight: 700; font-size: 28px;
  letter-spacing: -.02em; margin: 0 0 8px; color: var(--ink);
}
.dropzone-gigante .dz-hint-gigante { font-family: var(--font-body); font-size: 14.5px; color: var(--muted); margin: 0; }

/* Painel de contagem de pendências (lado direito do cartão "Ações
   pendentes"), reaproveitando o container .jornada-progress-panel. */
.acoes-pendentes-contador { font-family: var(--font-display); font-weight: 700; font-size: 48px; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.acoes-pendentes-contador-label { font-family: var(--font-body); font-weight: 500; font-size: 12.5px; color: var(--tint-sage-ink-soft); margin-top: 6px; }

/* Fila global de envio de notas: painel flutuante no canto inferior
   direito, presente em todas as páginas (base.html) — as dropzones só
   alimentam a fila (window.FilaNotas), sem navegação. */
.fila-envios {
  position: fixed;
  right: 18px;
  bottom: 0; /* colada na borda inferior da janela */
  width: min(780px, calc(100vw - 36px));
  max-height: 330px;
  background: #fff;
  border-radius: var(--raio-reto);
  box-shadow: var(--sombra-alta);
  z-index: 1000;
  display: flex;
  flex-direction: column;
}
/* Sem cabeçalho (mais rows visíveis): os controles (minimizar/fechar)
   flutuam ACIMA do canto superior direito do painel, sem gastar altura. */
.fila-envios-controles {
  position: absolute;
  top: -16px;
  right: 10px;
  display: flex;
  gap: 6px;
}
.fila-envios-controles .icon-btn { width: 32px; height: 32px; box-shadow: var(--sombra-card); }
/* Estado minimizado: só a pill de progresso ("Enviando notas — 12 de 44");
   clicar nela expande de volta. */
.fila-envios-mini {
  display: none;
  align-items: center;
  gap: 10px;
  border: none;
  background: none;
  padding: 14px 18px;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
}
.fila-envios.minimizada { width: auto; }
.fila-envios.minimizada .fila-envios-mini { display: inline-flex; }
.fila-envios.minimizada .upload-lista { display: none; }
.fila-envios.minimizada #fila-envios-minimizar { display: none; }
.fila-envios .upload-lista { overflow-y: auto; padding: 14px 20px 16px; margin-top: 0; gap: 0; /* seções vazias não podem abrir vãos */ }

.upload-lista { margin-top: 18px; display: flex; flex-direction: column; gap: 18px; }
/* cada novo arrastar-e-soltar entra no topo, no seu próprio box — separação
   forte (não só uma linha) do(s) lote(s) anterior(es), que ficam empurrados
   para baixo sem sumir. Fundo "paper" faz as linhas (brancas) flutuarem
   dentro da bandeja do lote — camada extra sobre o box branco da seção. */
.upload-lote {
  display: flex;
  flex-direction: column;
}
.upload-row {
  display: flex;
  flex-wrap: wrap; /* permite mensagem de erro e botão ocuparem a linha de baixo */
  align-items: center;
  column-gap: 12px;
  row-gap: 2px; /* motivo do não-envio cola no nome do arquivo */
  padding: 12px 4px;
}
.fila-secao .upload-row { border-top: 1px solid var(--line); }
.upload-row + .upload-row { border-top: 1px solid var(--line); }
/* Sumário global da fila — fica no TOPO do painel quando ela esvazia */
.fila-resumo-topo { margin: 0 0 10px; }
.upload-row .nome {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upload-row .barra {
  /* só a linha SENDO ENVIADA mostra a barra — antes do envio, depois dele
     ou com erro ela não diz nada (o status à direita já diz). */
  display: none;
  width: 140px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--line);
  overflow: hidden;
  flex-shrink: 0;
}
.upload-row.enviando .barra { display: block; /* span é inline por padrão — sem display, width/height são ignorados */ }
.upload-row .barra-preenchida {
  display: block; /* idem: a barra ficava sempre "em branco" por ser span inline */
  height: 100%;
  width: 0%;
  /* mesmo gradiente verde→azul dos step-rows de "Ações pendentes" */
  background: linear-gradient(90deg, oklch(81% 0.245 145 / 0.68), oklch(86% 0.056 192 / 0.68));
  border-radius: var(--radius-full);
  transition: width .3s ease;
}
.upload-row.sucesso .barra-preenchida { background: var(--positive); }
.upload-row.erro .barra-preenchida { background: var(--negative); }
.upload-row.alerta .barra-preenchida { background: var(--warning); }
.upload-row .status-txt {
  width: 92px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  text-align: right;
  color: var(--muted);
}
.upload-row.sucesso .status-txt { color: var(--positive); }
.upload-row.erro .status-txt { color: var(--negative); }
.upload-row.alerta .status-txt { color: var(--warning); }
.upload-row .msg-erro {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--ink-soft); /* grafite escuro — o estado já é dito pela coluna de status */
  margin-top: 0;
  line-height: 1.5;
}
.upload-row .msg-erro div + div { margin-top: 3px; }
.upload-row .msg-alerta {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 0;
  line-height: 1.5;
}
.upload-row .msg-alerta div + div { margin-top: 3px; }
.upload-row .msg-info {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 700;
  margin-top: 0;
  line-height: 1.5;
}
.upload-row .btn-tentar-novamente { margin-top: 2px; }
.paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}
.upload-resumo {
  margin-top: 10px;
  padding: 12px 16px;
  border-radius: var(--raio-reto);
  font-size: 13.5px;
  font-weight: 600;
}
.upload-resumo.ok { background: var(--positive-soft); color: var(--positive); }
.upload-resumo.parcial { background: var(--warning-soft); color: var(--warning); }
.upload-resumo.alerta { background: var(--warning-soft); color: var(--warning); }

/* ---------- Combobox (type-ahead) ---------- */
.combobox { display: block; position: relative; }
.combobox-panel {
  display: none;
  position: fixed;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  max-height: 260px;
  overflow-y: auto;
  z-index: 1000;
  font-size: 13px;
}
.combobox-panel.open { display: block; }
.combobox-item { padding: 8px 13px; cursor: pointer; }
.combobox-item.ativo, .combobox-item:hover { background: var(--accent-soft); color: var(--accent); }
.combobox-empty { padding: 10px 13px; color: var(--muted); font-size: 12.5px; }

/* ---------- Formset dinâmico (rows adicionáveis/removíveis) ---------- */
.formset-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px;
  background: var(--paper);
  border-radius: var(--radius-md);
}
.formset-row .field { flex: 1; min-width: 120px; margin-bottom: 0; }
.formset-row .btn-remover-row {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--negative);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
}
.formset-row .btn-remover-row:hover { background: var(--negative-soft); border-color: var(--negative); }
.formset-row .btn-desfazer-row {
  flex-shrink: 0;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--accent);
  cursor: pointer;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
}
.formset-row .btn-desfazer-row:hover { background: var(--accent-soft); border-color: var(--accent); }
.formset-row.marcado-para-remover { background: var(--negative-soft); }
.formset-row.marcado-para-remover .field { opacity: .55; pointer-events: none; }
.btn-adicionar-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--accent);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  justify-content: center;
}
.btn-adicionar-row:hover { background: var(--accent-soft); border-color: var(--accent); }

/* ---------- Meses e DARF: blocos por ano, visual de tabela ---------- */
.bloco-ano { margin-bottom: 26px; }
.bloco-ano > h4 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--ink);
}
.tabela-meses .mes-tr td { vertical-align: middle; }
.tabela-meses .mes-clicavel { cursor: pointer; }
.tabela-meses .mes-clicavel:hover td { background: var(--paper); }
.tabela-meses .mes-clicavel:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Destaque de mês com notas: filete interno na primeira célula —
   box-shadow inset NÃO desloca o conteúdo (diferente de border-left),
   então todos os nomes de mês ficam alinhados no mesmo grid. */
.tabela-meses .mes-com-notas td:first-child { box-shadow: inset 4px 0 0 var(--accent); }
.tabela-meses .mes-tr:not(.mes-com-notas) td:first-child strong { color: var(--muted); font-weight: 600; }
/* Detalhe aberto em quase-branco: destaca do fundo da página (--paper) */
.mes-detalhe-cell { background: var(--paper); padding: 18px !important; }
.mes-detalhe-cell .table-wrap { background: var(--card); }

.mes-acoes-darf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }

/* Botões de ação na LINHA da tabela de meses: "Fechar mês" aparece com a
   mesma aparência em toda linha ABERTA (mesmo quando bloqueado pela regra
   sequencial — o clique então guia o usuário até o mês certo, em vez de só
   desabilitar); meses fechados não mostram esse botão. Reabrir e Gerar DARF
   só quando aplicáveis; o ícone "?" ao lado explica o status das três ações. */
.acoes-mes-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.acoes-mes-row .btn {
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 14px;
  white-space: nowrap;
}
.btn.acao-fechar { background: var(--positive); border-color: var(--positive); color: #fff; }
.btn.acao-fechar:hover { filter: brightness(.93); }
.btn.acao-reabrir { background: var(--card); border: 1.5px solid var(--negative); color: var(--negative); }
.btn.acao-reabrir:hover { background: var(--negative-soft); }
/* Destaque quando o usuário aceita ser levado até o mês mais antigo em
   aberto (a partir de um mês bloqueado pela regra sequencial): a LINHA do
   mês pulsa 3 vezes para ficar evidente de qual mês estamos falando, e o
   botão "Fechar mês" dela pulsa junto. */
@keyframes pulso-destaque {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(54, 41, 230, 0); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(54, 41, 230, .28); }
}
@keyframes pulso-linha {
  0%, 100% { background-color: transparent; box-shadow: none; }
  50% { background-color: rgba(54, 41, 230, .12); box-shadow: inset 4px 0 0 var(--accent); }
}
@media (prefers-reduced-motion: no-preference) {
  .destaque-temporario { animation: pulso-destaque 1s ease-in-out 3; }
  tr.destaque-linha, tr.destaque-linha td { animation: pulso-linha 1s ease-in-out 3; }
}
/* Pagamento do DARF em evidência na própria linha (coluna de ações) */
.pill-darf-paga { font-weight: 700; white-space: nowrap; }
.acoes-ajuda .tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: help;
}
.acoes-ajuda .tooltip-icon:hover { border-color: var(--accent); color: var(--accent); }
/* Mês corrente: nada a fazer ainda (fechar/reabrir/gerar sempre indisponíveis
   por regra), então nem os botões desabilitados aparecem — só este aviso. */
.mes-em-andamento { font-size: 12.5px; color: var(--muted); font-style: italic; }
.cabecalho-ano { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cabecalho-ano form { margin: 0; }

/* ---------- Toasts (avisos no canto inferior direito) ---------- */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1200;
  max-width: min(420px, calc(100vw - 40px));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff;
  border-radius: var(--raio-componente-lg);
  box-shadow: var(--sombra-alta);
  padding: 14px 16px;
  font-size: 13.5px;
  color: var(--ink-soft);
  opacity: 0;
  transform: translateY(12px);
}
@media (prefers-reduced-motion: no-preference) {
  .toast { transition: opacity .25s ease, transform .25s ease; }
}
.toast.visivel { opacity: 1; transform: translateY(0); }
.toast-icone {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  background: var(--paper);
  color: var(--muted);
}
.toast.success .toast-icone { background: var(--positive-soft); color: var(--positive); }
.toast.error .toast-icone { background: var(--negative-soft); color: var(--negative); }
.toast.warning .toast-icone { background: var(--warning-soft); color: var(--warning); }
.toast.info .toast-icone { background: var(--accent-soft); color: var(--accent); }
.toast-msg { flex: 1; line-height: 1.45; }
.toast-fechar {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.toast-fechar:hover { color: var(--ink); }

/* ---------- Cálculo pendente: banner + overlay bloqueante ---------- */
.banner-recalculo {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--warning-soft);
  border: 1px solid var(--warning);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.banner-recalculo > div { flex: 1; min-width: 260px; line-height: 1.5; }
/* Overlay BRANCO cobrindo a tela inteira, com o spinner no centro —
   bloqueia toda interação enquanto o cálculo roda (mínimo de 3s). */
#overlay-calculo {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(2px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
#overlay-calculo .overlay-conteudo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  max-width: 380px;
}
#overlay-calculo strong { font-family: var(--font-display); font-size: 17px; color: var(--ink); }
#overlay-calculo span { font-size: 13px; color: var(--muted); line-height: 1.5; }
#overlay-calculo .spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 4px solid var(--accent-soft);
  border-top-color: var(--accent);
  animation: girar 0.9s linear infinite;
  margin-bottom: 6px;
}
@keyframes girar { to { transform: rotate(360deg); } }

.modal-fundo {
  position: fixed;
  inset: 0;
  background: rgba(20, 23, 31, .55);
  backdrop-filter: blur(3px);
  z-index: 1900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-fundo .modal-caixa {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 30px 34px;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modal-fundo strong { font-family: var(--font-display); font-size: 18px; color: var(--ink); }
.modal-fundo span { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.modal-fundo .modal-botoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
/* Sem escopo a .modal-fundo: o mesmo aviso também é usado fora de modal
   (ex.: disclaimer no topo de Notas Manuais). */
.modal-aviso-critico {
  background: var(--negative-soft);
  border-left: 3px solid var(--negative);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--ink);
}
.modal-aviso-critico strong { font-size: 13px; color: var(--negative); }
.modal-aviso-critico ul { margin: 6px 0 0; padding-left: 18px; }
.modal-fundo .modal-lista-meses { font-size: 13.5px; color: var(--muted); }
.btn.negative { background: var(--negative); border-color: var(--negative); color: #fff; }
.btn.negative:hover { background: var(--negative-hover); border-color: var(--negative-hover); }
@media (prefers-reduced-motion: reduce) {
  #overlay-calculo .spinner { animation-duration: 2.5s; }
}

/* ============ Diálogos do sistema (Dialogo, static/js/dialogo.js) ============
   Substitui confirm()/alert() do navegador em todo o produto. <dialog>
   nativo: foco, tecla ESC e bloqueio de scroll de graça, estilizado com os
   tokens do projeto — nenhum z-index manual necessário (top-layer nativo). */
.dialogo {
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--esp-6);
  max-width: 440px;
  width: calc(100% - var(--esp-8));
  background: var(--card);
  box-shadow: var(--shadow-lg);
  color: var(--ink-soft);
}
.dialogo::backdrop {
  background: rgba(20, 23, 31, .55);
  backdrop-filter: blur(3px);
}
@media (prefers-reduced-motion: no-preference) {
  .dialogo {
    transition: opacity .18s ease, transform .18s ease,
                overlay .18s ease allow-discrete, display .18s ease allow-discrete;
  }
  .dialogo::backdrop { transition: background-color .18s ease; }
  @starting-style {
    .dialogo[open] { opacity: 0; transform: scale(.96); }
    .dialogo[open]::backdrop { background-color: rgba(20, 23, 31, 0); }
  }
}
.dialogo-cabecalho { display: flex; align-items: center; gap: var(--esp-3); margin-bottom: var(--esp-3); }
.dialogo-icone {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--texto-md);
  font-weight: 700;
  line-height: 1;
}
.dialogo.tom-neutro .dialogo-icone { background: var(--accent-soft); color: var(--accent); }
.dialogo.tom-atencao .dialogo-icone { background: var(--warning-soft); color: var(--warning); }
.dialogo.tom-perigo .dialogo-icone { background: var(--negative-soft); color: var(--negative); }
.dialogo-titulo {
  font-family: var(--font-display);
  font-size: var(--texto-lg);
  line-height: var(--lh-titulo);
  color: var(--ink);
}
.dialogo-corpo { font-size: var(--texto-base); line-height: var(--lh-texto); }
.dialogo-corpo p { margin: 0 0 var(--esp-3); }
.dialogo-corpo p:last-child { margin-bottom: 0; }
.dialogo-checkbox {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  font-size: var(--texto-sm);
  color: var(--muted);
  cursor: pointer;
  margin-top: var(--esp-3);
}
.dialogo-checkbox input { width: auto; }
.dialogo-botoes { display: flex; gap: var(--esp-2); justify-content: flex-end; margin-top: var(--esp-5); flex-wrap: wrap; }
.dialogo.tom-perigo #dialogo-btn-confirmar { background: var(--negative); border-color: var(--negative); color: #fff; }
.dialogo.tom-perigo #dialogo-btn-confirmar:hover { filter: brightness(.93); }
.dialogo.tom-atencao #dialogo-btn-confirmar { background: var(--warning); border-color: var(--warning); color: #fff; }
.dialogo.tom-atencao #dialogo-btn-confirmar:hover { filter: brightness(.93); }

.breadcrumbs { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.note {
  font-size: 14px;
  line-height: 22px;
  color: #333333;
  background: rgb(232 215 120 / 6%);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 16px 24px;
  margin: 10px 0;
}

/* Parágrafo de introdução no topo de uma tela — texto corrido, sem a caixa/
   fundo de .note. */
.intro-texto {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 75ch;
  margin: 0;
}
.intro-texto strong { color: var(--ink); font-weight: 700; }

.details-row { display: none; }
.details-row.open { display: table-row; }

.card-link {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--raio-reto);
  box-shadow: var(--sombra-card);
  padding: 15px 17px;
  text-decoration: none;
  color: inherit;
}
.card-link:hover { border-color: var(--accent); box-shadow: var(--shadow-lg); }
.card-link h4 { font-family: var(--font-display); font-size: 13.5px; font-weight: 700; margin: 0 0 4px; color: var(--ink); }
.card-link p { margin: 0; font-size: 12.5px; color: var(--muted); }

.wizard-steps { display: flex; gap: 6px; margin-bottom: 18px; font-size: 12px; }
.wizard-steps span {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-full);
  padding: 5px 13px;
  color: var(--muted);
  font-weight: 600;
}
.wizard-steps span.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.wizard-steps span.done { background: var(--positive-soft); color: var(--positive); border-color: transparent; }

footer.proto-footer {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--muted);
}

.chart-placeholder {
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-lg);
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
  background: var(--paper);
}

/* ---------- Páginas de autenticação e legais (sem sidebar) ---------- */
.center-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-box {
  width: 100%;
  max-width: 380px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 34px 30px;
}
.auth-box .mark {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.auth-box .mark img { width: 100%; height: 100%; display: block; }
.auth-box h1 { text-align: center; margin-bottom: 4px; font-size: 21px; }
.auth-box .sub { text-align: center; color: var(--muted); font-size: 12.5px; margin-bottom: 22px; }
.auth-box .links { margin-top: 16px; font-size: 12.5px; text-align: center; }
.auth-box form .field input, .auth-box form .field select { max-width: none; }

/* ---------- Login / Cadastro em tela dividida (form + painel de marca) ----- */
.auth-split { display: flex; min-height: 100vh; }

.auth-form-side {
  flex: 1 1 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--card); padding: 40px 32px;
}
.auth-form-inner { width: 100%; max-width: 384px; }
.auth-form-inner.wide { max-width: 468px; }

.auth-logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; margin-bottom: 40px; }
.auth-logo-mark { width: 40px; height: 40px; flex-shrink: 0; }
.auth-logo-mark img { width: 100%; height: 100%; display: block; }
.auth-logo-nome { font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -.02em; color: var(--ink); }

.auth-head { margin-bottom: 26px; }
.auth-head h1 { font-family: var(--font-display); font-weight: 800; font-size: 27px; line-height: 1.12; letter-spacing: -.02em; color: var(--ink); margin: 0 0 8px; }
.auth-head p { font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin: 0; }

.auth-form-side form .field input:not([type="checkbox"]),
.auth-form-side form .field select { max-width: none; }
.auth-form-side form .field { margin-bottom: 16px; }

.auth-senha-topo { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.auth-senha-topo label { margin-bottom: 0; }
.auth-senha-topo a { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: normal; text-transform: none; }

.auth-check { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 20px; }
.auth-check input { margin-top: 2px; cursor: pointer; }
.auth-check label { text-transform: none; font-family: var(--font-body); font-size: 12.5px; font-weight: 400; letter-spacing: normal; color: var(--muted); margin: 0; cursor: pointer; }

.auth-enviar { width: 100%; justify-content: center; padding: 12px; font-size: 15px; }
.auth-alt { margin-top: 22px; font-family: var(--font-body); font-size: 13.5px; color: var(--ink-soft); text-align: center; }
.auth-alt a { font-weight: 700; }

.auth-image-side {
  flex: 1 1 50%;
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  background: linear-gradient(150deg, #16324f 0%, #0e1b2c 62%, #0a1521 100%);
  padding: 64px;
}
.auth-image-glow { position: absolute; width: 620px; height: 620px; border-radius: 50%; right: -120px; top: -120px; background: radial-gradient(circle, oklch(80% 0.2 150 / .5), transparent 62%); pointer-events: none; }
.auth-image-glow.b { right: auto; top: auto; left: -160px; bottom: -160px; width: 520px; height: 520px; background: radial-gradient(circle, oklch(78% 0.14 195 / .32), transparent 64%); }
.auth-image-conteudo { position: relative; z-index: 1; max-width: 30rem; }
.auth-image-eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #3ee6a8; margin: 0 0 18px; }
.auth-image-titulo { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -.025em; color: #fff; margin: 0; }
.auth-image-titulo .verde { color: #3ee6a8; }
.auth-image-cap { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: oklch(86% 0.02 200 / .85); margin: 20px 0 0; }

@media (max-width: 900px) {
  .auth-split { flex-direction: column; }
  .auth-image-side { flex: 0 0 auto; min-height: 210px; align-items: center; padding: 40px 32px; order: -1; }
  .auth-image-glow { width: 420px; height: 420px; right: -140px; top: -160px; }
  .auth-image-glow.b { display: none; }
  .auth-image-titulo { font-size: clamp(24px, 6vw, 32px); }
  .auth-image-cap { display: none; }
  .auth-form-side { flex: 1 1 auto; padding: 36px 28px 48px; align-items: flex-start; }
  .auth-logo { margin-bottom: 28px; }
}
@media (max-width: 480px) {
  .auth-image-side { min-height: 168px; padding: 32px 24px; }
  .auth-form-side { padding: 30px 22px 40px; }
  .auth-head h1 { font-size: 24px; }
}
@media (prefers-reduced-motion: no-preference) {
  .auth-image-glow { animation: auth-glow 9s ease-in-out infinite alternate; }
}
@keyframes auth-glow { from { transform: translate(0, 0); opacity: .9; } to { transform: translate(-24px, 20px); opacity: 1; } }

/* ---------- Menu hamburguer (< 1024px) -----------------------------------
   Acima do breakpoint a sidebar fica no grid normal (sticky) e o botão
   fica escondido. Abaixo dele, vira uma gaveta off-canvas: escondida por
   padrão (translateX -100%), revelada por cima do conteúdo com overlay —
   ver static/js/hamburger.js. */
.hamburger-btn { display: none; }
.sidebar-overlay { display: none; }

@media (max-width: 1024px) {
  .app { grid-template-columns: 1fr; }
  .topbar { grid-column: 1; padding: 12px 16px; }
  main { grid-column: 1; padding: 20px 16px; border-radius: var(--radius-md); }
  /* Pulsar de 500px não cabe em telas estreitas: volta ao fluxo normal
     (abaixo do texto, centralizado), welcome em largura cheia e sem
     sobreposição de cartões. */
  .recalcula-hero { min-height: 0; }
  .recalcula-hero-texto { width: 100%; }
  .recalcula-hero-texto .sub { font-size: 24px; }
  .dropzone-pulsar { position: static; width: 320px; height: 320px; margin: 24px auto 0; }
  .home-pulsar-col { position: static; }
  .home-pulsar-col .dropzone-pulsar { position: static; transform: none; }
  .dashboard-duo, .home-layout { flex-direction: column; }
  .hamburger-btn { display: inline-flex; }
  /* Topbar do redesign "recalcula" foi dimensionada pro canvas largo do
     Figma (padding 24/48, logo 54px, nome completo ao lado do avatar) —
     não cabe numa tela de celular; encolhe a marca e esconde o nome,
     mantendo só o essencial (ícones + avatar) alcançável. */
  .brand { gap: 10px; font-size: 17px; }
  .brand .mark { width: 36px; height: 36px; }
  .brand .mark svg { width: 18px; height: 18px; }
  .user-area { gap: 10px; }
  .profile-trigger span:first-child { display: none; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    max-width: 82vw;
    z-index: 60;
    border-radius: 0;
    box-shadow: none;
    transform: translateX(-100%);
    overflow-y: auto;
    /* No desktop a sidebar é transparente (flutua no cinza da página);
       como gaveta ela cobre o conteúdo, então precisa de fundo sólido. */
    background: var(--card);
  }
  .sidebar.aberta { transform: translateX(0); box-shadow: var(--shadow-lg); }
  @media (prefers-reduced-motion: no-preference) {
    .sidebar { transition: transform .22s ease; }
  }

  .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: oklch(20% 0.02 50 / 0.4);
    z-index: 55;
    opacity: 0;
    pointer-events: none;
  }
  .sidebar-overlay.aberta { opacity: 1; pointer-events: auto; }
  @media (prefers-reduced-motion: no-preference) {
    .sidebar-overlay { transition: opacity .22s ease; }
  }
}