/* Sistema visual do projeto (CLAUDE.md §8): grafite, papel, verde-petróleo,
   âmbar só em ação, raio 3px, sem sombra, número com fonte tabular.
   Fontes do sistema de propósito: o app precisa funcionar sem internet. */
:root {
  --ink: #101214;
  --ink-2: #20242a;
  --paper: #f2f1ee;
  --linha: #b9bcbf;
  --apagado: #5b6066;
  --verde: #134b42;
  --ambar: #e8932a;
  --ambar-escuro: #c8791a;
  --ruim: #8f2f24;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.45 var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-text-size-adjust: 100%;
}

/* ---------- topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 10px;
  background: var(--ink); color: var(--paper);
  padding: 12px 16px;
}
.topo__titulo { font-size: 17px; margin: 0; font-weight: 600; }
.topo__voltar {
  color: var(--paper); text-decoration: none;
  font-size: 22px; line-height: 1; padding: 2px 6px;
  border: 1px solid #3a3f45; border-radius: 3px;
}

.tela { padding: 16px; max-width: 760px; margin: 0 auto; }
.rodape {
  max-width: 760px; margin: 0 auto; padding: 8px 16px 32px;
  color: var(--apagado); font-size: 13px;
}
.rodape__versao { font-family: var(--mono); font-size: 12px; }

/* ---------- blocos ---------- */
.bloco {
  background: #fff; border: 1px solid var(--linha); border-radius: 3px;
  padding: 14px; margin-bottom: 14px;
}
.bloco > h2 {
  margin: 0 0 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--verde); font-family: var(--mono); font-weight: 500;
  border-bottom: 1px solid var(--linha); padding-bottom: 6px;
}
.bloco--vazio { color: var(--apagado); }

/* ---------- formulário ---------- */
.campo { display: block; margin-bottom: 12px; }
.campo > span {
  display: block; font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--apagado); margin-bottom: 3px;
}
input, textarea, select {
  width: 100%; font: 16px var(--sans); color: var(--ink);
  background: #fff; border: 1px solid var(--linha); border-radius: 3px;
  padding: 10px; min-height: 44px;
}
input[inputmode="decimal"], input[type="time"], input[type="date"] { font-family: var(--mono); }

/* Dica cinza visível — para data e hora, em que o navegador não mostra o placeholder.
   23/09: "uma pessoa leiga precisa de exemplos pra colocar as informações certas nos locais
   corretos". A dica é só dica: nunca é gravada (regra §7i). */
.campo__dica { display: block; font-family: var(--mono); font-size: 11px; color: var(--apagado); margin-top: 3px; }

/* UNIDADE COLADA NO CAMPO (regra §7j, 23/09). Número certo na unidade errada é o pior defeito
   possível num app de volume: o resultado sai errado e parece certo. A unidade fica dentro da caixa,
   à direita, e continua legível DEPOIS de a pessoa digitar — a dica cinza some, a unidade não.
   O padding à direita do campo reserva o espaço dela, para o número não passar por baixo. */
/* Bloco que abre e fecha com um toque. O que é de ANTES do dia fica dobrado depois de preenchido,
   para o que é do dia — os caminhões — caber na primeira tela do celular (23/09, prova do leigo). */
.bloco__dobra > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px; }
.bloco__dobra > summary::-webkit-details-marker { display: none; }
.bloco__dobra > summary h2, .bloco__dobra > summary h3 { margin: 0; }
/* (15, 24/09) a dobra dentro do quadro do caminhão: separada do que está à vista por uma linha */
.caminhao__mais { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--fundo, #eee); }
.bloco__dobra > summary::after {
  content: "abrir"; font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--apagado); margin-left: auto;
}
.bloco__dobra[open] > summary::after { content: "fechar"; }
.bloco__dobra > summary .dobra__resumo { font-family: var(--mono); font-size: 12px; color: var(--apagado); }
.bloco__dobra[open] > summary .dobra__resumo { display: none; }

