/* Identidade da Audácia, etapa 4.
   ---------------------------------------------------------------------------
   A marca não foi inventada aqui: o coral `#EF5545` e a `Space Grotesk` são os
   do site studioaudacia.com.br (kit do Elementor, `post-33.css`), e a logo em
   vetor veio do próprio Tiago em 12/08/2026.

   REGRA DE COR DESTE SISTEMA: o coral da marca NUNCA colore número. Ele fica na
   logo, no item de navegação ativo, no foco e nos detalhes de chrome. Dinheiro
   que sai já é vermelho por convenção contábil, e um coral vivo do lado dele
   faria a tela ter duas coisas parecidas querendo dizer coisas diferentes.

   TEMA: o padrão é o do navegador da pessoa (`prefers-color-scheme`), e o
   botão no topo troca e lembra a escolha. Por isso toda cor nasce aqui em
   cima, em token, e nenhum bloco lá embaixo tem cor literal: cor literal no
   meio do arquivo é o que faz um tema ficar meio pronto sem ninguém notar. */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fontes/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fontes/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- tema claro
   É o `:root` puro, sem media query: assim ele é o chão de tudo, e o tema
   escuro só redefine token. */
:root {
  --marca: #ef5545;
  --marca-forte: #d93f30;
  --marca-fraca: #fdece9;

  --fundo: #f6f7f8;
  --painel: #ffffff;
  --painel-2: #f0f1f4;
  --borda: #e3e5ea;
  --borda-forte: #cdd1d9;
  --linha: #ecedf1;
  --realce: #f7f8fa;

  --texto: #14161a;
  --fraco: #626a78;

  --verde: #167a52;
  --vermelho: #c0392f;
  --azul: #2159c7;
  --ambar: #8a6410;

  /* Botão principal: tinta cheia, que é o botão preto sólido da referência que
     ele mandou em 04/08. Inverte sozinho no escuro. */
  --botao-fundo: #14161a;
  --botao-fundo-hover: #000000;
  --botao-texto: #ffffff;

  --aviso-fundo: #fff8e8;
  --aviso-borda: #ecd9a6;
  --aviso-texto: #6b4d0e;
  --aviso-titulo: #4a350a;

  --atraso-fundo: #fdf0ee;
  --atraso-borda: #f0c6c1;
  --atraso-texto: #8e2f27;
  --atraso-titulo: #6d211a;

  --ok-fundo: #eaf7f0;
  --ok-borda: #b9e2cd;
  --ok-texto: #13603f;
  --ok-titulo: #0d4a30;

  /* Bloco de plano: o que ainda não aconteceu. */
  --plano-borda: #c3cfe2;
  --plano-fundo-1: #f4f7fd;
  --plano-fundo-2: #eef2fa;
  --plano-texto: #3e4d66;
  --plano-selo-fundo: #dfe8f8;
  --plano-selo-borda: #c0d1ee;
  --plano-selo-texto: #24467f;
  --previsto-fundo: #f4f7fd;
  --previsto-borda: #c3cfe2;
  --previsto-valor: #2a4b80;

  --selo-verde-borda: #a8d8c1;
  --selo-vermelho-borda: #eec5c1;
  --selo-ambar-borda: #e6d3a3;

  --sombra: 0 1px 2px rgba(16, 20, 28, 0.06), 0 4px 14px rgba(16, 20, 28, 0.05);
  --esquema: light;

  --fonte: "Space Grotesk", ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* ---------------------------------------------------------------- tema escuro
   Duas portas para o mesmo lugar: o navegador da pessoa, e a escolha dela.
   A media query se recusa a agir quando ela escolheu claro na mão, senão o
   botão só funcionaria em quem já estava no claro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --marca: #ff6a58;
    --marca-forte: #ff8a7b;
    --marca-fraca: #2a1714;

    --fundo: #0e0f13;
    --painel: #16181e;
    --painel-2: #1e212a;
    --borda: #2a2e38;
    --borda-forte: #3c4252;
    --linha: #22252e;
    --realce: #1b1e26;

    --texto: #e8eaef;
    --fraco: #99a1b0;

    --verde: #46c08a;
    --vermelho: #e0655f;
    --azul: #6aa6f8;
    --ambar: #e0b25f;

    --botao-fundo: #e8eaef;
    --botao-fundo-hover: #ffffff;
    --botao-texto: #0e0f13;

    --aviso-fundo: #201d15;
    --aviso-borda: #453a1f;
    --aviso-texto: #e6cf9a;
    --aviso-titulo: #f0dcae;

    --atraso-fundo: #221618;
    --atraso-borda: #4d2f2d;
    --atraso-texto: #e8b6b2;
    --atraso-titulo: #f4c9c5;

    --ok-fundo: #14211a;
    --ok-borda: #2c4d3e;
    --ok-texto: #9fd9bd;
    --ok-titulo: #c6ecda;

    --plano-borda: #3c4a5e;
    --plano-fundo-1: #141a24;
    --plano-fundo-2: #12161d;
    --plano-texto: #b9c6da;
    --plano-selo-fundo: #26324a;
    --plano-selo-borda: #3a4a68;
    --plano-selo-texto: #9dc0f5;
    --previsto-fundo: #141a24;
    --previsto-borda: #33415a;
    --previsto-valor: #b9d0f2;

    --selo-verde-borda: #2c4d3e;
    --selo-vermelho-borda: #4d2f2d;
    --selo-ambar-borda: #4d3f21;

    --sombra: none;
    --esquema: dark;
  }
}

