/* ================================================================
   combustible.julianmp.info — Liquid Glass Design System
   iOS 26 / Apple Liquid Glass aesthetic
   ================================================================ */

:root {
  /* Brand */
  --brand-primary:   #4F46E5;
  --brand-light:     #818CF8;
  --brand-violet:    #7C3AED;
  --brand-cyan:      #38BDF8;
  --brand-gradient:  linear-gradient(135deg, #38BDF8 0%, #6366F1 55%, #8B5CF6 100%);

  /* Semantic */
  --green:    #22C55E;
  --green-bg: rgba(34,197,94,.12);
  --red:      #EF4444;
  --red-bg:   rgba(239,68,68,.12);
  --yellow:   #F59E0B;
  --yellow-bg:rgba(245,158,11,.12);

  /* Glass system */
  --glass-white:    rgba(255, 255, 255, 0.72);
  --glass-white-sm: rgba(255, 255, 255, 0.55);
  --glass-border:   rgba(255, 255, 255, 0.60);
  --glass-border-sm:rgba(255, 255, 255, 0.35);
  --glass-shadow:   0 8px 32px rgba(100, 116, 139, 0.18);
  --glass-shadow-sm:0 4px 16px rgba(100, 116, 139, 0.12);
  --glass-blur:     blur(24px);
  --glass-blur-sm:  blur(14px);

  /* Surfaces */
  --bg:        #EEF2FF;
  --bg-grad:   linear-gradient(160deg, #EEF2FF 0%, #F5F3FF 45%, #EDE9FE 100%);
  --text:      #1E1B4B;
  --text-2:    #4B4673;
  --text-muted:#6B7280;
  --divider:   rgba(100, 116, 139, 0.15);

  /* Layout */
  --header-h:  60px;
  --nav-h:     80px;
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius:    14px;
  --radius-sm: 10px;
  --radius-xs: 8px;

  /* Safe areas */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

/* ── Reset & Base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  /* Usar dvh para iOS Safari (la barra de URL se mueve y dvh se ajusta).
     Fallback a 100% para navegadores sin soporte. */
  height: 100%;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  /* Evita el "bounce" en iOS que dejaría ver el body bajo el bottom-nav. */
  position: fixed;
  inset: 0;
  overscroll-behavior: none;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
  background: var(--bg-grad);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button { cursor: pointer; border: none; background: none; font-family: inherit; }
select, input { font-family: inherit; }
a { text-decoration: none; color: inherit; }

/* ── Loading Screen ────────────────────────────────────── */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  /* Fondo claro acorde al app y al logo (que tiene fondo blanco). */
  background: var(--bg-grad);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  z-index: 9999;
  overflow: hidden;
  transition: opacity .5s, visibility .5s;
  /* Prevent touch scroll from revealing content below */
  touch-action: none;
}
.loading-screen.fade-out { opacity: 0; visibility: hidden; }

.loading-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.loading-drop {
  /* Logo PNG (con su texto "Combustible by julianmp.info") */
  width: min(70vw, 260px);
  height: auto;
  filter: drop-shadow(0 6px 24px rgba(220, 38, 38, 0.18));
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

.loading-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.5px;
}
.loading-title span {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.loading-status {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 14px;
}
.loading-pulse {
  width: 8px;
  height: 8px;
  background: var(--brand-cyan);
  border-radius: 50%;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}

/* ── App Shell ─────────────────────────────────────────── */
.app {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  height: 100dvh;
  /* Pinta el fondo gradiente en TODO el shell (incluido el área debajo del
     bottom-nav cuando el inset cambia en iOS Safari). */
  background: var(--bg-grad);
  overflow: hidden;
}
.app.hidden { display: none; }

/* ── Glass utility ─────────────────────────────────────── */
.glass-card {
  background: var(--glass-white);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-shadow);
}

.glass-bar {
  background: var(--glass-white-sm);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border-bottom: 1px solid var(--glass-border-sm);
}

/* ── Top Header ────────────────────────────────────────── */
.top-header {
  height: calc(var(--header-h) + var(--safe-top));
  padding: var(--safe-top) 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  z-index: 100;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-logo-img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .10);
  /* Recorta el ligero borde blanco del PNG para que parezca un icono limpio */
  background: #fff;
}
.header-title {
  font-size: 18px;
  font-weight: 700;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.3px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--glass-white-sm);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  transition: background .15s, transform .1s;
}
.icon-btn:active { transform: scale(0.92); }

.update-badge {
  background: var(--brand-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: .3px;
}
.hidden { display: none !important; }

/* ── Views ─────────────────────────────────────────────── */
.view {
  display: none;
  flex: 1;
  overflow: hidden;
  flex-direction: column;
}
.view.active {
  display: flex;
  flex-direction: column;
}

.view-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 16px 0;
  -webkit-overflow-scrolling: touch;
}
.view-scroll::-webkit-scrollbar { display: none; }

