@charset "UTF-8";
/* =====================================================================
   PLANTFIN - Sistema de Gestão Financeira
   style.css - Sistema de design completo

   ORGANIZAÇÃO DO ARQUIVO
   01. Tokens ............ variáveis de cor, tipografia, espaço e forma
   02. Base .............. reset e elementos nativos
   03. Layout ............ menu lateral, topo e área de conteúdo
   04. Tipografia ........ títulos, textos e valores monetários
   05. Cartões ........... blocos de conteúdo
   06. Métricas .......... números de destaque do painel
   07. Barras ............ progresso de orçamento e metas
   08. Formulários ....... campos, rótulos e validação
   09. Botões ............ ações
   10. Tabelas ........... listas de lançamentos e relatórios
   11. Selos ............. status e categorias
   12. Avisos ............ mensagens fixas na página
   13. Modais ............ janelas de ação
   14. Toasts ............ confirmações passageiras
   15. Abas .............. navegação interna de página
   16. Estados vazios .... telas sem dados
   17. Login ............. tela de acesso
   18. Utilitários ....... espaçamento, grade e alinhamento
   19. Responsivo ........ tablet e celular
   20. Acessibilidade .... foco, movimento reduzido e impressão

   REGRA: nenhum outro arquivo define cor, sombra ou raio fora daqui.
   ===================================================================== */

/* =====================================================================
   01. TOKENS
   ===================================================================== */
:root {
  /* --- Verdes: extraídos da logo (#093220 é o verde da marca) --- */
  --verde-900: #061F14;
  --verde-800: #093220;
  --verde-700: #12412A;
  --verde-600: #1B5237;
  --verde-500: #266546;
  --verde-100: #DDE7E0;
  --verde-50:  #EEF3EF;

  /* --- Dourados: #A27232 é o dourado da marca --- */
  --dourado-700: #7E5825;
  --dourado-600: #8E6529;
  --dourado-500: #A27232;
  --dourado-400: #B98F4E;
  --dourado-200: #E6D6B8;
  --dourado-50:  #F7F1E4;

  /* --- Verde folha: gráficos e detalhes vegetais --- */
  --folha-600: #465B32;
  --folha-500: #576A3D;
  --folha-300: #93A177;

  /* --- Neutros --- */
  --creme:        #F9F6EF;
  --creme-fundo:  #F3EFE5;
  --branco:       #FFFFFF;
  --linha:        #E4DFD3;
  --linha-suave:  #EFEBE1;
  --preto:        #1A1A1A;
  --chumbo:       #4A4F4B;
  --chumbo-claro: #7C837E;
  --chumbo-fraco: #A8ADA7;

  /* --- Semânticos: o mesmo verbo em todo o sistema --- */
  --saudavel:      #2E7D52;
  --saudavel-leve: #E7F1EA;
  --atencao:       #B07A1F;
  --atencao-leve:  #FAF0DC;
  --critico:       #A33B2A;
  --critico-leve:  #F8E8E4;
  --neutro:        var(--chumbo-claro);
  --neutro-leve:   #EFEDE8;

  /* --- Paleta de gráficos: verde -> folha -> dourado --- */
  --graf-1: #093220;
  --graf-2: #1B5237;
  --graf-3: #2E7D52;
  --graf-4: #576A3D;
  --graf-5: #93A177;
  --graf-6: #A27232;
  --graf-7: #B98F4E;
  --graf-8: #E6D6B8;

  /* --- Tipografia --- */
  --fonte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --txt-xs:   0.75rem;    /* 12px - legendas e rodapés de tabela   */
  --txt-sm:   0.8125rem;  /* 13px - rótulos e textos de apoio      */
  --txt-base: 0.9375rem;  /* 15px - corpo padrão                   */
  --txt-md:   1.0625rem;  /* 17px - subtítulos                     */
  --txt-lg:   1.3125rem;  /* 21px - títulos de cartão              */
  --txt-xl:   1.75rem;    /* 28px - título de página               */
  --txt-2xl:  2.375rem;   /* 38px - valores de destaque            */
  --txt-3xl:  3.25rem;    /* 52px - número herói do painel         */

  /* --- Espaçamento: escala de 4px --- */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;
  --e8: 4rem;

  /* --- Forma: o raio comunica hierarquia --- */
  --r-sm:   6px;   /* selos e campos pequenos */
  --r:      10px;  /* botões e campos         */
  --r-lg:   16px;  /* cartões                 */
  --r-xl:   22px;  /* painéis de destaque     */
  --r-full: 999px;

  /* --- Sombras: tingidas de verde, nunca cinza puro --- */
  --sombra-1: 0 1px 2px rgba(9, 50, 32, 0.05);
  --sombra-2: 0 2px 4px rgba(9, 50, 32, 0.06), 0 8px 20px rgba(9, 50, 32, 0.06);
  --sombra-3: 0 12px 40px rgba(9, 50, 32, 0.16);

  /* --- Estrutura --- */
  --menu-largura: 264px;
  --topo-altura: 68px;
  --largura-max: 1400px;

  --transicao: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* =====================================================================
   02. BASE
   ===================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--txt-base);
  line-height: 1.55;
  color: var(--preto);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a {
  color: var(--verde-600);
  text-decoration: none;
  transition: color var(--transicao);
}
a:hover { color: var(--dourado-500); }

button, input, select, textarea { font: inherit; color: inherit; }

hr {
  border: 0;
  border-top: 1px solid var(--linha);
  margin: var(--e5) 0;
}

::selection {
  background: var(--verde-100);
  color: var(--verde-800);
}

/* Rolagem discreta, no tom da marca */
* { scrollbar-width: thin; scrollbar-color: var(--chumbo-fraco) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb {
  background: var(--chumbo-fraco);
  border-radius: var(--r-full);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-track { background: transparent; }

/* =====================================================================
   03. LAYOUT
   O menu lateral é verde sólido e ocupa a altura inteira: é a âncora
   visual da marca. Todo o resto respira em creme.
   ===================================================================== */
.app { min-height: 100vh; }

/* --- Menu lateral --- */
.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--menu-largura);
  height: 100vh;
  height: 100dvh;
  background: var(--verde-800);
  display: flex;
  flex-direction: column;
  z-index: 40;
  transition: transform var(--transicao), width var(--transicao);
}

.menu-marca {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e5) var(--e5) var(--e4);
  flex-shrink: 0;
  text-decoration: none;
}
.menu-marca:hover { opacity: 0.9; }
.menu-marca .marca-simbolo { width: 34px; height: 34px; flex-shrink: 0; }