/* A escolha explícita ganha do navegador, nos dois sentidos. Sem este bloco,
   quem está no claro nunca conseguiria ver o escuro. */
:root[data-tema="escuro"] {
  --marca: #ff6a58;
  --marca-forte: #ff8a7b;
  --marca-fraca: #2a1714;

  --fundo: #0e0f13;
  --painel: #16181e;
  --painel-2: #1e212a;
  --borda: #2a2e38;
  --borda-forte: #3c4252;
  --linha: #22252e;
  --realce: #1b1e26;

  --texto: #e8eaef;
  --fraco: #99a1b0;

  --verde: #46c08a;
  --vermelho: #e0655f;
  --azul: #6aa6f8;
  --ambar: #e0b25f;

  --botao-fundo: #e8eaef;
  --botao-fundo-hover: #ffffff;
  --botao-texto: #0e0f13;

  --aviso-fundo: #201d15;
  --aviso-borda: #453a1f;
  --aviso-texto: #e6cf9a;
  --aviso-titulo: #f0dcae;

  --atraso-fundo: #221618;
  --atraso-borda: #4d2f2d;
  --atraso-texto: #e8b6b2;
  --atraso-titulo: #f4c9c5;

  --ok-fundo: #14211a;
  --ok-borda: #2c4d3e;
  --ok-texto: #9fd9bd;
  --ok-titulo: #c6ecda;

  --plano-borda: #3c4a5e;
  --plano-fundo-1: #141a24;
  --plano-fundo-2: #12161d;
  --plano-texto: #b9c6da;
  --plano-selo-fundo: #26324a;
  --plano-selo-borda: #3a4a68;
  --plano-selo-texto: #9dc0f5;
  --previsto-fundo: #141a24;
  --previsto-borda: #33415a;
  --previsto-valor: #b9d0f2;

  --selo-verde-borda: #2c4d3e;
  --selo-vermelho-borda: #4d2f2d;
  --selo-ambar-borda: #4d3f21;

  --sombra: none;
  --esquema: dark;
}

* { box-sizing: border-box; }

/* Diz ao navegador em que tema ele deve desenhar o que é dele: calendário do
   campo de data, barra de rolagem, seleção. Era `color-scheme: dark` repetido
   em cada campo, e no claro isso deixaria calendário preto sobre tela branca. */
html { color-scheme: var(--esquema); }

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

a { color: inherit; text-decoration: none; }

/* ------------------------------------------------------------------- a casca
   O menu saiu do topo e foi para a lateral esquerda em 31/08/2026, a pedido do
   Tiago depois de usar o sistema um dia inteiro. Doze itens em fileira única não
   têm hierarquia nenhuma: a tela que ele abre todos os dias ficava do lado da
   que ele abre uma vez por trimestre, e em tela estreita a fileira quebrava em
   duas linhas em cima do conteúdo. Na lateral cabem os grupos, e o nome de cada
   grupo faz o trabalho que a divisória fazia mal. */
body:not(.entrada) {
  display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh;
}

.lateral {
  position: sticky; top: 0; align-self: start; z-index: 20;
  height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 20px;
  padding: 17px 14px 14px; background: var(--painel);
  border-right: 1px solid var(--borda);
  /* O fio da marca, que era a linha do topo, agora de pé. É onde o coral cabe
     sem disputar com número nenhum. */
  border-left: 2px solid var(--marca);
}

.marca { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.01em; }
/* Na lateral o nome do sistema vai embaixo da logo: ao lado dela, "fluxo de
   caixa" quebrava em duas linhas dentro de 236px. */
.lateral .marca { flex-direction: column; align-items: flex-start; gap: 6px; padding: 0 4px; }
.lateral .marca span { white-space: nowrap; }
.marca .logo { display: block; height: 21px; width: auto; color: var(--texto); }
/* O nome do sistema, ao lado da logo. A logo já diz "Audácia", então repetir a
   palavra ao lado dela seria dizer duas vezes. */
