/* ==========================================================================
   NOLLEGO - OFFICIAL BRAND THEME & COCKPIT UI
   ========================================================================== */

:root {
  /* Brand Tokens - Official NoLLego Visual Identity Kit V3 */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Outfit', sans-serif;

  /* Official V3 Palette: Navy #041E54, Orange #FF6500, Cyan #12C4F8 */
  --nl-color-navy: #041E54;
  --nl-color-orange: #FF6500;
  --nl-color-orange-dark: #F34700;
  --nl-color-cyan: #12C4F8;
  --nl-color-cyan-light: #6FE3FF;
  --nl-color-white: #FFFFFF;

  --ktm-orange: #FF6500;
  --ktm-orange-hover: #FF7B24;
  --ktm-orange-dark: #F34700;
  --ktm-orange-glow: rgba(255, 101, 0, 0.45);
  --ktm-orange-subtle: rgba(255, 101, 0, 0.12);

  --brand-orange: #FF6500;
  --brand-turquoise: #12C4F8;
  --brand-turquoise-glow: rgba(18, 196, 248, 0.4);
  --brand-navy: #041E54;
  --brand-yellow: #FFD232;

  --accent-brand: var(--ktm-orange);
  --accent-brand-glow: var(--ktm-orange-glow);

  --accent-amber: #FFD232;
  --accent-rose: #f43f5e;
  --accent-emerald: #10b981;
  --accent-turquoise: #12C4F8;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.35);
  --transition-theme: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Device Safe Area Insets (Android Notch, Home Bar, iOS Dynamic Island) */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

/* ==========================================================================
   THEME PALETTES (NIGHT & DAY) - V3 BRAND SPEC
   ========================================================================== */

/* Dark Mode (Default / Night Drive Cockpit Navy #041E54) */
[data-theme="dark"] {
  --bg-app: #041E54;
  --bg-panel: rgba(11, 46, 100, 0.94);
  --bg-panel-solid: #0B2E64;
  --bg-card: rgba(16, 56, 118, 0.88);
  --bg-card-hover: rgba(22, 70, 145, 0.96);
  --bg-input: #0B2E64;

  --border-color: #31527B;
  --border-highlight: rgba(255, 101, 0, 0.5);

  --text-main: #F8FAFF;
  --text-muted: #C9D7ED;
  --text-dim: #8BA8D6;

  --map-tile-filter: none;
  --header-border: #31527B;
}

/* Light Mode (Day Drive / Sun Visibility) */
[data-theme="light"] {
  --bg-app: #FFFFFF;
  --bg-panel: rgba(246, 249, 253, 0.96);
  --bg-panel-solid: #F6F9FD;
  --bg-card: rgba(246, 249, 253, 0.96);
  --bg-card-hover: #FFFFFF;
  --bg-input: #EDF2F7;

  --border-color: #D5DFE9;
  --border-highlight: rgba(255, 101, 0, 0.5);

  --text-main: #102039;
  --text-muted: #52627A;
  --text-dim: #8A9BA8;

  --map-tile-filter: none;
  --header-border: #D5DFE9;
}

/* Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-app);
  color: var(--text-main);
  line-height: 1.5;
  transition: var(--transition-theme);
  overflow-x: hidden;
  min-height: 100vh;
  padding-bottom: var(--sab);
}

.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Glassmorphism Generic Class */
.glass-panel {
  background: var(--bg-panel);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
  transition: var(--transition-theme);
}

/* Accessible Screen Reader Only (SEO & A11y without visual disruption) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Base Bottom Sheet Handle (hidden on desktop/landscape by default) */
.bottom-sheet-drag-handle {
  display: none;
}

/* Universal Leaflet Container Theme Alignment */
.leaflet-container {
  background: var(--bg-app) !important;
  font-family: var(--font-sans) !important;
  outline: none;
}

/* Sleek Automotive Zoom Controls on Desktop */
@media (min-width: 901px) {
  .leaflet-control-zoom {
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-md) !important;
    border-radius: var(--radius-sm) !important;
    overflow: hidden;
    margin-top: 14px !important;
    margin-left: 14px !important;
  }

  .leaflet-control-zoom a {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-bottom: 1px solid var(--border-color) !important;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .leaflet-control-zoom a:hover {
    background: var(--bg-card-hover) !important;
    color: var(--ktm-orange) !important;
  }
}

@media (max-width: 900px) {
  .leaflet-control-zoom {
    display: none !important;
  }
}

/* ==========================================================================
   TOP HEADER BAR
   ========================================================================== */
.top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(12px, var(--sat)) max(18px, var(--sar)) 10px max(18px, var(--sal));
  background: var(--bg-panel-solid);
  border-bottom: 1.5px solid var(--header-border);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: var(--transition-theme);
}

.logo-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}

.brand-header-logo {
  height: 36px;
  width: auto;
  max-width: 195px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
  transition: transform 0.2s ease;
}

[data-theme="light"] .brand-header-logo {
  filter: drop-shadow(0 1px 4px rgba(10, 22, 48, 0.14));
}

.brand-logo-link:hover .brand-header-logo {
  transform: scale(1.03);
}

.brand-symbol-raw {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  filter: drop-shadow(0 2px 10px rgba(255, 133, 8, 0.45));
  transition: transform 0.25s ease;
}

.brand-symbol-raw:hover {
  transform: scale(1.1) rotate(-3deg);
}

.brand-svg-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.8px;
  color: var(--text-main);
  line-height: 0.92;
  margin: 0;
  margin-bottom: -2px;
  display: flex;
  align-items: baseline;
}

.ktm-dot {
  color: var(--ktm-orange);
  font-size: 32px;
  line-height: 0;
  margin-left: 1px;
}

.brand-tagline {
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 0;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 1-Tap Fuel Selector Toggle Group */
.fuel-toggle-group {
  display: inline-flex;
  align-items: center;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 3px;
  gap: 3px;
  transition: all 0.2s ease;
}

.fuel-toggle-group:hover {
  border-color: rgba(255, 102, 0, 0.4);
}

.fuel-pill-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.fuel-pill-btn:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.05);
}

.fuel-pill-btn.active {
  background: linear-gradient(135deg, var(--ktm-orange), #ff4400);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(255, 102, 0, 0.4);
  font-weight: 800;
}

.fuel-text-full {
  display: inline;
}

.fuel-text-short {
  display: none;
}

.fuel-pill-more-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 12px;
  padding: 6px 9px;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.2s ease;
}

.fuel-pill-more-btn:hover {
  color: var(--ktm-orange);
  background: rgba(255, 102, 0, 0.12);
}

.fuel-pill-more-btn.active,
.fuel-pill-more-btn.has-custom-fuel {
  color: #ffffff;
  background: linear-gradient(135deg, var(--ktm-orange), #ff4400);
  box-shadow: 0 2px 10px rgba(255, 102, 0, 0.4);
  font-weight: 800;
  padding: 6px 11px;
}

.fuel-more-text {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.fuel-dropdown-arrow {
  font-size: 8px;
  opacity: 0.8;
  margin-left: 2px;
}

/* Fuel Selector Badge (Legacy) */
.fuel-selector-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-input);
  padding: 8px 14px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  border: 1px solid var(--border-color);
  transition: all 0.2s ease;
}

.fuel-selector-badge:hover {
  border-color: var(--ktm-orange);
  box-shadow: 0 0 0 2px var(--ktm-orange-subtle);
  transform: translateY(-1px);
}

.fuel-selector-badge i.fa-oil-can {
  color: var(--ktm-orange);
}

.caret-icon {
  font-size: 10px;
  color: var(--text-muted);
}

/* Theme Switch Group */
.theme-switch-group {
  display: flex;
  background: var(--bg-input);
  padding: 3px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
}

.theme-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  transition: all 0.2s ease;
}

.theme-btn:hover {
  color: var(--text-main);
}

.theme-btn.active {
  background: var(--bg-panel-solid);
  color: var(--ktm-orange);
  box-shadow: var(--shadow-sm);
}

.theme-label {
  font-size: 11px;
  letter-spacing: 0.5px;
}

/* PRO Badge Button */
.pro-btn {
  background: linear-gradient(135deg, var(--ktm-orange), var(--ktm-orange-dark));
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 4px 14px var(--ktm-orange-glow);
  transition: all 0.2s ease;
}

.pro-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(255, 102, 0, 0.6);
}

/* ==========================================================================
   ROUTE SEARCH PANEL (SYMMETRIC & GLANCEABLE)
   ========================================================================== */
.route-search-panel {
  padding: 16px 24px 18px 24px;
  margin: 14px 24px 0 24px;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* MITECO Trust Strip */
.miteco-trust-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  padding: 0 4px 2px 4px;
  letter-spacing: 0.2px;
}

.miteco-trust-strip span i {
  color: var(--text-dim);
  margin-right: 4px;
}

.trust-badge-mini {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  transition: all 0.2s ease;
}

.trust-badge-mini i {
  color: var(--ktm-orange) !important;
  font-size: 11px;
}

.trust-badge-mini:hover {
  border-color: var(--ktm-orange);
  color: var(--text-main);
}

/* Copilot Active Highway & Direction Header */
.copilot-active-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 102, 0, 0.08);
  border: 1.5px solid rgba(255, 102, 0, 0.28);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  gap: 10px;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.copilot-route-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text-main);
  flex: 1;
  min-width: 180px;
}

.copilot-prefix {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.copilot-quick-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.copilot-action-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.copilot-action-btn:hover {
  border-color: var(--ktm-orange);
  color: var(--ktm-orange);
  transform: translateY(-1px);
}

.copilot-action-btn.primary {
  background: var(--ktm-orange);
  border-color: var(--ktm-orange);
  color: #fff;
  box-shadow: 0 2px 10px var(--ktm-orange-glow);
}

.copilot-action-btn.primary:hover {
  background: var(--ktm-orange-dark);
}

/* Manual Search Collapsible Toggle */
.manual-route-toggle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}

.manual-search-toggle-btn {
  background: transparent;
  border: 1px dashed var(--border-color);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: 11.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  justify-content: center;
  box-sizing: border-box;
}

.manual-search-toggle-btn:hover {
  background: var(--bg-card);
  color: var(--ktm-orange);
  border-color: var(--ktm-orange);
}

.manual-search-toggle-btn .toggle-icon {
  transition: transform 0.2s ease;
}

.manual-search-toggle-btn.open .toggle-icon {
  transform: rotate(180deg);
}

.manual-search-collapsed {
  display: none !important;
}

.quick-metric-pill.direct {
  background: rgba(0, 230, 118, 0.12);
  color: #00e676;
  border: 1px solid rgba(0, 230, 118, 0.3);
}

.quick-nav-speak-btn {
  background: rgba(255, 102, 0, 0.14);
  border: 1.5px solid var(--ktm-orange);
  color: var(--ktm-orange);
  border-radius: var(--radius-sm);
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.quick-nav-speak-btn:hover {
  background: var(--ktm-orange);
  color: #fff;
  transform: scale(1.05);
}

.route-inputs-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

.input-row-wrapper {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.input-row {
  display: flex;
  align-items: center;
  background: var(--bg-input);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 4px 6px 4px 14px;
  height: 52px;
  gap: 10px;
  transition: all 0.2s ease;
}

.input-row:focus-within {
  border-color: var(--ktm-orange);
  box-shadow: 0 0 0 3px var(--ktm-orange-subtle);
}

.input-icon {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
}

.origin-dot {
  color: var(--ktm-orange);
}

.dest-dot {
  color: var(--accent-rose);
}

.input-row input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-main);
  font-size: 15px;
  font-weight: 600;
  flex: 1;
  min-width: 80px;
}

.input-row input::placeholder {
  color: var(--text-dim);
}

/* Action slot buttons inside inputs */
.action-slot-btn {
  height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  white-space: nowrap;
  border: none;
  transition: all 0.2s ease;
}

.gps-btn {
  background: var(--bg-panel-solid);
  border: 1.5px solid var(--border-color);
  color: var(--text-main);
  gap: 8px;
}

.gps-btn i {
  color: var(--ktm-orange);
  font-size: 13px;
}

.gps-btn:hover {
  background: var(--bg-input);
  border-color: var(--ktm-orange);
  color: var(--ktm-orange);
  box-shadow: 0 0 0 2px var(--ktm-orange-subtle);
}

.calc-route-btn {
  background: linear-gradient(135deg, var(--ktm-orange), var(--ktm-orange-dark));
  color: #fff;
  box-shadow: 0 3px 14px var(--ktm-orange-glow);
}

.calc-route-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 102, 0, 0.55);
}

.route-connector-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.swap-btn {
  background: var(--bg-input);
  border: 1.5px solid var(--border-color);
  color: var(--text-muted);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s ease;
}

.swap-btn:hover {
  color: var(--ktm-orange);
  border-color: var(--ktm-orange);
  transform: scale(1.08);
}

/* Presets Pills */
.route-presets {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.presets-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 700;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}

.presets-label i {
  color: var(--ktm-orange);
}

.preset-pill {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.preset-pill:hover {
  color: var(--text-main);
  border-color: var(--text-muted);
  transform: translateY(-1px);
}

.preset-pill.active {
  background: var(--ktm-orange);
  color: #fff;
  border-color: var(--ktm-orange);
  box-shadow: 0 3px 12px var(--ktm-orange-glow);
}

/* ==========================================================================
   MAIN CONTENT (MAP & TIMELINE)
   ========================================================================== */
.main-content-layout {
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 20px;
  padding: 16px 24px 24px 24px;
  flex: 1;
}

.map-container-wrapper {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
  min-height: 560px;
  display: flex;
  flex-direction: column;
}

.map-view {
  position: absolute;
  top: -22%;
  left: -22%;
  width: 144%;
  height: 144%;
  min-height: 560px;
  flex: 1;
  background: #0b1120;
  z-index: 1;
}

[data-theme="dark"] .leaflet-tile-pane {
  filter: brightness(0.65) invert(1) contrast(1.7) hue-rotate(200deg) saturate(0.3) !important;
}

[data-theme="dark"] #map.map-has-vector .leaflet-tile-pane,
[data-theme="dark"] #map.map-is-satellite .leaflet-tile-pane,
[data-theme="light"] .leaflet-tile-pane {
  filter: none !important;
}

.leaflet-gl-layer {
  pointer-events: none;
}

.map-floating-bar {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 500;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.drive-sim-status {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}

.sim-btn {
  background: linear-gradient(135deg, var(--ktm-orange), var(--ktm-orange-dark));
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: var(--radius-md);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 14px var(--ktm-orange-glow);
  white-space: nowrap;
  transition: all 0.2s ease;
}

.sim-btn:hover {
  transform: scale(1.02);
}

.sim-btn.running {
  background: linear-gradient(135deg, #f43f5e, #e11d48);
}

.trip-progress-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 180px;
}

.trip-stats {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
}

.trip-stats strong {
  color: var(--text-main);
}

.progress-bar-bg {
  width: 100%;
  height: 7px;
  background: var(--bg-input);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ktm-orange), #ff9900);
  box-shadow: 0 0 10px var(--ktm-orange-glow);
  transition: width 0.3s ease;
}

.map-layer-toggles {
  display: flex;
  align-items: center;
  gap: 12px;
}

.switch-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  user-select: none;
}

.switch-label input {
  display: none;
}

.switch-slider {
  width: 34px;
  height: 18px;
  background: var(--bg-input);
  border-radius: var(--radius-full);
  position: relative;
  transition: background 0.2s ease;
  border: 1px solid var(--border-color);
}

.switch-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.switch-label input:checked+.switch-slider {
  background: var(--ktm-orange);
}

.switch-label input:checked+.switch-slider::after {
  transform: translateX(16px);
}

.ambient-indicator-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 500;
  background: var(--bg-panel);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-color);
  backdrop-filter: blur(8px);
}

/* ==========================================================================
   TIMELINE RIBBON SIDEBAR (AHEAD-ON-ROUTE)
   ========================================================================== */
.timeline-sidebar {
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(100vh - 180px);
  overflow-y: auto;
}

.timeline-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.timeline-title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.timeline-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.timeline-title i {
  color: var(--ktm-orange);
}

.ahead-badge {
  background: var(--ktm-orange-subtle);
  color: var(--ktm-orange);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 102, 0, 0.3);
}

.timeline-subtitle {
  font-size: 12px;
  color: var(--text-dim);
}

/* Filter / Sort Pills */
.timeline-filter-pills {
  display: flex;
  gap: 6px;
}

.filter-pill {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}

.filter-pill.active {
  background: var(--bg-input);
  color: var(--ktm-orange);
  border-color: var(--ktm-orange);
}

/* Station Cards Stream */
.stations-list-stream {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.station-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  position: relative;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.station-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--ktm-orange);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.station-card.passed {
  opacity: 0.45;
  filter: grayscale(0.8);
  border-style: dashed;
}

/* Recommended Top Savings Pill (Clean internal header, no overflow) */
.station-card.top-savings {
  border: 2px solid var(--ktm-orange);
  box-shadow: 0 4px 20px var(--ktm-orange-glow);
}

.recommend-badge-pill {
  background: linear-gradient(90deg, var(--ktm-orange), var(--ktm-orange-dark));
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
  width: fit-content;
}

.station-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.station-brand-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.brand-badge {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  background: transparent;
}

