/* OnSystem - painel administrativo, temas claro e escuro */

:root {
  --largura-form: 780px;
  /* A marca: MF Contábil e Sistemas. Mesma paleta do OnControl — ouro sobre
     carvão —, para os dois sistemas do escritório terem a mesma cara.
     O ESCURO é o padrão, como lá; o claro fica no botão de tema. */
  color-scheme: dark;

  --fundo: #141312;
  --superficie: #1f1d19;
  --superficie-2: #272421;
  --borda: #302d24;
  --borda-forte: #3d3930;
  --texto-1: #f0ece5;
  --texto-2: #a8a098;
  --texto-3: #726c64;
  --primaria: #c9901a;
  --primaria-h: #e6ab30;
  --primaria-clara: #2a2115;
  --primaria-texto: #141312;   /* o que se escreve em cima do ouro */
  /* verde e coral dos valores: os que passaram no validador de daltonismo,
     nos dois temas. Ouro é de botão e link, nunca de dinheiro. */
  --verde: #4fcba0;
  --verde-escuro: #4fcba0;
  --coral: #f5836a;
  --coral-escuro: #f5836a;
  --ambar: #facc15;
  --azul: #60a5fa;
  --roxo: #a78bfa;
  --linha-hover: #2c2925;
  --sombra: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .22);
  --sombra-cor: 0 4px 14px rgba(0, 0, 0, .4);
  --raio: 0px;
  --lateral: 208px;
}

:root[data-tema="claro"] {
  color-scheme: light;

  --fundo: #f1f3f5;
  --superficie: #ffffff;
  --superficie-2: #f7f8fa;
  --borda: #d7dce2;
  --borda-forte: #b8c0ca;
  --texto-1: #15181c;
  --texto-2: #343a42;
  --texto-3: #555e69;
  /* no claro o ouro fecha, senão some no branco (é o mesmo do OnControl) */
  --primaria: #8a5c08;
  --primaria-h: #c9901a;
  --primaria-clara: #f7efdd;
  --primaria-texto: #ffffff;   /* no claro o ouro fecha, então texto branco */
  --verde: #4fcba0;
  --verde-escuro: #35a582;
  --coral: #f5836a;
  --coral-escuro: #de6a51;
  --ambar: #f5c163;
  --azul: #5aa9e6;
  --roxo: #9b8cf0;
  --linha-hover: #e9edf2;
  --sombra: 0 1px 3px rgba(61, 68, 81, .07), 0 6px 18px rgba(61, 68, 81, .05);
  --sombra-cor: 0 4px 14px rgba(61, 68, 81, .13);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto-1);
  font-family: "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primaria); text-decoration: none; }
a:hover { text-decoration: none; }
h1, h2, h3 { font-weight: 700; }

/* ---------------------------------------------------- estrutura */

.aplicacao { display: flex; min-height: 100vh; }

.lateral {
  width: var(--lateral);
  flex-shrink: 0;
  background: var(--superficie);
  border-right: 1px solid var(--borda);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.marca-lateral {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px 12px;
  border-bottom: 1px solid var(--borda);
}
.marca-lateral .avatar {
  width: 30px; height: 30px; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.marca-lateral .avatar img, .marca-central .avatar img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.marca-lateral .nome {
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 13.5px;
  color: var(--texto-1);
}

.menu { padding: 8px 0 20px; }
.menu-secao { margin-bottom: 4px; }

.menu-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  color: var(--texto-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}
.menu-titulo:hover { background: var(--linha-hover); }
.menu-titulo .bolha {
  width: 25px; height: 25px; border-radius: 0;
  border: 1.5px solid var(--borda-forte);
  display: flex; align-items: center; justify-content: center;
  color: var(--texto-3);
  flex-shrink: 0;
}
.menu-secao.aberta .menu-titulo .bolha { border-color: var(--primaria); color: var(--primaria); }
.menu-titulo .seta { margin-left: auto; transition: transform .15s; color: var(--texto-3); }
.menu-secao.aberta .menu-titulo .seta { transform: rotate(90deg); }

.menu-itens { display: none; padding: 1px 0 6px; }
.menu-secao.aberta .menu-itens { display: block; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 22px;
  color: var(--texto-2);
  font-size: 13px;
  border-left: 3px solid transparent;
}
/* a figura do item é menor que a do botão: ela acompanha o texto, não o
   substitui — e o alinhamento do nome sai do tamanho dela, não de um recuo */
.menu-item .icone { width: 13px; height: 13px; flex-shrink: 0; color: var(--texto-3); }
.menu-item:hover .icone { color: var(--texto-2); }
.menu-item.ativo .icone { color: var(--primaria); }
.menu-item:hover { background: var(--linha-hover); color: var(--texto-1); }
.menu-item.ativo {
  color: var(--primaria);
  font-weight: 700;
  border-left-color: var(--primaria);
  background: var(--primaria-clara);
}

.conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* O alto da tela sao duas faixas que rolam juntas. Quem gruda e o pai:
   duas `sticky` empilhadas brigam pelo mesmo `top` e uma cobre a outra. */
.cabecalho-fixo { position: sticky; top: 0; z-index: 40; }

.barra-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}
/* No menu suspenso a barra de titulo carrega os menus: o padding vem da
   propria barra de menus, e o botao do usuario fica na ponta direita. */
.barra-topo.com-menus { padding: 0 12px 0 0; gap: 0; }
.barra-topo.com-menus .barra-menus {
  flex: 1; min-width: 0; border-bottom: none; background: none;
}

/* A EMPRESA ABERTA, de ponta a ponta. Errar de empresa e o engano mais caro
   que existe num sistema multiempresa; um card pequeno no canto era facil
   demais de nao olhar. A faixa e mais escura para nao competir com o menu. */
.faixa-empresa {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px;
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borda);
}
.faixa-empresa .menu-empresa { flex: 1; min-width: 0; }
.faixa-empresa .seletor-empresa { width: 100%; max-width: none; padding: 5px 10px 5px 7px; }
.cnpj-faixa {
  font-size: 12px; font-weight: 700; letter-spacing: .03em;
  color: var(--texto-3); white-space: nowrap; flex-shrink: 0;
}
/* A barra mostra a RAZAO SOCIAL, que e comprida: o nome corta com
   reticencias e aparece inteiro no title e no dropdown. Cortar e melhor do
   que espremer a barra inteira por causa de uma empresa de nome longo. */
.menu-empresa { position: relative; }
.seletor-empresa {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 9px 4px 6px;
  border: 1px solid var(--borda-forte);
  border-radius: 0;
  background: none; cursor: pointer;
  color: var(--texto-1); font-family: inherit; text-align: left;
  max-width: 420px;
}
.seletor-empresa:hover { border-color: var(--primaria); background: var(--linha-hover); }
.seletor-empresa .marcador, .linha-empresa .marcador {
  width: 23px; height: 23px; border-radius: 0; flex-shrink: 0;
  background: var(--primaria-clara); color: var(--primaria);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}
.seletor-empresa .nomes, .linha-empresa .nomes { min-width: 0; }
.seletor-empresa .rotulo, .linha-empresa .rotulo {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-3); display: block; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.seletor-empresa .valor, .linha-empresa .valor {
  font-size: 13px; font-weight: 700; display: block; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* O desenho de seta do sistema aponta para a direita; aqui ela precisa
   apontar para baixo (e virar para cima quando a gaveta abre), que e como
   todo menu suspenso avisa que tem lista embaixo. */
.seletor-empresa > .icone {
  width: 13px; height: 13px; color: var(--texto-3); flex-shrink: 0;
  transform: rotate(90deg); transition: transform .15s;
}
.seletor-empresa[aria-expanded="true"] > .icone { transform: rotate(-90deg); }
.seletor-empresa[aria-expanded="true"] { border-color: var(--primaria); }
.espacador { flex: 1; }

/* O dropdown de empresas: mesma casca da gaveta do usuario, mas ancorado a
   esquerda e mais largo — razao social nao cabe em 210px. */
/* `width: max-content` deixa a gaveta crescer ate a razao social caber; o
   teto impede que uma empresa de nome quilometrico estique o menu pela tela
   toda (aí o nome corta com reticencias, e o title mostra inteiro). */
.gaveta-empresas {
  left: 0; right: auto;
  width: max-content; min-width: 360px; max-width: 560px;
}
/* Na faixa da empresa a gaveta acompanha a faixa: mesma largura, colada
   embaixo. Ela ABRE a partir do botão que ocupa a linha inteira — uma
   listinha estreita saindo de um botão largo parecia de outro lugar. */
.faixa-empresa .gaveta-empresas {
  left: 0; right: 0;
  width: auto; min-width: 0; max-width: none;
  top: calc(100% + 5px);
}
.linha-empresa {
  display: flex !important; align-items: center; gap: 9px;
  padding: 8px 10px !important;
  border-left: 2px solid transparent;
}
.linha-empresa.atual {
  border-left-color: var(--primaria);
  background: var(--primaria-clara);
}
.linha-empresa.atual .valor { color: var(--primaria); }
.linha-empresa > .icone { width: 14px; height: 14px; color: var(--primaria); flex-shrink: 0; }
.linha-todas {
  border-top: 1px solid var(--borda); margin-top: 6px;
  font-size: 12.5px !important; color: var(--texto-3) !important;
}
.linha-todas .icone { width: 13px; height: 13px; }

.menu-usuario { position: relative; }
.botao-usuario {
  display: flex; align-items: center; gap: 10px;
  background: none; border: none; cursor: pointer;
  color: var(--texto-1); font-family: inherit; font-size: 13px;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 7px; border-radius: 0;
}
.botao-usuario:hover { background: var(--linha-hover); }
.gaveta {
  display: none;
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 210px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 0;
  box-shadow: var(--sombra);
  padding: 6px;
  z-index: 30;
}
.gaveta.aberta { display: block; }
.gaveta .cabecalho { padding: 10px 12px; border-bottom: 1px solid var(--borda); margin-bottom: 6px; }
.gaveta .cabecalho .nome { font-weight: 700; font-size: 14px; }
.gaveta .cabecalho .detalhe { font-size: 12px; color: var(--texto-3); }
.gaveta a, .gaveta button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 9px 12px; border-radius: 0;
  color: var(--texto-2); font-size: 14px; font-family: inherit;
  background: none; border: none; cursor: pointer;
}
.gaveta a:hover, .gaveta button:hover { background: var(--linha-hover); color: var(--texto-1); }

/* Sair no fim da arvore do menu, separado do resto por uma linha: ele nao e
   um modulo, e a separacao evita o clique errado na pressa. */
.menu-sair {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 8px 14px; padding: 9px 12px;
  border-top: 1px solid var(--borda);
  padding-top: 14px;
  color: var(--texto-3); font-size: 13px;
}
.menu-sair .icone { width: 14px; height: 14px; }
.menu-sair:hover { color: var(--coral); }

/* O cabecalho da tela inicial: quem esta aberto, por extenso. */
/* .cabecalho-empresa saiu na 0.40.1: a empresa mora na faixa do alto. */

