:root {
  --azul: #1c2b45;
  --azul-2: #2b3f63;
  --mostarda: #c88a1f;
  --mostarda-claro: #f6e8cc;
  --vermelho: #b5332a;
  --vermelho-claro: #fbe9e7;
  --verde: #2f6b4f;
  --verde-claro: #e5f1ea;
  --fundo: #f7f4ee;
  --cartao: #ffffff;
  --borda: #e3ddd1;
  --borda-forte: #cfc7b8;
  --texto: #1d2433;
  --cinza: #6a6f7b;
  --raio: 10px;
  --sombra: 0 1px 2px rgba(28, 43, 69, .06), 0 4px 16px rgba(28, 43, 69, .04);
  --fonte-titulo: 'Archivo', system-ui, sans-serif;
  --fonte: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.5 var(--fonte);
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}
a { color: var(--azul-2); }
h1, h2, h3 { font-family: var(--fonte-titulo); color: var(--azul); margin: 0; line-height: 1.2; }
h1 { font-size: clamp(1.45rem, 3.4vw, 1.9rem); font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 12px; }
h3 { font-size: 1rem; font-weight: 700; }
.sub { color: var(--cinza); margin: 4px 0 0; }
.cinza { color: var(--cinza); }
small.cinza { display: block; font-size: .85rem; }
td small.cinza { display: block; }
.ic { width: 20px; height: 20px; flex: none; }