.brand-badge svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Spanish Brand Logos/Colors */
.brand-repsol {
  background: linear-gradient(135deg, #002B49, #FF5000);
  color: #fff;
}

.brand-moeve {
  background: linear-gradient(135deg, #00C3FF, #0066FF);
  color: #fff;
}

.brand-bp {
  background: linear-gradient(135deg, #008800, #78BE20);
  color: #fff;
}

.brand-petroprix {
  background: linear-gradient(135deg, #5B21B6, #3B0764);
  color: #fff;
}

.brand-plenoil {
  background: linear-gradient(135deg, #FFD100, #CA8A04);
  color: #000 !important;
}

.brand-galp {
  background: linear-gradient(135deg, #FF5500, #C2410C);
  color: #fff;
}

.brand-ballenoil {
  background: linear-gradient(135deg, #00458C, #002D62);
  color: #fff;
}

.brand-shell {
  background: linear-gradient(135deg, #FBCE07, #DD1D21);
  color: #000 !important;
}

.brand-bonarea {
  background: linear-gradient(135deg, #D71920, #991B1B);
  color: #fff;
}

.brand-avia {
  background: linear-gradient(135deg, #E11D48, #BE123C);
  color: #fff;
}

.brand-valcarce {
  background: linear-gradient(135deg, #1E3A8A, #DC2626);
  color: #fff;
}

.brand-disa {
  background: linear-gradient(135deg, #0D9488, #047857);
  color: #fff;
}

.brand-q8 {
  background: linear-gradient(135deg, #002B49, #0284C7);
  color: #fff;
}

.brand-meroil {
  background: linear-gradient(135deg, #0369A1, #0284C7);
  color: #fff;
}

.brand-tesla {
  background: linear-gradient(135deg, #E82127, #9B1115);
  color: #fff;
}

.brand-ionity {
  background: linear-gradient(135deg, #E11D48, #9F1239);
  color: #fff;
}

.brand-zunder {
  background: linear-gradient(135deg, #FACC15, #CA8A04);
  color: #000 !important;
}

.brand-iberdrola {
  background: linear-gradient(135deg, #008744, #0284C7);
  color: #fff;
}

.brand-endesa {
  background: linear-gradient(135deg, #002B49, #0284C7);
  color: #fff;
}

.brand-wenea {
  background: linear-gradient(135deg, #06B6D4, #0891B2);
  color: #000 !important;
}

.brand-generic {
  background: linear-gradient(135deg, #475569, #334155);
  color: #fff;
}

/* EV Electromovilidad Badges */
.ev-power-badge {
  background: rgba(0, 230, 118, 0.15);
  border: 1px solid rgba(0, 230, 118, 0.35);
  color: #00e676;
  font-weight: 800;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ev-connectors-badge {
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid rgba(6, 182, 212, 0.35);
  color: #06b6d4;
  font-weight: 700;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ev-time-badge {
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: #fbbf24;
  font-weight: 700;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ev-plugs-badge {
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #a855f7;
  font-weight: 700;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.station-names {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.station-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.station-dist-ahead {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.station-price-box {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  flex-shrink: 0;
}

.station-price {
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 16px;
  font-weight: 900;
  color: var(--text-main);
  line-height: 1;
}

.station-unit {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
}

.station-card-details {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
  font-size: 12px;
}

.detour-tag {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
}

.detour-tag.direct {
  color: var(--ktm-orange);
}

.detour-tag.detour {
  color: var(--accent-amber);
}

.savings-tag {
  background: var(--ktm-orange-subtle);
  color: var(--ktm-orange);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-weight: 800;
  border: 1px solid rgba(255, 102, 0, 0.3);
  font-size: 11px;
}

.station-actions {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}

.nav-station-btn {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nav-station-btn:hover {
  background: var(--ktm-orange);
  color: #fff;
  border-color: var(--ktm-orange);
}

/* ==========================================================================
   VERTICAL MOTORSPORT MAP PINS (BRAND ICON ON TOP + PRICE UNDERNEATH)
   ========================================================================== */
.map-pin-vertical-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
  transition: transform 0.2s ease;
}

.map-pin-vertical-wrap:hover {
  transform: translateY(-4px) scale(1.1);
  z-index: 1000 !important;
}

.map-pin-card {
  background: var(--bg-panel-solid);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 76px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
}

.map-pin-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.map-pin-brand-icon {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.map-pin-brand-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.map-pin-brand-name {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-main);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  max-width: 65px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-pin-price-tag {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  color: var(--ktm-orange);
  line-height: 1.1;
  letter-spacing: -0.3px;
}

.map-pin-arrow {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--bg-panel-solid);
  margin-top: -1px;
}

/* Top Recommended Pin Highlight */
.map-pin-vertical-wrap.top-deal .map-pin-card {
  border: 2px solid var(--ktm-orange);
  box-shadow: 0 0 16px var(--ktm-orange-glow);
  background: var(--bg-card-hover);
}

.map-pin-vertical-wrap.top-deal .map-pin-arrow {
  border-top-color: var(--ktm-orange);
}

.map-pin-vertical-wrap.passed-pin {
  opacity: 0.4;
  filter: grayscale(0.8);
}

/* Real Navigation Vehicle Marker (CarPlay / Waze Style) */
.car-marker-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  pointer-events: none;
}

.nav-vehicle-container {
  width: 44px;
  height: 44px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1);
}

.nav-vehicle-aura {
  position: absolute;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.45) 0%, rgba(0, 210, 255, 0.05) 60%, transparent 70%);
  animation: navAuraPulse 2s infinite ease-out;
}

@keyframes navAuraPulse {
  0% {
    transform: scale(0.85);
    opacity: 0.9;
  }

  50% {
    transform: scale(1.35);
    opacity: 0.25;
  }

  100% {
    transform: scale(0.85);
    opacity: 0.9;
  }
}

.nav-vehicle-arrow {
  width: 32px;
  height: 32px;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.65));
}

/* Sponsored Partner Banner */
.sponsored-banner-card {
  background: linear-gradient(135deg, rgba(255, 102, 0, 0.12), rgba(255, 102, 0, 0.04));
  border: 1.5px solid rgba(255, 102, 0, 0.35);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sponsored-tag {
  font-size: 9px;
  font-weight: 800;
  color: var(--ktm-orange);
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.sponsored-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sponsored-icon {
  font-size: 24px;
  color: var(--ktm-orange);
}

.sponsored-info h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}

.sponsored-info p {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}

.claim-promo-btn {
  background: var(--ktm-orange);
  color: #fff;
  border: none;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-weight: 800;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}

/* ==========================================================================
   NATIVE AD BANNER & MONETIZATION COMPONENTS
   ========================================================================== */
.native-timeline-ad {
  background: linear-gradient(135deg, rgba(255, 102, 0, 0.08), rgba(0, 208, 132, 0.04));
  border: 1px dashed rgba(255, 102, 0, 0.35);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  transition: all 0.2s ease;
  margin: 4px 0;
}

.native-timeline-ad:hover {
  border-color: var(--ktm-orange);
  background: linear-gradient(135deg, rgba(255, 102, 0, 0.12), rgba(0, 208, 132, 0.08));
}

.native-ad-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.native-ad-sponsor-label {
  font-size: 9px;
  font-weight: 800;
  color: var(--ktm-orange);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.native-ad-remove-pro {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: color 0.15s ease;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.native-ad-remove-pro:hover {
  color: #ffaa00;
  border-color: #ffaa00;
}

.native-ad-body {
  display: flex;
  align-items: center;
  gap: 8px;
}

.native-ad-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 102, 0, 0.15);
  color: var(--ktm-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.native-ad-info {
  flex: 1;
  min-width: 0;
}

.native-ad-info h4 {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.native-ad-info p {
  font-size: 10px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.native-ad-btn {
  background: var(--ktm-orange);
  color: #fff !important;
  font-size: 10px;
  font-weight: 800;
  padding: 5px 9px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(255, 102, 0, 0.3);
  transition: transform 0.15s ease, background 0.15s ease;
}

.native-ad-btn:hover {
  background: #ff771a;
  transform: translateY(-1px);
}

/* Modal Pro / Quitar Anuncios */
.pro-modal-box {
  max-width: 420px !important;
  padding: 22px !important;
  text-align: center;
}

.pro-modal-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 170, 0, 0.2), rgba(255, 102, 0, 0.3));
  border: 2px solid var(--ktm-orange);
  color: #ffaa00;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px auto;
  box-shadow: 0 4px 16px rgba(255, 102, 0, 0.35);
}

.pro-features-list {
  text-align: left;
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
}

.pro-feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-main);
  background: var(--bg-card);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.pro-feature-item i {
  color: #00d084;
}

.pro-price-cta {
  background: linear-gradient(135deg, var(--ktm-orange), #ff8833);
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(255, 102, 0, 0.4);
  transition: transform 0.16s ease;
}

.pro-price-cta:hover {
  transform: scale(1.02);
}

/* ==========================================================================
   SLEEK & ULTRA-MINIMAL AUTOMOTIVE FOOTER
   ========================================================================== */
.app-footer {
  background: var(--bg-card);
  border-top: 1px solid var(--border-color);
  padding: 10px 16px !important;
  margin-top: 16px;
}

.footer-container-clean {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  text-align: center;
}

.footer-clean-links {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-clean-btn {
  background: none;
  border: none;
  padding: 2px 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.16s ease;
}

.footer-clean-btn:hover {
  color: var(--ktm-orange);
}

.footer-sep {
  color: var(--text-muted);
  opacity: 0.4;
  font-size: 10px;
}

.footer-clean-disclaimer {
  font-size: 10.5px;
  color: var(--text-muted);
  opacity: 0.75;
  line-height: 1.35;
  max-width: 800px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .app-footer {
    padding: 8px 12px max(14px, var(--sab)) !important;
    margin-top: 12px;
  }

  .footer-clean-links {
    gap: 6px;
  }

  .footer-clean-btn {
    font-size: 10.5px;
  }

  .footer-clean-disclaimer {
    font-size: 9.5px;
  }
}


/* ==========================================================================
   MODALS
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.modal-box {
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  max-height: 85dvh;
  overflow-y: auto;
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  box-shadow: var(--shadow-lg);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.station-detail-box {
  max-width: 540px;
  max-height: 85vh;
  max-height: 85dvh;
  overflow-y: auto;
  padding-top: 0;
}

.station-detail-box .modal-header {
  position: sticky;
  top: 0;
  background: var(--bg-panel-solid, #131b28);
  z-index: 20;
  margin: 0 -24px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  backdrop-filter: blur(12px);
}

.station-deselect-pill-btn {
  background: rgba(239, 68, 68, 0.14);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.35);
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  transition: all 0.2s ease;
}

.station-deselect-pill-btn:hover {
  background: rgba(239, 68, 68, 0.28);
  border-color: #ef4444;
}

.station-modal-bottom-close-btn {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.station-modal-bottom-close-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.close-modal-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.close-modal-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  transform: scale(1.05);
}

.fuel-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.fuel-opt-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 12px;
  border-radius: var(--radius-md);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fuel-opt-btn:hover {
  border-color: var(--ktm-orange);
}

.fuel-opt-btn.active {
  background: var(--ktm-orange-subtle);
  border-color: var(--ktm-orange);
}

.fuel-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-main);
}

.fuel-avg {
  font-size: 11px;
  color: var(--text-muted);
}

.tank-settings {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.tank-settings label {
  font-size: 13px;
  color: var(--text-muted);
}

.tank-settings strong {
  color: var(--ktm-orange);
}

.tank-settings input[type="range"] {
  width: 100%;
  accent-color: var(--ktm-orange);
}

/* PRO Modal */
.pro-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pro-crown-badge {
  width: 38px;
  height: 38px;
  background: var(--ktm-orange);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  box-shadow: 0 4px 14px var(--ktm-orange-glow);
}

.pro-subtitle {
  font-size: 13px;
  color: var(--text-muted);
}

.pro-features-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pro-feat-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.pro-feat-item i {
  color: var(--ktm-orange);
  font-size: 16px;
  margin-top: 2px;
}

.pro-feat-item strong {
  font-size: 13px;
  color: var(--text-main);
}

.pro-feat-item p {
  font-size: 11px;
  color: var(--text-muted);
}

.pricing-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}

.price-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  position: relative;
}

.price-card.popular {
  border-color: var(--ktm-orange);
  background: var(--ktm-orange-subtle);
}

.save-tag {
  position: absolute;
  top: -8px;
  background: var(--ktm-orange);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.price-val {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--text-main);
}

.price-val span {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

.price-equiv {
  font-size: 10px;
  color: var(--text-dim);
}

.subscribe-btn {
  width: 100%;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  margin-top: 4px;
}

.highlight-btn {
  background: var(--ktm-orange);
  color: #fff;
  border: none;
}

.secondary-btn {
  background: var(--bg-input);
  color: var(--text-main);
  border: 1px solid var(--border-color);
}

/* Legal Modal */
.legal-modal-box {
  max-width: 640px;
  max-height: 80vh;
}

.legal-modal-body {
  overflow-y: auto;
  max-height: 50vh;
  padding-right: 8px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.legal-modal-body h4 {
  color: var(--text-main);
  font-size: 14px;
  margin-top: 6px;
}

.legal-company-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 12px;
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Cookie Banner */
.cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  max-width: 900px;
  margin: 0 auto;
  background: var(--bg-panel-solid);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  z-index: 3000;
  backdrop-filter: blur(12px);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.cookie-text {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--text-muted);
  flex: 1;
}

.cookie-text i {
  font-size: 20px;
  color: var(--ktm-orange);
}

.cookie-text a {
  color: var(--ktm-orange);
  text-decoration: underline;
}

.cookie-actions {
  display: flex;
  gap: 10px;
  white-space: nowrap;
}

.cookie-accept-btn {
  background: var(--ktm-orange);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}

.cookie-essential-btn {
  background: var(--bg-input);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
}

/* Responsive adjustments (Mobile-First Polish) */
html,
body,
.app-container {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 992px) {
  .route-inputs-container {
    grid-template-columns: 1fr;
  }

  .route-connector-box {
    display: none;
  }

  .main-content-layout {
    grid-template-columns: 1fr;
  }

  .timeline-sidebar {
    max-height: 480px;
  }

  .top-header {
    padding: 10px 16px;
  }

  .route-search-panel {
    margin: 10px 14px 0 14px;
    padding: 12px 14px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .cookie-banner {
    flex-direction: column;
    align-items: stretch;
  }

  .cookie-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 768px) {

  /* Header: Clean, single sleek row on mobile with full safe-area protection */
  .top-header {
    padding-top: max(14px, var(--sat)) !important;
    padding-bottom: 10px !important;
    padding-left: max(12px, var(--sal)) !important;
    padding-right: max(12px, var(--sar)) !important;
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: space-between;
  }

  .brand-symbol-raw {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
  }

  .brand-name {
    font-size: 19px;
  }

  .brand-tagline {
    display: none !important;
  }

  .header-controls {
    gap: 6px;
    flex-wrap: nowrap;
    align-items: center;
  }

  /* Hide all non-essential cluttered controls in mobile header */
  #cockpitHudBtn,
  #helpGuideBtn,
  #headerRatingBtn,
  #vehicleConfigBtn,
  .vehicle-pill-btn,
  .pro-btn,
  .theme-switch-group {
    display: none !important;
  }

  .fuel-selector-badge {
    padding: 7px 12px;
    font-size: 12.5px;
    font-weight: 700;
    gap: 6px;
    white-space: nowrap;
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
  }

  .fuel-selector-badge:active {
    border-color: var(--ktm-orange);
  }

  /* Completely suppress annoying cookie banner on mobile app */
  .cookie-banner {
    display: none !important;
  }

  /* Route Search Panel: 100% contained, no right overflow */
  .route-search-panel {
    margin: 8px 10px 0 10px;
    padding: 10px 12px;
    box-sizing: border-box;
    width: auto;
  }

  .copilot-active-strip {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 8px 10px;
  }

  .copilot-route-badge {
    font-size: 12.5px;
    min-width: 0;
  }

  .copilot-quick-actions {
    justify-content: space-between;
    width: 100%;
    gap: 6px;
  }

  .copilot-action-btn {
    flex: 1;
    justify-content: center;
    padding: 7px 6px;
    font-size: 11px;
  }

  .route-presets {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .route-presets::-webkit-scrollbar {
    display: none;
  }

  .preset-pill {
    flex-shrink: 0;
    font-size: 11px;
    padding: 5px 11px;
  }

  .route-inputs-container {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .input-row {
    height: 46px;
    padding: 4px 8px;
    gap: 6px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .input-row input {
    font-size: 13px;
    min-width: 0;
  }

  .action-slot-btn {
    height: 36px;
    padding: 0 10px;
    font-size: 11px;
    flex-shrink: 0;
  }

  .quick-nav-best-card {
    bottom: 12px;
    width: calc(100% - 20px);
    padding: 9px 12px;
  }

  .quick-nav-body {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .quick-nav-metrics-row {
    flex-wrap: wrap;
    gap: 4px;
  }

  .quick-metric-pill {
    font-size: 10px;
    padding: 2px 6px;
  }

  .quick-nav-cta-btn {
    padding: 8px 14px;
    font-size: 12px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   HEADER ACTIONS (CARPLAY HUD, VEHICLE CONFIG, 5-STAR RATING)
   ========================================================================== */
.cockpit-hud-btn {
  background: rgba(255, 102, 0, 0.15);
  border: 1.5px solid var(--ktm-orange);
  color: var(--ktm-orange);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cockpit-hud-btn:hover {
  background: var(--ktm-orange);
  color: #fff;
  box-shadow: 0 0 12px rgba(255, 102, 0, 0.5);
  transform: translateY(-1px);
}

.vehicle-pill-btn {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vehicle-pill-btn:hover {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
}

.rating-badge-btn {
  background: rgba(255, 187, 0, 0.15);
  border: 1px solid rgba(255, 187, 0, 0.4);
  color: #ffbb00;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-weight: 800;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.rating-badge-btn:hover {
  background: #ffbb00;
  color: #000;
}

/* ==========================================================================
   VEHICLE PROFILE MODAL
   ========================================================================== */
.vehicle-modal-box {
  max-width: 480px;
  width: 90%;
  padding: 24px;
}

.engine-type-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}

.engine-pill-btn {
  background: var(--bg-input);
  border: 1.5px solid var(--border-color);
  color: var(--text-muted);
  padding: 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.engine-pill-btn:hover {
  border-color: var(--ktm-orange);
  color: var(--text-main);
}

.engine-pill-btn.active {
  background: rgba(255, 102, 0, 0.15);
  border-color: var(--ktm-orange);
  color: var(--ktm-orange);
}

#engineElectricBtn.active {
  background: rgba(0, 230, 118, 0.15);
  border-color: #00e676;
  color: #00e676;
}

/* Time Sensitivity (Cost of Time) Selector */
.time-sensitivity-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}

.section-subheading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 10px;
}

.time-sensitivity-selector {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.time-sensitivity-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-input);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  color: var(--text-main);
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.time-sensitivity-card:hover {
  border-color: var(--ktm-orange);
  background: rgba(255, 102, 0, 0.06);
  transform: translateY(-1px);
}

.time-sensitivity-card.active {
  border-color: var(--ktm-orange);
  background: rgba(255, 102, 0, 0.14);
  box-shadow: 0 0 0 1px var(--ktm-orange);
}

.time-sensitivity-card .sens-icon {
  font-size: 18px;
  color: var(--ktm-orange);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 102, 0, 0.12);
  border-radius: 8px;
  flex-shrink: 0;
}

.time-sensitivity-card.active .sens-icon {
  background: var(--ktm-orange);
  color: #ffffff;
}

.time-sensitivity-card .sens-info {
  flex: 1;
}

.time-sensitivity-card .sens-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 6px;
}

.time-sensitivity-card .sens-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.35;
}

.sens-badge-recommended {
  position: absolute;
  top: -8px;
  right: 12px;
  background: var(--ktm-orange);
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 6px rgba(255, 102, 0, 0.4);
}

.ev-power-badge {
  background: rgba(0, 230, 118, 0.15);
  color: #00e676;
  border: 1px solid rgba(0, 230, 118, 0.35);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 800;
}

.ev-connectors-badge {
  background: rgba(51, 204, 255, 0.15);
  color: #33ccff;
  border: 1px solid rgba(51, 204, 255, 0.35);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
}

.ev-time-badge {
  background: rgba(255, 187, 0, 0.15);
  color: #ffbb00;
  border: 1px solid rgba(255, 187, 0, 0.35);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
}

/* EV Brand Badges */
.brand-tesla {
  background: #E82127;
  color: #fff;
}

.brand-iberdrola {
  background: #008744;
  color: #fff;
}

.brand-zunder {
  background: #FACC15;
  color: #000;
}

.brand-ionity {
  background: #E11D48;
  color: #fff;
}

.brand-endesa {
  background: #002B49;
  color: #fff;
}

.brand-wenea {
  background: #06B6D4;
  color: #000;
}

.vehicle-form-group {
  margin-bottom: 18px;
}

.vehicle-form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 6px;
}

.vehicle-form-group label strong {
  color: var(--ktm-orange);
  font-size: 14px;
}

.custom-input {
  width: 100%;
  background: var(--bg-input);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--text-main);
  font-family: inherit;
  font-size: 14px;
}

.custom-input:focus {
  border-color: var(--ktm-orange);
  outline: none;
}

.custom-range {
  width: 100%;
  accent-color: var(--ktm-orange);
  cursor: pointer;
}

.range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ==========================================================================
   5-STAR RATING BOOSTER MODAL (APP STORE & PLAY STORE FUNNEL)
   ========================================================================== */
.rating-modal-box {
  max-width: 440px;
  width: 90%;
  padding: 24px;
  text-align: center;
}

.rating-modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rating-icon-bounce {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--ktm-orange-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  border: 1px solid rgba(255, 102, 0, 0.3);
  animation: pulseGlow 2s infinite;
}

.rating-modal-content h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 6px;
}

.rating-modal-content p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 16px;
}

.star-rating-selector {
  display: flex;
  gap: 8px;
  font-size: 32px;
  color: #555;
  margin-bottom: 10px;
  cursor: pointer;
}

.star-item {
  transition: transform 0.2s ease, color 0.2s ease;
}

.star-item:hover,
.star-item.active {
  color: #ffbb00;
  transform: scale(1.15);
  text-shadow: 0 0 12px rgba(255, 187, 0, 0.6);
}

.rating-feedback-hint {
  font-size: 12px;
  font-weight: 700;
  color: var(--ktm-orange);
  margin-bottom: 20px;
}

.store-redirect-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}

.store-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  text-decoration: none;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-main);
  transition: all 0.2s ease;
}

.store-btn i {
  font-size: 24px;
}

.store-btn span {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.store-btn strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
}

.apple-store-btn:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

.google-play-btn:hover {
  background: #01875f;
  color: #ffffff;
  border-color: #01875f;
}

.feedback-textarea {
  width: 100%;
  min-height: 90px;
  background: var(--bg-input);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px;
  color: var(--text-main);
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
}

/* ==========================================================================
   APPLE CARPLAY & ANDROID AUTO COCKPIT HUD FULLSCREEN
   ========================================================================== */
.cockpit-hud-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #04060a;
  z-index: 5000;
  padding: env(safe-area-inset-top, 20px) 24px env(safe-area-inset-bottom, 20px) 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #fff;
  font-family: 'Inter', sans-serif;
  overflow-y: auto;
}

.cockpit-hud-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.1);
}

.hud-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: var(--ktm-orange);
}

.hud-logo {
  width: 28px;
  height: 28px;
}

.hud-top-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hud-pill-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.hud-pill-btn.active {
  background: rgba(0, 230, 118, 0.2);
  border-color: #00e676;
  color: #00e676;
}

.hud-close-btn {
  background: rgba(255, 68, 68, 0.15);
  border: 1px solid #ff4444;
  color: #ff4444;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.cockpit-hud-grid {
  display: grid;
  grid-template-columns: 320px 1fr 340px;
  gap: 16px;
  flex: 1;
}

@media (max-width: 1024px) {
  .cockpit-hud-grid {
    grid-template-columns: 1fr;
  }
}

.hud-card {
  background: rgba(15, 23, 42, 0.75);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(16px);
}

.hud-card-label {
  font-size: 11px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.hud-huge-num {
  font-family: 'Outfit', sans-serif;
  font-size: 56px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  margin-bottom: 4px;
}

.hud-unit {
  font-size: 20px;
  color: var(--ktm-orange);
  font-weight: 700;
}

.hud-subinfo {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 14px;
}

.hud-progress-line {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.hud-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ktm-orange), #ff9900);
  transition: width 0.3s ease;
}

.best-stop-card {
  border-color: var(--ktm-orange);
  box-shadow: 0 0 30px rgba(255, 102, 0, 0.2);
  justify-content: space-between;
}

.hud-stop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hud-badge-tag {
  background: var(--ktm-orange);
  color: #000;
  font-weight: 900;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.hud-detour-tag {
  background: rgba(0, 230, 118, 0.15);
  color: #00e676;
  border: 1px solid rgba(0, 230, 118, 0.3);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.hud-station-title {
  font-family: 'Outfit', sans-serif;
  font-size: 28px;
  font-weight: 900;
  color: #ffffff;
  margin: 14px 0;
}

.hud-stop-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.hud-metric-box {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 12px;
  text-align: center;
}

.hud-metric-box.highlight {
  border-color: rgba(255, 102, 0, 0.5);
  background: rgba(255, 102, 0, 0.1);
}

.m-label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 4px;
}

.m-val {
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 900;
}

.price-val {
  color: #fff;
}

.save-val {
  color: var(--ktm-orange);
}

.km-val {
  color: var(--accent-cyan);
}

.hud-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.hud-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  border: none;
  transition: transform 0.2s ease;
}

.hud-nav-btn:hover {
  transform: translateY(-2px);
}

.google-nav {
  background: #4285F4;
  color: #fff;
}

.waze-nav {
  background: #33ccff;
  color: #000;
}

.hud-queue-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: 420px;
}

.hud-queue-item {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.2s ease;
}

.hud-queue-item:hover {
  border-color: var(--ktm-orange);
  background: rgba(255, 102, 0, 0.08);
}

.hud-q-brand {
  font-weight: 800;
  font-size: 13px;
  color: #fff;
}

.hud-q-km {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.hud-q-price {
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 900;
  color: var(--ktm-orange);
}

/* ==========================================================================
   3-STEP GUIDED ONBOARDING MODAL
   ========================================================================== */
.onboarding-modal-box {
  max-width: 460px;
  width: 90%;
  padding: 26px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.onboarding-top-skip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.onboarding-step-indicator {
  font-size: 11px;
  font-weight: 800;
  color: var(--ktm-orange);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.skip-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
}

.skip-btn:hover {
  color: var(--text-main);
}

.onboarding-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 10px 0;
  animation: fadeIn 0.3s ease;
}

/* Floating Map Top Notifications Stack (Zero-Overlap Flow Container) */
.map-top-notifications-stack {
  position: absolute;
  top: max(10px, env(safe-area-inset-top, 10px));
  left: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 600;
  pointer-events: none;
  max-width: 480px;
  margin: 0 auto;
  box-sizing: border-box;
}

.map-top-notifications-stack > * {
  pointer-events: auto;
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  margin: 0 auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Subtle Floating GPS Weak Signal Pill */
.gps-weak-signal-pill {
  z-index: 505;
  background: rgba(22, 17, 8, 0.94);
  border: 1.5px solid rgba(255, 170, 0, 0.65);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 6px 14px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: #ffaa00;
  pointer-events: none;
  white-space: nowrap;
  animation: fadeIn 0.25s ease;
}

[data-theme="light"] .gps-weak-signal-pill {
  background: rgba(255, 251, 235, 0.96);
  border-color: #f59e0b;
  color: #b45309;
}

/* Professional Google Maps Style North Compass Dial */
.floating-compass-btn {
  position: absolute;
  top: max(12px, env(safe-area-inset-top, 12px));
  right: 14px;
  z-index: 560;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.94);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.25s ease, background-color 0.2s ease;
  user-select: none;
}

.floating-compass-btn:hover {
  transform: scale(1.06);
  border-color: rgba(239, 68, 68, 0.6);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55), 0 0 12px rgba(239, 68, 68, 0.3);
}

.floating-compass-btn:active {
  transform: scale(0.94);
}

[data-theme="light"] .floating-compass-btn {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.compass-dial {
  position: relative;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s cubic-bezier(0.2, 0, 0.2, 1);
  will-change: transform;
}

.compass-n-label {
  position: absolute;
  top: -4px;
  font-size: 8px;
  font-weight: 900;
  color: #ef4444;
  line-height: 1;
  letter-spacing: -0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .compass-n-label {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}



@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.onboarding-hero-icon {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  background: var(--ktm-orange-subtle);
  border: 1.5px solid rgba(255, 102, 0, 0.4);
  color: var(--ktm-orange);
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  box-shadow: 0 0 20px rgba(255, 102, 0, 0.2);
}

.onboarding-hero-icon.miteco {
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.22);
}

.onboarding-hero-icon.cockpit {
  background: rgba(99, 102, 241, 0.14);
  border-color: rgba(99, 102, 241, 0.4);
  color: #818cf8;
  box-shadow: 0 0 24px rgba(99, 102, 241, 0.22);
}

.onboarding-slide h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: var(--text-main);
  margin-bottom: 8px;
}

.onboarding-slide p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 380px;
}

.onboarding-dots-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 16px 0 14px 0;
}

.onboarding-dots-row .dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.2s ease;
}

.onboarding-dots-row .dot.active {
  width: 24px;
  background: var(--ktm-orange);
  box-shadow: 0 0 8px rgba(255, 102, 0, 0.6);
}

.onboarding-actions {
  width: 100%;
  display: flex;
  margin-top: 6px;
}

.onboarding-actions button,
#onboardingNextBtn {
  width: 100%;
  height: 48px;
  background: linear-gradient(135deg, var(--ktm-orange), var(--ktm-orange-dark));
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 16px var(--ktm-orange-glow);
  transition: all 0.2s ease;
}

.onboarding-actions button:hover,
#onboardingNextBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(255, 102, 0, 0.6);
}

.onboard-fuel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: 100%;
  margin-top: 14px;
}

.onboard-fuel-card,
.onboard-preset-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid var(--border-color);
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.16s ease;
}

.onboard-fuel-card i,
.onboard-preset-card i {
  font-size: 18px;
  color: var(--ktm-orange);
}

.onboard-fuel-card strong,
.onboard-preset-card strong {
  font-size: 13px;
  font-weight: 800;
}

.onboard-fuel-card span,
.onboard-preset-card span {
  font-size: 10.5px;
  color: var(--text-muted);
}

.onboard-fuel-card.active,
.onboard-preset-card.active {
  background: rgba(255, 102, 0, 0.16);
  border-color: var(--ktm-orange);
  box-shadow: 0 0 0 1px rgba(255, 102, 0, 0.35);
}

.onboard-preset-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: 100%;
  margin-top: 12px;
}

.onboard-sliders-box {
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}

.onboard-slider-item label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
}

[data-theme="light"] .onboard-fuel-card,
[data-theme="light"] .onboard-preset-card,
[data-theme="light"] .onboard-sliders-box {
  background: #f8fafc;
}

[data-theme="light"] .onboard-fuel-card.active,
[data-theme="light"] .onboard-preset-card.active {
  background: rgba(255, 102, 0, 0.12);
}

/* ==========================================================================
   FRIENDLY GPS PERMISSION PRIMING MODAL
   ========================================================================== */
.gps-priming-box {
  max-width: 440px;
  width: 90%;
  padding: 24px;
  text-align: center;
}

.gps-priming-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: rgba(51, 204, 255, 0.15);
  border: 1.5px solid rgba(51, 204, 255, 0.4);
  color: #33ccff;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px auto;
}

.gps-priming-box h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 900;
  color: var(--text-main);
  margin-bottom: 6px;
}

.gps-priming-box p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 14px;
}

.gps-privacy-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px;
  text-align: left;
  margin-bottom: 18px;
}

.gps-privacy-card i {
  color: #00e676;
  font-size: 18px;
  margin-top: 2px;
}

.gps-privacy-card strong {
  display: block;
  font-size: 12px;
  color: var(--text-main);
}

.gps-privacy-card span {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}

.gps-priming-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.secondary-modal-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.secondary-modal-btn:hover {
  background: var(--bg-input);
  color: var(--text-main);
}

/* ==========================================================================
   EV CHARGING CURVE & DEGRADATION STYLES (SPRINT 4)
   ========================================================================== */
.ev-modal-section {
  background: rgba(6, 182, 212, 0.05);
  border: 1.5px solid rgba(6, 182, 212, 0.25);
  border-radius: var(--radius-md);
  padding: 16px;
  margin: 12px 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.ev-dest-badge {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #10b981;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ev-curve-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 12px;
}

.ev-curve-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-main);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.ev-curve-segments-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.ev-segment-item {
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
  overflow: hidden;
}

.ev-segment-item.seg-fast {
  border-color: rgba(0, 230, 118, 0.35);
  background: rgba(0, 230, 118, 0.05);
}

.ev-segment-item.seg-medium {
  border-color: rgba(0, 210, 255, 0.35);
  background: rgba(0, 210, 255, 0.05);
}

.ev-segment-item.seg-slow {
  border-color: rgba(245, 158, 11, 0.4);
  background: rgba(245, 158, 11, 0.06);
}

.seg-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.seg-range {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-main);
}