.pagina { flex: 1; padding: 18px 20px 22px; }
.pagina > h1 { font-size: 18px; margin: 0 0 3px; }
.pagina .descricao { color: var(--texto-3); margin: 0 0 14px; font-size: 13px; }

/* faixa de topo do modulo: titulo a esquerda, acoes da tela a direita.
   O Minimizar mora aqui, e nao no pe do formulario: em tela comprida
   (baixar titulo, permissoes, lancamento contabil) o pe so aparece
   depois de rolar, e um botao que some e um botao que nao existe. */
.topo-modulo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px 16px; flex-wrap: wrap;
}
.topo-modulo > .titulo-modulo { min-width: 0; flex: 1 1 260px; }
/* quando o modulo e um cartao de formulario, a faixa acompanha a largura
   dele: botao jogado na outra ponta da tela nao parece do mesmo assunto */
.topo-modulo.estreito { max-width: var(--largura-form); }
.topo-modulo > .titulo-modulo > h1 { font-size: 18px; margin: 0 0 3px; }
.topo-modulo .acoes-modulo {
  display: flex; align-items: center; gap: 8px;
  flex: 0 0 auto; margin-left: auto;
}

@media (max-width: 560px) {
  /* no celular a acao desce para baixo do titulo e ocupa a linha:
     alvo de toque grande vale mais do que alinhamento bonito */
  .topo-modulo { flex-direction: column; align-items: stretch; gap: 0; }
  /* em coluna, crescer e esticar: sem isto o titulo abria um vao ate o botao */
  .topo-modulo > .titulo-modulo { flex: 0 0 auto; }
  .topo-modulo > .titulo-modulo > .descricao { margin-bottom: 8px; }
  .topo-modulo .acoes-modulo { margin-left: 0; margin-bottom: 12px; }
  .topo-modulo .acoes-modulo .botao { flex: 1; justify-content: center; }
}

.rodape {
  /* SEMPRE VISIVEL (0.55.0), a pedido do Mario: "para que possamos
     confirmar a versao e o local".

     A pergunta que ele passou uma tarde sem conseguir responder foi em
     QUAL instalacao estava — esta maquina ou o servidor —, e a resposta
     estava aqui embaixo, escondida atras de uma rolagem.

     `sticky` e nao `fixed`: assim o rodape continua ocupando lugar no
     fluxo e nunca cobre a ultima linha de uma lista. Fixo exigiria um
     `padding-bottom` no conteudo, e qualquer tela que esquecesse dele
     perderia a ultima linha — em silencio. */
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  align-items: center;
  padding: 10px 20px;
  border-top: 1px solid var(--borda);
  background: var(--superficie);
  color: var(--texto-3);
  font-size: 12px;
}

/* A versao e a instalacao sao o motivo de o rodape estar sempre a vista:
   elas ganham o contraste do texto normal, e o resto continua discreto. */
.rodape .onde-estou-rodape,
.rodape .versao-rodape { color: var(--texto-2); }
.rodape .versao-rodape strong { color: var(--texto-1); font-weight: 700; }

/* Na tela estreita o rodape fixo tomava TRES linhas — quase 70px de uma
   tela de 780. Fica o que e o motivo de ele estar sempre a vista: a
   instalacao e a versao. Os dois links ja estao no menu, e a razao social
   ja esta na faixa do alto, que tambem nao sai da tela. */
@media (max-width: 640px) {
  .rodape { padding: 7px 14px; gap: 2px 12px; font-size: 11px; }
  .rodape > a,
  .rodape .razao-rodape { display: none; }
}
.rodape a { color: var(--texto-2); text-transform: uppercase; letter-spacing: .04em; font-size: 11px; font-weight: 700; }
.rodape a:hover { color: var(--primaria); }

/* ---------------------------------------------------- indicadores */