/* Marca em imagem: o ícone só aparece com o menu recolhido */
.marca-icone { width: 40px; height: 40px; flex-shrink: 0; display: none; border-radius: 9px; }
.marca-logo { height: 52px; width: auto; max-width: 100%; object-fit: contain; }
.acesso-logo-imagem { height: 84px; width: auto; max-width: 340px; object-fit: contain; }

.menu-marca .marca-nome {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--branco);
  line-height: 1;
}
.menu-marca .marca-nome span { color: var(--dourado-400); }
.menu-marca .marca-assinatura {
  display: block;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 3px;
}

.menu-navegacao {
  flex: 1;
  overflow-y: auto;
  padding: var(--e2) var(--e3) var(--e5);
}
.menu-navegacao::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); }

.menu-secao {
  font-size: var(--txt-xs);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.42);
  padding: var(--e5) var(--e3) var(--e2);
  margin: 0;
}
.menu-secao:first-child { padding-top: var(--e2); }

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: 10px var(--e3);
  margin-bottom: 2px;
  border-radius: var(--r);
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--txt-base);
  font-weight: 500;
  position: relative;
  transition: background var(--transicao), color var(--transicao);
}
.menu-item:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--branco);
}
.menu-item svg { width: 19px; height: 19px; flex-shrink: 0; opacity: 0.85; }

/* O item ativo ganha o dourado: é o único dourado do menu */
.menu-item.ativo {
  background: rgba(255, 255, 255, 0.11);
  color: var(--branco);
  font-weight: 600;
}
.menu-item.ativo::before {
  content: '';
  position: absolute;
  left: calc(var(--e3) * -1);
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  background: var(--dourado-400);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.menu-item.ativo svg { opacity: 1; }

.menu-contador {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-full);
  background: var(--dourado-500);
  color: var(--branco);
  font-size: 0.6875rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.menu-rodape {
  flex-shrink: 0;
  padding: var(--e3) var(--e3) var(--e4);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--txt-xs);
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.5;
}
.menu-lema { padding: 0 var(--e2) var(--e3); }

/* Botão que recolhe e expande */
.menu-alternar {
  display: flex;
  align-items: center;
  gap: var(--e3);
  width: 100%;
  padding: 9px var(--e3);
  background: rgba(255, 255, 255, 0.06);
  border: 0;
  border-radius: var(--r);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--txt-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.menu-alternar:hover { background: rgba(255, 255, 255, 0.12); color: var(--branco); }
.menu-alternar svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform var(--transicao); }

/* =====================================================================
   MENU RECOLHIDO
   A largura é uma variável, então basta redefini-la no <body> para o
   menu e a área de conteúdo se ajustarem juntos.
   ===================================================================== */
body.menu-recolhido { --menu-largura: 78px; }

body.menu-recolhido .menu-marca { justify-content: center; padding: var(--e5) 0 var(--e4); }
body.menu-recolhido .marca-icone { display: block; }
body.menu-recolhido .marca-logo { display: none; }
body.menu-recolhido .menu-marca .marca-texto,
body.menu-recolhido .menu-secao,
body.menu-recolhido .menu-item span,
body.menu-recolhido .menu-lema,
body.menu-recolhido .menu-alternar span { display: none; }

body.menu-recolhido .menu-navegacao { padding: var(--e3) var(--e2) var(--e5); }

/* Sem isso, a barra de rolagem ocupa alguns pixels da navegação e
   desalinha os ícones em relação à logo, que fica fora dessa área. */
body.menu-recolhido .menu-navegacao { scrollbar-width: none; }
body.menu-recolhido .menu-navegacao::-webkit-scrollbar { width: 0; display: none; }
body.menu-recolhido .menu-item {
  justify-content: center;
  padding: 11px 0;
  margin-bottom: var(--e1);
}
body.menu-recolhido .menu-item.ativo::before { left: -8px; }
body.menu-recolhido .menu-alternar { justify-content: center; padding: 10px 0; }
body.menu-recolhido .menu-alternar svg { transform: rotate(180deg); }

/* Separador entre seções, já que os títulos somem */
body.menu-recolhido .menu-secao + .menu-item {
  margin-top: var(--e3);
  padding-top: var(--e3);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0 0 var(--r) var(--r);
}

/* O contador de avisos vira um ponto sobre o ícone */
body.menu-recolhido .menu-contador {
  position: absolute;
  top: 5px;
  right: 12px;
  min-width: 8px;
  height: 8px;
  padding: 0;
  font-size: 0;
  border: 2px solid var(--verde-800);
}

/* Nome da tela aparece ao passar o mouse */
body.menu-recolhido .menu-item::after {
  content: attr(data-rotulo);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 10px;
  background: var(--verde-900);
  color: var(--branco);
  font-size: var(--txt-sm);
  font-weight: 500;
  white-space: nowrap;
  border-radius: var(--r-sm);
  box-shadow: var(--sombra-2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transicao), visibility var(--transicao);
  z-index: 60;
}
body.menu-recolhido .menu-item:hover::after,
body.menu-recolhido .menu-item:focus-visible::after { opacity: 1; visibility: visible; }

/* --- Barra superior --- */
.topo {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--topo-altura);
  background: rgba(249, 246, 239, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
  display: flex;
  align-items: center;
  gap: var(--e4);
  padding: 0 var(--e6);
}

.topo-titulo {
  font-size: var(--txt-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.topo-acoes {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--e3);
}

.menu-botao {
  display: none;
  background: none;
  border: 0;
  padding: var(--e2);
  border-radius: var(--r);
  cursor: pointer;
  color: var(--verde-800);
}
.menu-botao:hover { background: var(--verde-50); }

/* Seletor de mês/ano: presente em todas as telas financeiras */
.periodo {
  display: flex;
  align-items: center;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r);
  overflow: hidden;
}
.periodo button {
  background: none;
  border: 0;
  padding: 7px 10px;
  cursor: pointer;
  color: var(--verde-700);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transicao), color var(--transicao);
}
.periodo button svg { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 2.2; }
.periodo button:hover { background: var(--verde-50); color: var(--verde-800); }
.periodo button:active { background: var(--verde-100); }
.periodo-atual {
  padding: 0 var(--e3);
  font-size: var(--txt-sm);
  font-weight: 600;
  white-space: nowrap;
  border-left: 1px solid var(--linha);
  border-right: 1px solid var(--linha);
  line-height: 34px;
}