/* ---------- Topo ---------- */
.topo { background: var(--azul); color: #fff; position: sticky; top: 0; z-index: 20; }
.topo-in { max-width: 1180px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 24px; }
.marca { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.marca img { border-radius: 50%; background: #fff; }
.marca strong { display: block; font-family: var(--fonte-titulo); font-size: 1.02rem; line-height: 1.1; }
.marca small { display: block; color: #c8d0de; font-size: .8rem; }
.nav-topo { display: flex; gap: 4px; flex: 1; }
.nav-topo a { color: #d7deea; text-decoration: none; padding: 8px 12px; border-radius: 6px; font-weight: 600; font-size: .95rem; }
.nav-topo a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-topo a.ativo { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 -2px 0 var(--mostarda); }
.usuario-menu { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.usuario-nome { color: #c8d0de; font-size: .9rem; margin-right: 4px; }
.topo .btn-icone { color: #d7deea; }
.topo .btn-icone:hover { background: rgba(255, 255, 255, .1); color: #fff; }

/* ---------- Navegação inferior (celular) ---------- */
.nav-baixo { display: none; }

/* ---------- Conteúdo ---------- */
.conteudo { max-width: 1180px; margin: 0 auto; padding: 24px 16px 40px; }
.cab-pagina { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.acoes-pagina { display: flex; gap: 8px; flex-wrap: wrap; }
.voltar { display: inline-flex; align-items: center; gap: 4px; color: var(--cinza); text-decoration: none; font-size: .92rem; margin-bottom: 6px; }
.voltar .ic { width: 16px; height: 16px; }

.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px; box-shadow: var(--sombra); margin: 0 0 16px; min-width: 0; }
.cartao.sem-pad { padding: 0; overflow: hidden; }
.pad-h { padding: 18px 20px 0; }
fieldset.cartao { margin: 0 0 16px; }
.grade-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
.grade-2 .c-largo { grid-column: 1 / -1; }
.grade-usuarios { grid-template-columns: 1.8fr 1fr; }
.vazio { color: var(--cinza); text-align: center; padding: 24px; }
.form-estreito { max-width: 440px; }

/* ---------- Avisos ---------- */
.aviso { border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; font-weight: 500; border: 1px solid; }
.aviso a { margin-left: 8px; font-weight: 600; }
.aviso-ok { background: var(--verde-claro); border-color: #bcd9c8; color: var(--verde); }
.aviso-erro { background: var(--vermelho-claro); border-color: #efc3bd; color: var(--vermelho); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 .98rem var(--fonte); padding: 11px 18px; border-radius: 8px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; min-height: 44px; transition: background .15s, border-color .15s;
}
.btn .ic { width: 18px; height: 18px; }
.btn-primario { background: var(--azul); color: #fff; }
.btn-primario:hover { background: var(--azul-2); }
.btn-primario:disabled { opacity: .6; cursor: wait; }
.btn-sec { background: #fff; color: var(--azul); border-color: var(--borda-forte); }
.btn-sec:hover { border-color: var(--azul); }
.btn-texto { background: none; color: var(--azul-2); padding: 6px 8px; min-height: 0; font-size: .9rem; }
.btn-texto:hover { text-decoration: underline; }
.btn-perigo { background: #fff; color: var(--vermelho); border-color: #e7b7b1; }
.btn-perigo:hover { background: var(--vermelho-claro); }
.btn-bloco { width: 100%; }
.btn-icone { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; color: var(--cinza); background: none; border: 0; cursor: pointer; }
.btn-icone:hover { background: #f0ece4; color: var(--azul); }
.btn-add { width: 100%; border-style: dashed; margin-bottom: 8px; }

/* ---------- Números ---------- */
.numeros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.numeros-ficha { grid-template-columns: repeat(3, 1fr); }
.numero { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px 18px; box-shadow: var(--sombra); border-top: 3px solid var(--borda-forte); }
.numero strong { display: block; font-family: var(--fonte-titulo); font-size: clamp(1.8rem, 4.5vw, 2.5rem); font-weight: 800; color: var(--azul); line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.numero-rot { color: var(--cinza); font-size: .9rem; font-weight: 600; }
.numero-rot small { font-weight: 400; }
.numero-adulto { border-top-color: var(--azul); }
.numero-crianca { border-top-color: var(--mostarda); }
.numero-crianca strong { color: #9a6810; }

.barra-prop { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--borda); }
.barra-a { background: var(--azul); }
.barra-c { background: var(--mostarda); }
.legenda-prop { color: var(--cinza); font-size: .9rem; margin: 8px 0 22px; }
.pt { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 4px 0 10px; vertical-align: -1px; }
.pt:first-child { margin-left: 0; }
.pt-a { background: var(--azul); }
.pt-c { background: var(--mostarda); }

/* ---------- Tabelas ---------- */
.tabela-rolagem { overflow-x: auto; margin: 0 -20px -20px; }
.tabela { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabela th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cinza); font-weight: 700; padding: 10px 14px; border-bottom: 1px solid var(--borda); background: #fbf9f5; }
.tabela td { padding: 12px 14px; border-bottom: 1px solid #efeae1; vertical-align: top; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela-familias tbody tr { cursor: pointer; }
.tabela-familias tbody tr:hover { background: #fbf8f2; }
.tabela-familias a { color: var(--texto); text-decoration: none; }
.td-ad { color: var(--azul); font-weight: 600; }
.td-cr { color: #9a6810; font-weight: 600; }
.td-acao { width: 48px; padding: 6px !important; }
.td-botoes form { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.form-senha input { width: 120px; padding: 6px 8px !important; font-size: .88rem; min-height: 0 !important; }
tr.inativo td { opacity: .55; }

.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li + li { border-top: 1px solid #efeae1; }
.lista-simples a { display: block; padding: 10px 0; text-decoration: none; color: var(--texto); }
.lista-simples a:hover strong { text-decoration: underline; }
.lista-simples span { display: block; font-size: .88rem; }

.selo { display: inline-block; font-size: .78rem; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: #eee9df; color: var(--cinza); white-space: nowrap; }
.selo:empty { display: none; }
.selo-a { background: #e3e8f1; color: var(--azul); }
.selo-c { background: var(--mostarda-claro); color: #8a5c0c; }
.selo-off { background: var(--vermelho-claro); color: var(--vermelho); }

/* ---------- Filtros ---------- */
.filtros { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.busca { flex: 1 1 280px; position: relative; }
.busca .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--cinza); }
.busca input { padding-left: 40px !important; }
.paginacao { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 8px; color: var(--cinza); }

/* ---------- Formulários ---------- */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
input, select, textarea {
  font: inherit; color: var(--texto); width: 100%;
  padding: 10px 12px; min-height: 46px; border: 1px solid var(--borda-forte); border-radius: 8px; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 0; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(28, 43, 69, .14); }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236a6f7b' stroke-width='1.8'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.filtros select { width: auto; min-width: 180px; }

.campo { display: block; margin-bottom: 14px; min-width: 0; }
.campo > span { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 5px; color: #343b4b; }
.campo > span em { color: var(--vermelho); font-style: normal; }
.campo > span em[hidden] { display: none; }
.dica { display: block; color: var(--cinza); font-size: .82rem; margin-top: 4px; }
.erro-campo { display: block; color: var(--vermelho); font-size: .85rem; font-weight: 600; margin-top: 4px; }
.tem-erro input, .tem-erro select { border-color: var(--vermelho); background: #fffafa; }
.tem-erro .dica { display: none; }

.grade-campos { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 14px; }
.grade-campos .campo { grid-column: span 12; }
.c-1 { grid-column: span 1 !important; } .c-2 { grid-column: span 2 !important; } .c-3 { grid-column: span 3 !important; }
.c-4 { grid-column: span 4 !important; } .c-6 { grid-column: span 6 !important; } .c-12 { grid-column: span 12 !important; }

.etapa { display: flex; align-items: center; gap: 10px; font-size: 1.12rem; margin: 26px 0 12px; }
.etapa span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--azul); color: #fff; font-size: .9rem; }
.etapa-sub { margin: -6px 0 12px; }
.pessoa { border-left: 4px solid var(--borda-forte); }
.pessoa-resp { border-left-color: var(--azul); }
.pessoa-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; min-height: 32px; }
.pessoa-cab h3 { flex: none; }
.pessoa-cab .btn-remover { margin-left: auto; color: var(--vermelho); }
.pessoa:not(.pessoa-resp) .pessoa-cab h3::after { content: ' ' counter(morador); }
#moradores { counter-reset: morador; }
#moradores .pessoa { counter-increment: morador; }

.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; padding: 12px; border-radius: 8px; background: #faf8f3; border: 1px solid var(--borda); }
.check input { width: 22px; height: 22px; min-height: 0; margin: 1px 0 0; flex: none; accent-color: var(--azul); }
.check.tem-erro { border-color: var(--vermelho); background: #fffafa; }

.barra-salvar {
  position: sticky; bottom: 0; z-index: 10; margin: 20px -16px 0; padding: 12px 16px;
  background: rgba(247, 244, 238, .96); backdrop-filter: blur(6px); border-top: 1px solid var(--borda);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.resumo-casa { color: var(--texto); font-size: .95rem; }
.resumo-casa .pt { margin-left: 10px; }

/* ---------- Ficha ---------- */
.endereco { font-size: 1.05rem; margin: 0 0 8px; }
.rodape-ficha { font-size: .85rem; margin: 8px 0 24px; }
.zona-perigo { border-top: 1px solid var(--borda); padding-top: 20px; }
.impressao-cab, .so-impressao { display: none; }
.linha-ass { margin: 56px 0 8px; border-top: 1px solid #000; max-width: 420px; padding-top: 6px; font-size: .9rem; }

/* ---------- Login ---------- */
.login { min-height: calc(100vh - 60px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px 0; }
.login-logo { width: 190px; height: auto; }
.login-form { width: 100%; max-width: 400px; padding: 28px; }
.login-form h1 { font-size: 1.4rem; }
.login-form .sub { margin-bottom: 20px; }

/* ---------- Desktop / celular ---------- */
@media (max-width: 960px) {
  .nav-topo { display: none; }
  .grade-2, .grade-usuarios { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .topo-in { padding: 8px 16px; }
  .marca img { width: 34px; height: 34px; }
  .usuario-nome { display: none; }
  .conteudo { padding: 18px 16px 28px; }
  .so-desktop { display: none !important; }
  .cab-pagina { align-items: flex-start; }
  .acoes-pagina { width: 100%; }
  .acoes-pagina .btn { flex: 1; }
  .cartao { padding: 16px; }
  .tabela-rolagem { margin: 0 -16px -16px; }
  .numeros { grid-template-columns: 1fr 1fr; gap: 10px; }
  .numeros-ficha { grid-template-columns: repeat(3, 1fr); }
  .numero { padding: 12px 14px; }

  .nav-baixo {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: #fff; border-top: 1px solid var(--borda);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .nav-baixo a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--cinza); text-decoration: none; font-size: .72rem; font-weight: 600; padding: 4px 0; }
  .nav-baixo a .ic { width: 22px; height: 22px; }
  .nav-baixo-novo .ic { background: var(--azul); color: #fff; border-radius: 50%; width: 36px !important; height: 36px !important; padding: 7px; margin-top: -14px; box-shadow: 0 2px 8px rgba(28, 43, 69, .3); }
  .nav-baixo-novo { color: var(--azul) !important; }

  /* campos em uma coluna, alguns lado a lado */
  .grade-campos { grid-template-columns: repeat(6, 1fr); column-gap: 10px; }
  .grade-campos .campo { grid-column: span 6 !important; }
  .grade-campos .c-3, .grade-campos .c-2 { grid-column: span 3 !important; }
  .grade-campos .c-1 { grid-column: span 2 !important; }
  .grade-campos .c-4:has([data-mascara="tel"]) { grid-column: span 6 !important; }
  .pessoa .c-1 { grid-column: span 3 !important; }
  .grade-campos .campo:has([data-titulo]) { grid-column: span 6 !important; }
  .grade-campos .campo:has([name="uf"]) { grid-column: span 2 !important; }
  .grade-campos .campo:has([name="cidade"]) { grid-column: span 4 !important; }
  .grade-campos .campo:has([data-nome]),
  .grade-campos .campo:has(select[name$="[parentesco]"]),
  .grade-campos .campo:has([data-mascara="tel"]) { grid-column: span 6 !important; }
  .tabela-bairros small.cinza { display: none; }
  .tabela-bairros th, .tabela-bairros td { padding: 10px 8px; font-size: .9rem; }
  .tabela-bairros th { font-size: .68rem; letter-spacing: 0; }
  .tabela-bairros td:first-child, .tabela-bairros th:first-child { padding-left: 16px; }
  .tabela-bairros td:last-child, .tabela-bairros th:last-child { padding-right: 16px; }

  .barra-salvar { bottom: calc(62px + env(safe-area-inset-bottom)); flex-direction: column; align-items: stretch; text-align: center; }
  .barra-salvar .btn { width: 100%; }

  /* tabelas viram cartões */
  .tabela-familias thead, .tabela-pessoas thead, .tabela-usuarios thead { display: none; }
  .tabela-familias tr, .tabela-pessoas tr, .tabela-usuarios tr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 10px; padding: 12px 16px; border-bottom: 1px solid #efeae1; position: relative; }
  .tabela-familias td, .tabela-pessoas td, .tabela-usuarios td { border: 0; padding: 0; text-align: left !important; }
  .tabela-familias td.td-resp, .tabela-familias td.td-end { grid-column: 1 / -1; }
  .tabela-familias td:first-child { position: absolute; right: 52px; top: 12px; font-size: .8rem; }
  .tabela-familias td:first-child::before { content: 'nº '; }
  .tabela-familias .td-acao { position: absolute; right: 8px; top: 6px; }
  .tabela-familias .td-resp strong { padding-right: 84px; display: block; }
  .tabela-familias .td-end { font-size: .9rem; margin-bottom: 6px; }
  .tabela-familias .num::before { content: attr(data-rot); display: block; font-size: .72rem; color: var(--cinza); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
  .tabela-pessoas tr { grid-template-columns: 1fr 1fr; }
  .tabela-pessoas .td-nome { grid-column: 1 / -1; margin-bottom: 4px; }
  .tabela-pessoas td[data-rot]::before, .tabela-usuarios td[data-rot]::before { content: attr(data-rot); display: block; font-size: .72rem; color: var(--cinza); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; margin-top: 6px; }
  .tabela-pessoas td[data-rot="Faixa"]::before { visibility: hidden; }
  .tabela-usuarios tr { grid-template-columns: 1fr 1fr; }
  .tabela-usuarios td:first-child, .tabela-usuarios .td-botoes { grid-column: 1 / -1; }
  .tabela-usuarios td.num[data-rot] { text-align: left; }
  .filtros select { flex: 1; }
}

/* ---------- Impressão ---------- */
@media print {
  @page { margin: 14mm; }
  body { background: #fff; padding: 0; font-size: 11pt; }
  .topo, .nav-baixo, .acoes-pagina, .voltar, .filtros, .nao-imprimir, .zona-perigo, .cab-pagina .sub { display: none !important; }
  .conteudo { padding: 0; max-width: none; }
  .impressao-cab { display: flex; align-items: center; gap: 14px; border-bottom: 2px solid var(--azul); padding-bottom: 10px; margin-bottom: 14px; }
  .so-impressao { display: block; }
  .cab-pagina { margin-bottom: 10px; }
  .cartao, .numero { box-shadow: none; break-inside: avoid; }
  .grade-2 { display: block; }
  .tabela-rolagem { overflow: visible; margin: 0; }
  .tabela td, .tabela th { padding: 6px 8px; }
  .numeros { grid-template-columns: repeat(4, 1fr); }
  .numeros-ficha { grid-template-columns: repeat(3, 1fr); }
  .tabela-pessoas thead { display: table-header-group !important; }
  .tabela-pessoas tr { display: table-row !important; }
  .tabela-pessoas td { display: table-cell !important; border-bottom: 1px solid #ddd !important; padding: 6px 8px !important; }
  .tabela-pessoas td::before { display: none !important; }
  a { color: inherit; text-decoration: none; }
}