/* ==========================================================================
   Financeiro - cliente web
   Paleta em variaveis; o bloco prefers-color-scheme so troca os valores.
   ========================================================================== */

:root {
  --fundo:        #f4f5f7;
  --painel:       #ffffff;
  --painel-alt:   #fafbfc;
  --borda:        #dfe3e8;
  --borda-forte:  #c4cad2;
  --texto:        #1c2430;
  --texto-fraco:  #67717f;
  --texto-tenue:  #9aa3ae;
  --acento:       #1e6fd9;
  --acento-fundo: #e8f1fd;
  --acento-forte: #17559f;
  --perigo:       #c0392b;
  --perigo-fundo: #fdecea;
  --ok:           #1d7a4c;
  --ok-fundo:     #e6f5ed;
  --alerta:       #9a6606;
  --alerta-fundo: #fdf3e0;
  --sombra:       0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.07);
  --sombra-alta:  0 8px 32px rgba(16,24,40,.18);
  --raio:         7px;
  --barra:        236px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo:        #14181e;
    --painel:       #1c222a;
    --painel-alt:   #222932;
    --borda:        #2e3742;
    --borda-forte:  #3d4855;
    --texto:        #e4e8ee;
    --texto-fraco:  #9aa5b3;
    --texto-tenue:  #6d7885;
    --acento:       #63a4f5;
    --acento-fundo: #1b2c42;
    --acento-forte: #8dbdfa;
    --perigo:       #f0796b;
    --perigo-fundo: #3a2220;
    --ok:           #55c78d;
    --ok-fundo:     #17301f;
    --alerta:       #e3ae52;
    --alerta-fundo: #33290f;
    --sombra:       0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35);
    --sombra-alta:  0 8px 32px rgba(0,0,0,.55);
  }
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--fundo);
  color: var(--texto);
  font: 14px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }

a { color: var(--acento); }

/* --------------------------------------------------------------- carregando */

.carregando {
  display: grid;
  place-items: center;
  height: 100%;
}

.aguarde {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--texto-fraco);
}

.giro {
  width: 16px; height: 16px;
  border: 2px solid var(--borda-forte);
  border-top-color: var(--acento);
  border-radius: 50%;
  animation: girar .7s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------------- login */

.tela-login {
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: 24px;
}

.cartao-login {
  width: 100%;
  max-width: 380px;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 12px;
  box-shadow: var(--sombra);
  padding: 30px 28px;
}

.cartao-login .marca {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 22px;
}

.cartao-login .marca b { font-size: 17px; }

.cartao-login .marca span {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  background: var(--acento); color: #fff;
  border-radius: 8px; font-weight: 700;
}

.cartao-login p.sub {
  margin: -14px 0 22px;
  color: var(--texto-fraco);
  font-size: 13px;
}

/* ------------------------------------------------------------------- layout */

.moldura {
  display: grid;
  grid-template-columns: var(--barra) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "barra topo" "barra conteudo";
  height: 100%;
}

.topo {
  grid-area: topo;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  height: 56px;
  background: var(--painel);
  border-bottom: 1px solid var(--borda);
}

.topo .titulo-tela { font-size: 16px; font-weight: 600; }
.topo .espaco { flex: 1; }

.topo .empresa {
  text-align: right;
  line-height: 1.25;
  font-size: 12px;
}
.topo .empresa strong { display: block; font-size: 13px; }
.topo .empresa span { color: var(--texto-fraco); }

.barra {
  grid-area: barra;
  background: var(--painel);
  border-right: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.barra .marca {
  display: flex; align-items: center; gap: 9px;
  padding: 0 16px; height: 56px;
  border-bottom: 1px solid var(--borda);
  font-weight: 600;
}

.barra .marca span {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  background: var(--acento); color: #fff;
  border-radius: 7px; font-size: 13px; font-weight: 700;
}

.barra nav { padding: 10px 8px; display: flex; flex-direction: column; gap: 1px; }

/*
  Cabecalho de grupo: e um <button>, nao um rotulo. Com tres grupos - e
  Lancamentos a caminho - a barra passa a nao caber num monitor baixo, e
  recolher o que nao esta em uso e o que devolve a visao do conjunto.
*/
.barra .grupo-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding: 14px 10px 6px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-tenue);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.barra .grupo-titulo:hover { color: var(--texto-fraco); }

.barra .grupo-titulo:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: -2px;
  border-radius: 5px;
}

