/* ==========================================================================
   AstriomAI - landing page
   CSS escrito mobile primeiro: a base atende celular, as media queries
   (640px, 900px, 1280px) acrescentam o que e maior.
   ========================================================================== */

:root {
  /* Base */
  --branco: #FFFFFF;          /* fundo principal da pagina */
  --branco-frio: #F4F7FB;     /* alternancia de secao, quase imperceptivel */

  /* Azuis */
  --azul-profundo: #0B2545;   /* autoridade: blocos escuros e titulos de destaque */
  --azul-acao: #12559E;       /* botoes, links, estado de foco */
  --azul-claro: #DCE7F5;      /* fundos de apoio, etiquetas, faixa do grafico */

  /* Acento quente, uso raro.

     O tom nasceu #8A7A5C, que da 4,18:1 sobre branco. Serve pro anel de foco
     e pra numeracao grande, que sao elemento nao-textual e texto grande, e
     nesses dois 3:1 basta. Nao servia pro .selo-media do diagnostico, que e
     texto de 12px sobre --tinta-bronze: la o par media 3,65:1, abaixo dos
     4,5:1 que texto pequeno exige.

     Escurecido pro minimo que fecha aquele par (4,54:1). Os outros dois usos
     so melhoram com a mudanca: o anel de foco sobe de 4,18 pra 5,20:1. */
  --bronze: #796B51;

  /* SERIE DE MARCA, pra grafico com mais de uma linha.

     Existe porque a regra de cor da plataforma reserva o verde e o vermelho
     pra dado que de fato melhorou ou piorou, e num grafico de varias series
     nao ha nada de bom nem de ruim: margem bruta nao e melhor que margem
     liquida, sao andares diferentes da mesma conta. Entao a distincao sai da
     profundidade do mesmo azul, do mais claro pro mais escuro, sempre nessa
     ordem em qualquer grafico que mostre as mesmas series.

     A ordem tem leitura propria neste caso: a margem bruta e a de cima na
     conta e a mais clara, a liquida e a ultima e a mais escura, entao a
     escada de tom acompanha a escada da DRE.

     O tom do meio e o --azul-acao e o mais escuro e o --azul-profundo, que ja
     existiam. O --azul-medio nasceu aqui: ele vivia como #5E8CC4 escrito a
     mao em tres lugares do painel.css e num quarto dentro do financeiro.js,
     que e exatamente o hexadecimal solto que esta folha existe pra evitar. */
  --azul-medio: #5E8CC4;

  /* Texto e estrutura */
  --texto: #0C1A2B;
  --texto-secundario: #5A6A7D;

  /* Divisoria decorativa: separa bloco de bloco e nao identifica componente
     nenhum, entao pode ser clara. Nao use em borda de campo — pra isso existe
     o --linha-de-campo logo abaixo, e a razao esta escrita la. */
  --linha: #E3E9F1;

  /* A BORDA DE CAMPO, que e outra coisa que divisoria.

     Campo de fundo branco dentro de pagina branca tem a borda como UNICA
     coisa que diz onde ele comeca e termina. Isso e "informacao visual
     necessaria pra identificar o componente", e a regra pede 3:1.

     Os campos usavam --linha, que da 1,22:1 sobre branco: some pra quem tem
     baixa visao, e o campo junto.

     Este tom e o mesmo cinza-azulado da familia com peso suficiente pra
     existir: 3,65:1 sobre branco e 3,40:1 sobre --branco-frio. Os dois fundos
     importam porque o campo aparece nos dois, e o minimo exato (#8390A0, que
     da 3,02:1 no frio) viveria na casa decimal — qualquer ajuste futuro no
     fundo derrubaria de novo. */
  --linha-de-campo: #7A8798;

  /* RESERVADOS PARA DADO, NUNCA PARA MARCA OU DECORACAO */
  --dado-positivo: #1E7A5A;
  --dado-negativo: #A6342E;
  /* Escurecido de #6B7A8C: como texto da .etiqueta-estavel ele cai sobre
     --branco-frio, e la media 4,08:1, abaixo dos 4,5:1 de texto pequeno.
     Este e o minimo que fecha o par, e continua passando sobre branco. */
  --dado-neutro: #657384;

  /* Tintas dos mesmos dados, para fundo de etiqueta e de selo. Viviam escritas
     a mao no diagnostico.css, que e o unico lugar onde etiqueta colorida
     aparece; subiram pra ca porque o Fechamento do mes passou a usar as
     mesmas, e tinta de dado escrita duas vezes sai de sincronia na primeira
     vez que alguem ajusta o verde. Cada uma e o seu --dado-* a 12% sobre
     branco, entao a dupla fundo/texto nasce com contraste suficiente. */
  --tinta-positiva: #E6F2EC;
  --tinta-negativa: #F7E8E7;
  --tinta-bronze: #F3EFE6;

  /* A ESCALA TIPOGRAFICA.

     A folha tinha 45 tamanhos de fonte, onze deles espremidos entre 0,72 e
     0,95rem. Nenhum deles foi escolhido: 0,88 contra 0,90 contra 0,92rem e
     meio pixel de diferenca, que ninguem enxerga e ninguem pediu.

     Eles nasceram de um jeito especifico, que estes degraus existem pra
     fechar. O .rotulo-do-resumo esta escrito IGUAL em tres folhas
     (capital-de-giro, conciliacao, fluxo-de-caixa); o .rotulo-do-retrato e o
     .titulo-da-leitura sao o mesmo componente com outro nome; o .rotulo-filtro,
     o .rotulo-da-area e a .etiqueta-de-secao sao a mesma etiqueta em quatro
     tamanhos diferentes. A escala nao estava larga por excesso de decisao, e
     sim porque o mesmo componente foi redigitado sete vezes, e cada vez saiu
     um numero um pouco diferente.

     Sete degraus, e todo tamanho novo sai de um deles. */
  --t-micro: 0.75rem;    /* selo, cabecalho de tabela */
  --t-mini: 0.8125rem;   /* etiqueta de campo, nota de rodape */
  --t-base: 0.9375rem;   /* texto de apoio e de tabela */
  --t-corpo: 1rem;       /* corpo */
  --t-sub: 1.125rem;     /* titulo de bloco */
  --t-secao: 1.375rem;   /* titulo de secao */
  /* Os dois degraus fluidos. A pagina de dentro e o bloco eram tres formulas
     de clamp cada um, todas parecidas e nenhuma igual: .titulo-painel,
     .titulo-admin e o h1 da caixa de login faziam o mesmo trabalho em tres
     medidas, e o mesmo valia pro titulo de bloco em quatro folhas.

     A landing NAO entra aqui: o h1, o h2, o .titulo-diferencial e o
     .passo-numero dela sao uma escala de display propria, de uma pagina so, e
     achatar isso na escala do produto tiraria a voz da unica tela que precisa
     ter voz. */
  --t-pagina: clamp(2rem, 2.4vw + 1.2rem, 2.875rem);
  --t-bloco: clamp(1.3rem, 1vw + 1rem, 1.625rem);

  --fonte-titulo: "Newsreader", Georgia, "Times New Roman", serif;
  --fonte-texto: "Archivo", "Segoe UI", sans-serif;

  /* Textura de grao usada nos blocos de fundo escuro. Vive numa variavel para
     as telas de autenticacao usarem a mesma, sem duplicar o data URI. */
  --textura-grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='grao'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23grao)'/%3E%3C/svg%3E");

  --altura-barra: 4.25rem;

  /* A ESCALA DE CANTOS.

     A plataforma era quase reta, com 2px em tudo. O redesenho das telas
     arredondou em quatro degraus, e em outubro de 2026 os cartoes voltaram a
     ter quina: 4px, o mesmo canto dos quadros da landing page, para a
     plataforma e o site falarem a mesma lingua. Cartao e bloco dentro dele
     ficam no mesmo raio, porque abaixo de 4px a diferenca nao se ve.

     Botao, campo e selo continuam nos degraus proprios. */
  --raio-cartao: 4px;    /* cartao, secao, caixa de dialogo */
  --raio-bloco: 4px;     /* bloco dentro do cartao: tabela, resumo, aviso */
  --raio-controle: 8px;  /* botao, campo, seletor */
  --raio-selo: 6px;      /* selo, etiqueta, amostra de cor */

  /* Sombra so do bloco escuro da Visao geral. E a unica sombra das telas
     logadas: os cartoes brancos se separam do fundo frio pela borda. */
  --sombra-destaque: 0 12px 32px -18px rgba(11, 37, 69, 0.6);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* O atributo hidden precisa ganhar de qualquer display declarado por classe.
   Sem esta regra, [hidden] (especificidade de atributo, igual a de classe)
   perde para .grupo-filtro, .botao, .cortina-da-confirmacao e afins, e o
   elemento continua na tela mesmo escondido pelo JavaScript. O caso mais
   grave era a cortina de confirmacao da area administrativa: por ser fixa e
   cobrir a tela inteira, ela interceptava todos os cliques da pagina.

   E a unica regra com !important do projeto, e ela existe justamente para
   nao precisar de outras: qualquer elemento escondido por hidden some, sem
   cada folha ter que se lembrar de tratar o proprio caso. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--fonte-texto);
  font-size: var(--t-corpo);
  line-height: 1.6;
  color: var(--texto);
  background-color: var(--branco);
  -webkit-font-smoothing: antialiased;
}

