/* Variables */
:root{
  --bg:#ffffff;
  --text:#111827;
  --muted:#6B7280;
  --shadow:0 6px 24px rgba(0,0,0,.12);
  --radius:14px;
  --swatch-radius:6px;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%; margin:0}
#map{height:100%}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
}

/* Topbar escritorio */
#topbar{
  position:absolute; top:0; left:0; right:0;
  background:#fff;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  padding:14px 22px;
  z-index:5;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}

/* Tabs */
#fuel-tabs{ display:flex; gap:16px; justify-self:start; }
.tab{
  appearance:none; border:0; padding:10px 16px; border-radius:999px;
  font-weight:700; cursor:pointer;
  background:#f3f4f6; color:#9ca3af;
  transition:.2s transform,.2s background,.2s color;
}
.tab:hover{transform:translateY(-1px)}
.tab.is-active{background:#111; color:#fff}

/* Leyenda */
#legend{
  justify-self:center;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-align:center;
}
.legend-title{font-weight:700}
#legend .swatches{display:grid; grid-auto-flow:column; gap:6px}
#legend .swatches .sw{width:28px; height:12px; border-radius:var(--swatch-radius)}
#legend .labels{display:flex; gap:30px; font-weight:600}

/* Slider escritorio */
#range-panel{ justify-self:end; width:min(360px,34vw); }
#range{width:100%}
.range-labels{ display:flex; justify-content:space-between; margin-top:6px; font-weight:600; }
.range-labels span{ background:#fff; padding:4px 8px; border-radius:8px; box-shadow:var(--shadow); }

/* Geocoder escritorio */
#left-panel{
  position:absolute; top:120px; left:18px; z-index:4;
  width:min(400px,70vw);
}
#search .mapboxgl-ctrl-geocoder{ width:100%; box-shadow:var(--shadow); border-radius:14px; }
#search .mapboxgl-ctrl-geocoder--input{ padding-left:36px; }

/* Mapa escritorio */
#map{ position:absolute; inset:0; z-index:1; }
.mapboxgl-ctrl-top-right{ margin-top:130px; margin-right:18px; }

/* Popup */
.mapboxgl-popup-content{
  padding:14px 16px;
  border-radius:10px;
  box-shadow:0 8px 22px rgba(0,0,0,.15);
  font-family:"Courier New", Courier, monospace;
}
.pp{ min-width:220px; }
.pp-title{ font-weight:700; font-size:16px; margin:0 0 2px 0; text-align:left; }
.pp-sub{ margin:0 0 8px 0; color:#666; font-weight:500; font-size:12px; text-transform:uppercase; letter-spacing:.4px; text-align:left; }
.pp-row{ display:flex; justify-content:center; gap:20px; margin:6px 0 10px 0; text-align:center; }
.pp-badge{ display:inline-block; padding:1px 6px; border-radius:4px; font-weight:600; font-size:11px; }
.pp-badge--gas{ background:#2ee6c9; color:black; }
.pp-badge--diesel{ background:#ffcc4d; color:black; }
.pp-price{ margin-top:4px; font-weight:700; font-size:16px; }
.pp-footer{ margin-top:10px; color:#444; font-size:11px; text-align:left; }

/* Slider noUi */
.noUi-target{
  background:#e5e5e5;
  border-radius:8px;
  border:none;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
}
.noUi-connect{ background:#494949 !important; }
.noUi-handle{
  border:none; border-radius:50%;
  background:#fff !important;
  box-shadow:0 2px 4px rgba(0,0,0,.3);
}
.noUi-handle:before,
.noUi-handle:after{ display:none; }

/* ================== Móvil ================== */
@media (max-width:768px){
  html, body { height:100vh; overflow:hidden; }
  body{
    display:flex; flex-direction:column;
    align-items:stretch; justify-content:flex-start;
  }

  #left-panel{
    position:fixed; z-index:6;
    top:12px; left:50%; transform:translateX(-50%);
    width:92vw; max-width:520px;
  }

  /* Mapa compacto */
  #map{
    position:relative; z-index:1;
    order:2;
    flex:0 0 auto;
    width:100%;
    height:70vh;
    margin-top:70px;
    border-radius:12px; 
    overflow:hidden;
  }
  .mapboxgl-ctrl-top-right{ margin-top:12px; margin-right:12px; }

  /* Barra inferior móvil */
  #topbar{
    position:relative; z-index:5;
    order:3;
    width:100%;
    display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:10px 12px 12px;
    box-shadow:0 -1px 0 rgba(0,0,0,.06);
    margin-top:0;
  }
  #fuel-tabs{ order:1; justify-content:center; }
  #legend{ order:2; margin-top:0; }
  .legend-title{ font-size:15px; }
  #legend .labels{ gap:14px; font-size:13px; }

  /* Ocultar slider en móvil */
  #range-panel{ display:none; }
}