.seg-pct {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
}

.seg-power {
  font-size: 15px;
  font-weight: 900;
  font-family: var(--font-display);
  color: var(--text-main);
}

.seg-fast .seg-power {
  color: #00e676;
}

.seg-medium .seg-power {
  color: #00d2ff;
}

.seg-slow .seg-power {
  color: #f59e0b;
}

.seg-time {
  font-size: 10px;
  color: var(--text-muted);
}

.seg-badge {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  align-self: flex-start;
  margin-top: 2px;
}

.seg-badge.fast {
  background: rgba(0, 230, 118, 0.2);
  color: #00e676;
}

.seg-badge.opt {
  background: rgba(0, 210, 255, 0.2);
  color: #00d2ff;
}

.seg-badge.slow {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

.ev-curve-warning {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  color: #fbbf24;
  line-height: 1.4;
}

.ev-curve-warning i {
  font-size: 14px;
  margin-top: 2px;
  flex-shrink: 0;
}

.ev-session-calc-card {
  background: var(--bg-card);
  border: 1.5px solid rgba(255, 102, 0, 0.35);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  box-shadow: 0 4px 14px rgba(255, 102, 0, 0.08);
}

.ev-session-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--text-main);
}

.ev-margin-badge {
  background: rgba(255, 102, 0, 0.15);
  border: 1px solid rgba(255, 102, 0, 0.4);
  color: var(--ktm-orange);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}

.ev-session-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.ev-stat-col {
  background: var(--bg-input);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
}

.ev-stat-col.highlight {
  background: rgba(255, 102, 0, 0.06);
  border-color: rgba(255, 102, 0, 0.25);
}

.stat-label {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  font-weight: 700;
  display: block;
}

.stat-value {
  font-size: 12px;
  color: var(--text-main);
  margin-top: 2px;
  display: block;
}

.stat-value.cost {
  font-size: 16px;
  font-weight: 900;
  color: var(--ktm-orange);
  font-family: var(--font-display);
}

.stat-value.time {
  font-size: 14px;
  font-weight: 800;
  color: #00e676;
}

@media (max-width: 480px) {
  .ev-curve-segments-grid {
    grid-template-columns: 1fr;
  }

  .ev-session-stats {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   SPRINT 3: MONETIZATION, AFFILIATION & MULTI-APP NAVIGATION
   ========================================================================== */

/* PRO Button Active State */
.pro-btn.pro-active {
  background: linear-gradient(135deg, #ffd700, #ff9900) !important;
  color: #070a10 !important;
  border-color: #ffe600 !important;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.45) !important;
  font-weight: 900 !important;
}

.pro-btn.pro-active i {
  color: #070a10 !important;
}

.pro-status-box {
  background: rgba(255, 215, 0, 0.08);
  border: 1.5px solid rgba(255, 215, 0, 0.35);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.pro-status-icon {
  font-size: 28px;
  color: #ffd700;
}

.pro-status-text h4 {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 2px;
}

.pro-status-text p {
  font-size: 12px;
  color: var(--text-muted);
}

.pro-manage-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.pro-manage-btn {
  background: var(--bg-panel-solid);
  border: 1px solid var(--border-color);
  color: var(--text-dim);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pro-manage-btn:hover {
  color: var(--text-main);
  border-color: var(--text-muted);
}

/* 1-Tap Multi-App Navigation (Waze, Google Maps, Apple Maps) */
.nav-multiapp-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.nav-app-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}

.nav-app-btn.google-btn {
  background: rgba(66, 133, 244, 0.12);
  color: #60a5fa;
  border-color: rgba(66, 133, 244, 0.3);
}

.nav-app-btn.google-btn:hover {
  background: rgba(66, 133, 244, 0.22);
  transform: translateY(-1px);
}

.nav-app-btn.waze-btn {
  background: rgba(51, 204, 255, 0.12);
  color: #38bdf8;
  border-color: rgba(51, 204, 255, 0.3);
}

.nav-app-btn.waze-btn:hover {
  background: rgba(51, 204, 255, 0.22);
  transform: translateY(-1px);
}

.nav-app-btn.apple-btn {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  border-color: var(--border-color);
}

.nav-app-btn.apple-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

/* Affiliation & Fuel Card Cashback Box */
.affiliation-box {
  background: linear-gradient(135deg, rgba(255, 102, 0, 0.08), rgba(0, 230, 118, 0.04));
  border: 1px solid rgba(255, 102, 0, 0.3);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.affiliation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.affiliation-tag {
  font-size: 10px;
  font-weight: 800;
  color: var(--ktm-orange);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.affiliation-badge-bonus {
  font-size: 10px;
  font-weight: 800;
  background: rgba(0, 230, 118, 0.18);
  color: #00e676;
  border: 1px solid rgba(0, 230, 118, 0.35);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.affiliation-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.3;
}

.affiliation-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}

.affiliation-action-btn {
  background: linear-gradient(135deg, var(--ktm-orange), #ff7700);
  color: #fff;
  border: none;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 3px 10px var(--ktm-orange-glow);
  transition: all var(--transition-fast);
}

.affiliation-action-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

/* Native Contextual Timeline Ad (Non-Intrusive) */
.native-timeline-ad {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.8));
  border: 1px solid rgba(255, 102, 0, 0.25);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin: 12px 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.native-ad-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.native-ad-sponsor-label {
  font-size: 9px;
  font-weight: 800;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.native-ad-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 11px;
  cursor: pointer;
}

.native-ad-body {
  display: flex;
  align-items: center;
  gap: 12px;
}

.native-ad-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: rgba(255, 102, 0, 0.15);
  color: var(--ktm-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 102, 0, 0.3);
}

.native-ad-info {
  flex: 1;
}

.native-ad-info h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 2px;
}

.native-ad-info p {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}

.native-ad-btn {
  background: var(--bg-panel-solid);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  transition: all var(--transition-fast);
}

.native-ad-btn:hover {
  border-color: var(--ktm-orange);
  color: var(--ktm-orange);
}

/* ==========================================================================
   1-TAP QUICK-NAV TO BEST HIGHWAY STATION
   ========================================================================== */
.quick-nav-best-card {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 440px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 102, 0, 0.45);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 16px rgba(255, 102, 0, 0.18);
  background: var(--bg-panel);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: slideUpFade 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.quick-nav-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.quick-nav-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.quick-nav-deselect-btn {
  background: rgba(239, 68, 68, 0.16);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #ef4444;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.quick-nav-deselect-btn:hover {
  background: rgba(239, 68, 68, 0.28);
  border-color: #ef4444;
}

.station-info-trigger-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.station-info-trigger-btn:hover {
  background: rgba(0, 210, 255, 0.15);
  color: #00d2ff;
  border-color: rgba(0, 210, 255, 0.4);
}

.quick-nav-dismiss-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1;
  transition: all 0.2s ease;
}

.quick-nav-dismiss-btn:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.1);
}

.quick-nav-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  color: var(--ktm-orange);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0;
}

.live-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  display: inline-block;
  animation: pulseLive 1.5s infinite;
}

@keyframes pulseLive {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }

  70% {
    transform: scale(1.15);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.quick-nav-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.quick-nav-main-info {
  flex: 1;
  min-width: 0;
}

.quick-nav-station-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 3px;
}

.brand-badge.mini {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.quick-nav-name {
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.2px;
  max-width: 250px;
}

.quick-nav-metrics-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.quick-metric-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.quick-metric-pill.save {
  background: rgba(16, 185, 129, 0.18);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.quick-metric-pill.detour {
  background: rgba(6, 182, 212, 0.16);
  color: #06b6d4;
  border: 1px solid rgba(6, 182, 212, 0.35);
}

.quick-metric-pill.price {
  background: var(--bg-input);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  font-weight: 800;
}

.quick-metric-pill.dist {
  background: rgba(255, 102, 0, 0.14);
  color: var(--ktm-orange);
  border: 1px solid rgba(255, 102, 0, 0.3);
}

.quick-metric-pill.schedule {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dim);
  border: 1px solid var(--border-color);
}

.quick-metric-pill.schedule.schedule-open,
.quick-metric-pill.schedule.schedule-24h {
  color: #00e676;
  border-color: rgba(0, 230, 118, 0.35);
  background: rgba(0, 230, 118, 0.12);
}

.quick-nav-cta-btn {
  background: linear-gradient(135deg, var(--ktm-orange), #ff4400);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  min-height: 40px;
  padding: 0 14px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255, 102, 0, 0.4);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  flex-shrink: 0;
}

.quick-nav-cta-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 24px rgba(255, 102, 0, 0.6);
}

.quick-nav-cta-btn:active {
  transform: translateY(1px) scale(0.98);
}

/* Quick Nav Modal Box */
.quick-nav-modal-box {
  max-width: 440px;
  width: 92%;
  padding: 22px;
}

.quick-nav-options-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.quick-nav-option-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  color: var(--text-main);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}

.quick-nav-option-btn:hover {
  border-color: var(--ktm-orange);
  background: var(--bg-card-hover);
  transform: translateX(4px);
  box-shadow: var(--shadow-sm);
}

.quick-nav-option-btn .option-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.quick-nav-option-btn.google .option-icon {
  background: rgba(234, 67, 53, 0.15);
  color: #ea4335;
}

.quick-nav-option-btn.waze .option-icon {
  background: rgba(51, 204, 255, 0.15);
  color: #00d2ff;
}

.quick-nav-option-btn.apple .option-icon {
  background: rgba(255, 255, 255, 0.15);
  color: var(--text-main);
}

.quick-nav-option-btn.cockpit .option-icon {
  background: rgba(255, 102, 0, 0.18);
  color: var(--ktm-orange);
}

.quick-nav-option-btn .option-details {
  flex: 1;
  text-align: left;
}

.quick-nav-option-btn .option-details strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
}

.quick-nav-option-btn .option-details span {
  font-size: 11px;
  color: var(--text-muted);
}

.quick-nav-option-btn .option-arrow {
  color: var(--text-dim);
  font-size: 14px;
}

/* ==========================================================================
   1-TAP HIGHWAY SELECTOR & COPILOT NAVIGATION (Clean, Zero-Clutter UX)
   ========================================================================== */
.highway-selector-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 40px;
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
  animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 100%;
  box-sizing: border-box;
}

.selector-hero-header {
  text-align: center;
  max-width: 600px;
  margin-bottom: 24px;
  width: 100%;
}

.selector-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 102, 0, 0.12);
  color: var(--ktm-orange);
  border: 1px solid rgba(255, 102, 0, 0.3);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.selector-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 5vw, 34px);
  font-weight: 900;
  color: var(--text-main);
  line-height: 1.2;
  margin-bottom: 8px;
}

.selector-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 20px;
}

/* GPS 1-Tap Auto-detect Hero CTA */
.gps-autodetect-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  background: linear-gradient(135deg, rgba(0, 208, 132, 0.16), rgba(0, 168, 106, 0.08));
  border: 2px solid #00d084;
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 16px rgba(0, 208, 132, 0.15);
  text-align: left;
}

.gps-autodetect-cta:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(0, 208, 132, 0.24), rgba(0, 168, 106, 0.14));
  box-shadow: 0 6px 24px rgba(0, 208, 132, 0.25);
}

.gps-autodetect-cta i.fa-crosshairs {
  font-size: 26px;
  color: #00d084;
  animation: pulseGlow 2s infinite ease-in-out;
}

.gps-cta-text {
  flex: 1;
}

.gps-cta-text strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
}

.gps-cta-text span {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.gps-cta-arrow {
  color: #00d084;
  font-size: 16px;
  transition: transform 0.2s;
}

.gps-autodetect-cta:hover .gps-cta-arrow {
  transform: translateX(4px);
}

/* Highway Grid Cards */
.highways-grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  width: 100%;
  margin-bottom: 24px;
}

.highway-card-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.highway-card-btn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--ktm-orange);
  opacity: 0;
  transition: opacity 0.2s;
}

.highway-card-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--ktm-orange);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.highway-card-btn:hover::before {
  opacity: 1;
}

.highway-shield {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 38px;
  padding: 0 8px;
  background: #004d99;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
  border-radius: 6px;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.highway-meta {
  flex: 1;
  min-width: 0;
}

.highway-meta strong {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.highway-meta span {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.highway-badge-deal {
  background: rgba(0, 208, 132, 0.12);
  color: #00d084;
  border: 1px solid rgba(0, 208, 132, 0.3);
  font-size: 13px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Selector Footer & Optional Custom Search */
.selector-footer-custom {
  width: 100%;
  text-align: center;
  margin-top: 8px;
  margin-bottom: 16px;
}

.custom-search-text-link {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 20px;
  transition: all 0.2s;
}

.custom-search-text-link:hover {
  color: var(--ktm-orange);
  background: rgba(255, 102, 0, 0.08);
}

.manual-search-box {
  width: 100%;
  max-width: 680px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-top: 8px;
  animation: fadeIn 0.2s ease;
}

.manual-search-inputs-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.manual-search-inputs-row input {
  flex: 1 1 140px;
  min-width: 120px;
  background: var(--bg-body);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--text-main);
  font-size: 14px;
}

.manual-icon-btn {
  background: var(--bg-body);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.manual-calc-btn {
  background: var(--ktm-orange);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

/* ==========================================================================
   COPILOT ACTIVE CONTAINER & TOPBAR
   ========================================================================== */
.copilot-active-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
}

.copilot-nav-topbar {
  display: none !important;
}

.back-selector-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-body);
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.back-selector-btn:hover {
  border-color: var(--ktm-orange);
  color: var(--ktm-orange);
}

.copilot-nav-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  justify-content: center;
}

.copilot-nav-title strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.copilot-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.copilot-circle-action {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-body);
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.copilot-circle-action:hover,
.copilot-circle-action.active {
  background: var(--ktm-orange);
  color: #fff;
  border-color: var(--ktm-orange);
}

/* Quick Nav Best Card Updates */
.quick-nav-speak-btn {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 102, 0, 0.12);
  border: 1px solid rgba(255, 102, 0, 0.3);
  color: var(--ktm-orange);
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.quick-nav-speak-btn:hover {
  background: var(--ktm-orange);
  color: #fff;
}

.quick-metric-pill.direct {
  background: rgba(0, 208, 132, 0.15);
  color: #00d084;
  border: 1px solid rgba(0, 208, 132, 0.3);
}

@media (max-width: 600px) {
  .highways-grid-cards {
    grid-template-columns: 1fr;
  }

  .copilot-nav-topbar {
    top: 0 !important;
    margin: 0 !important;
    padding: 6px 12px !important;
  }

  .back-selector-btn span {
    font-size: 12px;
  }

  .copilot-nav-title {
    font-size: 13px;
  }
}

/* ==========================================================================
   LIVE GPS RADAR & INTERACTIVE PRICE CHIPS
   ========================================================================== */
.header-icon-action {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.header-icon-action:hover,
.header-icon-action:active {
  border-color: var(--ktm-orange);
  color: var(--ktm-orange);
  transform: scale(1.05);
}

.header-pill-secondary {
  background: rgba(255, 102, 0, 0.1);
  border: 1px solid rgba(255, 102, 0, 0.28);
  color: var(--ktm-orange);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
}

.header-pill-secondary:hover {
  background: var(--ktm-orange);
  color: #fff;
}

/* Floating GPS Live Radar Status Pill - Retirado permanentemente de la UI según Requisito 4 */
.gps-radar-pill,
#gpsRadarStatusBadge {
  display: none !important;
}
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #f8fafc;
  pointer-events: none;
  white-space: nowrap;
  animation: fadeIn 0.3s ease;
}

/* Floating Map Top Notifications Stack (Zero-Overlap Flow Container) */
.map-top-notifications-stack {
  position: absolute;
  top: max(10px, env(safe-area-inset-top, 10px));
  left: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 600;
  pointer-events: none;
  max-width: 480px;
  margin: 0 auto;
  box-sizing: border-box;
}

.map-top-notifications-stack > * {
  pointer-events: auto;
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  margin: 0 auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Subtle Floating GPS Weak Signal Pill */
.gps-weak-signal-pill {
  z-index: 505;
  background: rgba(22, 17, 8, 0.94);
  border: 1.5px solid rgba(255, 170, 0, 0.65);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 6px 14px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: #ffaa00;
  pointer-events: none;
  white-space: nowrap;
  animation: fadeIn 0.25s ease;
}

[data-theme="light"] .gps-weak-signal-pill {
  background: rgba(255, 251, 235, 0.96);
  border-color: #f59e0b;
  color: #b45309;
}

/* Professional Google Maps Style North Compass Dial */
.floating-compass-btn {
  position: absolute;
  top: max(12px, env(safe-area-inset-top, 12px));
  right: 14px;
  z-index: 560;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.94);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.25s ease, background-color 0.2s ease;
  user-select: none;
}

.floating-compass-btn:hover {
  transform: scale(1.06);
  border-color: rgba(239, 68, 68, 0.6);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55), 0 0 12px rgba(239, 68, 68, 0.3);
}

