/* Consulta de setores - identidade visual Ambiental (ambiental.sc). Mobile-first. */

:root {
  /* Cores principais (identidade visual) */
  --color-blue: #164194;
  --color-blue-dark: #003087;
  --color-green: #A8C950;
  --color-green-mid: #95C11F;
  --color-green-dark: #9BBF3B;
  --color-green-natural: #63B869;

  /* Neutras */
  --color-white: #FFFFFF;
  --color-gray-light: #F7F7F7;
  --color-gray-mid: #808080;
  --color-gray-blue: #7C91BB;
  --color-text: #312D31;
  --color-black: #000000;

  /* Derivadas (apoio de interface) */
  --color-text-soft: #5C575C;
  --color-blue-tint: #E8EEF9;
  --color-border: #E1E1E1;
  --color-border-strong: #B9BEC6;
  --color-shadow: rgba(22, 30, 60, 0.22);

  --radius: 5px;
  --radius-card: 8px;
  --shadow-1: 0 1px 4px var(--color-shadow);
  --shadow-2: 0 2px 12px var(--color-shadow);

  --app-bar-h: 56px;
  --painel-w: 400px;
  --alca-h: 68px;
  --sheet-h: min(68dvh, 640px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
  margin: 0;
  overscroll-behavior: none; /* sem pull-to-refresh ao arrastar a gaveta para baixo */
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--color-text);
  background: var(--color-white);
  text-transform: none;
  letter-spacing: normal;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

button,
input,
select {
  font-family: inherit;
}

:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sem-js {
  margin: 0;
  padding: 24px;
  text-align: center;
}

/* ---------- Barra superior ---------- */

.app-bar {
  position: relative;
  z-index: 1200;
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  height: calc(var(--app-bar-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) max(8px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
  color: var(--color-white);
  background: var(--color-blue);
}

.app-bar__marca {
  flex: none;
  display: block;
  line-height: 0;
}

.app-bar__marca img {
  display: block;
  width: auto;
  height: 30px;
}

.app-bar__titulo {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 16.4px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Botões ---------- */

.icon-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  color: inherit;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.icon-btn--barra:hover {
  background: rgba(255, 255, 255, 0.16);
}

.icon-btn--barra:focus-visible {
  outline-color: var(--color-white);
}

.icon-btn--mapa {
  color: var(--color-blue);
  background: var(--color-white);
  box-shadow: var(--shadow-2);
}

.icon-btn--mapa:hover {
  background: var(--color-blue-tint);
}

.btn-primario {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 15px;
  border: 0;
  border-radius: var(--radius);
  color: var(--color-white);
  background: var(--color-green);
  font-size: 16px;
  font-weight: 600;
  text-transform: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-primario:hover {
  background: var(--color-green-dark);
}

.btn-primario .ti {
  --ti-size: 1.3em;
}

.btn-link {
  padding: 0;
  border: 0;
  color: var(--color-blue);
  background: none;
  font-size: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- Formulário ---------- */

.campo {
  min-width: 0;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
}

.campo__rotulo {
  display: block;
  margin: 0 0 4px;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
}

.controle {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  color: var(--color-text);
  background: var(--color-white);
  font-size: 16px; /* >= 16px evita o zoom automático do iOS ao focar */
  font-weight: 400;
}

.controle:focus {
  border-color: var(--color-blue);
}

.controle:disabled {
  color: var(--color-gray-mid);
  background: var(--color-gray-light);
}

.controle--com-icone {
  padding-left: 40px;
}

.entrada {
  position: relative;
}

.entrada__icone {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: var(--color-gray-mid);
  pointer-events: none;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  color: var(--color-text);
  background: var(--color-white);
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.chip:hover {
  background: var(--color-blue-tint);
}

.chip[aria-pressed='true'] {
  border-color: var(--color-blue);
  color: var(--color-white);
  background: var(--color-blue);
}

/* ---------- Layout: mapa + painel ---------- */

.layout {
  position: relative;
  flex: 1;
  display: flex;
  min-height: 0;
}

.mapa-area {
  position: relative;
  flex: 1;
  min-width: 0;
}

#mapa {
  position: absolute;
  inset: 0;
  background: var(--color-gray-light);
}

/* Celular: o painel é uma "gaveta" (bottom sheet) que sobe sobre o mapa. */
.painel {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  height: var(--sheet-h);
  padding-bottom: var(--safe-bottom);
  border-radius: 16px 16px 0 0;
  background: var(--color-white);
  box-shadow: 0 -4px 16px var(--color-shadow);
  transform: translateY(calc(100% - var(--alca-h) - var(--safe-bottom)));
  transition: transform 0.28s ease;
}

.painel[data-aberto='true'] {
  transform: none;
}

.painel__topo {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: var(--alca-h);
  padding: 0 16px 8px;
  cursor: pointer;
  touch-action: none; /* o gesto de arrastar é nosso; sem isso o navegador cancela o ponteiro (pointercancel) */
}

.painel__alca {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 30px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.painel__barra {
  width: 40px;
  height: 5px;
  border-radius: 3px;
  background: var(--color-border-strong);
}

.painel__resumo {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--color-blue);
}

.painel__conteudo {
  flex: 1;
  min-height: 0;
  padding: 4px 16px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.painel__filtros {
  background: var(--color-white);
}

/* ---------- Lista de setores ---------- */

.lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lista > li {
  border-top: 1px solid var(--color-border);
  content-visibility: auto;
  contain-intrinsic-size: auto 78px;
}

.setor {
  display: flex;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 12px 8px 12px 4px;
  border: 0;
  border-radius: var(--radius);
  color: inherit;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.setor:hover {
  background: var(--color-gray-light);
}

.setor[aria-current='true'] {
  background: var(--color-blue-tint);
}

.setor__cor {
  flex: none;
  align-self: stretch;
  width: 6px;
  border-radius: 3px;
  background: var(--cor, var(--color-green));
}

.setor__corpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.setor__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.setor__tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px 1px 4px;
  border-radius: 999px;
  color: var(--color-blue);
  background: var(--color-blue-tint);
  font-size: 11px;
  font-weight: 400;
}

.setor__tag .ti {
  margin-right: 2px;
}

.setor__cidade {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text);
}

.setor__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-soft);
}

.setor__meta .ti {
  margin-right: 3px;
}

.lista-vazia {
  margin: 24px 0;
  text-align: center;
  color: var(--color-text-soft);
}

/* ---------- Controles flutuantes do mapa ---------- */

.busca-endereco {
  position: absolute;
  z-index: 1000;
  top: 12px;
  left: 12px;
  right: 68px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: var(--radius-card);
  background: var(--color-white);
  box-shadow: var(--shadow-2);
}

.busca-endereco .entrada__icone {
  left: 18px;
  z-index: 1;
}

.busca-endereco .controle {
  flex: 1;
  min-width: 0;
}

.mapa-ferramentas {
  position: absolute;
  z-index: 1000;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aviso {
  position: absolute;
  z-index: 1050;
  top: 76px;
  left: 50%;
  width: min(calc(100% - 24px), 440px);
  /* não passa por baixo da gaveta recolhida (celular) */
  max-height: calc(100% - 76px - var(--alca-h) - 16px);
  padding: 16px;
  overflow-y: auto;
  border-radius: var(--radius-card);
  background: var(--color-white);
  box-shadow: var(--shadow-2);
  transform: translateX(-50%);
}

.aviso--rapido {
  z-index: 1060;
}

.aviso__titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 16.4px;
  font-weight: 700;
  color: var(--color-blue);
}

.aviso__texto {
  margin: 0 0 12px;
  font-weight: 400;
}

.aviso__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cidades-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.cidades-links a {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-blue);
  font-weight: 600;
  text-decoration: none;
}

.cidades-links a:hover {
  background: var(--color-blue-tint);
}

.girando {
  animation: giro 1s linear infinite;
}

@keyframes giro {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Leaflet ---------- */

.leaflet-container {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
}

.leaflet-bar a,
.leaflet-bar a:hover {
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  color: var(--color-blue);
}

.leaflet-control-attribution {
  font-size: 11px;
}

.leaflet-control-attribution a {
  color: var(--color-blue);
}

/* Celular: a gaveta recolhida fica sobre o mapa; sobe os controles do canto inferior. */
.leaflet-bottom {
  margin-bottom: calc(var(--alca-h) + var(--safe-bottom));
}

.leaflet-popup-content-wrapper {
  border-radius: var(--radius-card);
}

.leaflet-container a.leaflet-popup-close-button {
  width: 32px;
  height: 32px;
  font-size: 22px;
  line-height: 32px;
  color: var(--color-text-soft);
}

.leaflet-container a.leaflet-popup-close-button:hover {
  color: var(--color-blue);
}

.leaflet-popup-content {
  margin: 14px 16px;
  font-size: 13px;
  font-weight: 400;
}

/* Celular: deixa uma faixa livre à direita (botões do mapa) para o popup caber sem cobrir o "fechar". */
@media (max-width: 899px) {
  .leaflet-popup-content {
    max-width: calc(100vw - 120px) !important;
  }
}

.popup-setor__titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 16.4px;
  font-weight: 700;
  color: var(--color-blue);
}

.popup-setor__cor {
  flex: none;
  width: 6px;
  height: 20px;
  border-radius: 3px;
  background: var(--cor, var(--color-green));
}

.popup-setor__lista {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0;
}

.popup-setor__lista dt {
  font-weight: 600;
}

.popup-setor__lista dd {
  margin: 0;
}

.popup-setor__link {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  color: var(--color-blue);
  font-weight: 600;
}

.popup-setor .popup-setor__endereco,
.popup-setor .popup-setor__aviso {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--color-text-soft);
}

.popup-setor .popup-setor__aviso {
  font-weight: 600;
  color: var(--color-blue);
}

.proximo {
  display: flex;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  margin: 0 0 6px;
  padding: 8px 10px 8px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  background: var(--color-white);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.proximo:hover {
  background: var(--color-blue-tint);
}

.proximo__cor {
  flex: none;
  align-self: stretch;
  width: 6px;
  border-radius: 3px;
  background: var(--cor, var(--color-green));
}

.proximo__corpo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.proximo__titulo {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-blue);
}

.proximo__distancia {
  font-size: 12px;
  font-weight: 600;
}

.proximo__meta {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-soft);
}

.marcador-endereco {
  --ti-size: 40px;
  color: var(--color-blue);
  filter: drop-shadow(0 2px 3px var(--color-shadow));
}

.marcador-endereco .ti {
  margin: 0;
}

/* ---------- Desktop: painel lateral fixo ---------- */

@media (min-width: 900px) {
  .painel {
    position: static;
    z-index: 1;
    flex: none;
    width: var(--painel-w);
    height: auto;
    padding-bottom: 0;
    border-radius: 0;
    border-right: 1px solid var(--color-border);
    box-shadow: none;
    transform: none;
    transition: none;
  }

  .painel[data-aberto='false'] {
    display: none;
  }

  .painel__topo {
    min-height: 0;
    align-items: flex-start;
    padding: 16px 16px 4px;
    cursor: default;
  }

  .painel__alca {
    display: none;
  }

  .painel__resumo {
    font-size: 16.4px;
    text-align: left;
  }

  .painel__filtros {
    position: sticky;
    top: -4px;
    z-index: 1;
    padding-top: 4px;
  }

  .leaflet-bottom {
    margin-bottom: 0;
  }

  .aviso {
    max-height: calc(100% - 92px);
  }

  .busca-endereco {
    right: auto;
    width: min(420px, calc(100% - 84px));
  }

  .app-bar__titulo {
    font-size: 18px;
  }
}

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