/* o Apagar do caminhão, agora no fim do quadro (23/09) */
.caminhao__fim { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--fundo, #eee); }

.campo__medida { position: relative; display: block; }
.campo__medida > input { padding-right: 62px; }
.campo__unidade {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 13px; color: var(--apagado);
  pointer-events: none; max-width: 52px; overflow: hidden; white-space: nowrap;
}

/* O que o documento precisa e ainda não foi informado. A marca usa a MESMA palavra que o PDF vai
   imprimir, para a tela e o documento dizerem igual. É informação, não ordem: nada fica bloqueado. */
.campo__pendente { display: none; }
.campo--pendente > span .campo__pendente { display: inline; margin-left: 6px; color: var(--ambar-escuro); }
/* descendente, e não filho direto: o campo de medida fica dentro do .campo__medida */
.campo--pendente input, .campo--pendente select, .campo--pendente textarea { border-left: 3px solid var(--ambar); }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--ambar); outline-offset: 1px; }
textarea { min-height: 76px; resize: vertical; }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.tripla { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 10px; }
/* (3, 24/09) O volume, o fck e o slump têm uma linha de ajuda cada um. Em três colunas de 103 px
   num celular de 390, a ajuda caía ao LADO do campo e o campo ficava com 67 px para digitar. Aqui
   cada célula é o campo mais a ajuda dele, e no celular a célula ocupa a largura toda. A classe é
   própria de propósito: a .tripla continua servindo o quadro do caminhão, que não tem ajuda. */