.floating-compass-btn:active {
  transform: scale(0.94);
}

[data-theme="light"] .floating-compass-btn {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.compass-dial {
  position: relative;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s cubic-bezier(0.2, 0, 0.2, 1);
  will-change: transform;
}

.compass-n-label {
  position: absolute;
  top: -4px;
  font-size: 8px;
  font-weight: 900;
  color: #ef4444;
  line-height: 1;
  letter-spacing: -0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .compass-n-label {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}



/* Interactive Map Price Chips (High-Visibility Modern Automotive Pin) */
.custom-price-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: #ffffff !important;
  color: #0b111e !important;
  border: 2px solid var(--ktm-orange) !important;
  border-radius: 20px;
  padding: 4px 10px;
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease;
}

.custom-price-marker .marker-unit {
  font-size: 10px;
  font-weight: 700;
  color: #475569;
  margin-left: 2px;
}

.custom-price-marker:hover,
.custom-price-marker.active {
  transform: scale(1.18);
  border-color: #FF8508 !important;
  background: #FF8508 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(255, 133, 8, 0.6);
  z-index: 9999 !important;
}

.custom-price-marker:hover .marker-unit,
.custom-price-marker.active .marker-unit {
  color: #ffffff !important;
}

.custom-price-marker.best-deal {
  background: linear-gradient(135deg, #008744, #00d084) !important;
  color: #ffffff !important;
  border: 2.5px solid #ffffff !important;
  box-shadow: 0 0 18px rgba(0, 208, 132, 0.8), 0 4px 12px rgba(0, 0, 0, 0.35) !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  transform: scale(1.12);
  animation: pulseGlow 2.5s infinite ease-in-out;
}

.custom-price-marker.selected-deal {
  background: linear-gradient(135deg, #0077ff, #00d2ff) !important;
  color: #ffffff !important;
  border: 2.5px solid #ffffff !important;
  box-shadow: 0 0 22px rgba(0, 210, 255, 0.9), 0 4px 14px rgba(0, 0, 0, 0.5) !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  transform: scale(1.16);
  z-index: 10000 !important;
}

.custom-price-marker.selected-deal .marker-unit {
  color: #ffffff !important;
}

/* 1-Tap Priority Toggle: Más Baratas vs Más Cercanas */
.sort-segmented-control {
  display: flex;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
  margin: 6px 0 10px 0;
}

.sort-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.sort-tab-btn:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.05);
}

.sort-tab-btn.active {
  background: var(--ktm-orange);
  color: #ffffff !important;
  box-shadow: 0 3px 12px rgba(255, 102, 0, 0.45);
}

.sort-tab-btn.active i {
  color: #ffffff !important;
}

[data-theme="light"] .sort-segmented-control {
  background: rgba(0, 0, 0, 0.04);
}

/* 1-Tap Radius Limit Bar (Strict 1-Line, No-Wrap Compact Strip) */
.radius-filter-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0 6px 0;
  margin-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.radius-filter-strip::-webkit-scrollbar {
  display: none;
}

.radius-strip-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.radius-pills-wrap {
  display: inline-flex;
  gap: 5px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0;
}

.radius-pills-wrap::-webkit-scrollbar {
  display: none;
}

.radius-chip {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.16s ease;
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.radius-chip:hover {
  border-color: var(--ktm-orange);
  color: var(--text-main);
  transform: translateY(-1px);
}

.radius-chip.active {
  background: rgba(255, 102, 0, 0.18) !important;
  color: var(--ktm-orange) !important;
  border-color: var(--ktm-orange) !important;
  font-weight: 900;
  box-shadow: 0 2px 8px rgba(255, 102, 0, 0.25);
}

/* Pulsing Live User Vehicle / Dot */
.user-live-radar-dot {
  position: relative;
  width: 26px;
  height: 26px;
  background: #00d2ff;
  border: 3px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(0, 210, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #070a10;
  font-size: 11px;
}

.user-live-radar-dot.moving {
  background: #00d2ff;
  border: 2px solid #ffffff;
  box-shadow: 0 0 20px rgba(0, 210, 255, 0.95);
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.radar-arrow-svg {
  width: 20px;
  height: 20px;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.heading-cone {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 26px solid rgba(0, 210, 255, 0.28);
  pointer-events: none;
}

.user-live-radar-dot::after {
  content: '';
  position: absolute;
  inset: -12px;
  border: 2px solid rgba(0, 210, 255, 0.5);
  border-radius: 50%;
  animation: radarWave 2s infinite ease-out;
}

.user-live-radar-dot.moving::after {
  display: none;
}

@keyframes radarWave {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }

  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* Sentido de la Marcha Direction Badges on Station Cards */
.direction-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  white-space: nowrap;
  text-transform: uppercase;
}

.direction-badge.ahead {
  background: rgba(0, 230, 118, 0.16);
  color: #00e676;
  border: 1px solid rgba(0, 230, 118, 0.38);
}

.direction-badge.lateral {
  background: rgba(255, 170, 0, 0.15);
  color: #ffaa00;
  border: 1px solid rgba(255, 170, 0, 0.35);
}

.direction-badge.behind {
  background: rgba(255, 68, 68, 0.12);
  color: #ff7777;
  border: 1px solid rgba(255, 68, 68, 0.26);
  opacity: 0.88;
}

.direction-badge.large-detour {
  background: rgba(255, 68, 68, 0.14);
  color: #ff8888;
  border: 1px dashed rgba(255, 68, 68, 0.4);
}

/* Quick Nav Best Card Safe Area Protection */
.quick-nav-best-card {
  margin-bottom: max(16px, var(--sab)) !important;
}

/* Google Maps Style Floating Recenter Button */
.floating-recenter-btn {
  position: absolute;
  bottom: calc(180px + var(--sab, 0px));
  right: 16px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  background: rgba(7, 10, 16, 0.94);
  color: #00d2ff;
  border: 1.5px solid rgba(0, 210, 255, 0.55);
  border-radius: 24px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6), 0 0 14px rgba(0, 210, 255, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
  animation: popInBtn 0.25s ease-out;
}

.floating-recenter-btn:hover {
  background: #00d2ff;
  color: #070a10;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0, 210, 255, 0.6);
}

.floating-recenter-btn:active {
  transform: scale(0.96);
}

@keyframes popInBtn {
  from {
    transform: scale(0.85);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@media (min-width: 901px) {
  .floating-recenter-btn {
    bottom: 24px;
    right: 24px;
  }
}

/* App Footer Safe Area */
.app-footer {
  padding-bottom: max(14px, var(--sab)) !important;
}


/* ========================================================
   ENHANCED NATIVE FUEL SELECT & RESPONSIVE HEADER FIXES
   ======================================================== */
.fuel-select-native {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-main);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 4px 0 0;
}

.fuel-select-native option {
  background: #111827;
  color: #f9fafb;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 12px;
}

.station-card.selected-card {
  border: 2px solid var(--ktm-orange) !important;
  box-shadow: 0 0 16px rgba(255, 102, 0, 0.35) !important;
  background: rgba(255, 102, 0, 0.08) !important;
}

@media (max-width: 600px) {
  .top-header {
    overflow: visible;
    gap: 6px !important;
    padding-left: max(10px, var(--sal)) !important;
    padding-right: max(10px, var(--sar)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .logo-group {
    gap: 6px !important;
    flex-shrink: 0 !important;
    min-width: max-content !important;
    display: flex !important;
    align-items: center !important;
  }

  .brand-symbol-raw {
    width: 26px !important;
    height: 26px !important;
    flex-shrink: 0 !important;
  }

  .brand-name {
    font-size: 17px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  .brand-tagline {
    display: none !important;
  }

  .header-controls {
    gap: 4px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .brand-header-logo {
    height: 24px !important;
    max-width: 90px !important;
  }

  .fuel-toggle-group {
    padding: 2px 4px !important;
    gap: 3px !important;
    flex-shrink: 0 !important;
    background: var(--bg-input) !important;
    border-radius: 20px !important;
  }

  /* Compact mode on mobile: show active fuel pill and selector dropdown trigger */
  .fuel-toggle-group .fuel-pill-btn:not(.active) {
    display: none !important;
  }

  .fuel-toggle-group .fuel-pill-more-btn {
    display: inline-flex !important;
    padding: 4px 6px !important;
    font-size: 10px !important;
  }

  .fuel-toggle-group .fuel-pill-btn.active,
  .fuel-toggle-group .fuel-pill-more-btn.active {
    display: inline-flex !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    gap: 4px !important;
  }

  .fuel-text-full {
    display: none !important;
  }

  .fuel-text-short {
    display: inline !important;
  }

  .header-icon-action {
    width: 29px !important;
    height: 29px !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .fuel-selector-badge {
    padding: 4px 6px !important;
    gap: 4px !important;
  }

  .fuel-select-native {
    font-size: 11px !important;
    max-width: 80px;
  }

  .header-pill-secondary {
    padding: 5px 8px !important;
    font-size: 11px !important;
  }

  .btn-text-autovia {
    display: none !important;
  }
}

@media (max-width: 380px) {
  .brand-header-logo {
    height: 23px !important;
    max-width: 118px !important;
  }

  .brand-name {
    font-size: 15px !important;
  }

  .brand-symbol-raw {
    width: 23px !important;
    height: 23px !important;
  }

  .fuel-pill-btn {
    padding: 3px 5px !important;
    font-size: 10px !important;
  }

  .header-controls {
    gap: 3px !important;
  }

  #openLegalInfoBtn {
    display: none !important;
  }
}



/* ========================================================
   MAP FIRST PRIORITY ON MOBILE & VERTICAL SCREENS
   ======================================================== */
.main-content-layout {
  display: grid !important;
  grid-template-columns: 460px 1fr !important;
  gap: 20px;
}

.timeline-sidebar {
  order: 1 !important;
}

.map-container-wrapper {
  order: 2 !important;
}

@media (max-width: 1024px) {
  .main-content-layout {
    display: flex !important;
    flex-direction: column !important;
    padding: 12px !important;
    gap: 16px !important;
  }

  .map-container-wrapper {
    order: 1 !important;
    min-height: 380px !important;
    height: 46vh !important;
    position: relative !important;
  }

  .timeline-sidebar {
    order: 2 !important;
    max-height: none !important;
    overflow-y: visible !important;
    padding: 16px !important;
  }

  .quick-nav-best-card {
    position: relative !important;
    margin: 10px 0 !important;
  }
}


/* ========================================================
   BRAND FILTER CHIPS (1-TAP MINIMUM CLICKS)
   ======================================================== */
.brand-filter-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 2px 10px 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.brand-filter-bar::-webkit-scrollbar {
  display: none;
}

.brand-chip {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
  flex-shrink: 0;
}

.brand-chip:hover {
  border-color: var(--ktm-orange);
  color: var(--text-main);
}

.brand-chip.active {
  background: var(--ktm-orange) !important;
  color: #fff !important;
  border-color: var(--ktm-orange) !important;
  box-shadow: 0 2px 8px rgba(255, 102, 0, 0.4);
}

/* Rank Badge in Station Cards */
.station-rank-badge {
  font-size: 11px;
  font-weight: 800;
  color: var(--ktm-orange);
  background: rgba(255, 102, 0, 0.12);
  padding: 2px 7px;
  border-radius: 6px;
  margin-right: 6px;
}

/* Selected station card with unmistakable orange highlight */
.station-card.selected-card {
  border: 2px solid var(--ktm-orange) !important;
  background: rgba(255, 102, 0, 0.08) !important;
  box-shadow: 0 4px 18px rgba(255, 102, 0, 0.28) !important;
  transform: translateY(-2px);
}

/* Main Layout Grid: List 480px First on Left, Map 1fr on Right */
.main-content-layout {
  display: grid !important;
  grid-template-columns: 480px 1fr !important;
  gap: 20px !important;
  padding: 16px 20px !important;
  flex: 1;
  min-height: 0;
}

.timeline-sidebar {
  order: 1 !important;
  max-height: calc(100vh - 120px) !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.map-container-wrapper {
  order: 2 !important;
  min-height: calc(100vh - 120px) !important;
  position: relative !important;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-color);
}

@media (max-width: 960px) {
  .main-content-layout {
    display: flex !important;
    flex-direction: column !important;
    padding: 10px !important;
    gap: 14px !important;
  }

  .map-container-wrapper {
    order: 1 !important;
    width: 100% !important;
    min-height: 350px !important;
    height: 46vh !important;
  }

  .timeline-sidebar {
    order: 2 !important;
    max-height: none !important;
    overflow-y: visible !important;
    width: 100% !important;
  }
}


/* ========================================================
   QUICK CITY SELECTOR (DESKTOP & INSTANT GPS TESTING)
   ======================================================== */
.quick-city-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 2px 8px 2px;
  scrollbar-width: none;
}

.quick-city-bar::-webkit-scrollbar {
  display: none;
}

.city-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.city-pill {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.16s ease;
  flex-shrink: 0;
}

.city-pill:hover {
  border-color: var(--ktm-orange);
  color: var(--ktm-orange);
}

.city-pill.active {
  background: rgba(255, 102, 0, 0.14) !important;
  color: var(--ktm-orange) !important;
  border-color: var(--ktm-orange) !important;
  font-weight: 800;
}

.city-pill.gps-pill {
  border-color: #00e676;
  color: #00e676;
}

.city-pill.gps-pill:hover {
  background: rgba(0, 230, 118, 0.12);
}

.cookie-banner {
  transition: opacity 0.2s ease, transform 0.2s ease;
}


/* ========================================================
   REFINED COMPACT TOOLBAR & RESPONSIVE LAYOUT
   ======================================================== */
.catalog-control-strip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 0 8px 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 4px;
}

.control-select-group {
  display: flex;
  gap: 8px;
}

.select-chip-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  position: relative;
  flex: 1;
}

.select-chip-wrap:hover {
  border-color: var(--ktm-orange);
}

.clean-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-main);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  width: 100%;
  cursor: pointer;
}

.clean-select option {
  background: #111827;
  color: #fff;
  padding: 8px;
}

.select-caret {
  font-size: 9px;
  color: var(--text-muted);
  pointer-events: none;
}

/* Header Top Row (Título a la izquierda, Disponibles y Ubicación apilados a la derecha) */
.timeline-header-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.timeline-title-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  max-width: calc(100% - 130px);
}

.timeline-title-col .timeline-title {
  font-size: 14px;
  font-weight: 800;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: var(--text-main);
}

.timeline-title-col .timeline-subtitle {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.2;
}

.timeline-location-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}

.timeline-location-col .ahead-badge {
  font-size: 9.5px;
  padding: 1.5px 6px;
  border-radius: 999px;
  background: rgba(255, 102, 0, 0.12);
  color: var(--ktm-orange);
  font-weight: 800;
}

.select-chip-compact {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 2.5px 7px;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.16s ease;
}

.select-chip-compact:hover {
  border-color: var(--ktm-orange);
}

.clean-select-mini {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-main);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding-right: 11px;
}

.clean-select-mini option {
  background: #0f172a;
  color: #ffffff;
  padding: 6px;
}

[data-theme="light"] .clean-select-mini option {
  background: #ffffff;
  color: #0a0f1d;
}

.select-caret-mini {
  position: absolute;
  right: 6px;
  font-size: 7.5px;
  color: var(--text-muted);
  pointer-events: none;
}

/* Fila 1: Modo de Ordenación (Más Baratas / Más Cercanas en una sola línea completa) */
.sort-segmented-control {
  display: flex;
  gap: 5px;
  margin-bottom: 5px;
  width: 100%;
}

.sort-tab-btn {
  flex: 1;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 800;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

/* Fila 2: En la MISMA línea Radio + Gasolineras (Todas, Low Cost, Marca Opcional) */
.unified-filters-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 5px;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
}

.unified-filters-row::-webkit-scrollbar {
  display: none;
}

.compact-select-pill,
.brand-select-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 2.5px 7px;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.16s ease;
  color: var(--text-main);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
}

.brand-select-label-text {
  color: var(--text-main);
  font-size: inherit;
  font-weight: 700;
  white-space: nowrap;
}

.compact-select-pill:hover,
.brand-select-pill:hover {
  border-color: var(--ktm-orange);
}

.brand-select-pill.active {
  background: rgba(255, 102, 0, 0.18) !important;
  border-color: var(--ktm-orange) !important;
  color: var(--ktm-orange) !important;
}

.brand-select-pill.active .clean-select-mini,
.brand-select-pill.active .brand-select-label-text {
  color: var(--ktm-orange) !important;
  font-weight: 800;
}

.brand-modal-opt-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 7px;
  border-radius: 9px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  min-width: 0;
}

.brand-modal-opt-btn:hover {
  border-color: var(--ktm-orange);
}

.brand-modal-opt-btn.active {
  background: rgba(255, 102, 0, 0.16);
  border-color: var(--ktm-orange);
  color: var(--ktm-orange);
  font-weight: 800;
}

.filter-divider {
  width: 1px;
  height: 16px;
  background: var(--border-color);
  flex-shrink: 0;
  margin: 0 2px;
}

.brand-filter-compact-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.brand-chip {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.16s ease;
  user-select: none;
  flex-shrink: 0;
}

.brand-chip:hover {
  border-color: var(--ktm-orange);
  color: var(--text-main);
}

.brand-chip.active {
  background: var(--ktm-orange) !important;
  color: #fff !important;
  border-color: var(--ktm-orange) !important;
  box-shadow: 0 2px 6px rgba(255, 102, 0, 0.3);
}

/* Station Card & Price Display (Ultra-Clean, Compact & High Contrast) */
.stations-list-stream {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 4px 12px 2px;
  scroll-padding-top: 6px;
}

.station-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  flex-shrink: 0 !important;
  box-sizing: border-box;
}

.station-card:hover {
  border-color: rgba(255, 102, 0, 0.45);
  transform: translateY(-1.5px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.station-card:active {
  transform: scale(0.985);
  transition: transform 0.08s ease;
}

.station-card.selected-card {
  border: 1.5px solid var(--ktm-orange) !important;
  background: rgba(255, 102, 0, 0.07) !important;
  box-shadow: 0 3px 14px rgba(255, 102, 0, 0.22) !important;
}

/* Row 1: Station Identity (Rank + Brand + Name + TOP) & Price */
.station-card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.station-card-identity {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex: 1;
}

.station-card-inline-meta,
.station-card-inline-actions {
  display: none;
}

.station-rank-badge {
  font-size: 11px;
  font-weight: 800;
  color: var(--ktm-orange);
  background: rgba(255, 102, 0, 0.12);
  padding: 1.5px 5.5px;
  border-radius: 5px;
  flex-shrink: 0;
  line-height: 1.2;
}

.station-card-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
  letter-spacing: -0.01em;
}

.deal-pill-tag {
  background: linear-gradient(135deg, #008744, #00d084);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6.5px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(0, 208, 132, 0.35);
  line-height: 1.1;
}

/* Elegant High-Contrast Inline Price Badge */
.station-price-box {
  display: inline-flex;
  align-items: baseline;
  gap: 2.5px;
  background: rgba(0, 230, 118, 0.12);
  border: 1px solid rgba(0, 230, 118, 0.38);
  padding: 3.5px 8px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 230, 118, 0.08);
  flex-shrink: 0;
}

.station-price-num {
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 15px;
  font-weight: 900;
  color: #00e676;
  letter-spacing: -0.01em;
  line-height: 1;
}

.station-price-unit {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-muted);
}

[data-theme="light"] .station-price-box {
  background: rgba(0, 135, 68, 0.08);
  border-color: rgba(0, 135, 68, 0.3);
}

[data-theme="light"] .station-price-num {
  color: #008744;
}

/* Price Box Discrepancy / Warning State */
.station-price-box.price-has-warning {
  background: rgba(245, 158, 11, 0.14) !important;
  border: 1px solid rgba(245, 158, 11, 0.5) !important;
  box-shadow: 0 1px 4px rgba(245, 158, 11, 0.12) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.station-price-box.price-has-warning .station-price-num {
  color: #f59e0b !important;
}

.price-warning-chip {
  display: inline-flex;
  align-items: center;
  gap: 2.5px;
  font-size: 9px;
  font-weight: 800;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.22);
  border: 1px solid rgba(245, 158, 11, 0.4);
  padding: 1.5px 5px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  line-height: 1.1;
  white-space: nowrap;
}

[data-theme="light"] .station-price-box.price-has-warning {
  background: rgba(217, 119, 6, 0.1) !important;
  border-color: rgba(217, 119, 6, 0.45) !important;
}

[data-theme="light"] .station-price-box.price-has-warning .station-price-num,
[data-theme="light"] .price-warning-chip {
  color: #b45309 !important;
}

/* Row 2: Metadata Chips (Direction, Distance, Time, Schedule, Anomaly) & Actions */
.station-card-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.station-card-meta-chips {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex: 1;
  flex-wrap: nowrap;
  overflow: hidden;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.meta-chip-item {
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
  flex-shrink: 0;
  background: var(--bg-input);
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  font-size: 10.5px;
}

.metric-save-text {
  color: #00e676;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  font-size: 10.5px;
}

/* Discrete Mini Anomaly Pill */
.chip-anomaly-mini {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(251, 191, 36, 0.14);
  border: 1px solid rgba(251, 191, 36, 0.45);
  color: #fbbf24;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 5px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.chip-anomaly-mini:hover {
  background: rgba(251, 191, 36, 0.25);
  border-color: #fbbf24;
}

[data-theme="light"] .chip-anomaly-mini {
  background: rgba(217, 119, 6, 0.1);
  border-color: rgba(217, 119, 6, 0.35);
  color: #b45309;
}

/* Action Buttons (Report & Google Maps) */
.station-card-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.station-report-trigger-btn {
  width: 25px;
  height: 25px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-input);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  cursor: pointer;
  font-size: 10.5px;
  transition: all 0.16s ease;
  padding: 0;
}

.station-report-trigger-btn:hover {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.1);
}

.station-nav-btn-mini {
  width: 25px;
  height: 25px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 102, 0, 0.12);
  color: var(--ktm-orange);
  border: 1px solid rgba(255, 102, 0, 0.35);
  text-decoration: none;
  font-size: 11px;
  transition: all 0.16s ease;
}

