:root {
  --fundo: #f5f7f8; --cartao: #fff; --texto: #1d2a30; --suave: #5b6b73; --linha: #dfe5e8;
  --primaria: #1f4e5f; --primaria-2: #2c6b80; --alerta: #b5541c; --ok: #2f7d4f; --marca: #d1495b;
  --raio: 14px;
}
@media (prefers-color-scheme: dark) {
  :root { --fundo: #11181b; --cartao: #1a2428; --texto: #e6edf0; --suave: #9aabb3; --linha: #2c3a40;
    --primaria: #5fa8c0; --primaria-2: #7cbcd1; --alerta: #f0a35e; --ok: #6cc28f; --marca: #ff6b7d; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fundo); color: var(--texto); }
.topo { position: sticky; top: 0; z-index: 2; background: var(--primaria); padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top)); }
.marca-app { color: #fff; text-decoration: none; font-weight: 700; font-size: 18px; }
@media (prefers-color-scheme: dark) { .topo { background: #16323c; } }
main { max-width: 640px; margin: 0 auto; padding: 16px 16px 96px; }
h1 { font-size: 24px; margin: 4px 0 12px; }
h2 { font-size: 19px; margin: 20px 0 8px; }
p { margin: 6px 0; }
.suave { color: var(--suave); font-size: 15px; }
.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; margin: 10px 0; }
a.cartao { display: block; color: inherit; text-decoration: none; }
a.cartao:active { background: var(--linha); }
.linha { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.grande { font-size: 40px; font-weight: 700; line-height: 1.1; }
.botao { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: 12px;
  border: 0; background: var(--primaria); color: #fff; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.botao.secundario { background: transparent; color: var(--primaria); border: 2px solid var(--primaria); }
.botao.perigo { background: transparent; color: var(--alerta); border: 2px solid var(--alerta); }
.botao:disabled { opacity: .5; }
.largo { width: 100%; }
.acoes { position: fixed; left: 0; right: 0; bottom: 0; background: var(--cartao); border-top: 1px solid var(--linha);
  padding: 10px 16px; padding-bottom: max(10px, env(safe-area-inset-bottom)); display: flex; gap: 10px; justify-content: center; }
.acoes .botao { flex: 1; max-width: 300px; }
label { display: block; font-weight: 600; margin: 12px 0 4px; }
input, select { width: 100%; min-height: 48px; font: inherit; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--linha);
  background: var(--cartao); color: var(--texto); }
input:focus, select:focus { outline: 3px solid var(--primaria-2); outline-offset: 1px; }
.leituras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.leituras input { text-align: center; font-size: 22px; }
.check { display: flex; gap: 10px; align-items: center; font-weight: 400; margin: 10px 0; }
.check input { width: 24px; min-height: 24px; }
.ajuda { font-weight: 400; color: var(--suave); font-size: 15px; margin-top: 2px; }
.aviso-alerta { color: var(--alerta); font-weight: 600; }
.aviso-ok { color: var(--ok); font-weight: 600; }
details { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 10px 16px; margin: 10px 0; }
summary { font-weight: 600; cursor: pointer; min-height: 32px; }
.ficha dt { font-weight: 700; margin-top: 8px; }
.ficha dd { margin: 2px 0 0; }
.etapa { color: var(--suave); font-size: 15px; }
.barra { height: 6px; background: var(--linha); border-radius: 3px; overflow: hidden; margin: 6px 0 12px; }
.barra > div { height: 100%; background: var(--primaria); }
.boneco { margin: 0 auto; max-width: 220px; text-align: center; }
.boneco svg { width: 100%; height: auto; }
.boneco figcaption { font-size: 13px; color: var(--suave); }
.corpo circle, .corpo path { fill: none; stroke: var(--suave); stroke-width: 3; }
.corpo line { stroke: var(--suave); stroke-width: 12; stroke-linecap: round; opacity: .55; }
.marca { fill: var(--marca); }
.marca-anel { fill: none; stroke: var(--marca); stroke-width: 2.5; animation: pulso 1.6s ease-out infinite; transform-origin: center; transform-box: fill-box; }
.marca-fita { stroke: var(--marca); stroke-width: 4; stroke-linecap: round; }
@keyframes pulso { 0% { opacity: 1; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.6); } }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--linha); vertical-align: top; }
td.num, th.num { text-align: right; white-space: nowrap; }
.selo { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 99px; background: var(--linha); color: var(--suave); }
.selo.fora { background: #f7e1d4; color: #8a3b10; }
@media (prefers-color-scheme: dark) { .selo.fora { background: #4a2d1c; color: #f0b98e; } }
#aviso { position: fixed; left: 16px; right: 16px; bottom: 84px; max-width: 600px; margin: 0 auto; background: var(--texto); color: var(--fundo);
  padding: 12px 16px; border-radius: 12px; z-index: 5; }
#aviso.erro { background: var(--alerta); color: #fff; }
.ponto { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0; }
.ponto .boneco { flex: 0 0 120px; margin: 0; }
.ponto .boneco figcaption { font-size: 11px; }
.ponto p { margin: 0; font-size: 16px; }

/* ---------- fase 2: boneco, coleta em tela única, mapa e gráficos ---------- */
:root { --serie-1: #2a78d6; --grade: #e1e0d9; --eixo: #898781; --pele: #e9eef0; --contorno: #8a9aa2; }
@media (prefers-color-scheme: dark) { :root { --serie-1: #3987e5; --grade: #2c2c2a; --pele: #23313a; --contorno: #6f8590; } }
.alternar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.alternar button { min-height: 38px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--linha); background: var(--cartao); color: var(--texto); font: inherit; font-size: 15px; cursor: pointer; }
.alternar button.ativo { background: var(--primaria); border-color: var(--primaria); color: #fff; }
.alternar button:disabled { opacity: .4; }
.alternar .sep { width: 8px; }
.bn { margin: 0; text-align: center; }
.bn svg { width: 100%; height: auto; display: block; touch-action: manipulation; }
.bn figcaption, .bn-nota { font-size: 12px; color: var(--suave); margin: 2px 0; }
.bn-corpo path, .bn-corpo ellipse { fill: var(--pele); stroke: var(--contorno); stroke-width: .6; }
.bn-detalhe circle { fill: var(--contorno); }
.bn-detalhe line, .bn-detalhe path { stroke: var(--contorno); stroke-width: .6; fill: none; }
.bn-ponto { fill: var(--cartao); stroke: var(--primaria); stroke-width: 1; }
.bn-ponto.pendente { fill: var(--cartao); stroke: var(--suave); stroke-dasharray: 1.5 1; }
.bn-ponto.parcial { fill: #f0a35e; stroke: var(--cartao); }
.bn-ponto.feito { fill: var(--ok); stroke: var(--cartao); }
.bn-ponto.sel { stroke: var(--marca); stroke-width: 1.6; stroke-dasharray: none; }
.bn-ponto[style] { stroke: var(--cartao); stroke-width: .8; }
.bn-pulso { fill: none; stroke: var(--marca); stroke-width: 1; animation: pulso 1.6s ease-out infinite; transform-origin: center; transform-box: fill-box; }
.bn-fita { stroke: var(--suave); stroke-width: 1.4; stroke-dasharray: 2 1.2; stroke-linecap: round; }
.bn-fita.feito { stroke: var(--ok); stroke-dasharray: none; }
.bn-fita.sel { stroke: var(--marca); stroke-width: 2.2; stroke-dasharray: none; }
.bn-alvo { fill: transparent; cursor: pointer; }
.bn-guia { stroke: var(--eixo); stroke-width: .35; }
.bn-valor { font-size: 10px; fill: var(--texto); font-weight: 700; font-variant-numeric: tabular-nums; }
.bn-rotulo { font-size: 6.6px; fill: var(--suave); }
.bn-delta { font-size: 7px; font-weight: 400; fill: var(--suave); }
.coleta-boneco .bn svg { max-height: 31vh; }
.coleta-boneco figcaption { display: none; }
.coleta-painel p { margin: 4px 0; font-size: 15px; }
.coleta-painel .leituras input { min-height: 44px; }
.fichas { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: none; }
.ficha-btn { flex: 0 0 auto; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--linha); background: var(--cartao); color: var(--texto); font: inherit; font-size: 14px; cursor: pointer; }
.ficha-btn.feito { border-color: var(--ok); }
.ficha-btn.feito::before { content: "✓ "; color: var(--ok); }
.ficha-btn.parcial { border-color: #f0a35e; }
.ficha-btn.sel { outline: 2px solid var(--marca); outline-offset: 1px; font-weight: 700; }
.coleta-painel h2 { margin: 6px 0 4px; }
.leituras.um { grid-template-columns: 1fr; max-width: 200px; }
.leitura { font-weight: 600; font-size: 14px; margin: 0; color: var(--suave); }
.leitura input { margin-top: 2px; }
.leitura.dispensada input { opacity: .45; }
input.invalido { border-color: var(--alerta); outline: 2px solid var(--alerta); }
@media (min-width: 760px) {
  main { max-width: 980px; }
  .coleta { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
  .coleta-boneco .bn svg { max-height: 70vh; }
  .fichas { flex-wrap: wrap; }
}
.legenda-mm { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; align-items: center; margin-top: 6px; }
.legenda-mm i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.mini { flex: 0 0 130px; }
.graf { position: relative; }
.graf svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.g-grade { stroke: var(--grade); stroke-width: 1; }
.g-eixo { font-size: 10px; fill: var(--eixo); font-variant-numeric: tabular-nums; }
.g-linha { fill: none; stroke: var(--serie-1); stroke-width: 2; stroke-linejoin: round; }
.g-ponto { fill: var(--serie-1); stroke: var(--cartao); stroke-width: 2; }
.g-mira { stroke: var(--eixo); stroke-width: 1; stroke-dasharray: 3 3; }
.g-dica { position: absolute; top: 28px; background: var(--texto); color: var(--fundo); font-size: 13px; padding: 4px 8px; border-radius: 8px; white-space: nowrap; pointer-events: none; }

/* ---------- fase 2b: acabamento visual (D-019) ---------- */
a { color: var(--primaria-2); }
.topo { display: flex; align-items: center; gap: 6px; }
.marca-app { display: inline-flex; align-items: center; gap: 8px; }
.marca-app img { border-radius: 7px; }
.voltar { color: #fff; text-decoration: none; font-size: 30px; line-height: 1; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; margin-left: -8px; border-radius: 10px; }
.voltar[hidden] { display: none; }
.voltar:active { background: rgba(255,255,255,.15); }
.cartao { box-shadow: 0 1px 2px rgba(0,0,0,.06); }
h2.no-cartao { margin: 0 0 4px; font-size: 17px; }
.linha.titulo h1 { margin-bottom: 0; }
.botao-icone { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--linha); background: var(--cartao); color: var(--texto); text-decoration: none; font-size: 18px; }
/* início */
a.pessoa-cartao, a.guia { display: flex; }
.pessoa-cartao { display: flex; align-items: center; gap: 12px; }
.avatar { flex: 0 0 44px; height: 44px; border-radius: 50%; background: var(--primaria); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 19px; }
.pc-meio { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pc-meio strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-meio .suave { font-size: 14px; }
.pc-fim { display: flex; flex-direction: column; align-items: flex-end; font-size: 14px; }
.pc-num { font-size: 20px; color: var(--texto); font-variant-numeric: tabular-nums; }
.minilinha { flex: 0 0 auto; }
.minilinha polyline { fill: none; stroke: var(--serie-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.minilinha circle { fill: var(--serie-1); stroke: var(--cartao); stroke-width: 1.5; }
.guia { display: flex; gap: 12px; align-items: center; }
.guia-icone { flex: 0 0 44px; height: 44px; border-radius: 50%; border: 2px solid var(--primaria-2); color: var(--primaria-2); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; }
/* destaque */
.heroi .grande { font-size: 52px; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.heroi .grande small { font-size: 26px; font-weight: 600; margin-left: 2px; }
.heroi-num { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 2px 0 10px; }
.heroi .var { font-size: 15px; color: var(--suave); background: var(--fundo); border-radius: 99px; padding: 2px 10px; }
.heroi .mais { display: block; margin-top: 12px; font-size: 15px; text-decoration: none; }
.faixa { margin: 6px 0 12px; }
.faixa-barra { position: relative; display: flex; gap: 2px; height: 12px; }
.faixa-barra span { border-radius: 2px; opacity: .45; }
.faixa-barra span:first-child { border-radius: 6px 2px 2px 6px; }
.faixa-barra span:last-of-type { border-radius: 2px 6px 6px 2px; }
.faixa-barra span.atual { opacity: 1; }
.faixa-marca { position: absolute; top: -5px; width: 4px; height: 22px; margin-left: -2px; background: var(--texto); border-radius: 2px; box-shadow: 0 0 0 2px var(--cartao); }
.faixa-texto { margin-top: 8px; font-size: 15px; }
.faixa-texto .suave { font-size: 13px; }
.compo { margin-top: 4px; }
.compo-barra { display: flex; gap: 2px; height: 12px; margin-bottom: 4px; }
.compo-barra span:first-child { border-radius: 6px 2px 2px 6px; }
.compo-barra span:last-child { border-radius: 2px 6px 6px 2px; }
.magra { background: var(--serie-1); }
.gorda { background: #e8a33d; }
.compo .linha { font-size: 14px; flex-wrap: wrap; gap: 4px 12px; }
.compo .linha strong { color: var(--texto); }
.pt { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: 0; }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; }
.numeros .cartao { margin: 0; }
.num-cartao { display: flex; flex-direction: column; gap: 2px; padding: 12px; }
.num-cartao .suave { font-size: 13px; }
.num-cartao strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.num-cartao small { font-size: 14px; font-weight: 600; }
/* controles segmentados */
.alternar { gap: 10px; justify-content: space-between; }
.seg { display: inline-flex; background: var(--fundo); border: 1px solid var(--linha); border-radius: 12px; padding: 3px; gap: 2px; }
.seg button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--texto); font: inherit; font-size: 15px; cursor: pointer; white-space: nowrap; }
.seg button.ativo { background: var(--primaria); color: #fff; font-weight: 600; }
.seg button:disabled { opacity: .35; cursor: default; }
.seg.rolavel { display: flex; overflow-x: auto; scrollbar-width: none; margin: 6px 0 10px; }
.alternar button { border: 0; }
/* legenda contínua */
.legenda-mm { gap: 8px; flex-wrap: nowrap; }
.legenda-mm .escala { display: flex; gap: 2px; flex: 1; max-width: 220px; }
.legenda-mm .escala span { flex: 1; height: 10px; border-radius: 2px; position: relative; }
.legenda-mm .escala b { position: absolute; top: 11px; left: 0; font-size: 10px; font-weight: 400; color: var(--suave); }
.legenda-mm { padding-bottom: 12px; }
/* lista de medições */
.cartao.lista { padding: 0; overflow: hidden; }
.item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; color: inherit; text-decoration: none; border-top: 1px solid var(--linha); }
.item:first-child { border-top: 0; }
.item:active { background: var(--linha); }
.item > span:first-child { display: flex; flex-direction: column; }
.item .suave { font-size: 14px; }
.item-fim { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.andamento { border-color: #e8a33d; }
.vazio { text-align: center; padding: 24px 16px; }
@media (min-width: 760px) {
  .tela-larga { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
}
:root { --gorda: #e8a33d; }
@media (prefers-color-scheme: dark) { :root { --gorda: #c27c1c; } }
.gorda { background: var(--gorda); }
.andamento { border-color: var(--gorda); }
.faixa-reg { position: relative; height: 14px; font-size: 10px; color: var(--suave); font-variant-numeric: tabular-nums; }
.faixa-reg span { position: absolute; top: 1px; transform: translateX(-50%); }
.faixa-texto { margin-top: 2px; }
.minilinha { width: 56px; height: 24px; }
.pc-meio .suave { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg.rolavel { flex-wrap: wrap; overflow: visible; }
.g-resumo { margin: 0 0 4px; }
.g-resumo strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.g-resumo .suave { font-size: 14px; }
details.dados { padding: 8px 14px; margin: 6px 0; }
details.dados > summary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 28px; }
.coleta-boneco .bn svg { max-height: 29vh; }
.barra { margin: 4px 0 6px; }
@media (min-width: 760px) {
  .coleta-boneco .bn svg { max-height: 70vh; }
  .pessoa-largo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: start; }
}
/* celular: destaque antes do mapa; computador: mapa à esquerda, números à direita */
.pessoa-largo { display: flex; flex-direction: column; }
.pessoa-largo .col-mapa { order: 2; }
.pessoa-largo .col-info { order: 1; display: contents; }
.pessoa-largo .col-info > .heroi { order: 1; }
.pessoa-largo .col-info > :not(.heroi) { order: 3; }
#mapa .bn { max-width: 460px; margin: 0 auto; }
@media (min-width: 760px) {
  .pessoa-largo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; align-items: start; }
  .pessoa-largo .col-mapa { order: 0; position: sticky; top: 64px; }
  .pessoa-largo .col-info { display: block; order: 0; }
  .numeros { grid-template-columns: repeat(3, 1fr); }
}