/* Ícones em controles que não têm regra própria de tamanho */
.menu-botao svg,
.modal-fechar svg,
.senha-alternar svg,
.faixa-contexto svg { width: 19px; height: 19px; flex-shrink: 0; }

/* Menu do usuário */
.usuario-botao {
  display: flex;
  align-items: center;
  gap: var(--e2);
  background: none;
  border: 0;
  padding: var(--e1);
  border-radius: var(--r-full);
  cursor: pointer;
}
.usuario-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: var(--verde-700);
  color: var(--branco);
  font-size: var(--txt-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  object-fit: cover;
}

.suspenso {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-2);
  padding: var(--e2);
  z-index: 50;
  display: none;
}
.suspenso.aberto { display: block; }
.suspenso-cabecalho {
  padding: var(--e2) var(--e3) var(--e3);
  border-bottom: 1px solid var(--linha-suave);
  margin-bottom: var(--e2);
}
.suspenso-cabecalho strong { display: block; font-size: var(--txt-base); }
.suspenso-cabecalho span { font-size: var(--txt-xs); color: var(--chumbo-claro); }
.suspenso a,
.suspenso button {
  display: flex;
  align-items: center;
  gap: var(--e3);
  width: 100%;
  padding: var(--e2) var(--e3);
  border: 0;
  background: none;
  border-radius: var(--r-sm);
  color: var(--preto);
  font-size: var(--txt-sm);
  text-align: left;
  cursor: pointer;
}
.suspenso a:hover,
.suspenso button:hover { background: var(--verde-50); color: var(--verde-800); }
.suspenso svg { width: 17px; height: 17px; color: var(--chumbo-claro); }
.posicao-relativa { position: relative; }

/* --- Conteúdo --- */
.conteudo {
  margin-left: var(--menu-largura);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left var(--transicao);
}
.pagina {
  flex: 1;
  width: 100%;
  max-width: var(--largura-max);
  padding: var(--e6);
  margin: 0 auto;
}
.rodape {
  padding: var(--e5) var(--e6);
  font-size: var(--txt-xs);
  color: var(--chumbo-claro);
  border-top: 1px solid var(--linha);
  display: flex;
  justify-content: space-between;
  gap: var(--e4);
  flex-wrap: wrap;
}

/* Faixa de contexto: a mentora vendo o painel de um mentorado */
.faixa-contexto {
  background: var(--dourado-500);
  color: var(--branco);
  padding: var(--e3) var(--e6);
  font-size: var(--txt-sm);
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex-wrap: wrap;
}
.faixa-contexto strong { font-weight: 600; }
.faixa-contexto a {
  margin-left: auto;
  color: var(--branco);
  text-decoration: underline;
  font-weight: 500;
}
.faixa-contexto a:hover { color: var(--dourado-200); }

/* =====================================================================
   04. TIPOGRAFIA
   ===================================================================== */
