/* Casca dos apps de campo do iSUS (ACS, ACE, Assistente Social) e do app de
   gestão. 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.

   Identidade visual do iSUS (18/09/2026): navy #003566 é a MARCA (cabeçalho,
   títulos, números); verde #00A335 é a AÇÃO (botão principal, aba ativa,
   estado bom). A logo entra no cabeçalho pela tag <img class="marca">, e o
   cabeçalho funciona igual sem ela (páginas que ainda não a colocaram). */
:root {
  --verde: #00A335;        /* acento da marca: faixa do cabeçalho, foco, selo */
  --verde-acao: #0E7A46;   /* fundo de botão e aba ativa: branco sobre ele dá 5,4:1 (AA); o #00A335 dá 3,3:1 e reprova */
  --verde-escuro: #0A5C35; --verde-claro: #E6F7EC;
  --navy: #003566; --navy-escuro: #002548; --navy-claro: #E8F0F8;
  --ambar: #B45309; --erro: #B91C1C;
  --texto: #0F2540; --cinza: #5B7083; --borda: #D9E2EC; --fundo: #F2F6FA;
  --cartao: #FFFFFF; --sombra: 0 1px 2px rgba(0, 53, 102, .06), 0 2px 8px rgba(0, 53, 102, .06);
  --raio: 14px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 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; line-height: 1.4; color: var(--texto); background: var(--fundo);
}

/* ── Cabeçalho: navy da marca, logo à esquerda, nome do app ao lado ─────── */
header {
  display: flex; align-items: center; gap: 14px;
  background: var(--navy); color: #fff;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  border-bottom: 4px solid var(--verde);
}
header .marca { display: block; height: 44px; width: auto; flex: none; }
header > div { min-width: 0; }
header h1 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
header p { margin: 3px 0 0; font-size: 13px; opacity: .85; line-height: 1.3; }
/* Sem logo (páginas antigas), o "iSUS ·" do título faz o papel da marca. */

/* ── Abas ──────────────────────────────────────────────────────────────── */
#abas {
  display: flex; gap: 6px; padding: 10px 16px; background: var(--cartao);
  border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 2;
}
#abas:empty { display: none; }
.aba {
  flex: 1; padding: 12px 8px; font-size: 15px; font-weight: 600; border: 0; border-radius: 999px;
  background: var(--fundo); color: var(--navy); cursor: pointer; min-height: 44px;
  font-family: inherit;
}
.aba[aria-current="page"] { background: var(--verde-acao); color: #fff; }

main { padding: 16px; max-width: 720px; margin: 0 auto; }

/* ── Cartões ───────────────────────────────────────────────────────────── */
.cartao {
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 18px 16px; margin-bottom: 12px; box-shadow: var(--sombra);
}
.cartao.alerta { border-color: var(--ambar); border-left-width: 5px; }
.cartao.erro { border-color: var(--erro); border-left-width: 5px; }
h2 { margin: 0 0 12px; font-size: 18px; font-weight: 700; color: var(--navy); letter-spacing: -.01em; }

/* ── Campos ────────────────────────────────────────────────────────────── */
.campo { display: block; margin-bottom: 14px; font-size: 14px; font-weight: 600; color: var(--cinza); }
.campo select, .campo input, .campo textarea {
  display: block; width: 100%; margin-top: 6px; padding: 13px 12px;
  font-family: inherit; font-size: 16px; font-weight: 400; color: var(--texto);   /* textarea nasce monoespaçada */
  border: 1.5px solid var(--borda); border-radius: 10px; background: var(--cartao);
  min-height: 48px;
}
.campo select:focus, .campo input:focus, .campo textarea:focus {
  outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(0, 163, 53, .2);
}
.campo select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23003566' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; }

/* ── Botões ────────────────────────────────────────────────────────────── */
.btn {
  display: block; width: 100%; margin-top: 10px; padding: 16px;
  font-family: inherit; font-size: 16px; font-weight: 700; color: #fff; background: var(--verde-acao);
  border: 0; border-radius: 12px; cursor: pointer;
  /* 56px de alvo: dedo com luva, celular tremendo, sem acertar o botão errado. */
  min-height: 56px;
}
.btn:active { background: var(--verde-escuro); }
.btn.secundario { background: var(--cartao); color: var(--navy); border: 1.5px solid var(--navy); }
.btn.secundario:active { background: var(--navy-claro); }
.btn:disabled { opacity: .55; cursor: default; }
.btn:focus-visible, .aba:focus-visible { outline: 3px solid rgba(0, 53, 102, .35); outline-offset: 2px; }

/* ── Indicadores ───────────────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
.kpi {
  background: var(--navy-claro); border-radius: 12px; padding: 12px 14px; font-size: 13px;
  font-weight: 600; color: var(--cinza);
}
.kpi b { display: block; font-size: 26px; font-weight: 800; color: var(--navy); letter-spacing: -.02em; line-height: 1.2; }
.kpi.alerta { background: #FFF4E5; }
.kpi.alerta b { color: var(--ambar); }
.kpi.erro { background: #FEECEC; }
.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; }
p[role="alert"]:not(:empty) {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 600;
  background: #FEECEC; color: var(--erro); border: 1px solid #F5C2C2;
}
.selo { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.selo.verde { background: var(--verde-claro); color: #0E7A46; }
.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: 10px 8px; text-align: left; border-bottom: 1px solid var(--borda); }
.tbl th { color: var(--navy); font-weight: 700; font-size: 13px; }
.acoes { display: grid; gap: 8px; margin-top: 8px; }
.linha {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 0; border-bottom: 1px solid var(--borda); font-size: 14px;
}
.linha:last-child { border-bottom: 0; }
a { color: var(--navy); }

/* 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 da ABA e do BOTÃO é o que diz
   a quem abriu o aplicativo qual dos dois está na mão (o cabeçalho é a
   marca, igual nos dois). */
body.gestor header { border-bottom-color: var(--navy-escuro); }
body.gestor .aba[aria-current="page"] { background: var(--navy); }
body.gestor .btn { background: var(--navy); }
body.gestor .btn:active { background: var(--navy-escuro); }
body.gestor .btn.secundario { background: var(--cartao); color: var(--navy); }

/* 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); font-size: 13px; }

@media (prefers-color-scheme: dark) {
  :root {
    --texto: #EAF0F6; --cinza: #9FB0C0; --borda: #2A3B4D; --fundo: #0B1826;
    --cartao: #14243A; --navy-claro: #1B3350; --verde-claro: #12402A;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4);
  }
  body { background: var(--fundo); }
  header { background: var(--navy); }
  .aba { color: #CFE0F2; background: #0F1F33; }
  .kpi b { color: #CFE0F2; }
  h2, .tbl th, a { color: #CFE0F2; }
  .btn.secundario { color: #CFE0F2; border-color: #4A6A8A; }
  .kpi.alerta { background: #3A2A10; } .kpi.erro { background: #3F1A1A; }
  p[role="alert"]:not(:empty) { background: #3F1A1A; color: #FCA5A5; border-color: #7F1D1D; }
  .campo select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23CFE0F2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); }
}