body {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  background-color: #f7f8fa;
}

/* .hn-map-col es columna flex vertical para que #map pueda estirarse
   (flex-grow) y ocupar todo el alto disponible en vez de quedar más bajo
   que la columna de la izquierda con espacio libre debajo — Bootstrap ya
   estira ambas columnas de la fila a la misma altura (comportamiento por
   defecto de flexbox, align-items: stretch), lo que faltaba era que #map
   aproveche esa altura en vez de tener un alto fijo más chico. */
.hn-map-col {
  display: flex;
  flex-direction: column;
}

#map {
  width: 100%;
  flex: 1 1 auto;
  min-height: 480px; /* piso: nunca se ve más chico que esto, aunque la columna de al lado sea baja */
  border-radius: 0.5rem;
  border: 1px solid #dee2e6;
}

#search-group gmp-place-autocomplete {
  width: 100%;
}

#hn-alerts {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 2000;
  width: min(420px, 90vw);
}

.hn-card {
  border: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

#hn-results-thead th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

#hn-results-thead th:hover {
  background-color: #f1f3f5;
}

#hn-results-tbody tr:hover {
  background-color: #f8f9fa;
}

#hn-spinner {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.hn-coord-inputs {
  display: flex;
  gap: 0.5rem;
}

@media (max-width: 767px) {
  #map {
    flex: none;
    height: 280px;
    min-height: 0;
  }
}

/* Panel izquierdo con scroll propio + mapa fijo en pantalla, solo en
   escritorio (columnas lado a lado, "lg" de Bootstrap hacia arriba). En
   mobile las columnas se apilan una debajo de otra, ahí no aplica: se
   scrollea la página entera como siempre, no tendría sentido "clavar" el
   mapa en una pantalla angosta. */
@media (min-width: 992px) {
  .hn-sidebar-col {
    position: sticky;
    top: 1rem;
    align-self: flex-start;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    /* deja lugar para la barra de scroll sin que tape los checkboxes */
    padding-right: 0.25rem;
  }

  .hn-map-col {
    position: sticky;
    top: 1rem;
  }
}

/* Secciones colapsables ("Coordenadas", "¿Qué buscás cerca?") */
.hn-section-toggle {
  font-weight: 500;
}

.hn-caret {
  display: inline-block;
  transition: transform 0.15s ease;
}

.hn-section-toggle[aria-expanded="true"] .hn-caret {
  transform: rotate(90deg);
}

.hn-topbar {
  background-color: #1a1a1a;
  padding: 0.55rem 0;
}

.hn-topbar-logo {
  height: 28px;
  width: auto;
  display: block;
}

.hn-footer {
  border-top: 1px solid #e9ecef;
}

.hn-footer-logo {
  height: 26px;
  width: auto;
  opacity: 0.85;
}

.hn-footer-link {
  color: inherit;
  text-decoration: underline;
}

.hn-footer-link:hover {
  color: #7a9a3d;
}

.hn-current-location:empty {
  display: none;
}

.hn-current-location {
  font-size: 0.8rem;
  color: #495057;
}

/* Historial de búsquedas recientes */
.hn-history:empty {
  display: none;
}

.hn-history-item {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.15rem 0.55rem;
  margin: 0.15rem 0.25rem 0 0;
  border-radius: 1rem;
  border: 1px solid #dee2e6;
  background-color: #fff;
  color: #495057;
  cursor: pointer;
  white-space: nowrap;
}

.hn-history-item:hover {
  background-color: #eef1f4;
}

/* Búsqueda por voz (comparten esta clase el mic de "Otro" y el de "Dirección") */
.hn-mic-btn.hn-mic-listening {
  background-color: #dc3545;
  border-color: #dc3545;
  color: #fff;
  animation: hn-mic-pulse 1.2s ease-in-out infinite;
}

@keyframes hn-mic-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.hn-mic-status {
  font-style: italic;
}

.hn-type-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
  line-height: 1;
}

/* Acciones en la tabla de resultados (ver en Maps / cómo llegar) */
.hn-row-actions a {
  display: inline-block;
  margin-right: 0.4rem;
  text-decoration: none;
  font-size: 1rem;
}

/* Info window: rating y horarios */
.hn-iw-open {
  color: #198754;
  font-weight: 600;
}

.hn-iw-closed {
  color: #dc3545;
  font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Tema oscuro (Bootstrap 5.3 data-bs-theme="dark")                    */
/* ------------------------------------------------------------------ */
[data-bs-theme="dark"] body {
  background-color: #16181b;
}

[data-bs-theme="dark"] #map {
  border-color: #3a3f44;
}

[data-bs-theme="dark"] .hn-card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] #hn-results-thead th:hover {
  background-color: #2a2e33;
}

[data-bs-theme="dark"] #hn-results-tbody tr:hover {
  background-color: #23262a;
}

[data-bs-theme="dark"] .hn-current-location {
  color: #adb5bd;
}

[data-bs-theme="dark"] .hn-history-item {
  background-color: #23262a;
  border-color: #3a3f44;
  color: #ced4da;
}

[data-bs-theme="dark"] .hn-history-item:hover {
  background-color: #2a2e33;
}

[data-bs-theme="dark"] .hn-footer {
  border-top-color: #3a3f44;
}

[data-bs-theme="dark"] .hn-footer-logo {
  opacity: 0.9;
}

[data-bs-theme="dark"] .hn-section-toggle {
  background-color: #23262a;
  border-color: #3a3f44;
  color: #e9ecef;
}

[data-bs-theme="dark"] .hn-section-toggle:hover {
  background-color: #2a2e33;
}

/* El scrollbar del panel izquierdo, más discreto en oscuro (Chrome/Edge). */
[data-bs-theme="dark"] .hn-sidebar-col {
  scrollbar-color: #4a4f55 #23262a;
}