/* ══════════════════════════════════════════════
   DESIGN SYSTEM — Fiscalização de Obras
   Portado do AppPOSTURAS (appPerturbação/AppPerturbacao/src/styles/main.css).
   Mesma identidade visual da prefeitura: os dois sistemas são usados pelos
   mesmos servidores, e divergir no visual gera retrabalho de treinamento.

   Convenções herdadas — ver "Convenções de UI" no CLAUDE.md do AppPOSTURAS:
   · Botões "Modelo E": pílula, sem borda visível, .primary verde sólido
   · Campos "Modelo E": o .field é o cartão; o input por dentro não tem borda
   · Tags "Modelo D": fundo em gradiente, ícone colorido, texto cinza-chumbo
   · Modais não fecham por clique no fundo (evita perda de dados)
   · Ícone é sempre SVG de linha, nunca emoji
   ══════════════════════════════════════════════ */

:root{
  /* VERDE — identidade visual da prefeitura */
  --g:#009B3A;--gd:#006B28;--gxd:#004D1C;--gl:#E8F5E9;--gm:#A5D6A7;
  /* DOURADO — atenção, pendente, prazo */
  --gold:#F5C400;--gold-lt:#FFFDE7;--gold-dk:#B8860B;
  /* NEUTROS */
  --bg:#F2F5F2;--sur:#FFF;--bord:#D8E4D8;--blt:#EDF3ED;
  /* TIPOGRAFIA */
  --tx:#0F1F0F;--tx2:#4A5E4A;--tx3:#7A8E7A;--chumbo:#37474F;
  /* SEMÂNTICAS */
  --red:#C62828;--rlt:#FFEBEE;--warn:#E65100;--wlt:#FFF3E0;
  --blue:#1565C0;--blt2:#E3F2FD;
  /* GEOMETRIA */
  --r:10px;--rl:14px;
  /* SOMBRAS */
  --sh:0 1px 4px rgba(0,50,10,.07),0 4px 12px rgba(0,50,10,.05);
  --shl:0 6px 28px rgba(0,50,10,.11);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  background:var(--bg);color:var(--tx);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow:hidden;
}

/* ── CABEÇALHO ────────────────────────────────────────────── */
.topo{
  position:fixed;top:0;left:0;right:0;height:56px;z-index:1000;
  background:linear-gradient(135deg,var(--gxd),var(--gd));
  display:flex;align-items:center;gap:10px;padding:0 14px;color:#fff;
  box-shadow:0 2px 10px rgba(0,40,10,.25);
}
.topo h1{font-size:15px;font-weight:800;letter-spacing:.01em}
.topo .sub{font-size:10.5px;opacity:.85;text-transform:uppercase;letter-spacing:.06em}
.topo-info{margin-left:auto;font-size:11px;opacity:.9;text-align:right;line-height:1.3}

/* ── MAPA ─────────────────────────────────────────────────── */
#map{position:fixed;top:56px;left:0;right:0;bottom:0}
.leaflet-container{background:var(--bg)}

/* Barra de ações flutuante sobre o mapa */
.acoes{
  position:fixed;left:0;right:0;bottom:0;z-index:900;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  display:flex;gap:8px;
  background:linear-gradient(to top,rgba(242,245,242,.97) 55%,rgba(242,245,242,0));
}
.acoes .btn{flex:1;justify-content:center}

/* Chip de contagem/estado, canto superior do mapa */
.chip-estado{
  position:fixed;top:66px;left:12px;z-index:900;
  background:var(--sur);border:1.5px solid var(--bord);border-radius:999px;
  padding:5px 12px;font-size:11.5px;font-weight:700;color:var(--tx2);
  box-shadow:var(--sh);display:flex;align-items:center;gap:6px;
}
.chip-estado svg{width:13px;height:13px;color:var(--g)}

