/* App do ACS. Alvo: celular de entrada, na rua, com sol na tela e uma mão só.
   Por isso: fonte grande, alvo de toque alto e contraste alto — não é escolha
   estética, é o que decide se o agente consegue registrar a visita no portão. */
:root {
  --verde: #00A335; --navy: #003566; --ambar: #B45309; --erro: #B91C1C;
  --texto: #111827; --cinza: #6B7280; --borda: #E5E7EB; --fundo: #F9FAFB;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* 16px é o piso: campo menor que isso faz o iPhone dar auto-zoom ao focar,
     e o formulário salta na mão de quem está de pé no portão. */
  font-size: 16px; color: var(--texto); background: var(--fundo);
}
header { background: var(--verde); color: #fff; padding: 12px 16px; }
header h1 { margin: 0; font-size: 18px; font-weight: 650; }
header p { margin: 2px 0 0; font-size: 13px; opacity: .9; }
#abas { display: flex; gap: 4px; padding: 8px 16px; background: #fff; border-bottom: 1px solid var(--borda); }
.aba {
  flex: 1; padding: 12px 8px; font-size: 15px; border: 0; border-radius: 8px;
  background: var(--fundo); color: var(--cinza); cursor: pointer;
}
.aba[aria-current="page"] { background: var(--verde); color: #fff; font-weight: 600; }
main { padding: 16px; max-width: 720px; margin: 0 auto; }
.cartao {
  background: #fff; border: 1px solid var(--borda); border-radius: 12px;
  padding: 16px; margin-bottom: 12px;
}
.cartao.alerta { border-color: var(--ambar); }
.cartao.erro { border-color: var(--erro); }
h2 { margin: 0 0 12px; font-size: 17px; }
.campo { display: block; margin-bottom: 12px; font-size: 14px; color: var(--cinza); }
.campo select, .campo input, .campo textarea {
  display: block; width: 100%; margin-top: 4px; padding: 12px;
  font-family: inherit; font-size: 16px; color: var(--texto);   /* textarea nasce monoespaçada */
  border: 1px solid var(--borda); border-radius: 8px; background: #fff;
}
.btn {
  display: block; width: 100%; margin-top: 8px; padding: 16px;
  font-size: 16px; font-weight: 600; color: #fff; background: var(--verde);
  border: 0; border-radius: 10px; cursor: pointer;
  /* 56px de alvo: dedo com luva, celular tremendo, sem acertar o botão errado. */
  min-height: 56px;
}
.btn.secundario { background: #fff; color: var(--navy); border: 1px solid var(--borda); }
.btn:disabled { opacity: .6; }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
.kpi {
  background: var(--fundo); border-radius: 8px; padding: 12px; font-size: 13px; color: var(--cinza);
}
.kpi b { display: block; font-size: 24px; color: var(--texto); }
.kpi.alerta b { color: var(--ambar); }
.kpi.erro b { color: var(--erro); }
.estado { font-size: 14px; color: var(--cinza); margin: 8px 0; }
.nota { font-size: 13px; color: var(--cinza); margin: 8px 0 0; }
.selo { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.selo.verde { background: #DCFCE7; color: #166534; }
.selo.ambar { background: #FEF3C7; color: #92400E; }
.selo.vermelho { background: #FEE2E2; color: #991B1B; }
.tbl { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 14px; }
.tbl th, .tbl td { padding: 8px; text-align: left; border-bottom: 1px solid var(--borda); }
.tbl th { color: var(--cinza); font-weight: 600; }
.acoes { display: grid; gap: 8px; margin-top: 8px; }
@media (prefers-color-scheme: dark) {
  :root { --texto: #F3F4F6; --cinza: #9CA3AF; --borda: #374151; --fundo: #111827; }
  body { background: var(--fundo); }
  .cartao, .campo select, .campo input, .campo textarea, #abas { background: #1F2937; }
  .kpi { background: #111827; }
  .btn.secundario { background: #1F2937; color: #93C5FD; }
}

/* O app de gestão usa o mesmo esqueleto, com a cor do painel: verde é do
   agente em campo, navy é da gestão — e a cor é a primeira coisa que diz a
   quem abriu o aplicativo qual dos dois está na mão. */
body.gestor header { background: var(--navy); }
body.gestor .aba[aria-current="page"] { background: var(--navy); }
body.gestor .btn { background: var(--navy); }
.linha {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 0; border-bottom: 1px solid var(--borda); font-size: 14px;
}
.linha:last-child { border-bottom: 0; }

/* Rodapé da casca (link da política de privacidade): alvo de toque de 44 px. */
footer { padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); text-align: center; }
footer a { display: inline-block; padding: 12px; color: var(--cinza); }