:root{--verde:#2E7D32;--verde-esc:#1B5E20;--fundo:#f4f6f8;--papel:#fff;--texto:#23303a;
--suave:#64748b;--borda:#dfe5ea;--ok:#128a5b;--erro:#b3261e;--alerta:#b26a00}
@media (prefers-color-scheme:dark){:root{--fundo:#10161b;--papel:#18222a;--texto:#e6edf3;
--suave:#9fb0bf;--borda:#27333d;--ok:#3fbf8a;--erro:#ff7b72;--alerta:#e0a33e}}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
background:var(--fundo);color:var(--texto);line-height:1.5}
header{background:var(--verde);color:#fff;display:flex;align-items:center;
justify-content:space-between;gap:.75rem;padding:calc(env(safe-area-inset-top) + .8rem) 1rem .8rem}
header h1{font-size:1.05rem;margin:0;font-weight:600;letter-spacing:.02em}
.cabecalho-dir{display:flex;gap:.4rem}
.badge{font-size:.75rem;padding:.15rem .55rem;border-radius:999px;background:rgba(255,255,255,.18);white-space:nowrap}
.badge.off{background:var(--erro)}
.tela{max-width:40rem;margin:0 auto;padding:1rem 1rem 3rem}
section{background:var(--papel);border:1px solid var(--borda);border-radius:10px;
padding:1rem;margin-top:.85rem}
h2{font-size:.95rem;margin:0 0 .8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--suave)}
label{display:block;margin-bottom:.75rem;font-size:.85rem;color:var(--suave)}
input,select,textarea{width:100%;font:inherit;color:var(--texto);background:var(--fundo);
border:1px solid var(--borda);border-radius:8px;padding:.65rem;margin-top:.25rem;min-height:44px}
textarea{min-height:auto}
button{font:inherit;font-weight:500;color:var(--texto);background:var(--fundo);
border:1px solid var(--borda);border-radius:8px;padding:.65rem 1rem;min-height:44px;cursor:pointer}
button.principal{background:var(--verde);color:#fff;border-color:var(--verde);width:100%}
button.principal:hover{background:var(--verde-esc)}
button.perigo{color:#fff;background:var(--erro);border-color:var(--erro);width:100%;margin-top:1rem}
button:disabled{opacity:.5;cursor:not-allowed}
.abas{display:flex;gap:.4rem;margin-top:.85rem}
.abas button{flex:1}
.abas button.ativa{background:var(--verde);color:#fff;border-color:var(--verde)}
.leitura{text-align:center;padding:1rem 0}
.coord{font-size:1.35rem;font-weight:600;font-variant-numeric:tabular-nums}
.precisao{font-size:.85rem;color:var(--suave);margin-top:.25rem}
.precisao.boa{color:var(--ok)}.precisao.media{color:var(--alerta)}.precisao.ruim{color:var(--erro)}
/* Os dois botoes lado a lado, mesma largura. Em tela estreita quebram em duas
   linhas em vez de espremer o rotulo. */
.par-botoes{display:flex;gap:.6rem;flex-wrap:wrap}
.par-botoes button{flex:1 1 10rem;width:auto}

.lista{list-style:none;margin:.5rem 0 0;padding:0}
.lista li{padding:.6rem 0;border-bottom:1px solid var(--borda);
display:flex;align-items:flex-start;gap:.6rem}
.lista li:last-child{border-bottom:0}
/* ⚠️ O texto da lista NAO e selecionavel de proposito: no Chrome do Android,
   tocar numa palavra selecionavel dispara o "Toque para pesquisar", que abre uma
   barra de definicao de dicionario no rodape. Nao e coisa do app, mas aparece
   dentro dele. Os campos de formulario seguem selecionaveis. */
.lista li .corpo{flex:1;min-width:0;user-select:none;-webkit-user-select:none}
.lista li .corpo .titulo{overflow-wrap:anywhere}
.btn-editar{padding:.35rem .7rem;min-height:auto;font-size:.8rem;flex:none}

dialog{border:1px solid var(--borda);border-radius:12px;background:var(--papel);
color:var(--texto);padding:1.1rem;max-width:min(30rem,calc(100vw - 2rem));width:100%}
dialog::backdrop{background:rgba(0,0,0,.45)}
dialog h2{margin-top:0}
.dlg-acoes{margin-top:1rem}
.dlg-acoes button{flex:1 1 6rem;width:auto;margin-top:0}
button.neutro{background:var(--fundo)}
.tag{font-size:.7rem;padding:.1rem .45rem;border-radius:999px;margin-left:.4rem}
.tag.pendente{background:var(--alerta);color:#fff}
.tag.enviado{background:var(--ok);color:#fff}
.dica{color:var(--suave);font-size:.82rem}
/* Discreto de proposito: serve para conferir o que esta rodando, nao para
   competir com o conteudo. */
.versao{margin:1rem 0 0;text-align:center;font-size:.72rem;opacity:.65}
.linha-acoes{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.aviso{position:fixed;left:1rem;right:1rem;bottom:1rem;max-width:38rem;margin:0 auto;
padding:.75rem 1rem;border-radius:8px;background:var(--papel);border:1px solid var(--borda);
box-shadow:0 6px 24px rgba(0,0,0,.18);font-size:.9rem}
.aviso.ok{border-color:var(--ok);color:var(--ok)}
.aviso.erro{border-color:var(--erro);color:var(--erro)}