.indicadores {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.indicador {
  background: var(--superficie);
  border-radius: 0;
  box-shadow: var(--sombra);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.indicador .corpo {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 13px 10px;
  flex: 1;
}
.indicador .simbolo {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.indicador .simbolo svg { width: 31px; height: 31px; }
.indicador .dados { flex: 1; min-width: 0; text-align: right; }
.indicador .rotulo {
  color: var(--texto-3); font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.indicador .valor {
  font-size: clamp(15px, 1.45vw, 20px);
  font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.indicador .valor.verde { color: var(--verde-escuro); }
.indicador .valor.coral { color: var(--coral-escuro); }
.indicador .pe {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  white-space: nowrap;
  border-top: 1px solid var(--borda);
  color: var(--texto-3);
  font-size: 11.5px;
  background: var(--superficie-2);
}

/* ---------------------------------------------------- cartoes coloridos */

.titulo-secao {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  font-weight: 700;
  color: var(--texto-2);
  margin: 0 0 10px;
}

.movimentacoes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
/* No tema escuro, quatro blocos chapados de verde e coral cegam a tela: o
   cartao vira a superficie de sempre, com uma faixa da cor e o valor colorido
   — a cor continua dizendo a mesma coisa, sem gritar. */
.movimentacao {
  border-radius: 0;
  padding: 13px 15px 14px;
  background: var(--superficie);
  border-left: 3px solid var(--borda-forte);
  color: var(--texto-2);
  box-shadow: var(--sombra);
  min-height: 92px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.movimentacao.entrada { border-left-color: var(--verde); }
.movimentacao.saida { border-left-color: var(--coral); }
.movimentacao .tipo { font-size: 13px; font-weight: 700; color: var(--texto-2); }
.movimentacao .valor {
  font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums;
  margin: 6px 0;
}
.movimentacao.entrada .valor { color: var(--verde-escuro); }
.movimentacao.saida .valor { color: var(--coral-escuro); }
.movimentacao .quem { font-size: 12.5px; color: var(--texto-3); }

.vazio {
  background: var(--superficie);
  border: 1px dashed var(--borda-forte);
  border-radius: 0;
  padding: 26px;
  text-align: center;
  color: var(--texto-3);
  font-size: 13px;
}
.vazio strong { display: block; color: var(--texto-1); font-size: 16px; margin-bottom: 6px; }

/* ---------------------------------------------------- formularios e telas soltas */

.tela-central {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 28px 16px;
  background: var(--fundo);
}
.cartao-login {
  width: 100%; max-width: 380px;
  background: var(--superficie);
  border-radius: 0;
  box-shadow: var(--sombra);
  padding: 28px 26px 24px;
}

/* ---- A foto do painel ao fundo da entrada ---------------------------------
   A tela de login e a unica sem menu e sem dado nenhum: e onde a foto cabe.
   Tres camadas, e a ordem importa:

   1. a cor do tema (--fundo) pintada primeiro, para nao haver clarao branco
      enquanto a imagem carrega nem se ela faltar;
   2. a foto, ja escurecida no proprio arquivo;
   3. um veu em gradiente por cima (::before), mais fechado nas bordas e no
      centro, atras do cartao.

   O veu esta no CSS, e nao gravado na imagem, de proposito: o contraste do
   cartao se ajusta mudando uma linha, sem reprocessar foto nenhuma. */
.tela-central.com-fundo {
  position: relative;
  background-color: var(--fundo);
  background-image: url("/estaticos/imagens/login-fundo.jpg");
  /* o navegador que entende image-set pega o WebP, que e bem menor; os outros
     ficam com a linha de cima, que ja e valida */
  background-image: image-set(
    url("/estaticos/imagens/login-fundo.webp") type("image/webp"),
    url("/estaticos/imagens/login-fundo.jpg") type("image/jpeg")
  );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.tela-central.com-fundo::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(115% 85% at 50% 46%,
      rgba(20, 19, 18, .34) 0%,
      rgba(20, 19, 18, .74) 52%,
      rgba(20, 19, 18, .95) 100%),
    linear-gradient(180deg,
      rgba(20, 19, 18, .52) 0%,
      rgba(20, 19, 18, .16) 38%,
      rgba(20, 19, 18, .70) 100%);
}
/* o cartao sobe acima do veu */
.tela-central.com-fundo > * { position: relative; z-index: 1; }

/* Vidro fosco: o cartao deixa a foto aparecer sem deixar de ser um cartao.
   A borda ouro fininha e o fio no topo sao a marca entrando na cena. */
.tela-central.com-fundo .cartao-login {
  background: rgba(31, 29, 25, .80);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
  border: 1px solid rgba(201, 144, 26, .22);
  box-shadow: 0 20px 56px rgba(0, 0, 0, .58), 0 2px 10px rgba(0, 0, 0, .35);
}
.tela-central.com-fundo .cartao-login::before {
  content: "";
  display: block;
  height: 2px;
  margin: -28px -26px 22px;
  background: linear-gradient(90deg, var(--primaria), rgba(201, 144, 26, 0));
}
/* Sem backdrop-filter (navegador antigo) o cartao fecha o fundo, senao o
   texto ficaria por cima da foto sem nada separando. */
@supports not (backdrop-filter: blur(1px)) {
  .tela-central.com-fundo .cartao-login { background: rgba(31, 29, 25, .96); }
}
.marca-central { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.marca-central .avatar {
  width: 42px; height: 42px; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
}
.marca-central .nome { font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: 17px; }

/* A marca do sistema é o quadrado ouro com as barras — a mesma do OnControl.
   Ela já tem fundo próprio, então vale nos dois temas sem ajuste. */
.subtitulo { color: var(--texto-3); font-size: 14px; margin: 0 0 22px; }

label { display: block; font-size: 12px; font-weight: 700; color: var(--texto-2); margin-bottom: 4px; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="date"], input[type="number"], select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--borda-forte);
  border-radius: 0;
  background: var(--superficie);
  color: var(--texto-1);
  font-size: 13.5px;
  font-family: inherit;
}
input:focus, select:focus { outline: 2px solid var(--primaria); outline-offset: 1px; border-color: var(--primaria); }
.campo { margin-bottom: 11px; }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 0;
  /* o ouro da marca é a cor de ação; verde e coral ficam só para dinheiro */
  background: var(--primaria);
  color: var(--primaria-texto);
  font-size: 13.5px; font-weight: 700; font-family: inherit;
  cursor: pointer;
}
.botao:hover { background: var(--primaria-h); }
.botao.largo { width: 100%; }
.botao.secundario { background: var(--superficie); color: var(--texto-2); border-color: var(--borda-forte); }
.botao.secundario:hover { background: var(--linha-hover); }

.recado {
  padding: 9px 12px; border-radius: 0;
  font-size: 13px; margin-bottom: 12px;
}
.recado.erro { background: #fdecea; color: #b8321c; }
.recado.ok { background: #e6f7f0; color: #1d7a5a; }
.recado.aviso { background: #fdf3dd; color: #8a6116; }
:root[data-tema="escuro"] .recado.erro { background: #3a1a15; color: #f5a08c; }
:root[data-tema="escuro"] .recado.ok { background: #15332a; color: #6fd6ae; }
:root[data-tema="escuro"] .recado.aviso { background: #332a12; color: #f0cb7e; }

/* ---------------------------------------------------- selecao de empresa */

.painel-selecao {
  width: 100%; max-width: 640px;
  background: var(--superficie);
  border-radius: 0;
  box-shadow: var(--sombra);
  padding: 22px;
}
.busca-linha { display: flex; gap: 10px; margin: 18px 0 14px; }
.busca-linha input { flex: 1; }
.lista-empresas { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow: auto; }
.empresa-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px;
  border: 1px solid var(--borda);
  border-radius: 0;
  color: var(--texto-1);
}
.empresa-item:hover { border-color: var(--primaria); background: var(--linha-hover); }
.empresa-codigo {
  min-width: 42px; text-align: center;
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: 13px;
  color: var(--primaria-texto); background: var(--primaria);
  border-radius: 0; padding: 5px 8px;
}
.empresa-nome { font-weight: 700; }
.empresa-detalhe { font-size: 13px; color: var(--texto-3); }

.icone { width: 14px; height: 14px; flex-shrink: 0; }

/* ---------------------------------------------------- cadastros */

.barra-acoes {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.barra-acoes form {
  display: flex; flex-wrap: wrap; gap: 6px;
  flex: 1; min-width: 230px; max-width: 430px;
}
.barra-acoes form.com-periodo { max-width: 800px; }
.barra-acoes input[type="search"] { flex: 1; min-width: 160px; }

.quadro {
  background: var(--superficie);
  border-radius: 0;
  box-shadow: var(--sombra);
  overflow-x: auto;
  overflow-y: hidden;
}

table.tabela { width: 100%; border-collapse: collapse; }
table.tabela th {
  text-align: left;
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-3); font-weight: 700;
  padding: 9px 11px;
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}
table.tabela td {
  padding: 8px 11px;
  border-bottom: 1px solid var(--borda);
  font-size: 13px;
  color: var(--texto-1);
}
table.tabela tr:last-child td { border-bottom: none; }
table.tabela tbody tr:hover { background: var(--linha-hover); }
.direita, table.tabela th.direita { text-align: right; }
.numerico { font-variant-numeric: tabular-nums; white-space: nowrap; }
.acoes { white-space: nowrap; text-align: right; }
.acoes form { display: inline; }

.chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 0;
  font-size: 11px; font-weight: 700;
  letter-spacing: .03em;
}
.chip.ativo { background: #e2f7ee; color: #1d7a5a; }
.chip.inativo { background: #eef0f4; color: var(--texto-3); }
/* o que saiu do sistema se lê de longe na trilha de auditoria */
.chip.perigo { background: #fdecea; color: #b8321c; }
:root[data-tema="escuro"] .chip.ativo { background: #17392c; color: #6fd6ae; }
:root[data-tema="escuro"] .chip.inativo { background: #2e2a22; color: var(--texto-3); }
:root[data-tema="escuro"] .chip.perigo { background: #3a1a15; color: #f5a08c; }

.botao.pequeno { padding: 5px 9px; font-size: 12.5px; }
.botao.perigo { background: var(--coral); color: #2a1410; }
.botao.contorno {
  background: transparent; color: var(--texto-2); border-color: var(--borda-forte);
}
.botao.contorno:hover { background: var(--linha-hover); }

.paginacao {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  border-top: 1px solid var(--borda);
  color: var(--texto-3); font-size: 12.5px;
  background: var(--superficie-2);
}
.paginacao .espacador { flex: 1; }

.cartao-form {
  background: var(--superficie);
  border-radius: 0;
  box-shadow: var(--sombra);
  padding: 17px 18px;
  max-width: var(--largura-form);
}
/* Dois cartoes lado a lado (meu perfil: dados e senha). Em tela media eles
   empilham — formulario espremido em duas colunas nao se preenche. */
.duas-colunas {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; align-items: start; margin-bottom: 16px;
}
.duas-colunas .cartao-form { max-width: none; margin: 0; }
.cartao-form > h2, .quadro > h2 {
  margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--texto-1);
}
.grade-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.grade-form .cheia { grid-column: 1 / -1; }
.ajuda { font-size: 11.5px; color: var(--texto-3); margin-top: 3px; }
.pe-form {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 6px; padding-top: 13px; border-top: 1px solid var(--borda);
}
textarea {
  width: 100%; min-height: 62px;
  padding: 8px 10px;
  border: 1px solid var(--borda-forte);
  border-radius: 0;
  background: var(--superficie); color: var(--texto-1);
  font-size: 13.5px; font-family: inherit; resize: vertical;
}
textarea:focus { outline: 2px solid var(--primaria); outline-offset: 1px; border-color: var(--primaria); }

/* icones dentro dos botoes */
.botao .icone { width: 14px; height: 14px; }
.botao.pequeno .icone { width: 12.5px; height: 12.5px; }
.botao.largo .icone { width: 15px; height: 15px; }

/* filtro de periodo e total do periodo */
.filtro-periodo {
  display: flex; align-items: center; gap: 8px;
  padding: 0 4px;
  white-space: nowrap;
}
.filtro-periodo .tracinho { color: var(--texto-3); }
.filtro-periodo input[type="date"] {
  width: 126px; padding: 7px 8px; font-size: 12.5px;
}
.botao.so-icone { padding: 8px 9px; }

.resumo-periodo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  background: var(--superficie);
  border-radius: 0;
  box-shadow: var(--sombra);
  padding: 10px 14px;
  margin-bottom: 11px;
  font-size: 13px;
  color: var(--texto-3);
}
.resumo-periodo .rotulo { text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.resumo-periodo .valor {
  font-size: 17px; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.resumo-periodo .valor.verde { color: var(--verde-escuro); }
.resumo-periodo .valor.coral { color: var(--coral-escuro); }

/* ---------------------------------------------------- campo de busca */

.seletor { position: relative; }
.seletor-caixa { display: flex; gap: 0; }
.seletor-entrada { flex: 1; min-width: 0; }
.seletor-mais {
  display: inline-flex; align-items: center; justify-content: center;
  width: 33px;
  border: 1px solid var(--borda-forte);
  border-left: none;
  background: var(--superficie-2);
  color: var(--texto-2);
  cursor: pointer;
}
.seletor-mais:hover {
  background: var(--primaria); color: var(--primaria-texto); border-color: var(--primaria);
}
.seletor-mais .icone { width: 15px; height: 15px; }

.seletor-lista {
  position: absolute; z-index: 40;
  left: 0; right: 0; top: calc(100% + 2px);
  max-height: 232px; overflow-y: auto;
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  box-shadow: var(--sombra);
}
.seletor-opcao { padding: 7px 10px; cursor: pointer; font-size: 13px; }
.seletor-opcao:hover, .seletor-opcao.destacada { background: var(--primaria-clara); color: var(--primaria); }
.seletor-vazio { padding: 10px 10px; color: var(--texto-3); font-size: 13px; }
.seletor.aberto .seletor-entrada { border-color: var(--primaria); }

/* ---------------------------------------------------- janelinha (modal) */

.modal-fundo {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(15, 23, 42, .45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 8vh 16px 16px;
}
.modal {
  width: 100%; max-width: 420px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  box-shadow: 0 12px 40px rgba(15, 23, 42, .28);
  padding: 17px 18px;
}
.modal-titulo {
  margin: 0 0 12px; font-size: 15.5px;
  padding-bottom: 9px; border-bottom: 1px solid var(--borda);
}
.modal-pe {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--borda);
}

/* lupa de consulta e janela de pesquisa */
.seletor-lupa {
  display: inline-flex; align-items: center; justify-content: center;
  width: 33px;
  border: 1px solid var(--borda-forte);
  border-left: none;
  background: var(--superficie-2);
  color: var(--texto-2);
  cursor: pointer;
}
.seletor-lupa:hover { background: var(--primaria); color: #fff; border-color: var(--primaria); }
.seletor-lupa .icone { width: 15px; height: 15px; }

.modal.largo { max-width: 720px; }
.consulta-busca { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.consulta-busca input { flex: 1; }
.consulta-quadro { border: 1px solid var(--borda); max-height: 46vh; overflow: auto; }
.consulta-quadro table { width: 100%; border-collapse: collapse; }
.consulta-quadro th {
  position: sticky; top: 0;
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-3); font-weight: 700;
  padding: 8px 11px; background: var(--superficie-2);
  border-bottom: 1px solid var(--borda);
}
.consulta-quadro td {
  padding: 7px 11px; border-bottom: 1px solid var(--borda); font-size: 13px;
}
.consulta-quadro tr { cursor: pointer; }
.consulta-quadro tbody tr:hover { background: var(--primaria-clara); }
.consulta-quadro td.direita { text-align: right; font-variant-numeric: tabular-nums; }
.consulta-pe {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-top: 11px; color: var(--texto-3); font-size: 12.5px;
}
.consulta-vazio { padding: 24px; text-align: center; color: var(--texto-3); }

/* linha escolhida na janela de pesquisa */
.consulta-quadro tbody tr.escolhida {
  background: var(--primaria-clara);
  box-shadow: inset 3px 0 0 var(--primaria);
}
.consulta-quadro tbody tr.escolhida td { color: var(--primaria); font-weight: 600; }
.botao:disabled { opacity: .45; cursor: default; }
.botao:disabled:hover { filter: none; }
.consulta-dica { color: var(--texto-3); font-size: 11.5px; margin-top: 8px; }

/* situacao dos titulos e resumo da baixa */
.chip.aberto { background: #e6f0fb; color: #1d5fa8; }
.chip.quitado { background: #e2f7ee; color: #1d7a5a; }
.chip.vencido { background: #fdeae5; color: #b8321c; }
:root[data-tema="escuro"] .chip.aberto { background: #1d2c3d; color: #7db6ee; }
:root[data-tema="escuro"] .chip.quitado { background: #17392c; color: #6fd6ae; }
:root[data-tema="escuro"] .chip.vencido { background: #3a1a15; color: #f5a08c; }
.marca-parcela {
  display: inline-block; margin-left: 5px;
  font-size: 11px; color: var(--texto-3);
  font-variant-numeric: tabular-nums;
}
.filtro-situacao { width: auto; min-width: 138px; padding: 7px 9px; font-size: 12.5px; }

.resumo-titulo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 11px;
}
.resumo-titulo .rotulo {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--texto-3); margin-bottom: 3px;
}
.resumo-titulo strong { font-size: 13.5px; }
.resumo-titulo .valor { font-size: 16.5px; font-variant-numeric: tabular-nums; }
.resumo-titulo .valor.verde { color: var(--verde-escuro); }
.resumo-titulo .valor.coral { color: var(--coral-escuro); }
.chip { white-space: nowrap; }

/* ---------------------------------------------------- conta da baixa */

.conta-baixa {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 10px;
  margin: 2px 0 4px;
  padding: 10px 12px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  font-size: 13px;
}
.conta-baixa .rotulo {
  display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-3);
}
.conta-baixa strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.conta-baixa strong.forte { font-size: 15px; color: var(--texto-1); }
.conta-baixa .sinal { color: var(--texto-3); font-weight: 700; padding-bottom: 1px; }
.conta-baixa .espacador { flex: 1; min-width: 0; }
.conta-baixa .aviso { font-weight: 700; white-space: nowrap; }
.conta-baixa .aviso.falta { color: var(--coral-escuro); }
.conta-baixa .aviso.passou { color: #b8321c; }
.conta-baixa .aviso.certo { color: var(--verde-escuro); }

@media (max-width: 760px) {
  .conta-baixa .espacador { display: none; }
  .conta-baixa .aviso { width: 100%; white-space: normal; margin-top: 4px; }
}

/* os dois cartoes de escolha do estilo de menu, em Meu perfil */
.escolha-menu {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; padding: 0 14px 14px;
}
.cartao-menu {
  display: flex; align-items: flex-start; gap: 10px; text-align: left;
  padding: 12px; cursor: pointer;
  background: var(--superficie-2);
  border: 2px solid var(--borda); border-radius: 0;
  color: var(--texto-2); font: inherit; font-size: 12.5px;
}
.cartao-menu:hover { border-color: var(--borda-forte); }
.cartao-menu.escolhido { border-color: var(--primaria); background: var(--superficie); }
.cartao-menu .marca {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  border: 1px solid var(--borda-forte); color: var(--primaria);
}
.cartao-menu.escolhido .marca { border-color: var(--primaria); }
.cartao-menu .marca .icone { width: 17px; height: 17px; }
.cartao-menu .texto { display: block; }
.cartao-menu .texto strong { display: block; color: var(--texto-1); margin-bottom: 3px; }
.cartao-menu.escolhido .texto strong { color: var(--primaria); }
.cartao-menu .texto em { font-style: normal; font-size: 11.5px; color: var(--primaria); }

@media (max-width: 620px) {
  .escolha-menu { grid-template-columns: 1fr; }
}

/* ------------------------------------------- menu suspenso (0.38.0) */

/* A barra de menus de um aplicativo de desktop: uma faixa horizontal sob o
   cabecalho, um menu por secao, cada um abrindo sua lista para baixo.
   Quem escolhe e a pessoa, em Meu perfil — o menu em arvore continua sendo
   o padrao e nao foi tocado. */
.barra-menus {
  display: flex; align-items: stretch; gap: 1px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
  padding: 0 10px;
}
.barra-menus .marca-barra {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 14px 0 2px; margin-right: 6px;
  border-right: 1px solid var(--borda);
  font-weight: 800; letter-spacing: .04em; font-size: 13px;
  color: var(--texto-1);
}
.barra-menus .marca-barra img { width: 22px; height: 22px; display: block; }

.menu-topo { position: relative; display: flex; align-items: stretch; }
.menu-topo-botao {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 12px;
  border: 1px solid transparent; border-radius: 0;
  background: transparent; color: var(--texto-2);
  font: inherit; font-size: 13px; cursor: pointer;
  white-space: nowrap;
}
.menu-topo-botao .icone { width: 15px; height: 15px; color: var(--primaria); }
.menu-topo-botao:hover { color: var(--texto-1); background: var(--linha-hover); }
/* a secao da tela em que se esta fica marcada, como a aba ativa de um ERP */
.menu-topo.na-secao > .menu-topo-botao {
  color: var(--primaria); font-weight: 700;
  border-bottom: 2px solid var(--primaria);
}
/* aberto: o botao vira aba levantada, colada na lista que desce */
.menu-topo.aberto > .menu-topo-botao {
  color: var(--texto-1); background: var(--superficie-2);
  border-color: var(--borda); border-bottom-color: transparent;
}

.menu-topo-lista {
  display: none;
  position: absolute; top: 100%; left: 0; z-index: 45;
  min-width: 232px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
  padding: 3px 0;
  /* a faixa da esquerda onde moram os icones: e ela que da a cara de menu
     de sistema, em vez de lista solta */
  background-image: linear-gradient(
    90deg, var(--superficie-2) 0 30px,
    var(--borda) 30px 31px, transparent 31px);
}
.menu-topo.aberto > .menu-topo-lista { display: block; }
.menu-topo-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 9px;
  color: var(--texto-2); text-decoration: none; font-size: 13px;
  white-space: nowrap;
}
.menu-topo-item .icone { width: 15px; height: 15px; flex-shrink: 0; }
.menu-topo-item:hover { background: var(--linha-hover); color: var(--texto-1); }
.menu-topo-item.ativo { color: var(--primaria); font-weight: 700; }

.menu-topo-sair {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 12px; font-size: 13px;
  color: var(--texto-3); text-decoration: none;
}
.menu-topo-sair:hover { color: var(--coral); background: var(--linha-hover); }
.menu-topo-sair .icone { width: 15px; height: 15px; }

@media (max-width: 860px) {
  /* no celular a barra rola de lado em vez de espremer os nomes */
  .barra-menus { overflow-x: auto; padding: 0 6px; }
  .barra-menus .marca-barra { display: none; }
  .menu-topo-sair span { display: none; }
}

/* --------------------------------------- previa de impressao (papel) */

/* O quadro ocupa o que sobra da altura da janela: papel de relatorio se
   confere lendo, e ler numa faixa de 300px nao e conferir. O 234px
   descontado e o que o cabecalho, a barra de acoes e a linha de ajuda
   ocupam — foi medido, nao chutado. */
.quadro-papel {
  background: var(--superficie);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra);
  height: calc(100vh - 262px);
  min-height: 420px;
  margin-bottom: 10px;
}
.quadro-papel iframe {
  display: block; width: 100%; height: 100%; border: 0;
  background: #fff;  /* papel e branco, mesmo no tema escuro */
}

/* os dois botoes de zoom com o nivel no meio, como um controle so */
.barra-papel .grupo-zoom {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 4px; margin-left: 4px;
  border-left: 1px solid var(--borda);
  border-right: 1px solid var(--borda);
}
.barra-papel .grupo-zoom .botao { padding: 5px 8px; }
.barra-papel .grupo-zoom .botao[disabled] { opacity: .4; cursor: default; }
.barra-papel .nivel-zoom {
  min-width: 56px; text-align: center;
  font-size: 12.5px; color: var(--texto-2);
  font-variant-numeric: tabular-nums;  /* 100% e 125% nao dancam */
}

/* TELA CHEIA. O menu lateral e o cabecalho tomam ~300px de largura e ~230 de
   altura; numa tela de notebook isso e um terco do espaco. Aqui o quadro
   cobre a janela e o papel fica do tamanho da janela, nao do que sobrou. */
body.papel-cheio { overflow: hidden; }
body.papel-cheio .pagina {
  position: fixed; inset: 0; z-index: 60;
  background: var(--fundo);
  padding: 10px 12px;
  display: flex; flex-direction: column;
  overflow: auto;
}
/* em tela cheia o titulo e a linha de ajuda saem: quem ampliou quer o papel */
body.papel-cheio .pagina > h1,
body.papel-cheio .pagina > .descricao,
body.papel-cheio .pagina > .ajuda { display: none; }
body.papel-cheio .quadro-papel {
  flex: 1; height: auto; min-height: 0; margin-bottom: 0;
}
/* a bandeja de minimizados nao cobre o papel em tela cheia */
body.papel-cheio .bandeja,
body.papel-cheio .rodape { display: none; }

@media (max-width: 760px) {
  /* no celular a janela e alta e estreita: mais altura, menos margem */
  .quadro-papel { height: calc(100vh - 210px); min-height: 360px; }
  .barra-papel .grupo-zoom { border: 0; margin-left: 0; }
}

/* ---------------------------------------------------- fluxo de caixa */

.faixa-fechamento {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--verde);
  box-shadow: var(--sombra);
  padding: 11px 14px;
  margin-bottom: 16px;
  font-size: 13px;
}
.faixa-fechamento.travada { border-left-color: var(--coral); }
.faixa-fechamento.dica { border-left-color: var(--azul); }
.faixa-fechamento.alerta { border-left-color: var(--coral); }
.faixa-fechamento .marca {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0;
  border: 1.5px solid var(--coral); color: var(--coral);
}
.faixa-fechamento .marca.aberta { border-color: var(--verde); color: var(--verde-escuro); }
.faixa-fechamento .marca .icone { width: 16px; height: 16px; }
.faixa-fechamento .texto { flex: 1; min-width: 220px; color: var(--texto-2); }
.faixa-fechamento .texto strong { color: var(--texto-1); }
.faixa-fechamento form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.obs-fechamento { width: 220px; }

.colunas-resumo {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
  margin-bottom: 16px;
}

.pagina h2.titulo-secao { margin: 14px 0 8px; }
.verde { color: var(--verde-escuro); }
.coral { color: var(--coral-escuro); }
table.tabela td.verde, table.tabela td.coral { font-weight: 600; }

/* ---------------------------------------------------- usuarios */

.caixa-marcada {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0; font-weight: 400; font-size: 13px; color: var(--texto-1);
  cursor: pointer;
}
.caixa-marcada input { margin: 0; }
.caixa-marcada .ajuda { margin: 0; }
input[type="radio"] { width: 15px; height: 15px; accent-color: var(--verde); }
.caixa-coluna {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0; cursor: pointer;
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-3); font-weight: 700;
}

/* ---------------------------------------------------- gerar competencia */

.rotulo-inline {
  display: inline; margin: 0 4px 0 0; font-size: 12px;
  color: var(--texto-2); font-weight: 700;
}
input[type="month"] {
  padding: 7px 8px; font-size: 12.5px;
  border: 1px solid var(--borda-forte); border-radius: 0;
  background: var(--superficie); color: var(--texto-1); font-family: inherit;
}
input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--verde); }
table.tabela tr.ja-gerada td { color: var(--texto-3); }

/* ---------------------------------------------------- graficos

   As cores dos dados ficam no SVG (vem do Python, ja validadas contra
   daltonismo e contraste). Aqui so o que e moldura: grade, eixos, texto.
   Texto de grafico NUNCA usa a cor da serie - quem carrega a identidade e
   a forma colorida ao lado. */

.graficos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  margin-bottom: 16px;
}

.grafico {
  background: var(--superficie);
  box-shadow: var(--sombra);
  border-radius: 0;
  margin: 0;
  padding: 13px 14px 10px;
  min-width: 0;
}
.grafico figcaption { margin-bottom: 8px; }
.grafico figcaption strong { display: block; font-size: 13.5px; color: var(--texto-1); }
.grafico figcaption span { font-size: 11.5px; color: var(--texto-3); }

.grafico .legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 4px; }
.grafico .legenda .chave {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--texto-2);
}
.grafico .legenda .amostra { width: 10px; height: 10px; flex-shrink: 0; }

.grafico .rolagem { overflow-x: auto; overflow-y: hidden; }
.grafico .desenho { width: 100%; height: auto; display: block; overflow: visible; }

.grafico .grade { stroke: var(--borda); stroke-width: 1; }
.grafico .zero { stroke: var(--borda-forte); stroke-width: 1; }
.grafico .linha { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico .area { opacity: .1; stroke: none; }
.grafico .ponto { stroke: var(--superficie); stroke-width: 2; }
.grafico .barra { stroke: none; }
.grafico .barra:hover, .grafico .ponto:hover { opacity: .82; }

.grafico text { font-family: inherit; fill: var(--texto-3); }
.grafico .rotulo-eixo { font-size: 11.5px; }
.grafico .rotulo-categoria { font-size: 11px; fill: var(--texto-2); }
.grafico .rotulo-ponta { font-size: 12px; font-weight: 700; fill: var(--texto-1); }
.grafico .rotulo-valor { font-size: 11.5px; font-weight: 700; fill: var(--texto-2); }
.grafico text.inicio { text-anchor: start; }
.grafico text.fim { text-anchor: end; }
.grafico text.meio { text-anchor: middle; }

.grafico-vazio {
  margin: 0; padding: 26px 8px; text-align: center;
  color: var(--texto-3); font-size: 12.5px;
}

.grafico-tabela { margin-top: 8px; }
.grafico-tabela summary {
  cursor: pointer; font-size: 11.5px; color: var(--texto-2);
  padding: 4px 0; user-select: none;
}
.grafico-tabela summary:hover { color: var(--primaria); }
.grafico-tabela table.tabela { margin-top: 4px; }
.grafico-tabela table.tabela td, .grafico-tabela table.tabela th { padding: 5px 8px; font-size: 12px; }

/* -------------------------------------------------- responsivo
   Regra da casa: nada pode vazar para fora da tela. As larguras
   abaixo vao apertando a interface ate o celular. */

/* ---------------------------------------------------- conciliacao bancaria */

.andamento { display: flex; align-items: center; gap: 8px; }
.andamento .trilho {
  flex: 1; min-width: 70px; height: 6px;
  background: var(--linha-hover); border: 1px solid var(--borda);
}
.andamento .feito { height: 100%; background: var(--azul, #3d8fd4); }
.andamento .feito.completo { background: var(--verde-escuro, #1d7a5a); }
.andamento .marca { font-size: 12px; color: var(--texto-3); white-space: nowrap; }

.detalhe-linha { font-size: 12px; color: var(--texto-3); margin-top: 2px; }

.tabela.conciliacao td.valor-banco { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela.conciliacao .chip { white-space: normal; }

/* o seletor de arquivo nativo vem com a cara do navegador e em ingles;
   aqui ele ganha a mesma casca dos botoes do sistema */
input[type="file"] { padding: 5px 6px; }
input[type="file"]::file-selector-button {
  font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 5px 10px; margin-right: 10px; cursor: pointer;
  border: 1px solid var(--borda); border-radius: 0;
  background: var(--superficie); color: var(--texto-1);
}
input[type="file"]::file-selector-button:hover { background: var(--linha-hover); }

.tabela.conciliacao tr.conciliada td { background: var(--linha-hover); }
.tabela.conciliacao tr.detalhe td { padding: 0; background: var(--superficie); }
.tabela.conciliacao tr.detalhe .escolha-conciliacao {
  padding: 12px 14px; border-top: 2px solid var(--borda);
}

.titulo-escolha {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--texto-3); margin: 10px 0 6px;
}
.titulo-escolha:first-child { margin-top: 0; }

.sugestao {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--borda); margin-bottom: 6px;
  cursor: pointer; background: var(--fundo);
}
.sugestao:hover { background: var(--linha-hover); }
.sugestao input { margin-top: 3px; flex: none; }
.sugestao .corpo { flex: 1; min-width: 0; }
.sugestao .nome { display: block; font-size: 13.5px; font-weight: 600; }
.sugestao .chip { flex: none; align-self: center; }

.bloco-escolha {
  padding: 10px 12px; margin: 0 0 8px 0;
  border: 1px solid var(--borda); border-top: none; background: var(--fundo);
}
.bloco-escolha .grade-form { margin-bottom: 8px; }
.bloco-escolha .barra-acoes { margin: 0; }

/* ---------------------------------------------------- contabilidade */

/* O codigo da conta e o desenho da arvore: o recuo por grau e o que deixa
   1.1.01.001 visivelmente dentro de 1.1.01 sem precisar de linha nenhuma. */
.codigo-conta {
  font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--texto-2);
  margin-right: 8px; white-space: nowrap;
}
.codigo-conta.grau-2 { padding-left: 14px; }
.codigo-conta.grau-3 { padding-left: 28px; }
.codigo-conta.grau-4 { padding-left: 42px; }
.codigo-conta.grau-5 { padding-left: 56px; }
.nome-conta { color: var(--texto-1); }

.tabela.plano tr.sintetica .nome-conta,
.tabela.balancete tr.sintetica .nome-conta,
.tabela tr.sintetica td { font-weight: 700; }
.tabela tr.sintetica td { background: var(--linha-hover); }

.letra {
  font-size: 11px; font-weight: 700; color: var(--texto-3);
  margin-left: 3px;
}

.tabela tfoot td {
  border-top: 2px solid var(--borda);
  background: var(--superficie);
}

/* O campo de vinculo usado como FILTRO, dentro da barra de acoes: mesma
   caixa de sempre, largura de filtro. */
.filtro-vinculo { display: inline-block; min-width: 200px; vertical-align: middle; }
.filtro-vinculo.larga { min-width: 300px; }
.filtro-vinculo .seletor { margin: 0; }

/* ---------------------------------------------------- demonstracoes */

/* Balanco lado a lado: ativo de um lado, passivo e PL do outro - e assim que
   um balanco se le. Em tela estreita as duas colunas viram uma so. */
.colunas-balanco {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start;
}

.tabela.demonstracao tfoot tr.resultado td {
  border-top: 2px solid var(--borda);
  font-size: 14px;
}
.tabela.demonstracao tfoot tr.resultado.lucro td { color: var(--verde-escuro, #1d7a5a); }
.tabela.demonstracao tfoot tr.resultado.prejuizo td { color: var(--coral-escuro, #b8321c); }
.tabela.demonstracao tfoot tr.resultado .detalhe-linha { color: var(--texto-3); }

/* ---------------------------------------------------- relatorios */

/* As empresas do consolidado: uma grade de marcacoes, nao uma lista comprida.
   Em tela estreita vira uma coluna so. */
.escolha-empresas {
  background: var(--superficie);
  box-shadow: var(--sombra);
  padding: 10px 14px;
  margin-bottom: 11px;
}
.escolha-empresas .titulo {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-3);
  margin-bottom: 8px;
}
.escolha-empresas .uma-empresa {
  display: inline-flex; align-items: center; gap: 6px;
  width: 260px; max-width: 100%;
  padding: 3px 0;
  font-size: 13px;
  cursor: pointer;
}
.escolha-empresas .uma-empresa .codigo {
  color: var(--texto-3); font-variant-numeric: tabular-nums; min-width: 24px;
}
.escolha-empresas .ajuda { margin-top: 6px; }

/* dois quadros seguidos na mesma tela precisam respirar */
.quadro + .quadro { margin-top: 11px; }

/* O comparativo tem oito colunas: os numeros nao quebram linha. Em tela
   media ficam so as quatro que respondem a pergunta - os dois resultados e a
   diferenca -, senao a tabela rola dentro do quadro sem necessidade. */
.tabela.comparativo td, .tabela.comparativo th { white-space: nowrap; }
@media (max-width: 1024px) {
  .tabela.comparativo th.so-larga, .tabela.comparativo td.so-larga { display: none; }
}

@media (max-width: 1400px) {
  :root { --lateral: 196px; }
}

@media (max-width: 1180px) {
  :root { --lateral: 182px; }
  .colunas-resumo { grid-template-columns: 1fr; }
  .graficos { grid-template-columns: 1fr; }
  .indicadores, .movimentacoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pagina { padding: 14px 15px 18px; }
  .menu-item { padding-left: 44px; }
}

@media (max-width: 1024px) {
  .aplicacao { flex-direction: column; }
  .lateral { width: 100%; height: auto; position: static; }
  .menu { padding: 4px 0 12px; }
  .barra-topo { padding: 8px 14px; }
  .faixa-empresa { padding: 5px 14px; }
  .barra-topo .seletor-empresa .rotulo { display: none; }
}

@media (max-width: 900px) {
  /* os botoes da linha passam a quebrar em vez de sumir na borda */
  table.tabela td.acoes { white-space: normal; }
  .acoes { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
  .acoes form { display: contents; }
}

@media (max-width: 760px) {
  .pagina { padding: 12px; }
  /* O grafico ganha rolagem propria em vez de encolher o texto ate sumir.
     A pagina continua sem rolagem horizontal. */
  .grafico .desenho { min-width: 460px; }
  .obs-fechamento { width: 100%; }
  .faixa-fechamento form { width: 100%; }
  .barra-acoes form, .barra-acoes form.com-periodo { max-width: none; min-width: 100%; }
  .filtro-periodo { width: 100%; }
  .filtro-periodo input[type="date"] { flex: 1; width: auto; }
  .filtro-situacao { flex: 1; min-width: 0; }
  .cartao-form { padding: 14px; }
  .resumo-titulo { grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); }
}

@media (max-width: 640px) {
  .indicadores, .movimentacoes { grid-template-columns: 1fr; }
  .grade-form { grid-template-columns: 1fr; }
  .modal { padding: 14px; }
  .modal-fundo { padding: 4vh 10px 10px; }

  /* No celular a tabela vira uma ficha por registro: cada linha mostra
     o nome da coluna a esquerda e o conteudo a direita, sem rolagem
     para o lado. */
  .quadro { overflow: hidden; }
  table.tabela, table.tabela tbody, table.tabela tr, table.tabela td { display: block; }
  table.tabela thead { display: none; }
  table.tabela tr {
    border-bottom: 1px solid var(--borda);
    padding: 9px 11px;
  }
  table.tabela tr:last-child { border-bottom: none; }
  table.tabela td, table.tabela td.direita {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 2px 0; border-bottom: none; text-align: right; font-size: 13px;
  }
  table.tabela td::before {
    content: attr(data-rotulo);
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--texto-3); font-weight: 700; text-align: left;
    flex-shrink: 0; white-space: nowrap;
  }
  table.tabela td.acoes {
    justify-content: flex-end; padding-top: 8px; margin-top: 5px;
    border-top: 1px dashed var(--borda);
  }
  table.tabela td.acoes::before { content: ""; }
  /* na ficha do celular, coluna sem valor nao vira linha vazia */
  table.tabela td.sem-valor { display: none; }
}

@media (max-width: 460px) {
  body { font-size: 13.5px; }
  .pagina { padding: 10px; }
  .pagina > h1 { font-size: 16.5px; }
  .topo-modulo > .titulo-modulo > h1 { font-size: 16.5px; }
  .botao { padding: 7px 11px; font-size: 13px; }
  .botao.pequeno { padding: 5px 7px; font-size: 12px; }
  .barra-topo { flex-wrap: wrap; gap: 8px; }
  .rodape { padding: 10px 12px; }
  .marca-lateral { padding: 10px 12px; }
}

@media (max-width: 760px) {
  .tabela tr[hidden] { display: none; }
  /* dentro da ficha o texto vai para a direita; o painel de conciliacao e
     formulario, e formulario se le da esquerda */
  .tabela.conciliacao tr.detalhe td { text-align: left; }
  .tabela.conciliacao tr.detalhe td::before { display: none; }
  .tabela.conciliacao tr.detalhe .escolha-conciliacao { padding: 10px; }
  .sugestao { flex-wrap: wrap; }
  .sugestao .chip { align-self: flex-start; }
  .andamento { flex-wrap: wrap; }
}

@media (max-width: 640px) {
  /* na ficha do celular a arvore nao cabe: o recuo vira zero e o codigo
     fica colado no nome, que e como se le uma lista estreita */
  .codigo-conta[class*="grau-"] { padding-left: 0; }
  /* numa ficha, "Saldo anterior R$ 0,00 D" e uma linha inteira dizendo nada:
     no balancete de um mes sem saldo de abertura isso dobrava o tamanho da tela */
  .tabela td.so-larga { display: none; }
}

@media (max-width: 1024px) {
  .colunas-balanco { grid-template-columns: 1fr; }
}

/* ------------------------------------------- privacidade e LGPD */

/* O quadro do painel tem titulo proprio: cada um responde a uma pergunta
   diferente (o prazo que corre / o incidente que pede providencia). */
.quadro > h2 { padding: 12px 14px 0; margin-bottom: 0; }
.quadro > h2 + .tabela { margin-top: 8px; }
.quadro > .vazio { margin: 0; }

/* ------------------------------------------------ historico de versoes

   Cada versao e um quadro. O texto vem do VERSAO.md convertido
   (`servicos/versoes.py`), entao o estilo tem de dar conta de subtitulo,
   paragrafo, lista, tabela e codigo — nada alem disso aparece la. */
.versao-cabeca {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--borda);
  background: var(--superficie-2);
}
.versao-numero {
  font-weight: 700; font-size: 14px; color: var(--primaria);
  font-variant-numeric: tabular-nums;
}
.versao-data { color: var(--texto-3); font-size: 12.5px; }
.versao-titulo { color: var(--texto-2); font-size: 13px; }
.quadro.versao.atual { border-left: 3px solid var(--primaria); }
.versao-corpo { padding: 12px 14px 14px; font-size: 13px; color: var(--texto-2); }
.versao-corpo h3 {
  margin: 16px 0 6px; font-size: 13px; font-weight: 700; color: var(--texto-1);
}
.versao-corpo h3:first-child { margin-top: 0; }
.versao-corpo p { margin: 0 0 9px; line-height: 1.55; }
.versao-corpo p.nota {
  border-left: 2px solid var(--primaria);
  padding-left: 10px; color: var(--texto-3);
}
.versao-corpo ul { margin: 0 0 9px; padding-left: 18px; line-height: 1.55; }
.versao-corpo li { margin-bottom: 3px; }
.versao-corpo strong { color: var(--texto-1); }
.versao-corpo code {
  background: var(--superficie-2); border: 1px solid var(--borda);
  padding: 0 4px; font-size: 12px;
}
.versao-corpo .tabela { margin: 4px 0 12px; }

/* ------------------------------------- bandeja dos trabalhos minimizados

   Barra fixa no rodape da janela, so quando ha alguma coisa minimizada.
   Fica em cima de tudo de proposito: o valor dela e lembrar que existe
   trabalho pela metade — uma bandeja que se esconde nao lembra nada.

   O fio ouro no topo e a mesma marca de "atencao aqui" do cartao de login. */
.bandeja {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 8px 14px;
  background: var(--superficie);
  border-top: 2px solid var(--primaria);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, .28);
  font-size: 13px;
}
.bandeja-rotulo {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; color: var(--texto-2);
  text-transform: uppercase; letter-spacing: .04em; font-size: 11.5px;
  margin-right: 4px;
}
.bandeja-rotulo .icone { width: 15px; height: 15px; color: var(--primaria); }
.bandeja-item {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--borda-forte);
  background: var(--superficie-2);
  max-width: 320px;
}
.bandeja-abrir, .bandeja-fechar {
  border: 0; background: none; cursor: pointer;
  color: var(--texto-1); font: inherit;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
}
.bandeja-abrir .bandeja-texto {
  display: flex; flex-direction: column; align-items: flex-start;
  overflow: hidden; line-height: 1.25; text-align: left;
}
.bandeja-abrir strong, .bandeja-abrir em {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 230px;
}
.bandeja-abrir strong { font-weight: 600; font-size: 13px; }
/* o que identifica o formulario: a descricao que a pessoa ja digitou */
.bandeja-abrir em { font-style: normal; font-size: 11.5px; color: var(--texto-3); }
.bandeja-abrir .icone { width: 14px; height: 14px; color: var(--primaria); flex-shrink: 0; }
.bandeja-abrir:hover { background: var(--linha-hover); }
.bandeja-fechar {
  padding: 6px 8px; color: var(--texto-3);
  border-left: 1px solid var(--borda);
}
.bandeja-fechar .icone { width: 13px; height: 13px; }
.bandeja-fechar:hover { color: var(--coral); background: var(--linha-hover); }

/* Com a bandeja aberta, o rodape SOBE para cima dela — antes ele apenas
   inchava um `padding-bottom` do tamanho da bandeja, o que funcionava
   quando ele ficava no fim da pagina e desperdicaria altura agora que
   ele esta sempre a vista.
   A altura vem medida do JS (--bandeja-altura): a bandeja cresce com a
   quantidade de itens e com a largura da tela, entao numero fixo aqui
   erraria em alguma das duas.
   O `margin-bottom` reserva o lugar no fluxo; o `bottom` e quem faz o
   rodape grudar acima dela. Sem o primeiro, numa tela sem rolagem a
   bandeja cobriria o rodape. */
body.tem-minimizados .rodape {
  bottom: var(--bandeja-altura, 52px);
  margin-bottom: var(--bandeja-altura, 52px);
}

/* Tela pequena carrega a foto menor: sao 115 KB no lugar de 410 KB, e nesse
   tamanho ninguem enxerga a diferenca. */
@media (max-width: 900px) {
  .tela-central.com-fundo {
    background-image: url("/estaticos/imagens/login-fundo-1280.jpg");
  }
  .tela-central.com-fundo .cartao-login::before { margin: -28px -26px 22px; }
}

/* Na tela estreita a bandeja vira uma coluna e os chips ocupam a largura:
   chip apertado com nome cortado nao diz qual formulario e. */
@media (max-width: 640px) {
  .bandeja { flex-direction: column; align-items: stretch; gap: 6px; }
  .bandeja-item { max-width: none; justify-content: space-between; }
  .bandeja-abrir strong, .bandeja-abrir em { max-width: none; }
}

@media (max-width: 1024px) {
  .duas-colunas { grid-template-columns: 1fr; }
}

/* Barra estreita: a razao social encolhe antes de empurrar o resto da barra
   para fora, e o dropdown passa a caber na largura da tela. */
@media (max-width: 1024px) {
  .seletor-empresa { max-width: 260px; }
  /* Numa tela estreita o CNPJ sai antes do nome: o nome e o que se confere. */
  .cnpj-faixa { display: none; }
  .gaveta-empresas { min-width: 260px; max-width: calc(100vw - 32px); }
}
@media (max-width: 640px) {
  .seletor-empresa { max-width: 190px; }
  .seletor-empresa .rotulo { display: none; }
}


/* A faixa da empresa mande sempre: as regras responsivas apertam o seletor
   quando ele morava na barra do topo, e aqui ele ocupa a linha inteira. */
.faixa-empresa .seletor-empresa { max-width: none; }
.faixa-empresa .seletor-empresa .rotulo { display: block; }
@media (max-width: 560px) {
  .faixa-empresa .seletor-empresa .rotulo { display: none; }
}


/* --------------------------------------------------------------------------
   O painel de opcoes dos relatorios contabeis (0.40.0)

   Em `<details>` puro: sem JavaScript, fechado ate alguem precisar. A grade
   se arruma sozinha em colunas de 260px — no notebook saem tres, no monitor
   grande quatro, no celular uma.
   -------------------------------------------------------------------------- */
/* "so no papel": a escolha muda a PAGINA, e a tela nao tem paginas. Sem esta
   etiqueta a pessoa marca, olha a tela, nao ve diferenca e conclui que o
   painel inteiro nao funciona - foi o que aconteceu em 24/09/2026. */
.painel-opcoes .so-papel {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 5px;
  font-size: 9.5px; font-style: normal; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--texto-3);
  border: 1px solid var(--borda);
  white-space: nowrap;
}
.painel-opcoes {
  border: 1px solid var(--borda);
  background: var(--superficie);
  margin-bottom: 14px;
}
.painel-opcoes > summary {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--texto-1);
  list-style: none;
}
.painel-opcoes > summary::-webkit-details-marker { display: none; }
.painel-opcoes > summary:hover { background: var(--linha-hover); }
.painel-opcoes > summary .icone { width: 16px; height: 16px; color: var(--primaria); }
.painel-opcoes[open] > summary { border-bottom: 1px solid var(--borda); }
.dica-opcoes {
  font-weight: 400; font-size: 12px; color: var(--texto-3);
}

.grade-opcoes {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  background: var(--borda);
}
.grupo-opcoes {
  border: none; margin: 0; padding: 12px 14px 14px;
  background: var(--superficie);
}
.grupo-opcoes legend {
  padding: 0 0 6px; font-size: 11px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: var(--texto-3);
}
.opcao-marca {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 4px 0; font-size: 13px; color: var(--texto-2); cursor: pointer;
}
.opcao-marca input { margin-top: 2px; flex-shrink: 0; accent-color: var(--primaria); }
.opcao-marca small {
  display: block; font-size: 11.5px; color: var(--texto-3); line-height: 1.35;
}
.opcao-escolha { padding: 4px 0 6px; }
.rotulo-opcao {
  display: block; font-size: 13px; color: var(--texto-2); margin-bottom: 2px;
}
.ajuda-opcao {
  display: block; font-size: 11.5px; color: var(--texto-3); line-height: 1.35;
  margin-top: 2px;
}
.opcao-campo { padding: 4px 0 6px; }
.opcao-campo label {
  display: block; font-size: 13px; color: var(--texto-2); margin-bottom: 3px;
}
.opcao-campo input {
  width: 100%; max-width: 190px;
  padding: 5px 8px; border: 1px solid var(--borda-forte); border-radius: 0;
  background: var(--fundo); color: var(--texto-1); font: inherit; font-size: 13px;
}

.acoes-opcoes {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; border-top: 1px solid var(--borda);
  background: var(--superficie-2);
}
.aviso-opcoes {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--texto-3);
}
.aviso-opcoes .icone { width: 13px; height: 13px; }

/* o numero reduzido, quando a pessoa pede que ele apareca */
.codigo-reduzido {
  font-size: 11.5px; font-weight: 700; color: var(--texto-3);
  margin-right: 5px;
}


/* --------------------------------------------------------------------------
   A COMPETENCIA DE TRABALHO, ao lado da empresa (0.41.0)

   As duas coisas que decidem o que se ve em toda tela — QUAL EMPRESA e QUAL
   PERIODO — ficam juntas e sempre a vista. Ela e o valor padrao dos filtros
   de data, nunca uma trava.
   -------------------------------------------------------------------------- */
.menu-competencia { position: relative; flex-shrink: 0; }
.seletor-competencia {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 9px 5px 7px;
  border: 1px solid var(--borda-forte); border-radius: 0;
  background: none; cursor: pointer;
  color: var(--texto-1); font-family: inherit; text-align: left;
}
.seletor-competencia:hover { border-color: var(--primaria); background: var(--linha-hover); }
.seletor-competencia[aria-expanded="true"] { border-color: var(--primaria); }
.seletor-competencia > .icone:first-child {
  width: 16px; height: 16px; color: var(--primaria); flex-shrink: 0;
}
.seletor-competencia .rotulo {
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-3); display: block; line-height: 1.2;
}
.seletor-competencia .valor {
  font-size: 13px; font-weight: 700; display: block; line-height: 1.25;
  white-space: nowrap;
}
.seletor-competencia > .icone:last-child {
  width: 13px; height: 13px; color: var(--texto-3); flex-shrink: 0;
  transform: rotate(90deg); transition: transform .15s;
}
.seletor-competencia[aria-expanded="true"] > .icone:last-child { transform: rotate(-90deg); }

.gaveta-competencia { left: auto; right: 0; width: 310px; min-width: 0; }
.forma-competencia { padding: 8px 10px 4px; }
.forma-competencia label {
  display: block; font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--texto-3); margin-bottom: 4px;
}
.linha-competencia { display: flex; gap: 6px; align-items: stretch; }
/* O campo e o que se digita — ele manda na largura. O botao encolhe ate o
   texto dele, nunca o contrario: um campo de 7 caracteres espremido a 20px
   e um campo que ninguem consegue usar. */
.linha-competencia .botao { flex: 0 0 auto; white-space: nowrap; }
.linha-competencia input {
  flex: 1 1 auto; min-width: 104px;
  padding: 6px 8px; border: 1px solid var(--borda-forte); border-radius: 0;
  background: var(--fundo); color: var(--texto-1);
  font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .04em;
}
.ajuda-competencia {
  margin: 7px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--texto-3);
}
.ajuda-competencia strong { color: var(--texto-2); font-weight: 700; }
.atalhos-competencia {
  display: flex; gap: 1px; margin-top: 8px;
  border-top: 1px solid var(--borda); background: var(--borda);
}
.atalhos-competencia button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 4px; border: none; border-radius: 0; cursor: pointer;
  background: var(--superficie); color: var(--texto-2);
  font: inherit; font-size: 12px;
}
.atalhos-competencia button:hover { background: var(--linha-hover); color: var(--primaria); }
.atalhos-competencia .icone { width: 13px; height: 13px; }

@media (max-width: 860px) {
  /* numa tela estreita sobra o numero, que e o que se confere */
  .seletor-competencia .rotulo { display: none; }
}


/* --------------------------------------------------------------------------
   OS CARTOES DE SITUACAO e a grade de graficos do painel (0.42.0)

   Os graficos encolheram para caber em grade: o painel passou de DOIS grandes
   para OITO pequenos. Oito coisas que se leem de relance valem mais do que
   duas que se leem devagar.
   -------------------------------------------------------------------------- */
.saude {
  display: grid; gap: 1px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  background: var(--borda);
  border: 1px solid var(--borda);
}
.cartao-saude {
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 13px 12px;
  background: var(--superficie);
  border-left: 3px solid transparent;
}
.cartao-saude .rotulo {
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-3);
}
.cartao-saude .numero {
  font-size: 19px; font-weight: 800; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.cartao-saude .numero small { font-size: 12px; font-weight: 600; color: var(--texto-3); }
.cartao-saude .detalhe { font-size: 11.5px; color: var(--texto-3); line-height: 1.35; }
/* A cor e reforco, nunca o unico canal: o rotulo e o detalhe dizem em palavras
   o que a faixa colorida sugere. */
.cartao-saude.bom { border-left-color: var(--verde, #35a582); }
.cartao-saude.bom .numero { color: var(--verde, #35a582); }
.cartao-saude.atencao { border-left-color: #b26b2d; }
.cartao-saude.ruim { border-left-color: var(--coral, #de6a51); }
.cartao-saude.ruim .numero { color: var(--coral, #de6a51); }
.cartao-saude.indisponivel .numero { color: var(--texto-3); font-weight: 700; }
.cartao-saude.indisponivel { background: var(--superficie-2); }
.cartao-saude .botao { align-self: flex-start; margin-top: 7px; }

/* ---------------------------------------------------- variacao (0.49.0)

   Como o numero mudou desde o periodo anterior. A COR E REFORCO, NUNCA O
   UNICO CANAL: a seta diz a direcao e a palavra diz o que aconteceu, entao
   quem nao distingue verde de vermelho le a mesma informacao.

   E a cor sai da NATUREZA do numero, nao do sinal: despesa que cai sai
   verde, ponto de equilibrio que sobe sai coral. Ver MELHOR_QUANDO em
   servicos/indicadores.py. */
.variacao {
  display: inline-flex; align-items: flex-start; gap: 4px;
  margin-top: 2px;
  font-size: 11.5px; line-height: 1.3;
  color: var(--texto-3);
  max-width: 100%;
}
.variacao .icone { width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px; }
/* no cartao de situacao a frase e inteira ("era R$ 14.500,00 em agosto de
   2026") e o cartao e estreito: ela QUEBRA em duas linhas em vez de ser
   cortada. Frase cortada no meio de um valor engana mais do que informa. */
.cartao-saude .variacao { white-space: normal; }
.variacao.bom { color: var(--verde-escuro); }
.variacao.ruim { color: var(--coral-escuro); }
.variacao.neutro { color: var(--texto-3); }

/* no cartao de movimento, que e alinhado a direita */
.indicador .variacao { justify-content: flex-end; white-space: nowrap; }

.nota-comparacao { margin-top: 2px; }

/* a grade: quantos graficos couberem, com no minimo 340px cada */
.graficos.grade {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
.graficos.grade .grafico { margin: 0; }
@media (max-width: 720px) {
  .graficos.grade { grid-template-columns: 1fr; }
}

/* o valor na ponta da barra deitada: menor que o rotulo, para caber na calha */
.grafico .rotulo-valor { font-size: 11px; }


/* --------------------------------------------------------------------------
   ANALISE DO PONTO DE EQUILIBRIO (0.44.0)

   A disposicao e a da planilha do Mario: Entradas e Indicadores lado a lado
   em cima, Detalhamento e Resumo embaixo. Em tela estreita tudo empilha.
   -------------------------------------------------------------------------- */
.quadro-equilibrio {
  display: grid; gap: 12px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  align-items: start;
}
.bloco-equilibrio {
  border: 1px solid var(--borda);
  background: var(--superficie);
}
.bloco-equilibrio h2 {
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 9px 13px;
  font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--texto-1); background: var(--superficie-2);
  border-bottom: 1px solid var(--borda);
}
.bloco-equilibrio h2 .icone { width: 15px; height: 15px; color: var(--primaria); }
.nota-bloco {
  margin: 0; padding: 8px 13px;
  font-size: 11.5px; line-height: 1.45; color: var(--texto-3);
  border-bottom: 1px solid var(--borda);
}
.nota-bloco.alerta { color: var(--texto-2); background: var(--primaria-clara); }
.nota-bloco strong { color: var(--texto-1); }

/* os campos que se digita: fundo proprio, como o amarelo da planilha */
.campo-equilibrio {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 13px; border-bottom: 1px solid var(--borda);
}
.campo-equilibrio > span {
  flex: 1; min-width: 0; font-size: 13px; color: var(--texto-2);
}
.campo-equilibrio input {
  width: 150px; flex-shrink: 0;
  padding: 6px 9px; border: 1px solid var(--borda-forte); border-radius: 0;
  background: var(--fundo); color: var(--texto-1);
  font: inherit; font-size: 14px; font-weight: 700; text-align: right;
  font-variant-numeric: tabular-nums;
}
.campo-equilibrio input:focus {
  outline: none; border-color: var(--primaria); background: var(--superficie-2);
}
.campo-equilibrio.destaque input { border-color: var(--primaria); }
.campo-equilibrio.larga input { width: 100%; text-align: left; font-weight: 400; }
.bloco-equilibrio > .botao { margin: 10px 13px 12px; }

/* os indicadores: rotulo a esquerda, numero a direita, como na planilha */
.linha-indicador {
  display: flex; align-items: baseline; gap: 12px;
  padding: 7px 13px; border-bottom: 1px solid var(--borda);
}
.linha-indicador .rotulo {
  flex: 1; min-width: 0; font-size: 13px; color: var(--texto-2);
}
.linha-indicador .rotulo small {
  display: block; font-size: 11px; color: var(--texto-3); line-height: 1.35;
}
.linha-indicador .valor {
  font-size: 15px; font-weight: 800; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.linha-indicador.forte { background: var(--superficie-2); }
.linha-indicador.forte .valor { font-size: 17px; color: var(--primaria); }
.linha-indicador.bom .valor { color: var(--verde, #35a582); }
.linha-indicador.ruim .valor { color: var(--coral, #de6a51); }
.linha-indicador.situacao {
  background: var(--superficie-2); border-bottom: none;
}
.linha-indicador.situacao .valor {
  font-size: 16px; letter-spacing: .06em;
}

/* o detalhamento */
.grupo-detalhe { border-bottom: 1px solid var(--borda); }
.titulo-detalhe {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 13px 5px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-3);
}
.aviso-soma {
  font-size: 10.5px; letter-spacing: .04em; text-transform: none;
  color: var(--coral, #de6a51); font-weight: 700;
}
.linha-detalhe {
  display: flex; align-items: baseline; gap: 12px;
  padding: 5px 13px; font-size: 13px; color: var(--texto-2);
}
.linha-detalhe > span:first-child { flex: 1; min-width: 0; }
.linha-detalhe small { color: var(--texto-3); font-size: 11px; }
.linha-detalhe.total {
  border-top: 1px solid var(--borda); font-weight: 800; color: var(--texto-1);
  padding-top: 6px; padding-bottom: 8px;
}
.linha-detalhe.vazia { color: var(--texto-3); font-style: italic; }
.linha-detalhe.sem-classe { color: var(--texto-3); }

/* arquivar a analise */
.forma-arquivo { padding: 12px 13px 14px; }
.campos-arquivo {
  display: grid; gap: 1px; margin-bottom: 10px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.campos-arquivo .campo-equilibrio {
  flex-direction: column; align-items: stretch; gap: 4px;
  border-bottom: none; padding: 0 8px 0 0;
}
.campos-arquivo .campo-equilibrio > span {
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--texto-3);
}
.campos-arquivo .campo-equilibrio input { width: 100%; text-align: left; }
form.em-linha { display: inline-block; }

/* um grafico so na grade: ele ocupa a linha inteira, como na planilha */
.graficos.grade.um-so { grid-template-columns: 1fr; }

/* o resumo (estreito) e o grafico (largo) na mesma faixa: sem vao no meio */
.faixa-analise {
  display: grid; gap: 12px; margin-bottom: 14px;
  grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
  align-items: start;
}
.faixa-analise > .graficos { margin: 0; }
@media (max-width: 980px) {
  .faixa-analise { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   ONDE ESTOU (0.45.0)

   Duas instalacoes no ar — o servidor do escritorio e a maquina onde o
   sistema e desenvolvido — e nenhuma maneira de saber em qual voce esta.
   Estas duas linhas resolvem isso: discretas o bastante para nao disputar
   com o conteudo, legiveis o bastante para a pessoa ver antes de lancar.
   -------------------------------------------------------------------------- */
.onde-estou {
  margin: 18px -26px -24px;         /* sangra ate as bordas do cartao */
  padding: 10px 26px 12px;
  border-top: 1px solid var(--borda);
  background: var(--superficie-2);
  text-align: center;
  font-size: 11px; letter-spacing: .06em;
  color: var(--texto-3);
}
.onde-estou-rodape {
  font-size: 11px; letter-spacing: .05em; color: var(--texto-3);
}


/* --------------------------------------------------------------------------
   O AVISO DE REINICIAR (0.47.2)

   Aparece no alto de toda tela interna quando os arquivos estao a frente do
   programa que esta rodando. E o unico aviso do sistema que fala do proprio
   sistema, e por isso tem margem embaixo: ele empurra o conteudo, nao se
   mistura com ele.
   -------------------------------------------------------------------------- */
/* Os recados que ficam no alto de QUALQUER tela: precisa reiniciar,
   backup atrasado. Sao avisos, nao erros - e por isso nao roubam a
   tela: uma faixa, espaco embaixo, e o conteudo segue.

   Eles moram FORA da .pagina (ver base.html): dentro dela empurrariam o
   <h1> para baixo, e o Minimizar - que o JS monta a partir desse <h1> -
   sumiria de todo formulario do sistema enquanto o aviso estivesse no ar. */
.avisos-de-topo:not(:empty) {
  padding: 16px 24px 0;
}
.faixa-topo,
.faixa-reiniciar {
  margin: 0 0 4px;
  line-height: 1.5;
}

/* ===================================================================
   O CARREGADOR (0.54.0)

   Pedido do Mário: "um carregador igual ao OnControl, principalmente
   para o backup, e uma mensagem de que tudo ocorreu com sucesso".

   Duas diferenças de propósito em relação ao de lá:

   1. LÁ O NÚMERO É INVENTADO. O OnControl anima 14, 32, 54, 72, 84,
      91, 96% por tempo, sem saber o que está acontecendo. Se a
      operação demora mais do que o previsto, a barra para em 96% e
      parece travada. Aqui o número só aparece quando as ETAPAS são
      conhecidas de verdade (é o caso da cópia de segurança); sem
      etapas, o anel gira sem número — porque não saber é uma
      informação, e fingir que sabe não é.

   2. ELE SÓ APARECE DEPOIS DE UM INSTANTE. Ação que termina em 200 ms
      não pode fazer a tela piscar: pisca-pisca cansa e faz o sistema
      parecer instável. Quem termina rápido nunca é visto.
   =================================================================== */

.carregador {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 24px;
  background: var(--fundo);
  animation: carregador-entra .18s ease-out both;
}

.carregador[hidden] { display: none; }

/* `display: flex` nas peças de dentro vence o atributo `hidden`, e o selo
   escondido aparecia como uma caixinha vazia no meio da tela. Apanhado
   olhando o carregador rodar, não lendo o CSS. */
.carregador [hidden] { display: none !important; }

/* a marca, como no alto de toda tela */
.carregador-marca {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--texto-2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
}
.carregador-marca img { width: 22px; height: 22px; }

/* --------------------------------------------------------- o anel */
.carregador-anel {
  position: relative;
  width: 196px;
  height: 196px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carregador-anel svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.carregador-trilho { stroke: var(--borda-forte); }
.carregador-arco {
  stroke: var(--primaria);
  transition: stroke-dashoffset .5s cubic-bezier(.16, 1, .3, 1);
}

/* sem etapas conhecidas: o arco e curto e gira. Nenhum numero na tela,
   porque nao existe numero para mostrar. */
.carregador--indeterminado .carregador-arco {
  transition: none;
  transform-origin: 100px 100px;
  animation: carregador-gira 1.15s linear infinite;
}

.carregador-conta {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.carregador-numero {
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--texto-1);
  font-variant-numeric: tabular-nums;
}
.carregador-unidade {
  margin-top: 6px;
  font-size: 12px;
  color: var(--texto-3);
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* --------------------------------------------------- o que esta indo */
.carregador-texto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
  max-width: 460px;
}
.carregador-etapa {
  font-size: 15px;
  font-weight: 600;
  color: var(--texto-1);
}
.carregador-detalhe {
  font-size: 13px;
  color: var(--texto-3);
}

/* a lista das etapas, quando elas sao conhecidas: a pessoa ve o que ja
   passou, o que esta indo e o que falta — em vez de uma barra muda */
.carregador-etapas {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 4px;
  padding: 0;
  list-style: none;
  font-size: 13px;
}
.carregador-etapas li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--texto-3);
}
.carregador-etapas li .marca-etapa {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border: 1px solid var(--borda-forte);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
}
.carregador-etapas li.indo { color: var(--texto-1); }
.carregador-etapas li.indo .marca-etapa {
  border-color: var(--primaria);
  color: var(--primaria);
  animation: carregador-pisca 1.2s ease-in-out infinite;
}
.carregador-etapas li.pronta { color: var(--texto-2); }
.carregador-etapas li.pronta .marca-etapa {
  border-color: var(--verde);
  color: var(--verde);
}

/* ------------------------------------------- deu certo / deu errado */
.carregador--pronto .carregador-arco { stroke: var(--verde); }
.carregador--falhou .carregador-arco { stroke: var(--coral); }

.carregador-selo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--borda-forte);
  font-size: 12px;
  color: var(--texto-2);
}
.carregador--pronto .carregador-selo {
  border-color: var(--verde);
  color: var(--verde);
}
.carregador--falhou .carregador-selo {
  border-color: var(--coral);
  color: var(--coral);
}
.carregador-selo svg { width: 15px; height: 15px; }

.carregador-saida {
  margin-top: 4px;
}

@keyframes carregador-entra { from { opacity: 0 } to { opacity: 1 } }
@keyframes carregador-gira { to { transform: rotate(360deg) } }
@keyframes carregador-pisca { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

/* Quem pediu menos movimento no sistema operacional recebe menos
   movimento: o anel para de girar e o pisca-pisca some. A informacao
   continua toda la — ela nunca dependeu da animacao. */
@media (prefers-reduced-motion: reduce) {
  .carregador,
  .carregador--indeterminado .carregador-arco,
  .carregador-etapas li.indo .marca-etapa { animation: none !important; }
  .carregador-arco { transition: none !important; }
}

@media (max-width: 640px) {
  .carregador-anel { width: 150px; height: 150px; }
  .carregador-numero { font-size: 36px; }
}

/* ======================================================================
   Cartão de crédito (0.58.0)

   As cartelas do alto são o que a tela responde antes de qualquer clique:
   quanto já foi do limite e quando vence. A barra é a única peça do sistema
   que muda de cor por faixa — e a cor nunca é o único canal: o valor
   disponível está escrito ao lado, em número.
   ====================================================================== */
.cartoes-painel {
  display: grid; gap: 10px; margin-bottom: 14px;
  /* auto-FILL, nao auto-fit: com um cartao so, o auto-fit esticaria a
     cartela pela tela inteira — um retangulo de 1.200px para mostrar tres
     linhas de texto. O teto de 300px mantem a cartela com cara de cartao. */
  grid-template-columns: repeat(auto-fill, minmax(232px, 300px));
}
.cartao-cartela {
  display: block; padding: 10px 12px;
  border: 1px solid var(--borda); background: var(--superficie);
  color: inherit; text-decoration: none;
}
.cartao-cartela:hover { background: var(--linha-hover); }
.cartao-cartela.escolhido { border-color: var(--primaria); background: var(--primaria-clara); }
.cartao-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 7px;
}
.cartao-nome {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 12.5px; font-weight: 600; color: var(--texto-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cartao-nome .icone { width: 14px; height: 14px; color: var(--primaria); flex: none; }
.cartao-usado {
  font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 700;
  color: var(--texto-1); flex: none;
}
.cartao-usado.estourou { color: var(--coral); }
.cartao-barra {
  height: 4px; margin-bottom: 6px; background: var(--superficie-2);
  border: 1px solid var(--borda);
}
.cartao-barra > span { display: block; height: 100%; background: var(--primaria); }
.cartao-nota {
  margin: 0 0 2px; font-size: 11px; line-height: 1.4; color: var(--texto-3);
}
.cartao-nota strong { color: var(--texto-1); font-variant-numeric: tabular-nums; }

.quadro-faturas {
  display: grid; gap: 12px; margin-bottom: 14px;
  grid-template-columns: minmax(212px, 250px) 1fr;
  align-items: start;
}
.bloco-faturas {
  border: 1px solid var(--borda); background: var(--superficie); min-width: 0;
}
.bloco-faturas h2 {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0; padding: 9px 13px;
  font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--texto-1); background: var(--superficie-2);
  border-bottom: 1px solid var(--borda);
}
.bloco-faturas h2 .icone { width: 15px; height: 15px; color: var(--primaria); flex: none; }
.bloco-faturas .tabela { margin: 0; }
.bloco-faturas h3 {
  margin: 0; padding: 9px 13px 0;
  font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--texto-1);
}

.lista-faturas { list-style: none; margin: 0; padding: 0; }
.lista-faturas a {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 13px; text-decoration: none; color: var(--texto-2);
  border-bottom: 1px solid var(--borda); font-size: 12px;
}
.lista-faturas a:hover { background: var(--linha-hover); }
.lista-faturas a.escolhida {
  background: var(--primaria-clara); color: var(--texto-1);
  box-shadow: inset 2px 0 0 var(--primaria);
}
.fatura-competencia {
  font-weight: 600; color: var(--texto-1); font-variant-numeric: tabular-nums;
}
.fatura-vence { margin-left: auto; font-size: 11px; color: var(--texto-3); }

.acoes-fatura {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 9px 13px; border-bottom: 1px solid var(--borda);
}
.cartao-form.embutido {
  margin: 0; border: 0; border-top: 1px solid var(--borda); box-shadow: none;
}

@media (max-width: 860px) {
  /* Abaixo desta largura as duas colunas viram uma: a lista de faturas
     espremida ao lado da tabela de itens não cabe em nenhuma das duas. */
  .quadro-faturas { grid-template-columns: 1fr; }
}

/* A marca "de onde este registro veio" (0.61.0): mesma caixinha das
   parcelas, mas clicável — e por isso ela se comporta como link no
   passar do mouse, senão pareceria mais um selo morto. */
.marca-parcela.vinda {
  color: var(--primaria); text-decoration: none;
  border-color: var(--primaria-borda, var(--borda-forte));
}
.marca-parcela.vinda:hover { text-decoration: underline; }