.marca span { color: var(--fraco); font-weight: 400; font-size: 13.5px; letter-spacing: 0; }

.lateral nav { display: flex; flex-direction: column; gap: 1px; }
.lateral nav a {
  padding: 7px 11px; border-radius: 8px; color: var(--fraco); font-size: 14px;
  border: 1px solid transparent;
}
.lateral nav a:hover { background: var(--painel-2); color: var(--texto); }
.lateral nav a.ativo {
  background: var(--painel-2); color: var(--texto); border-color: var(--borda);
  box-shadow: inset 2px 0 0 var(--marca);
}
.lateral .grupo-titulo {
  margin: 16px 0 4px; padding: 0 11px; color: var(--fraco); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.09em; opacity: 0.75;
}
.lateral .pe-lateral {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--borda);
  display: flex; flex-direction: column; gap: 8px;
  font-size: 12.5px; color: var(--fraco);
}
.lateral .pe-acoes { display: flex; align-items: center; gap: 10px; }
.lateral .pe-acoes a { text-decoration: underline; }
.lateral .pe-acoes a:hover { color: var(--texto); }
.lateral .quem { color: var(--fraco); }
.lateral .quem:hover { color: var(--texto); text-decoration: underline; }

/* A barra de cima do conteúdo. No computador ela leva só o carimbo e o botão de
   lançar; no celular ela ganha o botão do menu e a logo. */
.coluna { min-width: 0; display: flex; flex-direction: column; }
.topo {
  display: flex; align-items: center; gap: 12px; min-height: 46px;
  padding: 9px 28px; border-bottom: 1px solid var(--borda); background: var(--painel);
  position: sticky; top: 0; z-index: 10;
}
.topo .direita { margin-left: auto; color: var(--fraco); font-size: 12.5px; display: flex; align-items: center; gap: 10px; }
.topo .carimbo { white-space: nowrap; }
.botao-menu, .marca-movel, .veu-menu { display: none; }

/* -------------------------------------------------------- menu no celular
   Abre por caixa de seleção, sem uma linha de script: é o primeiro elemento de
   que a pessoa precisa e não pode depender de o JavaScript ter carregado. */
.gatilho-menu { position: absolute; opacity: 0; pointer-events: none; }

@media (max-width: 900px) {
  body:not(.entrada) { grid-template-columns: minmax(0, 1fr); }
  .lateral {
    position: fixed; top: 0; left: 0; bottom: 0; width: 240px; height: 100%;
    transform: translateX(-102%); transition: transform 0.18s ease-out;
    box-shadow: var(--sombra);
  }
  .gatilho-menu:checked ~ .lateral { transform: none; }
  .gatilho-menu:checked ~ .veu-menu {
    display: block; position: fixed; inset: 0; z-index: 15;
    background: rgba(0, 0, 0, 0.35);
  }
  .botao-menu {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 34px; height: 32px; padding: 0 7px; cursor: pointer;
    border: 1px solid var(--borda); border-radius: 8px;
  }
  .botao-menu span { display: block; height: 1.5px; background: var(--texto); border-radius: 2px; }
  .marca-movel { display: block; }
  .marca-movel .logo { display: block; height: 19px; width: auto; color: var(--texto); }
  .topo { padding: 9px 16px; }
  .topo .carimbo { display: none; }
  main { padding: 20px 16px 60px; }
}

/* Botão de tema. Mostra para onde vai, não onde está: quem está no escuro vê o
   sol, que é o que ele ganha ao clicar. */
.tema {
  background: transparent; border: 1px solid var(--borda); border-radius: 7px;
  color: var(--fraco); font: inherit; font-size: 13px; line-height: 1;
  padding: 5px 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.tema:hover { color: var(--texto); border-color: var(--borda-forte); }
.tema svg { width: 14px; height: 14px; display: block; }
/* Um ícone por tema, e o navegador escolhe qual sem JS nenhum. */
.tema .p-escuro { display: none; }
:root[data-tema="escuro"] .tema .p-escuro { display: block; }
:root[data-tema="escuro"] .tema .p-claro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tema .p-escuro { display: block; }
  :root:not([data-tema="claro"]) .tema .p-claro { display: none; }
}

main { padding: 26px 28px 60px; max-width: 1360px; margin: 0 auto; width: 100%; }

h1 { font-size: 22px; margin: 0 0 4px; letter-spacing: -0.02em; font-weight: 650; }
h2 { font-size: 15px; margin: 30px 0 12px; font-weight: 600; letter-spacing: -0.01em; }
.sub { color: var(--fraco); font-size: 13px; margin: 0 0 22px; }

