:root{
  --brand-600:#0ea5a3; --brand-700:#0b8684;
  --accent-600:#2563eb;
  --bg:#ffffff; --bg-soft:#f8fafc;
  --text:#0f172a; --text-soft:#374151;
  --muted:#6b7280; --line:#e5e7eb; --card:#ffffff;
  --success:#16a34a; --warn:#f59e0b; --error:#dc2626;
  --radius:12px;
  --shadow-1:0 1px 2px rgba(15,23,42,.06),0 1px 1px rgba(15,23,42,.04);
  --shadow-2:0 6px 16px rgba(15,23,42,.08);
  --shadow-3:0 12px 24px rgba(15,23,42,.12);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220; --bg-soft:#0e1628; --text:#f8fafc; --text-soft:#e5e7eb;
    --card:#0e1628; --line:#1f2937;
    --muted:#94a3b8;
    --shadow-1:0 1px 2px rgba(0,0,0,.35);
    --shadow-2:0 6px 16px rgba(0,0,0,.45);
    --shadow-3:0 12px 24px rgba(0,0,0,.55);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; padding-top:68px; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text); background:var(--bg); line-height:1.45;
}

.container{max-width:1200px;margin:0 auto;padding:0 16px}

/* header */
.app-header{
  position:fixed; top:0; left:0; right:0; width:100%; z-index:9999; backdrop-filter:saturate(180%) blur(8px);
  background-color:color-mix(in oklab, var(--bg) 85%, transparent);
  border-bottom:1px solid var(--line);
}
.app-bar{
  display:flex; align-items:center; gap:12px; padding:12px 0;
}
.brand{
  display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.3px;
}
.brand-logo{
  width:36px;height:36px; border-radius:10px; background:linear-gradient(135deg,var(--brand-600),var(--brand-700));
  box-shadow:var(--shadow-2);
}
.brand span{font-size:18px}

/* search & controls */
.searchbar{
  flex:1; display:flex; gap:8px; align-items:center;
  background:var(--bg-soft); padding:8px; border-radius:12px; border:1px solid var(--line);
}
.input, select{
  width:100%; border:none; background:transparent; outline:none; color:var(--text);
  font-size:14px; padding:10px 12px; border-radius:10px;
}
.input::placeholder{color:var(--muted)}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px;
  font-weight:600; border:1px solid var(--line); background:var(--card); cursor:pointer;
  box-shadow:var(--shadow-1); transition:transform .06s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{box-shadow:var(--shadow-2)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--brand-600); color:white; border-color:transparent}
.btn.primary:hover{background:var(--brand-700)}
.btn.ghost{background:transparent}

.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:6px 8px;border-radius:999px;background:var(--bg-soft);border:1px solid var(--line);color:var(--text-soft)}

/* layout grid */
.app-main{display:grid; grid-template-columns: 320px 1fr; gap:16px; padding:16px}
@media (max-width: 1000px){ .app-main{grid-template-columns:1fr} }

/* side panel (filtros/resultados) */
.panel{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-1);
  padding:14px; display:flex; flex-direction:column; gap:12px; min-height:calc(100dvh - 120px);
}
.panel h2{margin:2px 0 6px;font-size:16px}
.field{display:flex; flex-direction:column; gap:6px}
.label{font-size:12px; color:var(--muted); font-weight:600; letter-spacing:.2px}
.separator{height:1px;background:var(--line);margin:4px 0}

/* map area */
.map-wrap{position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-1); min-height:calc(100dvh - 120px); z-index:1}
#map{height:100%; width:100%; position:relative; z-index:1}

/* cards / tables */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-1); padding:14px}
.table{width:100%; border-collapse:separate; border-spacing:0; font-size:14px}
.table th, .table td{padding:10px 12px; border-bottom:1px solid var(--line)}
.table th{text-align:left; color:var(--muted); font-weight:600}
.table tr:hover td{background:var(--bg-soft)}

/* alerts */
.alert{display:flex; gap:10px; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--bg-soft)}
.alert.success{border-color:color-mix(in oklab,var(--success) 30%, var(--line));}
.alert.warn{border-color:color-mix(in oklab,var(--warn) 30%, var(--line));}
.alert.error{border-color:color-mix(in oklab,var(--error) 30%, var(--line));}

/* links */
a{color:var(--accent-600); text-decoration:none}
a:hover{text-decoration:underline}

/* utilities */
.row{display:flex; gap:8px; align-items:center}
.gap-4{gap:16px} .gap-6{gap:24px}
.mt-2{margin-top:8px} .mt-4{margin-top:16px} .mt-6{margin-top:24px}
.hidden{display:none}

/* leaflet tweaks */
.leaflet-container{font:14px Inter, system-ui, sans-serif}
.leaflet-control-zoom a{border-radius:10px}
.leaflet-popup-content-wrapper, .leaflet-popup-tip{border-radius:10px}

@media (max-width: 768px){
  .app-bar{
    flex-direction:column;
    align-items:stretch;
    gap:16px;
    padding:16px 0;
  }
  .brand{
    justify-content:space-between;
  }
  .searchbar{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:12px;
  }
  .searchbar .input,
  .searchbar select{
    width:100%;
  }
  .searchbar .btn{
    width:100%;
    justify-content:center;
  }
  .app-main{
    padding:12px;
  }
  .panel{
    min-height:auto;
  }
  .map-wrap{
    min-height:60vh;
  }
}

@media (max-width: 420px){
  .brand span{
    font-size:16px;
  }
  .brand-logo{
    width:32px;
    height:32px;
  }
  .badge{
    font-size:11px;
  }
  .btn{
    padding:10px 12px;
  }
}