.barra .grupo-titulo svg {
  flex: none;
  transition: transform .15s ease-out;
}

.barra .grupo.fechado .grupo-titulo svg { transform: rotate(-90deg); }
.barra .grupo.fechado .grupo-itens { display: none; }

.barra .grupo-itens {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .barra .grupo-titulo svg { transition: none; }
}

.barra a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--texto);
  text-decoration: none;
  font-size: 13.5px;
}

.barra a:hover { background: var(--painel-alt); }

.barra a.ativo {
  background: var(--acento-fundo);
  color: var(--acento-forte);
  font-weight: 600;
}

.barra .rodape {
  margin-top: auto;
  padding: 12px 14px;
  border-top: 1px solid var(--borda);
  font-size: 11.5px;
  color: var(--texto-tenue);
}

.conteudo {
  grid-area: conteudo;
  overflow: auto;
  padding: 18px 20px 40px;
}

/* ------------------------------------------------------------------ avisos */

.faixa {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  border-radius: var(--raio);
  font-size: 13px;
  margin-bottom: 14px;
}
.faixa.alerta { background: var(--alerta-fundo); color: var(--alerta); }
.faixa.erro   { background: var(--perigo-fundo); color: var(--perigo); }

/* --------------------------------------------------------------- ferramentas */

.ferramentas {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.busca { position: relative; }

/*
  [type=text] no seletor por necessidade, nao por enfeite: sem ele a regra
  empata em especificidade com input[type=text] la embaixo, que vem depois no
  arquivo e leva o padding de volta para 10px - a lupa fica por cima da
  primeira letra.
*/
.busca input[type=text] {
  width: 280px;
  padding-left: 31px;
}

.ferramentas .espaco { flex: 1; }

.busca svg {
  position: absolute; left: 9px; top: 50%;
  transform: translateY(-50%);
  color: var(--texto-tenue);
  pointer-events: none;
}

/* --------------------------------------------------------- campos e botoes */

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], select, textarea {
  width: 100%;
  padding: 7px 10px;
  background: var(--painel);
  color: var(--texto);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  font: inherit;
  outline: none;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-fundo);
}

input:disabled, select:disabled, textarea:disabled {
  background: var(--painel-alt);
  color: var(--texto-fraco);
}

textarea { resize: vertical; min-height: 62px; }

label.rotulo {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-fraco);
}

label.caixa {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px;
  cursor: pointer;
  user-select: none;
}

label.caixa input { width: 15px; height: 15px; accent-color: var(--acento); }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--painel);
  color: var(--texto);
  font: inherit; font-weight: 500;
  cursor: pointer;
  white-space: nowrap;

  /* O botao de voltar dos relatorios e um <a>, para o navegador tratar como
     endereco - abrir noutra aba, copiar o link. Sem isto ele herda o
     sublinhado de 'a' e desempata com os botoes ao lado. */
  text-decoration: none;
}

.btn:hover:not(:disabled) { background: var(--painel-alt); }
.btn:disabled { opacity: .55; cursor: default; }

.btn.primario {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}
.btn.primario:hover:not(:disabled) { background: var(--acento-forte); border-color: var(--acento-forte); }

.btn.perigo { color: var(--perigo); border-color: var(--borda-forte); }
.btn.perigo:hover:not(:disabled) { background: var(--perigo-fundo); }

.btn.plano { border-color: transparent; background: transparent; }
.btn.plano:hover:not(:disabled) { background: var(--painel-alt); }

.btn.largo { width: 100%; justify-content: center; padding: 9px; }

.btn-icone {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--texto-fraco);
  cursor: pointer;
}
.btn-icone:hover { background: var(--painel-alt); color: var(--texto); }
.btn-icone.perigo:hover { background: var(--perigo-fundo); color: var(--perigo); }

/* ------------------------------------------------------------------ tabela */