.pt-0 { padding-top: 0 !important; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.w-full { width: 100%; }
.bottom-spacer { height: 24px; }

/* ── HOME VIEW ─────────────────────────────────────────── */

/* Hero card */
.hero-card {
  padding: 22px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(139,92,246,0.05) 100%);
  border-radius: inherit;
  pointer-events: none;
}

.hero-text { position: relative; z-index: 1; }
.hero-text h1 {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--text);
  letter-spacing: -0.5px;
}
.hero-highlight {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-sub {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-muted);
}

.hero-radar {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.radar-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(99,102,241,0.25);
}
.r1 { width: 72px; height: 72px; animation: radar .35s ease-in-out infinite alternate; }
.r2 { width: 44px; height: 44px; animation: radar .35s .17s ease-in-out infinite alternate; }
@keyframes radar {
  from { opacity: 0.3; transform: scale(0.95); }
  to   { opacity: 0.8; transform: scale(1.05); }
}
.radar-dot {
  width: 14px;
  height: 14px;
  background: var(--brand-gradient);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(99,102,241,0.5);
  z-index: 2;
}

.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--brand-gradient);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 20px;
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(99,102,241,0.35);
  transition: transform .12s, box-shadow .12s;
  letter-spacing: -0.2px;
}
.btn-primary:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(99,102,241,0.3);
}

/* Quick nav */
.quick-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--glass-white);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 14px 8px;
  box-shadow: var(--glass-shadow-sm);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  transition: transform .12s, background .15s;
}
.quick-item:active { transform: scale(0.94); }
.quick-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(99,102,241,0.12) 0%, rgba(139,92,246,0.1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-primary);
  position: relative;
}
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
}

/* Section header */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.section-header h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.2px;
}
.link-btn {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-primary);
}

/* Best station card */
.best-station-card {
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: transform .12s;
}
.best-station-card:active { transform: scale(0.98); }

.bsc-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.brand-logo {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--brand-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  line-height: 1.1;
  flex-shrink: 0;
  letter-spacing: -0.3px;
}
.bsc-info { min-width: 0; }
.bsc-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bsc-address {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bsc-dist {
  font-size: 12px;
  color: var(--brand-primary);
  font-weight: 600;
  margin-top: 2px;
}
.bsc-price-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}
.bsc-price {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.5px;
}
.bsc-fuel {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}
.tag-cheap {
  font-size: 10px;
  font-weight: 700;
  background: var(--green-bg);
  color: var(--green);
  padding: 3px 8px;
  border-radius: 20px;
  margin-top: 4px;
}
.icon-btn-sm {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(99,102,241,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-primary);
  flex-shrink: 0;
}

/* Fuel grid */
.fuel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.fuel-card {
  background: var(--glass-white);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--glass-shadow-sm);
}
.fuel-card-icon {
  font-size: 22px;
  margin-bottom: 6px;
}
.fuel-card-name {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.fuel-card-price {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.5px;
  margin: 2px 0;
}
.fuel-card-delta {
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 2px;
}
.delta-down { color: var(--green); }
.delta-up   { color: var(--red); }

/* Tip card */
.tip-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.tip-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(99,102,241,0.12) 0%, rgba(139,92,246,0.1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-primary);
  flex-shrink: 0;
}
.tip-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}
.tip-text strong { color: var(--text); font-weight: 700; }
.tip-text span   { color: var(--text-muted); }
.btn-outline-sm {
  background: var(--brand-gradient);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
  transition: transform .12s;
}
.btn-outline-sm:active { transform: scale(0.95); }

/* ── MAP VIEW ──────────────────────────────────────────── */
#view-map {
  position: relative;
}

.map-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  overflow-x: auto;
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
}
.map-filters::-webkit-scrollbar { display: none; }

.filter-pill {
  background: var(--glass-white);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  flex-shrink: 0;
  outline: none;
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background .15s;
}
.filter-pill:focus { border-color: var(--brand-primary); }

.toggle-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--glass-white);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
}
.toggle-pill input { accent-color: var(--brand-primary); }

#map {
  flex: 1;
  z-index: 1;
  min-height: 0;
}

/* Leaflet overrides */
.leaflet-control-zoom a {
  background: var(--glass-white) !important;
  backdrop-filter: var(--glass-blur-sm) !important;
  border-color: var(--glass-border) !important;
  color: var(--text-2) !important;
  font-size: 16px !important;
}