/* Seletores de período. Substituíram duas fileiras de botões que cresciam um
   par a cada mês novo de dado: em agosto já eram dezesseis. */
.periodo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 4px; }
.periodo label {
  display: flex; align-items: center; gap: 7px;
  color: var(--fraco); font-size: 12.5px;
}
.periodo input[type="month"], .periodo input[type="date"], .periodo select,
.periodo input[type="text"] {
  background: var(--painel); border: 1px solid var(--borda); border-radius: 8px;
  color: var(--texto); font: inherit; font-size: 13px; padding: 6px 10px;
}
.periodo input[type="text"] { min-width: 260px; }
.periodo input:focus, .periodo select:focus { outline: none; border-color: var(--marca); }

.cabecalho {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 18px;
}
.cabecalho .sub { margin-bottom: 0; }

.filtros {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--borda);
}
.filtros .botao-forte { margin-left: auto; }

.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.cartao {
  background: var(--painel); border: 1px solid var(--borda); border-radius: 11px; padding: 15px 17px;
  box-shadow: var(--sombra);
}
.cartao .rotulo { color: var(--fraco); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.cartao .valor { font-size: 25px; font-weight: 620; margin-top: 7px; letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums; }
.cartao .nota { font-size: 12.5px; color: var(--fraco); margin-top: 5px; }
.pos { color: var(--verde); } .neg { color: var(--vermelho); }

.painel {
  background: var(--painel); border: 1px solid var(--borda); border-radius: 11px;
  padding: 17px 19px; overflow-x: auto; box-shadow: var(--sombra);
}

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; color: var(--fraco); font-weight: 500; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.05em; padding: 0 12px 9px 0;
  border-bottom: 1px solid var(--borda); white-space: nowrap;
}
/* Cabeçalho que ordena. Nenhuma cor nova: o rótulo herda a cor do `th`, e a
   coluna que está mandando fica na cor do texto normal, que já é o contraste
   mais forte da tabela. A seta é ↑ / ↓ (U+2191 / U+2193) porque essas duas
   estão dentro do subconjunto da Space Grotesk que servimos; ▲ e ▼ não estão e
   cairiam numa fonte do sistema, do lado de um rótulo que não caiu. */
th a.ordenar {
  color: inherit; text-decoration: none; display: inline-flex; gap: 4px;
  align-items: baseline; white-space: nowrap;
}
th a.ordenar:hover { color: var(--texto); text-decoration: underline; }
th a.ordenar:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 3px; }
th[aria-sort] a.ordenar { color: var(--texto); }
th a.ordenar .seta { font-size: 10.5px; }
th a.ordenar .seta.apagada { opacity: 0; }
th a.ordenar:hover .seta.apagada, th a.ordenar:focus-visible .seta.apagada { opacity: 0.5; }

td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--linha); font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: none; }
td.n, th.n { text-align: right; }
tbody tr:hover td { background: var(--realce); }
.linha-clicavel { cursor: pointer; }

.fraco { color: var(--fraco); }
.pequeno { font-size: 12.5px; }
.barra { height: 6px; background: var(--painel-2); border-radius: 3px; overflow: hidden; min-width: 60px; }
.barra i { display: block; height: 100%; background: var(--azul); }

.aviso {
  background: var(--aviso-fundo); border: 1px solid var(--aviso-borda); color: var(--aviso-texto);
  border-radius: 9px; padding: 11px 15px; font-size: 13px; margin: 16px 0;
}
.aviso b { color: var(--aviso-titulo); }

/* Atraso não é aviso operacional, é dinheiro que faltou: cor própria. */
.aviso.atraso { background: var(--atraso-fundo); border-color: var(--atraso-borda); color: var(--atraso-texto); }
.aviso.atraso b { color: var(--atraso-titulo); }

/* Bloco de plano. Fundo e borda diferentes do resto pra ninguém confundir o que
   está lançado com o que aconteceu, mesmo batendo o olho de longe. */
.plano {
  border: 1px dashed var(--plano-borda); border-radius: 12px; padding: 15px 17px 17px;
  margin: 4px 0 26px;
  background: linear-gradient(180deg, var(--plano-fundo-1) 0%, var(--plano-fundo-2) 100%);
}
.plano-faixa {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; color: var(--plano-texto); margin-bottom: 14px;
}
.plano-faixa b { color: var(--texto); }
.plano-selo {
  flex: none; background: var(--plano-selo-fundo); color: var(--plano-selo-texto);
  border: 1px solid var(--plano-selo-borda); border-radius: 5px; padding: 1px 9px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em;
  font-weight: 600; margin-top: 2px;
}
.cartao.previsto { background: var(--previsto-fundo); border-style: dashed; border-color: var(--previsto-borda); }
.cartao.previsto .valor { color: var(--previsto-valor); }
.previsto-txt { color: var(--plano-texto); }