/* Largura de conteudo: 1200px no maximo, com margem lateral que
   funciona ate em tela de 320px */
.conteudo {
  width: min(100% - 2.5rem, 1200px);
  margin-inline: auto;
}

/* Blocos de leitura longa ficam mais estreitos que o layout geral:
   linha de texto muito larga cansa e parece menos cuidada */
.conteudo-estreito {
  max-width: 46rem;
}

/* ==========================================================================
   Tipografia
   ========================================================================== */

h1, h2, h3 {
  font-family: var(--fonte-titulo);
  font-weight: 500;
  color: var(--azul-profundo);
}

h1 {
  font-size: clamp(2.35rem, 5.2vw + 1rem, 4.35rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  max-width: 14em;
}

h2 {
  font-size: clamp(1.75rem, 3vw + 0.75rem, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin-bottom: 1.5rem;
}

h3 {
  font-size: clamp(1.2rem, 1vw + 1rem, 1.45rem);
  line-height: 1.25;
  margin-bottom: 0.6rem;
}

/* Rotulo pequeno de secao: caixa alta com espacamento entre letras,
   recurso classico de comunicacao institucional */
.rotulo-secao {
  font-size: var(--t-mini);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--texto-secundario);
  margin-bottom: 1.4rem;
}

.paragrafo-apoio,
.paragrafo-corrido,
.paragrafo-destaque {
  color: var(--texto-secundario);
  max-width: 42rem;
}

.paragrafo-apoio {
  font-size: clamp(1.05rem, 0.5vw + 0.95rem, 1.2rem);
  margin-top: 1.5rem;
}

.paragrafo-destaque {
  font-size: clamp(1.1rem, 0.6vw + 1rem, 1.3rem);
  max-width: 48rem;
}

/* ==========================================================================
   Secoes
   ========================================================================== */

.secao {
  /* Padding vertical alto de proposito: o respiro e parte da estetica */
  padding-block: clamp(4.5rem, 6vw + 2.5rem, 8.5rem);
  border-top: 1px solid var(--linha); /* filete de 1px entre secoes */
}

.secao-heroi {
  border-top: none;
}

/* A alternancia usa o branco frio: a diferenca para o branco puro
   precisa ser sentida, nao notada */
.secao-alternada {
  background-color: var(--branco-frio);
}

/* Compensa a barra fixa quando um link de ancora e usado */
section[id] {
  scroll-margin-top: calc(var(--altura-barra) + 1rem);
}

/* ==========================================================================
   Barra de navegacao
   ========================================================================== */

.barra-navegacao {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  height: var(--altura-barra);
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 250ms ease, border-color 250ms ease;
}

/* So ganha fundo translucido e desfoque depois que a pagina rola:
   no topo, ela se funde com o bloco de abertura */
.barra-navegacao.rolou {
  background-color: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--linha);
}

.barra-interna {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Marca escrita em tipografia, sem logotipo em imagem */
.marca {
  font-family: var(--fonte-titulo);
  font-size: var(--t-secao);
  font-weight: 600;
  color: var(--azul-profundo);
  text-decoration: none;
  letter-spacing: 0.01em;
  /* Alvo de toque confortavel tambem na marca */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.navegacao {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.lista-links {
  list-style: none;
}

.link-navegacao {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--texto);
  text-decoration: none;
  font-size: var(--t-base);
  font-weight: 500;
  transition: color 200ms ease;
}

.link-navegacao:hover {
  color: var(--azul-acao);
}

/* Menu recolhido no celular: painel solido abaixo da barra.
   Solido, e nao translucido, porque ele cobre conteudo de verdade. */
.botao-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
}

.tracos-menu {
  position: relative;
  width: 20px;
  height: 10px;
  display: block;
}

.tracos-menu span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: var(--azul-profundo);
  transition: transform 250ms ease;
}

.tracos-menu span:first-child { top: 0; }
.tracos-menu span:last-child { bottom: 0; }

.navegacao.aberta .tracos-menu span:first-child {
  transform: translateY(4.25px) rotate(45deg);
}

.navegacao.aberta .tracos-menu span:last-child {
  transform: translateY(-4.25px) rotate(-45deg);
}

.lista-links {
  display: none;
  position: absolute;
  top: var(--altura-barra);
  left: 0;
  right: 0;
  background-color: var(--branco);
  border-bottom: 1px solid var(--linha);
  padding: 0.75rem 1.25rem 1.25rem;
}

.navegacao.aberta .lista-links {
  display: block;
}

.lista-links .link-navegacao {
  padding-block: 0.4rem;
  border-bottom: 1px solid var(--linha);
}

.lista-links li:last-child .link-navegacao {
  border-bottom: none;
}

/* ==========================================================================
   Botoes
   ========================================================================== */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.6rem 1.375rem;
  font-family: var(--fonte-texto);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--raio-controle);
  transition: background-color 250ms ease, color 250ms ease,
              border-color 250ms ease, transform 250ms ease;
}

.botao-primario {
  background-color: var(--azul-acao);
  color: var(--branco);
}

.botao-primario:hover {
  background-color: var(--azul-profundo);
  transform: translateY(-1px);
}

.botao-secundario {
  color: var(--azul-acao);
  border: 1px solid var(--azul-acao);
  background-color: transparent;
}

.botao-secundario:hover {
  background-color: var(--azul-claro);
  transform: translateY(-1px);
}

.botao-entrar {
  min-height: 44px;
  padding: 0.4rem 1.15rem;
  color: var(--azul-acao);
  border: 1px solid var(--linha);
}

.botao-entrar:hover {
  border-color: var(--azul-acao);
}

/* Botao sobre fundo escuro */
.botao-claro {
  background-color: var(--branco);
  color: var(--azul-profundo);
}

.botao-claro:hover {
  background-color: var(--azul-claro);
  transform: translateY(-1px);
}

/* O PULO PRO CONTEUDO.

   Toda tela logada monta a mesma barra: marca, nome da empresa, Sair e ate
   cinco abas, algumas abrindo menu. Quem navega por teclado atravessava tudo
   isso em cada pagina, toda vez, antes de chegar no primeiro numero.

   O link e o primeiro elemento focavel do documento e fica fora da tela ate
   receber foco — entao ele nao existe pra quem usa mouse e e a primeira coisa
   pra quem usa teclado. Escondido com translate, e nao com display:none nem
   visibility:hidden, que tirariam ele da ordem de foco e o deixariam inutil.

   Nao entra nas telas de autenticacao: la nao ha barra nenhuma pra pular, e um
   link que pula tres campos nao economiza nada. */
.pular-para-conteudo {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 0.7rem 1.15rem;
  font-family: var(--fonte-texto);
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--branco);
  background-color: var(--azul-profundo);
  text-decoration: none;
  border-radius: 0 0 var(--raio-controle) 0;
  transform: translateY(-110%);
}

.pular-para-conteudo:focus {
  transform: translateY(0);
}

/* O destino do pulo. Recebe foco por codigo (o href move o foco junto com a
   rolagem), e por isso nao pode mostrar anel: ninguem navegou ate ele, e o
   anel apareceria sozinho no meio da tela. Mesmo tratamento que o
   diagnostico.css ja da aos blocos que recebem foco por codigo. */
