:root {
  --bg: #f4f6f5;
  --surface: #ffffff;
  --surface-variant: #eef1ef;
  --on-surface: #1a1f1c;
  --on-surface-variant: #5c655f;
  --outline: #dde2df;
  --primary: #1b7a43;
  --primary-container: #d9f2e2;
  --accent: #1b7a43;
  --gold: #e3a21a;
  --gold-text: #8a6206;
  --success: #2e7d32;
  --danger: #c62828;
  --shadow: 0 1px 3px rgba(20, 30, 25, 0.08), 0 1px 2px rgba(20, 30, 25, 0.06);
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --topbar-h: 60px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body.dark {
  --bg: #101512;
  --surface: #1a211d;
  --surface-variant: #232b26;
  --on-surface: #eaf1ec;
  --on-surface-variant: #9aa79f;
  --outline: #2b332e;
  --primary: #6fdb9a;
  --primary-container: #1f4630;
  --accent: #6fdb9a;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--on-surface);
  transition: background 0.25s ease, color 0.25s ease;
}
button { font-family: inherit; cursor: pointer; }
input[type="text"] { font-family: inherit; }
.hidden { display: none !important; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }

/* ---------- App shell ---------- */
.app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.main {
  position: relative;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ---------- Topbar (persistente, siempre visible) ---------- */
.topbar {
  z-index: 30;
  background: var(--surface);
  box-shadow: var(--shadow);
  flex-shrink: 0;
}

.topbar-main {
  display: flex;
  align-items: center;
  gap: 18px;
  height: var(--topbar-h);
  padding: 0 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 16px;
  color: var(--primary);
  flex-shrink: 0;
}

.section-nav { display: flex; gap: 4px; flex-shrink: 0; }
.section-link {
  display: flex;
  align-items: center;
  gap: 7px;
  border: none;
  background: none;
  color: var(--on-surface-variant);
  font-weight: 700;
  font-size: 13.5px;
  padding: 9px 14px;
  border-radius: 10px;
}
.section-link:hover { background: var(--surface-variant); color: var(--on-surface); }
.section-link.active { background: var(--primary-container); color: var(--primary); }

.topbar-spacer { flex: 1; }

.topbar-mapbar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 56px;
  padding: 0 20px;
  border-top: 1px solid var(--outline);
}

.searchbar {
  position: relative;
  width: 340px;
  max-width: 40vw;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-variant);
  border-radius: 10px;
  padding: 0 10px;
  height: 38px;
  flex-shrink: 0;
}
.search-icon { display: flex; color: var(--on-surface-variant); }
.searchbar input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--on-surface);
  font-size: 14px;
  height: 100%;
}
.search-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  z-index: 30;
}
.suggestion {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--on-surface);
}
.suggestion:hover { background: var(--surface-variant); }

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: none;
  background: var(--surface-variant);
  color: var(--on-surface);
  flex-shrink: 0;
}
.icon-btn:hover { background: var(--outline); }
.icon-btn.small { width: 30px; height: 30px; border-radius: 9px; }
.icon-btn:disabled { opacity: 0.5; cursor: default; }

.fuel-chips { display: flex; gap: 6px; flex-shrink: 0; }