.quadro {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.rolagem { overflow-x: auto; }

table.grade {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

table.grade th {
  text-align: left;
  padding: 9px 12px;
  background: var(--painel-alt);
  border-bottom: 1px solid var(--borda);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-fraco);
  white-space: nowrap;
}

table.grade td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

table.grade tr:last-child td { border-bottom: 0; }
table.grade tbody tr:hover { background: var(--painel-alt); }
table.grade tr.desativada td:not(.acoes) { opacity: .5; }

td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; }
td.acoes { text-align: right; width: 1%; padding: 4px 8px; }
td.acoes > div { display: flex; gap: 2px; justify-content: flex-end; }

/*
  Coluna de acoes presa a direita. Em larguras intermediarias - um tablet em
  retrato, por exemplo - a grade nao cabe e rola; sem isto, alterar e excluir
  ficam fora da tela ate o usuario arrastar ate o fim. O fundo precisa ser
  opaco, senao o conteudo que rola passa por baixo e se mistura.
*/
table.grade td.acoes,
table.grade th:last-child {
  position: sticky;
  right: 0;
  z-index: 1;
  border-left: 1px solid var(--borda);
}

table.grade td.acoes { background: var(--painel); }
table.grade th:last-child { background: var(--painel-alt); }
table.grade tbody tr:hover td.acoes { background: var(--painel-alt); }

.etiqueta {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}
.etiqueta.inativo { background: var(--perigo-fundo); color: var(--perigo); }
.etiqueta.receita { background: var(--ok-fundo);     color: var(--ok); }
.etiqueta.despesa { background: var(--perigo-fundo); color: var(--perigo); }
.etiqueta.neutra  { background: var(--painel-alt);   color: var(--texto-fraco); }

.vazio {
  padding: 44px 20px;
  text-align: center;
  color: var(--texto-fraco);
}
.vazio strong { display: block; margin-bottom: 4px; color: var(--texto); }

.rodape-grade {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-top: 1px solid var(--borda);
  background: var(--painel-alt);
  font-size: 12.5px;
  color: var(--texto-fraco);
  flex-wrap: wrap;
}
.rodape-grade .espaco { flex: 1; }
.rodape-grade select { width: auto; padding: 3px 6px; font-size: 12.5px; }

/* ------------------------------------------------------------------ modais */

.fundo-modal {
  position: fixed; inset: 0;
  background: rgba(12,17,23,.5);
  display: grid; place-items: center;
  padding: 20px;
  z-index: 40;
  animation: surgir .12s ease-out;
}

@keyframes surgir { from { opacity: 0 } to { opacity: 1 } }

.modal {
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: 10px;
  box-shadow: var(--sombra-alta);
}

.modal.largo { max-width: 800px; }

.modal header {
  display: flex; align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--borda);
}
.modal header h2 { font-size: 15px; flex: 1; }

.modal .corpo { padding: 18px; overflow: auto; }
.modal .corpo > p { margin: 0 0 6px; color: var(--texto-fraco); }

/*
  O .espaco empurra o que vem depois para a direita, deixando o que vem antes
  na extrema esquerda. Sem esta regra ele tem largura zero e o
  justify-content: flex-end cola tudo no canto direito - era o que acontecia
  com o "Marcar tudo" do modal de acessos.
*/
.modal footer .espaco { flex: 1; }

.modal footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 13px 18px;
  border-top: 1px solid var(--borda);
  background: var(--painel-alt);
  border-radius: 0 0 10px 10px;
}

/* ------------------------------------------------------------- formularios */

.malha {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 13px;
}

.campo { grid-column: span 12; }
.campo.c2  { grid-column: span 2; }
.campo.c3  { grid-column: span 3; }
.campo.c4  { grid-column: span 4; }
.campo.c6  { grid-column: span 6; }
.campo.c8  { grid-column: span 8; }
.campo.c9  { grid-column: span 9; }

.campo .erro-campo {
  margin-top: 4px;
  font-size: 12px;
  color: var(--perigo);
}
.campo.invalido input, .campo.invalido select, .campo.invalido textarea {
  border-color: var(--perigo);
}

.separador {
  grid-column: span 12;
  margin: 6px 0 -4px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texto-tenue);
  border-top: 1px solid var(--borda);
  padding-top: 12px;
}

/* -------------------------------------------------------- avisos flutuantes */

.pilha-aviso {
  position: fixed;
  right: 16px; bottom: 16px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 60;
}