main:focus {
  outline: none;
}

/* Foco de teclado visivel em toda a pagina: um dos tres usos do bronze */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}

/* ==========================================================================
   Bloco de abertura
   ========================================================================== */

.secao-heroi {
  padding-top: calc(var(--altura-barra) + clamp(3.5rem, 8vw, 7rem));
  /* Gradiente radial quase imperceptivel partindo do canto superior esquerdo:
     profundidade sem virar decoracao. Se da para apontar onde termina,
     esta forte demais. */
  background-image: radial-gradient(
    110rem 55rem at 8% -10%,
    rgba(18, 85, 158, 0.055),
    transparent 62%
  );
}

.heroi-grade {
  display: grid;
  gap: 3.5rem;
}

.grupo-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.4rem;
}

/* ==========================================================================
   Grafico SVG do bloco de abertura
   ========================================================================== */

.quadro-grafico {
  border: 1px solid var(--linha);
  background-color: var(--branco);
  padding: clamp(1rem, 3vw, 2rem);
  /* Unica sombra da pagina: muito difusa e de baixa opacidade */
  box-shadow: 0 28px 56px -40px rgba(11, 37, 69, 0.28);
}

.grafico-linha {
  display: block;
  width: 100%;
  height: auto; /* encolhe mantendo a proporcao do viewBox */
}

.grade-grafico line {
  stroke: var(--linha);
  stroke-width: 1;
}

.linha-historico {
  fill: none;
  stroke: var(--azul-profundo);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.linha-projecao {
  fill: none;
  stroke: var(--azul-acao);
  stroke-width: 1.5;
  stroke-dasharray: 5 6;
  stroke-linecap: round;
}

.faixa-projecao {
  fill: var(--azul-claro);
  opacity: 0.55;
}

.ponto-atual {
  fill: var(--azul-profundo);
}

.legenda-grafico {
  margin-top: 1rem;
  font-size: var(--t-mini);
  color: var(--texto-secundario);
}

/* ==========================================================================
   Como funciona
   ========================================================================== */

.titulo-secao {
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.lista-passos {
  list-style: none;
}

.passo {
  display: grid;
  gap: 0.75rem;
  padding-block: clamp(1.75rem, 3vw, 2.75rem);
  border-top: 1px solid var(--linha);
}

/* Numeracao grande em tipografia serifada: segundo uso do bronze */
.passo-numero {
  font-family: var(--fonte-titulo);
  font-size: clamp(2.2rem, 3vw + 1rem, 3.4rem);
  line-height: 1;
  color: var(--bronze);
}

.passo-conteudo p {
  color: var(--texto-secundario);
  max-width: 36rem;
}

/* ==========================================================================
   O diferencial
   ========================================================================== */

.titulo-diferencial {
  font-size: clamp(2rem, 3.6vw + 0.8rem, 3.4rem);
  max-width: 15em;
  margin-bottom: 0;
}

/* Filete abaixo do titulo: terceiro uso do bronze, e o ultimo */
.filete-bronze {
  display: block;
  width: 3.5rem;
  height: 2px;
  background-color: var(--bronze);
  margin-block: 1.75rem 2rem;
}

.colunas-diferencial {
  display: grid;
  gap: 2.5rem;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--linha);
  padding-top: clamp(2rem, 4vw, 3.5rem);
}

.coluna-diferencial p {
  color: var(--texto-secundario);
}

/* ==========================================================================
   Chamada final (fundo escuro)
   ========================================================================== */

.secao-final {
  position: relative;
  background-color: var(--azul-profundo);
  border-top: none;
  overflow: hidden;
}

/* Textura de grao so no bloco escuro: da sensacao de material impresso
   e tira o aspecto plastico. Sobre branco leria como sujeira. */
.secao-final::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: var(--textura-grao);
}

.secao-final .conteudo {
  position: relative; /* acima da textura */
}

.centro-final {
  text-align: center;
  margin-inline: auto;
}

.secao-final h2 {
  color: var(--branco);
  max-width: 18em;
  margin-inline: auto;
}

.paragrafo-final {
  color: var(--azul-claro);
  max-width: 34rem;
  margin: 0 auto 2.4rem;
}

/* ==========================================================================
   Rodape
   ========================================================================== */

.rodape {
  background-color: var(--azul-profundo);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: 2rem;
}

.rodape-interno {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.marca-rodape {
  font-family: var(--fonte-titulo);
  font-size: var(--t-sub);
  font-weight: 600;
  color: var(--branco);
}

.rodape-info {
  font-size: var(--t-mini);
  color: var(--azul-claro);
}

/* Lugar reservado para contato */
.rodape-contato {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--t-mini);
  color: var(--azul-claro);
  text-decoration: none;
  transition: color 200ms ease;
}

.rodape-contato:hover {
  color: var(--branco);
}

/* ==========================================================================
   Abas da plataforma (barra montada pelo navegacao.js em todas as telas
   logadas). Mora aqui porque toda pagina importa este arquivo: uma fonte so.
   ========================================================================== */

.barra-de-abas {
  background-color: var(--branco);
  border-bottom: 1px solid var(--linha);
}

/* No celular as abas rolam dentro da propria barra, sem menu escondido:
   aba atras de botao nao e descoberta */
.abas-internas {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.aba {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 46px;
  padding: 0.3rem 0.875rem;
  font-family: var(--fonte-texto);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--texto-secundario);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.aba:hover {
  color: var(--azul-acao);
  text-decoration: none;
}

/* A aba atual e identificavel por tres canais, nao so pela cor: peso da
   fonte, filete embaixo e cor */
.aba-atual {
  font-weight: 700;
  color: var(--azul-profundo);
  border-bottom-color: var(--azul-acao);
}

/* --------------------------------------------------------------------------
   Grupos na barra de abas: Visao geral e Financeiro abrem um menu.
   -------------------------------------------------------------------------- */

.grupo-de-abas {
  position: relative;
}

/* O botao do grupo herda a .aba inteira, pra ele nao parecer outra coisa no
   meio da barra. O que muda e so o que um botao precisa e um link nao. */
.aba-de-grupo {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.aba-de-grupo[aria-expanded="true"] {
  color: var(--azul-acao);
}

/* A seta azul: aponta para baixo fechada e gira meia volta ao abrir, junto
   com o menu que desce. A curva tem um leve passo alem do fim, para o giro
   ler como resposta ao clique, e nao como troca de icone. */
.seta-do-grupo {
  flex: none;
  fill: none;
  stroke: var(--azul-acao);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 240ms cubic-bezier(0.34, 1.4, 0.64, 1);
}

.aba-de-grupo[aria-expanded="true"] .seta-do-grupo {
  transform: rotate(180deg);
}

.aba-de-grupo:hover .seta-do-grupo {
  stroke: var(--azul-profundo);
}

/* Estando numa tela do grupo, o botao do grupo e a aba atual: mesmo peso, cor
   e filete da aba solta. Declarado aqui, depois do .aba-de-grupo, porque o
   filete transparente dele apagaria o da .aba-atual. */
.aba-de-grupo.aba-atual {
  color: var(--azul-profundo);
  border-bottom-color: var(--azul-acao);
}

/* FIXED, e nao absolute, e isso nao e preferencia: e a unica posicao que
   escapa do recorte da barra.

   A .abas-internas tem overflow-x: auto pra a barra rolar de lado no celular.
   Quando um dos eixos deixa de ser visible, o navegador promove o outro a auto
   junto, e um menu absolute pendurado abaixo da barra seria cortado: ele
   existiria, com tamanho, e o clique cairia no conteudo atras dele.

   Elemento fixed so e cortado por ancestral com transform, filter ou
   will-change, e nao ha nenhum no caminho. Em compensacao ele nao acompanha a
   rolagem, entao o navegacao.js posiciona na abertura e fecha ao rolar. */
.menu-do-grupo {
  position: fixed;
  z-index: 30;
  min-width: 17rem;
  max-width: calc(100vw - 1rem);
  padding: 0.4rem;
  background-color: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-bloco);
  box-shadow: 0 8px 24px rgba(12, 26, 43, 0.12);
  transform-origin: top left;
  animation: menu-do-grupo-descendo 180ms ease-out;
}

/* O menu desce junto com o giro da seta. Como o [hidden] tira o menu da tela
   (display: none), a animacao roda de novo a cada abertura. */
@keyframes menu-do-grupo-descendo {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .seta-do-grupo { transition: none; }
  .menu-do-grupo { animation: none; }
}

.item-do-grupo {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: var(--raio-controle);
  text-decoration: none;
  color: var(--texto);
}

.item-do-grupo:hover {
  background-color: var(--branco-frio);
  text-decoration: none;
}

.item-do-grupo:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: -2px;
}

