:root {
  --azul: #1F3A8A; --azul-claro: #e8edf8; --tinta: #1a1a1a; --cinza: #666; --linha: #d4d4d4;
  --fundo: #f5f5f3; --branco: #fff; --verde: #1a7f37; --verde-claro: #e6f4ea; --vermelho: #b42318;
  --ambar: #9a6700; --ambar-claro: #fff4d6;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 18px; color: var(--tinta); background: var(--fundo);
  -webkit-text-size-adjust: 100%;
}
button, input, select { font: inherit; }
[hidden] { display: none !important; }

.tela { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--fundo); }
.rola { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

/* topo */
.topo { background: var(--branco); border-bottom: 1px solid var(--linha); padding: calc(8px + env(safe-area-inset-top)) 12px 8px; }
.linha-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; }
.linha-topo strong { font-size: 20px; color: var(--azul); }
.pill { border: 1px solid var(--linha); background: var(--fundo); border-radius: 20px; padding: 6px 12px; font-size: 15px; white-space: nowrap; }
.pill.ok { color: var(--verde); border-color: #b7dfc3; background: var(--verde-claro); }
.pill.pend { color: var(--ambar); border-color: #f0d590; background: var(--ambar-claro); }
.pill.off { color: var(--cinza); }
.resumo { font-size: 16px; color: var(--cinza); margin: 2px 0 8px; }
.resumo b { color: var(--tinta); }
.aviso { background: var(--ambar-claro); color: #5c3d00; border: 1px solid #f0d590; border-radius: 8px; padding: 8px 10px; font-size: 15px; margin-bottom: 8px; }
.busca { width: 100%; font-size: 18px; padding: 10px 12px; border: 1px solid #bbb; border-radius: 8px; background: var(--branco); }
.filtros { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.filtros select { flex: 1; min-width: 0; font-size: 16px; padding: 8px; border: 1px solid #bbb; border-radius: 8px; background: var(--branco); }
.chips { display: flex; border: 1px solid #bbb; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.chips button { border: 0; background: var(--branco); padding: 8px 10px; font-size: 15px; }
.chips button + button { border-left: 1px solid #bbb; }
.chips button.ativo { background: var(--azul); color: #fff; }

/* lista */
.grupo { position: sticky; top: 0; z-index: 1; background: var(--azul-claro); color: var(--azul); font-weight: 700; font-size: 16px; padding: 8px 12px; border-bottom: 1px solid #c9d3ea; display: flex; justify-content: space-between; gap: 8px; }
.grupo span { font-weight: 400; color: #33447a; white-space: nowrap; }
.linha { display: flex; gap: 10px; align-items: center; padding: 12px; border-bottom: 1px solid var(--linha); background: var(--branco); cursor: pointer; }
.linha:active { background: #eef1f7; }
.linha .cod { font-weight: 700; font-size: 18px; min-width: 64px; font-variant-numeric: tabular-nums; }
.linha .meio { flex: 1; min-width: 0; }
.linha .descr { font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.linha .sub { font-size: 14px; color: var(--cinza); margin-top: 2px; }
.linha .fim { text-align: right; font-size: 14px; white-space: nowrap; }
.linha.feito { background: #fafdfb; }
.linha.feito .fim { color: var(--verde); font-weight: 600; }
.linha.recontar { background: var(--ambar-claro); }
.linha.recontar .fim { color: var(--ambar); font-weight: 700; }
.linha.fora { cursor: default; background: #f0f0f0; color: var(--cinza); }
.tag-ml { display: inline-block; font-size: 12px; font-weight: 700; color: #fff; background: #2d6cdf; border-radius: 4px; padding: 1px 5px; vertical-align: middle; }
.vazio { padding: 24px 16px; color: var(--cinza); text-align: center; }
.rodape-lista { padding: 16px 12px; display: flex; flex-direction: column; gap: 10px; }
.mini { font-size: 14px; color: var(--cinza); text-align: center; }

/* item */
.voltar { border: 0; background: none; color: var(--azul); font-size: 18px; padding: 8px 0; }
.local { font-size: 16px; color: var(--cinza); }
.corpo-item { padding: 12px 12px calc(40px + env(safe-area-inset-bottom)); }
.item-cab { background: var(--branco); border: 1px solid var(--linha); border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.item-cab .cod { font-size: 26px; font-weight: 800; }
.item-cab .descr { font-size: 18px; margin-top: 4px; overflow-wrap: anywhere; }
.item-cab .sub { font-size: 15px; color: var(--cinza); margin-top: 4px; }
.anterior { background: var(--verde-claro); border: 1px solid #b7dfc3; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; font-size: 16px; }
.anterior.recontar { background: var(--ambar-claro); border-color: #f0d590; }
.campo { margin-bottom: 12px; display: grid; grid-template-columns: 1fr 112px; align-items: center; column-gap: 12px; }
.campo.bloco { display: block; }
.campo label { display: block; font-weight: 700; font-size: 18px; line-height: 1.2; }
.campo.bloco label { margin-bottom: 4px; }
.campo small { grid-column: 1 / -1; display: block; color: var(--cinza); font-size: 14px; margin-top: 4px; }
.regra { font-size: 15px; color: #33447a; margin: 0 0 12px; }
.num { width: 100%; text-align: center; font-size: 28px; font-weight: 700; padding: 8px 6px; border: 2px solid #999; border-radius: 10px; background: var(--branco); font-variant-numeric: tabular-nums; }
.num:focus, .texto:focus, .busca:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px #c9d3ea; }
.num.falta { border-color: var(--vermelho); background: #fdf1f0; }
.num.grande { text-align: center; letter-spacing: 4px; }
.texto { width: 100%; font-size: 18px; padding: 10px 12px; border: 1px solid #999; border-radius: 10px; background: var(--branco); }
.opcional { margin: 4px 0 14px; }
.opcional summary { font-size: 16px; color: var(--azul); padding: 6px 0; }
.botoes { display: flex; gap: 10px; margin-top: 8px; }
.bt { flex: 1; font-size: 19px; font-weight: 700; padding: 14px; border-radius: 10px; border: 2px solid #999; background: var(--branco); color: var(--tinta); text-align: center; }
.bt.primario { background: var(--azul); border-color: var(--azul); color: #fff; }
.bt.foto { display: block; margin-top: 8px; font-size: 17px; }
.previa { display: block; max-width: 100%; max-height: 220px; margin-top: 8px; border-radius: 8px; }
.erro { color: var(--vermelho); font-size: 16px; min-height: 1em; margin: 6px 0; }

/* código */
.caixa-codigo { margin: auto; width: 100%; max-width: 360px; padding: 24px 16px; text-align: center; }
.caixa-codigo h1 { color: var(--azul); }
.caixa-codigo .bt { width: 100%; margin-top: 12px; }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: #222; color: #fff; padding: 12px 18px; border-radius: 10px; font-size: 17px; z-index: 10; max-width: calc(100% - 32px); }