h1, h2, h3, h4 {
  margin: 0 0 var(--e3);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
h1 { font-size: var(--txt-xl); }
h2 { font-size: var(--txt-lg); }
h3 { font-size: var(--txt-md); }
h4 { font-size: var(--txt-base); }
p  { margin: 0 0 var(--e4); max-width: 72ch; }

.cabecalho-pagina {
  display: flex;
  align-items: flex-start;
  gap: var(--e4);
  flex-wrap: wrap;
  margin-bottom: var(--e5);
}
.cabecalho-pagina h1 { margin-bottom: var(--e1); }
.cabecalho-pagina .apoio {
  color: var(--chumbo);
  font-size: var(--txt-sm);
  margin: 0;
}
.cabecalho-pagina .acoes { margin-left: auto; display: flex; gap: var(--e2); flex-wrap: wrap; }

.apoio    { color: var(--chumbo); }
.discreto { color: var(--chumbo-claro); font-size: var(--txt-sm); }

/* Todo valor em dinheiro usa numeral tabular para as colunas alinharem */
.valor {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  font-weight: 600;
  letter-spacing: -0.01em;
}
.valor-positivo { color: var(--saudavel); }
.valor-negativo { color: var(--critico); }
.valor-neutro   { color: var(--preto); }
.valor-grande   { font-size: var(--txt-2xl); line-height: 1.1; }

/* =====================================================================
   05. CARTÕES
   ===================================================================== */
.cartao {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-1);
}
.cartao-cabecalho {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e4) var(--e5);
  border-bottom: 1px solid var(--linha-suave);
}
.cartao-cabecalho h2,
.cartao-cabecalho h3 { margin: 0; font-size: var(--txt-md); }
.cartao-cabecalho .acoes { margin-left: auto; display: flex; gap: var(--e2); }
.cartao-corpo { padding: var(--e5); }
.cartao-corpo > :last-child { margin-bottom: 0; }
.cartao-rodape {
  padding: var(--e3) var(--e5);
  border-top: 1px solid var(--linha-suave);
  background: var(--creme);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  font-size: var(--txt-sm);
  color: var(--chumbo);
}
/* Tabela encostada nas bordas do cartão */
.cartao-corpo.sem-espaco { padding: 0; }
.cartao-corpo.sem-espaco .tabela { border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* Painel escuro: usado no destaque principal do dashboard */
.cartao-destaque {
  background: var(--verde-800);
  border-color: var(--verde-800);
  color: var(--branco);
  border-radius: var(--r-xl);
}
.cartao-destaque .apoio,
.cartao-destaque .discreto { color: rgba(255, 255, 255, 0.62); }
.cartao-destaque .valor-grande { color: var(--branco); }
.cartao-destaque .cartao-cabecalho { border-bottom-color: rgba(255, 255, 255, 0.12); }

/* =====================================================================
   06. MÉTRICAS
   ===================================================================== */
.metrica {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  padding: var(--e4) var(--e5);
  box-shadow: var(--sombra-1);
}
.metrica-rotulo {
  font-size: var(--txt-sm);
  color: var(--chumbo);
  margin-bottom: var(--e2);
  display: flex;
  align-items: center;
  gap: var(--e2);
}
.metrica-rotulo svg { width: 16px; height: 16px; color: var(--chumbo-claro); }
.metrica-valor {
  /* O tamanho acompanha a largura do cartão: valor na casa dos milhares
     não pode quebrar e deixar o "R$" sozinho em uma linha */
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, var(--txt-2xl));
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.metrica-nota {
  margin-top: var(--e2);
  font-size: var(--txt-xs);
  color: var(--chumbo-claro);
  display: flex;
  align-items: center;
  gap: var(--e1);
}
.metrica-nota.sobe { color: var(--saudavel); }
.metrica-nota.desce { color: var(--critico); }

/* =====================================================================
   07. BARRAS DE PROGRESSO
   O mesmo componente serve para limite de despesa e avanço de meta.
   ===================================================================== */
.barra {
  height: 8px;
  background: var(--creme-fundo);
  border-radius: var(--r-full);
  overflow: hidden;
}
/* Barra que exibe a marca de um valor de referência por cima */
.barra-com-marca {
  position: relative;
  overflow: visible;
}
.barra-com-marca .barra-preenchimento {
  position: relative;
  z-index: 1;
}
.barra-preenchimento {
  height: 100%;
  border-radius: var(--r-full);
  background: var(--saudavel);
  transition: width 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.barra-preenchimento.atencao { background: var(--atencao); }
.barra-preenchimento.critico { background: var(--critico); }
.barra-preenchimento.neutro  { background: var(--chumbo-fraco); }
.barra-alta { height: 12px; }

.barra-legenda {
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
  font-size: var(--txt-xs);
  color: var(--chumbo);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

/* Linha de categoria com limite: usada no orçamento e no painel */
.linha-limite { padding: var(--e3) 0; border-bottom: 1px solid var(--linha-suave); }
.linha-limite:last-child { border-bottom: 0; }
.linha-limite-topo {
  display: flex;
  align-items: baseline;
  gap: var(--e3);
  margin-bottom: 6px;
}
.linha-limite-topo .nome { font-weight: 500; }
.linha-limite-topo .numeros {
  margin-left: auto;
  font-size: var(--txt-sm);
  font-variant-numeric: tabular-nums;
  color: var(--chumbo);
}
.linha-limite-topo .numeros strong { color: var(--preto); }

/* =====================================================================
   08. FORMULÁRIOS
   ===================================================================== */
.campo { margin-bottom: var(--e4); }
.campo:last-child { margin-bottom: 0; }

.rotulo {
  display: block;
  font-size: var(--txt-sm);
  font-weight: 500;
  color: var(--chumbo);
  margin-bottom: 6px;
}
.rotulo .obrigatorio { color: var(--critico); margin-left: 2px; }

.entrada,
select.entrada,
textarea.entrada {
  width: 100%;
  padding: 10px var(--e3);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r);
  font-size: var(--txt-base);
  color: var(--preto);
  transition: border-color var(--transicao), box-shadow var(--transicao);
  appearance: none;
}
.entrada::placeholder { color: var(--chumbo-fraco); }
.entrada:hover { border-color: var(--chumbo-fraco); }
.entrada:focus {
  outline: none;
  border-color: var(--verde-600);
  box-shadow: 0 0 0 3px var(--verde-100);
}
.entrada:disabled {
  background: var(--creme-fundo);
  color: var(--chumbo-claro);
  cursor: not-allowed;
}
textarea.entrada { min-height: 96px; resize: vertical; line-height: 1.55; }

select.entrada {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234A4F4B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--e3) center;
  padding-right: var(--e6);
}

/* Campo monetário com o R$ embutido */
.campo-moeda { position: relative; }
.campo-moeda::before {
  content: 'R$';
  position: absolute;
  left: var(--e3);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--txt-sm);
  font-weight: 500;
  color: var(--chumbo-claro);
  pointer-events: none;
}
.campo-moeda .entrada {
  padding-left: 2.5rem;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* Seletor de cor: o input nativo é feio em todo navegador, então
   o campo vira uma amostra grande e clicável */
.entrada-cor {
  height: 42px;
  padding: 4px;
  cursor: pointer;
}
.entrada-cor::-webkit-color-swatch-wrapper { padding: 0; }
.entrada-cor::-webkit-color-swatch { border: 0; border-radius: var(--r-sm); }
.entrada-cor::-moz-color-swatch { border: 0; border-radius: var(--r-sm); }

.ajuda { font-size: var(--txt-xs); color: var(--chumbo-claro); margin-top: 5px; }
.erro-campo { font-size: var(--txt-xs); color: var(--critico); margin-top: 5px; }
.entrada.invalida { border-color: var(--critico); }
.entrada.invalida:focus { box-shadow: 0 0 0 3px var(--critico-leve); }

/* Opções em botão: tipo de lançamento, prazo de meta */
.opcoes { display: flex; gap: var(--e2); flex-wrap: wrap; }
.opcoes input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.opcoes label {
  padding: 8px var(--e4);
  border: 1px solid var(--linha);
  border-radius: var(--r);
  background: var(--branco);
  font-size: var(--txt-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transicao);
}
.opcoes label:hover { border-color: var(--chumbo-fraco); }
.opcoes input:checked + label {
  background: var(--verde-800);
  border-color: var(--verde-800);
  color: var(--branco);
}
.opcoes input:focus-visible + label { box-shadow: 0 0 0 3px var(--verde-100); }

.marcador { display: flex; align-items: flex-start; gap: var(--e3); cursor: pointer; }
.marcador input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--verde-700);
  cursor: pointer;
  flex-shrink: 0;
}
.marcador span { font-size: var(--txt-sm); }

.linha-campos { display: flex; gap: var(--e4); flex-wrap: wrap; }
.linha-campos > * { flex: 1 1 180px; }