.chip {
  border: 1px solid var(--outline);
  background: var(--surface);
  color: var(--on-surface);
  border-radius: 10px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.chip.selected { background: var(--primary-container); border-color: var(--primary); color: var(--primary); }
.chip:hover { filter: brightness(0.97); }

.freshness { font-size: 12px; color: var(--on-surface-variant); white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.freshness.offline { color: var(--danger); font-weight: 700; }

/* ---------- Sección Mapa: panel lateral fijo + mapa ---------- */
.section-mapa {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.map-sidebar {
  width: 400px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--outline);
  overflow: hidden;
}

.map-sidebar-header {
  flex-shrink: 0;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--outline);
}
.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sort-row { display: flex; align-items: center; gap: 8px; padding: 10px 0 6px; }
.sort-label { font-size: 11px; font-weight: 800; color: var(--on-surface-variant); }
.results-count { font-size: 12px; color: var(--on-surface-variant); }

.map-sidebar-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Hueco de anuncio: no ocupa espacio hasta que Ads.init() rellena uno de verdad (evita cajas
   vacías mientras no haya cuenta de AdSense configurada). Un único bloque discreto, nunca sobre
   el mapa, el buscador ni los filtros. */
.ad-slot { display: none; }
.ad-slot--sidebar.has-ad {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 250px;
  max-height: 250px;
  margin: 4px 12px 12px;
  overflow: hidden;
  border-top: 1px solid var(--outline);
  padding-top: 10px;
}
.ad-slot--mobile { display: none; }

/* isolation:isolate contiene los z-index internos del mapa (sus controles y capas llegan hasta
   1000) dentro de este contenedor, para que no compitan con el resto de la interfaz (topbar,
   FABs, hoja de la lista) sea cual sea su z-index. */
.map-pane { position: relative; flex: 1; isolation: isolate; }
.map { position: absolute; inset: 0; }

.loading-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 3px; overflow: hidden; z-index: 25;
  background: var(--surface-variant);
}
.loading-bar::after {
  content: ""; position: absolute; height: 100%; width: 40%; background: var(--primary);
  animation: loading-slide 1.1s ease-in-out infinite;
}
@keyframes loading-slide {
  0% { left: -40%; }
  100% { left: 100%; }
}

/* ---------- Tarjetas de gasolinera ---------- */
.station-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius-md);
  padding: 12px;
  cursor: pointer;
}
.station-card:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.station-logo {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; overflow: hidden;
}
.station-logo img { width: 22px; height: 22px; object-fit: contain; }
.station-body { flex: 1; min-width: 0; }
.station-name { font-weight: 800; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.station-meta { font-size: 11px; color: var(--on-surface-variant); margin-top: 2px; }
.station-saving { font-size: 11px; margin-top: 3px; }
.station-saving .distance { color: var(--on-surface-variant); }
.station-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.station-price { font-size: 17px; font-weight: 900; color: var(--primary); display: flex; align-items: center; gap: 3px; }
.station-buttons { display: flex; gap: 4px; }
.fav-btn.active { color: var(--gold-text); }

.trend { display: inline-flex; }
.trend.up { color: var(--danger); }
.trend.down { color: var(--success); }

.empty-state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 12px; color: var(--on-surface-variant); text-align: center; }

/* ---------- Botones genéricos ---------- */
.btn-primary {
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 13px 18px;
  font-weight: 700;
  font-size: 15px;
}
.btn-block { width: 100%; }
.btn-text {
  background: none; border: none; color: var(--primary); font-weight: 700; font-size: 13px;
  padding: 10px 4px; display: inline-flex; align-items: center; gap: 6px;
}

/* ---------- Páginas de ancho completo (Precios / Vehículo) ---------- */
.page {
  flex: 1;
  overflow: hidden;
  background: var(--bg);
}
.page-scroll { height: 100%; overflow-y: auto; }
.page-container { max-width: 1080px; margin: 0 auto; padding: 28px 24px 60px; }
.page-header { margin-bottom: 20px; }
.page-header h2 { font-size: 24px; font-weight: 800; }
.page-header p { color: var(--on-surface-variant); font-size: 14px; margin-top: 3px; }

/* ---------- Tarjetas / ajustes ---------- */
.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow);
}
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}
.settings-section.wide { grid-column: 1 / -1; }
.settings-section .section-title { display: flex; align-items: center; gap: 8px; color: var(--primary); margin-bottom: 10px; }
.section-title h3 { font-size: 16px; font-weight: 800; color: var(--on-surface); }
.label-bold { font-size: 13px; font-weight: 700; color: var(--on-surface-variant); margin: 10px 0 4px; }
.label-bold.accent { color: var(--primary); }
.hint { font-size: 12px; color: var(--on-surface-variant); line-height: 1.5; }
.hint.small-caps { font-size: 10px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }

.radio-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 14px; cursor: pointer; }
.radio-row input { accent-color: var(--primary); width: 18px; height: 18px; }

.slider-row { margin: 10px 0; }
.slider-row input[type="range"] {
  width: 100%; accent-color: var(--primary); height: 4px;
}