.campos-pedido { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
@media (min-width: 560px) { .campos-pedido { grid-template-columns: 1fr 1fr 1fr; } }

/* ---------- botões ---------- */
.bt {
  display: inline-block; font: 600 16px var(--sans);
  border: 1px solid transparent; border-radius: 3px;
  padding: 12px 16px; min-height: 44px; cursor: pointer;
  text-decoration: none; text-align: center;
}
.bt--acao { background: var(--ambar); color: var(--ink); }
.bt--acao:active { background: var(--ambar-escuro); }
.bt--linha { background: #fff; color: var(--ink); border-color: var(--linha); }
.bt--larga { display: block; width: 100%; }
.bt--pequena { font-size: 14px; padding: 8px 10px; min-height: 38px; }
.bt--perigo { background: #fff; color: var(--ruim); border-color: var(--ruim); }

/* ---------- listas ---------- */
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li { border-top: 1px solid var(--linha); }
.lista > li:first-child { border-top: 0; }
.item {
  display: block; padding: 12px 0; color: var(--ink); text-decoration: none;
}
.item__titulo { font-weight: 600; }
.item__sub { color: var(--apagado); font-size: 13px; font-family: var(--mono); }

/* ---------- caminhão ---------- */
.caminhao { border-top: 1px solid var(--linha); padding: 12px 0; }
.caminhao:first-of-type { border-top: 0; }
.caminhao__cab {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px;
}
.caminhao__n { font-family: var(--mono); font-weight: 600; }
.marca {
  display: inline-block; font-family: var(--mono); font-size: 11px;
  border: 1px solid var(--ruim); color: var(--ruim); border-radius: 3px; padding: 1px 5px;
}
.marca--igual { border-color: var(--verde); color: var(--verde); }

/* ---------- resumo ---------- */
.resumo { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--ink); border-radius: 3px; }
.resumo > div { padding: 10px; border-left: 1px solid var(--linha); }
.resumo > div:first-child { border-left: 0; }
.resumo__r { font-family: var(--mono); font-size: 11px; color: var(--apagado); text-transform: uppercase; }
.resumo__v { font-family: var(--mono); font-size: 20px; font-weight: 600; }

/* ---------- fotos ---------- */
.fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.foto { border: 1px solid var(--linha); border-radius: 3px; padding: 6px; background: #fff; }
.foto img { display: block; width: 100%; height: auto; border-radius: 2px; }
.foto__carimbo { font-family: var(--mono); font-size: 11px; color: var(--apagado); margin: 4px 0 6px; }

/* ---------- avisos ---------- */
.aviso { border-left: 3px solid var(--verde); background: #fff; padding: 10px 12px; margin: 0 0 14px; font-size: 14px; }
.aviso--ruim { border-left-color: var(--ruim); }
.aviso--trabalhando { color: var(--apagado); }

@media (max-width: 380px) {
  .tripla { grid-template-columns: 1fr; }
  .fotos { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* marcas (caixas de sim/nao) e passos da conta na calculadora */
.campo--marca { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; }
.campo--marca input { width: 22px; min-height: 22px; flex: 0 0 auto; margin-top: 2px; }
.marcas { border-top: 1px solid var(--linha); padding-top: 10px; margin-top: 4px; }
.passos { margin: 6px 0 0; padding-left: 18px; color: var(--apagado); font-size: 13px; font-family: var(--mono); }

/* Memória de cálculo: é o que explica POR QUE pedir mais. Fica legível, não
   apagada como as notas de rodapé — o usuário precisa ler cada linha. */
.passos--memoria { color: var(--ink); font-size: 14px; line-height: 1.6; padding-left: 20px; }
.passos--memoria li { margin: 4px 0; font-variant-numeric: tabular-nums; }
.passos--memoria li::marker { color: var(--apagado); font-size: 12px; }

/* Título de grupo de campos (a laje separa "Capa" de "Vigas embutidas") */
.grupo { font-size: 12px; font-family: var(--mono); text-transform: uppercase;
  color: var(--apagado); margin: 12px 0 2px; letter-spacing: .04em; }

/* foto da nota dentro do bloco do caminhão, e o bloco do documento final (PDF) */
.caminhao__nota { margin-top: 10px; display: grid; gap: 8px; }
.caminhao__nota .fotos { grid-template-columns: 1fr; }
#pdfPronto { display: grid; gap: 8px; margin-top: 10px; }
#copiaPronta, #copiaProntaAqui { display: grid; gap: 8px; margin-top: 10px; }

/* O atributo hidden TEM de esconder, sempre.
   Achado em 24/09, montando o botão de restaurar: o navegador esconde com `[hidden]{display:none}`,
   mas essa regra é do próprio navegador e QUALQUER regra nossa de display ganha dela. Como
   `.bt--larga` diz `display:block`, todo botão largo marcado como hidden continuava aparecendo —
   inclusive o "Compartilhar" do PDF, nos navegadores que não têm a folha de compartilhar: um botão
   à vista que não fazia nada. Havia um remendo só para o #pdfPronto; agora vale para tudo. */
[hidden] { display: none !important; }

/* o terceiro número da calculadora: o que a pessoa leva para o pedido */
.resumo__pedir { background: #fff; }
.resumo__pedir .resumo__v { color: var(--verde); }

/* "Salvar e voltar" na calculadora: preso no rodapé, sempre à vista (pedido do Willian na obra, 22/09) */
.barra-fixa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--paper); border-top: 1px solid var(--linha);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
}
.barra-fixa .bt { max-width: 728px; margin: 0 auto; min-height: 50px; font-size: 17px; }
.barra-fixa__espaco { height: 86px; }

/* quem decide (D3 = ENSINAR, 22/09): discreto, mas sempre junto dos números */
.aviso--decisao { font-size: 14px; border-left-color: var(--apagado); color: var(--ink); }

/* os dois checklists da especificação (§6c usina, §7d nota): uma linha por item, alvo de toque grande */
.checks { list-style: none; margin: 8px 0 0; padding: 0; }
.checks > li { border-top: 1px solid var(--linha); }
.check { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; font-size: 15px; line-height: 1.4; cursor: pointer; }
.check input { width: 22px; height: 22px; min-height: 22px; flex: 0 0 auto; margin: 0; accent-color: var(--verde); }
.check__resposta { margin: 0 0 10px 32px; }
/* (v52) por que se pergunta — embaixo da pergunta, alinhado com o texto dela */
.check__explica { margin: -4px 0 8px 32px; line-height: 1.4; }
.check__conta { font-family: var(--mono); font-size: 12px; color: var(--apagado); margin: 6px 0 0;
  font-variant-numeric: tabular-nums; }
/* (rodada 9) "Já sei o volume": o − e o + (de 0,5 em 0,5 m³) numa linha só, embaixo do campo e da ajuda dele */
.passo05 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 4px; }
.passo05 .bt { min-height: 44px; }
.passo05 .item__sub { flex: 1 1 140px; }
#btCriarConcSei { margin-top: 10px; }
#btCriarConc { margin-top: 8px; }
/* (rodada 9) o "✓ Salvo" de cada pergunta da usina: à direita do rótulo, discreto e sem piscar. O lugar
   dele já existe, vazio, antes de gravar: nada na tela se mexe quando ele aparece. */
.check__salvo { float: right; text-transform: none; letter-spacing: 0; color: var(--verde); font-size: 12px; }
.check__salvo--ruim { color: var(--ruim); }
/* (rodada 9) "Pode fechar o app…" no topo do bloco, e a frase da marca, em tinta (é instrução, não rodapé) */
.check__marque { margin: 8px 0 0; color: var(--ink); }
.check__outros { margin: 14px 0 4px; }
.caminhao__conferir { margin-top: 12px; }

/* autorização de água na obra (§7h): pergunta fechada, campos só quando houve */
.caminhao__agua { margin-top: 14px; border-top: 1px solid var(--linha); padding-top: 8px; }
.pergunta { font-size: 15px; margin: 8px 0 4px; }
.escolhas { display: flex; gap: 18px; }
.escolhas .check { padding: 6px 0; }
.agua__campos { margin-top: 8px; }
.agua__campos[hidden] { display: none; }

/* o que foi pedido, embaixo de cada item do documento da usina */
.check__pedido { margin: -4px 0 8px 32px; }

/* pergunta ainda sem resposta: o mesmo aviso discreto que o app já usa, em cinza, sem cobrar nada */
.aviso--pendente { border-left-color: var(--apagado); color: var(--apagado); font-size: 14px; }

/* soma dos m³ combinados por caminhão: número seco, abaixo da lista */
.soma-caminhoes { font-family: var(--mono); font-size: 13px; color: var(--ink);
  font-variant-numeric: tabular-nums; margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--linha); }
.soma-caminhoes:empty { display: none; }

/* ---------- entrar e licença (v51, 28/09) ----------
   Letra grande e alvo de toque de 44 px: a pessoa digita o código com o e-mail aberto do lado,
   muitas vezes na obra. O link "Conta" fica no topo, à direita, longe do "voltar". */
.topo__conta {
  margin-left: auto; color: var(--paper); text-decoration: none;
  font-size: 15px; min-height: 44px; min-width: 44px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #3a3f45; border-radius: 3px;
}
.entrar__texto, .licenca__texto { font-size: 17px; line-height: 1.45; margin: 0 0 12px; }
.campo--grande > span { font-family: var(--sans); font-size: 17px; text-transform: none; letter-spacing: 0; color: var(--ink); margin-bottom: 6px; }
.campo--grande input { font-size: 20px; min-height: 52px; }
.entrar__codigo { font-family: var(--mono); font-size: 28px !important; letter-spacing: .35em; text-align: center; }
.entrar .bt, .licenca .bt { min-height: 48px; font-size: 17px; }
.entrar__outros, .licenca__botoes { display: grid; gap: 10px; margin-top: 14px; }
/* (rodada 9) o captcha: invisível para quase todos; quando a Cloudflare pede um toque, o quadradinho
   aparece aqui, entre o texto e o botão */
.entrar__captcha { margin: 0 0 12px; }
.entrar__captcha:empty { display: none; }
.entrar form .aviso { margin-top: 12px; font-size: 16px; }
.licenca .aviso { margin-top: 10px; font-size: 16px; }
#confirmaSair { display: grid; gap: 10px; margin-top: 10px; }