.aviso {
  display: flex; align-items: center; gap: 9px;
  min-width: 240px; max-width: 380px;
  padding: 10px 14px;
  border-radius: var(--raio);
  background: var(--painel);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--texto-fraco);
  box-shadow: var(--sombra-alta);
  font-size: 13.5px;
  animation: entrar .16s ease-out;
}

@keyframes entrar { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

.aviso.ok     { border-left-color: var(--ok); }
.aviso.erro   { border-left-color: var(--perigo); }
.aviso.alerta { border-left-color: var(--alerta); }

/* ------------------------------------------------- escolha de empresa */

.lista-empresas { display: flex; flex-direction: column; gap: 8px; }

.lista-empresas button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 13px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--painel);
  color: var(--texto);
  font: inherit;
  cursor: pointer;
}
.lista-empresas button:hover { border-color: var(--acento); background: var(--acento-fundo); }
.lista-empresas strong { display: block; }
.lista-empresas small { color: var(--texto-fraco); }

/* ----------------------------------------------------------------- titulos */

.periodo {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--texto-fraco);
}
.periodo input { width: auto; }

.busca-pessoa input { width: 220px; }

/* Vencido chama atencao sem gritar: so a celula do vencimento muda */
table.grade td.venceu { color: var(--perigo); font-weight: 600; }

.valor-fixo {
  padding: 7px 0;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.resumo-baixa {
  margin: 4px 18px 0;
  padding: 12px 14px;
  background: var(--painel-alt);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  font-size: 13.5px;
}
.resumo-baixa > div { display: flex; justify-content: space-between; padding: 2px 0; }
.resumo-baixa > div span { color: var(--texto-fraco); }
.resumo-baixa strong { font-variant-numeric: tabular-nums; }

.alerta-baixa {
  display: block;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--borda);
  color: var(--alerta);
  font-size: 13px;
}
.alerta-baixa.erro { color: var(--perigo); }

@media (max-width: 640px) {
  .periodo { flex: 1 1 100%; }
  .periodo input { flex: 1; min-width: 0; }
  .busca-pessoa { flex: 1 1 100%; }
  .busca-pessoa input { width: 100%; }
  .resumo-baixa { margin: 4px 14px 0; }
}

/* ---------------------------------------------------------------- seletor */

.seletor { position: relative; }

.seletor-lista {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 240px;
  overflow-y: auto;
  background: var(--painel);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
}

.seletor-item {
  padding: 7px 10px;
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seletor-item:hover,
.seletor-item.destacado { background: var(--acento-fundo); color: var(--acento-forte); }

.seletor-vazio {
  padding: 12px 10px;
  font-size: 13px;
  color: var(--texto-fraco);
}

/* ------------------------------------------------- configuracao de acessos */

.cabeca-config {
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--borda);
}
.cabeca-config strong { display: block; margin-bottom: 3px; }
.cabeca-config span { font-size: 13px; color: var(--texto-fraco); }

.lista-acoes {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13.5px;
}
.lista-acoes > div { display: flex; align-items: center; gap: 8px; }