.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .duas { grid-template-columns: 1fr; } }

.etiqueta {
  display: inline-block; padding: 1px 8px; border-radius: 20px; font-size: 11.5px;
  border: 1px solid var(--borda); color: var(--fraco);
}
.etiqueta.ativo { color: var(--verde); border-color: var(--selo-verde-borda); }
.etiqueta.receita { color: var(--verde); border-color: var(--selo-verde-borda); }
.etiqueta.despesa { color: var(--vermelho); border-color: var(--selo-vermelho-borda); }
.etiqueta.aberto { color: var(--ambar); border-color: var(--selo-ambar-borda); }

/* ---------------------------------------------------- tela de entrada */
body.entrada { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.cartao-entrada {
  background: var(--painel); border: 1px solid var(--borda); border-radius: 13px;
  padding: 26px 28px 24px; width: 100%; max-width: 340px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--sombra);
  /* O fio da marca também aqui: é a primeira tela que qualquer um vê. */
  border-top: 2px solid var(--marca);
}
.cartao-entrada .marca { font-size: 17px; margin-bottom: 2px; }
.cartao-entrada .marca .logo { height: 24px; }
.cartao-entrada .pequeno { margin: 0 0 6px; }
.cartao-entrada .rotulo { color: var(--fraco); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; }
.cartao-entrada input {
  background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px;
  color: var(--texto); font: inherit; padding: 10px 12px; width: 100%;
}
.cartao-entrada input:focus { outline: none; border-color: var(--marca); }
.cartao-entrada button {
  background: var(--botao-fundo); color: var(--botao-texto); border: none; border-radius: 8px;
  font: inherit; font-weight: 600; padding: 10px 12px; cursor: pointer; margin-top: 4px;
}
.cartao-entrada button:hover { background: var(--botao-fundo-hover); }
.cartao-entrada .erro { color: var(--vermelho); font-size: 13px; margin: 0; }

/* ------------------------------------------- telas que gravam (etapa 2) */
.aviso.ok { background: var(--ok-fundo); border-color: var(--ok-borda); color: var(--ok-texto); }
.aviso.ok b { color: var(--ok-titulo); }

.linha-form { display: flex; gap: 8px; align-items: center; margin: 10px 0 0; flex-wrap: wrap; }
.linha-form input[type="text"] {
  background: var(--painel); border: 1px solid var(--borda); border-radius: 8px;
  color: var(--texto); font: inherit; font-size: 13px; padding: 7px 11px; min-width: 320px;
}
.linha-form input[type="text"]:focus { outline: none; border-color: var(--marca); }

.botao-fraco {
  background: var(--painel-2); border: 1px solid var(--borda); border-radius: 8px;
  color: var(--fraco); font: inherit; font-size: 13px; padding: 7px 12px; cursor: pointer;
}
.botao-fraco:hover { color: var(--texto); border-color: var(--borda-forte); }
/* Botão que também é navegação (os blocos do cadastro): o escolhido usa o mesmo
   sinal da aba ativa do topo, senão as quatro opções ficam idênticas e a pessoa
   não sabe em qual está. */
.botao-fraco.escolhido {
  color: var(--texto); background: var(--painel);
  border-color: var(--borda); box-shadow: inset 0 -2px 0 var(--marca);
}

.barra-acao {
  display: flex; gap: 12px; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; margin-top: 14px;
}
.barra-acao span { margin-right: auto; font-size: 13px; }
.barra-acao select, .barra-acao button {
  font: inherit; font-size: 13.5px; border-radius: 8px; padding: 9px 14px;
}
.barra-acao select {
  background: var(--painel); border: 1px solid var(--borda); color: var(--texto); min-width: 220px;
}
.barra-acao button {
  background: var(--botao-fundo); color: var(--botao-texto); border: none; font-weight: 600; cursor: pointer;
}
.barra-acao button:hover { background: var(--botao-fundo-hover); }

input[type="checkbox"] { accent-color: var(--marca); width: 15px; height: 15px; cursor: pointer; }