/* Locate FAB */
.fab-locate {
  position: absolute;
  bottom: calc(260px + 16px);
  right: 16px;
  z-index: 500;
  width: 50px;
  height: 50px;
  background: var(--glass-white);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-primary);
  box-shadow: var(--glass-shadow);
  transition: transform .12s;
}
.fab-locate:active { transform: scale(0.9); }

/* Station bottom sheet */
.station-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 260px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: height .3s cubic-bezier(.4,0,.2,1);
}
.station-sheet.expanded { height: 55vh; }

.sheet-handle {
  width: 36px;
  height: 4px;
  background: rgba(100,116,139,0.3);
  border-radius: 2px;
  margin: 10px auto 6px;
  flex-shrink: 0;
}
#sheet-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 12px 12px;
  -webkit-overflow-scrolling: touch;
}
#sheet-content::-webkit-scrollbar { display: none; }
.sheet-count {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
  padding: 4px 0 10px;
}

/* ── SEARCH VIEW ───────────────────────────────────────── */
.search-bar-wrap {
  padding: 10px 12px;
  flex-shrink: 0;
}
.search-field {
  background: var(--glass-white);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
}
.search-icon { color: var(--text-muted); flex-shrink: 0; }
#search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15px;
  color: var(--text);
  outline: none;
}
#search-input::placeholder { color: var(--text-muted); }
.search-clear {
  background: rgba(100,116,139,0.15);
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.prov-wrap { margin-bottom: 4px; }
.filter-select-full {
  width: 100%;
  background: var(--glass-white);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--text);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
}

.home-source-wrap {
  margin: 0 0 12px;
}
.home-source-wrap.hidden { display: none; }

.sort-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.sort-pill {
  background: var(--glass-white);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  transition: all .15s;
}
.sort-pill.active {
  background: var(--brand-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(99,102,241,0.25);
}

/* ── STATION LIST (compact, shared) ───────────────────── */
.station-list-compact { display: flex; flex-direction: column; gap: 10px; }

.sc-card {
  background: var(--glass-white);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--glass-shadow-sm);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: transform .12s;
  position: relative;
}
.sc-card:active { transform: scale(0.98); }

.sc-logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  line-height: 1.1;
  flex-shrink: 0;
}
.sc-info { flex: 1; min-width: 0; }
.sc-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sc-addr {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sc-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.sc-dist {
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-primary);
}
.sc-status {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
}
.open  { background: var(--green-bg); color: var(--green); }
.closed{ background: var(--red-bg);   color: var(--red); }

.sc-price-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  gap: 4px;
}
.sc-price-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.4px;
}
.sc-price-lbl {
  font-size: 10px;
  color: var(--text-muted);
}
.sc-fav-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  padding: 2px;
  transition: color .15s;
}
.sc-fav-btn.active { color: #EF4444; }

/* Map popup override */
.leaflet-popup-content-wrapper {
  background: var(--glass-white) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--glass-shadow) !important;
  padding: 0 !important;
  overflow: hidden;
}
.leaflet-popup-content { margin: 0 !important; min-width: 240px; }
.leaflet-popup-tip-container { display: none; }
.popup-body { padding: 14px; }
.popup-name { font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.popup-addr { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.popup-prices { display: flex; flex-wrap: wrap; gap: 6px; }
.popup-price {
  background: rgba(99,102,241,0.08);
  border-radius: var(--radius-xs);
  padding: 6px 10px;
  text-align: center;
  min-width: 58px;
}
.popup-price .pl { font-size: 10px; color: var(--text-muted); }
.popup-price .pv { font-size: 14px; font-weight: 800; color: var(--text); }
.popup-status { margin-top: 8px; }
.popup-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--divider);
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
}

/* Cluster icons */
.cluster-icon {
  background: var(--brand-gradient);
  color: #fff;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(99,102,241,0.4);
}
.cluster-sm { width: 34px; height: 34px; }
.cluster-md { width: 42px; height: 42px; }
.cluster-lg { width: 50px; height: 50px; }

/* Custom markers */
.map-marker {
  width: 32px;
  height: 32px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.marker-green  { background: var(--green); }
.marker-yellow { background: var(--yellow); }
.marker-red    { background: var(--red); }
.marker-grey   { background: #94A3B8; }
.marker-inner  {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(45deg);
  font-size: 12px;
}
.marker-closed { opacity: 0.45; }

/* ── FAVORITES VIEW ────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 32px;
  gap: 12px;
}
.empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(99,102,241,0.1) 0%, rgba(139,92,246,0.08) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-primary);
  opacity: 0.8;
}
.empty-state h3 { font-size: 17px; font-weight: 700; color: var(--text); }
.empty-state p  { font-size: 14px; color: var(--text-muted); }

/* ── SETTINGS VIEW ─────────────────────────────────────── */
.settings-section {
  padding: 20px;
}
.settings-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.settings-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 16px;
  line-height: 1.5;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--divider);
  gap: 12px;
}
.setting-row:last-child { border-bottom: none; }
.setting-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
}
.setting-select {
  background: rgba(99,102,241,0.08);
  border: 1px solid rgba(99,102,241,0.15);
  border-radius: var(--radius-xs);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-primary);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  max-width: 170px;
  text-align: right;
  cursor: pointer;
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-thumb {
  width: 46px;
  height: 26px;
  background: rgba(100,116,139,0.3);
  border-radius: 13px;
  position: relative;
  transition: background .2s;
}
.toggle-thumb::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  transition: transform .2s;
}
.toggle-switch input:checked + .toggle-thumb {
  background: var(--brand-primary);
}
.toggle-switch input:checked + .toggle-thumb::after {
  transform: translateX(20px);
}

