/* ============================================================
   SIGH v1.0 — estilo operacional
   Prioridades: legibilidade sob sol, alvos de toque grandes,
   zero download de fontes (fonte do sistema = velocidade).
   ============================================================ */
:root{
  --vermelho-bbm:#B3261E;
  --grafite:#1A1D21;
  --st-amarelo:#F5B301;
  --st-verde:#1E8E3E;
  --st-vermelho:#D93025;
  --gps-azul:#1A73E8;
  --branco:#FFFFFF;
  --cinza:#5F6368;
  --borda:#DADCE0;
  --sombra:0 2px 10px rgba(0,0,0,.28);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overflow:hidden;
  font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--grafite)}
button{font-family:inherit;cursor:pointer}
.oculto{display:none !important}

#mapa{position:fixed;inset:0;z-index:0;background:#DDD}

/* ---------- barra superior ---------- */
#topo{position:fixed;top:0;left:0;right:0;z-index:1000;
  background:var(--grafite);color:var(--branco);
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 10px;padding-top:calc(6px + env(safe-area-inset-top));
  box-shadow:var(--sombra)}
.marca{display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:.12em;font-size:17px}
.marca img{width:26px;height:26px;border-radius:6px}
.topo-acoes{display:flex;gap:6px}
.btn-icone{width:42px;height:42px;border:none;border-radius:10px;
  background:rgba(255,255,255,.12);color:var(--branco);font-size:19px;line-height:1}
.btn-icone:active{background:rgba(255,255,255,.28)}
#caixaBusca{position:absolute;top:100%;left:0;right:0;display:flex;gap:8px;
  padding:10px;background:var(--grafite)}
#caixaBusca input{flex:1;font-size:16px;padding:12px;border:none;border-radius:10px}
#caixaBusca button{padding:0 20px;border:none;border-radius:10px;
  background:var(--vermelho-bbm);color:var(--branco);font-weight:700;font-size:16px}

#avisoConexao{position:fixed;top:calc(56px + env(safe-area-inset-top));left:0;right:0;z-index:900;
  background:var(--st-amarelo);color:#3D2E00;text-align:center;
  padding:7px 12px;font-size:13.5px;font-weight:600}

/* ---------- GPS ---------- */
#btnGps{position:fixed;right:12px;bottom:calc(86px + env(safe-area-inset-bottom));z-index:1000;
  width:56px;height:56px;border-radius:50%;border:none;font-size:26px;
  background:var(--branco);color:var(--gps-azul);box-shadow:var(--sombra)}
#btnGps.ativo{background:var(--gps-azul);color:var(--branco)}
#btnGps.erro{color:var(--cinza)}

/* ---------- legenda / filtros ---------- */
#legenda{position:fixed;left:0;right:0;bottom:0;z-index:1000;
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
  padding:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom));
  pointer-events:none}
.chip{pointer-events:auto;display:flex;align-items:center;gap:7px;
  min-height:44px;padding:0 15px;border-radius:22px;border:none;
  background:var(--branco);box-shadow:var(--sombra);
  font-size:15px;font-weight:700;color:var(--grafite);opacity:.45}