.grade-rateio { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 16px; }
.grade-rateio label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.grade-rateio label span {
  flex: 1; color: var(--fraco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.grade-rateio input {
  width: 74px; background: var(--fundo); border: 1px solid var(--borda); border-radius: 7px;
  color: var(--texto); font: inherit; font-size: 13px; padding: 6px 8px; text-align: right;
}
.grade-rateio input:focus { outline: none; border-color: var(--marca); }
.grade-rateio label i { color: var(--fraco); font-style: normal; font-size: 12px; }

/* ------------------------------------------- etapa 2b: editar e concluir */

.topo .direita .acao-topo {
  border: 1px solid var(--borda); border-radius: 7px; padding: 4px 10px;
  color: var(--texto); font-size: 12.5px;
}
.topo .direita .acao-topo:hover { border-color: var(--marca); color: var(--marca); }

main.estreito { max-width: 760px; }

/* Leitura do mês: as conclusões antes das tabelas. Cada item é uma frase com o
   número que a sustenta, e a barra da esquerda diz o peso sem precisar de
   ícone. */
.leitura {
  background: var(--painel); border: 1px solid var(--borda);
  border-radius: 12px; padding: 16px 19px 6px; margin: 0 0 28px;
  box-shadow: var(--sombra);
}
.leitura-titulo { margin: 0 0 12px; font-size: 12px; color: var(--fraco);
  text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; }
.leitura ul { list-style: none; margin: 0; padding: 0; }
.leitura li {
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
  padding: 11px 0 11px 14px; border-top: 1px solid var(--linha);
  border-left: 3px solid transparent; font-size: 14px; line-height: 1.55;
}
.leitura li:first-child { border-top: none; }
.leitura li span { flex: 1; min-width: 260px; }
.leitura li a { color: var(--azul); font-size: 13px; white-space: nowrap; }
.leitura li a:hover { text-decoration: underline; }
.leitura li.alerta { border-left-color: var(--vermelho); }
.leitura li.atencao { border-left-color: var(--ambar); }
.leitura li.boa { border-left-color: var(--verde); }

/* Explicação fechada por padrão. O sistema precisa dizer de onde o número saiu,
   mas a explicação lida uma vez vira ruído em todas as outras aberturas. */
.explica { margin: 22px 0 0; border-top: 1px solid var(--borda); padding-top: 12px; }
.explica summary {
  cursor: pointer; color: var(--fraco); font-size: 12.5px; list-style: none;
}
.explica summary::-webkit-details-marker { display: none; }
.explica summary::before { content: "＋ "; }
.explica[open] summary::before { content: "－ "; }
.explica summary:hover { color: var(--texto); }
.explica > div { color: var(--fraco); font-size: 12.5px; max-width: 78ch; }
.explica p { margin: 10px 0 0; }

.botao-forte {
  background: var(--botao-fundo); color: var(--botao-texto); border: none; border-radius: 8px;
  font: inherit; font-size: 13.5px; font-weight: 600; padding: 8px 14px; cursor: pointer;
}
.botao-forte:hover { background: var(--botao-fundo-hover); }
.botao-perigo {
  background: transparent; border: 1px solid var(--selo-vermelho-borda); border-radius: 8px;
  color: var(--vermelho); font: inherit; font-size: 13px; padding: 7px 12px; cursor: pointer;
}
.botao-perigo:hover { background: var(--atraso-fundo); border-color: var(--vermelho); }

.editar { color: var(--fraco); font-size: 12.5px; }
tr:hover .editar { color: var(--azul); }
.voltar { color: var(--fraco); }
.voltar:hover { color: var(--texto); }

/* Ficha de lançamento. */
.ficha { display: flex; flex-direction: column; gap: 15px; margin-top: 6px; }
.ficha-linha { display: flex; gap: 15px; flex-wrap: wrap; }
.ficha-linha > .campo { flex: 1; min-width: 210px; }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo > span {
  color: var(--fraco); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em;
}
/* Todo campo de digitar, menos a caixa de marcar: listar tipo por tipo já
   deixou o campo de senha branco na tela de troca de senha, porque `password`
   não estava na lista. */
.campo input:not([type="checkbox"]), .campo select, .campo textarea {
  background: var(--painel); border: 1px solid var(--borda); border-radius: 8px;
  color: var(--texto); font: inherit; font-size: 14px; padding: 9px 11px; width: 100%;
}
.campo textarea { resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--marca);
}
.campo i { color: var(--fraco); font-style: normal; font-size: 11.5px; }
.campo-marca {
  flex-direction: row; align-items: center; gap: 9px; align-self: flex-end;
  padding-bottom: 10px; min-width: 210px; flex: 1;
}
.campo-marca > span { text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--texto); }

.ficha-acoes { display: flex; gap: 12px; align-items: center; margin-top: 6px; }
.ficha-acoes button {
  background: var(--botao-fundo); color: var(--botao-texto); border: none; border-radius: 8px;
  font: inherit; font-size: 14px; font-weight: 600; padding: 10px 18px; cursor: pointer;
}
.ficha-acoes button:hover { background: var(--botao-fundo-hover); }