.station-nav-btn-mini:hover {
  background: var(--ktm-orange);
  color: #fff;
  border-color: var(--ktm-orange);
  transform: translateY(-1px);
}

/* Expand / Collapse "Ver Más Gasolineras" Button */
.stations-expand-wrap {
  padding-top: 4px;
  padding-bottom: 2px;
}

.show-more-stations-btn {
  width: 100%;
  padding: 8px 14px;
  background: rgba(255, 102, 0, 0.08);
  border: 1px dashed rgba(255, 102, 0, 0.4);
  color: var(--ktm-orange);
  border-radius: 10px;
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  user-select: none;
}

.show-more-stations-btn:hover {
  background: rgba(255, 102, 0, 0.16);
  border-color: var(--ktm-orange);
  transform: translateY(-1px);
}

/* Desktop layout: strictly 100vh, zero vertical page scroll, list internal scroll */
@media (min-width: 901px) {

  html,
  body {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
  }

  .app-container {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .top-header {
    flex-shrink: 0 !important;
    padding: 10px 18px 8px 18px !important;
  }

  .copilot-active-container {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .copilot-nav-topbar {
    flex-shrink: 0 !important;
    padding: 6px 16px !important;
    position: relative !important;
    top: 0 !important;
    margin: 0 !important;
    border-top: none !important;
    background: var(--bg-panel-solid) !important;
  }

  .main-content-layout {
    flex: 1 !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 460px 1fr !important;
    gap: 14px !important;
    padding: 6px 16px 8px 16px !important;
    overflow: hidden !important;
  }

  .timeline-sidebar {
    order: 1 !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 8px 12px !important;
  }

  .timeline-header {
    flex-shrink: 0 !important;
    margin-bottom: 6px !important;
  }

  .stations-list-stream {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 6px 6px 14px 2px !important;
    gap: 8px !important;
    scroll-padding-top: 6px !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent !important;
  }

  [data-theme="light"] .stations-list-stream {
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent !important;
  }

  .stations-list-stream::-webkit-scrollbar {
    width: 6px !important;
    display: block !important;
  }

  .stations-list-stream::-webkit-scrollbar-track {
    background: transparent !important;
  }

  .stations-list-stream::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
  }

  [data-theme="light"] .stations-list-stream::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2) !important;
  }

  .stations-list-stream::-webkit-scrollbar-thumb:hover {
    background: var(--ktm-orange) !important;
  }

  .map-container-wrapper {
    order: 2 !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    position: relative !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
  }

  .map-view {
    position: absolute !important;
    top: -22% !important;
    left: -22% !important;
    height: 144% !important;
    width: 144% !important;
    min-height: 0 !important;
  }

  .app-footer {
    flex-shrink: 0 !important;
    padding: 4px 16px !important;
    font-size: 11px !important;
    margin-top: 0 !important;
    border-top: 1px solid var(--border-color) !important;
  }
}

/* Mobile & Tablet layout: Clean seamless attachment without gap */
@media (max-width: 900px) {

  html,
  body {
    height: 100% !important;
    height: 100dvh !important;
    width: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    position: fixed !important;
    inset: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: var(--bg-app) !important;
    touch-action: pan-x pan-y !important;
  }

  .app-container {
    height: 100% !important;
    height: 100dvh !important;
    width: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    position: fixed !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    background-color: var(--bg-app) !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  /* Safe-area aware top header: adapts to Light/Dark theme */
  .top-header {
    flex-shrink: 0 !important;
    padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 7px !important;
    padding-left: max(10px, env(safe-area-inset-left, 10px)) !important;
    padding-right: max(10px, env(safe-area-inset-right, 10px)) !important;
    min-height: 44px !important;
    position: relative !important;
    top: 0 !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: var(--bg-panel-solid) !important;
  }

  .logo-group {
    flex-shrink: 0 !important;
    min-width: max-content !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  .brand-header-logo {
    height: 24px !important;
    width: auto !important;
    max-width: 95px !important;
  }

  .brand-text {
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .brand-symbol-raw {
    width: 26px !important;
    height: 26px !important;
    flex-shrink: 0 !important;
  }

  .brand-name {
    font-size: 17px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    padding-right: 8px !important;
    overflow: visible !important;
  }

  .brand-tagline {
    display: none !important;
  }

  .header-controls {
    gap: 4px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  .fuel-toggle-group {
    padding: 2px 4px !important;
    gap: 3px !important;
    flex-shrink: 0 !important;
    background: var(--bg-input) !important;
    border-radius: 20px !important;
  }

  @media (max-width: 640px) {
    .fuel-toggle-group .fuel-pill-btn:not(.active) {
      display: none !important;
    }

    .fuel-toggle-group .fuel-pill-more-btn {
      display: inline-flex !important;
      padding: 3px 6px !important;
    }

    .fuel-toggle-group .fuel-pill-btn.active,
    .fuel-toggle-group .fuel-pill-more-btn.active {
      display: inline-flex !important;
      padding: 4px 8px !important;
      font-size: 11px !important;
      font-weight: 800 !important;
    }
  }

  .fuel-pill-btn {
    padding: 4px 7px !important;
    font-size: 11px !important;
    gap: 4px !important;
    white-space: nowrap !important;
  }

  .fuel-pill-btn i {
    font-size: 10px !important;
  }

  .fuel-pill-more-btn {
    padding: 4px 6px !important;
    font-size: 10px !important;
  }

  .fuel-selector-badge {
    padding: 4px 7px !important;
    font-size: 11px !important;
  }

  .header-icon-action {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }

  .header-pill-secondary {
    padding: 4px 7px !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
  }

  /* Hide redundant copilot topbar completely on mobile */
  .copilot-nav-topbar {
    display: none !important;
  }

  .copilot-active-container {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
  }

  .main-content-layout {
    display: flex !important;
    flex-direction: column !important;
    padding: 2px 4px 0 4px !important;
    gap: 4px !important;
    flex: 1 !important;
    overflow: hidden !important;
    min-height: 0 !important;
    height: 100% !important;
  }

  /* STATIONS LIST STREAM (FIXED BOTTOM DOCK: 3 STATIONS + SMOOTH SCROLL) */
  .timeline-sidebar {
    order: 2 !important;
    flex: 0 0 auto !important;
    min-height: auto !important;
    max-height: 44dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    width: 100% !important;
    padding: 4px 8px max(10px, env(safe-area-inset-bottom, 0px)) 8px !important;
    flex-shrink: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    background: var(--bg-panel) !important;
    border-bottom: none !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.28) !important;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 500 !important;
  }

  .timeline-sidebar #stationsList {
    max-height: 195px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  /* FULL STATION LIST OVERLAY: Flota sobre el mapa sin alterar las dimensiones ni el zoom del mapa */
  .timeline-sidebar.is-expanded {
    position: fixed !important;
    top: 52px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(100dvh - 52px) !important;
    max-height: calc(100dvh - 52px) !important;
    border-radius: 18px 18px 0 0 !important;
    z-index: 99999 !important;
    background: var(--bg-main) !important;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.75) !important;
    padding: 8px 10px max(16px, env(safe-area-inset-bottom, 0px)) 10px !important;
    animation: slideUpStationsSheet 0.22s ease-out !important;
  }

  .timeline-sidebar.is-expanded #stationsList {
    max-height: none !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding-bottom: 24px !important;
  }

  @keyframes slideUpStationsSheet {
    from { transform: translateY(100%); opacity: 0.6; }
    to { transform: translateY(0); opacity: 1; }
  }

  .main-content-layout:has(.timeline-sidebar.is-expanded)::after {
    content: '';
    order: 2;
    flex: 0 0 var(--stations-dock-height, 245px);
    min-height: 0;
  }

  /* Ocultar HUD de maniobras cuando la lista de más gasolineras está expandida para despejar el mapa compacto */
  .map-container-wrapper.is-sheet-expanded .nav-maneuver-hud,
  .main-content-layout:has(.timeline-sidebar.is-expanded) .nav-maneuver-hud {
    display: none !important;
  }

  /* Compact dock for controls on reduced map height */
  .map-container-wrapper.is-sheet-expanded .floating-map-controls,
  .main-content-layout:has(.timeline-sidebar.is-expanded) .floating-map-controls {
    bottom: calc(12px + var(--sab, 0px)) !important;
    right: 12px !important;
  }

  .bottom-sheet-drag-handle {
    width: 36px !important;
    height: 4px !important;
    border-radius: 2px !important;
    background: rgba(255, 255, 255, 0.28) !important;
    margin: 2px auto 4px auto !important;
    cursor: pointer !important;
    touch-action: none !important;
    transition: background 0.2s ease !important;
    flex-shrink: 0 !important;
  }

  .bottom-sheet-drag-handle:active {
    background: var(--ktm-orange) !important;
  }

  /* Universal removal of all vertical grey scrollbars on mobile & Android WebView */
  * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  *::-webkit-scrollbar,
  *::-webkit-scrollbar-track,
  *::-webkit-scrollbar-thumb,
  *::-webkit-scrollbar-button {
    display: none !important;
    width: 0px !important;
    height: 0px !important;
    background: transparent !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* Hide bulky titles and subtitles above map on mobile */
  .timeline-title-col,
  .timeline-header-top-row {
    display: none !important;
  }

  .timeline-header {
    flex-shrink: 0 !important;
    margin-bottom: 3px !important;
  }

  /* Slim 1-row sort tabs */
  .sort-segmented-control {
    margin: 0 0 3px 0 !important;
    padding: 2px !important;
    gap: 3px !important;
    border-radius: 8px !important;
  }

  .sort-tab-btn {
    padding: 3px 6px !important;
    font-size: 10px !important;
    border-radius: 6px !important;
  }

  /* Slim filters row: all 5 controls fit 100% of screen width with zero horizontal scroll */
  .unified-filters-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 3px !important;
    margin-bottom: 3px !important;
    width: 100% !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
  }

  .filter-divider {
    display: none !important;
  }

  .brand-filter-compact-group {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 3px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .compact-select-pill {
    flex: 0 0 auto !important;
    padding: 3px 5px !important;
    font-size: 9.5px !important;
    border-radius: 6px !important;
    gap: 2px !important;
  }

  .compact-select-pill .clean-select-mini {
    font-size: 9.5px !important;
    padding-right: 8px !important;
  }

  .compact-select-pill .select-caret-mini {
    right: 3px !important;
    font-size: 6.5px !important;
  }

  .brand-select-pill,
  .brand-chip {
    flex: 1 1 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px 4px !important;
    font-size: 9.5px !important;
    border-radius: 6px !important;
    gap: 3px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .brand-select-label-text {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Cards stream: scrolls smoothly inside its panel, 3 stations fully visible without squishing */
  .stations-list-stream {
    flex: 1 !important;
    min-height: 98px !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    padding-top: 1px !important;
    padding-bottom: 6px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .stations-list-stream::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
  }

  /* When expanded by user: list displays all stations smoothly with scroll */
  .timeline-sidebar.is-expanded .stations-list-stream {
    flex: 1 !important;
    overflow-y: auto !important;
    padding-bottom: 10px !important;
  }

  .timeline-sidebar.is-expanded .stations-list-stream::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
  }

  /* 1-Line Ultra-Compact Station Card (Option A) */
  .station-card {
    padding: 3px 6px !important;
    border-radius: 7px !important;
    min-height: 28px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    gap: 0 !important;
    justify-content: center !important;
  }

  .station-card-top-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 5px !important;
    width: 100% !important;
  }

  .station-card-identity {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .station-rank-badge {
    font-size: 9px !important;
    padding: 1px 4px !important;
    margin-right: 0 !important;
    border-radius: 4px !important;
    line-height: 1.1 !important;
  }

  .brand-badge.mini {
    width: 16px !important;
    height: 16px !important;
    font-size: 9px !important;
    flex-shrink: 0 !important;
  }

  .station-card-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.15 !important;
  }

  .deal-pill-tag,
  .price-warning-chip,
  .station-card-bottom-row,
  .recommend-badge-pill,
  .station-card-details,
  .station-actions {
    display: none !important;
  }

  .station-card-inline-meta {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
  }

  .inline-dist-pill {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    background: var(--bg-input) !important;
    padding: 1.5px 5px !important;
    border-radius: 4px !important;
    border: 1px solid var(--border-color) !important;
    white-space: nowrap !important;
    line-height: 1.1 !important;
  }

  .station-price-box {
    padding: 1.5px 5px !important;
    border-radius: 5px !important;
    flex-shrink: 0 !important;
  }

  .station-price-num {
    font-size: 12px !important;
  }

  .station-price-unit {
    font-size: 8px !important;
  }

  .station-card-inline-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    flex-shrink: 0 !important;
  }

  .station-info-trigger-btn,
  .station-report-trigger-btn,
  .station-nav-btn-mini {
    width: 21px !important;
    height: 21px !important;
    font-size: 9px !important;
    border-radius: 5px !important;
    margin: 0 !important;
  }

  .station-card-header {
    gap: 6px !important;
  }

  .station-names {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  .station-name {
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .station-dist-ahead {
    font-size: 9.5px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Expand & Collapse Action Bar */
  .stations-expand-bar {
    width: 100% !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
  }

  .stations-expanded-footer-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding: 1px 2px !important;
  }

  .scroll-instruction-cue {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    color: var(--ktm-orange) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .compact-collapse-btn {
    width: auto !important;
    padding: 2.5px 7px !important;
    font-size: 9.5px !important;
    border-radius: 5px !important;
    background: rgba(255, 102, 0, 0.15) !important;
    color: var(--ktm-orange) !important;
    border: 1px solid rgba(255, 102, 0, 0.4) !important;
    font-weight: 800 !important;
    cursor: pointer !important;
  }

  .show-more-stations-btn {
    width: 100% !important;
    min-height: 44px !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
    background: rgba(255, 102, 0, 0.08) !important;
    color: var(--ktm-orange) !important;
    border: 1px dashed rgba(255, 102, 0, 0.4) !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
  }

  /* Hide ad on mobile initial view so it never pushes the map */
  .native-timeline-ad {
    display: none !important;
  }

  /* MAP IS FIRST & PROMINENT (56dvh para garantizar 3 gasolineras visibles debajo) */
  .map-container-wrapper {
    order: 1 !important;
    width: 100% !important;
    height: 56dvh;
    height: auto !important;
    min-height: 220px !important;
    max-height: 60dvh !important;
    flex: 1 1 auto !important;
    position: relative !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  .map-view {
    position: absolute !important;
    top: -22% !important;
    left: -22% !important;
    height: 144% !important;
    width: 144% !important;
    min-height: 0 !important;
  }

  /* Controles flotantes del mapa en la esquina inferior derecha sin tapar el centro */
  .floating-map-controls {
    bottom: 10px !important;
    right: 10px !important;
    gap: 6px !important;
  }

  .floating-map-btn {
    padding: 5px 10px !important;
    font-size: 10.5px !important;
    border-radius: 18px !important;
    gap: 5px !important;
  }

  .floating-map-btn i {
    font-size: 11px !important;
  }

  /* Píldora superior GPS más discreta y compacta */
  .gps-radar-pill {
    top: 8px !important;
    padding: 4px 11px !important;
    font-size: 10.5px !important;
    gap: 6px !important;
    max-width: 90% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* HUD de maniobras compacto cuando se está en marcha */
  .nav-maneuver-hud {
    width: 100% !important;
    max-width: 100% !important;
    padding: 6px 10px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .nav-maneuver-icon-box {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }

  .nav-maneuver-distance {
    font-size: 14px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .nav-maneuver-instruction {
    font-size: 11.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: block !important;
  }

  .quick-nav-best-card {
    max-width: none !important;
  }

  .app-footer {
    display: none !important;
  }
}

/* Dark mode tiles styling for Leaflet - High contrast automotive cockpit */
[data-theme="dark"] .leaflet-tile-pane {
  filter: brightness(0.72) invert(1) contrast(1.15) hue-rotate(180deg) saturate(0.8);
}

/* ==========================================================================
   GOOGLE MAPS STYLE FLOATING RECENTER BUTTON & DIRECTION DETOUR BADGES
   ========================================================================== */
.floating-recenter-btn {
  position: absolute;
  bottom: 125px;
  right: 18px;
  z-index: 550;
  background: #0f172a;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid #0284c7;
  color: #ffffff;
  padding: 8px 15px;
  border-radius: 26px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 12px rgba(2, 132, 199, 0.35);
  transition: all 0.25s ease;
  user-select: none;
}

[data-theme="light"] .floating-recenter-btn {
  background: #ffffff;
  border-color: #0284c7;
  color: #0f172a;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16), 0 0 10px rgba(2, 132, 199, 0.25);
}

.floating-recenter-btn:hover {
  background: #1e293b;
  border-color: #38bdf8;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 20px rgba(56, 189, 248, 0.4);
}

[data-theme="light"] .floating-recenter-btn:hover {
  background: #f8fafc;
  border-color: #0369a1;
  color: #0f172a;
}

.floating-recenter-btn i {
  color: #38bdf8;
  font-size: 13px;
  transition: transform 0.3s ease;
}

[data-theme="light"] .floating-recenter-btn i {
  color: #0284c7;
}

.floating-recenter-btn:hover i {
  transform: scale(1.15) rotate(45deg);
}

@media (max-width: 900px) {
  .floating-recenter-btn {
    bottom: 20px;
    right: 14px;
    padding: 7px 13px;
    font-size: 11.5px;
  }
}

/* Direction & Smart Detour Badges */
.direction-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 800;
  padding: 2.5px 7px;
  border-radius: 12px;
  letter-spacing: 0.25px;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

.direction-badge.ahead {
  background: rgba(0, 230, 118, 0.16);
  color: #00e676;
  border: 1px solid rgba(0, 230, 118, 0.4);
}

.direction-badge.lateral {
  background: rgba(0, 210, 255, 0.16);
  color: #00d2ff;
  border: 1px solid rgba(0, 210, 255, 0.4);
}

.direction-badge.moderate-detour {
  background: rgba(255, 187, 0, 0.16);
  color: #ffbb00;
  border: 1px solid rgba(255, 187, 0, 0.4);
}

.direction-badge.large-detour {
  background: rgba(255, 68, 68, 0.16);
  color: #ff5252;
  border: 1px solid rgba(255, 68, 68, 0.4);
}

.direction-badge.behind {
  background: rgba(140, 150, 170, 0.18);
  color: #a0aec0;
  border: 1px solid rgba(140, 150, 170, 0.35);
}

/* User Live Radar Vehicle Marker (Google Maps Navigation Style) */
.user-radar-div-icon,
.user-google-nav-div-icon {
  background: transparent !important;
  border: none !important;
}

.user-google-nav-marker {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.22s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  transform-origin: 50% 50%;
}

.nav-direction-beam {
  position: absolute;
  top: -30px;
  left: -10px;
  width: 60px;
  height: 46px;
  background: radial-gradient(ellipse at 50% 100%, rgba(26, 115, 232, 0.45) 0%, rgba(26, 115, 232, 0.12) 55%, transparent 75%);
  pointer-events: none;
  transform-origin: 50% 100%;
}

.nav-arrow-container {
  width: 32px;
  height: 32px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-arrow-svg {
  width: 32px;
  height: 32px;
  display: block;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 10px rgba(26, 115, 232, 0.7));
}

.nav-center-pulse {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(26, 115, 232, 0.35);
  pointer-events: none;
  animation: navPulseRing 2s infinite ease-out;
}

@keyframes navPulseRing {
  0% {
    transform: scale(0.8);
    opacity: 0.9;
  }

  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

.user-live-radar-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #00d2ff;
  color: #070a10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  box-shadow: 0 0 16px rgba(0, 210, 255, 0.8), 0 0 0 3px rgba(255, 255, 255, 0.9);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
}

.user-live-radar-dot.moving {
  background: transparent;
  box-shadow: none;
}

.radar-arrow-svg {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 8px rgba(0, 210, 255, 0.9));
}

.heading-cone {
  position: absolute;
  top: -24px;
  left: -14px;
  width: 56px;
  height: 40px;
  background: radial-gradient(ellipse at 50% 100%, rgba(0, 210, 255, 0.4) 0%, rgba(0, 210, 255, 0) 70%);
  pointer-events: none;
  transform-origin: 50% 100%;
}

/* ==========================================================================
   GOOGLE MAPS NAVIGATION MANEUVER / EXIT HUD & CAMERA CONTROLS
   ========================================================================== */
.nav-maneuver-hud {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  width: 100%;
  max-width: 410px;
  box-sizing: border-box;
  margin: 0 auto;
  z-index: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(9, 13, 20, 0.94);
  border: 1.5px solid rgba(0, 210, 255, 0.45);
  border-radius: var(--radius-md, 14px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 210, 255, 0.25);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: slideDownFade 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
  overflow: hidden;
}

@keyframes slideDownFade {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Floating Navigation Action Toast (Dynamically positioned below HUD) */
.nav-floating-toast {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  z-index: 650;
  background: rgba(9, 13, 20, 0.94);
  border: 1.5px solid rgba(0, 210, 255, 0.6);
  color: #ffffff;
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 16px rgba(0, 210, 255, 0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  max-width: 90%;
  text-overflow: ellipsis;
  overflow: hidden;
}

.nav-floating-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

[data-theme="light"] .nav-floating-toast {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 150, 220, 0.5);
  color: #0f172a;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), 0 0 12px rgba(0, 150, 220, 0.2);
}

.nav-maneuver-icon-box {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #00d2ff 0%, #0066cc 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 210, 255, 0.45);
  transition: all 0.3s ease;
}

.nav-maneuver-icon-box.alert-exit {
  background: linear-gradient(135deg, #ff9900 0%, #ff4400 100%);
  box-shadow: 0 4px 14px rgba(255, 102, 0, 0.6);
  animation: pulseManeuverIcon 1.5s infinite;
}

@keyframes pulseManeuverIcon {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }
}

.nav-maneuver-info {
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
}

.nav-maneuver-dist-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
  overflow: hidden;
  white-space: nowrap;
}

.nav-maneuver-distance {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.3px;
  font-family: var(--font-numeric, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-maneuver-badge {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 10px;
  background: rgba(0, 210, 255, 0.18);
  color: #00d2ff;
  border: 1px solid rgba(0, 210, 255, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
}

.nav-maneuver-badge.urgent {
  background: rgba(255, 102, 0, 0.25);
  color: #ffaa00;
  border-color: rgba(255, 102, 0, 0.65);
}

.nav-maneuver-hud.stage-1000m {
  border-color: rgba(0, 210, 255, 0.7);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 25px rgba(0, 210, 255, 0.35);
}

.nav-maneuver-hud.stage-500m {
  border-color: rgba(255, 153, 0, 0.8);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75), 0 0 30px rgba(255, 136, 0, 0.4);
}

.nav-maneuver-hud.stage-imminent {
  border-color: rgba(255, 59, 48, 0.9);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.8), 0 0 35px rgba(255, 59, 48, 0.5);
  animation: urgentPulseGlow 1.2s infinite;
}

@keyframes urgentPulseGlow {

  0%,
  100% {
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 59, 48, 0.4);
  }

  50% {
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.8), 0 0 40px rgba(255, 59, 48, 0.7);
  }
}

.nav-maneuver-badge.urgent.imminent {
  background: rgba(255, 59, 48, 0.3);
  color: #ff453a;
  border-color: rgba(255, 59, 48, 0.8);
  animation: urgentBadgePulse 1s infinite;
}

@keyframes urgentBadgePulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

.nav-maneuver-instruction {
  font-size: 12px;
  font-weight: 600;
  color: #cbd5e1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 100%;
}

.nav-maneuver-close-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.nav-maneuver-close-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

/* Google Maps Style Heading-Up Navigation Mode (Pivot anchored at map center 50% 50%) */
#map.heading-up-active {
  transform-origin: 50% 50% !important;
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.4, 1);
  will-change: transform;
}

@media (min-width: 901px) {
  #map.heading-up-active {
    transform-origin: 50% 50% !important;
  }
}

/* Keep station price badges, brand icons, and radar pins perfectly horizontal during map rotation */
#map.heading-up-active .custom-price-marker,
#map.heading-up-active .brand-icon-marker,
#map.heading-up-active .destination-flag-marker,
#map.heading-up-active .radar-pin-marker {
  transform: rotate(var(--map-counter-rotation, 0deg)) !important;
  transform-origin: center center;
}

/* ==========================================================================
   INTERACTIVE RADAR RADIUS DYNAMIC SLIDER PANEL & LIVE MAP CIRCLE
   ========================================================================== */
.radar-radius-slider-panel {
  position: absolute;
  bottom: calc(48px + var(--sab, 0px));
  left: calc(10px + var(--sal, 0px));
  width: min(92%, 320px);
  max-width: 330px;
  background: rgba(12, 17, 26, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(255, 133, 8, 0.5);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65), 0 0 16px rgba(255, 102, 0, 0.22);
  border-radius: 16px;
  padding: 12px 14px;
  z-index: 600;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: slideUpFade 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 901px) {
  .radar-radius-slider-panel {
    bottom: 64px;
    left: 20px;
  }
}

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-theme="light"] .radar-radius-slider-panel {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(255, 102, 0, 0.45);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 0 12px rgba(255, 102, 0, 0.15);
}

.radius-slider-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.radius-slider-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}