.field-inline{
  position:relative;
  width:100%;
}
.suggestions{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  margin-top:6px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow-2);
  max-height:240px;
  overflow-y:auto;
  z-index:60;
  padding:6px;
}
.suggestion-item{
  display:block;
  width:100%;
  padding:8px 10px;
  text-align:left;
  background:transparent;
  border:none;
  border-radius:8px;
  color:var(--text);
  font-size:14px;
  cursor:pointer;
}
.suggestion-item:hover,
.suggestion-item:focus{
  background:var(--bg-soft);
}
.suggestion-empty{
  color:var(--muted);
  font-size:13px;
  padding:8px 6px;
}
.checkbox-target{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--text-soft);
  margin-top:12px;
}
.checkbox-target input{
  width:16px;
  height:16px;
}

.linkgd-cluster{
  background:transparent;
  border-radius:999px;
}
.linkgd-cluster div{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:999px;
  color:#fff;
  font-weight:600;
  box-shadow:var(--shadow-2);
  border:2px solid rgba(255,255,255,0.9);
}
.linkgd-cluster span{
  font-size:14px;
  line-height:1;
}

#cardTiposGD2 h3{
  font-size:18px;
  font-weight:600;
  margin:0 0 12px;
}
#cardTiposGD2 p{
  margin:8px 0;
  font-size:14px;
  color:var(--text-soft);
}
#cardTiposGD2 strong{
  color:var(--text);
}

.legend-card{
  background:#F8FAFC;
  border:1px solid #E2E8F0;
  border-radius:8px;
  padding:14px;
}
.legend-card h3{
  margin:0 0 12px;
  font-size:14px;
  font-weight:600;
  color:var(--text);
}
.legend-entry{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-bottom:10px;
}
.legend-entry:last-child{
  margin-bottom:0;
}
.legend-entry strong{
  font-size:13px;
  font-weight:600;
  color:var(--text);
}
.legend-entry span{
  font-size:13px;
  font-weight:400;
  color:var(--text-soft);
  line-height:1.45;
}
.legend-icon{
  position:relative;
  width:18px;
  height:18px;
  border-radius:50% 50% 50% 50%;
  background:#9ca3af;
  flex-shrink:0;
  margin-top:2px;
}
.legend-icon::after{
  content:'';
  position:absolute;
  bottom:-6px;
  left:50%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:8px solid;
}
.legend-acl{
  background:#16A34A;
}
.legend-acl::after{
  border-top-color:#16A34A;
}
.legend-acr{
  background:#2563EB;
}
.legend-acr::after{
  border-top-color:#2563EB;
}
.legend-gc{
  background:#F59E0B;
}
.legend-gc::after{
  border-top-color:#F59E0B;
}


/* Marcadores de estado na visão Brasil */
.estado-marker {
  border: none !important;
  background: transparent !important;
}

.estado-marker > div {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.estado-marker:hover > div {
  transform: scale(1.1);
  box-shadow: 0 6px 12px rgba(0,0,0,0.3) !important;
}

/* ========== PAINEL LATERAL RETRÁTIL ========== */

/* Transição suave do painel */
.panel {
  transition: transform 0.3s ease, opacity 0.3s ease, margin-left 0.3s ease;
  position: relative;
  z-index: 100;
}

/* Estado collapsed - esconde o painel */
.panel.collapsed {
  transform: translateX(-100%);
  opacity: 0;
  margin-left: -320px;
  pointer-events: none;
}

/* Quando body tem sidebar-collapsed, ajusta o grid */
body.sidebar-collapsed .app-main {
  grid-template-columns: 0 1fr !important;
}

/* Mobile - esconde completamente quando collapsed */
@media (max-width: 768px) {
  .panel.collapsed {
    display: none;
  }
}

/* Botão hambúrguer */
.btn-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text);
  margin-right: 12px;
  transition: background 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}

.btn-menu-toggle:hover {
  background: rgba(37, 99, 235, 0.1);
  transform: scale(1.05);
}

.btn-menu-toggle:active {
  transform: scale(0.95);
}

body.dark-mode .btn-menu-toggle:hover {
  background: rgba(255,255,255,0.1);
}

/* Ícone SVG do hambúrguer */
.btn-menu-toggle svg {
  transition: transform 0.3s ease;
}

body.sidebar-collapsed .btn-menu-toggle svg {
  transform: rotate(90deg);
}

/* ========== GARANTIR Z-INDEX DO HEADER SEMPRE NO TOPO ========== */

/* Header sempre acima de tudo e FIXO */
.app-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
}

/* Controles do Leaflet ficam abaixo do header */
.leaflet-control-container {
  z-index: 100 !important;
}

.leaflet-pane {
  z-index: 1 !important;
}

.leaflet-top,
.leaflet-bottom {
  z-index: 100 !important;
}

/* Ajustar padding do body para mobile */
@media (max-width: 768px) {
  body {
    padding-top: 72px;
  }
}

/* Marcadores de município (zoom médio) */
.municipio-marker {
  border: none !important;
  background: transparent !important;
}

.municipio-marker > div {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.municipio-marker:hover > div {
  transform: scale(1.15);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
}

/* Campo de município desabilitado */
#municipio:disabled {
  background: var(--bg) !important;
  opacity: 0.6;
  cursor: not-allowed;
}

#btnBuscar:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Cluster de municípios customizado */
.marker-cluster-custom {
  border: none !important;
  background: transparent !important;
}