/* =====================================================================
   09. BOTÕES
   Primário = ação principal (verde). Dourado = ação de destaque.
   Suave = secundária. Texto = terciária. Perigo = destrutiva.
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: 10px var(--e4);
  border: 1px solid transparent;
  border-radius: var(--r);
  font-size: var(--txt-sm);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transicao), border-color var(--transicao),
              color var(--transicao), transform var(--transicao);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn-primario { background: var(--verde-800); color: var(--branco); }
.btn-primario:hover:not(:disabled) { background: var(--verde-700); color: var(--branco); }

.btn-dourado { background: var(--dourado-500); color: var(--branco); }
.btn-dourado:hover:not(:disabled) { background: var(--dourado-600); color: var(--branco); }

.btn-suave {
  background: var(--branco);
  border-color: var(--linha);
  color: var(--preto);
}
.btn-suave:hover:not(:disabled) {
  background: var(--verde-50);
  border-color: var(--verde-100);
  color: var(--verde-800);
}

.btn-texto { background: none; color: var(--chumbo); padding: 8px var(--e2); }
.btn-texto:hover:not(:disabled) { color: var(--verde-800); background: var(--verde-50); }

.btn-perigo { background: var(--critico); color: var(--branco); }
.btn-perigo:hover:not(:disabled) { background: #8C3123; color: var(--branco); }

.btn-pequeno { padding: 6px var(--e3); font-size: var(--txt-xs); }
.btn-grande { padding: 13px var(--e5); font-size: var(--txt-base); }
.btn-largo { width: 100%; }
.btn-icone { padding: 8px; }
.btn-icone svg { width: 18px; height: 18px; }

.btn-carregando { position: relative; color: transparent !important; pointer-events: none; }
.btn-carregando::after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: girar 620ms linear infinite;
  color: var(--branco);
}
.btn-suave.btn-carregando::after,
.btn-texto.btn-carregando::after { color: var(--verde-800); }
@keyframes girar { to { transform: rotate(360deg); } }

/* =====================================================================
   10. TABELAS
   ===================================================================== */
.tabela-envolvedor { overflow-x: auto; }
.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--txt-sm);
}
.tabela th {
  text-align: left;
  font-weight: 600;
  font-size: var(--txt-xs);
  color: var(--chumbo);
  padding: var(--e3) var(--e4);
  background: var(--creme);
  border-bottom: 1px solid var(--linha);
  white-space: nowrap;
}
.tabela td {
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--linha-suave);
  vertical-align: middle;
}
.tabela tbody tr { transition: background var(--transicao); }
.tabela tbody tr:hover { background: var(--verde-50); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela .numero {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
.tabela th.numero { text-align: right; }
.tabela .acoes-linha {
  text-align: right;
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--transicao);
}
.tabela tbody tr:hover .acoes-linha,
.tabela tbody tr:focus-within .acoes-linha { opacity: 1; }
.tabela tfoot td {
  padding: var(--e3) var(--e4);
  background: var(--creme);
  font-weight: 600;
  border-top: 2px solid var(--linha);
}
.tabela .celula-principal { font-weight: 500; color: var(--preto); }
.tabela .celula-apoio { display: block; font-size: var(--txt-xs); color: var(--chumbo-claro); }

/* =====================================================================
   11. SELOS
   saudavel / atencao / critico repetem os nomes usados no PHP e no JS.
   ===================================================================== */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: var(--txt-xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.selo-saudavel { background: var(--saudavel-leve); color: var(--saudavel); }
.selo-atencao  { background: var(--atencao-leve);  color: var(--atencao); }
.selo-critico  { background: var(--critico-leve);  color: var(--critico); }
.selo-neutro   { background: var(--neutro-leve);   color: var(--chumbo); }
.selo-verde    { background: var(--verde-100);     color: var(--verde-800); }
.selo-dourado  { background: var(--dourado-50);    color: var(--dourado-700); }

.selo-ponto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Bolinha de cor da categoria */
.ponto-categoria {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: var(--e2);
  flex-shrink: 0;
  vertical-align: baseline;
}

/* =====================================================================
   12. AVISOS
   ===================================================================== */
.aviso {
  display: flex;
  gap: var(--e3);
  padding: var(--e4);
  border-radius: var(--r);
  border: 1px solid;
  font-size: var(--txt-sm);
  margin-bottom: var(--e4);
}
.aviso svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px; }
.aviso strong { display: block; margin-bottom: 2px; }
.aviso p { margin: 0; }
.aviso-sucesso { background: var(--saudavel-leve); border-color: #C3DFCF; color: #1F5C3B; }
.aviso-atencao { background: var(--atencao-leve);  border-color: var(--dourado-200); color: var(--dourado-700); }
.aviso-erro    { background: var(--critico-leve);  border-color: #EBC6BE; color: #83301F; }
.aviso-info    { background: var(--verde-50);      border-color: var(--verde-100); color: var(--verde-700); }

/* Insight da IA: identificado pela folha, nunca por emoji */
.insight {
  display: flex;
  gap: var(--e3);
  padding: var(--e4);
  border-radius: var(--r);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--folha-500);
  margin-bottom: var(--e3);
}
.insight.atencao { border-left-color: var(--atencao); }
.insight.critico { border-left-color: var(--critico); }
.insight.sucesso { border-left-color: var(--saudavel); }
.insight-icone {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--verde-50);
  color: var(--verde-700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.insight-icone svg { width: 17px; height: 17px; }
.insight-texto { flex: 1; min-width: 0; }
.insight-texto strong { display: block; font-size: var(--txt-sm); margin-bottom: 2px; }
.insight-texto p { margin: 0; font-size: var(--txt-sm); color: var(--chumbo); }
.insight-hora { font-size: var(--txt-xs); color: var(--chumbo-fraco); margin-top: var(--e2); }

/* =====================================================================
   13. MODAIS
   ===================================================================== */
/* O fundo rola por conta própria: se o modal exceder a tela por qualquer
   motivo, o rodapé continua alcançável. O margin:auto do .modal centraliza
   quando cabe e ancora no topo quando não cabe. */
.modal-fundo {
  position: fixed;
  inset: 0;
  background: rgba(6, 31, 20, 0.45);
  backdrop-filter: blur(2px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--e5) var(--e4);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transicao), visibility var(--transicao);
}
.modal-fundo.aberto { opacity: 1; visibility: visible; }

.modal {
  background: var(--branco);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-3);
  width: 100%;
  max-width: 520px;
  margin: auto;
  max-height: calc(100vh - var(--e7));
  max-height: calc(100dvh - var(--e7)); /* dvh acompanha a barra do navegador */
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(12px) scale(0.98);
  transition: transform var(--transicao);
}
.modal-fundo.aberto .modal { transform: none; }
.modal-largo { max-width: 780px; }

/* O <form> quase sempre envolve cabeçalho, corpo e rodapé dentro do modal.
   Como ele fica entre o .modal e o .modal-corpo, precisa repassar o flex
   adiante — senão o flex:1 do corpo não tem container e a rolagem interna
   nunca acontece. Vale para qualquer wrapper direto. */
.modal > form,
.modal > .modal-conteudo {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* Cabeçalho e rodapé ficam fixos; só o corpo rola. Sem o min-height: 0
   no corpo, o conteúdo empurra o rodapé para fora da tela. */
.modal-cabecalho {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e5) var(--e5) var(--e4);
  border-bottom: 1px solid var(--linha-suave);
  flex-shrink: 0;
}
.modal-cabecalho h3 { margin: 0; font-size: var(--txt-md); }
.modal-fechar {
  margin-left: auto;
  background: none;
  border: 0;
  padding: 6px;
  border-radius: var(--r-sm);
  color: var(--chumbo-claro);
  cursor: pointer;
}
.modal-fechar:hover { background: var(--creme-fundo); color: var(--preto); }
.modal-corpo {
  padding: var(--e5);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal-rodape {
  display: flex;
  justify-content: flex-end;
  gap: var(--e2);
  padding: var(--e4) var(--e5);
  border-top: 1px solid var(--linha-suave);
  background: var(--creme);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  flex-shrink: 0;
}

/* Barra de progresso da navegação sem recarga */
.barra-navegacao {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--dourado-500), var(--dourado-400));
  z-index: 300;
  transition: width 900ms cubic-bezier(0.1, 0.6, 0.2, 1), opacity 200ms;
}
.barra-navegacao.ativa { width: 72%; }
.barra-navegacao.completa { width: 100%; opacity: 0; transition: width 160ms, opacity 200ms 120ms; }