.rotulo-do-item {
  display: block;
  font-family: var(--fonte-texto);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--azul-profundo);
}

/* A descricao existe pra quem ainda nao distingue os recortes pelo nome.
   Fica menor e em cinza: e apoio, nao rotulo. */
.descricao-do-item {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--t-mini);
  line-height: 1.4;
  color: var(--texto-secundario);
}

/* A tela em que a pessoa esta, marcada por fundo E por filete a esquerda: cor
   sozinha nao serve pra quem nao a distingue. */
.item-atual {
  background-color: var(--azul-claro);
  box-shadow: inset 3px 0 0 var(--azul-acao);
}

.item-atual .rotulo-do-item {
  color: var(--azul-acao);
}

/* --------------------------------------------------------------------------
   Celular: as telas do grupo numa segunda linha, no fluxo da pagina, em vez
   do menu flutuante (o porque esta no navegacao.js, mostrar_linha_do_grupo).
   -------------------------------------------------------------------------- */

.barra-de-abas {
  position: relative;
}

.linha-do-grupo {
  background-color: var(--branco-frio);
  border-top: 1px solid var(--linha);
}

.linha-do-grupo[hidden] {
  display: none;
}

.linha-do-grupo-interna {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-block: 0.5rem;
}

/* Pilula e nao aba: e outro nivel, e precisa parecer outro nivel. Altura de
   40px com o respiro da linha da o alvo de toque de 44px. */
.subaba {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.3rem 0.9rem;
  font-family: var(--fonte-texto);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--azul-profundo);
  text-decoration: none;
  white-space: nowrap;
  background-color: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 999px;
}

.subaba:hover {
  text-decoration: none;
  border-color: var(--azul-medio);
}

.subaba:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
}

/* A tela atual: fundo cheio, peso e cor, nao so cor */
.subaba-atual {
  font-weight: 700;
  color: var(--branco);
  background-color: var(--azul-acao);
  border-color: var(--azul-acao);
}

/* Esmaecimento na borda direita da barra enquanto houver aba escondida la */
.barra-de-abas::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 2.5rem;
  height: 46px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--branco) 85%);
  opacity: 0;
  transition: opacity 200ms ease;
}

.barra-de-abas.tem-mais-a-direita::after {
  opacity: 1;
}

/* No celular o menu flutuante nunca aparece, e o chevron do grupo aberto gira
   igual ao do desktop */
@media (max-width: 899px) {
  .menu-do-grupo {
    display: none !important;
  }

  .aba {
    padding-inline: 0.7rem;
  }
}

@media (min-width: 900px) {
  .linha-do-grupo {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .barra-de-abas::after { transition: none; }
}

/* --------------------------------------------------------------------------
   Cabecalho das paginas logadas. Mora aqui, e nao no painel.css, porque a
   area administrativa nao carrega o painel.css e usa o mesmo cabecalho.
   -------------------------------------------------------------------------- */

/* O CABECALHO DA PAGINA.

   Titulo grande, uma linha cinza dizendo de quando e o dado, e a direita o
   que muda a tela inteira: o seletor de empresa e mes, ou a acao principal.
   Juntar os tres numa faixa so tira da tela a pilha de rotulo, seletor e
   titulo que empurrava o primeiro numero pra baixo da dobra.

   Quebra em duas linhas quando nao cabe, e nunca espreme o titulo. */
.cabecalho-da-pagina {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1.25rem;
}

.cabecalho-da-pagina .titulo-painel,
.cabecalho-da-pagina .titulo-admin {
  margin-bottom: 0.5rem;
}

.subtitulo-da-pagina {
  font-size: 0.90625rem;
  font-weight: 500;
  color: var(--texto-secundario);
  max-width: 46rem;
}

/* A abertura longa de uma pagina, quando ela explica em vez de datar. */
.abertura-da-pagina {
  font-size: var(--t-corpo);
  line-height: 1.6;
  color: var(--texto-secundario);
  max-width: 46rem;
}

.acoes-da-pagina {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.625rem;
}

/* Filtros dentro do cabecalho nao carregam a margem de baixo que tem quando
   ficam soltos: quem espaca e o cabecalho. */
.cabecalho-da-pagina .linha-filtros {
  margin-bottom: 0;
  gap: 0.625rem;
}

/* A etiqueta em caixa alta acima de um titulo. E o unico lugar da plataforma
   com caixa alta: duas ou tres palavras, que se leem de relance. */
.etiqueta-de-secao {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-secundario);
  margin-bottom: 0.625rem;
}


/* ==========================================================================
   Animacoes
   ========================================================================== */

/* A entrada escalonada do bloco de abertura (o antigo .apresentar) passou a
   ser a entrada de toda pagina: ver "A entrada de toda pagina", mais abaixo. */

/* A serie historica se desenha sozinha na entrada.
   pathLength=1 no SVG permite usar 1 como comprimento total. */
