/* =====================================================================
   Visual compartilhado por todas as telas.

   A IDEIA CENTRAL: a densidade responde ao PONTEIRO, não à largura.

   O mesmo sistema atende dois usos opostos. No pátio é dedo, sol na tela
   e mão molhada: alvo grande, contraste alto. Na mesa é mouse, tela
   grande e trabalho demorado: compacto, para caber informação.

   Largura sozinha erraria — um tablet de 1024px é toque, e merece alvo
   grande. Por isso as medidas saem de variáveis trocadas por
   `pointer: fine`, e todo o resto só as consome.
   ===================================================================== */

:root{
  /* ---------------------------------------------------------------
     Escala tipográfica das telas do app.

     Antes eram 34 tamanhos diferentes, com quatro degraus entre 13 e
     14px que ninguém distingue de olho mas que faziam cada tela parecer
     levemente diferente da vizinha. Sete degraus, cada um com um
     trabalho — e quando faltar um tamanho, a resposta é usar o degrau
     vizinho, não inventar o trigésimo quinto.

     As páginas de venda (index, entrar, privacidade, termos) NÃO usam
     esta escala: lá a tipografia é de página que vende, com título
     grande, e não de painel de trabalho.
     --------------------------------------------------------------- */
  --txt-rotulo:  0.6875rem;  /* 11px — rótulo em maiúsculas */
  --txt-legenda: 0.75rem;    /* 12px — legenda, dica */
  --txt-menor:   0.8125rem;  /* 13px — texto secundário */
  --txt-apoio:   0.875rem;   /* 14px — texto de apoio, o mais usado */
  /* 15px, o mesmo do `body`: o tamanho herdado por tudo que não pede
     outro. Antes a escala tinha 16px aqui e o body ficava em 15 — um
     degrau fora da escala é como os quatro entre 13 e 14 que a escala
     veio resolver. */
  --txt-corpo:   0.9375rem;  /* 15px — corpo, e o padrão herdado */
  --txt-numero:  1.25rem;    /* 20px — número em destaque */
  --txt-titulo:  1.625rem;   /* 26px — título de tela */

  /* cor */
  --fundo:#F1F5F9;
  --cartao:#FFFFFF;
  --texto:#0F172A;
  --texto-fraco:#526176;   /* escurecido: #64748B dava 4,34 sobre o fundo, abaixo do mínimo */
  --linha:#E2E8F0;
  --linha-forte:#CBD5E1;
  --marca:#1E40AF;
  --marca-clara:#EFF6FF;
  --marca-borda:#BFDBFE;
  --acao:#1D4ED8;
  --ok:#15803D;      --ok-fundo:#DCFCE7;      --ok-borda:#86EFAC;
  --alerta:#B45309;  --alerta-fundo:#FEF3C7;  --alerta-borda:#FDE68A;
  --perigo:#B91C1C;  --perigo-fundo:#FEE2E2;  --perigo-borda:#FECACA;
  --roxo:#6D28D9;    --roxo-fundo:#F5F3FF;    --roxo-borda:#DDD6FE;

  /* medida — é só isto que muda entre dedo e mouse */
  --alvo:48px;          /* altura de botão e campo */
  --alvo-min:44px;      /* alvo de toque mínimo */
  --base:16px;          /* corpo de texto */
  --esp:1rem;           /* respiro padrão */
  --esp-min:.6rem;
  --raio:10px;
  --sombra:0 1px 2px rgba(15,23,42,.06);
  --sombra-alta:0 2px 8px rgba(15,23,42,.08);
}

/* Mouse: aperta tudo. Não é decisão nova de design — são as mesmas peças,
   medidas para quem aponta com precisão e passa horas na tela. */
