/* Telas /navegacao e /captura-coordenadas — complementa o tema "Portaria
   Flow" (encomendas-tailwind-config.js + encomendas.css) com o que é
   específico delas: peso dos ícones, código da casa em fonte mono,
   rótulos do mapa e toast. */

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.fill-1 {
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.codigo-casa {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  letter-spacing: -0.01em;
}

kbd {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  padding: 1px 5px;
  border: 1px solid #c3c6ce;
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #fff;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #006c49;
  outline-offset: 2px;
}

/* Selo numérico (ordem da parada / casas na rota) */
.selo {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

/* Rótulos do mapa de captura */
.rotulo-casa.leaflet-tooltip {
  background: rgba(0, 20, 40, 0.8);
  color: #fff;
  border: 0;
  box-shadow: none;
  padding: 0 4px;
  font: 600 10px/16px 'JetBrains Mono', ui-monospace, monospace;
}
.rotulo-casa.leaflet-tooltip::before { display: none; }
.zoom-baixo .rotulo-casa { display: none; }

.rotulo-portaria.leaflet-tooltip {
  background: #006c49;
  color: #fff;
  border: 0;
  font: 700 12px/18px 'Plus Jakarta Sans', sans-serif;
}
.rotulo-portaria.leaflet-tooltip::before { border-top-color: #006c49; }

.alfinete-atual {
  color: #ba1a1a;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}
.alfinete-atual .material-symbols-outlined { font-size: 40px; }

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  background: #283044;
  color: #eef0ff;
  padding: 10px 16px;
  border-radius: 12px;
  font: 600 14px/20px 'Plus Jakarta Sans', sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 1000;
  max-width: calc(100vw - 32px);
}
.toast.visivel { opacity: 1; transform: translate(-50%, 0); }
.toast.erro { background: #93000a; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Segmented control (/navegacao) */
.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: #eaedff;
}
.seg button {
  min-height: 40px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: 600 14px/20px 'Plus Jakarta Sans', sans-serif;
  color: #43474d;
  transition: background-color 0.15s, color 0.15s;
}
.seg button[aria-pressed="true"] {
  background: #ffffff;
  color: #001428;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}