/* AreaConstruida — mobile-first, M7A7 Tecnologia */
:root {
  --primaria: #4f46e5;
  --primaria-escura: #4338ca;
  --gradiente: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  --verde: #16a34a;
  --fundo: #f1f5f9;
  --card: #ffffff;
  --texto: #1e293b;
  --suave: #64748b;
  --borda: #e2e8f0;
  --raio: 16px;
  --sombra: 0 1px 3px rgba(15, 23, 42, .08), 0 4px 16px rgba(15, 23, 42, .06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  min-height: 100dvh;
  font-size: 16px;
}

.oculto { display: none !important; }

/* ---------- Login ---------- */
.tela-login {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  background: var(--gradiente);
  padding: 24px;
}
.login-card {
  background: var(--card);
  border-radius: 24px;
  padding: 36px 28px 24px;
  width: 100%; max-width: 380px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  text-align: center;
}
.logo {
  width: 68px; height: 68px; margin: 0 auto 14px;
  background: var(--gradiente); border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.logo svg { width: 38px; height: 38px; }
.login-card h1 { font-size: 26px; letter-spacing: -.5px; }
.login-card .sub { color: var(--suave); font-size: 14px; margin: 4px 0 26px; }
.login-card label { display: block; text-align: left; font-size: 13px; font-weight: 600; color: var(--suave); margin-bottom: 6px; }
.login-card input {
  width: 100%; padding: 14px 16px; font-size: 16px;
  border: 1.5px solid var(--borda); border-radius: 12px;
  margin-bottom: 14px; outline: none; transition: border .15s;
}
.login-card input:focus { border-color: var(--primaria); }
.login-homenagem { margin: -8px 0 14px; }
.login-homenagem img { width: 100%; border-radius: 14px; display: block; }
.login-homenagem figcaption { font-size: 11.5px; color: var(--suave); margin-top: 6px; }
.login-homenagem figcaption b { color: var(--texto); }

/* Campo de senha com ícone de olho (mostrar/ocultar) */
.campo-senha { position: relative; }
.campo-senha > input { padding-right: 46px !important; margin-bottom: 0 !important; width: 100%; }
.login-card .campo-senha, .modal-card .campo-senha { margin-bottom: 14px; }
.olho-senha {
  position: absolute; right: 4px; top: 0; height: 100%;
  display: flex; align-items: center; padding: 0 10px;
  background: none; border: none; cursor: pointer; font-size: 18px; line-height: 1;
  opacity: .65;
}
.olho-senha:hover { opacity: 1; }
.campo-codigo {
  text-align: center; font-size: 30px !important; letter-spacing: 14px;
  font-variant-numeric: tabular-nums; padding-left: 20px !important;
}
.info-codigo { color: var(--suave); font-size: 14px; margin-bottom: 16px; line-height: 1.5; }
.info-codigo b { color: var(--texto); }
.btn-link {
  display: block; width: 100%; text-align: center;
  background: none; border: none; color: var(--primaria);
  font-size: 14px; font-weight: 600; margin-top: 10px; padding: 6px; cursor: pointer;
}
.btn-link:hover { text-decoration: underline; }
.rodape-login { color: #cbd5e1; font-size: 12px; margin-top: 26px; }

/* ---------- Botões ---------- */
.btn-principal {
  width: 100%; padding: 15px; font-size: 16px; font-weight: 700;
  color: #fff; background: var(--gradiente);
  border: none; border-radius: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: transform .1s, opacity .15s;
  text-decoration: none;
}
.btn-principal:active { transform: scale(.98); }
.btn-principal:disabled { opacity: .45; cursor: not-allowed; }
.btn-pdf { margin-top: 4px; background: linear-gradient(135deg, #0f766e, #16a34a); }

/* Refazer análise: visível, centralizado, com aviso discreto */
.refazer-bloco { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-top: 10px; }
.btn-refazer {
  padding: 11px 20px; font-size: 14px; font-weight: 700;
  color: var(--primaria); background: #eef2ff;
  border: 1.5px solid var(--primaria); border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-refazer:hover { background: #e0e7ff; }
.btn-refazer:disabled { opacity: .55; cursor: not-allowed; }
.refazer-aviso { font-size: 11.5px; color: var(--suave); text-align: center; }
.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Spinner dentro de qualquer botão durante ação assíncrona */
.spinner-btn {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  display: inline-block; vertical-align: -2px; margin-right: 8px;
  animation: girar .7s linear infinite;
}
button:disabled { cursor: progress; }

/* Botão instalar app (PWA) */
.btn-instalar {
  display: block; width: 100%; margin-top: 14px;
  padding: 12px; font-size: 14px; font-weight: 700;
  color: var(--primaria); background: #eef2ff;
  border: 1.5px solid var(--primaria); border-radius: 12px; cursor: pointer;
}
.btn-instalar:hover { background: #e0e7ff; }

.chip {
  padding: 9px 14px; font-size: 13.5px; font-weight: 600;
  background: var(--card); color: var(--texto);
  border: 1.5px solid var(--borda); border-radius: 999px; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
}
.chip.destaque { background: var(--primaria); border-color: var(--primaria); color: #fff; }

/* ---------- Estrutura ---------- */
.topo {
  position: sticky; top: 0; z-index: 1100;
  background: var(--gradiente); color: #fff;
  padding: max(12px, env(safe-area-inset-top)) 16px 12px;
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: var(--sombra);
}
.marca { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; letter-spacing: -.3px; }
.marca svg { width: 22px; height: 22px; }
.topo-acoes { display: flex; gap: 8px; }
.topo .chip { background: rgba(255,255,255,.16); border-color: transparent; color: #fff; }

.conteudo {
  max-width: 640px; margin: 0 auto;
  padding: 16px 14px calc(32px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 14px;
}

.card {
  background: var(--card); border-radius: var(--raio);
  padding: 20px; box-shadow: var(--sombra);
}
.card h2 { font-size: 18px; margin-bottom: 14px; letter-spacing: -.3px; }
.card h3 { font-size: 15.5px; margin-bottom: 12px; }

/* ---------- Formulário ---------- */
.linha-campos { display: flex; gap: 10px; }
.campo-cep { flex: 1.4; }
.campo-numero { flex: 1; }
.campo { margin-bottom: 12px; }
.campo label, .checkbox { display: block; font-size: 13px; font-weight: 600; color: var(--suave); margin-bottom: 6px; }
.opcional { font-weight: 400; }
.campo input, .campo select, #busca, .filtros input, .filtros select {
  width: 100%; padding: 13px 14px; font-size: 16px;
  border: 1.5px solid var(--borda); border-radius: 12px;
  outline: none; background: #fff; transition: border .15s;
}
.campo input:focus, #busca:focus { border-color: var(--primaria); }
.endereco-preview {
  background: #eef2ff; border-radius: 12px; padding: 12px 14px;
  font-size: 14px; color: var(--primaria-escura); margin-bottom: 14px; line-height: 1.45;
}
.banner { border-radius: 12px; padding: 12px 14px; font-size: 14px; margin-top: 10px; line-height: 1.45; }
.banner.erro { background: #fef2f2; color: #b91c1c; }
.banner.ok { background: #f0fdf4; color: #166534; }
.banner.aviso { background: #fffbeb; color: #92400e; margin: 10px 0 0; }
#bannerGlobal { margin: 10px 14px 0; }

/* ---------- Mapa ---------- */
.card-mapa { padding: 10px; }
#mapa {
  width: 100%; aspect-ratio: 1 / 1; max-height: 60dvh;
  border-radius: 12px; z-index: 1;
}
.barra-mapa { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.vertice-poligono {
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 3px solid var(--primaria);
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* ---------- Métricas ---------- */
.grade-metricas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.metrica { display: flex; flex-direction: column; gap: 6px; padding: 16px; }
.metrica-rotulo { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--suave); }
.metrica-valor { font-size: 22px; font-weight: 800; letter-spacing: -.5px; }
.destaque-area { grid-column: 1 / -1; background: var(--gradiente); }
.destaque-area .metrica-rotulo { color: rgba(255,255,255,.85); }
.destaque-area .metrica-valor { color: #fff; font-size: 34px; }

/* ---------- Pavimentos ---------- */
.chips-tipo { display: flex; gap: 8px; }
.chip-tipo {
  flex: 1; padding: 12px 8px; font-size: 14.5px; font-weight: 700;
  background: var(--fundo); color: var(--suave);
  border: 1.5px solid var(--borda); border-radius: 12px; cursor: pointer;
}
.chip-tipo.ativo { background: #eef2ff; border-color: var(--primaria); color: var(--primaria); }
.campo-pav { margin-top: 12px; }
.campo-pav label { font-size: 13px; font-weight: 600; color: var(--suave); }
.stepper { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.stepper button {
  width: 44px; height: 44px; font-size: 22px; font-weight: 700;
  border: 1.5px solid var(--borda); border-radius: 12px; background: #fff; cursor: pointer;
}
.stepper input {
  width: 74px; text-align: center; font-size: 18px; font-weight: 700;
  padding: 10px; border: 1.5px solid var(--borda); border-radius: 12px;
}
.obs { font-size: 13px; color: var(--suave); margin-top: 12px; line-height: 1.5; }

/* ---------- Homenagem (banner) ---------- */
.homenagem {
  background: var(--card); border-radius: var(--raio);
  box-shadow: var(--sombra); overflow: hidden; text-align: center;
}
.homenagem img { width: 100%; max-height: 300px; object-fit: cover; display: block; }
.homenagem figcaption {
  font-size: 12.5px; color: var(--suave); padding: 10px 14px; line-height: 1.4;
}
.homenagem figcaption b { color: var(--texto); }

/* ---------- Fotos ---------- */
.fotos { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.foto {
  flex: 0 0 220px; border-radius: 12px; overflow: hidden;
  border: 1.5px solid var(--borda);
}
.foto-wrap { position: relative; }
.foto-wrap img { width: 100%; height: 160px; object-fit: cover; display: block; cursor: zoom-in; }
.foto-zoom {
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
  background: rgba(15, 23, 42, .6); color: #fff; border: none;
  font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.foto-zoom:hover { background: rgba(15, 23, 42, .85); }
.foto figcaption { font-size: 12px; color: var(--suave); padding: 8px 10px; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 2500;
  background: rgba(2, 6, 23, .9);
  display: flex; flex-direction: column;
}
.lightbox-barra {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: max(12px, env(safe-area-inset-top)) 14px 10px;
}
.lightbox-barra button {
  min-width: 44px; height: 40px; padding: 0 12px;
  background: rgba(255, 255, 255, .12); color: #fff;
  border: 1px solid rgba(255, 255, 255, .25); border-radius: 10px;
  font-size: 16px; font-weight: 700; cursor: pointer;
}
.lightbox-barra button:hover { background: rgba(255, 255, 255, .22); }
.lightbox-viewport {
  flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center;
  padding: 12px; cursor: grab;
}
#lightboxImg {
  max-width: 100%; max-height: 100%; object-fit: contain;
  transform-origin: center center; transition: transform .08s ease-out;
  user-select: none; -webkit-user-drag: none;
}

/* ---------- Recentes ---------- */
#busca { margin-bottom: 12px; }
.lista-recentes { list-style: none; }
.lista-recentes li {
  padding: 13px 4px; border-bottom: 1px solid var(--borda);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  cursor: pointer;
}
.lista-recentes li:last-child { border-bottom: none; }
.recente-info { min-width: 0; }
.recente-endereco { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recente-detalhe { font-size: 12.5px; color: var(--suave); margin-top: 2px; }
.recente-area { font-size: 15px; font-weight: 800; color: var(--verde); white-space: nowrap; }

.disclaimer { text-align: center; font-size: 12px; color: #94a3b8; line-height: 1.6; margin-top: 6px; }
.creditos {
  text-align: center; font-size: 12px; color: var(--suave);
  padding: 14px 0 4px; margin-top: 4px; border-top: 1px solid var(--borda);
}
.creditos b { color: var(--texto); }

/* ---------- Admin ---------- */
.admin-topo { display: flex; align-items: center; gap: 12px; }
.admin-topo h2 { font-size: 20px; }
.abas { display: flex; gap: 6px; background: #e2e8f0; padding: 5px; border-radius: 14px; }
.aba {
  flex: 1; padding: 10px 6px; font-size: 13.5px; font-weight: 700;
  border: none; background: transparent; border-radius: 10px; color: var(--suave); cursor: pointer;
}
.aba.ativa { background: #fff; color: var(--primaria); box-shadow: var(--sombra); }
.painel-aba { display: flex; flex-direction: column; gap: 12px; }
.checkbox { display: flex; align-items: center; gap: 8px; margin: 4px 0 14px; cursor: pointer; }
.checkbox input { width: 18px; height: 18px; }

.item-lista {
  background: var(--card); border-radius: var(--raio); padding: 14px 16px;
  box-shadow: var(--sombra); margin-bottom: 10px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
}
.item-info { min-width: 0; flex: 1; }
.item-titulo { font-size: 14.5px; font-weight: 700; word-break: break-all; }
.item-detalhe { font-size: 12.5px; color: var(--suave); margin-top: 3px; line-height: 1.5; }
.selo { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.selo.admin { background: #eef2ff; color: var(--primaria); }
.selo.inativo { background: #fef2f2; color: #b91c1c; }
.selo.ativo { background: #f0fdf4; color: var(--verde); }

.chave-criada { border: 2px dashed var(--primaria); text-align: center; }
.chave-criada code {
  display: block; background: #eef2ff; color: var(--primaria-escura);
  padding: 12px; border-radius: 10px; font-size: 13px; word-break: break-all; margin: 10px 0;
}

.filtros { display: flex; flex-direction: column; gap: 10px; }
.filtros .chip { justify-content: center; }
.paginacao { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; }
#audPagina { font-weight: 700; color: var(--suave); }

/* ---------- Modal (trocar senha) ---------- */
.modal {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(15, 23, 42, .55);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modal-card {
  background: var(--card); border-radius: 20px; width: 100%; max-width: 380px;
  padding: 24px 22px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.modal-card h3 { font-size: 18px; margin-bottom: 16px; }
.modal-card label { display: block; text-align: left; font-size: 13px; font-weight: 600; color: var(--suave); margin-bottom: 6px; }
.modal-card input {
  width: 100%; padding: 13px 14px; font-size: 16px;
  border: 1.5px solid var(--borda); border-radius: 12px;
  margin-bottom: 14px; outline: none; transition: border .15s;
}
.modal-card input:focus { border-color: var(--primaria); }
.modal-acoes { display: flex; gap: 10px; margin-top: 6px; }
.modal-acoes .chip { flex: 1; justify-content: center; padding: 12px; }

/* ---------- Telas maiores ---------- */
@media (min-width: 700px) {
  .conteudo { padding: 24px 20px 48px; }
  #mapa { aspect-ratio: 16 / 10; }
  .grade-metricas { grid-template-columns: 1fr 1fr 1fr; }
  .destaque-area { grid-column: auto; }
  .destaque-area .metrica-valor { font-size: 28px; }
  .filtros { flex-direction: row; flex-wrap: wrap; }
  .filtros input, .filtros select { width: auto; flex: 1; }
}