.about-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-2);
}
.about-info p { font-weight: 600; }
.text-muted { color: var(--text-muted); font-weight: 400 !important; }
.mt-4 { margin-top: 4px; }

/* ── BOTTOM NAV ────────────────────────────────────────── */
.bottom-nav {
  height: calc(var(--nav-h) + var(--safe-bottom));
  /* En iPhone con notch / home indicator necesitamos respetar la safe-area
     POR DEBAJO; el min de 4px da algo de aire en dispositivos sin notch. */
  padding-top: 0;
  padding-left: max(8px, var(--safe-left));
  padding-right: max(8px, var(--safe-right));
  padding-bottom: max(var(--safe-bottom), 4px);
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-shrink: 0;
  z-index: 200;
  border-top: 1px solid var(--glass-border-sm);
  border-bottom: none;
  /* Asegura que el fondo del nav cubre TODA la safe-area (el área del
     home indicator se ve con el glass del nav, no con el body) */
  background: var(--glass-white-sm);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 600;
  transition: color .15s, background .15s;
  min-width: 50px;
}
.nav-item svg { transition: transform .15s; }
.nav-item.active {
  color: var(--brand-primary);
}
.nav-item.active svg { transform: scale(1.05); }
.nav-item:active { background: rgba(99,102,241,0.08); }

.nav-center { position: relative; margin-top: -16px; }
.nav-center-btn {
  width: 52px;
  height: 52px;
  background: var(--brand-gradient);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 16px rgba(99,102,241,0.4);
  margin-bottom: 4px;
}
.nav-center.active .nav-center-btn {
  box-shadow: 0 4px 20px rgba(99,102,241,0.6);
}

/* ── TOAST ─────────────────────────────────────────────── */
#toast {
  position: fixed;
  bottom: calc(var(--nav-h) + var(--safe-bottom) + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(30, 27, 75, 0.9);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  color: #fff;
  padding: 11px 20px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 600;
  z-index: 9998;
  opacity: 0;
  transition: transform .3s, opacity .3s;
  pointer-events: none;
  white-space: nowrap;
  max-width: calc(100vw - 40px);
  text-overflow: ellipsis;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
#toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ── STATION DETAIL MODAL ──────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 10, 46, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}
.modal-sheet {
  background: var(--glass-white);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding-bottom: calc(20px + var(--safe-bottom));
  box-shadow: 0 -8px 40px rgba(100,116,139,0.2);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.modal-overlay.open .modal-sheet { transform: translateY(0); }
.modal-handle {
  width: 36px;
  height: 4px;
  background: rgba(100,116,139,0.3);
  border-radius: 2px;
  margin: 12px auto 0;
}
.modal-content { padding: 16px 20px; }
.modal-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.modal-logo {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--brand-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  line-height: 1.1;
  flex-shrink: 0;
}
.modal-info .modal-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.3px;
}
.modal-info .modal-addr {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 3px;
}
.modal-info .modal-dist {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-primary);
  margin-top: 3px;
}
.modal-prices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.mprice {
  background: rgba(99,102,241,0.07);
  border: 1px solid rgba(99,102,241,0.12);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.mprice .mpl { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.mprice .mpv { font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -0.4px; }
.mprice.priority { background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.3); }
.mprice.priority .mpv { color: var(--green); }
.modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.modal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 700;
  transition: transform .12s;
}
.modal-btn:active { transform: scale(0.97); }
.modal-btn-primary {
  background: var(--brand-gradient);
  color: #fff;
  box-shadow: 0 4px 12px rgba(99,102,241,0.3);
}
.modal-btn-secondary {
  background: rgba(99,102,241,0.1);
  border: 1px solid rgba(99,102,241,0.2);
  color: var(--brand-primary);
}

/* ── Landscape hint for iPhone ─────────────────────────── */
@media (orientation: landscape) and (max-height: 500px) {
  .hero-radar { display: none; }
  .hero-text h1 { font-size: 18px; }
}