.origem { margin-top: 26px; }
.origem form { margin: 0; }

/* --------------------------------------------- etapa 3: contratos, projeção,
   avisos, acessos e anexos. */

/* Aviso que só informa. Sem uma cor própria ele herdaria a de atenção, e a tela
   de avisos passaria a acender em amarelo para coisa que não pede ação. */
.leitura li.informa { border-left-color: var(--azul); }

/* Ficha que abre embaixo da própria linha da tabela. Preencher vigência é
   trabalho de varrer a lista inteira, e ir e voltar de página a cada contrato
   faria ninguém terminar. */
.ficha-embutida > td { background: var(--painel-2); padding: 14px 12px; }
.ficha-embutida .linha-form { margin: 0; align-items: flex-end; }
.campo-linha {
  display: flex; flex-direction: column; gap: 4px;
  color: var(--fraco); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em;
}
.campo-linha input[type="date"], .campo-linha input[type="text"] {
  background: var(--painel); border: 1px solid var(--borda); border-radius: 8px;
  color: var(--texto); font: inherit; font-size: 14px; text-transform: none;
  letter-spacing: 0; padding: 8px 10px;
}
.campo-linha.marca {
  flex-direction: row; align-items: center; gap: 7px; text-transform: none;
  letter-spacing: 0; font-size: 13px; padding-bottom: 9px;
}
.campo-linha input:focus { outline: none; border-color: var(--marca); }

/* Contrato que vence dentro da janela de aviso: cor de atenção, não de erro.
   Ele ainda está valendo. */
.aviso-txt { color: var(--ambar); }

