/* Complementa as utilities do Tailwind (Play CDN) com o que não é
   expresso por classes utilitárias puras: alternância de telas, safe-area
   e ajustes específicos do Leaflet. */

html, body {
  height: 100%;
  overscroll-behavior: none;
}

.view {
  display: none;
}

.view-active {
  display: flex;
}

.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.pt-safe {
  padding-top: env(safe-area-inset-top, 0px);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Leaflet */
.leaflet-container {
  width: 100%;
  height: 100%;
  font-family: 'Inter', sans-serif;
  background: #e8edea;
}

.leaflet-popup-content-wrapper {
  border-radius: 8px;
}

/* Cartão de destino (tela 2) */
.house-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: #eceef0; /* surface-container */
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.house-option.selected {
  border-color: #131b2e; /* primary */
  background: #dae2fd; /* primary-container */
}

.house-option .house-icon {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: #e0e3e5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #45464d;
  flex-shrink: 0;
}

.house-option.selected .house-icon {
  background: #131b2e;
  color: #ffffff;
}

/* Cartão de visitante (painel da portaria) */
.visitor-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: #eceef0;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Mapa da portaria: pin do visitante */
.portaria-marker {
  width: 26px;
  height: 26px;
  border-radius: 9999px;
  background: #131b2e;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}