@keyframes desenhar-linha {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

.linha-historico {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: desenhar-linha 1600ms ease-out forwards 900ms;
}

/* Projecao e ponto aparecem depois que a linha terminou de se desenhar */
@keyframes surgir-suave {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.linha-projecao,
.ponto-atual {
  opacity: 0;
  animation: surgir-suave 800ms ease forwards 2300ms;
}

/* A faixa termina na opacidade diluida dela, nao em 1 */
@keyframes surgir-faixa {
  from { opacity: 0; }
  to   { opacity: 0.55; }
}

.faixa-projecao {
  opacity: 0;
  animation: surgir-faixa 800ms ease forwards 2300ms;
}

/* --------------------------------------------------------------------------
   Esqueleto de carregamento.

   Enquanto o dado nao chegou, o bloco mostra a FORMA do que vai chegar em vez
   de uma frase "carregando". Duas razoes: a pagina para de saltar quando o
   dado entra, porque o espaco ja estava ocupado; e a espera parece menor,
   porque a pessoa ja consegue prever o que vai aparecer onde.

   O brilho e lento e de baixo contraste de proposito. Esqueleto piscando
   rapido chama mais atencao que o conteudo que vai substituir ele.
   -------------------------------------------------------------------------- */
@keyframes brilho-do-esqueleto {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}

.esqueleto {
  border-radius: var(--raio-selo);
  background-color: var(--linha);
  background-image: linear-gradient(
    90deg,
    var(--linha) 0%,
    var(--branco-frio) 50%,
    var(--linha) 100%
  );
  background-size: 200% 100%;
  animation: brilho-do-esqueleto 1600ms ease-in-out infinite;
}

/* Linha de texto fingida. A largura varia pra nao virar um bloco solido, que
   nao se parece com texto nenhum. */
.esqueleto-linha {
  height: 0.9rem;
  margin-bottom: 0.6rem;
}

.esqueleto-linha:last-child { margin-bottom: 0; }
.esqueleto-curta { width: 45%; }
.esqueleto-media { width: 70%; }
.esqueleto-longa { width: 92%; }

.esqueleto-titulo {
  height: 1.4rem;
  width: 38%;
  margin-bottom: 1.1rem;
}

.esqueleto-numero {
  height: 2.2rem;
  width: 55%;
  margin-bottom: 0.8rem;
}

.esqueleto-quadro {
  height: 12rem;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Entrada dos blocos ja carregados.

   Mesmo movimento da entrada da pagina, mais curto e com deslocamento menor: aqui o
   movimento acompanha um dado que chegou, e nao a apresentacao do produto.
   -------------------------------------------------------------------------- */
@keyframes surgir-curto {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* "both", e nao "forwards". Com forwards, o estado inicial da animacao so
   passa a valer quando ela COMECA: durante o animation-delay do escalonamento
   o elemento fica na opacidade natural, visivel, e some de uma vez no instante
   em que a animacao arranca, pra so entao aparecer de novo. Isso e um piscar,
   e ele cresce com o atraso: no .entrando-5 sao 280ms de elemento aceso antes
   de apagar. Com both, o estado inicial ja vale durante a espera, e o unico
   movimento que se ve e a entrada. */
/* A CURVA FAZ MAIS DIFERENCA QUE A DURACAO.

   Era `ease`, que e cubic-bezier(.25,.1,.25,1): ela ACELERA no comeco e freia
   no fim. Numa entrada isso e o pior dos dois mundos, porque o comeco e
   justamente onde o elemento ainda esta transparente: gasta-se o inicio da
   animacao num trecho lento que ninguem ve, e o bloco so fica legivel perto do
   fim. E o que dava a sensacao de arrastar.

   Esta e uma saida forte (uma "expo out"): sai rapido, cobre quase todo o
   deslocamento no primeiro terco e passa o resto assentando. O bloco fica
   legivel quase imediatamente e o movimento termina de se acomodar debaixo do
   olho que ja esta lendo. Da pra encurtar a duracao junto, de 380 pra 260ms,
   sem o corte parecer seco: a percepcao de suavidade vem da curva, nao do
   tempo no relogio.

   O deslocamento subiu de 6 pra 8px na mesma troca. Com a curva antiga, 8px
   pareceriam um tranco; com a saida forte, os 2px a mais so dao direcao ao
   movimento, dizendo de onde o bloco veio. */
.entrando {
  animation: surgir-curto 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Escalonamento curto: o olho percebe a ordem sem esperar pela ultima.

   O primeiro degrau passou a ser ZERO. Ele valia 40ms de quando a cascata era
   sempre de aba inteira, e nesse mundo o 40 era so simetria com os outros.
   Agora que o bloco e revelado assim que o dado dele chega, qualquer atraso no
   primeiro degrau e espera pura: o dado esta pronto, o bloco esta desenhado, e
   a tela fica parada de proposito.

   O passo caiu de 60 pra 45ms. Sao dois efeitos que se somam: o lote tipico
   ficou menor, porque os blocos agora se distribuem entre varias chegadas em
   vez de virem todos num lote so, e o proprio passo encurtou. Um lote cheio de
   oito fecha em 315 + 260 = 575ms, contra os 840ms de antes. */
.entrando-1 { animation-delay:   0ms; }
.entrando-2 { animation-delay:  45ms; }
.entrando-3 { animation-delay:  90ms; }
.entrando-4 { animation-delay: 135ms; }
.entrando-5 { animation-delay: 180ms; }
.entrando-6 { animation-delay: 225ms; }
.entrando-7 { animation-delay: 270ms; }
.entrando-8 { animation-delay: 315ms; }

/* Recarga por troca de filtro: mantem o desenho anterior esmaecido em vez de
   voltar ao esqueleto. Piscar a cada troca cansa e perde o ponto de leitura.
   Ficava definido duas vezes, no painel.css e no admin.css; agora e um so,
   aqui, porque o efeito e o mesmo nas duas telas e precisa continuar sendo. */
.recarregando {
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 200ms ease;
}

/* Botao que disparou uma acao demorada. A opacidade ja vem do :disabled; o
   que isto acrescenta e o cursor de espera, que diz "esta indo" sem precisar
   de mais nenhum elemento na tela. */
.botao[disabled] {
  cursor: progress;
}

/* Quem prefere menos movimento recebe tudo visivel, sem animacao */
@media (prefers-reduced-motion: reduce) {
  .esqueleto {
    animation: none;
    background-image: none;
  }

  .entrando {
    animation: none;
    opacity: 1;
    transform: none;
  }

  html {
    scroll-behavior: auto;
  }

  .linha-historico,
  .linha-projecao,
  .faixa-projecao,
  .ponto-atual {
    animation: none;
    opacity: 1;
    stroke-dashoffset: 0;
  }

  .faixa-projecao {
    opacity: 0.55;
  }

  .botao,
  .tracos-menu span {
    transition: none;
  }
}

/* ==========================================================================
   A MOLDURA EM MOVIMENTO: passagem entre abas, troca de painel e troca de
   conteudo.

   Quem liga tudo isto e o transicoes.js, e a razao de cada efeito esta escrita
   la. Aqui fica so a forma.

   TRES REGRAS VALEM PARA A SECAO INTEIRA:

   1. Nenhuma duracao passa de 400ms. Acima disso o movimento deixa de ser
      suavidade e vira espera, e a plataforma ja pede paciencia demais nas
      esperas que sao de verdade (o pedido de rede). A UNICA EXCECAO e a
      entrada da pagina (800ms por degrau), que acontece uma vez por tela
      aberta e nao a cada interacao. Ela chegou a ser encurtada pra 400ms em
      02/10/2026, para ganhar velocidade, e voltou no mesmo dia: a entrada
      perdeu o acabamento, e o tempo de abrir a tela ja tinha caido pela
      metade com os pedidos em paralelo, que e onde estava a espera de
      verdade.
   2. A curva e sempre uma saida forte: a expo out do .entrando,
      cubic-bezier(0.16, 1, 0.3, 1), ou a da entrada da pagina,
      cubic-bezier(0.22, 1, 0.36, 1), um pouco mais macia porque o
      movimento e mais longo. Nao e capricho: e o que faz o elemento ficar
      legivel no primeiro terco do tempo, em vez de so no fim.
   3. Tudo aqui e desligado em bloco pelo prefers-reduced-motion, no fim da
      secao. Efeito de moldura que ignora essa preferencia e o pior tipo de
      efeito, porque ele aparece em TODA tela, o tempo inteiro.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A saida da pagina.

   Esmaecer, e nao deslizar. O deslocamento diria uma direcao ("a tela foi para
   a esquerda"), e a plataforma nao tem direcao entre abas: a Conciliacao nao
   fica a direita do Fluxo de caixa em lugar nenhum. Esmaecer diz apenas "esta
   tela esta saindo", que e a unica coisa verdadeira.

   O elemento e o <html>, e nao o <body>: assim o fundo da pagina sai junto com
   o conteudo, e o branco que aparece no fim e o do navegador, ja no meio do
   caminho pra proxima tela.
   -------------------------------------------------------------------------- */
html.saindo-da-pagina {
  opacity: 0;

  /* Nada de clique durante a saida. Sem isto, dar dois cliques rapidos numa
     aba dispara duas navegacoes, e a segunda pode ganhar da primeira. */
  pointer-events: none;

  /* 200ms, e precisa bater com DURACAO_DA_SAIDA no transicoes.js. Vai ate o
     zero porque a pagina nova ja nasce com o conteudo escondido (a entrada
     abaixo): sai tudo, entra tudo, sem uma tela meio apagada no meio. */
  transition: opacity 200ms ease-in;
}


/* --------------------------------------------------------------------------
   A entrada de toda pagina.

   Toda tela abre do mesmo jeito: nada aparece ate a pagina estar inteira, e
   entao tudo sobe em sequencia, de cima para baixo, na ordem de leitura. Quem
   decide QUANDO e o transicoes.js (fontes, imagens da primeira tela, dados do
   primeiro pedido e o load; no maximo 3 segundos, ou 8 se ainda houver dado
   da API chegando). Aqui fica a forma.

   ATE A PAGINA FICAR PRONTA, cada degrau fica invisivel NO LUGAR FINAL dele.
   Opacidade e visibilidade nao mexem em layout, entao nada se desloca quando
   a pagina aparece. O visibility, alem da opacidade, tira o degrau da ordem de
   foco e do clique: botao invisivel nao pode ser apertado.

   QUEM E DEGRAU, na ordem do documento, que e a ordem visual:
   - a moldura que se repete em toda aba: .barra-painel, .barra-admin,
     .barra-navegacao (landing), .barra-de-abas e .rodape;
   - cada filho de um CONTAINER DE DEGRAUS: <main>, .cabecalho-da-pagina e o
     primeiro bloco dele (titulo e subtitulo separados), .topo-da-simulacao,
     .titulo-e-abertura, a coluna da marca, a caixa e o formulario das telas
     de acesso, e qualquer elemento com .revelar-filhos;
   - qualquer elemento com .revelar.
   Degrau dentro de degrau nao conta duas vezes: o de fora entra inteiro. O
   container em si nunca e escondido, so os filhos: o fundo dele ja esta la, e
   o conteudo sobe para dentro.

   ESTA LISTA EXISTE DUAS VEZES, aqui e em DEGRAUS_FIXOS/CONTAINERS_DE_DEGRAUS
   no transicoes.js, e tem que ser assim: o CSS precisa esconder antes de o
   JavaScript chegar (no Slow 3G ele chega segundos depois do HTML), e o
   JavaScript precisa saber a quem dar a vez. Mudou uma, muda a outra.

   PAGINA NOVA HERDA TUDO SOZINHA se usar a moldura e o <main> de sempre. Para
   controlar mais fino: .revelar num elemento solto, .revelar-filhos num
   wrapper cujos filhos devem entrar um por um.

   Tudo so vale com .js-ativo (posto por um script inline no <head> de cada
   pagina) e sem prefers-reduced-motion: sem JavaScript, ou pedindo menos
   movimento, nada nunca fica escondido.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.js-ativo:not(.pagina-pronta) :is(
    .barra-painel, .barra-admin, .barra-navegacao, .barra-de-abas, .rodape,
    .revelar,
    :is(main, .cabecalho-da-pagina, .cabecalho-da-pagina > div:first-child,
        .topo-da-simulacao, .titulo-e-abertura, .coluna-marca,
        .caixa-formulario, .caixa-formulario > form, .revelar-filhos) > *
  ):not(main, .cabecalho-da-pagina, .cabecalho-da-pagina > div:first-child,
        .topo-da-simulacao, .titulo-e-abertura, .coluna-marca,
        .caixa-formulario, .caixa-formulario > form, .revelar-filhos) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* Animacao de dentro dos blocos (a linha do grafico que se desenha, o
     brilho do esqueleto) espera a pagina aparecer. Sem isto, o grafico da
     landing se desenharia inteiro atras da cortina e so apareceria pronto. */
  html.js-ativo:not(.pagina-pronta) *,
  html.js-ativo:not(.pagina-pronta) *::before,
  html.js-ativo:not(.pagina-pronta) *::after {
    animation-play-state: paused !important;
  }

  /* O visibility no keyframe e o que segura o clique durante o atraso: com
     fill-mode both, o degrau fica no "from" (escondido) ate a vez dele, e
     passa a visivel no primeiro quadro da propria animacao. */
  @keyframes subir-suave {
    from { opacity: 0; transform: translateY(24px); visibility: hidden; }
    to   { opacity: 1; transform: translateY(0);    visibility: visible; }
  }

  /* --i vem do transicoes.js, pela posicao do degrau na sequencia. O
     will-change so existe enquanto a classe existe: o transicoes.js tira a
     classe no animationend, e com ela o will-change e o transform (que,
     parado ali, prenderia qualquer position: fixed de dentro do bloco). */
  html.pagina-pronta .em-sequencia {
    animation: subir-suave 800ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--i, 0) * 110ms);
    will-change: opacity, transform;
  }

  /* Quando a pagina aparece SEM a sequencia: a rede de seguranca do <head>
     venceu o prazo antes de o transicoes.js chegar (rede muito lenta), ou ele
     falhou. Sem saber a ordem dos degraus, ao menos nada aparece de estalo:
     a pagina inteira surge junto, num esmaecer curto. */
  @keyframes surgir-de-uma-vez {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  html.js-ativo.pagina-pronta:not(.entrada-em-sequencia) body {
    animation: surgir-de-uma-vez 400ms ease-out both;
  }

  /* Degrau abaixo da primeira tela: espera a rolagem trazer ele (o
     IntersectionObserver do transicoes.js troca esta classe pela de cima).

     SEM visibility: hidden, de proposito. Com ele, o conteudo abaixo da dobra
     saia da ordem de foco: quem navega pelo teclado pulava direto para o
     rodape, e leitor de tela e automacao nao alcancavam nada que ainda nao
     tivesse sido rolado. So transparente, ele continua focavel, e o foco
     revela na hora (transicoes.js). */
  html.pagina-pronta .revelar-pendente {
    opacity: 0;
    animation: none;
  }
}


/* --------------------------------------------------------------------------
   A troca de subaba.

   Seis pixels de lado, 240ms. O deslocamento e horizontal porque a cascata dos
   blocos ja e vertical: dois movimentos no mesmo eixo, um dentro do outro, se
   leem como um tranco so. Em eixos diferentes eles se distinguem, e cada um
   continua dizendo a sua coisa.

   Nao ha animacao de SAIDA do painel anterior, e isso e escolha. Esperar o
   antigo sair antes de o novo entrar dobraria o tempo da troca e deixaria um
   vazio no meio. O novo entra por cima, no lugar do antigo, na mesma volta do
   clique.
   -------------------------------------------------------------------------- */
@keyframes troca-de-painel {
  from { opacity: 0; transform: translateX(6px); }
  to   { opacity: 1; transform: translateX(0); }
}

.painel-trocando {
  animation: troca-de-painel 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
}


/* --------------------------------------------------------------------------
   A troca de conteudo dentro de um bloco que ficou parado.

   Mais curta e mais discreta que todo o resto (160ms, so opacidade): aqui a
   moldura nao mudou, so o miolo dela. Qualquer deslocamento faria o bloco
   inteiro parecer que se mexeu, quando o que mudou foi o texto de dentro.
   -------------------------------------------------------------------------- */
@keyframes conteudo-trocado {
  from { opacity: 0.25; }
  to   { opacity: 1; }
}

.conteudo-trocado {
  animation: conteudo-trocado 160ms ease-out both;
}


/* ==========================================================================
   O GLOSSARIO: o marcador ao lado do termo e o balao que ele abre.

   Quem liga e o glossario.js, e a razao de o glossario existir esta escrita
   la. O resumo: os termos tecnicos ficam na tela, porque quem usa isto senta
   com banco e com contador, e a traducao fica pendurada neles.
   ========================================================================== */

/* O termo em si continua texto comum. A unica marca nele e um sublinhado
   pontilhado discreto, que diz "isto tem explicacao" sem competir com link
   nenhum: link e solido e azul, isto e pontilhado e da cor do texto. */
.termo-explicado {
  border-bottom: 1px dotted var(--linha-de-campo);
}

/* O SUBLINHADO SAI QUANDO O TERMO E O PROPRIO ROTULO.

   Ele existe pra o termo se destacar DENTRO de uma frase: no meio de "a DRE e o
   balanco", o pontilhado e o que diz quais das palavras tem explicacao atras.

   Quando o termo e o rotulo inteiro — o nome de um indicador numa linha da
   tabela, o titulo de um cartao, a sigla embaixo de um cursor — nao ha frase
   de onde se destacar, e o pontilhado deixa de informar. Pior: na Visao geral
   sao DEZ linhas seguidas, e dez sublinhados pontilhados empilhados viram uma
   textura que compete com o proprio dado.

      Nesses casos o circulo ao lado ja e o sinal inteiro, e ele basta.

   HA UM SEGUNDO MOTIVO, e ele e mais grave que o ruido: varios destes rotulos
   sao elementos de BLOCO (o .rotulo-do-fato e um <dt>, o .rotulo-do-giro e um
   <p>). Num elemento de bloco o border-bottom nao acompanha a palavra: ele
   atravessa a largura inteira da coluna, e o que devia ser um sublinhado
   discreto de duas palavras vira um filete pontilhado cortando o cartao. No
   bloco escuro da Visao geral isso aparecia em cima dos tres numeros que abrem
   a plataforma. */
.nome-indicador.termo-explicado,
.rotulo-do-fato.termo-explicado,
.rotulo-do-giro.termo-explicado,
.tecnico-do-kpi.termo-explicado,
.tecnico-do-cursor.termo-explicado {
  border-bottom: none;
}

/* O marcador.

   ELE E MEDIDO EM em, E NAO EM PIXEL, e isso nao e preferencia de unidade.

   O mesmo marcador e pendurado em texto de tamanhos muito diferentes: no nome
   de um indicador do razao (15px), no meio de um paragrafo de apoio (15px) e
   no rotulo tecnico de um cursor da Projecao e simulacao (11,5px). Em pixel
   fixo, o circulo que fica certo no paragrafo vira um balao maior que a
   propria sigla no rotulo tecnico. Em em, ele acompanha o que esta ao lado
   dele e continua parecendo uma nota de rodape nos tres lugares.

   O minimo em pixel existe pro outro lado do mesmo problema: em texto
   pequeno, a proporcao sozinha produziria um alvo de toque de 11px, pequeno
   demais pra acertar com o dedo. */
.marca-de-termo {
  appearance: none;
  border: 1px solid var(--linha-de-campo);
  background-color: transparent;
  color: var(--texto-secundario);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: var(--fonte-texto);
  font-size: 0.7em;
  font-weight: 700;
  line-height: 1;

  /* 1.45em do proprio corpo, que ja e 0,7 do corpo em volta: o circulo fica
     em torno de 1em do texto ao lado. */
  width: 1.45em;
  height: 1.45em;
  min-width: 13px;
  min-height: 13px;
  padding: 0;
  margin-inline-start: 0.4em;
  /* Sobe um pouco: centralizado na linha, o circulo fica pesado embaixo da
     palavra em vez de ao lado dela. */
  vertical-align: 0.1em;

  border-radius: 50%;
  cursor: help;

  transition: background-color 160ms ease, color 160ms ease,
              border-color 160ms ease;
}

.marca-de-termo:hover {
  background-color: var(--azul-acao);
  border-color: var(--azul-acao);
  color: var(--branco);
}

.marca-de-termo:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
}

/* Aberto, o marcador fica aceso: com dois ou tres termos visiveis na mesma
   frase, e o unico jeito de saber de qual deles o balao esta falando. */
.marca-de-termo[aria-expanded="true"] {
  background-color: var(--azul-acao);
  border-color: var(--azul-acao);
  color: var(--branco);
}

/* Sobre fundo escuro (o bloco do mes na Visao geral, o hero da simulacao) o
   cinza do marcador desaparece. Estas duas regras nao sao um tema a parte: sao
   a mesma peca lida contra o outro fundo. */
.destaque-do-mes .marca-de-termo,
.cartao-escuro .marca-de-termo,
.cartao-hero .marca-de-termo {
  border-color: rgba(255, 255, 255, 0.45);
  color: rgba(255, 255, 255, 0.85);
}

.destaque-do-mes .marca-de-termo:hover,
.cartao-escuro .marca-de-termo:hover,
.cartao-hero .marca-de-termo:hover,
.destaque-do-mes .marca-de-termo[aria-expanded="true"],
.cartao-escuro .marca-de-termo[aria-expanded="true"],
.cartao-hero .marca-de-termo[aria-expanded="true"] {
  background-color: var(--branco);
  border-color: var(--branco);
  color: var(--azul-profundo);
}

.destaque-do-mes .termo-explicado,
.cartao-escuro .termo-explicado,
.cartao-hero .termo-explicado {
  border-bottom-color: rgba(255, 255, 255, 0.35);
}


/* O balao.

   position: fixed pelo mesmo motivo do .menu-do-grupo: ele precisa escapar do
   recorte do cartao em que o termo mora. Cartao com overflow escondido — e ha
   varios, porque tabela rolando de lado exige — cortaria o balao pela metade.

   z-index acima do menu da barra de abas (30): o balao cobre a tela inteira.
   -------------------------------------------------------------------------- */
.balao-de-termo {
  position: fixed;
  z-index: 90;
  width: min(23rem, calc(100vw - 1.5rem));
  padding: 1rem 1.1rem 1.05rem;

  background-color: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-bloco);
  box-shadow: 0 12px 32px rgba(12, 26, 43, 0.16);

  /* O texto do balao e sempre menor que o corpo da pagina: ele e uma nota, e
     nota que compete em tamanho com o texto principal deixa de ser nota. */
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--texto);
}