.lista-simples { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.lista-simples li {
  display: flex; gap: 12px; justify-content: space-between;
  padding: 5px 0; border-bottom: 1px solid var(--linha);
}
.lista-simples li:last-child { border-bottom: none; }
.lista-simples i { font-style: normal; font-size: 12px; }
.lista-simples b { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Senha provisória. Ela aparece uma vez só, então precisa ser fácil de
   selecionar sem pegar o texto em volta. */
.senha-nova {
  font-family: var(--fonte-mono);
  background: var(--painel-2); border: 1px solid var(--borda); border-radius: 6px;
  padding: 2px 7px; font-size: 14px; user-select: all;
}
.acoes-linha { display: flex; gap: 8px; justify-content: flex-end; margin: 0; }
.anexo-link { color: var(--azul); }
.anexo-link:hover { text-decoration: underline; }
input[type="file"] {
  color: var(--fraco); font: inherit; font-size: 13px; max-width: 320px;
}
input[type="file"]::file-selector-button {
  background: var(--painel-2); border: 1px solid var(--borda); border-radius: 7px;
  color: var(--texto); font: inherit; font-size: 13px; padding: 6px 11px;
  margin-right: 10px; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { border-color: var(--borda-forte); }

/* Foco visível para quem navega por teclado. Antes existia só como borda do
   campo, então botão e link não mostravam nada. */
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 4px; }

/* ------------------------------------------------------- gráfico do mês
   As cores do gráfico eram atributo no SVG, e atributo não conhece tema: no
   claro a grade escura ficava pesada e o rótulo cinza sumia no branco. Agora é
   classe, e o token manda.

   Traço e preenchimento em classes separadas de propósito: CSS ganha de
   atributo de apresentação, então uma regra só com `fill` pintaria por dentro a
   linha do saldo, que é desenhada com `fill="none"`. */
.grafico .g-grade { stroke: var(--borda); }
.grafico .g-rotulo { fill: var(--fraco); }
.grafico .g-stop { stop-color: var(--azul); }
.grafico .g-saldo-txt { fill: var(--azul); }
.grafico .g-saldo-linha { fill: none; stroke: var(--azul); }
.grafico .g-saldo-ponto { fill: var(--azul); }
.grafico .g-hoje-linha { stroke: var(--ambar); }
.grafico .g-hoje-txt { fill: var(--ambar); }
.grafico .g-entrada { fill: var(--verde); }
.grafico .g-saida { fill: var(--vermelho); }
/* Previsto é contorno tracejado, e não barra cheia: o olho separa o que já
   aconteceu do que ainda pode não acontecer sem precisar de legenda. */
.grafico .prev { fill: none; }
.grafico .g-entrada.prev { stroke: var(--verde); }
.grafico .g-saida.prev { stroke: var(--vermelho); }

/* ------------------------------------- edição na própria lista de lançamentos
   O Tiago pediu em 31/08/2026: "seria possível transformar ela em editável, na
   própria página? Fica meio moroso ter que ficar abrindo cada guia pra mudar
   info ou status". Então o campo mora na linha, e a ficha continua existindo
   para o que não cabe numa célula (anexo, observação, competência, apagar).

   Regra de desenho: campo em linha não pode parecer formulário. Sem borda até o
   cursor chegar perto, senão quatrocentas linhas viram quatro mil caixas e a
   tabela deixa de ser legível como tabela. */
.lista-lancamentos .na-linha {
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  color: inherit; font: inherit; font-size: 13px; padding: 3px 6px; width: 100%;
  /* Largura mínima generosa de propósito: com a coluna apertada, "Design por
     Assinatura" aparece cortado dentro do campo e a tabela deixa de ser
     legível sem clicar em cada célula. A tabela rola dentro do painel. */
  min-width: 132px;
}
.lista-lancamentos .na-linha.dinheiro { min-width: 96px; }
/* Nome de serviço e de categoria são longos: 'Design por Assinatura' não
   cabe em 150px e aparecia cortado dentro do campo. */
.lista-lancamentos .na-linha.largo { min-width: 150px; }
.lista-lancamentos select.na-linha { min-width: 130px; }
.lista-lancamentos td:hover .na-linha,
.lista-lancamentos .na-linha:hover { border-color: var(--borda); background: var(--painel); }
.lista-lancamentos .na-linha:focus {
  outline: none; border-color: var(--marca); background: var(--painel);
}
.lista-lancamentos .na-linha.dinheiro { text-align: right; font-variant-numeric: tabular-nums; }
.lista-lancamentos td.c, .lista-lancamentos th.c { width: 26px; padding-right: 4px; }
/* Menos respiro entre colunas nesta tabela do que no resto: ela tem onze
   colunas e campo dentro de cinco delas. */
.lista-lancamentos td, .lista-lancamentos th { padding-right: 8px; }
.lista-lancamentos input[type="date"].na-linha { min-width: 130px; }

/* Célula que só vira campo quando alguém clica nela. As listas de cliente e de
   pessoa têm dezenas de opções, e repeti-las em todas as linhas de uma vez
   colocaria mais de dez mil elementos na tela mais usada do sistema. */
.escolher {
  display: inline-block; border-bottom: 1px dashed var(--borda-forte);
  cursor: pointer; padding: 1px 0;
}
.escolher:hover { border-bottom-color: var(--marca); color: var(--texto); }
.escolher:focus { outline: 1px solid var(--marca); outline-offset: 2px; border-radius: 3px; }
.escolher.aberto { border-bottom: none; display: block; }
.escolher i { font-style: normal; }
.miudo { display: block; font-size: 11.5px; color: var(--fraco); margin-top: 2px; }

/* Campo alterado e ainda não salvo. Sem isto, quem mexe em dez células perde a
   conta de onde mexeu, e o botão "salvar" vira aposta. */
.lista-lancamentos td.mudou .na-linha,
.lista-lancamentos .escolher.mudou select {
  border-color: var(--marca); background: var(--marca-fraca);
}

.acoes-lista {
  display: flex; align-items: center; gap: 12px; margin-top: 14px;
}
.acoes-lista button[disabled] { opacity: 0.45; cursor: default; }

/* Barra da ação em lote. Só aparece quando há linha selecionada: barra fixa com
   botão de ação em massa sempre visível é um clique errado esperando acontecer.
   O `[hidden]` precisa vir escrito aqui: `display: flex` numa classe ganha do
   `display: none` que o navegador dá ao atributo, e a barra ficava na tela com
   zero linhas marcadas. */
.barra-lote[hidden] { display: none; }
.barra-lote {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 14px 0 0; padding: 10px 14px;
  background: var(--painel-2); border: 1px solid var(--borda); border-radius: 10px;
  font-size: 13px;
}
.barra-lote label { display: flex; align-items: center; gap: 7px; color: var(--fraco); font-size: 12.5px; }

/* A soma do que está marcado. Cada parcela (entradas, saídas, resultado) é um
   span próprio, e não um texto só, porque só o resultado pode ficar negativo e
   receber a cor de dinheiro que sai. Sem o gap aqui os três se encostariam:
   eles são filhos deste span, não da barra. */
.soma-sel { display: inline-flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.soma-sel:empty { display: none; }
.barra-lote input[type="date"] {
  background: var(--painel); border: 1px solid var(--borda); border-radius: 8px;
  color: var(--texto); font: inherit; font-size: 13px; padding: 5px 9px;
}

/* Botão que existe só para a tecla Enter salvar em vez de disparar a ação em
   lote, que é o primeiro botão visível do formulário. */
.oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* A tabela de lançamentos ficou larga com os campos dentro. Ela rola dentro do
   painel, e não empurra a página inteira para o lado. */
.painel.rolavel { overflow-x: auto; }