.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-track {
  position: absolute; inset: 0; background: var(--outline); border-radius: 20px; transition: 0.2s;
}
.switch-track::before {
  content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: white;
  border-radius: 50%; transition: 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.switch input:checked + .switch-track { background: var(--primary); }
.switch input:checked + .switch-track::before { transform: translateX(18px); }

.alert-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; }
.alert-label { font-size: 14px; font-weight: 600; }

.dialog-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.dialog {
  background: var(--surface); border-radius: var(--radius-lg); padding: 20px; max-width: 420px; width: 100%;
  max-height: 80vh; display: flex; flex-direction: column; gap: 12px;
}
.dialog h3 { font-size: 17px; font-weight: 800; }
.alert-history-list { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.alert-history-item { border-bottom: 1px solid var(--outline); padding-bottom: 8px; }

/* ---------- Pantalla de Precios ---------- */
.segmented { display: flex; border: 1px solid var(--outline); border-radius: 12px; overflow: hidden; width: fit-content; }
.segment { padding: 10px 22px; border: none; background: var(--surface); color: var(--on-surface); font-weight: 700; font-size: 13px; }
.segment.active { background: var(--primary-container); color: var(--primary); }

.province-selector { position: relative; margin-bottom: 14px; }
.assist-chip { border-radius: 20px; }
.dropdown-menu {
  position: absolute; top: calc(100% + 6px); left: 0; background: var(--surface); border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2); z-index: 15; max-height: 260px; overflow-y: auto; min-width: 200px;
}
.dropdown-item { display: block; width: 100%; text-align: left; border: none; background: none; padding: 10px 14px; font-size: 13px; color: var(--on-surface); }
.dropdown-item:hover { background: var(--surface-variant); }

.fuel-stat-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.fuel-stat-card { margin: 0; }
.fuel-stat-title { font-size: 16px; font-weight: 800; color: var(--primary); margin-bottom: 10px; }
.fuel-stat-row { display: flex; justify-content: space-between; margin-bottom: 12px; }
.stat-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stat-label { font-size: 11px; color: var(--on-surface-variant); }
.stat-value { font-size: 14px; font-weight: 800; }

.sparkline-box { background: var(--surface-variant); border-radius: var(--radius-sm); padding: 10px; }
.sparkline { width: 100%; height: 44px; display: block; }
.sparkline-labels, .sparkline-dates { display: flex; justify-content: space-between; font-size: 10px; color: var(--on-surface-variant); margin-top: 2px; }

.history-list { display: flex; flex-direction: column; margin-top: 12px; max-width: 480px; }
.history-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--surface-variant); font-size: 13px; }