.radius-slider-title strong {
  color: var(--ktm-orange);
  font-size: 14px;
}

.radius-slider-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.15s ease;
}

.radius-slider-close-btn:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.1);
}

.radius-slider-track-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.radius-tick-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

.ktm-range-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.15);
  outline: none;
  cursor: pointer;
}

[data-theme="light"] .ktm-range-slider {
  background: rgba(0, 0, 0, 0.15);
}

.ktm-range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ktm-orange);
  border: 2.5px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 8px rgba(255, 102, 0, 0.6);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.ktm-range-slider::-webkit-slider-thumb:active {
  transform: scale(1.18);
}

.ktm-range-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ktm-orange);
  border: 2.5px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.radius-slider-presets {
  display: flex;
  gap: 6px;
  justify-content: space-between;
}

.radius-preset-chip {
  flex: 1;
  padding: 4px 6px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}

.radius-preset-chip.active {
  background: var(--ktm-orange);
  color: #ffffff;
  border-color: var(--ktm-orange);
  box-shadow: 0 2px 8px rgba(255, 102, 0, 0.35);
}

/* Floating Recenter Map Button (Oculto permanentemente a petición del conductor) */
#floatingRecenterMapBtn {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 1000;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hidden Controls: Radius UI removed for clean view */
#floatingRadiusMapBtn,
#radarRadiusSliderPanel {
  display: none !important;
}

/* Pulsating interactive radar circle on Leaflet Map */
.radar-interactive-circle {
  pointer-events: none;
  transition: r 0.1s ease-out;
}

/* Floating Deselect Route Button (Directly docked on map above mode pill) */
.floating-deselect-route-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(18, 14, 20, 0.94);
  border: 1.5px solid rgba(239, 68, 68, 0.65);
  color: #ff6b6b;
  padding: 5px 11px;
  border-radius: 18px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), 0 0 10px rgba(239, 68, 68, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  animation: fadeIn 0.25s ease;
}

.floating-deselect-route-btn i {
  color: #ef4444;
  font-size: 11px;
}

.floating-deselect-route-btn:hover {
  background: rgba(239, 68, 68, 0.22);
  border-color: #ef4444;
  color: #ffffff;
  transform: translateY(-1px);
}

.floating-deselect-route-btn:active {
  transform: scale(0.96);
}

[data-theme="light"] .floating-deselect-route-btn {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(239, 68, 68, 0.7);
  color: #dc2626;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12), 0 0 8px rgba(239, 68, 68, 0.15);
}

/* Station Active Route Tag in Card (Ultra-compact, zero-bloat) */
.station-active-route-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 102, 0, 0.18);
  color: var(--ktm-orange);
  border: 1px solid rgba(255, 102, 0, 0.45);
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Floating Controls Group (Camera Mode & Recenter) */
.floating-map-controls {
  position: absolute;
  bottom: calc(140px + var(--sab, 0px));
  right: 16px;
  z-index: 550;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

/* Segmented Map Mode Control (Conducción / Ruta completa) */
.map-mode-segmented-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(12, 17, 26, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid rgba(255, 102, 0, 0.45);
  border-radius: 26px;
  padding: 3px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55), 0 0 14px rgba(255, 102, 0, 0.22);
  gap: 2px;
  user-select: none;
}

[data-theme="light"] .map-mode-segmented-pill {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 102, 0, 0.4);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 10px rgba(255, 102, 0, 0.15);
}

.mode-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  border: none;
  background: transparent;
  color: var(--text-muted, #94a3b8);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
  white-space: nowrap;
}

.mode-tab-btn i {
  font-size: 12px;
  transition: transform 0.2s ease;
}

.mode-tab-btn.active {
  background: linear-gradient(135deg, var(--ktm-orange), #ff4400) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 10px rgba(255, 102, 0, 0.45);
}

.mode-tab-btn.active i {
  color: #ffffff !important;
}

.mode-tab-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main, #f1f5f9);
}

[data-theme="light"] .mode-tab-btn:hover:not(.active) {
  background: rgba(0, 0, 0, 0.06);
  color: #0f172a;
}

@media (max-width: 640px) {
  .map-mode-segmented-pill {
    padding: 2px;
  }

  .mode-tab-btn {
    padding: 5px 9px;
    font-size: 10.5px;
    gap: 4px;
  }

  .mode-tab-btn i {
    font-size: 11px;
  }
}

.floating-map-btn {
  background: rgba(12, 17, 26, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid rgba(0, 210, 255, 0.5);
  color: #ffffff;
  padding: 8px 14px;
  border-radius: 24px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55), 0 0 14px rgba(0, 210, 255, 0.25);
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
  user-select: none;
}

.floating-map-btn:hover {
  background: rgba(20, 28, 42, 0.98);
  border-color: #00d2ff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 20px rgba(0, 210, 255, 0.4);
}

.floating-map-btn i {
  color: #00d2ff;
  font-size: 13px;
}

.floating-map-btn.recenter-btn {
  position: absolute !important;
  bottom: calc(48px + var(--sab, 0px)) !important;
  left: calc(10px + var(--sal, 0px)) !important;
  z-index: 550 !important;
  background: #0f172a !important;
  border: 1.5px solid #0284c7 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 12px rgba(2, 132, 199, 0.35) !important;
  padding: 6px 12px !important;
  font-size: 11px !important;
  border-radius: 20px !important;
}

@media (min-width: 901px) {
  .floating-map-btn.recenter-btn {
    bottom: 64px !important;
    left: 20px !important;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  .main-content-layout:has(.timeline-sidebar.is-expanded)::after {
    display: none;
  }
  .floating-map-btn.recenter-btn {
    bottom: 42px !important;
    left: 8px !important;
    padding: 4px 8px !important;
    font-size: 9.5px !important;
  }
}

[data-theme="light"] .floating-map-btn.recenter-btn {
  background: #ffffff !important;
  border: 1.5px solid #0284c7 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16), 0 0 10px rgba(2, 132, 199, 0.25) !important;
}

.floating-map-btn.recenter-btn i {
  color: #38bdf8 !important;
  font-size: 13px !important;
}

[data-theme="light"] .floating-map-btn.recenter-btn i {
  color: #0284c7 !important;
}

.floating-map-btn.recenter-btn:hover {
  background: #1e293b !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.6), 0 0 18px rgba(56, 189, 248, 0.45) !important;
}

[data-theme="light"] .floating-map-btn.recenter-btn:hover {
  background: #f8fafc !important;
  border-color: #0369a1 !important;
  color: #0f172a !important;
}

@media (min-width: 901px) {
  .floating-map-controls {
    bottom: 24px !important;
    right: 22px !important;
  }
}

/* Responsive fine-tuning: In intermediate desktop/tablet widths where the map column is narrow,
   keep "Siguiente en ruta" centered, resting right above the bottom controls row without any collision */
@media (min-width: 901px) and (max-width: 1250px) {
  .quick-nav-best-card {
    bottom: 72px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

/* ==========================================
   SCHEDULE STATUS BADGES & TIMETABLE CARDS
   ========================================== */
.schedule-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
  letter-spacing: -0.01em;
  transition: all 0.15s ease;
}

.schedule-badge.schedule-24h {
  background: rgba(0, 208, 132, 0.16);
  color: #00e676;
  border: 1px solid rgba(0, 230, 118, 0.35);
}

.schedule-badge.schedule-open {
  background: rgba(0, 208, 132, 0.12);
  color: #00d084;
  border: 1px solid rgba(0, 208, 132, 0.28);
}

.schedule-badge.schedule-closing-soon {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.schedule-badge.schedule-closed {
  background: rgba(239, 68, 68, 0.18);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.38);
}

.schedule-badge.schedule-unknown {
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-muted);
  border: 1px solid rgba(148, 163, 184, 0.22);
}

.station-card.station-card-closed {
  opacity: 0.65;
  filter: grayscale(0.3);
}

.brand-chip.open-chip.active {
  background: rgba(0, 208, 132, 0.18);
  color: #00e676;
  border-color: rgba(0, 230, 118, 0.45);
}

.brand-chip.open-chip:not(.active) {
  opacity: 0.6;
}

.quick-metric-pill.schedule {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.quick-metric-pill.schedule.schedule-24h,
.quick-metric-pill.schedule.schedule-open {
  background: rgba(0, 208, 132, 0.15);
  color: #00e676;
  border: 1px solid rgba(0, 230, 118, 0.3);
}

.quick-metric-pill.schedule.schedule-closing-soon {
  background: rgba(245, 158, 11, 0.16);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.quick-metric-pill.schedule.schedule-closed {
  background: rgba(239, 68, 68, 0.16);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

/* Modal Schedule Card */
.station-modal-schedule-card {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.station-modal-schedule-card.schedule-24h {
  border-left: 4px solid #00e676;
}

.station-modal-schedule-card.schedule-open {
  border-left: 4px solid #00d084;
}

.station-modal-schedule-card.schedule-closing-soon {
  border-left: 4px solid #f59e0b;
}

.station-modal-schedule-card.schedule-closed {
  border-left: 4px solid #ef4444;
}

.station-modal-schedule-card .schedule-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.station-modal-schedule-card .schedule-status-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.station-modal-schedule-card.schedule-24h .schedule-status-indicator i,
.station-modal-schedule-card.schedule-open .schedule-status-indicator i {
  color: #00e676;
}

.station-modal-schedule-card.schedule-closing-soon .schedule-status-indicator i {
  color: #f59e0b;
}

.station-modal-schedule-card.schedule-closed .schedule-status-indicator i {
  color: #ef4444;
}

.station-modal-schedule-card .schedule-today-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-main);
  border: 1px solid var(--border-color);
}

.station-modal-schedule-card .schedule-raw-details {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.4;
  padding-top: 4px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.station-modal-schedule-card .schedule-raw-details i {
  margin-top: 2px;
  color: var(--ktm-orange);
  font-size: 10px;
}

/* ==========================================================================
   SPRINT 5: DATA QUALITY, ANOMALY WARNINGS & COMMUNITY 1-TAP REPORTING
   ========================================================================== */

/* Aviso no alarmista de cruce Diésel / Gasolina (Sub-fila dedicada sin solapar el precio) */
.station-swap-notice {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.3;
  transition: all 0.2s ease;
  width: fit-content;
  max-width: 100%;
}

.station-swap-notice:hover {
  background: rgba(245, 158, 11, 0.22);
  border-color: #f59e0b;
}

.station-swap-notice i {
  color: #f59e0b;
  font-size: 11px;
  flex-shrink: 0;
}

.badge-user-reported {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--radius-full);
  background: rgba(239, 68, 68, 0.14);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
  white-space: nowrap;
}

@keyframes pulseAnomaly {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.03);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
  }

  100% {
    transform: scale(1);
  }
}

/* Botón de reporte rápido en tarjeta */
.station-report-trigger-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  margin-left: 4px;
}

.station-report-trigger-btn:hover {
  background: rgba(255, 102, 0, 0.15);
  border-color: rgba(255, 102, 0, 0.4);
  color: var(--ktm-orange);
  transform: translateY(-1px);
}

/* Modal de Reporte Comunitario */
.report-modal-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6);
  border-radius: 16px;
  animation: modalSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.report-option-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 52px;
}

.report-option-btn:hover {
  background: rgba(255, 102, 0, 0.08);
  border-color: var(--ktm-orange);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.report-opt-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.report-opt-text strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 2px;
}

.report-opt-text span {
  display: block;
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* Toast flotante de confirmación */
.nollego-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  background: rgba(20, 24, 30, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--ktm-orange);
  color: var(--text-main);
  padding: 12px 20px;
  border-radius: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 102, 0, 0.3);
  font-family: 'Outfit', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 10000;
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.nollego-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ==========================================================================
   GLANCEABLE DATA QUALITY / PRICE ANOMALY MODAL (DRIVING SAFE COCKPIT)
   ========================================================================== */
.glanceable-alert-box {
  max-width: 380px;
  width: 90%;
  background: #081a3a;
  border: 1.5px solid rgba(255, 133, 8, 0.45);
  border-radius: 18px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), 0 0 24px rgba(255, 133, 8, 0.25);
  animation: popInBtn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.glanceable-alert-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.glanceable-alert-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 133, 8, 0.15);
  border: 2px solid #FF8508;
  color: #FF8508;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.glanceable-alert-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.2px;
}

.glanceable-alert-msg {
  font-size: 14px;
  line-height: 1.5;
  color: #e2e8f0;
  font-weight: 500;
  margin: 0 0 14px 0;
}

.glanceable-alert-meta {
  font-size: 11px;
  color: #9fb0c9;
  font-weight: 600;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.glanceable-alert-btn {
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  background: #FF8508;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(255, 133, 8, 0.4);
  transition: all 0.18s ease;
}

.glanceable-alert-btn:active {
  transform: scale(0.97);
  background: #FFA033;
}

/* Highway Selector Top Nav & Back Button */
.back-to-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  color: var(--text-main);
  font-weight: 700;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  cursor: pointer;
  min-height: 44px;
  touch-action: manipulation;
  transition: all 0.2s ease;
}

.back-to-map-btn:hover,
.back-to-map-btn:active {
  background: rgba(255, 133, 8, 0.15);
  border-color: var(--ktm-orange);
  color: var(--ktm-orange);
}

/* Legal info modal elevated layer */
#legalInfoModal {
  z-index: 10001 !important;
}

/* EV Filters Row & Specialized Chips (Sprint 7: NL-11 & NL-13) */
.ev-filters-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 8px 12px;
  margin-top: 6px;
  background: rgba(0, 208, 132, 0.08);
  border: 1px solid rgba(0, 208, 132, 0.25);
  border-radius: var(--radius-sm, 10px);
  animation: slideDownFade 0.25s ease;
}

[data-theme="light"] .ev-filters-row {
  background: rgba(0, 168, 107, 0.08);
  border-color: rgba(0, 168, 107, 0.3);
}

.ev-power-filter-group,
.ev-connector-filter-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.ev-filter-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #94a3b8;
  margin-right: 2px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

[data-theme="light"] .ev-filter-label {
  color: #475569;
}

.ev-chip {
  background: rgba(15, 23, 42, 0.6);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 4px 9px;
  border-radius: 14px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

[data-theme="light"] .ev-chip {
  background: #ffffff;
  color: #334155;
  border-color: #cbd5e1;
}

.ev-chip:hover {
  border-color: #00d084;
  color: #ffffff;
}

.ev-chip.active {
  background: linear-gradient(135deg, rgba(0, 208, 132, 0.25) 0%, rgba(0, 168, 107, 0.35) 100%);
  color: #00d084;
  border-color: #00d084;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(0, 208, 132, 0.25);
}

.ev-connector-filter-group .ev-chip.active {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.22) 0%, rgba(14, 165, 233, 0.32) 100%);
  color: #38bdf8;
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
}

/* EV Station Card Badges */
.ev-power-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  background: rgba(0, 208, 132, 0.16);
  color: #00d084;
  border: 1px solid rgba(0, 208, 132, 0.35);
}

.ev-power-badge.hpc {
  background: rgba(0, 210, 255, 0.18);
  color: #00d2ff;
  border-color: rgba(0, 210, 255, 0.45);
}

.ev-power-badge.hyper {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
  border-color: rgba(168, 85, 247, 0.5);
}

.ev-plugs-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
}

.ev-plugs-badge.available {
  color: #00d084;
}

.ev-plugs-badge.busy {
  color: #ef4444;
}

/* ==========================================================================
   Interactive Live Dynamic Radius Slider Card (Mobile & Map)
   ========================================================================== */