/* =====================================================================
   14. TOASTS
   ===================================================================== */
.toasts {
  position: fixed;
  bottom: var(--e5);
  right: var(--e5);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  z-index: 200;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-width: 260px;
  max-width: 380px;
  padding: var(--e3) var(--e4);
  border-radius: var(--r);
  background: var(--verde-800);
  color: var(--branco);
  font-size: var(--txt-sm);
  font-weight: 500;
  box-shadow: var(--sombra-3);
  pointer-events: auto;
  animation: toast-entra 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.toast.saindo { animation: toast-sai 180ms ease-in forwards; }
.toast svg { width: 18px; height: 18px; flex-shrink: 0; }
.toast-sucesso { background: var(--saudavel); }
.toast-erro    { background: var(--critico); }
.toast-atencao { background: var(--dourado-600); }
@keyframes toast-entra { from { opacity: 0; transform: translateX(24px); } }
@keyframes toast-sai   { to { opacity: 0; transform: translateX(24px); } }

/* =====================================================================
   15. ABAS
   ===================================================================== */
.abas {
  display: flex;
  gap: var(--e1);
  border-bottom: 1px solid var(--linha);
  margin-bottom: var(--e5);
  overflow-x: auto;
}
.aba {
  padding: var(--e3) var(--e4);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--chumbo);
  font-size: var(--txt-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transicao), border-color var(--transicao);
}
.aba:hover { color: var(--verde-800); }
.aba.ativo { color: var(--verde-800); border-bottom-color: var(--verde-800); font-weight: 600; }
.painel-aba { display: none; }
.painel-aba.ativo { display: block; }

/* =====================================================================
   16. ESTADOS VAZIOS
   ===================================================================== */
.vazio {
  text-align: center;
  padding: var(--e7) var(--e5);
  color: var(--chumbo);
}
.vazio-icone {
  width: 52px;
  height: 52px;
  margin: 0 auto var(--e4);
  border-radius: var(--r-lg);
  background: var(--verde-50);
  color: var(--folha-500);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vazio-icone svg { width: 26px; height: 26px; }
.vazio h3 { margin-bottom: var(--e2); color: var(--preto); }
.vazio p { margin: 0 auto var(--e4); max-width: 42ch; font-size: var(--txt-sm); }

/* =====================================================================
   17. LOGIN
   Painel verde à esquerda com a marca, formulário à direita.
   ===================================================================== */
.acesso { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }

.acesso-marca {
  background: var(--verde-800);
  color: var(--branco);
  padding: var(--e8) var(--e7);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
/* Folha muito grande, cortada pela borda: textura, não enfeite */
.acesso-marca .folha-fundo {
  position: absolute;
  right: -14%;
  bottom: -18%;
  width: 78%;
  opacity: 0.07;
  pointer-events: none;
}
.acesso-marca > * { position: relative; z-index: 1; }
.acesso-logo { display: flex; align-items: center; gap: var(--e3); }
.acesso-logo .marca-simbolo { width: 40px; height: 40px; }
.acesso-logo .marca-nome { font-size: 1.625rem; font-weight: 700; letter-spacing: -0.025em; }
.acesso-logo .marca-nome span { color: var(--dourado-400); }

.acesso-frase {
  font-size: 2.125rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.03em;
  max-width: 14ch;
  margin: 0;
}
.acesso-frase em {
  font-style: normal;
  display: block;
  color: var(--dourado-400);
}
.acesso-pilares {
  display: flex;
  gap: var(--e5);
  font-size: var(--txt-xs);
  color: rgba(255, 255, 255, 0.55);
  flex-wrap: wrap;
}

.acesso-formulario {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e7) var(--e6);
  background: var(--creme);
}
.acesso-caixa { width: 100%; max-width: 372px; }
.acesso-caixa h1 { font-size: var(--txt-xl); margin-bottom: var(--e2); }
.acesso-caixa .apoio { margin-bottom: var(--e6); font-size: var(--txt-sm); }

.senha-envolvedor { position: relative; }
.senha-envolvedor .entrada { padding-right: 2.75rem; }
.senha-alternar {
  position: absolute;
  right: var(--e2);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  padding: 6px;
  border-radius: var(--r-sm);
  color: var(--chumbo-claro);
  cursor: pointer;
}
.senha-alternar:hover { color: var(--verde-800); background: var(--verde-50); }

.acesso-opcoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  margin-bottom: var(--e5);
  font-size: var(--txt-sm);
}
.acesso-rodape {
  margin-top: var(--e6);
  padding-top: var(--e4);
  border-top: 1px solid var(--linha);
  font-size: var(--txt-xs);
  color: var(--chumbo-claro);
  text-align: center;
}