.titulo-do-termo {
  font-family: var(--fonte-titulo);
  font-size: var(--t-sub);
  font-weight: 600;
  line-height: 1.25;
  color: var(--azul-profundo);
  /* Espaco pro botao de fechar, que mora no canto */
  padding-right: 1.5rem;
  margin-bottom: 0.5rem;
}

/* A frase simples e a primeira coisa, e ela e a mais legivel do balao: cor de
   texto cheia, sem recuo, sem etiqueta em cima. Quem abriu o balao quer
   exatamente isto, e tudo o mais e opcional. */
.frase-do-termo {
  margin-bottom: 0.7rem;
}

/* O "por que importa" recua atras de um filete azul. O recuo separa sem
   precisar de um titulo "Por que importa", que gastaria uma linha inteira pra
   dizer o que a forma ja diz. */
.porque-do-termo {
  padding-left: 0.75rem;
  border-left: 2px solid var(--azul-claro);
  color: var(--texto-secundario);
}

/* A conta fecha o balao, em corpo menor ainda: ela e pra quem quiser conferir,
   e nao faz parte do entendimento. */
.conta-do-termo {
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--linha);
  font-size: var(--t-mini);
  color: var(--texto-secundario);
}

.fechar-o-termo {
  position: absolute;
  top: 0.45rem;
  right: 0.5rem;

  appearance: none;
  border: 0;
  background: transparent;
  color: var(--texto-secundario);

  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border-radius: var(--raio-selo);

  font-family: var(--fonte-texto);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.fechar-o-termo:hover {
  background-color: var(--branco-frio);
  color: var(--texto);
}

.fechar-o-termo:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: -2px;
}