/* ---------- Snackbar ---------- */
.snackbar {
  position: fixed; left: 50%; bottom: 24px; z-index: 90; transform: translate(-50%, 20px);
  background: #2b332e; color: white; border-radius: 12px; padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  opacity: 0; transition: 0.2s ease;
  font-size: 13px;
  max-width: min(90vw, 480px);
}
.snackbar.show { transform: translate(-50%, 0); opacity: 1; }
.snackbar-action { background: none; border: none; color: #6fdb9a; font-weight: 800; font-size: 13px; flex-shrink: 0; }

/* ---------- Mapa: ventana de info y control de ubicación ---------- */
/* Colores fijos (no las variables del tema): la ventana de información de Google Maps siempre
   tiene fondo claro, la lleve la app en modo oscuro o no, así que el texto debe ser siempre
   oscuro para leerse — si sigue el tema oscuro, sale texto claro sobre fondo claro. */
.map-popup { font-size: 13px; line-height: 1.5; color: #1a1f1c; }
.map-popup-btn {
  margin-top: 6px; border: none; background: #1b7a43; color: #fff; border-radius: 8px;
  padding: 6px 10px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.map-locate-btn {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  background: var(--surface, #fff); color: var(--on-surface, #1a1f1c); border: none; cursor: pointer;
  border-radius: 3px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); margin: 10px 10px 0 0;
}
.map-locate-btn:hover { background: var(--surface-variant, #eef1ef); }

/* ---------- Aviso de privacidad ---------- */
.privacy-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 95;
  background: var(--surface);
  color: var(--on-surface);
  border: 1px solid var(--outline);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 680px;
  margin: 0 auto;
}
.privacy-banner p { font-size: 12.5px; line-height: 1.5; color: var(--on-surface-variant); }
.privacy-banner .btn-primary { flex-shrink: 0; padding: 10px 16px; font-size: 13px; }
.link-inline { background: none; border: none; padding: 0; color: var(--primary); font-weight: 700; font-size: inherit; text-decoration: underline; }
.privacy-list { margin: 8px 0; padding-left: 18px; font-size: 12.5px; color: var(--on-surface-variant); line-height: 1.6; display: flex; flex-direction: column; gap: 6px; }
.page-footer-link { margin-top: 4px; }

/* ---------- Interfaz móvil tipo app: FABs, barra inferior, hoja deslizante ---------- */
.bottom-nav { display: none; }
.fabs { display: none; }
.sheet-backdrop { display: none; }

/* ---------- Aviso de error global ---------- */
.error-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: var(--danger); color: white; padding: 10px 16px;
  font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 14px;
}
.error-banner button { background: rgba(255,255,255,0.2); color: white; border: none; border-radius: 8px; padding: 6px 12px; font-weight: 700; font-size: 12px; }

/* ---------- Responsive: interfaz tipo app en móvil ---------- */
@media (max-width: 767px) {
  /* Topbar: sin navegación de secciones (la asume la barra inferior) ni marca de texto. */
  .topbar-main { gap: 10px; padding: 0 12px; }
  .brand span { display: none; }
  .section-nav { display: none; }
  .topbar-mapbar { padding: 8px 12px; height: auto; flex-wrap: wrap; }
  .searchbar { width: 100%; max-width: none; order: 1; }
  .fuel-chips { order: 2; width: 100%; }
  .fuel-chips .chip { flex: 1; justify-content: center; }
  .freshness { display: none; }

  /* El mapa ocupa toda la sección; la lista pasa a ser una hoja deslizante. */
  .section-mapa { position: relative; }
  .map-pane { width: 100%; height: 100%; }

  .map-sidebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 78vh;
    height: auto;
    border-right: none;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.22);
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
    /* Muy por encima de los z-index internos del mapa (controles hasta 1000): si no, el mapa
       se dibuja por encima de la hoja aunque esté "abierta". */
    z-index: 1200;
  }
  .map-sidebar::before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background: var(--outline);
    border-radius: 4px;
    margin: 10px auto 0;
    flex-shrink: 0;
  }
  .map-sidebar.open { transform: translateY(0); }

  .sheet-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .sheet-backdrop.open { opacity: 1; pointer-events: auto; }

  /* FABs: ubicación y abrir la lista, flotando sobre el mapa. */
  .fabs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: absolute;
    right: 14px;
    bottom: 18px;
    z-index: 1050;
  }
  .fab {
    width: 52px; height: 52px; border-radius: 16px; border: none;
    background: var(--surface); color: var(--primary);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
    display: flex; align-items: center; justify-content: center;
  }
  .fab-small { width: 40px; height: 40px; border-radius: 13px; }

  /* Barra de navegación inferior en vez de los enlaces de la topbar. */
  .bottom-nav {
    display: flex;
    background: var(--surface);
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.08);
    z-index: 30;
    padding-bottom: env(safe-area-inset-bottom);
    flex-shrink: 0;
  }
  .nav-item {
    flex: 1;
    border: none;
    background: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 9px 0 8px;
    color: var(--on-surface-variant);
    font-size: 11px;
  }
  .nav-item.active { color: var(--primary); }

  /* En móvil la hoja de la lista ya lleva su propia franja de anuncio (más abajo); el hueco de
     300x250 pensado para el panel de escritorio se oculta aquí para no duplicar anuncio ni
     reservar un bloque grande vacío dentro de la hoja. */
  .ad-slot--sidebar { display: none !important; }

  /* Franja de anuncio fina y persistente encima de la barra inferior (solo si hay uno real). */
  .ad-slot--mobile.has-ad {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 52px;
    max-height: 52px;
    background: var(--surface);
    border-top: 1px solid var(--outline);
    overflow: hidden;
  }

  .page-container { padding: 18px 14px 40px; }
  .settings-grid { grid-template-columns: 1fr; }

  .privacy-banner { flex-direction: column; align-items: stretch; left: 12px; right: 12px; bottom: 12px; }
  .privacy-banner .btn-primary { width: 100%; }
}