/* Avatar da tela de perfil */
.avatar-grande {
  width: 132px;
  height: 132px;
  border-radius: var(--r-full);
  object-fit: cover;
  margin: 0 auto;
  display: block;
  border: 3px solid var(--branco);
  box-shadow: var(--sombra-2);
}
.avatar-iniciais {
  background: var(--verde-800);
  color: var(--branco);
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Item aberto por um link de aviso: fica destacado por alguns segundos
   para a pessoa reconhecer, no meio da tela, o que foi apontado. */
:target {
  animation: destacar-alvo 2.4s ease-out;
  scroll-margin-top: calc(var(--topo-altura) + var(--e5));
}
@keyframes destacar-alvo {
  0%, 45% {
    background: var(--dourado-50);
    box-shadow: 0 0 0 3px var(--dourado-200);
    border-radius: var(--r);
  }
  100% { background: transparent; box-shadow: none; }
}

/* Seletor entre o painel pessoal e o da empresa, para o plano completo */
.seletor-painel {
  display: inline-flex;
  background: var(--creme-fundo);
  border: 1px solid var(--linha);
  border-radius: var(--r-full);
  padding: 3px;
  gap: 2px;
}
.seletor-painel a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-full);
  font-size: var(--txt-sm);
  font-weight: 500;
  color: var(--chumbo-claro);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transicao), color var(--transicao);
}
.seletor-painel a:hover { color: var(--verde-800); }
.seletor-painel a.ativo {
  background: var(--verde-800);
  color: var(--branco);
}
@media (max-width: 760px) {
  /* No celular fica só o ícone: o rótulo cabe na cor e na posição */
  .seletor-painel a { padding: 8px 12px; }
  .seletor-painel a span { display: none; }
}

/* =====================================================================
   18. UTILITÁRIOS
   ===================================================================== */
.grade { display: grid; gap: var(--e4); }
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade-lateral { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

.flex { display: flex; gap: var(--e3); }
.flex-centro { display: flex; align-items: center; gap: var(--e3); }
.flex-entre { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.flex-fim { margin-left: auto; }
.flex-quebra { flex-wrap: wrap; }
.coluna { display: flex; flex-direction: column; gap: var(--e3); }

.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--e2); }
.mb-3 { margin-bottom: var(--e3); }
.mb-4 { margin-bottom: var(--e4); }
.mb-5 { margin-bottom: var(--e5); }
.mb-6 { margin-bottom: var(--e6); }
.mt-4 { margin-top: var(--e4); }
.mt-5 { margin-top: var(--e5); }

.texto-direita { text-align: right; }
.texto-centro { text-align: center; }
.sem-quebra { white-space: nowrap; }
.esconder { display: none !important; }

.apenas-leitores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =====================================================================
   19. RESPONSIVO

   Três faixas: telas médias, tablet/celular grande e celular.
   Além da largura, o celular tem três particularidades tratadas aqui:
   a barra do navegador que aparece e some (dvh), o recorte da tela em
   aparelhos com notch (safe-area), e o zoom automático do iOS em campos
   com fonte menor que 16px.
   ===================================================================== */

@media (max-width: 1180px) {
  .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-lateral { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  /* No celular o menu é gaveta: a preferência de recolhido não se aplica */
  body.menu-recolhido { --menu-largura: 264px; }
  body.menu-recolhido .menu-marca .marca-texto,
  body.menu-recolhido .menu-secao,
  body.menu-recolhido .menu-item span,
  body.menu-recolhido .menu-lema,
  body.menu-recolhido .menu-alternar span { display: block; }
  body.menu-recolhido .menu-marca { justify-content: flex-start; padding: var(--e5) var(--e5) var(--e4); }
  body.menu-recolhido .marca-icone { display: none; }
  body.menu-recolhido .marca-logo { display: block; }
  body.menu-recolhido .menu-item { justify-content: flex-start; padding: 10px var(--e3); }
  body.menu-recolhido .menu-item::after { display: none; }
  body.menu-recolhido .menu-alternar { display: none; }
  body.menu-recolhido .menu-navegacao { padding: var(--e2) var(--e3) var(--e5); }
  body.menu-recolhido .menu-secao + .menu-item { border-top: 0; margin-top: 0; padding-top: 10px; }
  body.menu-recolhido .menu-contador {
    position: static;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 0.6875rem;
    border: 0;
  }

  .menu {
    transform: translateX(-100%);
    box-shadow: var(--sombra-3);
    height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .menu.aberto { transform: none; }
  .conteudo { margin-left: 0; }
  .menu-botao { display: flex; }
  .pagina { padding: var(--e5) var(--e4); }
  .topo { padding: 0 var(--e4); }
  .faixa-contexto { padding: var(--e3) var(--e4); }

  .menu-sombra {
    position: fixed;
    inset: 0;
    background: rgba(6, 31, 20, 0.4);
    z-index: 39;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transicao), visibility var(--transicao);
  }
  .menu-sombra.aberto { opacity: 1; visibility: visible; }

  .grade-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acesso { grid-template-columns: 1fr; }
  .acesso-marca { padding: var(--e5) var(--e4); gap: var(--e5); }
  .acesso-logo-imagem { height: 52px; }
  .acesso-marca .acesso-frase,
  .acesso-marca .acesso-pilares,
  .acesso-marca .folha-fundo { display: none; }
  .acesso-formulario { padding: var(--e6) var(--e4); align-items: flex-start; }
}

/* ---------------------------------------------------------------------
   TABELA QUE VIRA LISTA
   Tabela de seis colunas não cabe em celular nenhum. Marcada com
   .tabela-empilha, cada linha vira um bloco e cada célula mostra o
   nome da coluna ao lado do valor, tirado do data-rotulo.
   --------------------------------------------------------------------- */
@media (max-width: 760px) {
  .tabela-empilha thead { display: none; }

  .tabela-empilha,
  .tabela-empilha tbody,
  .tabela-empilha tfoot,
  .tabela-empilha tr,
  .tabela-empilha td { display: block; width: 100%; }

  .tabela-empilha tr {
    border-bottom: 1px solid var(--linha);
    padding: var(--e4);
  }
  .tabela-empilha tr:last-child { border-bottom: 0; }
  .tabela-empilha tbody tr:hover { background: transparent; }

  .tabela-empilha td {
    border: 0;
    padding: 3px 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e4);
    text-align: right;
  }
  .tabela-empilha td::before {
    content: attr(data-rotulo);
    font-size: var(--txt-xs);
    font-weight: 500;
    color: var(--chumbo-claro);
    text-align: left;
    flex-shrink: 0;
  }
  .tabela-empilha td[data-rotulo=""]::before,
  .tabela-empilha td:not([data-rotulo])::before { display: none; }

  /* A primeira célula é o título do bloco: ocupa a linha inteira */
  .tabela-empilha td[data-principal] {
    display: block;
    text-align: left;
    padding-bottom: var(--e2);
  }
  .tabela-empilha td[data-principal] .celula-principal {
    font-size: var(--txt-base);
    font-weight: 600;
  }

  .tabela-empilha .celula-apoio { display: inline; margin-left: 6px; }
  .tabela-empilha td[data-principal] .celula-apoio { display: block; margin-left: 0; }

  .tabela-empilha .acoes-linha {
    justify-content: flex-end;
    padding-top: var(--e3);
    margin-top: var(--e2);
    border-top: 1px dashed var(--linha-suave);
  }
  .tabela-empilha .numero { justify-content: space-between; }
  .tabela-empilha tfoot td { background: var(--creme); font-weight: 600; }
}