/* A entrada do balao sai DA palavra: ele sobe 4px quando abre pra baixo e
   desce 4px quando abre pra cima, de modo que o movimento sempre aponta de
   volta pro termo que o chamou. */
@keyframes balao-surgindo {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes balao-surgindo-de-baixo {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.balao-entrando {
  animation: balao-surgindo 180ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.balao-entrando.balao-para-cima {
  animation-name: balao-surgindo-de-baixo;
}


/* ==========================================================================
   A FAIXA "O QUE DA PRA FAZER AQUI"

   Uma faixa clara logo abaixo do titulo de cada aba, com tres a quatro frases
   curtas dizendo o que aquela tela responde. Ela existe porque o nome da aba
   nao basta: "Capital de giro" e "Conciliacao" sao duas palavras que o dono de
   uma distribuidora nao necessariamente distingue, e ate aqui a unica pista
   estava escondida dentro do menu da barra de abas, que a pessoa so ve se
   abrir o grupo.

   Ela e DISPENSAVEL de proposito: quem ja sabe fecha e ela nao volta naquela
   tela, guardada no proprio navegador. Ajuda que nao pode ser dispensada vira
   obstaculo na segunda semana de uso.
   ========================================================================== */
.faixa-de-orientacao {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;

  margin-bottom: 1.5rem;
  padding: 1rem 1.15rem;

  background-color: var(--branco-frio);
  border: 1px solid var(--linha);
  /* O filete azul a esquerda e o mesmo recurso do .porque-do-termo: marca a
     faixa como apoio, e nao como mais um cartao de conteudo. */
  border-left: 3px solid var(--azul-claro);
  border-radius: var(--raio-bloco);
}

.miolo-da-orientacao {
  flex: 1;
  min-width: 0;
}

/* A PRIMEIRA LINHA DA FAIXA E UMA FRASE, E FRASE NAO VAI EM CAIXA ALTA.

   Ela nasceu com o tratamento das outras etiquetas da plataforma: maiuscula,
   espacada, 12px. Aquele tratamento serve pra rotulo de duas ou tres palavras
   ("Base ativa", "Atencao do mes"), que se le de relance.

   Aqui o conteudo e outro: e a descricao da tela, uma frase inteira, e uma
   frase inteira em caixa alta espacada e lenta de ler — exatamente o oposto do
   que uma faixa de ajuda deveria ser. No celular ela quebrava em duas linhas e
   o problema dobrava.

   Entao ela vira o que e: a frase de abertura da faixa, em caixa normal e no
   tom do texto principal, com peso pra se distinguir da lista abaixo. */
.titulo-da-orientacao {
  font-family: var(--fonte-texto);
  font-size: var(--t-corpo);
  font-weight: 600;
  line-height: 1.4;
  color: var(--texto);
  margin-bottom: 0.55rem;
}

/* As frases em lista, e nao em paragrafo corrido: cada uma responde uma
   pergunta diferente, e paragrafo junta as tres numa so. */
.lista-da-orientacao {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;

  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--texto);
}

.lista-da-orientacao li {
  /* Espaco pro marcador desenhado abaixo */
  padding-left: 1.05rem;
  position: relative;
}

/* O marcador e um traco, e nao um ponto: ponto de lista pede leitura de
   inventario, traco pede leitura de frase. E aqui sao frases. */
.lista-da-orientacao li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 0.5rem;
  height: 1px;
  background-color: var(--azul-medio);
}

.fechar-a-orientacao {
  appearance: none;
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: var(--texto-secundario);

  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  margin: -0.2rem -0.3rem 0 0;
  border-radius: var(--raio-selo);

  font-family: var(--fonte-texto);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.fechar-a-orientacao:hover {
  background-color: var(--branco);
  color: var(--texto);
}

.fechar-a-orientacao:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: -2px;
}


/* --------------------------------------------------------------------------
   Movimento reduzido: a secao inteira desligada.

   Mora aqui, e nao no bloco de prefers-reduced-motion la de cima, porque tudo
   que esta secao acrescentou e apagado por ela. Deixar a lista junto do que
   ela desliga e o que faz alguem lembrar de acrescentar a proxima linha
   quando um efeito novo entrar.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.saindo-da-pagina {
    opacity: 1;
    transition: none;
  }

  .painel-trocando,
  .conteudo-trocado,
  .balao-entrando {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .marca-de-termo {
    transition: none;
  }
}

/* ==========================================================================
   Media queries: 640px, 900px, 1280px
   ========================================================================== */

@media (min-width: 640px) {
  .passo {
    grid-template-columns: 6rem 1fr;
    align-items: start;
    gap: 1.5rem;
  }
}

@media (min-width: 900px) {
  /* Menu completo no lugar do recolhido */
  .botao-menu {
    display: none;
  }

  .lista-links {
    display: flex;
    position: static;
    background: none;
    border: none;
    padding: 0;
    gap: 2.25rem;
    margin-right: 2.25rem;
  }

  .lista-links .link-navegacao {
    padding-block: 0;
    border-bottom: none;
  }

  .heroi-grade {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 4rem;
  }

  .colunas-diferencial {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  .rodape-interno {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width: 1280px) {
  .heroi-grade {
    gap: 6rem;
  }
}

/* ==========================================================================
   Os avisos de entrada (avisos-de-entrada.js): o arquivo que falta e o
   aceite da politica.

   A faixa mora no topo do conteudo de toda tela logada enquanto faltar o
   arquivo. Bronze, e nao vermelho: o vermelho e reservado para dado que
   piorou, e mes nao enviado e tarefa, nao resultado. A borda grossa a
   esquerda e o mesmo sinal da .area-aviso, mais forte quando e exigencia
   (mes ja fechado) do que quando e lembrete (mes acabando).
   ========================================================================== */

.faixa-de-envio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  margin-bottom: 1.25rem;
  padding: 0.9rem 1.15rem;
  border: 1px solid var(--linha);
  border-left: 4px solid var(--bronze);
  border-radius: var(--raio-bloco);
  background-color: var(--tinta-bronze);
  color: var(--texto);
}

.faixa-de-envio.aviso-de-envio-lembrete {
  border-left-color: var(--azul-medio);
  background-color: var(--branco);
}

.texto-da-faixa-de-envio {
  flex: 1 1 22rem;
  min-width: 0;
}

.titulo-da-faixa-de-envio {
  font-weight: 600;
  font-size: var(--t-corpo);
  margin-bottom: 0.2rem;
}

.mensagem-da-faixa-de-envio,
.dica-da-faixa-de-envio {
  font-size: var(--t-base);
  color: var(--texto-secundario);
}

.dica-da-faixa-de-envio {
  font-weight: 600;
  color: var(--texto);
}

.caixa-de-entrada {
  width: min(32rem, calc(100vw - 2rem));
  margin: auto;
  padding: 1.5rem;
  border: 1px solid var(--linha);
  border-top: 4px solid var(--bronze);
  border-radius: var(--raio-cartao);
  background-color: var(--branco);
  color: var(--texto);
  font-family: var(--fonte-texto);
}

.caixa-de-entrada.aviso-de-envio-lembrete,
.caixa-de-entrada.caixa-do-aceite {
  border-top-color: var(--azul-acao);
}

.caixa-de-entrada::backdrop {
  background-color: rgba(12, 26, 43, 0.45);
}

.caixa-de-entrada h2 {
  font-family: var(--fonte-titulo);
  font-size: var(--t-secao);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.caixa-de-entrada p {
  font-size: var(--t-base);
  line-height: 1.55;
  margin-bottom: 0.75rem;
}

.links-do-aceite a {
  color: var(--azul-acao);
  font-weight: 600;
}

.caixa-de-marcar {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: var(--t-base);
  margin: 0.25rem 0 0.75rem;
  cursor: pointer;
}

.caixa-de-marcar input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  accent-color: var(--azul-acao);
  flex-shrink: 0;
}

.mensagem-da-caixa:empty {
  display: none;
}

.mensagem-da-caixa {
  color: var(--dado-negativo);
}

.linha-da-caixa {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.linha-da-caixa .botao[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Os links da Politica de Privacidade e dos Termos no rodape da landing. */
.rodape-legal {
  font-size: var(--t-mini);
  color: var(--azul-claro);
}

.rodape-legal a {
  color: var(--azul-claro);
}

.rodape-legal a:hover {
  color: var(--branco);
}


/* --------------------------------------------------------------------------
   As telas do grupo em pilulas, no topo da pagina (navegacao.js). So no
   desktop: no celular a barra ja abre a mesma linha.
   -------------------------------------------------------------------------- */
.pilulas-do-grupo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.375rem;
}

.pilula-do-grupo {
  display: inline-flex;
  align-items: center;
  padding: 0.4375rem 0.875rem;
  border: 1px solid #DCE4EE;
  border-radius: 999px;
  background-color: var(--branco);
  color: #33506E;
  font-size: 0.84375rem;
  font-weight: 600;
  text-decoration: none;
}

.pilula-do-grupo:hover {
  border-color: var(--azul-acao);
  color: var(--azul-profundo);
  text-decoration: none;
}

.pilula-do-grupo:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
}

.pilula-do-grupo.pilula-atual {
  border-color: var(--azul-profundo);
  background-color: var(--azul-profundo);
  color: var(--branco);
  font-weight: 700;
}

@media (max-width: 899px) {
  .pilulas-do-grupo {
    display: none;
  }
}

/* A faixa numerada das telas redesenhadas: cartao branco, as frases lado a
   lado com o numero num circulo, e o x num quadrado. */
.faixa-numerada {
  gap: 1rem;
  padding: 1rem 1.125rem 1rem 1.25rem;
  background-color: var(--branco);
  border: 1px solid #E3E9F1;
  border-left: 1px solid #E3E9F1;
}

.faixa-numerada .titulo-da-orientacao {
  margin-bottom: 0.625rem;
  font-size: 0.90625rem;
  font-weight: 700;
  color: var(--azul-profundo);
}

.faixa-numerada .lista-da-orientacao {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.625rem 1.375rem;
  font-size: 0.84375rem;
  color: #42566E;
}

.faixa-numerada .lista-da-orientacao li {
  display: flex;
  gap: 0.625rem;
  padding-left: 0;
}

.faixa-numerada .lista-da-orientacao li::before {
  content: none;
}

.numero-da-orientacao {
  display: flex;
  flex: 0 0 1.375rem;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  background-color: #F0F4F9;
  color: var(--azul-acao);
  font-size: var(--t-micro);
  font-weight: 700;
}

.faixa-numerada .fechar-a-orientacao {
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  border-radius: var(--raio-controle);
  background-color: #F4F7FB;
  color: var(--texto-secundario);
  font-size: 1.25rem;
}


/* Nota de ERP (mostrar_nota_do_erp, em comum.js): o que muda nesta tela
   quando a empresa tem a Conta Azul conectada. Azul de informacao, e nao o
   bronze de ressalva: nao e aviso de risco, e o caminho que mudou. */
.nota-do-erp {
  margin: 0.5rem 0 0.875rem;
  padding: 0.625rem 0.875rem;
  border-left: 3px solid var(--azul-acao);
  background-color: var(--azul-claro);
  border-radius: 0 var(--raio-bloco) var(--raio-bloco) 0;
  font-size: var(--t-mini);
  line-height: 1.55;
  color: var(--texto);
}