/* ===========================================================================
   app.css — Bellius Reforma.

   A decisão de design mais importante do sistema: ele é feito para o CELULAR
   primeiro (PLANO, seção 2). É usado em pé, no sol, com a mão suja, com uma
   mão só. Daí três regras que valem para tudo aqui:

     1. Alvo de toque nunca menor que 48px. Dedo de pedreiro não acerta 32px.
     2. Contraste alto. Tela de celular no sol da obra come contraste baixo.
     3. Fonte de 16px para cima nos campos. Abaixo disso o Safari do iPhone dá
        zoom sozinho ao focar o campo, e a tela "pula" na cara dele.

   Sem framework de propósito: o sistema é entregue como uma pasta que sobe no
   Docker. Ter etapa de build (npm, bundler) para uma tela de orçamento
   significaria que ninguém consegue mexer numa cor sem reconstruir a imagem.
   =========================================================================== */

/* --- Fontes da marca, servidas daqui ------------------------------------
   Não vêm de CDN: o app é usado no meio da obra, e fonte que depende de rede
   morre junto com o sinal. Variáveis e cortadas no alfabeto do português —
   as duas somam menos de 100 KB. */
@font-face {
  font-family: 'Outfit'; font-style: normal; font-weight: 300 800;
  font-display: swap; src: url('/app/fontes/outfit-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 300 700;
  font-display: swap; src: url('/app/fontes/inter-var.woff2') format('woff2');
}

/* --- A paleta da Bellius -------------------------------------------------
   Retirada do manual da marca (`C:\Projetos\Bellius\bellius-marca`).

   ⚠️ SÃO DOIS LARANJAS, E TROCAR UM PELO OUTRO QUEBRA A LEITURA NO SOL.
   Medido, não achado:

     branco sobre #FF6B00 .... 2,86  REPROVA
     branco sobre #C05000 .... 4,78  passa AA
     #FF6B00 sobre grafite ... 5,84  passa AA

   Por isso: **`--laranja` só em fundo escuro** (a barra de cima, o selo).
   Em fundo claro — botão, número, link — vai `--acao`, que é o mesmo matiz
   escurecido a 75%. É a regra 2 do topo deste arquivo levada a sério: tela de
   celular no sol da obra come contraste baixo. */
:root {
  --grafite: #1C1E23;         /* superfície escura da marca: topo, barra, selo */
  --laranja: #FF6B00;         /* o laranja da marca — SÓ sobre escuro */
  --acao: #C05000;            /* o mesmo laranja, legível sobre claro */
  --acao-escura: #A84200;
  --acao-clara: #FFF0E5;

  /* `--destaque` continua existindo porque 10 regras deste arquivo o usam.
     Agora ele aponta para o laranja de ação. */
  --destaque: var(--acao);
  --destaque-escuro: var(--acao-escura);
  --destaque-claro: var(--acao-clara);

  --tinta: #20242B;
  --suave: #5A5F6A;
  --linha: #E3E5EA;
  --fundo: #F4F5F7;
  --papel: #FFFFFF;
  --perigo: #DC2626;
  --perigo-claro: #FEE2E2;
  --aviso: #B45309;
  --aviso-claro: #FEF3C7;
  --sucesso: #15803D;
  --sucesso-claro: #DCFCE7;

  --titulo: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --texto: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --raio: 12px;
  --sombra: 0 1px 3px rgba(28, 30, 35, .08), 0 1px 2px rgba(28, 30, 35, .04);
  /* Área segura do iPhone (a barra de gestos come o rodapé fixo). */
  --rodape-seguro: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

/* ⚠️ Isto não é firula: sem esta linha, `elemento.hidden = true` NÃO esconde
   nada que tenha `display` vindo de uma classe nossa. O `[hidden]` do navegador
   é regra de agente de usuário e perde para qualquer `.botao { display: ... }`.
   O estrago já estava em três telas: "Apagar" aparecia em **Novo cliente** e em
   **Novo serviço**, e o botão verde "Abrir no WhatsApp" aparecia mesmo sem
   número, sem levar a lugar nenhum — justamente o que `whatsapp.py` diz para
   evitar, porque ele acha que mandou e fica esperando resposta. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--texto);
  font-feature-settings: "cv05" 1;   /* o "l" da Inter com cauda: 1 e l não se confundem num valor */
  background: var(--fundo);
  color: var(--tinta);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* --- Estrutura ---------------------------------------------------------- */
.topo {
  position: sticky; top: 0; z-index: 20;
  /* Grafite, não laranja: branco sobre #FF6B00 dá 2,86 de contraste, e a
     barra fica em toda tela. Sobre grafite dá 16,68. */
  background: var(--grafite); color: #fff;
  padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top, 0px));
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.topo h1 {
  font-family: var(--titulo); font-size: 19px; font-weight: 600;
  letter-spacing: -.015em; margin: 0; flex: 1;
}
.topo a, .topo button {
  color: #fff; background: transparent; border: 0;
  font-size: 15px; padding: 8px; cursor: pointer;
  text-decoration: none; border-radius: 6px; min-height: 40px;
}
.topo a:active, .topo button:active { background: rgba(255, 255, 255, .18); }

.conteudo {
  max-width: 720px; margin: 0 auto; padding: 16px;
  /* Espaço para a barra de ação fixa não cobrir o último item da lista. */
  padding-bottom: calc(96px + var(--rodape-seguro));
}

/* --- Cartões ------------------------------------------------------------ */
.cartao {
  background: var(--papel); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 16px; margin-bottom: 12px;
}
.cartao-toque {
  display: block; text-decoration: none; color: inherit;
  cursor: pointer; border: 0; width: 100%; text-align: left;
  font: inherit;
}
.cartao-toque:active { background: #f9fafb; }

.linha-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.titulo-item { font-family: var(--titulo); font-weight: 600; font-size: 16.5px; letter-spacing: -.01em; line-height: 1.3; }
.sub { color: var(--suave); font-size: 14px; margin-top: 2px; }
.valor-item {
  font-family: var(--titulo); font-weight: 700; font-size: 18px;
  letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* --- Etiquetas de estado ------------------------------------------------ */
.etiqueta {
  display: inline-block; font-size: 12px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .03em;
}
.etiqueta.rascunho { background: var(--linha); color: #4b5563; }
.etiqueta.enviado { background: var(--aviso-claro); color: var(--aviso); }
.etiqueta.aprovado { background: var(--sucesso-claro); color: var(--sucesso); }
.etiqueta.recusado { background: var(--perigo-claro); color: var(--perigo); }
.etiqueta.expirado { background: var(--linha); color: var(--suave); }

/* --- Formulário --------------------------------------------------------- */
label { display: block; font-size: 13px; font-weight: 600; color: var(--suave); margin-bottom: 5px; }

input, select, textarea {
  width: 100%; padding: 12px 13px;
  border: 1px solid #d1d5db; border-radius: 8px;
  font-size: 16px;                 /* < 16px faz o iPhone dar zoom ao focar */
  font-family: inherit; background: var(--papel); color: var(--tinta);
  min-height: 48px;
}
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--destaque); outline-offset: -1px; border-color: var(--destaque);
}
input[inputmode="decimal"], input[type="number"] { font-variant-numeric: tabular-nums; }

/* O controle de arrastar (andamento da obra) nasce AZUL — azul de navegador,
   que não é cor nenhuma desta paleta e destoa no meio do laranja e do grafite.
   `accent-color` é a única propriedade que o pinta sem reconstruir o controle
   com `-webkit-slider-thumb`, que quebraria o alvo de toque no celular. */
input[type="range"] { accent-color: var(--acao); }

.campo { margin-bottom: 14px; }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* --- Botões ------------------------------------------------------------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 13px 18px;
  border: 0; border-radius: 9px;
  font-size: 16px; font-weight: 600; font-family: inherit;
  cursor: pointer; text-decoration: none; width: 100%;
  background: var(--destaque); color: #fff;
  transition: background .12s;
}
.botao:active { background: var(--destaque-escuro); }
.botao:disabled { opacity: .5; cursor: not-allowed; }
.botao.secundario { background: var(--papel); color: var(--tinta); border: 1px solid #d1d5db; }
.botao.secundario:active { background: var(--fundo); }
.botao.perigo { background: var(--papel); color: var(--perigo); border: 1px solid #fca5a5; }
.botao.zap { background: #25d366; color: #05391b; }
.botao.zap:active { background: #1eb958; }
.botao.pequeno { min-height: 42px; padding: 9px 14px; font-size: 14px; width: auto; }

.acoes { display: grid; gap: 10px; }
.acoes.par { grid-template-columns: 1fr 1fr; }

/* Barra fixa no pé: as ações principais ficam onde o polegar alcança sem
   trocar a mão de posição. */
.barra-acao {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--papel); border-top: 1px solid var(--linha);
  padding: 12px 16px; padding-bottom: calc(12px + var(--rodape-seguro));
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
}
.barra-acao .interno { max-width: 720px; margin: 0 auto; display: grid; gap: 10px; }

/* --- Itens do orçamento ------------------------------------------------- */
.item {
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 12px; margin-bottom: 10px; background: var(--papel);
}
.item-cabeca { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.item-cabeca select { flex: 1; min-height: 44px; }
.item-remover {
  background: transparent; border: 0; color: var(--perigo);
  font-size: 22px; line-height: 1; cursor: pointer;
  width: 44px; height: 44px; border-radius: 8px; flex-shrink: 0;
}
.item-remover:active { background: var(--perigo-claro); }
.item-tripla { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 8px; align-items: end; }
.item-total {
  text-align: right; font-weight: 700; padding: 12px 0 0;
  font-variant-numeric: tabular-nums; align-self: center;
}

/* --- Totais ------------------------------------------------------------- */
.totais { background: var(--papel); border-radius: var(--raio); padding: 16px; box-shadow: var(--sombra); }
.totais .linha { display: flex; justify-content: space-between; padding: 5px 0; }
.totais .grande {
  border-top: 2px solid var(--destaque); margin-top: 8px; padding-top: 12px;
  font-size: 21px; font-weight: 700;
}

/* --- Avisos ------------------------------------------------------------- */
.aviso { padding: 12px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 15px; }
.aviso.erro { background: var(--perigo-claro); color: var(--perigo); }
.aviso.ok { background: var(--sucesso-claro); color: var(--sucesso); }
.aviso.neutro { background: var(--aviso-claro); color: var(--aviso); }
.aviso:empty { display: none; }

.vazio { text-align: center; color: var(--suave); padding: 48px 20px; }
/* ⚠️ `.ilustra`, não `.icone`: `.icone` agora é a classe do SVG (icones.js),
   e as duas no mesmo arquivo faziam o desenho grande do estado vazio herdar
   alinhamento de ícone de linha. */
.vazio .ilustra { color: var(--linha); margin-bottom: 12px; line-height: 0; }
.vazio .ilustra svg { width: 52px; height: 52px; stroke-width: 1.5; color: var(--linha); }

/* --- Abas de filtro ----------------------------------------------------- */
.abas {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.abas::-webkit-scrollbar { display: none; }
.aba {
  flex-shrink: 0; padding: 9px 15px; border-radius: 999px;
  border: 1px solid #d1d5db; background: var(--papel);
  font-size: 14px; font-weight: 600; color: var(--suave);
  cursor: pointer; min-height: 42px; font-family: inherit;
}
.aba[aria-selected="true"] { background: var(--destaque); color: #fff; border-color: var(--destaque); }

/* --- Janela modal ------------------------------------------------------- */
.fundo-modal {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0, 0, 0, .45);
  display: flex; align-items: flex-end; justify-content: center;
}
.fundo-modal[hidden] { display: none; }
.modal {
  background: var(--papel); width: 100%; max-width: 560px;
  border-radius: 16px 16px 0 0; padding: 20px;
  padding-bottom: calc(20px + var(--rodape-seguro));
  max-height: 88vh; overflow-y: auto;
}
.modal h2 { margin: 0 0 14px; font-size: 19px; }
@media (min-width: 640px) {
  .fundo-modal { align-items: center; }
  .modal { border-radius: var(--raio); }
}

/* --- Login -------------------------------------------------------------- */
.tela-login {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--grafite);
}
.caixa-login {
  background: var(--papel); border-radius: 16px; overflow: hidden;
  width: 100%; max-width: 380px; box-shadow: 0 12px 44px rgba(0, 0, 0, .34);
}

/* Faixa escura no topo da caixa, com o nome da empresa.
   ⚠️ O nome vem de `/auth/marca`, NUNCA escrito no código: o mesmo sistema é
   vendido a vários pedreiros e cada um vê o próprio. Na instância de
   demonstração, quem está configurado é a Bellius — e é por isso que ela
   aparece lá, não por estar chumbada aqui. */
.marca-login {
  background: var(--grafite); color: #fff;
  padding: 26px 24px 22px; text-align: center;
}
.marca-login h1 {
  font-family: var(--titulo); font-size: 25px; font-weight: 700;
  letter-spacing: -.02em; margin: 0; line-height: 1.15;
}
.marca-login .sub { color: #A7ADB8; margin: 6px 0 0; font-size: 14px; }
.marca-login .selo {
  width: 44px; height: 44px; margin: 0 auto 12px;
  border-radius: 12px; background: var(--laranja);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--titulo); font-weight: 700; font-size: 22px; color: #fff;
}

.corpo-login { padding: 24px; }

.carregando { text-align: center; color: var(--suave); padding: 36px; }

/* --- Barra de navegação ------------------------------------ */
.barra-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; flex-direction: column;
  background: transparent;
}
.nav-soltos {
  display: flex; background: var(--papel);
  border-top: 1px solid var(--linha);
  padding-bottom: var(--rodape-seguro);
  box-shadow: 0 -1px 8px rgba(0, 0, 0, .06);
  z-index: 55; /* Fica por cima do modal para não ser coberto */
  position: relative;
}
.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px 6px; text-decoration: none;
  color: var(--suave); font-size: 11px; font-weight: 600;
  min-height: 54px; justify-content: center;
  border: 0; background: transparent; font-family: inherit; cursor: pointer;
}
.nav-item.ativo { color: var(--destaque); }
.nav-icone { display: inline-flex; line-height: 1; }

/* --- Ícones (ver frontend/js/icones.js) ---------------------------------
   `currentColor` de propósito: o mesmo arquivo serve o topo grafite e o
   cartão branco. `flex-shrink: 0` porque dentro de um flex com texto longo
   o SVG seria o primeiro a ser espremido, e ícone amassado some. */
.icone {
  display: inline-block; vertical-align: -.18em;
  flex-shrink: 0; stroke: currentColor;
}
.icone-laranja { color: var(--acao); }
.icone-suave { color: var(--suave); }

.fundo-modal-nav { z-index: 40; }
.modal-nav {
  position: absolute; bottom: calc(54px + var(--rodape-seguro)); 
  left: 0; right: 0; margin: 0 auto;
  z-index: 50; padding: 20px;
}

/* Grupos */
.nav-grupo { margin-bottom: 24px; }
.nav-grupo:last-child { margin-bottom: 0; }
.nav-grupo-titulo {
  font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; color: var(--suave); margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.nav-grupo-titulo .nav-icone { font-size: 16px; }
.nav-grupo-itens { display: flex; flex-direction: column; gap: 2px; }
.nav-item-grupo {
  padding: 10px 12px; border-radius: 8px; text-decoration: none;
  color: var(--tinta); font-weight: 600; font-size: 15px;
}
.nav-item-grupo:active { background: var(--fundo); }
.nav-item-grupo.ativo { background: var(--destaque-claro); color: var(--destaque-escuro); }
/* Tela que ainda não existe: aparece, não clica, e diz por quê. */
.nav-item-grupo.pendente {
  color: var(--suave); cursor: default;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.nav-item-grupo.pendente em {
  flex: none;                 /* senão o selo quebra para a linha de baixo */
  font-style: normal; font-size: 11px; font-weight: 600;
  padding: 1px 6px; border-radius: 999px; white-space: nowrap;
  background: var(--fundo); color: var(--suave);
}

/* --- A receber ---------------------------------------------------------- */
.receber-grupo-topo {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; margin-bottom: 8px;
}
.receber-grupo-total {
  color: var(--aviso); font-weight: 700; font-size: 18px;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.recebivel {
  margin-top: 10px; padding: 12px;
  background: var(--fundo); border: 1px solid var(--linha);
  border-radius: 8px;
}
.recebivel .etiqueta {
  background: var(--aviso-claro); color: var(--aviso);
  margin-bottom: 6px;
}
.recebivel-rodape {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 10px;
}
.recebivel-valor {
  color: var(--aviso); font-size: 17px; font-weight: 700;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* --- Monitor (Desktop) --- */
/* Com a barra de navegação embaixo, o conteúdo precisa de folga no pé.
   ⚠️ ESTAS TRÊS LINHAS FICAM ANTES DO @media, e a ordem é o que faz funcionar:
   media query NÃO soma especificidade. Declaradas depois, elas venciam as do
   monitor e a barra de ação ficava boiando 54px acima do rodapé. */
body.com-nav .conteudo { padding-bottom: calc(78px + var(--rodape-seguro)); }
body.com-nav .barra-acao { bottom: calc(54px + var(--rodape-seguro)); padding-bottom: 12px; }
body.com-nav.com-acao .conteudo { padding-bottom: calc(150px + var(--rodape-seguro)); }

/* --- Monitor: o menu vira coluna e o conteúdo ocupa a tela --------------- */
@media (min-width: 900px) {
  /* `margin-left`, e não `padding-left`: o conteúdo tem `max-width` e margem
     automática. Só empurrar por dentro o deixava estreito E fora do eixo — a
     tela ficava com um vão vazio de cada lado da coluna de 720px. */
  body.com-nav .conteudo,
  body.com-nav.com-acao .conteudo {
    margin-left: 250px; margin-right: auto;
    max-width: 1180px; padding: 24px 32px calc(24px + var(--rodape-seguro));
  }
  body.com-nav .topo { left: 250px; }
  body.com-nav .barra-acao { left: 250px; bottom: 0; }
  body.com-nav .barra-acao .interno { max-width: 1180px; margin: 0 auto; }

  .barra-nav {
    top: 0; bottom: 0; right: auto; width: 250px;
    background: var(--papel); border-right: 1px solid var(--linha);
    padding: 24px 16px; box-shadow: none; overflow-y: auto;
  }
  .nav-soltos {
    flex-direction: column; border-top: none; padding-bottom: 0;
    box-shadow: none; background: transparent; z-index: auto;
    margin-bottom: 24px;
  }
  .nav-item {
    flex-direction: row; justify-content: flex-start; gap: 12px;
    padding: 10px 12px; min-height: auto; font-size: 15px; border-radius: 8px;
  }
  .nav-item:hover, .nav-item-grupo:hover { background: var(--fundo); }
  .nav-btn-mais { display: none; }
  
  .modal-nav {
    display: block !important; position: static; background: transparent;
    padding: 0; border: none; box-shadow: none; border-radius: 0;
    max-width: none; max-height: none; overflow: visible;
  }
  .fundo-modal-nav { display: none !important; }

  .receber-lista {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px; align-items: start;
  }
  .receber-lista .cartao { margin-bottom: 0; }
}

/* --- Painel: os números que importam ------------------------------------ */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.tile {
  background: var(--papel); border-radius: var(--raio);
  padding: 14px; box-shadow: var(--sombra);
}
.tile .rotulo-tile {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--suave); font-weight: 600;
}
.tile .numero {
  font-size: 21px; font-weight: 700; margin-top: 4px;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.tile.entrada .numero { color: var(--sucesso); }
.tile.saida .numero { color: var(--perigo); }
.tile.destaque { grid-column: 1 / -1; }
.tile.destaque .numero { font-size: 27px; }

/* --- Ficha do cliente ---------------------------------------------------- */
.ficha-secao {
  font-family: var(--titulo); font-size: 16px; font-weight: 600;
  margin: 22px 0 10px; display: flex; align-items: baseline; gap: 8px;
}
.ficha-secao .sub { margin: 0; font-weight: 500; }

/* Os três números repetidos em cada obra. Existem para ele conferir a soma do
   topo linha por linha — por isso ficam na mesma ordem e com o mesmo rótulo. */
.ficha-numeros {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--linha);
}
.ficha-numeros .rotulo-tile {
  display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--suave); font-weight: 600;
}
.ficha-numeros strong {
  font-family: var(--titulo); font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Obra cancelada: os números existem como histórico e não entram na soma do
   topo. O tracejado diz isso de longe; a frase embaixo diz por escrito. */
.ficha-numeros.fora { border-top-style: dashed; }
.ficha-numeros.fora strong { font-weight: 600; }

/* --- Barra de andamento -------------------------------------------------- */
.progresso {
  height: 8px; background: var(--linha); border-radius: 999px;
  overflow: hidden; margin-top: 8px;
}
.progresso > div { height: 100%; background: var(--destaque); border-radius: 999px; }

/* --- Botão grande de lançar gasto (o de 3 toques) ----------------------- */
.botao-gigante {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; width: 100%; min-height: 92px;
  border: 0; border-radius: 14px; cursor: pointer;
  background: var(--destaque); color: #fff;
  font-size: 18px; font-weight: 700; font-family: inherit;
  /* Sombra na cor do próprio botão. Ficou o verde-azulado da paleta antiga
     por um tempo depois da T-010, brigando com o laranja em cima dele. */
  box-shadow: 0 4px 14px rgba(192, 80, 0, .3);
  /* Serve a <button> e a <a>: no painel ele é link, na tela de gastos é
     botão. Sem isto o link sai sublinhado e parece texto, não botão. */
  text-decoration: none;
}
.botao-gigante:active { background: var(--destaque-escuro); }
.botao-gigante .ico { font-size: 27px; }

/* Grade de categorias: alvos grandes, uma escolha por toque. */
.grade-cat { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cat {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; min-height: 84px; padding: 10px;
  border: 2px solid var(--linha); border-radius: 12px; background: var(--papel);
  font-size: 14px; font-weight: 600; font-family: inherit;
  color: var(--tinta); cursor: pointer; text-align: center;
}
.cat .ico { font-size: 25px; line-height: 1; }
.cat[aria-pressed="true"] {
  border-color: var(--destaque); background: var(--destaque-claro); color: var(--destaque-escuro);
}

/* Campo de valor: é o primeiro toque, tem de ser o maior elemento da tela. */
.campo-valor {
  font-size: 34px !important; font-weight: 700; text-align: center;
  min-height: 68px !important; font-variant-numeric: tabular-nums;
}

.miniatura {
  width: 100%; max-height: 200px; object-fit: contain;
  border-radius: 8px; border: 1px solid var(--linha); background: var(--fundo);
}

/* Some da tela mas continua sendo lido pelo leitor de tela. */
.so-leitor {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}