/* ---------------------------------------------------------------------
   CELULAR
   --------------------------------------------------------------------- */
@media (max-width: 620px) {
  :root { --txt-2xl: 1.875rem; --txt-3xl: 2.25rem; --txt-xl: 1.5rem; }

  /* Duas colunas continuam legíveis em métricas curtas e evitam uma
     coluna única gigantesca que obriga a rolar muito */
  .grade-2, .grade-3, .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade { gap: var(--e3); }
  .grade-lateral { grid-template-columns: minmax(0, 1fr); }

  .metrica { padding: var(--e4); }
  .metrica-valor { font-size: var(--txt-lg); }
  .metrica-rotulo { font-size: var(--txt-xs); }
  .metrica-nota { font-size: 0.6875rem; }

  .pagina { padding: var(--e4) var(--e3); }
  .cartao-corpo, .modal-corpo, .modal-rodape { padding: var(--e4); }
  .cartao-cabecalho { padding: var(--e4); flex-wrap: wrap; }
  .cartao-cabecalho .acoes { width: 100%; margin-left: 0; }
  .cartao-rodape { padding: var(--e3) var(--e4); }

  .cabecalho-pagina { margin-bottom: var(--e4); }
  .cabecalho-pagina .acoes { width: 100%; margin-left: 0; }
  .cabecalho-pagina .acoes .btn { flex: 1; }

  .toasts {
    left: var(--e3);
    right: var(--e3);
    bottom: calc(var(--e3) + env(safe-area-inset-bottom));
  }
  .toast { min-width: 0; max-width: none; }

  .tabela .acoes-linha { opacity: 1; }
  .periodo-atual { padding: 0 var(--e2); font-size: var(--txt-xs); }
  .topo-titulo { display: none; }
  .topo { gap: var(--e2); }
  .topo-acoes { gap: var(--e2); }

  /* Linhas de campos empilham: dois campos lado a lado ficam estreitos
     demais para digitar valor com conforto */
  .linha-campos { flex-direction: column; gap: var(--e3); }
  .linha-campos > * { flex: 1 1 auto; width: 100%; }

  /* No celular o modal usa quase toda a altura útil */
  .modal-fundo { padding: var(--e2); }
  .modal { max-height: calc(100dvh - var(--e4)); }
  .modal-cabecalho { padding: var(--e4) var(--e4) var(--e3); }
  .modal-rodape { padding: var(--e3) var(--e4) calc(var(--e3) + env(safe-area-inset-bottom)); }
  .modal-rodape .btn { flex: 1; }

  .abas { gap: 0; }
  .aba { padding: var(--e3); font-size: var(--txt-xs); }

  .vazio { padding: var(--e6) var(--e4); }
  .avatar-grande { width: 104px; height: 104px; }

  .rodape { flex-direction: column; gap: var(--e2); padding: var(--e4) var(--e3); }

  .opcoes { width: 100%; }
  .opcoes label { flex: 1; text-align: center; padding: 10px var(--e2); }

  .insight { padding: var(--e3); }
  .insight-icone { width: 28px; height: 28px; }
}

/* ---------------------------------------------------------------------
   TOQUE
   Vale por tipo de ponteiro, não por largura: pega tablet grande também.
   --------------------------------------------------------------------- */
@media (pointer: coarse) {
  /* Abaixo de 16px o iOS dá zoom sozinho ao focar o campo, e a página
     fica torta até a pessoa fechar o teclado */
  .entrada,
  select.entrada,
  textarea.entrada,
  input[type="date"],
  input[type="number"],
  input[type="search"] { font-size: 16px; }

  /* Alvo mínimo confortável para o dedo */
  .btn-icone { padding: 11px; }
  .btn-pequeno { padding: 9px var(--e3); }
  .menu-item { padding-top: 12px; padding-bottom: 12px; }
  .periodo button { padding: 10px 12px; }
  .modal-fechar { padding: 10px; }
  .senha-alternar { padding: 10px; }
  .aba { padding: var(--e3) var(--e4); }

  /* Sem hover no toque, a ação da linha precisa estar sempre visível */
  .tabela .acoes-linha { opacity: 1; }

  /* Tooltip do menu recolhido não funciona sem mouse */
  .menu-item::after { display: none !important; }
}

/* Aparelhos com recorte na tela */
@supports (padding: env(safe-area-inset-left)) {
  .conteudo {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .menu { padding-left: env(safe-area-inset-left); }
}

/* =====================================================================
   20. ACESSIBILIDADE E IMPRESSÃO
   ===================================================================== */
:focus-visible {
  outline: 2px solid var(--dourado-500);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.menu :focus-visible { outline-color: var(--dourado-400); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .menu, .topo, .rodape, .toasts, .modal-fundo, .acoes, .acoes-linha { display: none !important; }
  .conteudo { margin-left: 0; }
  .pagina { padding: 0; max-width: none; }
  .cartao { border: 1px solid #CCC; box-shadow: none; break-inside: avoid; }
  body { background: #FFF; font-size: 11pt; }
}

/* =====================================================================
   GRADE DO ORÇAMENTO ANUAL
   ---------------------------------------------------------------------
   São cerca de 1.650 campos numa tela só: 127 categorias por 13 colunas.
   Com o estilo escrito em cada campo, a página saía com mais de 600 KB,
   e quase tudo era a mesma linha de CSS repetida. Aqui ela é escrita
   uma vez.
   ===================================================================== */
.celula-plano {
  text-align: right;
  padding: 6px 8px;
  font-size: var(--txt-sm);
  border-color: transparent;
  background: transparent;
}
.celula-plano.base {
  border-color: var(--linha);
  background: var(--creme-fundo);
}
.celula-plano.ajustada {
  background: var(--dourado-50);
}
.celula-grade { padding: 4px; }
.celula-real { text-align: right; }
.celula-real.ruim { color: var(--critico); }
.celula-real.bom  { color: var(--saudavel); }