.opcoes-config {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* o radio alinha com a primeira linha, nao com o meio do bloco de texto */
.opcoes-config .caixa { align-items: flex-start; }
.opcoes-config .caixa input { margin-top: 2px; }
.opcoes-config small { color: var(--texto-fraco); }

/* ------------------------------------------------------------------ inicio */

.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.cartao {
  display: block;
  padding: 16px;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  text-decoration: none;
  color: var(--texto);
}
.cartao:hover { border-color: var(--acento); }
.cartao strong { display: block; margin-bottom: 3px; }
.cartao span { font-size: 12.5px; color: var(--texto-fraco); }

.ficha {
  margin-top: 18px;
  padding: 16px;
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  font-size: 13px;
}
.ficha dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.ficha dt { color: var(--texto-fraco); }
.ficha dd { margin: 0; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- estreito */

/*
  O botao de menu so existe abaixo de 820px. Acima disso a barra lateral esta
  sempre visivel e um botao para abri-la nao teria o que fazer.
*/
.abre-menu { display: none; }

@media (max-width: 820px) {
  .moldura {
    grid-template-columns: 1fr;
    grid-template-areas: "topo" "conteudo";
  }

  .abre-menu { display: grid; }

  /* A barra vira gaveta. Esconde-la com display:none deixaria a tela sem
     navegacao nenhuma - e foi o que aconteceu na primeira versao. */
  .barra {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(280px, 84vw);
    z-index: 50;
    transform: translateX(-100%);
    transition: transform .18s ease-out;
    box-shadow: var(--sombra-alta);
  }

  .barra.aberta { transform: none; }

  .veu-menu {
    position: fixed;
    inset: 0;
    background: rgba(12,17,23,.5);
    z-index: 45;
  }

  .topo { padding: 0 12px; gap: 8px; }
  .topo .empresa span { display: none; }
  .topo .empresa strong { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .conteudo { padding: 14px 12px 32px; }

  .busca input[type=text] { width: 100%; }
  .ferramentas .busca { flex: 1 1 160px; }
}

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

/* Alvo de toque: 28px de mouse nao serve para o dedo. */
@media (pointer: coarse) {
  .btn-icone { width: 36px; height: 36px; }
  table.grade td { padding: 11px 12px; }
  .barra a { padding: 11px 10px; }
}

/*
  Telefone.

  A grade nao cabe inteira em 375px, e rolar ate a direita para achar o botao
  de alterar e um mau negocio. Entao: as colunas secundarias saem, e o toque
  na linha abre o registro (js/telas/cadastro.js).

  A conta que faz o resto caber nos 350px uteis, medida no navegador: codigo
  64 + situacao 92 + acoes 82 = 238, sobrando 112 para o nome - que e de onde
  vem o 30vw. Sem prender o nome, a soma dava 436 e a grade rolava.

  Este bloco vem depois de (pointer: coarse) de proposito: as duas regras de
  .btn-icone empatam em especificidade, e no telefone quem tem de vencer e a
  daqui.
*/
@media (max-width: 640px) {
  .ferramentas .busca { flex: 1 1 100%; }
  .ferramentas .espaco { display: none; }
  .ferramentas .btn.primario { margin-left: auto; }

  table.grade .secundaria { display: none; }
  table.grade th, table.grade td { padding-left: 9px; padding-right: 9px; }
  table.grade th.principal, table.grade td.principal { max-width: 30vw; }
  .btn-icone { width: 32px; height: 32px; }

  .rodape-grade { gap: 8px 10px; }

  /* Formulario: "UF" com 2 de 12 colunas daria uns 50 pixels. Os campos
     curtos passam a meia largura e os longos, a inteira. */
  .malha { gap: 11px; }

  .campo.c2, .campo.c3, .campo.c4 { grid-column: span 6; }
  .campo.c6, .campo.c8, .campo.c9 { grid-column: span 12; }

  .modal .corpo { padding: 14px; }
  .modal header, .modal footer { padding: 12px 14px; }
  .modal footer .btn { flex: 1; justify-content: center; }

  .fundo-modal { padding: 10px; }
  .modal { max-height: 96vh; }
}

/* ------------------------------------------------------------ parcelamento */

.resumo-parcelas {
  padding: 10px 12px;
  background: var(--acento-fundo);
  border-radius: var(--raio);
  font-size: 13px;
  color: var(--texto);
}
.resumo-parcelas span { color: var(--texto-fraco); }

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

/* Cabecalho de grupo no indice - "Cadastros", "Titulos", ... */
.titulo-grupo {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texto-fraco);
  margin: 18px 0 10px;
}
.titulo-grupo:first-child { margin-top: 0; }

.folha { padding: 18px 20px 14px; }

.folha-cabeca {
  border-bottom: 2px solid var(--borda-forte);
  padding-bottom: 12px;
  margin-bottom: 4px;
}

.folha-empresa strong { display: block; font-size: 14px; }
.folha-empresa span { font-size: 12.5px; color: var(--texto-fraco); }

.folha-cabeca h2 { font-size: 17px; margin: 10px 0 8px; }

.folha-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 12.5px;
  color: var(--texto-fraco);
}
.folha-filtros b { font-weight: 600; }
.folha-filtros .emissao { margin-left: auto; }

/*
  Tabela do relatorio. Parecida com a .grade, mas NAO e ela - duas diferencas
  que nao dava para obter com uma classe a mais:

  - a .grade prende a ultima coluna a direita, para o botao de alterar ficar
    sempre visivel. Relatorio nao tem coluna de acoes, entao o que ficaria
    preso e a ultima coluna de dado;
  - a .grade corta o texto longo com reticencias. Numa folha impressa isso e
    perda de informacao sem aviso: aqui a celula quebra em varias linhas.
*/
table.folha-grade {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table.folha-grade th {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--borda-forte);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-fraco);
  white-space: nowrap;
}

