:root {
  /* Ancho fijo para todos los paneles */
  --panel-width: 320px;
}
body,html,#map { height:100%; margin:0; padding:0; }
#map { position:relative; }
.info {
  position:absolute; top:10px; left:10px; z-index: 2;
  background: rgba(255,255,255,0.9); padding:8px; border-radius:6px;
  font-family:Arial, Helvetica, sans-serif; font-size:14px;
  width: var(--panel-width);
  min-width: var(--panel-width);
  max-width: var(--panel-width);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.info a { color: inherit; text-decoration: none; }
.info a:hover { text-decoration: underline; }
#route-tooltip {
  position:absolute; z-index:1000; pointer-events:none;
  background:rgba(0,0,0,0.8); color:#fff; padding:4px 8px;
  border-radius:4px; font-size:12px; font-family:Arial,sans-serif;
  display:none; white-space:nowrap;
}
#route-popup { width: var(--panel-width); }
#route-details-popup { width: var(--panel-width); }
#route-details-popup .card, #route-popup .card { background: rgba(255,255,255,0.9) !important; }
#route-popup .card { background: rgba(255,255,255,0.9) !important; width:100%; box-sizing: border-box; }
#route-popup .action-buttons {
  display: flex;
  flex-wrap: wrap; /* envuelve si no cabe */
  justify-content: flex-start; /* izquierda a derecha */
  align-items: stretch;
  gap: 0.25rem; /* espacio uniforme entre botones */
  padding: 0 8px; /* márgenes laterales simétricos */
  width: 100%;
  box-sizing: border-box;
}
/* Mantener botones en su anchura natural y respetar el gap */
#route-popup .action-buttons .btn { white-space: nowrap; flex: 1 1 0; }
/* Si la línea no cabe por ancho reducido, permitir wrap manteniendo márgenes simétricos */
/* No se necesita media query: con wrap siempre se evita desborde */
#route-details-popup { opacity:0; transform:translateY(-10px); transition: opacity .3s ease, transform .3s ease; }
#route-details-popup.show { opacity:1; transform:translateY(0); }
#route-details-popup.hide { opacity:0; transform:translateY(-10px); }
#route-details-popup .card { background: rgba(255,255,255,0.9) !important; width:100%; box-sizing: border-box; }
#route-popup { opacity:0; transform:translateY(-10px); transition: opacity .3s ease, transform .3s ease; }
#route-popup.show { opacity:1; transform:translateY(0); }
#route-popup.hide { opacity:0; transform:translateY(-10px); }
.route-type-icon { height:1.25em; width:auto; vertical-align:-0.125em; }

#searchBar {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  min-width: 260px;
  max-width: 400px;
  width: 100%;
  background: rgba(255,255,255,0.85);
  border-radius: 10px;
  box-shadow: none;
  display: flex;
  align-items: stretch;
}
#searchBar .form-control {
  border-radius: 10px !important;
  border: 1px solid #d0d7de;
  font-size: 16px;
  background: transparent;
  box-shadow: 0 1px 4px #0001;
  height: 50px;
}
#searchBar .btn {
  border-radius: 0 8px 8px 0 !important;
  font-size: 15px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1976d2;
  color: #fff;
  border: none;
  box-shadow: 0 2px 8px #1976d233;
  padding: 0 12px;
}
.search-input-group {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}
#locationInput {
  width: 100%;
  padding: 4px 36px 4px 12px; /* espacio a la derecha para el botón */
  border-radius: 8px;
  border: 1px solid #d0d7de;
  font-size: 14px;
  outline: none;
  transition: box-shadow 0.2s;
  box-shadow: 0 1px 4px #0001;
  height: 28px;
  background: transparent;
}
#searchBtn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 12px; /* más redondeado */
  font-size: 15px;
  box-shadow: 0 2px 8px #1976d233;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: #1976d2;
  color: #fff;
}

@media (max-width: 600px) {
  .info {
    display: none !important;
  }
  #searchBar {
    left: 0 !important;
    transform: none !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    width: calc(100vw - 20px) !important;
    margin: 0 10px !important;
    border-radius: 10px !important;
    top: 14px !important;
  }
  #route-popup, #route-details-popup {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 0 !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -4px 24px #0003;
    background: rgba(255,255,255,0.98) !important;
    transition: transform .35s cubic-bezier(.4,1.6,.4,1), opacity .3s;
    transform: translateY(100%);
    opacity: 0;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 2000;
  }
  #route-popup.show, #route-details-popup.show {
    transform: translateY(0);
    opacity: 1;
  }
  .maplibregl-ctrl-top-right {
    top: 55px !important;
    right: 2px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .maplibregl-ctrl-group {
    margin-bottom: 10px !important;
  }
  .maplibregl-ctrl-group:last-child {
    margin-bottom: 0 !important;
  }
  /* Eliminar cualquier margen lateral en los controles de mapa */
  /* Restaurar agrupación original de los botones de zoom (+/-) */
}