/* ===== Estilos do mapa dinâmico ===== */
.map-dynamic {
  width: 100vw;
  height: 100vh;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
.leaflet-popup-content {
  font-size: 15px;
}
/* ===== ESTILOS BASE COMPARTILHADOS ===== */

/* ===== Cores padrão ===== */
:root {
  --cor-principal: #fe5e3a;
  --cor-secundaria: #36444c;
  --cor-fundo: #fff;
  --cor-texto: #36444c;
  --cor-hover: #e14c3a;

/* Dark mode adjustments for the map header */
body.dark-mode .map-header {
  background: rgba(17,24,39,0.9);
  color: #e5e7eb;
  box-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
  --sombra-padrao: 0 2px 8px rgba(0,0,0,0.1);
}

/* ===== Layout Geral ===== */
body {
  background-image: url('../img/smartGeoBG.png');
  background-repeat: no-repeat;
  background-position: top right;
  background-size: cover;
  display: flex;
  font-family: sans-serif;
  margin: 0;
  min-height: 100vh;
  height: 100vh;
  overflow-x: hidden;
}

/* ===== Estilos de Input ===== */
input {
  background-color: #fff;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

/* ===== Botões Estilizados ===== */
.btn-cancelar,
.btn-confirmar {
  padding: 10px 28px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-left: 0;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(254,94,58,0.07);
  background: #fe5e3a;
  color: #fff;
  outline: none;
}

.btn-confirmar {
  background: #fe5e3a;
  color: #fff;
  border: 2px solid #fff;
  margin-right: 12px;
}

.btn-confirmar:hover {
  background: #fff;
  color: #fe5e3a;
  border: 2px solid #fe5e3a;
}

.btn-cancelar {
  background: #fff;
  color: #fe5e3a;
  border: 2px solid #fe5e3a;
  margin-left: 12px;
  padding: 10px 28px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(254,94,58,0.07);
  outline: none;
}

.btn-cancelar:hover,
.btn-cancelar:focus {
  background: #fe5e3a;
  color: #fff;
  border: 2px solid #fe5e3a;
}

.btn-cancelar:active,
.btn-confirmar:active {
  background: #fff;
  color: #fe5e3a;
  border: 2px solid #fe5e3a;
  box-shadow: none;
}

/* ===== Botões de Ações no Título ===== */
.btn-icone {
  background: none;
  border: none;
  cursor: pointer;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#btn-lupa svg,
#btn-marcacoes svg,
#btn-localizacao svg,
#btn-logout svg,
#btn-theme svg {
  filter: grayscale(1) brightness(0.2);
  transition: filter 0.2s;
}

#btn-lupa:hover svg,
#btn-marcacoes:hover svg,
#btn-localizacao:hover svg,
#btn-logout:hover svg,
#btn-theme:hover svg {
  filter: none;
}

#btn-localizacao svg {
  position: relative;
  left: 2px;
  top: -2px;
}

/* In dark mode, remove the heavy darkening filter so icons remain visible */
body.dark-mode #btn-lupa svg,
body.dark-mode #btn-marcacoes svg,
body.dark-mode #btn-localizacao svg,
body.dark-mode #btn-logout svg,
body.dark-mode #btn-theme svg {
  filter: none;
  stroke: #e5e7eb !important;
}

/* Keep hover effect consistent in dark mode: orange accent on hover */
body.dark-mode #btn-lupa:hover svg,
body.dark-mode #btn-marcacoes:hover svg,
body.dark-mode #btn-localizacao:hover svg,
body.dark-mode #btn-logout:hover svg,
body.dark-mode #btn-theme:hover svg {
  stroke: #fe5e3a !important;
  filter: none;
}

.pin-icone {
  position: relative;
  top: -1px;
}

.pin-marcacao-icon {
  background: none !important;
  border: none !important;
}

/* ===== Botão de Limpar ===== */
.btn-limpar {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  display: none;
  padding: 0;
  z-index: 2;
}

/* ===== Estilos para construção ===== */
.em-construcao {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
  z-index: 10;
}
.em-construcao h2 {
  font-size: 28px;
  color: #36444c;
  margin: 0;
  font-weight: bold;
}
.dog-hybrid {
  max-width: 600px;
  width: 80%;
  height: auto;
}

/* ===== Estilos para 404/403 ===== */
.not-found-box {
  /* fixed covers viewport reliably even if parent has positioning */
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
  z-index: 9999;
  padding: 48px;
}
.not-found-box h1 { 
  font-size:32px; 
  color:#fe5e3a; 
  margin-bottom:12px; 
}
.not-found-box p { 
  color:#333; 
}
.not-found-box a { 
  display:inline-block; 
  margin-top:18px; 
  color:#2a6afe; 
}


/* ===== Cabeçalho do mapa (global) ===== */
.map-header {
  position: absolute;
  z-index: 600;
  left: 12px;
  top: 12px;
  background: rgba(255,255,255,0.95);
  padding: 8px 12px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  display: flex;
  gap: 12px;
  min-width: 174px;
  max-width: 220px;
  font-weight: bold;
  color: var(--cor-principal);
  align-items: center;
  text-align: center;
  justify-content: center; /* centraliza conteúdo horizontalmente dentro do header */
}

.map-header-text {
  flex: 1 1 auto;
  text-align: center;
}

.leaflet-control-map-title {
  background: rgba(255,255,255,0.95);
  padding: 6px 10px;
  border-radius: 6px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
  font-weight: 700;
  color: var(--cor-secundaria);
  margin-left: 8px;
}

.zoom-inside-layercontrol {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important; /* sem gap, vamos gerenciar por altura fixa */
  align-items: center !important;
  margin-bottom: 0 !important;
  height: 72px !important; /* container do zoom: 2 botões de 34px */
  box-sizing: border-box !important;
}
.zoom-inside-layercontrol .leaflet-control-zoom-in,
.zoom-inside-layercontrol .leaflet-control-zoom-out {
  width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}
.zoom-inside-layercontrol .leaflet-control-zoom {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  height: 100% !important;
}
.leaflet-control-mostra-regionais {
  display: block;
  width: 100%;
  margin-top: 12px;
  clear: both;
}

.leaflet-control.zoom-inside-layercontrol,
.leaflet-bar.zoom-inside-layercontrol {
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.leaflet-control.zoom-inside-layercontrol .leaflet-control-zoom,
.leaflet-bar.zoom-inside-layercontrol .leaflet-control-zoom {
  margin: 0 !important;
  padding: 0 !important;
}
.leaflet-control.zoom-inside-layercontrol .leaflet-control-zoom a,
.leaflet-bar.zoom-inside-layercontrol .leaflet-control-zoom a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
}
.leaflet-control.zoom-inside-layercontrol { position: relative !important; top: 0 !important; }

.zoom-inside-layercontrol > .leaflet-control,
.zoom-inside-layercontrol > .leaflet-bar {
  padding: 0 !important;
  margin: 0 !important;
}
.zoom-inside-layercontrol > .leaflet-control .leaflet-control-zoom,
.zoom-inside-layercontrol > .leaflet-bar .leaflet-control-zoom {
  margin: 0 !important;
  padding: 0 !important;
}
.zoom-inside-layercontrol > .leaflet-control a,
.zoom-inside-layercontrol > .leaflet-bar a {
  margin: 0 !important;
  padding: 0 !important;
}

.leaflet-control .leaflet-control-layers-base {
  padding-top: 4px !important;
}