.interactive-radius-slider-card {
  margin: 14px 4px 8px 4px;
  padding: 14px 16px;
  background: rgba(14, 20, 32, 0.92);
  border: 1.5px solid rgba(255, 102, 0, 0.35);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 14px rgba(255, 102, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 10px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

[data-theme="light"] .interactive-radius-slider-card {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 102, 0, 0.4);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.radius-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.radius-card-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
}

.radius-card-title strong {
  color: var(--ktm-orange);
  font-size: 14.5px;
  font-weight: 800;
}

.radius-card-subtitle {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.radius-slider-control-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.radius-stepper-btn {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--border-color);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  transition: all 0.15s ease;
}

.radius-stepper-btn:hover,
.radius-stepper-btn:active {
  background: var(--ktm-orange);
  color: #ffffff;
  border-color: var(--ktm-orange);
  transform: scale(1.08);
}

.radius-slider-track-box {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
  padding: 6px 0;
}

.radius-quick-chips {
  display: flex;
  gap: 6px;
  justify-content: space-between;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.radius-quick-chips::-webkit-scrollbar {
  display: none;
}

.radius-quick-chips .radius-preset-chip {
  flex: 1;
  min-width: 44px;
  padding: 5px 6px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.radius-quick-chips .radius-preset-chip.active {
  background: var(--ktm-orange);
  color: #ffffff;
  border-color: var(--ktm-orange);
  box-shadow: 0 2px 8px rgba(255, 102, 0, 0.35);
}

/* Floating radius badge button on map (bottom-left corner, non-invasive) */
.floating-radius-badge-btn {
  position: absolute;
  bottom: calc(10px + var(--sab, 0px));
  left: calc(10px + var(--sal, 0px));
  z-index: 550;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(12, 17, 26, 0.90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255, 133, 8, 0.45);
  color: var(--text-main);
  font-size: 11.5px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  touch-action: manipulation;
  transition: all 0.15s ease;
  user-select: none;
}

.floating-radius-badge-btn:hover {
  background: rgba(18, 26, 40, 0.95);
  border-color: var(--ktm-orange);
  transform: translateY(-1px);
}

.floating-radius-badge-btn:active {
  transform: scale(0.96);
  border-color: var(--ktm-orange);
}

@media (min-width: 901px) {
  .floating-radius-badge-btn {
    bottom: 24px;
    left: 20px;
  }
}

[data-theme="light"] .floating-radius-badge-btn {
  background: rgba(255, 255, 255, 0.94);
  color: #1e293b;
  border-color: rgba(255, 102, 0, 0.45);
}

/* ==========================================================================
   MOBILE & TABLET LANDSCAPE 2-COLUMN ADAPTIVE LAYOUT (NOL-LANDSCAPE-UX)
   ========================================================================== */
@media (orientation: landscape) and (max-height: 560px) {

  html,
  body {
    height: 100% !important;
    height: 100dvh !important;
    width: 100% !important;
    overflow: hidden !important;
    position: fixed !important;
    inset: 0 !important;
  }

  .app-container {
    height: 100% !important;
    height: 100dvh !important;
    width: 100% !important;
    overflow: hidden !important;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 2px) !important;
  }

  /* Ultra-slim landscape top header */
  .top-header {
    min-height: 34px !important;
    height: 34px !important;
    padding-top: max(2px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 2px !important;
    padding-left: max(8px, env(safe-area-inset-left, 8px)) !important;
    padding-right: max(8px, env(safe-area-inset-right, 8px)) !important;
    background: var(--bg-panel-solid) !important;
  }

  .brand-header-logo {
    height: 18px !important;
    max-width: 75px !important;
  }

  .brand-symbol-raw {
    width: 20px !important;
    height: 20px !important;
  }

  .brand-name {
    font-size: 14px !important;
  }

  .fuel-toggle-group {
    padding: 1px 3px !important;
    gap: 2px !important;
  }

  .fuel-pill-btn,
  .fuel-pill-more-btn {
    padding: 2px 5px !important;
    font-size: 10px !important;
  }

  .header-icon-action {
    width: 26px !important;
    height: 26px !important;
  }

  .copilot-active-container {
    flex: 1 !important;
    min-height: 0 !important;
    height: calc(100dvh - 34px) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 2-Column Grid: Map ~66-70% (left) + Stations List ~30-34% (right) */
  .main-content-layout {
    display: grid !important;
    grid-template-columns: 1fr minmax(280px, 34vw) !important;
    gap: 8px !important;
    padding: 4px max(8px, env(safe-area-inset-right, 8px)) 4px max(8px, env(safe-area-inset-left, 8px)) !important;
    height: 100% !important;
    min-height: 0 !important;
    flex: 1 !important;
    overflow: hidden !important;
    flex-direction: row !important;
  }

  /* Map column occupies left side with full height */
  .map-container-wrapper {
    order: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    flex: 1 !important;
    border-radius: 10px !important;
    position: relative !important;
  }

  .map-view {
    position: absolute !important;
    inset: -15% !important;
    width: 130% !important;
    height: 130% !important;
    min-height: 0 !important;
  }

  /* Stations Sidebar occupies right column with full height & smooth scroll */
  .timeline-sidebar {
    order: 2 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 5px 8px !important;
    border-radius: 10px !important;
    background: var(--bg-panel) !important;
    flex-shrink: 0 !important;
  }

  /* Drag handle hidden in landscape since 2-column layout displays naturally */
  .bottom-sheet-drag-handle {
    display: none !important;
  }

  .timeline-header {
    flex-shrink: 0 !important;
    margin-bottom: 3px !important;
  }

  .sort-segmented-control {
    margin-bottom: 3px !important;
    padding: 2px !important;
    gap: 2px !important;
  }

  .sort-tab-btn {
    padding: 3px 5px !important;
    font-size: 9.5px !important;
  }

  .unified-filters-row {
    gap: 2px !important;
    margin-bottom: 3px !important;
  }

  .compact-select-pill,
  .brand-chip,
  .brand-select-pill {
    padding: 2px 4px !important;
    font-size: 9px !important;
  }

  /* Station stream cards in landscape column */
  .stations-list-stream {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    padding-right: 2px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .station-card {
    padding: 3px 6px !important;
    min-height: 32px !important;
    border-radius: 6px !important;
  }

  .station-card-title {
    font-size: 11px !important;
  }

  .station-price-box {
    font-size: 12px !important;
  }

  /* Floating controls positioned neatly in left map column */
  .floating-map-controls {
    bottom: 8px !important;
    right: 8px !important;
    gap: 4px !important;
  }

  .floating-radius-badge-btn {
    bottom: 8px !important;
    left: 8px !important;
    padding: 4px 8px !important;
    font-size: 9.5px !important;
  }

  .floating-map-btn {
    padding: 4px 8px !important;
    font-size: 9.5px !important;
  }
}
/* ===== Buscador de zona en el mapa ===== */
.map-search-fab {
  position: absolute; right: 10px; top: 42%; z-index: 640;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: rgba(20, 24, 33, 0.92); color: #fff; font-size: 17px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35); cursor: pointer;
}
.map-search-panel {
  position: absolute; left: 10px; right: 10px; top: max(10px, env(safe-area-inset-top, 10px));
  max-width: 480px; margin: 0 auto; z-index: 700; border-radius: 14px;
  background: rgba(20, 24, 33, 0.97); color: #fff; box-shadow: 0 4px 18px rgba(0,0,0,0.45);
}
.map-search-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.map-search-row input {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  color: #fff; font-size: 16px; padding: 6px 0;
}
.map-search-close { background: none; border: none; color: #fff; font-size: 18px; padding: 4px 6px; cursor: pointer; }
.map-search-results { list-style: none; margin: 0; padding: 0; max-height: 40vh; overflow-y: auto; }
.map-search-results li {
  padding: 11px 14px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 14px; cursor: pointer;
}
.map-search-results li:active { background: rgba(255,255,255,0.1); }
.map-search-results li.empty { cursor: default; opacity: 0.7; }
.map-search-back {
  position: absolute; left: 50%; transform: translateX(-50%); top: max(64px, calc(env(safe-area-inset-top, 10px) + 54px));
  z-index: 650; border: none; border-radius: 22px; padding: 10px 16px; font-size: 14px; font-weight: 600;
  background: #ff7a00; color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.4); cursor: pointer;
}

/* ===== Pines por precio relativo, favoritas y descuentos ===== */
.custom-price-marker.price-low { border-color: #00c46a !important; color: #00753d !important; }
.custom-price-marker.price-high { border-color: #e5484d !important; color: #b42327 !important; }
.custom-price-marker.is-favorite { box-shadow: 0 0 0 2px rgba(255, 170, 0, 0.85), 0 4px 14px rgba(0,0,0,0.4); }
.custom-price-marker.has-discount strong::after { content: '*'; color: #ff7a00; }
.map-discounts-fab { top: calc(42% + 54px); }
.discounts-modal {
  position: absolute; inset: 0; z-index: 800; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); padding: 16px;
}
.discounts-card {
  width: 100%; max-width: 420px; max-height: 85%; overflow-y: auto; border-radius: 16px; padding: 16px;
  background: rgba(20, 24, 33, 0.98); color: #fff; box-shadow: 0 6px 24px rgba(0,0,0,0.5);
}
.discounts-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.discounts-hint { font-size: 12.5px; opacity: 0.75; margin: 4px 0 10px; }
.discounts-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,0.08); font-size: 14px; }
.discounts-row input { width: 80px; padding: 7px 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); color: #fff; font-size: 16px; text-align: right; }
.discounts-save { position: static !important; transform: none !important; display: block; margin: 14px auto 0; }
.map-search-favs-row { padding: 8px 12px 10px; border-top: 1px solid rgba(255,255,255,0.08); }
.map-search-favs-btn { background: none; border: 1px solid rgba(255,255,255,0.25); color: #fff; border-radius: 16px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
.map-search-favs-row { display: flex; gap: 8px; flex-wrap: wrap; }


/* ===== MI HUCHA NOLLEGO & REPOSTAJES ===== */
.map-savings-fab {
  top: calc(42% + 108px);
  position: absolute; right: 10px; z-index: 640;
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: rgba(20, 24, 33, 0.92); color: #ffaa00; font-size: 17px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.map-layer-fab {
  top: calc(42% + 162px);
  position: absolute; right: 10px; z-index: 640;
  color: #38bdf8;
}
.map-layer-fab.active {
  background: #ff7a00;
  color: #fff;
}
.map-search-quick-filters {
  display: flex; align-items: center; gap: 6px; padding: 0 12px 10px;
  flex-wrap: wrap;
}
.search-filter-chip {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  color: #cbd5e1; border-radius: 16px; padding: 5px 10px; font-size: 11.5px;
  font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
}
.search-filter-chip.active {
  background: rgba(255, 122, 0, 0.22); border-color: #ff7a00; color: #ff9a3c;
}
.map-search-result-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.map-search-result-label {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.map-search-route-btn {
  flex-shrink: 0; background: #ff7a00; color: #fff; border: none; border-radius: 14px;
  padding: 5px 10px; font-size: 11.5px; font-weight: 800; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.destination-route-banner {
  position: absolute; left: 10px; right: 10px; top: max(10px, env(safe-area-inset-top, 10px));
  max-width: 480px; margin: 0 auto; z-index: 660;
  background: rgba(15, 23, 42, 0.95); color: #fff;
  border: 1px solid rgba(255, 122, 0, 0.45); border-radius: 14px;
  padding: 9px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}
.dest-route-info { min-width: 0; flex: 1; }
.dest-route-info strong { display: block; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dest-route-info span { display: block; font-size: 11.5px; color: #00e676; font-weight: 700; margin-top: 2px; }
.dest-route-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.dest-route-list-btn {
  background: #ff7a00; color: #fff; border: none; border-radius: 10px;
  padding: 6px 10px; font-size: 11.5px; font-weight: 800; cursor: pointer;
}
.dest-route-close-btn {
  background: rgba(255,255,255,0.1); color: #fff; border: none; border-radius: 50%;
  width: 28px; height: 28px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}

.station-tank-cost {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 1px;
  white-space: nowrap;
}
.station-tank-cost strong {
  color: var(--text-main);
  font-weight: 800;
}

.station-detail-trip-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.trip-metric-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 8px 10px;
  text-align: center;
}
.trip-metric-box span {
  display: block;
  font-size: 10.5px;
  color: var(--text-muted);
}
.trip-metric-box strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main);
  margin-top: 2px;
}

.station-history-card {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
}
.history-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-main);
  margin-bottom: 6px;
}
.history-card-head span {
  font-size: 11px;
  color: var(--ktm-orange);
  font-weight: 700;
}
.history-empty-note {
  font-size: 11.5px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}
.history-sparkline-svg {
  width: 100%;
  height: 56px;
  display: block;
}
.history-range-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

[data-theme="light"] .trip-metric-box,
[data-theme="light"] .station-history-card {
  background: #f8fafc;
}

.report-geofence-notice {
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.report-geofence-notice.allowed {
  background: rgba(0, 208, 132, 0.14);
  border: 1px solid rgba(0, 208, 132, 0.35);
  color: #00e676;
}
.report-geofence-notice.blocked {
  background: rgba(255, 170, 0, 0.12);
  border: 1px solid rgba(255, 170, 0, 0.35);
  color: #ffaa00;
}
.report-exact-price-box {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
}
.report-exact-price-box.disabled {
  opacity: 0.55;
}
.report-exact-price-box label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 6px;
}
.report-exact-row {
  display: flex;
  gap: 8px;
}
.report-exact-row input {
  flex: 1;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  font-size: 15px;
  font-weight: 700;
}
.report-exact-row button {
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  background: #00d084;
  color: #042f1a;
  font-weight: 800;
  font-size: 12.5px;
  cursor: pointer;
}
.report-exact-row button:disabled {
  cursor: not-allowed;
}
.badge-user-reported.verified {
  background: rgba(0, 208, 132, 0.18);
  color: #00e676;
  border-color: rgba(0, 208, 132, 0.4);
}
.map-savings-badge {
  position: absolute; top: -6px; right: -6px;
  background: #00d084; color: #042f1a; font-size: 10px; font-weight: 800;
  padding: 2px 6px; border-radius: 10px; border: 1.5px solid #141821;
  box-shadow: 0 2px 6px rgba(0,208,132,0.4);
}

.zone-avg-badge {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 8px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 600; line-height: 1.3;
}
.zone-avg-badge.better {
  background: rgba(0, 208, 132, 0.12); color: #00e676; border: 1px solid rgba(0, 208, 132, 0.25);
}
.zone-avg-badge.worse {
  background: rgba(239, 68, 68, 0.12); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.25);
}
.zone-avg-badge.neutral {
  background: rgba(148, 163, 184, 0.12); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.2);
}

.station-record-refuel-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin-top: 12px; padding: 13px 16px; border-radius: 12px;
  background: linear-gradient(135deg, #ff7a00, #ff9500); color: #fff;
  border: none; font-size: 14px; font-weight: 800; cursor: pointer;
  box-shadow: 0 4px 14px rgba(255, 122, 0, 0.35); transition: transform 0.15s ease;
}
.station-record-refuel-btn:active {
  transform: scale(0.98);
}

.record-refuel-box {
  width: 100%; max-width: 400px;
}
.record-refuel-inputs-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 16px 0 12px; font-size: 14px; color: var(--text-main, #f8fafc);
}
.record-litres-stepper {
  display: flex; align-items: center; gap: 6px;
}
.record-litres-stepper input {
  width: 70px; text-align: center; padding: 8px 4px; border-radius: 8px;
  background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.25);
  color: #fff; font-size: 17px; font-weight: 800; outline: none;
}
.record-refuel-preview-card {
  background: rgba(0, 208, 132, 0.12); border: 1.5px solid rgba(0, 208, 132, 0.35);
  border-radius: 12px; padding: 14px; text-align: center; margin-bottom: 16px;
}
.preview-metric {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
}
.preview-label { font-size: 13.5px; color: #f1f5f9; font-weight: 700; }
.preview-val { font-size: 25px; font-weight: 900; color: #00e676; font-family: var(--font-display, sans-serif); }
.preview-sub { font-size: 12px; color: #cbd5e1; font-weight: 600; margin-top: 4px; }
.record-confirm-btn { width: 100%; padding: 13px; font-size: 15px; }

.savings-tracker-box {
  width: 100%; max-width: 440px; max-height: 85vh; display: flex; flex-direction: column;
}
.savings-tracker-hero {
  text-align: center; padding: 18px 14px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 101, 0, 0.22), rgba(0, 208, 132, 0.18));
  border: 1.5px solid rgba(255, 101, 0, 0.45); margin-bottom: 16px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}
.tracker-total-label { font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px; color: #f1f5f9; font-weight: 800; }
.tracker-total-amount { font-size: 40px; font-weight: 900; color: #00e676; text-shadow: 0 0 16px rgba(0, 230, 118, 0.35); font-family: var(--font-display, sans-serif); margin: 4px 0; }
.tracker-total-sub { font-size: 13px; color: #e2e8f0; font-weight: 600; margin-bottom: 14px; }
.tracker-share-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px;
  border-radius: 22px; border: none; background: #25d366; color: #052e16;
  font-size: 14px; font-weight: 900; cursor: pointer; box-shadow: 0 4px 14px rgba(37, 211, 102, 0.4);
}
.tracker-history-section h4 {
  font-size: 13.5px; color: #f8fafc; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 10px; display: flex; align-items: center; gap: 8px;
}
.tracker-history-list {
  max-height: 35vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
}
.tracker-history-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 13px; border-radius: 11px; background: rgba(15, 23, 42, 0.7);
  border: 1.5px solid rgba(255, 255, 255, 0.14); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); font-size: 13px;
}
.history-card-left strong { display: block; color: #ffffff; font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.history-card-left small { color: #cbd5e1; font-size: 12.5px; font-weight: 600; }
.history-savings-pill {
  font-size: 14.5px; font-weight: 900; color: #00e676; background: rgba(0, 230, 118, 0.18);
  border: 1px solid rgba(0, 230, 118, 0.35); padding: 5px 10px; border-radius: 8px;
}
.tracker-empty-state {
  text-align: center; padding: 24px 14px; color: #cbd5e1; font-size: 13.5px; font-weight: 600;
}
.tracker-empty-state i { font-size: 38px; color: #ffaa00; margin-bottom: 10px; display: block; }
.tracker-empty-state p { color: #f8fafc; font-weight: 700; margin: 4px 0; }
.tracker-empty-state span { font-size: 12px; color: #94a3b8; font-weight: 500; display: block; margin-top: 4px; }


/* ===== INDICADOR DE MODO OFFLINE / TÚNEL ===== */
.offline-indicator-pill {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, 0.95); color: #00d2ff;
  border: 1px solid rgba(0, 210, 255, 0.35); border-radius: 20px;
  padding: 6px 14px; font-size: 12px; font-weight: 700;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

/* ===== TENDENCIA SEMANAL DE PRECIOS ("¿LLENAS HOY?") ===== */
.fuel-day-trend-row {
  margin: 6px 0 10px;
}
.fuel-day-trend-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px; padding: 6px 12px; color: #cbd5e1;
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all 0.18s ease; width: 100%; box-sizing: border-box;
}
.fuel-day-trend-chip:hover {
  background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2);
}
.fuel-day-trend-chip i {
  margin-left: auto; opacity: 0.6; font-size: 13px;
}
.fuel-day-trend-chip .trend-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; flex-shrink: 0;
}
.fuel-day-trend-chip.trend-best {
  border-color: rgba(0, 208, 132, 0.4); background: rgba(0, 208, 132, 0.1); color: #00e676;
}
.fuel-day-trend-chip.trend-best .trend-dot { background: #00e676; box-shadow: 0 0 8px #00e676; }
.fuel-day-trend-chip.trend-warn {
  border-color: rgba(255, 170, 0, 0.4); background: rgba(255, 170, 0, 0.1); color: #ffaa00;
}
.fuel-day-trend-chip.trend-warn .trend-dot { background: #ffaa00; }
.fuel-day-trend-chip.trend-peak {
  border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.1); color: #f87171;
}
.fuel-day-trend-chip.trend-peak .trend-dot { background: #f87171; }

.fuel-trend-box {
  width: 100%; max-width: 440px;
}
.fuel-trend-verdict-card {
  padding: 14px; border-radius: 12px; margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1);
}
.trend-verdict-header { margin-bottom: 8px; }
.trend-verdict-pill {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px; letter-spacing: 0.5px;
}
.trend-verdict-pill.pill-best { background: rgba(0, 208, 132, 0.2); color: #00e676; }
.trend-verdict-pill.pill-normal { background: rgba(0, 210, 255, 0.2); color: #00d2ff; }
.trend-verdict-pill.pill-warn { background: rgba(255, 170, 0, 0.2); color: #ffaa00; }
.trend-verdict-pill.pill-peak { background: rgba(239, 68, 68, 0.2); color: #f87171; }
.fuel-trend-verdict-card h4 {
  font-size: 15px; font-weight: 800; color: #fff; margin: 0 0 6px;
}
.fuel-trend-verdict-card p {
  font-size: 12.5px; color: #94a3b8; line-height: 1.4; margin: 0;
}

.fuel-trend-calendar h4 {
  font-size: 12px; color: #cbd5e1; text-transform: uppercase; margin: 0 0 10px; display: flex; align-items: center; gap: 8px;
}
.trend-week-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 12px;
}
.trend-day-col {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.03); border-radius: 8px; padding: 8px 2px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.trend-day-col.today-active {
  border-color: var(--ktm-orange); background: rgba(255, 122, 0, 0.12);
  box-shadow: 0 0 12px rgba(255, 122, 0, 0.25);
}
.trend-day-col .day-name { font-size: 10px; font-weight: 800; color: #94a3b8; }
.trend-day-col.today-active .day-name { color: var(--ktm-orange); }
.trend-day-col .day-bar-wrap {
  width: 12px; height: 60px; background: rgba(255, 255, 255, 0.05);
  border-radius: 6px; display: flex; align-items: flex-end; overflow: hidden;
}
.trend-day-col .day-bar {
  width: 100%; border-radius: 6px; transition: height 0.3s ease;
}
.trend-day-col .day-bar.cheap { background: #00e676; }
.trend-day-col .day-bar.normal { background: #00d2ff; }
.trend-day-col .day-bar.high { background: #ffaa00; }
.trend-day-col .day-bar.peak { background: #f87171; }
.trend-day-col .day-tag { font-size: 9px; font-weight: 700; color: #64748b; }
.trend-day-col .day-tag.best { color: #00e676; }
.trend-day-col .day-tag.peak { color: #f87171; }
.trend-source-note { font-size: 10px; color: #64748b; display: block; line-height: 1.35; }

/* ===== GAMIFICACIÓN Y RANGOS EN LA HUCHA ===== */
.tracker-rank-card {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px;
  background: rgba(15, 23, 42, 0.7); border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px; margin-bottom: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.rank-icon-wrap {
  font-size: 34px; flex-shrink: 0; line-height: 1;
}
.rank-info { flex: 1; min-width: 0; }
.rank-top-row {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;
}
.rank-title { font-size: 15px; font-weight: 800; color: #ffffff; }
.rank-badge-status {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  background: rgba(255, 122, 0, 0.25); color: #ff7a00;
  border: 1px solid rgba(255, 122, 0, 0.4);
  padding: 3px 8px; border-radius: 6px;
}
.rank-progress-bar-wrap {
  width: 100%; height: 7px; background: rgba(255, 255, 255, 0.15);
  border-radius: 4px; overflow: hidden; margin-bottom: 5px;
}
.rank-progress-fill {
  height: 100%; background: linear-gradient(90deg, #ff7a00, #00e676);
  border-radius: 4px; transition: width 0.4s ease;
}
.rank-next-label {
  font-size: 12px; color: #cbd5e1; font-weight: 600;
}

/* ===== TEMA CLARO PARA MI HUCHA Y REPOSTAJES ===== */
[data-theme="light"] .savings-tracker-box {
  color: #0f172a;
}
[data-theme="light"] .savings-tracker-hero {
  background: linear-gradient(135deg, rgba(255, 101, 0, 0.12), rgba(0, 208, 132, 0.12));
  border-color: rgba(255, 101, 0, 0.35);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .tracker-total-label {
  color: #1e293b;
  font-weight: 800;
}
[data-theme="light"] .tracker-total-amount {
  color: #059669;
  text-shadow: none;
}
[data-theme="light"] .tracker-total-sub {
  color: #334155;
  font-weight: 600;
}
[data-theme="light"] .tracker-rank-card {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .rank-title {
  color: #0f172a;
  font-weight: 800;
}
[data-theme="light"] .rank-badge-status {
  background: rgba(255, 101, 0, 0.15);
  color: #c2410c;
  border-color: rgba(255, 101, 0, 0.3);
}
[data-theme="light"] .rank-progress-bar-wrap {
  background: #e2e8f0;
}
[data-theme="light"] .rank-next-label {
  color: #475569;
  font-weight: 600;
}
[data-theme="light"] .tracker-history-section h4 {
  color: #0f172a;
  font-weight: 800;
}
[data-theme="light"] .tracker-history-card {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .history-card-left strong {
  color: #0f172a;
  font-weight: 700;
}
[data-theme="light"] .history-card-left small {
  color: #475569;
  font-weight: 600;
}
[data-theme="light"] .history-savings-pill {
  color: #047857;
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.35);
}
[data-theme="light"] .tracker-empty-state {
  color: #475569;
}
[data-theme="light"] .tracker-empty-state p {
  color: #0f172a;
}
[data-theme="light"] .tracker-empty-state span {
  color: #64748b;
}
[data-theme="light"] .record-refuel-inputs-row {
  color: #0f172a;
}
[data-theme="light"] .record-litres-stepper input {
  background: #ffffff;
  color: #0f172a;
  border-color: #cbd5e1;
}
[data-theme="light"] .record-refuel-preview-card {
  background: rgba(0, 208, 132, 0.08);
  border-color: rgba(0, 208, 132, 0.3);
}
[data-theme="light"] .preview-label {
  color: #1e293b;
}
[data-theme="light"] .preview-val {
  color: #059669;
}
[data-theme="light"] .preview-sub {
  color: #475569;
}

/* ==========================================================================
   FASE 1 UX: FULL-SCREEN MAP, FLOATING TOP BAR, BOTTOM TAB BAR & OVERLAYS
   ========================================================================== */
.legacy-hidden-fab {
  display: none !important;
}

.map-top-floating-bar {
  position: absolute;
  top: max(12px, calc(var(--sat, 0px) + 8px));
  left: max(12px, var(--sal, 0px));
  right: max(12px, var(--sar, 0px));
  z-index: 660;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.map-top-floating-bar > * {
  pointer-events: auto;
}

@media (min-width: 901px) {
  .map-top-floating-bar {
    left: 58px;
    max-width: 520px;
  }
  #mapListToggleBtn {
    display: none;
  }
}

.map-floating-icon-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(11, 24, 50, 0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #f8fafc;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease;
}

.map-floating-icon-btn:active {
  transform: scale(0.94);
}

.map-top-search-capsule {
  flex: 1;
  min-width: 0;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(11, 24, 50, 0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  display: flex;
  align-items: center;
  padding: 0 6px 0 14px;
  gap: 8px;
}

.map-top-search-trigger {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  color: #e2e8f0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  text-align: left;
  padding: 0;
}

.map-top-search-trigger span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-top-search-trigger i {
  font-size: 15px;
  color: var(--nl-color-cyan-light, #6fe3ff);
  flex-shrink: 0;
}

.map-top-capsule-divider {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.16);
  flex-shrink: 0;
}

.map-top-filters-trigger {
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 101, 0, 0.18);
  color: #ff9a3c;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.map-top-filters-trigger:hover {
  background: rgba(255, 101, 0, 0.28);
}

[data-theme="light"] .map-floating-icon-btn,
[data-theme="light"] .map-top-search-capsule {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
  color: #0f172a;
}

[data-theme="light"] .map-top-search-trigger {
  color: #334155;
}

[data-theme="light"] .map-top-search-trigger i {
  color: #0f172a;
}

[data-theme="light"] .map-top-capsule-divider {
  background: rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .map-top-filters-trigger {
  background: rgba(255, 101, 0, 0.12);
  color: #d9480f;
}

/* Botón flotante "Buscar en esta zona" */
.search-in-area-btn {
  position: absolute;
  top: max(66px, calc(var(--sat, 0px) + 60px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 655;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(11, 24, 50, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  white-space: nowrap;
}

[data-theme="light"] .search-in-area-btn {
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.14);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.16);
}

.search-in-area-btn i {
  color: var(--ktm-orange);
  font-size: 12px;
}

/* Columna limpia de acciones derechas (Capas, GPS, Brújula) */
.map-right-actions-stack {
  position: absolute;
  right: max(12px, var(--sar, 0px));
  bottom: calc(92px + var(--sab, 0px));
  z-index: 645;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: bottom 0.2s ease;
}

.map-container-wrapper.has-hero-card .map-right-actions-stack {
  bottom: calc(210px + var(--sab, 0px));
}

.map-right-fab {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(11, 24, 50, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #f8fafc;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.map-right-fab.active {
  background: var(--ktm-orange);
  border-color: var(--ktm-orange);
  color: #ffffff;
}

.map-right-actions-stack .floating-compass-btn {
  position: static !important;
  margin: 0 !important;
}

[data-theme="light"] .map-right-fab {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(15, 23, 42, 0.12);
  color: #0f172a;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.14);
}

/* Paneles de notificación / búsqueda adaptados debajo de la barra flotante */
.map-top-notifications-stack {
  top: max(66px, calc(var(--sat, 0px) + 60px));
}

.map-search-panel {
  top: max(12px, calc(var(--sat, 0px) + 8px));
  z-index: 720;
}

/* Barra inferior flotante de 3 pestañas (Gasolineras, Favoritos, Más) */
.app-bottom-tab-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(12px, calc(var(--sab, 0px) + 8px));
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: min(calc(100% - 28px), 360px);
  height: 60px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(11, 24, 50, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.42);
}

[data-theme="light"] .app-bottom-tab-bar {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16);
}

.bottom-tab-item {
  flex: 1;
  height: 100%;
  border: none;
  background: transparent;
  border-radius: 999px;
  color: #94a3b8;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.bottom-tab-item i {
  font-size: 17px;
}

.bottom-tab-item.active {
  background: rgba(255, 101, 0, 0.18);
  color: var(--ktm-orange);
}

[data-theme="light"] .bottom-tab-item {
  color: #475569;
}

[data-theme="light"] .bottom-tab-item.active {
  background: rgba(255, 101, 0, 0.12);
  color: #ea580c;
}

@media (min-width: 901px) {
  .app-bottom-tab-bar {
    bottom: 16px;
    width: 320px;
    height: 54px;
  }
}

/* Overlays de Favoritos y Más */
.app-tab-overlay {
  position: fixed;
  inset: 0;
  z-index: 920;
  background: var(--bg-app);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: max(18px, calc(var(--sat, 0px) + 12px)) 16px calc(92px + var(--sab, 0px)) 16px;
}

.tab-overlay-inner {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tab-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
}

.tab-overlay-header h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.more-tab-brand-logo {
  height: 30px;
  width: auto;
  object-fit: contain;
}

.tab-overlay-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Favoritos */
.favorites-tab-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.favorite-tab-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
}

.favorite-tab-card-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.favorite-tab-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.favorite-tab-card-info strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.favorite-tab-card-info span {
  font-size: 12.5px;
  color: var(--text-muted);
}

.favorite-tab-card-price {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
  white-space: nowrap;
}

.favorite-tab-remove-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 170, 0, 0.14);
  color: #ffaa00;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.favorites-empty-state {
  text-align: center;
  padding: 48px 20px;
  border-radius: 18px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
}

.favorites-empty-icon {
  font-size: 40px;
  color: var(--ktm-orange);
  margin-bottom: 12px;
}

.favorites-empty-state h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 8px;
}

.favorites-empty-state p {
  font-size: 13.5px;
  color: var(--text-muted);
  max-width: 320px;
  margin: 0 auto 18px auto;
  line-height: 1.5;
}

.favorites-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  border: none;
  background: var(--ktm-orange);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* Sección Más */
.more-trend-banner {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 101, 0, 0.35);
  background: rgba(255, 101, 0, 0.1);
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
}

.more-trend-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 101, 0, 0.2);
  color: var(--ktm-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}

.more-trend-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.more-trend-text strong {
  font-size: 14.5px;
  font-weight: 800;
}

.more-trend-text span {
  font-size: 12.5px;
  color: var(--text-muted);
}

.more-section-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.more-section-block h3 {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.more-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.more-pill-action {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--ktm-orange);
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.more-vehicle-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
}

.more-vehicle-check {
  color: var(--ktm-orange);
  font-size: 16px;
}

.more-vehicle-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.more-vehicle-info strong {
  font-size: 15px;
  font-weight: 700;
}

.more-vehicle-info span {
  font-size: 13px;
  color: var(--text-muted);
}

.more-vehicle-info-icon {
  color: var(--text-muted);
  font-size: 17px;
}

.more-menu-list {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.more-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: none;
  border-bottom: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}

.more-menu-item:last-child {
  border-bottom: none;
}

.more-menu-item > i:first-child {
  width: 20px;
  text-align: center;
  color: var(--ktm-orange);
  font-size: 16px;
}

.more-menu-item > span {
  flex: 1;
}

.more-menu-item > i.fa-chevron-right {
  color: var(--text-dim);
  font-size: 12px;
}

.more-value-pill {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 101, 0, 0.14);
  color: var(--ktm-orange);
  font-size: 12px;
  font-weight: 700;
  flex: none !important;
}

.more-version-footer {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 6px 0 12px;
}

/* Modal rápido de filtros */
.quick-filters-modal-box {
  max-width: 420px;
  width: 94%;
  padding: 18px;
}

.quick-filters-section {
  margin-top: 14px;
}

.quick-filters-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.quick-filters-fuel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.quick-filters-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.qf-chip {
  flex: 1 1 auto;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.qf-chip.active {
  background: var(--ktm-orange);
  border-color: var(--ktm-orange);
  color: #ffffff;
  font-weight: 700;
}

/* Cabecera de cierre de lista cuando se despliega con botón Cerrar */
.stations-sheet-top-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px 10px;
  flex-shrink: 0;
}

.timeline-sidebar.is-expanded .stations-sheet-top-bar {
  display: flex;
}

.stations-sheet-close-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.stations-sheet-count-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

/* MÓVIL VERTICAL: Mapa al 100%, lista colapsada en botón, tarjeta sobre tab bar */
@media (max-width: 900px) and (orientation: portrait) {
  .top-header,
  .app-footer {
    display: none !important;
  }

  .copilot-active-container {
    height: 100dvh !important;
    min-height: 100dvh !important;
  }

  .main-content-layout {
    padding: 0 !important;
    gap: 0 !important;
    height: 100dvh !important;
  }

  .map-container-wrapper {
    height: 100dvh !important;
    max-height: none !important;
    border-radius: 0 !important;
  }

  .timeline-sidebar {
    display: none !important;
  }

  .timeline-sidebar.is-expanded {
    display: flex !important;
    top: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding-top: max(12px, var(--sat, 0px)) !important;
    z-index: 980 !important;
    background: var(--bg-app) !important;
  }

  .timeline-sidebar.is-expanded .bottom-sheet-drag-handle {
    display: none !important;
  }

  .quick-nav-best-card {
    position: absolute !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(82px + var(--sab, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    z-index: 650 !important;
  }

  .floating-map-controls {
    bottom: calc(84px + var(--sab, 0px)) !important;
    right: 12px !important;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  .app-bottom-tab-bar,
  .map-top-floating-bar,
  .map-right-actions-stack,
  .search-in-area-btn {
    display: none !important;
  }
}

/* ==========================================================================
   FASE 2: PINES LIMPIOS (SVG + PRECIO), TARJETA INFERIOR Y LISTA MINIMALISTA
   ========================================================================== */

/* Pines de mapa limpios con logo SVG, precio y triangulo inferior */
.custom-price-marker.nl-map-pin {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  border: 2px solid #f59e0b !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.28) !important;
  font-family: var(--font-display, var(--font-sans)) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.15;
  transform-origin: bottom center;
}

.custom-price-marker.nl-map-pin .marker-unit {
  display: none !important;
}

.custom-price-marker.nl-map-pin .nl-pin-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #1e293b;
  font-size: 12px;
}

.custom-price-marker.nl-map-pin .nl-pin-logo svg {
  width: 15px;
  height: 15px;
  display: block;
}

.custom-price-marker.nl-map-pin .nl-pin-price {
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.custom-price-marker.nl-map-pin .nl-pin-caret {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #f59e0b;
}

.custom-price-marker.nl-map-pin.price-low {
  border-color: #16a34a !important;
  color: #0f172a !important;
}
.custom-price-marker.nl-map-pin.price-low .nl-pin-caret {
  border-top-color: #16a34a;
}

.custom-price-marker.nl-map-pin.price-mid {
  border-color: #f59e0b !important;
  color: #0f172a !important;
}
.custom-price-marker.nl-map-pin.price-mid .nl-pin-caret {
  border-top-color: #f59e0b;
}

.custom-price-marker.nl-map-pin.price-high {
  border-color: #dc2626 !important;
  color: #0f172a !important;
}
.custom-price-marker.nl-map-pin.price-high .nl-pin-caret {
  border-top-color: #dc2626;
}

.custom-price-marker.nl-map-pin.best-deal {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 2.5px solid #16a34a !important;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.38) !important;
  animation: none !important;
  transform: scale(1.06);
}
.custom-price-marker.nl-map-pin.best-deal .nl-pin-caret {
  border-top-color: #16a34a;
}

.custom-price-marker.nl-map-pin.selected-deal {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 3px solid #1d4ed8 !important;
  box-shadow: 0 6px 18px rgba(29, 78, 216, 0.45) !important;
  transform: scale(1.14);
  z-index: 10000 !important;
}
.custom-price-marker.nl-map-pin.selected-deal .nl-pin-caret {
  border-top-color: #1d4ed8;
}

.custom-price-marker.nl-map-pin:hover {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-color: #1d4ed8 !important;
  transform: scale(1.12);
}

.nl-pin-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 7.5px;
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.nl-pin-badge.fav { background: #f59e0b; }
.nl-pin-badge.best { background: #16a34a; }
.nl-pin-badge.warn { background: #dc2626; }

/* Punto compacto cuando hay densidad/solapamiento en pantalla */
.nl-pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.4);
  cursor: pointer;
  background: #f59e0b;
  transition: transform 0.15s ease;
}
.nl-pin-dot.price-low { background: #16a34a; }
.nl-pin-dot.price-mid { background: #f59e0b; }
.nl-pin-dot.price-high { background: #dc2626; }
.nl-pin-dot.is-favorite {
  box-shadow: 0 0 0 2px #f59e0b, 0 2px 6px rgba(15, 23, 42, 0.4);
}
.nl-pin-dot:hover {
  transform: scale(1.25);
}

/* Tarjeta inferior limpia al marcar gasolinera */
.quick-nav-best-card {
  border-radius: 20px !important;
  padding: 12px 14px 13px !important;
  gap: 8px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22) !important;
}

.quick-nav-header-row {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-color);
}

.quick-nav-main-info {
  cursor: pointer;
}

.quick-nav-top-clean {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.quick-nav-station-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.quick-nav-station-row .brand-badge.mini {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1.5px solid var(--border-color) !important;
  padding: 6px !important;
  flex-shrink: 0 !important;
}

.quick-nav-name-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.quick-nav-name {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--text-main) !important;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quick-nav-meta-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.quick-nav-meta-inline .quick-metric-pill.dist {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  padding: 0;
}

.quick-nav-meta-inline .quick-metric-pill.schedule {
  font-size: 12.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}

.quick-nav-price-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  gap: 2px;
}

.quick-nav-price-col .quick-metric-pill.price {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: var(--text-main) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  line-height: 1.1;
}

.quick-nav-freshness {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.quick-nav-actions-clean {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.quick-nav-fav-clean-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  cursor: pointer;
  flex-shrink: 0;
}
.quick-nav-fav-clean-btn.is-fav {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.14);
}

.quick-nav-actions-clean .quick-nav-cta-btn {
  flex: 1 1 auto;
  border-radius: 999px !important;
  background: #2240d5 !important;
  color: #ffffff !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  padding: 0 16px !important;
  box-shadow: 0 4px 12px rgba(34, 64, 213, 0.35) !important;
}

.quick-nav-secondary-btn {
  height: 44px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}
.quick-nav-secondary-btn i {
  color: #64748b;
}

.quick-nav-icon-btn {
  width: 38px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

/* Lista minimalista de 2 lineas con barra semaforo derecha */
.station-card.nl-clean-card {
  padding: 12px 14px 12px 12px !important;
  border-radius: 12px !important;
  border: 1px solid var(--border-color) !important;
  border-right-width: 4px !important;
  background: var(--bg-card) !important;
  min-height: 64px !important;
}

.station-card.nl-clean-card.price-tier-low {
  border-right-color: #16a34a !important;
}
.station-card.nl-clean-card.price-tier-mid {
  border-right-color: #f59e0b !important;
}
.station-card.nl-clean-card.price-tier-high {
  border-right-color: #dc2626 !important;
}

.station-card.nl-clean-card.selected-card {
  box-shadow: inset 0 0 0 1.5px var(--ktm-orange) !important;
}

.nl-card-main-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100%;
}

.station-card-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

.station-card.nl-clean-card .brand-badge.mini {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
  padding: 4px !important;
  flex-shrink: 0 !important;
}

.station-card-text-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.station-card-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.station-card.nl-clean-card .station-card-title {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: var(--text-main) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: none !important;
}

.station-fav-inline-icon {
  color: #f59e0b;
  font-size: 11px;
  flex-shrink: 0;
}

.station-card-subtitle {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.station-sub-closed {
  color: #ef4444;
  font-weight: 700;
}
.station-sub-save {
  color: #16a34a;
  font-weight: 700;
}
.station-sub-reported {
  color: #f59e0b;
  font-weight: 600;
}

.station-card-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.station-card.nl-clean-card .station-price-box {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.station-card.nl-clean-card .station-price-num {
  font-size: 17px !important;
  font-weight: 900 !important;
  color: var(--text-main) !important;
  letter-spacing: -0.02em;
}

.station-card.nl-clean-card .station-price-unit {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--text-muted) !important;
}

.station-card.nl-clean-card .station-tank-cost {
  font-size: 11.5px !important;
  font-weight: 500;
  color: var(--text-muted);
}

.station-card.nl-clean-card .station-card-inline-actions {
  display: flex !important;
  align-items: center;
  gap: 4px;
}

@media (max-width: 900px) and (orientation: portrait) {
  .station-card.nl-clean-card {
    padding: 11px 12px !important;
    min-height: 62px !important;
    border-radius: 10px !important;
  }

  .station-card.nl-clean-card .brand-badge.mini {
    width: 30px !important;
    height: 30px !important;
  }

  .station-card.nl-clean-card .station-card-title {
    font-size: 14px !important;
  }

  .station-card.nl-clean-card .station-price-num {
    font-size: 16.5px !important;
  }

  .quick-nav-actions-clean .quick-nav-cta-btn {
    min-height: 44px !important;
    height: 44px !important;
    font-size: 14px !important;
  }
}

/* ==========================================================================
   FASE 3: DETALLE DE ESTACION, PROMOS/ALERTAS, REPORTE GUIADO Y COMO LLEGAR
   ========================================================================== */

.station-detail-box {
  max-width: 480px !important;
  padding: 0 16px 18px !important;
  overflow-x: hidden !important;
}

.station-detail-hero-map-wrap {
  position: relative;
  margin: 0 -16px 26px;
  height: 132px;
  background: linear-gradient(135deg, rgba(148, 163, 184, 0.2), rgba(56, 189, 248, 0.14));
  overflow: visible;
  border-bottom: 1px solid var(--border-color);
}

.station-detail-minimap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  z-index: 1;
}

.station-detail-float-btn {
  position: absolute;
  top: 12px;
  z-index: 400;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.94);
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}
.station-detail-float-btn.back { left: 12px; }
.station-detail-float-btn.share { right: 12px; color: #2240d5; }

.station-detail-hero-badge {
  position: absolute;
  left: 16px;
  bottom: -20px;
  z-index: 410;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 2.5px solid #16a34a !important;
  padding: 7px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.station-detail-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.station-detail-title-col {
  min-width: 0;
  flex: 1;
}

.station-detail-title-col h3 {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--text-main);
  line-height: 1.2;
}

.station-detail-sub-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.detail-dist-pill {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.detail-open-pill {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.detail-open-pill.open {
  background: rgba(22, 163, 74, 0.14);
  color: #16a34a;
}
.detail-open-pill.closed {
  background: rgba(220, 38, 38, 0.14);
  color: #ef4444;
}

.detail-lane-pill {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 600;
}

.station-detail-big-price-col {
  text-align: right;
  flex-shrink: 0;
}

.station-detail-big-price {
  font-size: 22px;
  font-weight: 900;
  color: var(--text-main);
  font-family: var(--font-display, var(--font-sans));
  line-height: 1.1;
}
.station-detail-big-price span {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
}

.station-detail-net-save {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 800;
  color: #16a34a;
}

.station-detail-quick-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 12px;
  scrollbar-width: none;
}
.station-detail-quick-actions::-webkit-scrollbar {
  display: none;
}

.detail-action-pill {
  height: 38px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}
.detail-action-pill.primary {
  background: #2240d5;
  border-color: #2240d5;
  color: #ffffff;
}
.detail-action-pill.icon-only {
  width: 38px;
  padding: 0;
  justify-content: center;
}
.detail-action-pill.is-fav {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.14);
}

.station-detail-trip-metrics .trip-metric-box small {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.metric-good { color: #16a34a !important; }
.metric-bad { color: #ef4444 !important; }

.station-promo-alert-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  margin-top: 10px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
}

.promo-alert-copy {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.3;
}
.promo-alert-copy i {
  color: #2240d5;
  font-size: 15px;
  flex-shrink: 0;
}

.promo-alert-btn {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.promo-alert-btn.active {
  background: rgba(22, 163, 74, 0.15);
  border-color: #16a34a;
  color: #16a34a;
}

.station-detail-prices-card,
.station-detail-location-card {
  margin-top: 12px;
  padding: 14px;
  border-radius: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.prices-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.prices-card-head h4,
.station-detail-location-card h4 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 800;
  color: var(--text-main);
}

.prices-view-all-btn {
  border: none;
  background: transparent;
  color: #3b82f6;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.price-selected-fuel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-input);
  font-size: 14.5px;
  font-weight: 600;
}
.price-selected-fuel-row strong {
  font-size: 15.5px;
  font-weight: 800;
}

.station-all-prices-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.all-fuel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  background: rgba(148, 163, 184, 0.08);
}
.all-fuel-row.active {
  border: 1px solid rgba(59, 130, 246, 0.4);
  font-weight: 700;
}

.prices-freshness-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.prices-freshness-meta > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.prices-freshness-meta strong {
  color: var(--text-main);
  font-weight: 700;
}

.station-address-nav-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.station-address-nav-row span {
  flex: 1;
}
.station-address-nav-row i:first-child {
  color: #3b82f6;
}

.station-detail-miteco-id {
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.4px;
}

.history-highlight-pulse {
  box-shadow: 0 0 0 2px #3b82f6;
  border-radius: 14px;
  transition: box-shadow 0.25s ease;
}

.report-station-context-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
}
.report-station-context-card strong {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
}
.report-station-address {
  font-size: 12.5px;
  color: var(--text-muted);
}
.report-fuel-pill {
  align-self: flex-start;
  margin-top: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 101, 0, 0.14);
  color: var(--ktm-orange);
  font-size: 12px;
  font-weight: 700;
}

.quick-nav-cancel-btn {
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
}

/* ==========================================================================
   FASE 4: GARAJE MULTI-VEHICULO, ONBOARDING SIN FRICCION Y COMPARTIR
   ========================================================================== */

.more-vehicles-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.more-vehicle-card.active {
  border-color: rgba(59, 130, 246, 0.55);
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.12);
}

.more-vehicle-card:not(.active) .more-vehicle-check {
  color: var(--text-dim);
}

.more-vehicle-edit-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  cursor: pointer;
  flex-shrink: 0;
}
.more-vehicle-edit-btn:hover {
  color: var(--text-main);
  background: var(--bg-input);
}

.vehicle-modal-actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vehicle-delete-btn {
  height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  flex-shrink: 0;
}

.onboarding-skip-soft-btn {
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.onboarding-skip-soft-btn:hover {
  color: var(--text-main);
  background: var(--bg-input);
}

.more-share-banner {
  padding: 16px;
  border-radius: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.more-share-banner strong {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
}
.more-share-banner p {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--text-muted);
}

.more-social-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.more-social-pill {
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}