/* ═══════════════════════════════════════════════
   TALI · MAP CONTROLS & OVERLAYS
═══════════════════════════════════════════════ */

/* ── Map tag ── */
.map-tag {
  position: absolute; top: 10px; left: 10px; z-index: 500;
  background: rgba(255,255,255,.9); border: 1px solid var(--border2);
  border-radius: 8px; padding: 5px 12px; font-size: 10px;
  color: var(--gray2); letter-spacing: 3px; pointer-events: none;
  backdrop-filter: blur(6px);
}
body.dark .map-tag { background: rgba(255,255,255,.85); }

/* ── Map control buttons ── */
.map-controls {
  position: absolute !important; bottom: 18px !important;
  left: 10px !important; top: auto !important; right: auto !important;
  z-index: 500; display: flex; flex-direction: column-reverse; gap: 5px;
}
.mc-btn {
  background: rgba(255,255,255,.92); border: 1px solid rgba(0,0,0,.10);
  border-radius: 9px; padding: 7px 11px; font-size: 12px; color: var(--gray2);
  cursor: pointer; font-family: 'DM Sans', sans-serif;
  transition: all .2s; white-space: nowrap; backdrop-filter: blur(6px);
  display: flex; align-items: center; gap: 6px;
}
.mc-btn:hover      { color: var(--white); border-color: rgba(0,0,0,.15); }
.mc-btn.active     { color: var(--cyan);   border-color: rgba(0,212,255,.3); }
.mc-btn.day-active { color: var(--yellow); border-color: rgba(245,158,11,.3); }
.mc-btn a          { color: inherit; text-decoration: none; }
body.dark .mc-btn  { background: rgba(255,255,255,.9); border-color: rgba(0,0,0,.08); }

/* ── Route info bar ── */
#route-info {
  position: absolute; bottom: 12px; left: 50%;
  transform: translateX(-50%); z-index: 500; display: none;
  background: rgba(255,255,255,.95); border: 1px solid rgba(0,0,0,.10);
  border-radius: 30px; padding: 8px 18px; gap: 14px; align-items: center;
  font-size: 13px; white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,.6); backdrop-filter: blur(8px);
}
#route-info .ri   { display: flex; align-items: center; gap: 5px; }
#route-info .rv   { font-weight: 600; color: var(--white); }
#route-info .rk   { color: var(--gray); font-size: 11px; }
#route-info .rdot { width: 3px; height: 3px; background: var(--gray); border-radius: 50%; }
body.dark #route-info { background: rgba(255,255,255,.95); border-color: var(--border); }

/* ── Center pin picker ── */
#center-pin {
  position: fixed; top: 50%; left: 50%;
  /* translate(-50%) centra horizontal; -translateY mueve para que la sombra quede en el centro */
  transform: translate(-50%, -100%); z-index: 820;
  display: none; pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.5));
  transition: filter .15s;
  width: 32px; /* ancho fijo para centrar bien */
}
.pin-dot {
  width: 18px; height: 18px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.95);
  margin: 0 auto;
  box-shadow: 0 0 0 2px rgba(0,0,0,.2);
}
.pin-stick  { width: 3px; height: 28px; margin: 0 auto; border-radius: 2px; opacity: .8; }
.pin-shadow { width: 10px; height: 5px; background: rgba(0,0,0,.35); border-radius: 50%; margin: 2px auto 0; }

#pick-label {
  position: fixed;
  bottom: 96px; left: 50%;
  transform: translateX(-50%);
  z-index: 820; display: none;
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 20px; padding: 10px 18px;
  font-size: 13px; line-height: 1.4;
  color: #111118;
  white-space: normal; text-align: center;
  max-width: calc(100vw - 32px);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  letter-spacing: .3px;
  animation: slideUp .2s ease;
}
body.dark #pick-label {
  background: rgba(15,15,24,.97);
  color: #f5f5ff;
  border-color: rgba(255,255,255,.12);
}

#pin-bar {
  position: fixed; bottom: 20px; left: 50%;
  transform: translateX(-50%); z-index: 820;
  display: none; flex-direction: column; align-items: center; gap: 8px;
  padding-bottom: env(safe-area-inset-bottom);
}
.pin-confirm-btn {
  background: #111118; color: #fff; border: none; border-radius: 30px;
  padding: 12px 28px; font-family: 'DM Sans', sans-serif;
  font-weight: 600; font-size: 14px; cursor: pointer;
  box-shadow: 0 6px 24px rgba(0,0,0,.2);
  display: flex; align-items: center; gap: 8px;
  transition: transform .15s, box-shadow .15s;
}
.pin-confirm-btn:active { transform: scale(.96); box-shadow: 0 2px 12px rgba(0,0,0,.4); }
.pin-cancel-btn {
  background: rgba(255,255,255,.85); color: var(--gray2);
  border: 1px solid rgba(0,0,0,.10); border-radius: 30px;
  padding: 8px 20px; font-family: 'DM Sans', sans-serif;
  font-size: 12px; cursor: pointer;
}

/* ── Navigation bar (driver mode) ── */
#nav-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 700;
  background: rgba(255,255,255,.97); backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 2px solid rgba(0,150,200,.25);
  padding: 12px 16px; display: none;
  align-items: center; gap: 12px;
  transition: all .3s; box-shadow: 0 4px 20px rgba(0,0,0,.10);
}

/* ── POI markers ── */
.poi-marker-wrap { display: flex; flex-direction: column; align-items: center; pointer-events: none; transition: opacity .3s; }
.poi-dot   { width: 7px; height: 7px; background: var(--cyan); border-radius: 50%; border: 2px solid rgba(0,0,0,.6); box-shadow: 0 0 5px rgba(0,212,255,.5); }
.poi-label { font-size: 9px; font-family: 'DM Sans', sans-serif; font-weight: 600; color: var(--cyan); background: rgba(255,255,255,.85); border-radius: 4px; padding: 1px 5px; margin-top: 2px; white-space: nowrap; letter-spacing: .3px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; text-align: center; opacity: 0; transition: opacity .3s; }
body.dark .poi-dot   { border-color: rgba(255,255,255,.7); }
body.dark .poi-label { background: rgba(255,255,255,.7); color: #0077aa; }
.poi-z-show .poi-label { opacity: 1; }
.poi-z-mid  .poi-label { opacity: 0.55; }

/* ── Driver popup ── */
.driver-popup .leaflet-popup-content-wrapper {
  background: rgba(255,255,255,.97); backdrop-filter: blur(14px);
  border: 1px solid rgba(0,150,200,.2); border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12); color: #111118;
}
.driver-popup .leaflet-popup-tip         { background: rgba(255,255,255,.97); }
.driver-popup .leaflet-popup-close-button { color: #5a7080 !important; font-size: 18px !important; }

/* ── Pick mode: mapa pantalla completa ── */
#app.pick-mode #side        { display: none !important; }
#map-wrap.pick-fullscreen   {
  position: fixed !important;
  inset: 0 !important;
  height: 100dvh !important;
  max-height: none !important;
  min-height: 0 !important;
  z-index: 800;
}
/* pick-label, pin-bar y center-pin usan position:fixed directamente — sin overrides necesarios */
@media (min-width: 860px) {
  #map-wrap.pick-fullscreen { position: fixed !important; inset: 0 !important; width: 100vw !important; }
}

/* ── Car SVG marker ── */
.car-marker-icon {
  background: transparent !important;
  border: none !important;
  cursor: default;
}