.chip.ativo{opacity:1}
.ponto{width:15px;height:15px;border-radius:50%;border:2px solid var(--branco);
  box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.ponto.amarelo{background:var(--st-amarelo)}
.ponto.verde{background:var(--st-verde)}
.ponto.vermelho{background:var(--st-vermelho)}

/* ---------- marcadores ---------- */
.h-tooltip{font-weight:700}
.popup-h{min-width:210px;font-size:14.5px;line-height:1.45}
.popup-h .p-cod{font-size:16.5px;font-weight:800}
.popup-h .p-status{display:inline-block;padding:2px 10px;border-radius:12px;
  color:var(--branco);font-weight:700;font-size:12.5px;margin:3px 0}
.popup-h .p-status.AMARELO{background:var(--st-amarelo);color:#3D2E00}
.popup-h .p-status.VERDE{background:var(--st-verde)}
.popup-h .p-status.VERMELHO{background:var(--st-vermelho)}
.popup-h .p-meta{color:var(--cinza);font-size:13px;margin:2px 0 8px}
.popup-h a.p-foto{display:inline-block;margin-bottom:8px;font-weight:600}
.popup-h .p-acoes{display:flex;gap:8px}
.popup-h .p-acoes a,.popup-h .p-acoes button{flex:1;text-align:center;text-decoration:none;
  padding:12px 6px;border-radius:10px;border:none;font-weight:800;font-size:14.5px}
.popup-h .p-rota{background:var(--gps-azul);color:var(--branco)}
.popup-h .p-vistoriar{background:var(--vermelho-bbm);color:var(--branco)}

/* ---------- modais ---------- */
.modal{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.55);
  display:flex;align-items:flex-end;justify-content:center}
.modal-caixa{background:var(--branco);width:100%;max-width:520px;
  border-radius:18px 18px 0 0;padding:16px 16px calc(18px + env(safe-area-inset-bottom));
  max-height:92vh;overflow-y:auto}
@media(min-width:640px){.modal{align-items:center}.modal-caixa{border-radius:18px}}
.modal-topo{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.modal-titulo{font-size:19px;font-weight:800}
.modal-sub{color:var(--cinza);font-size:14px;margin-top:2px}
.btn-fechar{border:none;background:#EEE;border-radius:50%;width:40px;height:40px;font-size:22px;line-height:1}

.pergunta{font-size:19px;font-weight:800;margin:14px 0 10px;text-align:center}
.linha-botoes{display:flex;gap:12px}
.btn-grande{flex:1;padding:22px 0;font-size:23px;font-weight:900;border-radius:14px;
  border:3px solid transparent;color:var(--branco)}
.btn-sim{background:var(--st-verde)}
.btn-nao{background:var(--st-vermelho)}
.btn-grande.escolhido{border-color:var(--grafite);box-shadow:0 0 0 3px rgba(26,29,33,.2)}
.btn-grande:not(.escolhido).apagado{opacity:.35}
.btn-medio{flex:1;padding:16px 0;font-size:18px;font-weight:800;border-radius:12px;
  border:3px solid var(--borda);background:var(--branco);color:var(--grafite)}
.btn-medio.escolhido{border-color:var(--gps-azul);background:#E8F0FE;color:var(--gps-azul)}

.rotulo{display:block;font-weight:700;font-size:15px;margin:16px 0 6px}
.dica{color:var(--cinza);font-weight:500;font-size:13px}
textarea,input[type=text],input[type=password]{width:100%;font-size:16px;padding:12px;
  border:2px solid var(--borda);border-radius:10px;font-family:inherit}
textarea:focus,input:focus{outline:none;border-color:var(--gps-azul)}

.btn-foto{width:100%;padding:15px;font-size:17px;font-weight:700;border-radius:12px;
  border:2px dashed var(--cinza);background:#F8F9FA;color:var(--grafite)}
#fotoPrevia{margin-top:8px;position:relative}
#fotoPrevia img{width:100%;max-height:230px;object-fit:cover;border-radius:12px;display:block}
#btnRemoverFoto{position:absolute;top:8px;right:8px;border:none;border-radius:8px;
  background:rgba(0,0,0,.65);color:var(--branco);padding:7px 12px;font-weight:700}

.btn-registrar{width:100%;margin-top:18px;padding:17px;font-size:18px;font-weight:900;
  border:none;border-radius:14px;background:var(--vermelho-bbm);color:var(--branco)}
.btn-registrar:disabled{background:#C9CBCE;color:#7A7D80}
.envio-status{margin-top:10px;font-weight:600;text-align:center;min-height:20px}
.envio-status.erro{color:var(--st-vermelho)}
.envio-status.ok{color:var(--st-verde)}

/* ---------- gestor ---------- */
.modal-caixa.gestor{max-width:640px}
.g-secao{margin:14px 0;font-size:15px}
.g-titulo{font-weight:800;font-size:16px;margin-bottom:4px}
.g-nota{color:var(--cinza);font-size:13.5px;margin:6px 0}
.g-lista{max-height:180px;overflow-y:auto;border:1px solid var(--borda);border-radius:10px;
  padding:8px;font-size:13.5px}
.g-lista div{padding:5px 4px;border-bottom:1px solid #F0F0F0}
.btn-gestor{display:block;width:100%;margin:8px 0;padding:13px;font-size:15.5px;font-weight:700;
  border-radius:10px;border:2px solid var(--grafite);background:var(--branco)}
#gResumo table{width:100%;border-collapse:collapse;font-size:13.5px}
#gResumo th,#gResumo td{text-align:left;padding:5px 6px;border-bottom:1px solid #EEE}
#gResumo th{font-size:12px;color:var(--cinza);text-transform:uppercase}

/* ---------- toast ---------- */
#toast{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(84px + env(safe-area-inset-bottom));z-index:3000;
  background:var(--grafite);color:var(--branco);padding:13px 20px;border-radius:12px;
  font-weight:700;font-size:15px;box-shadow:var(--sombra);max-width:92vw;text-align:center}

/* Leaflet: garantir mapa por trás da UI */
.leaflet-container{font:inherit}
.leaflet-top{top:calc(60px + env(safe-area-inset-top))}

@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important}}