@media (pointer: fine){
  :root{
    --alvo:36px;
    --alvo-min:32px;
    --base:15px;
    --esp:.75rem;
    --esp-min:.45rem;
    --raio:8px;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--fundo);
  color:var(--texto);
  font:400 var(--base)/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* Escala contida: o maior título é 1.5× o corpo. Título gigante em tela
   de trabalho rouba espaço da informação. */
h1,h2,h3{margin:0;line-height:1.25;letter-spacing:-.015em;font-weight:650}
h1{font-size:var(--txt-titulo);font-weight:700}
h2{font-size:var(--txt-corpo)}
h3{font-size:var(--txt-corpo)}
@media (pointer: fine){
  h1{font-size:var(--txt-numero)}
  h2{font-size:var(--txt-corpo)}
}
p{margin:0}
a{color:var(--acao)}
:focus-visible{outline:2px solid var(--acao);outline-offset:2px;border-radius:4px}

/* ---------- estrutura ---------- */
.envelope{max-width:60rem;margin-inline:auto;padding:var(--esp) var(--esp) 5rem}

.topo{position:sticky;top:0;z-index:30;background:var(--marca);color:#fff}
.topo .dentro{
  max-width:60rem;margin-inline:auto;padding:.6rem var(--esp);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:52px;
}
.topo .nome{font-weight:650;font-size:var(--txt-corpo);letter-spacing:-.01em}
.topo .quem{font-size:var(--txt-legenda);opacity:.8}

/* ---------- abas de baixo (celular) ---------- */
/* Com poucas abas os itens dividem a largura em partes iguais. Quando
   passam de sete, dividir de novo espremeria "Fornecedores" até virar
   sopa de letra — então a barra passa a rolar de lado. A barra de rolagem
   fica escondida porque em celular ninguém arrasta uma barrinha: arrasta
   a própria faixa. */
.menu{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:var(--cartao);border-top:1px solid var(--linha);
  display:flex;padding-bottom:env(safe-area-inset-bottom);
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.menu::-webkit-scrollbar{display:none}
.menu a{
  position:relative;flex:1 0 auto;min-width:62px;min-height:56px;padding:0 .3rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--texto-fraco);text-decoration:none;font-size:var(--txt-rotulo);font-weight:600;
  white-space:nowrap;
}
.menu a[aria-current="page"]{color:var(--marca);background:var(--marca-clara)}
.menu svg{width:20px;height:20px}

/* ---------- cartão ---------- */
.cartao{
  background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);
  padding:var(--esp);box-shadow:var(--sombra);margin-bottom:var(--esp-min);
}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:var(--alvo);padding:.4rem 1rem;border-radius:var(--raio);
  font:inherit;font-weight:600;font-size:var(--txt-apoio);cursor:pointer;
  border:1px solid transparent;background:var(--acao);color:#fff;
  text-decoration:none;width:100%;transition:background .15s,border-color .15s,color .15s;
}
.btn:hover{background:var(--marca)}
.btn:active{transform:translateY(.5px)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.secundario{background:var(--cartao);color:var(--texto);border-color:var(--linha-forte)}
.btn.secundario:hover{background:var(--fundo);border-color:var(--acao);color:var(--acao)}
.btn.perigo{background:var(--perigo)}
.btn.grande{min-height:calc(var(--alvo) + 8px);font-size:var(--txt-corpo)}
.btn.auto{width:auto}

/* ---------- formulário ---------- */
.campo{margin-bottom:var(--esp)}
.campo label{display:block;font-weight:600;font-size:var(--txt-apoio);margin-bottom:.3rem}
.campo .ajuda{font-size:var(--txt-legenda);color:var(--texto-fraco);margin-top:.25rem;line-height:1.4}
input,select,textarea{
  width:100%;min-height:var(--alvo);padding:.4rem .65rem;
  border:1px solid var(--linha-forte);border-radius:var(--raio);
  font:inherit;font-size:var(--txt-corpo);color:var(--texto);background:var(--cartao);
}
textarea{min-height:5rem;padding:.5rem .65rem;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{
  border-color:var(--acao);outline:2px solid var(--marca-borda);outline-offset:0;
}
input::placeholder,textarea::placeholder{color:#94A3B8}

/* ---------- etiquetas ---------- */
.etiqueta{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.15rem .5rem;border-radius:5px;
  font-size:var(--txt-legenda);font-weight:700;letter-spacing:.01em;
  border:1px solid transparent;white-space:nowrap;
}
.etiqueta.aguardando{background:var(--alerta-fundo);color:var(--alerta);border-color:var(--alerta-borda)}
.etiqueta.em_lavagem{background:var(--marca-clara);color:var(--marca);border-color:var(--marca-borda)}
.etiqueta.pronto    {background:var(--ok-fundo);color:var(--ok);border-color:var(--ok-borda)}
.etiqueta.entregue  {background:#F1F5F9;color:var(--texto-fraco);border-color:var(--linha-forte)}
.etiqueta.cancelado {background:var(--perigo-fundo);color:var(--perigo);border-color:var(--perigo-borda)}
.etiqueta.aberto    {background:var(--alerta-fundo);color:var(--alerta);border-color:var(--alerta-borda)}
.etiqueta.respondido{background:var(--marca-clara);color:var(--marca);border-color:var(--marca-borda)}
.etiqueta.resolvido {background:#F1F5F9;color:var(--texto-fraco);border-color:var(--linha-forte)}
.etiqueta.pendente  {background:var(--roxo-fundo);color:var(--roxo);border-color:var(--roxo-borda)}
.etiqueta.teste     {background:var(--alerta-fundo);color:var(--alerta);border-color:var(--alerta-borda)}
.etiqueta.ativo     {background:var(--ok-fundo);color:var(--ok);border-color:var(--ok-borda)}
.etiqueta.bloqueado {background:var(--perigo-fundo);color:var(--perigo);border-color:var(--perigo-borda)}

/* ---------- avisos ---------- */
.aviso{
  padding:.6rem .8rem;border-radius:var(--raio);margin-bottom:var(--esp);
  font-size:var(--txt-apoio);line-height:1.5;border:1px solid;
}
.aviso.erro{background:var(--perigo-fundo);color:var(--perigo);border-color:var(--perigo-borda)}
.aviso.bom {background:var(--ok-fundo);color:var(--ok);border-color:var(--ok-borda)}
.aviso.info{background:var(--marca-clara);color:var(--marca);border-color:var(--marca-borda)}
[hidden]{display:none !important}

/* ---------- estados ---------- */
.vazio{text-align:center;padding:2rem 1rem;color:var(--texto-fraco);font-size:var(--txt-apoio)}
.vazio h3{margin-bottom:.3rem;color:var(--texto)}
.carregando{padding:1.5rem;text-align:center;color:var(--texto-fraco);font-size:var(--txt-apoio)}

/* ---------- bolinha de aviso no menu ---------- */
.aviso-num{
  display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;
  margin-left:.3rem;border-radius:999px;background:var(--perigo);color:#fff;
  font-size:var(--txt-rotulo);font-weight:700;line-height:1;vertical-align:middle;
}
.menu a{position:relative}
.menu .aviso-num{position:absolute;transform:translate(13px,-14px)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}


/* =====================================================================
   COMPUTADOR — menu lateral a partir de 900px
   ===================================================================== */

.lateral{display:none}

@media (min-width:900px){
  .topo,
  .menu{display:none}

  body{padding-left:216px}

  .lateral{
    display:flex;flex-direction:column;
    position:fixed;left:0;top:0;bottom:0;width:216px;z-index:40;
    background:var(--cartao);border-right:1px solid var(--linha);
  }

  .lateral .cabeca{padding:.85rem .8rem;border-bottom:1px solid var(--linha)}
  .lateral .cabeca .nome{font-weight:700;font-size:var(--txt-corpo);letter-spacing:-.015em;
                         overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lateral .cabeca .sub{font-size:var(--txt-legenda);color:var(--texto-fraco);margin-top:.1rem}

  .lateral .grupo{
    padding:.85rem .8rem .2rem;font-size:var(--txt-rotulo);font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;color:#6B7A90;
  }

  .lateral nav{flex:1;overflow:auto;padding:.2rem .45rem}
  .lateral nav a{
    position:relative;display:flex;align-items:center;gap:.55rem;
    padding:.4rem .55rem;margin-bottom:1px;border-radius:6px;min-height:32px;
    color:var(--texto);text-decoration:none;font-weight:500;font-size:var(--txt-apoio);
  }
  .lateral nav a:hover{background:var(--fundo)}
  .lateral nav a[aria-current="page"]{background:var(--marca-clara);color:var(--marca);font-weight:650}
  .lateral nav svg{width:16px;height:16px;flex:none;opacity:.75}
  .lateral nav a[aria-current="page"] svg{opacity:1}

  /* A seta avisa que este item abre uma lista em vez de ir a algum
     lugar. Sem ela, o clique que não navega parece um clique perdido.
     Especificidade acima de `.lateral nav svg`, que a deixaria do
     tamanho do ícone da esquerda. */
  .lateral nav a .seta{
    width:14px;height:14px;margin-left:auto;opacity:.45;
    transition:transform .15s ease;
  }
  .lateral nav a[aria-expanded="true"] .seta{transform:rotate(90deg)}

  /* Itens de dentro: recuados e presos por um fio à esquerda, para ler
     como parte do item de cima e não como abas soltas. */
  .lateral nav .dentro{
    margin:.1rem 0 .3rem 1.35rem;padding-left:.6rem;
    border-left:1px solid var(--linha);
  }
  .lateral nav .dentro a{
    min-height:26px;padding:.2rem .5rem;font-size:var(--txt-menor);font-weight:500;
    color:var(--texto-fraco);
  }
  .lateral nav .dentro a[aria-current="page"]{
    background:var(--marca-clara);color:var(--marca);font-weight:650;
  }

  .lateral .pe{padding:.6rem .8rem;border-top:1px solid var(--linha)}
  .lateral .pe .quem{font-weight:600;font-size:var(--txt-menor);
                     overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lateral .pe .email{font-size:var(--txt-legenda);color:var(--texto-fraco);
                      overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lateral .pe button{
    margin-top:.45rem;width:100%;min-height:30px;padding:.25rem;
    background:none;border:1px solid var(--linha-forte);border-radius:6px;
    font:inherit;font-size:var(--txt-menor);font-weight:600;color:var(--texto-fraco);cursor:pointer;
  }
  .lateral .pe button:hover{background:var(--perigo-fundo);border-color:var(--perigo);color:var(--perigo)}

  .envelope{max-width:72rem;padding:1.25rem 1.5rem 2.5rem}

  .grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:.6rem}
  .grade .cartao{margin-bottom:0}
}

@media (min-width:1400px){
  .envelope{max-width:84rem}
}

/* ---------------------------------------------------------------------
   Número da ordem.

   Discreto de propósito: quem procura um carro no pátio procura pela
   placa, não pelo número. Se o número tivesse o peso da placa, ele
   roubaria o olho de quem está com pressa. Ele existe para ser ditado
   ("me vê a ordem 12"), citado numa nota fiscal e nunca se repetir —
   não para ser lido de relance.

   Monoespaçada porque número lido em voz alta erra menos quando os
   dígitos têm a mesma largura.
   --------------------------------------------------------------------- */
.ordem{
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:var(--txt-legenda);font-weight:700;letter-spacing:.02em;
  color:var(--texto-fraco);white-space:nowrap;
}

/* ---------------------------------------------------------------------
   Folha da vistoria obrigatória. Classes próprias (`-vist`) porque cada
   tela já tem a sua `.folha`, e duas coisas diferentes com o mesmo nome
   funcionam até o dia em que param.
   --------------------------------------------------------------------- */
.folha-vist{position:fixed;inset:0;z-index:70;display:none}
.folha-vist.aberta{display:block}
.folha-vist .fundo-vist{position:absolute;inset:0;background:rgba(11,18,32,.5)}
.folha-vist .painel-vist{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(29rem,calc(100% - 2rem));max-height:90vh;overflow:auto;
  background:var(--cartao);border-radius:var(--raio);padding:1.1rem;
  box-shadow:0 18px 50px rgba(11,18,32,.28);
}
.folha-vist h2{font-size:var(--txt-corpo);margin-bottom:.3rem}
.folha-vist .sub-vist{font-size:var(--txt-apoio);color:var(--texto-fraco);margin-bottom:.75rem}
.folha-vist .opcao-vist{
  display:flex;gap:.65rem;align-items:flex-start;cursor:pointer;
  padding:.7rem .85rem;border:1px solid var(--linha-forte);border-radius:var(--raio);
}
.folha-vist .opcao-vist:has(input:checked){background:var(--ok-fundo);border-color:var(--ok-borda)}
.folha-vist .opcao-vist:has(input:checked) b{color:var(--ok)}
.folha-vist .opcao-vist input{width:20px;height:20px;flex:none;margin-top:.1rem;accent-color:var(--ok)}
.folha-vist .opcao-vist b{display:block;font-size:var(--txt-corpo)}
.folha-vist .opcao-vist small{display:block;font-size:var(--txt-menor);color:var(--texto-fraco);margin-top:.1rem}

.folha-vist .ou-vist{display:flex;align-items:center;gap:.6rem;margin:.75rem 0 .5rem}
.folha-vist .ou-vist::before,.folha-vist .ou-vist::after{
  content:'';flex:1;height:1px;background:var(--linha);
}
.folha-vist .ou-vist span{font-size:var(--txt-legenda);color:var(--texto-fraco)}

.folha-vist textarea{
  width:100%;padding:.55rem .65rem;font:inherit;font-size:var(--txt-corpo);resize:vertical;
  border:1px solid var(--linha-forte);border-radius:var(--raio);
  background:var(--cartao);color:var(--texto);
}
.folha-vist textarea:disabled{opacity:.45}
.folha-vist .erro-vist{
  margin-top:.6rem;font-size:var(--txt-apoio);font-weight:600;color:var(--perigo);
}
.folha-vist .btn{margin-top:.85rem}

.folha-vist .fotos-vist{margin-top:.75rem}
.folha-vist .add-foto{
  display:inline-flex;gap:.5rem;align-items:center;cursor:pointer;
  padding:.5rem .8rem;border:1px dashed var(--linha-forte);border-radius:var(--raio);
  font-size:var(--txt-apoio);font-weight:650;color:var(--acao);
}
.folha-vist .add-foto:hover{border-color:var(--acao);background:var(--marca-clara)}
.folha-vist .previa-vist{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
  gap:.4rem;margin-top:.5rem;
}
.folha-vist .foto-vist{position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden}
.folha-vist .foto-vist img{width:100%;height:100%;object-fit:cover;display:block}
.folha-vist .foto-vist button{
  position:absolute;top:2px;right:2px;width:22px;height:22px;min-height:0;padding:0;
  display:grid;place-items:center;border:none;border-radius:50%;cursor:pointer;
  background:rgba(11,18,32,.68);color:#fff;font-size:var(--txt-apoio);line-height:1;
}

/* =====================================================================
   Relatórios
   ===================================================================== */
.rel-caixa{
  background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);
  padding:1rem;margin-bottom:1.1rem;
}
.rel-explica{font-size:var(--txt-apoio);color:var(--texto-fraco);margin:-.35rem 0 .8rem}
.rel-linha{display:flex;flex-wrap:wrap;gap:.6rem}
.rel-linha .campo{flex:1;min-width:9rem;margin-bottom:.75rem}

.rel-atalhos{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.85rem}
.rel-atalhos button{
  width:auto;padding:.4rem .75rem;font:inherit;font-size:var(--txt-apoio);font-weight:650;
  min-height:var(--alvo-min);border-radius:999px;cursor:pointer;
  background:var(--cartao);color:var(--texto);border:1px solid var(--linha-forte);
}
.rel-atalhos button:hover{border-color:var(--acao);color:var(--acao)}
.rel-erro{margin-bottom:.7rem;font-size:var(--txt-apoio);font-weight:600;color:var(--perigo)}

.rel-resumo{
  background:var(--cartao);border:1px solid var(--linha);border-radius:var(--raio);
  padding:.7rem .9rem;margin-bottom:.75rem;font-size:var(--txt-apoio);color:var(--texto-fraco);
}
.rel-resumo b{color:var(--texto);font-weight:800}

/* A tabela rola dentro da própria caixa. Sem isto, sete colunas no
   celular empurram a página inteira para o lado e a barra de baixo
   sai da tela junto. */
.rel-rolagem{overflow-x:auto;background:var(--cartao);
  border:1px solid var(--linha);border-radius:var(--raio)}
.rel-tabela{width:100%;border-collapse:collapse;font-size:var(--txt-apoio)}
.rel-tabela th,.rel-tabela td{
  padding:.5rem .7rem;text-align:left;white-space:nowrap;
  border-bottom:1px solid var(--linha);
}
.rel-tabela th{
  font-size:var(--txt-legenda);font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--texto-fraco);background:var(--fundo);position:sticky;top:0;
}
.rel-tabela td.num,.rel-tabela th.num{text-align:right;font-variant-numeric:tabular-nums}
.rel-tabela tbody tr:last-child td{border-bottom:none}
.rel-tabela tfoot td{
  font-weight:800;border-top:2px solid var(--linha-forte);border-bottom:none;
  background:var(--fundo);
}
.rel-entrou{color:var(--ok);font-weight:650}
.rel-saiu{color:var(--perigo);font-weight:650}
.rel-neutro{color:var(--texto-fraco)}

.rel-saidas{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.85rem}
.rel-saidas .btn{width:auto;flex:1;min-width:12rem}

/* O cabeçalho da folha só existe no papel: na tela, o nome do negócio
   já está no menu e o período nos campos logo acima. */
.rel-papel{display:none}

/* ---------------------------------------------------------------------
   No papel.

   Sai só o relatório: sem menu, sem filtros, sem botões. Fundo branco e
   letra preta porque impressora não tem tema escuro, e cor de fundo
   costuma vir desligada por padrão — uma tabela que só se distingue
   pelo fundo sairia em branco.
   --------------------------------------------------------------------- */
@media print{
  .lateral,.topo,.menu,.rel-caixa,.rel-saidas,.aviso-topo{display:none !important}
  body{padding:0 !important;background:#fff !important;color:#000 !important}
  .envelope{max-width:none;padding:0 !important}

  .rel-papel{display:block;margin-bottom:.6rem}
  .rel-papel .rel-negocio{font-size:var(--txt-corpo);font-weight:800}
  .rel-papel .rel-titulo{font-size:var(--txt-corpo);font-weight:700;margin-top:.15rem}
  .rel-papel .rel-periodo{font-size:var(--txt-menor);color:#444}

  .rel-resumo{border:none;padding:0 0 .5rem;background:none;color:#000}
  .rel-rolagem{overflow:visible;border:none;border-radius:0}
  .rel-tabela{font-size:10pt}
  /* Cor preta explícita em tudo: as células herdavam o azul-escuro do
     tema, que na folha sai cinza chumbo e cansa de ler. */
  .rel-tabela th,.rel-tabela td,.rel-resumo,.rel-resumo b{color:#000}
  .rel-tabela th{background:none;border-bottom:1.5pt solid #000}
  .rel-tabela th,.rel-tabela td{border-bottom:.5pt solid #999;white-space:normal}
  .rel-tabela tfoot td{background:none;border-top:1.5pt solid #000}
  .rel-entrou,.rel-saiu,.rel-neutro{color:#000}
  /* Linha não parte no meio entre uma folha e outra. */
  .rel-tabela tr{page-break-inside:avoid}

  /* O cabeçalho SE repete em cada folha — sem ele, a página 2 é uma
     tabela sem nome de coluna. O rodapé NÃO: `tfoot` vale
     `table-footer-group` por padrão, que o repete em toda página, e um
     total no pé de cada folha parece o total daquela folha. Ele é do
     relatório inteiro, então aparece uma vez, no fim. */
  .rel-tabela thead{display:table-header-group}
  .rel-tabela tfoot{display:table-row-group}
}

.rel-dica{font-size:var(--txt-menor);color:var(--texto-fraco);margin-top:.25rem}

/* Na Movimentação os filtros e as sub-abas também saem do papel. */
@media print{
  .mov-filtro,.campo{display:none !important}
  .mov-dia{color:#000;border-bottom:.5pt solid #999;padding-bottom:.15rem}
  .mov{border:none;border-bottom:.5pt solid #ccc;border-radius:0;padding:.35rem 0;
       page-break-inside:avoid}
  .mov .delta.saiu,.mov .delta.entrou{color:#000}
  .mov-resumo{color:#000}
}

/* ---------------------------------------------------------------------
   Listas em grade, só no computador.

   Medido antes de mexer: uma linha de cliente tinha 916px e usava 190px
   de texto — 80% vazio. No celular a linha larga está certa, então a
   regra vive dentro do @media e some sozinha lá.

   `19rem` é a mesma medida da grade do Pátio, para as listas do app
   inteiro quebrarem nas mesmas colunas.
   --------------------------------------------------------------------- */
@media (min-width:900px){
  .lista-grade{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));
    gap:.6rem;align-items:start;
  }
  .lista-grade > *{margin-bottom:0}
}