/* ── BOTÕES — "Modelo E" ──────────────────────────────────── */
.btn{
  padding:10px 18px;border-radius:999px;border:1.5px solid transparent;
  background:var(--blt);color:var(--tx2);cursor:pointer;font-size:13px;
  font-weight:700;transition:all .15s;display:inline-flex;align-items:center;
  gap:6px;font-family:inherit;white-space:nowrap;
}
.btn:hover{background:var(--bord)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.primary{background:var(--g);border-color:var(--g);color:#fff;box-shadow:0 3px 10px rgba(0,155,58,.3)}
.btn.primary:hover{background:var(--gd)}
.btn.secondary{background:var(--gl);border-color:var(--gm);color:var(--gd)}
.btn.out-green{background:#fff;border-color:var(--g);color:var(--g)}
.btn.out-green:hover{background:var(--gl)}
.btn.danger{background:transparent;border-color:#EF9A9A;color:var(--red);font-size:12px;padding:6px 10px}
.btn.cancel-bordo{background:#fff;border:1.5px solid var(--red);color:var(--red)}
.btn.cancel-bordo:hover{background:var(--rlt)}
.btn.sm{font-size:12px;padding:7px 11px}
.btn.full{width:100%;justify-content:center;padding:13px}
.btn svg{width:15px;height:15px;flex-shrink:0}
.btn-row{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:14px}

/* Botão de GPS no estado "capturado" — mesmo padrão de geolocalizacao.js */
.btn.gps-ativo{background:#fff;border-color:var(--red);color:var(--red)}

/* ── CAMPOS — "Modelo E" ──────────────────────────────────── */
.field{
  background:var(--sur);border:1.5px solid var(--bord);border-radius:var(--r);
  padding:7px 11px;margin-bottom:9px;transition:border-color .15s,box-shadow .15s;
}
.field label{
  display:block;font-size:10px;font-weight:700;color:var(--tx3);
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;
}
.field .valor{font-size:14px;color:var(--tx);font-weight:600;word-break:break-word}
.field input,.field select{
  font-size:14px;padding:0;border:none;background:none;color:var(--tx);
  width:100%;font-family:inherit;-webkit-appearance:none;
}
.field input:focus,.field select:focus{outline:none}
.field:focus-within{border-color:var(--g);box-shadow:0 0 0 3px rgba(0,108,22,.1)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.g2 .field{margin-bottom:0}
.g2+.g2{margin-top:9px}

/* ── TÍTULOS DE SEÇÃO — numeração por contador CSS ────────── */
.modal{counter-reset:sec}
.sec-title{
  display:flex;align-items:center;gap:8px;margin:16px 0 10px;
  font-size:11.5px;font-weight:800;color:var(--gd);text-transform:uppercase;
  letter-spacing:.05em;
}
.sec-title::before{
  counter-increment:sec;content:counter(sec);
  width:18px;height:18px;flex-shrink:0;border-radius:5px;
  background:var(--gl);color:var(--gd);font-size:10px;
  display:flex;align-items:center;justify-content:center;
}
.sec-title::after{content:'';flex:1;height:1px;background:var(--blt)}

/* ── TAGS DE STATUS — "Modelo D" ──────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:5px;font-size:11px;
  padding:4px 9px;border-radius:8px;font-weight:700;white-space:nowrap;
  line-height:1.4;color:var(--chumbo);border:1px solid;
}
.badge::before{content:'';width:8px;height:8px;border-radius:50%;flex-shrink:0}
.bd-ok{background:linear-gradient(135deg,#E8F5E9,#F4FBF5);border-color:#C8E6C9}
.bd-ok::before{background:var(--g)}
.bd-pe{background:linear-gradient(135deg,#FFFDE7,#FFFEF5);border-color:#FFE9A8}
.bd-pe::before{background:var(--gold)}
.bd-in{background:linear-gradient(135deg,#FFEBEE,#FFF5F6);border-color:#FFCDD2}
.bd-in::before{background:var(--red)}

/* ── MODAIS ───────────────────────────────────────────────── */
/* Fecham só pelo × ou por botão explícito — clicar no fundo NÃO fecha,
   de propósito, para não perder dados já digitados. */
.modal-bg{
  display:none;position:fixed;inset:0;background:rgba(0,20,5,.52);z-index:2000;
  align-items:flex-start;justify-content:center;padding:14px;overflow-y:auto;
  backdrop-filter:blur(2px);
}
.modal-bg.open{display:flex}
.modal{
  background:#fff;border-radius:18px;padding:22px 20px;width:100%;max-width:520px;
  margin:auto;position:relative;box-shadow:var(--shl);border:1.5px solid var(--bord);
  max-height:calc(100vh - 28px);overflow-y:auto;
}
.modal h3{
  font-size:15px;font-weight:800;margin-bottom:4px;color:var(--gd);
  display:flex;align-items:center;gap:7px;padding-right:34px;
}
.modal h3 svg{width:17px;height:17px}
.modal .sub{font-size:11.5px;color:var(--tx3);margin-bottom:8px}
.modal-x{
  position:absolute;top:13px;right:13px;background:var(--bg);
  border:1.5px solid var(--bord);border-radius:8px;font-size:14px;cursor:pointer;
  color:var(--tx2);line-height:1;padding:5px 9px;font-family:inherit;
}
.modal-x:hover{background:var(--bord)}

/* Lista de escolha (lotes próximos, quando o GPS não é conclusivo) */
.opcao{
  display:flex;align-items:center;gap:11px;padding:11px 13px;cursor:pointer;
  border:1.5px solid var(--bord);border-radius:var(--r);background:var(--sur);
  margin-bottom:8px;transition:all .15s;
}
.opcao:hover{border-color:var(--gm);background:var(--gl)}
.opcao.sel{border-color:var(--g);background:var(--gl);box-shadow:0 0 0 3px rgba(0,108,22,.1)}
.opcao .radio{
  width:17px;height:17px;border-radius:50%;border:2px solid var(--bord);
  flex-shrink:0;position:relative;
}
.opcao.sel .radio{border-color:var(--g)}
.opcao.sel .radio::after{
  content:'';position:absolute;inset:3px;border-radius:50%;background:var(--g);
}
.opcao .txt{flex:1;min-width:0}
.opcao .t1{font-size:13.5px;font-weight:700;color:var(--tx)}
.opcao .t2{font-size:11.5px;color:var(--tx3)}
.opcao .dist{font-size:11px;font-weight:700;color:var(--tx2);white-space:nowrap}

/* ── TOAST ────────────────────────────────────────────────── */
#toast{
  position:fixed;left:50%;bottom:78px;transform:translateX(-50%) translateY(20px);
  background:var(--gxd);color:#fff;padding:11px 18px;border-radius:999px;
  font-size:12.5px;font-weight:700;z-index:3000;opacity:0;pointer-events:none;
  transition:all .25s;box-shadow:var(--shl);max-width:88vw;text-align:center;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.err{background:var(--red)}

/* ── OVERLAY DE CARREGAMENTO ──────────────────────────────── */
.tela-carregando{
  position:fixed;inset:0;z-index:2500;background:rgba(242,245,242,.93);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;opacity:0;pointer-events:none;transition:opacity .2s;
}
.tela-carregando.show{opacity:1;pointer-events:all}

/* ── A MARCA GIRANDO ──
   Um cartão de duas faces: logo institucional na frente, âmbar no verso. O
   `perspective` fica NO PALCO e o `preserve-3d` NO CARTÃO — perspectiva
   aplicada ao próprio elemento não afeta a transformação dele, só a dos
   filhos, e sem `preserve-3d` as faces são achatadas no plano do cartão e as
   duas aparecem ao mesmo tempo. Sem esses dois, o giro sai chapado, como um
   `scaleX`, que é o defeito clássico deste efeito. */
.carregando-marca{
  position:relative;width:82px;height:82px;perspective:600px;flex:0 0 auto;
}
.carregando-marca>.marca-face{
  position:absolute;width:82px;height:82px;
}
/* O cartão é o próprio par de faces: giram juntas porque compartilham a mesma
   animação e o mesmo instante de início. */
.marca-face{
  animation:giro3d 2.4s infinite ease-in-out;
  backface-visibility:hidden;          /* cada face só aparece de frente */
  transform-style:preserve-3d;
}
/* Duas voltas defasadas de meia volta: quando a frente vira de costas e some,
   o verso está chegando de frente. A troca das duas logos acontece POR CAUSA
   do giro, e não por um segundo efeito piscando junto. */
@keyframes giro3d{
  0%  {transform:rotateY(0);      opacity:.7}
  50% {transform:rotateY(180deg); opacity:1}
  100%{transform:rotateY(360deg); opacity:.7}
}
@keyframes giro3dVerso{
  0%  {transform:rotateY(180deg); opacity:.7}
  50% {transform:rotateY(360deg); opacity:1}
  100%{transform:rotateY(540deg); opacity:.7}
}
/* O verso entra meia volta adiantado — de costas quando a frente está de
   frente, e vice-versa. O `transform` fora da animação é o estado de partida,
   para o verso já nascer virado mesmo antes do primeiro quadro. */
.marca-verso{transform:rotateY(180deg);animation-name:giro3dVerso}

/* Movimento é conforto, não requisito: quem pediu menos animação vê a marca
   parada. A informação — "está carregando" — está na frase, e continua
   inteira. */
@media (prefers-reduced-motion: reduce){
  .marca-face{animation:none}
  .marca-verso{opacity:0}
}

.tela-carregando-txt{font-size:12.5px;font-weight:700;color:var(--tx2)}

/* ── MARCADOR DE POSIÇÃO DO FISCAL ────────────────────────── */
.eu-pin{
  width:16px;height:16px;border-radius:50%;background:var(--blue);
  border:3px solid #fff;box-shadow:0 0 0 2px var(--blue),0 2px 6px rgba(0,0,0,.3);
}

/* ── LOGIN ────────────────────────────────────────────────────
   Cartão branco sobre gradiente verde de marca, como no AppPOSTURAS.
   `body.login-bg` sobrescreve o overflow:hidden do corpo do mapa, senão a
   tela de login não rola em aparelho baixo com o teclado aberto.
   ─────────────────────────────────────────────────────────── */
body.login-bg{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--gxd) 0%,var(--gd) 50%,var(--g) 100%);
  padding:20px;overflow:auto;
}
.login-card{
  background:#fff;border-radius:20px;padding:38px 30px;width:100%;max-width:390px;
  box-shadow:0 20px 60px rgba(0,0,0,.28);
}
.login-logo{text-align:center;margin-bottom:26px}
.login-seal{
  width:110px;height:110px;display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;
}
.login-logo h1{font-size:17px;font-weight:800;color:var(--gd)}
.login-logo p{
  font-size:11px;color:var(--tx3);margin-top:3px;
  text-transform:uppercase;letter-spacing:.06em;
}

/* Campo de senha com botão de olho */
.pass-wrap{position:relative}
.pass-wrap input{padding-right:38px!important}
.pass-olho{
  position:absolute;right:-4px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;color:var(--tx3);padding:4px;
  display:flex;align-items:center;
}
.pass-olho:hover{color:var(--g)}
.pass-olho svg{width:18px;height:18px}

.lembrar{
  display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tx2);
  margin-top:12px;cursor:pointer;
}
.lembrar input{width:15px;height:15px;accent-color:var(--g)}

/* Erro de autenticação — mesma linguagem visual do .campo-invalido */
.alerta-erro{
  display:flex;align-items:center;gap:9px;background:var(--rlt);
  border:1.5px solid #EF9A9A;color:var(--red);border-radius:var(--r);
  padding:10px 13px;margin-bottom:16px;font-size:12.5px;font-weight:600;
}
.alerta-erro svg{width:17px;height:17px;flex-shrink:0}

.login-rodape{
  font-size:11px;color:var(--tx3);text-align:center;margin-top:20px;line-height:1.5;
}

/* Validação: o cartão inteiro fica vermelho, não só o input */
.field:has(.campo-invalido){border-color:var(--red)!important;background:var(--rlt)!important}

/* ── DATA E HORA — padrão único obrigatório ───────────────────
   Regra herdada do AppPOSTURAS, válida em TODA tela deste sistema: campo de
   data é sempre <input type=date> nativo dentro do overlay .date-ov. O input
   fica com texto transparente (preservando clique, foco e calendário nativos)
   e o <span> por cima mostra dd/mm/aaaa — nunca o formato do sistema
   operacional, que no iOS sairia como "21 de jul. de 2026".

   Data + hora são DOIS inputs nativos (date + time) capturados visualmente
   como um campo só, dentro de .data-hora-combo. Nunca datetime-local, que
   mistura os dois no formato do SO sem alternativa de overlay.
   ─────────────────────────────────────────────────────────── */
.date-ov{position:relative;display:block}
.date-ov input[type="date"]{
  width:100%;border:none;background:none;font-family:inherit;font-size:14px;
  padding:0;color:transparent;
}
.date-ov input[type="date"]:focus{outline:none}
.date-ov input[type="date"]::-webkit-date-and-time-value{color:transparent}
.date-ov .date-ov-txt{
  position:absolute;left:0;top:0;pointer-events:none;font-size:14px;
  color:var(--tx);font-weight:600;line-height:inherit;
}
.date-ov .date-ov-txt.vazio{color:var(--tx3);font-weight:400}

.data-hora-combo{
  display:flex;align-items:center;gap:8px;
  background:var(--sur);border:1.5px solid var(--bord);border-radius:var(--r);
  padding:7px 11px;
}
.data-hora-combo:focus-within{border-color:var(--g);box-shadow:0 0 0 3px rgba(0,108,22,.1)}
.data-hora-combo .rot{
  font-size:10px;font-weight:700;color:var(--tx3);text-transform:uppercase;
  letter-spacing:.04em;white-space:nowrap;
}
.data-hora-combo .campos{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.data-hora-combo .date-ov{flex:1;min-width:0}
.data-hora-combo .sep{width:1px;height:18px;background:var(--bord);flex-shrink:0}
.data-hora-combo input[type="time"]{
  border:none;background:none;font-family:inherit;font-size:14px;
  font-weight:600;color:var(--tx);padding:0;width:74px;
}
.data-hora-combo input[type="time"]:focus{outline:none}

/* ── CHECKLIST DE IRREGULARIDADES ─────────────────────────── */
.checklist{display:flex;flex-direction:column;gap:6px;max-height:290px;overflow-y:auto;padding-right:2px}
.chk-item{
  display:flex;align-items:flex-start;gap:10px;padding:9px 11px;cursor:pointer;
  border:1.5px solid var(--bord);border-radius:var(--r);background:var(--sur);
  transition:all .13s;
}
.chk-item:hover{border-color:var(--gm)}
.chk-item.marcado{border-color:var(--g);background:var(--gl)}
.chk-item input{width:16px;height:16px;accent-color:var(--g);margin-top:1px;flex-shrink:0}
.chk-item .desc{flex:1;font-size:13px;line-height:1.35;color:var(--tx)}
.chk-item .cod{font-size:10px;color:var(--tx3);font-weight:700;letter-spacing:.03em}

/* ── HISTÓRICO DO IMÓVEL ──────────────────────────────────── */
.historico{display:flex;flex-direction:column;gap:9px;max-height:260px;overflow-y:auto}
.hist-item{
  border-left:3px solid var(--gm);padding:9px 0 9px 11px;position:relative;
}
.hist-item.irregular{border-left-color:var(--red)}
.hist-item.regular{border-left-color:var(--g)}
.hist-topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:3px}
.hist-data{font-size:12.5px;font-weight:800;color:var(--tx)}
.hist-meta{font-size:11px;color:var(--tx3)}
.hist-irr{font-size:11.5px;color:var(--tx2);margin-top:4px;line-height:1.45}
.hist-obs{font-size:11.5px;color:var(--tx2);margin-top:3px;font-style:italic}
.vazio-msg{
  font-size:12.5px;color:var(--tx3);text-align:center;padding:16px 8px;
  border:1.5px dashed var(--bord);border-radius:var(--r);
}

/* ── ANEXOS / EVIDÊNCIAS ──────────────────────────────────── */
.sec-title-row{display:flex;align-items:center;gap:10px;margin:16px 0 10px}
.sec-title-row .sec-title{margin:0;flex:1;min-width:0}
.sec-title-acao{flex:0 0 auto;white-space:nowrap}
.anexos{display:flex;flex-direction:column;gap:7px}
.anexo-item{
  display:grid;grid-template-columns:46px 1fr auto;gap:10px;align-items:center;
  border:1.5px solid var(--bord);border-radius:var(--r);padding:7px 9px;
  background:var(--sur);position:relative;min-height:56px;
}
/* A miniatura é absoluta de propósito: fora do fluxo, não entra no cálculo da
   altura da linha (que vem dos campos), então foto em pé não estica a linha. */
.anexo-thumb{position:relative;width:46px;height:44px;border-radius:7px;overflow:hidden;background:var(--blt)}
.anexo-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.anexo-thumb .pdf{
  display:flex;align-items:center;justify-content:center;height:100%;
  font-size:9.5px;font-weight:800;color:var(--red);
}
.anexo-info{min-width:0}
.anexo-info .t{font-size:12.5px;font-weight:700;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anexo-info .s{font-size:10.5px;color:var(--tx3)}

/* ── IDENTIFICAÇÃO DO USUÁRIO NO CABEÇALHO ────────────────── */
.usuario-topo{
  margin-left:auto;display:flex;align-items:center;gap:9px;
}
.usuario-topo .nome{font-size:11.5px;font-weight:700;line-height:1.25;text-align:right}
.usuario-topo .cargo{font-size:9.5px;opacity:.8;text-transform:uppercase;letter-spacing:.05em}
.btn-sair{
  background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.3);
  color:#fff;border-radius:999px;padding:6px 9px;cursor:pointer;
  display:flex;align-items:center;font-family:inherit;
}
.btn-sair:hover{background:rgba(255,255,255,.26)}
.btn-sair svg{width:15px;height:15px}

@media(max-width:420px){
  .modal{padding:20px 16px}
  .acoes .btn{font-size:12px;padding:11px 10px}
  .usuario-topo .nome{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ── CRÉDITO DA IMAGEM AÉREA ──
   Fica no canto, discreto, mas legível: traz o fornecedor e o ANO da imagem
   ("Imagens ©2026 Airbus, Maxar Technologies"), que é a única informação de
   tempo que a API do Google devolve. Numa fiscalização isso importa — a foto
   é o que o fiscal compara com o que viu em campo. */
.leaflet-control-attribution{
  background:rgba(255,255,255,.74);backdrop-filter:blur(3px);
  font-size:9.5px;line-height:1.5;color:var(--tx3);
  padding:2px 7px;border-radius:7px 0 0 0;font-family:inherit;
}
.leaflet-control-attribution a{color:var(--tx2);text-decoration:none}