table.folha-grade td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--borda);
  vertical-align: top;
}

/*
  width: 1% encolhe a coluna ate o conteudo - a tabela nao pode respeitar uma
  largura menor que a maior celula, entao 1% vira "o minimo possivel". Sem
  isto o navegador reparte a largura por igual, e um relatorio de duas
  colunas sai com o codigo no meio da folha, longe do nome que ele numera.

  Vale para numero, data e sim_nao, que tem tamanho conhecido; o texto fica
  com a sobra, que e o que precisa dela.
*/
table.folha-grade td.numero, table.folha-grade th.numero {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  width: 1%;
}
table.folha-grade td.centro, table.folha-grade th.centro {
  text-align: center;
  white-space: nowrap;
  width: 1%;
}

/* Subtitulo da quebra. O fundo o separa das linhas sem precisar de uma
   linha em branco, que na folha impressa custaria altura. */
table.folha-grade tr.quebra td {
  padding-top: 12px;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .02em;
  border-bottom: 1px solid var(--borda-forte);
  background: var(--painel-alt);
}

.folha-rodape {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--borda);
  font-size: 12.5px;
  color: var(--texto-fraco);
  text-align: right;
}

@media (max-width: 640px) {
  .folha { padding: 14px 12px 12px; }
  .folha-filtros .emissao { margin-left: 0; }
}

/* ------------------------------------------------------------- impressao */

/*
  O PDF sai daqui: window.print() e o usuario escolhe "Salvar como PDF". A
  API nao gera PDF - a mesma marcacao serve a consulta e a folha, e o que
  muda entre as duas e so este bloco.
*/
@media print {
  @page { margin: 14mm; }

  /*
    Cor fixa, e nao variavel. O @media print nao desliga o
    prefers-color-scheme: no navegador em tema escuro a folha sairia com
    texto claro sobre fundo escuro - branco na tela, ilegivel no papel, e
    uma carga de toner por pagina.
  */
  html, body {
    background: #fff;
    color: #000;
    height: auto;
  }

  .barra, .topo, .ferramentas, .pilha-aviso, .veu-menu, #pilha-modal {
    display: none !important;
  }

  .moldura { display: block; height: auto; }
  .conteudo { overflow: visible; padding: 0; }

  .quadro {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
    overflow: visible;
  }

  /* overflow-x: auto vira uma unica folha cortada na impressao */
  .rolagem { overflow: visible; }

  .folha { padding: 0; }
  .folha-cabeca { border-bottom-color: #000; }
  .folha-empresa span, .folha-filtros, .folha-rodape { color: #333; }

  /*
    O cabecalho da tabela repete em TODA folha. Sem isto a folha 2 chega sem
    titulo de coluna, que e o defeito mais comum em relatorio impresso na
    web - e so aparece quando o relatorio passa de uma folha, ou seja,
    depois de publicado.
  */
  table.folha-grade thead { display: table-header-group; }
  table.folha-grade tr { break-inside: avoid; page-break-inside: avoid; }

  /* Subtitulo de grupo sozinho no pe da folha e o outro defeito classico:
     o grupo comeca numa folha e o conteudo dele esta na seguinte. */
  table.folha-grade tr.quebra {
    break-after: avoid;
    page-break-after: avoid;
  }

  table.folha-grade th {
    color: #000;
    border-bottom-color: #000;
    background: #fff;
  }
  table.folha-grade td { border-bottom-color: #bbb; }
  table.folha-grade tr.quebra td {
    background: #eee;
    border-bottom-color: #000;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .folha-cabeca { break-after: avoid; page-break-after: avoid; }
  .folha-rodape { border-top-color: #000; }
}