/* ═══════════════════════════════════════════════════════════════════════════════
   GASOLINERAS APP v4 — styles.css
   ══════════════════════════════════════════════════════════════════════════════*/
:root {
  --verde:      #16a34a;
  --verde-light:#22c55e;
  --azul:       #1d4ed8;
  --azul-dark:  #1e3a8a;
  --azul-light: #3b82f6;
  --fondo:      #f0f4f8;
  --blanco:     #ffffff;
  --g100:       #f8fafc;
  --g200:       #e2e8f0;
  --g400:       #94a3b8;
  --g500:       #64748b;
  --g600:       #475569;
  --g700:       #334155;
  --texto:      #0f172a;
  --shadow-sm:  0 1px 4px rgba(15,23,42,0.06), 0 2px 8px rgba(15,23,42,0.04);
  --shadow:     0 2px 12px rgba(15,23,42,0.08), 0 4px 20px rgba(15,23,42,0.05);
  --shadow-lg:  0 8px 32px rgba(15,23,42,0.12), 0 16px 48px rgba(15,23,42,0.06);
  --radius:     14px;
  --radius-sm:  8px;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; overflow-x:hidden }
body { font-family:"DM Sans",sans-serif; background:var(--fondo); color:var(--texto); min-height:100vh; font-size:15px; line-height:1.5; overflow-x:hidden; width:100% }
a { text-decoration:none; color:inherit }
button { font-family:inherit; cursor:pointer }

/* ── Header ─────────────────────────────────────────────────────────────────── */
header {
  background: linear-gradient(135deg, var(--azul-dark) 0%, var(--azul) 70%, #2563eb 100%);
  color:white; padding:20px 24px 72px;
}
.header-inner { max-width:1100px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:12px }
.brand { display:flex; align-items:center; gap:10px; min-width:0; flex:1; overflow:hidden }
.brand-icon { font-size:38px; filter:drop-shadow(0 3px 6px rgba(0,0,0,.25)); flex-shrink:0 }
.brand-title { font-family:"Syne",sans-serif; font-size:clamp(14px,3vw,27px); font-weight:800; letter-spacing:-.4px; overflow:hidden; text-overflow:ellipsis }
.brand-sub { font-size:12px; opacity:.7; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.header-actions { display:flex; align-items:center; gap:6px; flex-shrink:0 }
.btn-header {
  background:rgba(255,255,255,.15); color:white; border:1.5px solid rgba(255,255,255,.3);
  padding:8px 12px; border-radius:var(--radius-sm); font-size:13px; font-weight:600;
  display:flex; align-items:center; gap:6px; transition:background .2s; white-space:nowrap;
}
.btn-header:hover { background:rgba(255,255,255,.25) }
.badge-count {
  background:rgba(255,255,255,.3); border-radius:99px; padding:1px 7px; font-size:12px; font-weight:700;
}
.btn-dark-toggle { padding:8px 10px; font-size:16px }

/* ── Search Panel ────────────────────────────────────────────────────────────── */
.search-panel {
  background:var(--blanco);
  max-width:1100px;
  margin:-48px auto 0;
  border-radius:var(--radius); box-shadow:var(--shadow-lg);
  padding:26px 28px 22px; position:relative; z-index:20;
  width:calc(100% - 32px);
}
/* En escritorio: ubicacion, combustible, orden, [radio+horario], buscar */
.search-grid { display:grid; grid-template-columns:2fr 1fr 1fr 2fr auto; gap:14px; align-items:end }
.campo-radio-horario { grid-column:span 1 }
.radio-horario-row { display:flex; align-items:center; gap:10px; height:44px }
.radio-horario-row input[type="range"] { flex:1; min-width:60px; accent-color:var(--verde); cursor:pointer }
.campo { display:flex; flex-direction:column; gap:6px }
.campo label { font-size:11px; font-weight:700; color:var(--g500); text-transform:uppercase; letter-spacing:.5px }
.campo input[type="text"], .campo select {
  padding:11px 14px; border-radius:var(--radius-sm); border:1.5px solid var(--g200);
  font-size:14px; font-family:"DM Sans",sans-serif; background:var(--g100); color:var(--texto);
  transition:border-color .2s, background .2s; width:100%; min-width:0;
}
.campo input:focus, .campo select:focus { outline:none; border-color:var(--azul-light); background:white }
.campo-wide { position:relative }
.ubicacion-wrap { position:relative; display:flex }
.ubicacion-wrap input { padding-right:44px; flex:1 }
.btn-geo { position:absolute; right:0; top:0; bottom:0; width:42px; background:transparent; border:none; color:var(--g500); display:flex; align-items:center; justify-content:center; transition:color .2s }
.btn-geo:hover { color:var(--azul) }
.btn-geo.loading svg { animation:spin .8s linear infinite }
input[type="range"] { width:100%; accent-color:var(--verde); height:4px; cursor:pointer; margin-top:4px }
.campo-buscar { justify-content:flex-end }
.btn-buscar {
  background:var(--verde); color:white; border:none; padding:12px 24px;
  border-radius:var(--radius-sm); font-size:15px; font-weight:700;
  display:flex; align-items:center; gap:8px; transition:background .2s,transform .15s; white-space:nowrap;
}
.btn-buscar:hover:not(:disabled) { background:#15803d; transform:translateY(-1px) }
.btn-buscar:disabled { opacity:.7; cursor:not-allowed }
.spinner-buscar {
  width:16px; height:16px; border:2.5px solid rgba(255,255,255,.4);
  border-top-color:white; border-radius:50%; animation:spin .8s linear infinite;
}
.sugerencias { position:absolute; top:calc(100% + 4px); left:0; right:0; background:white; border:1.5px solid var(--g200); border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); z-index:100; display:none; overflow:hidden }
.sugerencia-item { padding:10px 14px; font-size:13px; color:var(--g700); cursor:pointer; display:flex; align-items:flex-start; gap:8px; border-bottom:1px solid var(--g100); transition:background .15s; line-height:1.4 }
.sugerencia-item:last-child { border-bottom:none }
.sugerencia-item:hover { background:var(--g100) }
.sugerencia-item svg { flex-shrink:0; margin-top:2px }

/* ── Contenido ───────────────────────────────────────────────────────────────── */
.main-content { max-width:1100px; margin:28px auto 60px; padding:0 16px; width:100%; box-sizing:border-box }
#estado { margin-bottom:20px }
.msg { padding:13px 18px; border-radius:var(--radius-sm); font-size:14px; font-weight:500; display:flex; flex-wrap:wrap; align-items:center; gap:8px }
.msg.ok      { background:#dcfce7; color:#166534 }
.msg.info    { background:#dbeafe; color:#1e40af }
.msg.warning { background:#fef9c3; color:#854d0e }
.msg.error   { background:#fee2e2; color:#991b1b }
.fecha-update { margin-left:auto; font-size:13px; opacity:.8 }

/* ── Tabs ────────────────────────────────────────────────────────────────────── */
.tabs { display:flex; align-items:center; gap:8px; margin-bottom:20px }
.tab { background:white; border:1.5px solid var(--g200); color:var(--g500); padding:9px 20px; border-radius:var(--radius-sm); font-size:14px; font-weight:600; display:flex; align-items:center; gap:7px; transition:all .2s }
.tab:hover { border-color:var(--azul-light); color:var(--azul) }
.tab.active { background:var(--azul); color:white; border-color:var(--azul) }
.tabs-info { margin-left:auto; font-size:13px; color:var(--g500); font-weight:500 }

/* ── Grid tarjetas ───────────────────────────────────────────────────────────── */
.grid-lista { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); gap:16px }

/* ── Tarjeta ─────────────────────────────────────────────────────────────────── */
.card {
  background:var(--blanco); border-radius:var(--radius); padding:18px 20px;
  box-shadow:var(--shadow-sm); cursor:pointer; position:relative;
  transition:transform .2s,box-shadow .2s,border-color .2s;
  border:1.5px solid var(--g200);
  display:flex; flex-direction:column; gap:12px;
}
.card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--verde-light) }
.card-top { border-color:#16a34a; border-width:2px; background:linear-gradient(135deg,#f0fdf4 0%,#ffffff 60%) }
.card-selected { border-color:var(--azul-light); background:linear-gradient(to bottom right,#eff6ff,white) }
.badge-top { position:absolute; top:-10px; left:16px; background:linear-gradient(135deg,#16a34a,#15803d); color:white; font-size:11px; font-weight:700; padding:3px 12px; border-radius:99px; letter-spacing:.3px; box-shadow:0 2px 8px rgba(22,163,74,.4) }
.card-head { display:flex; align-items:flex-start; gap:12px }
.station-logo { border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.card-info { flex:1; min-width:0 }
.card-nombre { font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.card-dir { font-size:13px; color:var(--g500); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.card-dir-loc { font-size:12px; color:var(--g400); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.badge-horario { display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:99px; margin-top:5px }
.badge-horario.abierta  { background:#dcfce7; color:#15803d }
.badge-horario.cerrada  { background:#fee2e2; color:#b91c1c }
.card-footer { display:flex; justify-content:space-between; align-items:center; padding-top:10px; border-top:1px solid var(--g200); gap:8px }
.card-precio-wrap { min-width:0 }
.card-precio { font-family:"Syne",sans-serif; font-size:28px; font-weight:800; color:var(--verde); line-height:1 }
.precio-top { color:#15803d }
.card-comb { font-size:11px; color:var(--g400); font-weight:500; margin-top:2px; text-transform:uppercase; letter-spacing:.3px }
.card-footer-right { display:flex; align-items:center; gap:8px; flex-shrink:0 }
.card-dist { font-size:13px; color:var(--g500); font-weight:500; white-space:nowrap }
.card-actions { display:flex; align-items:center; gap:4px; flex-shrink:0 }
.btn-fav-card, .btn-sel-card { background:none; border:none; font-size:17px; padding:3px; line-height:1; transition:transform .2s; cursor:pointer }
.btn-fav-card:hover, .btn-sel-card:hover { transform:scale(1.2) }
.btn-sel-card { background:var(--g100); border-radius:6px; padding:5px; color:var(--g500); display:flex; align-items:center; justify-content:center }
.btn-sel-card.sel-on { background:#dbeafe; color:var(--azul) }

/* ── Skeleton ────────────────────────────────────────────────────────────────── */
.skeleton { cursor:default; pointer-events:none }
.skeleton:hover { transform:none; box-shadow:var(--shadow-sm); border-color:transparent }
.sk-logo, .sk-h { background:linear-gradient(90deg,#e2e8f0 25%,#f8fafc 50%,#e2e8f0 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:6px }
.sk-logo { width:40px; height:40px; border-radius:10px; flex-shrink:0 }
.sk-lines { flex:1; display:flex; flex-direction:column; gap:8px }
.sk-h { height:14px }
.sk-w60 { width:60% }
.sk-w80 { width:80% }
.sk-w40 { width:40% }
.sk-sm  { height:12px }
.sk-precio { height:28px; width:50%; margin-top:4px }

/* ── Mapa ────────────────────────────────────────────────────────────────────── */
#mapa { height:520px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow) }
.mapa-vacio { height:300px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--g500); font-size:15px; background:white; border-radius:var(--radius); border:2px dashed var(--g200) }
.mapa-vacio div { font-size:48px }
.marker-user { font-size:28px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.3)) }
.marker-pin { display:flex; align-items:center; justify-content:center; padding:4px 10px; border-radius:99px; color:white; font-size:11px; font-weight:700; box-shadow:0 2px 8px rgba(0,0,0,.3); white-space:nowrap; font-family:"DM Sans",sans-serif }
.marker-top { border:2px solid #f59e0b; box-shadow:0 2px 12px rgba(245,158,11,.5) }
.popup-content { font-family:"DM Sans",sans-serif; font-size:13px; line-height:1.7; min-width:160px }

/* ── Comparador ──────────────────────────────────────────────────────────────── */
.comparar-instrucciones {
  padding: 40px 32px 36px;
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
}
.cmp-instr-icon { font-size: 52px; margin-bottom: 16px }
.comparar-instrucciones h3 { font-family:"Syne",sans-serif; font-size:20px; font-weight:800; margin-bottom:14px }
.comparar-instrucciones p  { font-size:14px; color:var(--g700); line-height:1.6; margin-bottom:10px }
.cmp-instr-badge {
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--g100); border:1.5px solid var(--g200);
  border-radius:6px; padding:3px 6px; vertical-align:middle; margin:0 2px;
  color:var(--g500);
}
.cmp-instr-sub { font-size:13px !important; color:var(--g400) !important; margin-top:6px }
.btn-cmp-cerrar {
  margin-top:20px; background:var(--azul); color:white; border:none;
  padding:11px 28px; border-radius:var(--radius-sm); font-size:15px; font-weight:600;
  font-family:"DM Sans",sans-serif; cursor:pointer; transition:opacity .2s;
}
.btn-cmp-cerrar:hover { opacity:.85 }

.ahorro-banner {
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(135deg,#f0fdf4,#dcfce7);
  border:1.5px solid #86efac; border-radius:var(--radius-sm);
  padding:16px 20px; margin:20px 24px 0;
}
.ahorro-icon  { font-size:28px; flex-shrink:0 }
.ahorro-texto { font-size:14px; color:#166534; line-height:1.5 }
.ahorro-valor { font-family:"Syne",sans-serif; font-size:22px; font-weight:800; color:#15803d; margin:0 4px }

.comparar-grid {
  display:grid; gap:0; padding:16px 24px 24px; overflow-x:auto;
}
.cmp-cell {
  padding:12px 16px; border-bottom:1px solid var(--g200); font-size:14px;
  display:flex; align-items:center; color:var(--texto);
}
.cmp-header { flex-direction:column; align-items:center; text-align:center; gap:6px; padding:16px 12px; background:var(--g100); border-radius:var(--radius-sm); margin:4px; border:1px solid var(--g200) }
.cmp-header-label { background:transparent; border:none }
.cmp-logo { width:48px; height:48px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:22px }
.cmp-nombre { font-weight:700; font-size:14px; color:var(--texto) }
.cmp-dir { font-size:12px; color:var(--g500) }
.cmp-label { font-weight:600; font-size:13px; color:var(--g500); background:var(--g100); border-right:1px solid var(--g200) }
.cmp-mejor { color:var(--verde); font-weight:700 }
.cmp-mejor strong { font-size:16px }
.cmp-nd { color:var(--g400) }
.cmp-small { font-size:12px; color:var(--g700) }
.cmp-btn-ver { background:var(--azul); color:white; padding:7px 14px; border-radius:6px; font-size:13px; font-weight:600; display:inline-block }
.cmp-btn-ver:hover { opacity:.85 }

/* ── Modal ───────────────────────────────────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:999; display:flex; align-items:center; justify-content:center; padding:16px }
.modal { background:white; border-radius:var(--radius); width:100%; max-width:560px; max-height:82vh; overflow-y:auto; box-shadow:var(--shadow-lg) }
.modal-wide { max-width:860px }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px 16px; border-bottom:1px solid var(--g200); position:sticky; top:0; background:var(--blanco); z-index:1 }
.modal-header h2 { font-family:"Syne",sans-serif; font-size:20px; font-weight:800 }
.modal-close { background:var(--g100); border:none; width:32px; height:32px; border-radius:50%; font-size:14px; color:var(--g500); display:flex; align-items:center; justify-content:center }
.modal-close:hover { background:var(--g200) }
.favs-empty { text-align:center; padding:48px 24px; color:var(--g700) }
.fav-item { display:flex; align-items:center; gap:14px; padding:16px 24px; border-bottom:1px solid var(--g100); transition:background .15s }
.fav-item:hover { background:var(--g100) }
.fav-item:last-child { border-bottom:none }
.fav-info { flex:1; min-width:0 }
.fav-nombre { font-weight:700; font-size:15px }
.fav-dir { font-size:12px; color:var(--g500); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.fav-precios { display:flex; gap:14px; margin-top:5px; font-size:13px; color:var(--g700) }
.fav-acciones { display:flex; flex-direction:column; gap:6px; align-items:flex-end }
.btn-fav-ver { background:var(--azul); color:white; padding:6px 14px; border-radius:6px; font-size:13px; font-weight:600 }
.btn-fav-ver:hover { opacity:.85 }
.btn-fav-del { background:none; border:none; font-size:16px; color:var(--g400) }
.btn-fav-del:hover { color:#ef4444 }

/* ── Toast ───────────────────────────────────────────────────────────────────── */
.toast {
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--texto); color:white; padding:12px 24px; border-radius:99px;
  font-size:14px; font-weight:600; z-index:9999; box-shadow:var(--shadow-lg);
  animation:fadeUp .3s ease;
}
.toast-warning { background:#f59e0b }

/* ════════════════════════════════════════════════════════════════════════════════
   PÁGINA DETALLE
══════════════════════════════════════════════════════════════════════════════════*/
.detalle-page { background:var(--fondo) }

#loading-screen { position:fixed; inset:0; background:linear-gradient(135deg,var(--azul-dark),var(--azul)); display:flex; align-items:center; justify-content:center; z-index:999 }
.loading-content { text-align:center; color:white }
.pump-anim { font-size:64px; display:block; margin-bottom:24px; animation:pumpanim 1.6s ease-in-out infinite }
.loading-spinner { width:36px; height:36px; border:3px solid rgba(255,255,255,.25); border-top-color:white; border-radius:50%; margin:0 auto 16px; animation:spin .85s linear infinite }
.loading-text { font-size:16px; opacity:.85; font-weight:500 }

.detalle-header { background:linear-gradient(135deg,var(--azul-dark),var(--azul)); padding:18px 24px }
.detalle-header .header-inner { max-width:900px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px }
.detalle-header-actions { display:flex; gap:8px; align-items:center }

.btn-back {
  background:rgba(255,255,255,.15); color:white; border:1.5px solid rgba(255,255,255,.3);
  padding:9px 18px; border-radius:var(--radius-sm); font-size:14px; font-weight:600;
  display:flex; align-items:center; gap:7px; transition:background .2s;
}
.btn-back:hover { background:rgba(255,255,255,.25) }

.btn-back-header {
  color:white; display:flex; align-items:center; padding:6px 8px;
  border-radius:var(--radius-sm); background:rgba(255,255,255,.15);
  border:1.5px solid rgba(255,255,255,.3); margin-right:4px;
  flex-shrink:0; transition:background .2s;
}
.btn-back-header:hover { background:rgba(255,255,255,.25) }

.btn-share {
  background:rgba(255,255,255,.15); color:white; border:1.5px solid rgba(255,255,255,.3);
  padding:9px 16px; border-radius:var(--radius-sm); font-size:14px; font-weight:600;
  display:flex; align-items:center; gap:6px; transition:background .2s;
}
.btn-share:hover { background:rgba(255,255,255,.25) }

.btn-fav-detalle {
  background:rgba(255,255,255,.15); color:white; border:1.5px solid rgba(255,255,255,.3);
  padding:9px 16px; border-radius:var(--radius-sm); font-size:14px; font-weight:600;
  display:flex; align-items:center; gap:6px; transition:all .2s;
}
.btn-fav-detalle.fav-activo { background:rgba(239,68,68,.3); border-color:#f87171 }

.detalle-main { max-width:900px; margin:28px auto 60px; padding:0 16px; display:flex; flex-direction:column; gap:20px }

.detalle-card { background:white; border-radius:var(--radius); padding:28px; box-shadow:var(--shadow); animation:fadeUp .35s ease both }
.detalle-top { display:flex; align-items:flex-start; gap:18px; margin-bottom:20px }
.detalle-logo { width:64px; height:64px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.detalle-info { flex:1; min-width:0 }
.detalle-nombre { font-family:"Syne",sans-serif; font-size:clamp(20px,3vw,28px); font-weight:800; line-height:1.1; margin-bottom:6px }
.detalle-dir { font-size:14px; color:var(--g500) }
.detalle-horario-wrap { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px }
.detalle-horario-txt { font-size:13px; color:var(--g500) }

.fecha-banner { display:flex; align-items:center; gap:8px; background:#eff6ff; color:#1e40af; padding:10px 16px; border-radius:var(--radius-sm); font-size:13px; margin-bottom:4px }

.precios-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; margin:20px 0 }
.precio-item {
  display:flex; flex-direction:column; gap:6px;
  padding:14px 12px; background:var(--g100);
  border-radius:var(--radius-sm); border:1.5px solid var(--g200);
}
.precio-item-top { display:flex; align-items:center; gap:6px }
.precio-icono { font-size:16px; flex-shrink:0 }
.precio-label { font-weight:600; font-size:13px; color:var(--g700); white-space:nowrap }
.precio-valor { font-family:"Syne",sans-serif; font-size:22px; font-weight:800; color:var(--verde); line-height:1; white-space:nowrap }

.detalle-acciones { display:flex; gap:10px; flex-wrap:wrap; margin-top:4px }
.btn { padding:11px 20px; border:none; border-radius:var(--radius-sm); font-size:14px; font-weight:600; font-family:"DM Sans",sans-serif; display:flex; align-items:center; gap:6px; transition:opacity .2s,transform .15s }
.btn:hover { opacity:.85; transform:translateY(-1px) }
.btn-maps  { background:#2563eb; color:white }
.btn-waze  { background:#00aaff; color:white }
.btn-apple { background:#1a1a1a; color:white }

.detalle-mapa-wrap { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); animation:fadeUp .35s ease .1s both }
#mapa-detalle { height:300px }
.marker-detalle { width:44px; height:44px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); display:flex; align-items:center; justify-content:center; color:white; font-size:22px; box-shadow:0 3px 10px rgba(0,0,0,.3) }

/* ═══════════════════════════════════════════════════════════════════════════════
   ANIMACIONES
══════════════════════════════════════════════════════════════════════════════════*/
@keyframes fadeUp   { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes spin     { to{transform:rotate(360deg)} }
@keyframes shimmer  { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@keyframes pumpanim { 0%,100%{transform:scale(1) rotate(-5deg)} 50%{transform:scale(1.1) rotate(5deg)} }

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════════════════════*/

/* ── Tablet ≤ 900px ─────────────────────────────────────────────────────────── */
@media (max-width:900px) {
  .search-grid { grid-template-columns:1fr 1fr 1fr }
  .campo-wide  { grid-column:1 / -1 }
  .campo-buscar { grid-column:1 / -1 }
  .btn-buscar  { width:100%; justify-content:center }
  .fecha-update { margin-left:0; width:100% }
  .detalle-top { flex-direction:column }
  .detalle-logo { width:56px; height:56px }
}

/* ── Móvil ≤ 600px — solo header y búsqueda ─────────────────────────────────── */
@media (max-width:600px) {

  /* Header — título en dos líneas, botones ocultos (sustituidos por menú) */
  header { padding:14px 16px 60px }
  .header-inner { gap:6px }
  .brand { flex:1; min-width:0 }
  .brand-sub { display:none }
  .brand-icon { font-size:26px }
  .brand-title {
    font-size:15px;
    white-space:normal;
    line-height:1.2;
    word-break:break-word;
  }
  .header-actions { display:none }
  .btn-menu-movil { display:flex !important }

  /* Search panel */
  .search-panel { padding:16px 14px; margin-top:-40px }
  .search-grid { grid-template-columns:1fr 1fr; gap:12px }
  .campo-wide, .campo-buscar { grid-column:1 / -1 }
  /* Radio fila entera, horario al lado del buscar no — los dos en fila propia */
  .campo-radio-horario { grid-column:1 / -1 }
  .radio-horario-row { flex-direction:column; height:auto; gap:8px }
  .radio-horario-row input[type="range"] { width:100% }
  .btn-horario { width:100% }
  .campo label { font-size:10px }
  .campo input[type="text"], .campo select { padding:10px 12px; font-size:14px }
  .btn-buscar { width:100%; justify-content:center; padding:12px }

  /* Estado / resultados */
  .msg { font-size:13px; padding:11px 14px }
  .fecha-update { margin-left:0; width:100%; font-size:12px }

  /* Tabs */
  .tabs-info { display:none }
  .tab { padding:8px 16px; font-size:13px }
}

/* ── Móvil muy pequeño ≤ 380px ───────────────────────────────────────────────── */
@media (max-width:380px) {
  .search-grid { grid-template-columns:1fr }
  .precios-grid { grid-template-columns:1fr }
  .brand-title { font-size:13px }
  .btn-header { padding:7px 9px }
  .detalle-nombre { font-size:18px }
}

/* ── Tarjetas en móvil ≤ 480px ───────────────────────────────────────────────── */
@media (max-width:480px) {
  .card { padding:14px 12px }
  .card-nombre { font-size:14px }
  .card-dir { font-size:12px }
  .card-dir-loc { font-size:11px }
  .card-footer { gap:6px }
  .card-precio { font-size:22px }
  .card-dist { font-size:11px }
  .card-actions { gap:3px }
  .btn-fav-card, .btn-sel-card { font-size:15px; padding:2px }
  .btn-nav-card { padding:5px 6px }
}


.btn-nav-card {
  width:30px; height:30px; border-radius:6px; display:flex; align-items:center; justify-content:center;
  background:var(--azul); color:white; border:none; cursor:pointer; flex-shrink:0; text-decoration:none;
  transition:opacity .2s;
}
.btn-nav-card:hover { opacity:.8 }
.precio-sup {
  font-size: 0.52em;
  vertical-align: super;
  line-height: 0;
  font-weight: inherit;
  letter-spacing: 0;
}

/* ── Botones rápidos (Repostar + Ruta) ───────────────────────────────────────── */
.btns-rapidos {
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:4px;
}
.btn-repostar-ahora {
  display:flex; align-items:center; gap:12px;
  background:linear-gradient(135deg, var(--verde) 0%, #15803d 100%);
  color:white; border:none; border-radius:var(--radius-sm);
  padding:14px 16px; cursor:pointer;
  transition:opacity .2s, transform .15s; text-align:left;
  box-shadow:0 4px 14px rgba(22,163,74,.35);
}
.btn-repostar-ahora:hover { opacity:.92; transform:translateY(-1px) }
.btn-repostar-ahora.loading { opacity:.7; pointer-events:none }
.btn-de-ruta {
  display:flex; align-items:center; gap:12px;
  background:linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color:white; border-radius:var(--radius-sm);
  padding:14px 16px; text-decoration:none;
  transition:opacity .2s, transform .15s; text-align:left;
  box-shadow:0 4px 14px rgba(37,99,235,.35);
}
.btn-de-ruta:hover { opacity:.92; transform:translateY(-1px) }
.btn-repostar-ahora svg, .btn-de-ruta svg { flex-shrink:0 }
.btn-repostar-content { display:flex; flex-direction:column; gap:2px }
.btn-repostar-titulo { font-family:"Syne",sans-serif; font-size:15px; font-weight:800 }
.btn-repostar-sub { font-size:11px; opacity:.85 }

@media (max-width:480px) {
  .btns-rapidos { grid-template-columns:1fr }
}

/* ── Divider ─────────────────────────────────────────────────────────────────── */
.search-divider {
  display:flex; align-items:center; gap:12px;
  color:var(--g400); font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.5px; margin:16px 0 14px;
}
.search-divider::before, .search-divider::after {
  content:""; flex:1; height:1px; background:var(--g200);
}

/* ── Historial de búsquedas ──────────────────────────────────────────────────── */
.historial {
  position:absolute; top:calc(100% + 4px); left:0; right:0;
  background:white; border:1.5px solid var(--g200);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-lg);
  z-index:101; overflow:hidden;
}
.historial-titulo {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 14px; font-size:11px; font-weight:700;
  color:var(--g400); text-transform:uppercase; letter-spacing:.4px;
  border-bottom:1px solid var(--g100);
}
.historial-titulo button {
  font-size:11px; color:var(--g400); background:none; border:none;
  cursor:pointer; padding:2px 6px; border-radius:4px;
}
.historial-titulo button:hover { background:var(--g100) }
.historial-item {
  padding:10px 14px; font-size:13px; color:var(--g700);
  cursor:pointer; display:flex; align-items:center; gap:8px;
  border-bottom:1px solid var(--g100); transition:background .15s;
}
.historial-item:last-child { border-bottom:none }
.historial-item:hover { background:var(--g100) }

/* ── Botón compartir búsqueda ────────────────────────────────────────────────── */
.btn-compartir-busqueda {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(22,163,74,.15); color:#166534; border:1px solid rgba(22,163,74,.3);
  border-radius:6px; padding:4px 10px; font-size:12px; font-weight:600;
  cursor:pointer; margin-left:8px; transition:background .2s;
  font-family:"DM Sans",sans-serif; vertical-align:middle;
}
.btn-compartir-busqueda:hover { background:rgba(22,163,74,.25) }

/* ── Modo oscuro ─────────────────────────────────────────────────────────────── */
body.dark {
  --fondo:  #0f172a;
  --blanco: #1e293b;
  --g100:   #1e293b;
  --g200:   #334155;
  --g400:   #64748b;
  --g500:   #94a3b8;
  --g700:   #cbd5e1;
  --texto:  #f1f5f9;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.4);
  --shadow:    0 4px 20px rgba(0,0,0,.5);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.6);
}
body.dark header { background:linear-gradient(135deg, #0f172a 0%, #1e3a8a 70%, #1d4ed8 100%) }
body.dark .search-panel { background:var(--blanco) }
body.dark .campo input[type="text"],
body.dark .campo select { background:var(--g100); color:var(--texto); border-color:var(--g200) }
body.dark .card { background:var(--blanco); border-color:var(--g200) }
body.dark .card:hover { border-color:var(--verde-light) }
body.dark .modal { background:var(--blanco) }
body.dark .modal-header { border-color:var(--g200); background:var(--blanco) }
body.dark .modal-header h2 { color:var(--texto) }
body.dark .modal-close { background:var(--g200); color:var(--g500) }
body.dark .fav-item { border-color:var(--g200) }
body.dark .fav-item:hover { background:var(--g100) }
body.dark .fav-nombre { color:var(--texto) }
/* Botón compartir búsqueda en dark */
body.dark .btn-compartir-busqueda { background:rgba(134,239,172,.15); color:#86efac; border-color:rgba(134,239,172,.3) }
/* Página detalle en dark */
body.dark .detalle-page { background:var(--fondo) }
body.dark .detalle-header { background:linear-gradient(135deg, #0f172a 0%, #1e3a8a 70%, #1d4ed8 100%) }
body.dark .detalle-card { background:var(--blanco) }
body.dark .detalle-nombre { color:var(--texto) }
body.dark .detalle-dir { color:var(--g500) }
body.dark .detalle-mapa-wrap { box-shadow:var(--shadow) }
body.dark .fecha-banner { background:#1e3a8a; color:#bfdbfe; border-color:#3b82f6 }
body.dark .tab { background:var(--blanco); border-color:var(--g200); color:var(--g500) }
body.dark .tab.active { background:var(--azul); color:white }
body.dark .msg.ok { background:#14532d; color:#bbf7d0 }
body.dark .msg.info { background:#1e3a8a; color:#bfdbfe }
body.dark .msg.error { background:#7f1d1d; color:#fecaca }
body.dark .historial,
body.dark .sugerencias { background:var(--blanco); border-color:var(--g200) }
body.dark .historial-item:hover,
body.dark .sugerencia-item:hover { background:var(--g100) }
body.dark .precio-item { background:var(--g100); border-color:var(--g200) }
body.dark .mapa-vacio { background:var(--blanco); border-color:var(--g200) }
body.dark .btn-repostar-ahora { box-shadow:0 4px 14px rgba(22,163,74,.2) }
body.dark .badge-horario.abierta { background:#14532d; color:#86efac }
body.dark .badge-horario.cerrada { background:#7f1d1d; color:#fca5a5 }
body.dark .cmp-header { background:var(--g100) }
body.dark .ahorro-banner { background:#0f2318; border-color:#166534; }
body.dark .ahorro-banner .ahorro-texto { color:#86efac }
body.dark .ahorro-banner .ahorro-valor { color:#4ade80 }
body.dark .card-top { border-color:#16a34a; background:linear-gradient(135deg,#0d2a18 0%,#1e293b 60%) }

/* ── Marcas dropdown ─────────────────────────────────────────────────────────── */
.marcas-dropdown { position:relative }
.marcas-trigger {
  width:100%; height:44px; display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:0 12px; border:1.5px solid var(--g200); border-radius:var(--radius-sm);
  background:var(--blanco); color:var(--texto); font-family:"DM Sans",sans-serif;
  font-size:15px; cursor:pointer; transition:border-color .2s;
}
.marcas-trigger:disabled { opacity:.5; cursor:default }
.marcas-trigger:not(:disabled):hover { border-color:var(--azul) }
.marcas-trigger.abierto { border-color:var(--azul) }
.marcas-trigger svg { flex-shrink:0; transition:transform .2s }
.marcas-trigger.abierto svg { transform:rotate(180deg) }

.marcas-panel {
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:100;
  background:var(--blanco); border:1.5px solid var(--g200);
  border-radius:var(--radius-sm); box-shadow:var(--shadow);
  overflow:hidden;
}
.marcas-panel-inner { padding:12px }
.marcas-panel-acciones {
  display:flex; gap:8px; margin-bottom:10px; padding-bottom:10px;
  border-bottom:1px solid var(--g200);
}
.marcas-panel-acciones button {
  font-family:"DM Sans",sans-serif; font-size:12px; font-weight:600;
  padding:4px 12px; border-radius:99px; cursor:pointer;
  border:1.5px solid var(--g200); background:var(--blanco); color:var(--texto);
  transition:all .15s;
}
.marcas-panel-acciones button:hover { border-color:var(--azul); color:var(--azul) }
.marcas-chips-grid { display:flex; flex-wrap:wrap; gap:6px; max-height:180px; overflow-y:auto }
.marca-chip {
  display:inline-flex; align-items:center; gap:4px;
  padding:5px 10px; border-radius:99px; font-size:12px; font-weight:600;
  font-family:"DM Sans",sans-serif; cursor:pointer;
  border:1.5px solid var(--g200); background:var(--blanco); color:var(--texto);
  transition:all .15s; white-space:nowrap;
}
.marca-chip:hover { border-color:var(--azul); color:var(--azul) }
.marca-chip.activo { color:white }

body.dark .marcas-trigger { background:var(--blanco); border-color:var(--g200) }
body.dark .marcas-panel { background:var(--blanco); border-color:var(--g200) }
body.dark .marca-chip { background:var(--blanco); border-color:var(--g200) }
body.dark .marcas-panel-acciones { border-color:var(--g200) }
body.dark .marcas-panel-acciones button { background:var(--blanco); border-color:var(--g200) }

/* ── Filtros de resultados ───────────────────────────────────────────────────── */
#filtros-resultados {
  border-top:1.5px solid var(--g200);
  border-bottom:1.5px solid var(--g200);
  background:var(--g100);
  padding:16px 24px;
  margin-bottom:16px;
}
.filtros-resultados-inner {
  display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:100%;
}
.filtro-result-label {
  display:block; font-size:11px; font-weight:700; color:var(--g500);
  text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px;
}
#filtros-resultados #litros {
  width:100%; border:1.5px solid var(--g200); border-radius:var(--radius-sm);
  padding:0 12px; height:40px; font-family:"DM Sans",sans-serif;
  font-size:14px; color:var(--texto); background:var(--blanco);
  outline:none; transition:border-color .2s; box-sizing:border-box;
}
#filtros-resultados #litros:focus { border-color:var(--azul) }
#filtros-resultados #litros::placeholder { color:var(--g400) }
#filtros-resultados .marcas-trigger { height:40px; font-size:14px }

body.dark #filtros-resultados { background:var(--g100); border-color:var(--g200) }
body.dark #filtros-resultados #litros { background:var(--blanco); border-color:var(--g200) }

@media (max-width:500px) {
  .filtros-resultados-inner { grid-template-columns:1fr }
  #filtros-resultados { padding:14px 16px }
}

/* ── Botón menú móvil ────────────────────────────────────────────────────────── */
.btn-menu-movil {
  display:none; align-items:center; justify-content:center;
  background:rgba(255,255,255,.15); border:none; border-radius:10px;
  width:38px; height:38px; cursor:pointer; color:white; flex-shrink:0;
  transition:background .2s;
}
.btn-menu-movil:hover { background:rgba(255,255,255,.25) }

/* Panel menú lateral */
.menu-movil-overlay {
  display:none; position:fixed; inset:0; z-index:300;
  background:rgba(0,0,0,.4);
}
.menu-movil-overlay.abierto { display:block }
.menu-movil-panel {
  position:absolute; top:0; right:0; bottom:0; width:240px;
  background:white; box-shadow:-4px 0 24px rgba(0,0,0,.18);
  display:flex; flex-direction:column; padding:24px 16px; gap:10px;
  animation:slideInRight .22s ease;
}
@keyframes slideInRight {
  from { transform:translateX(100%) }
  to   { transform:translateX(0) }
}
.menu-movil-titulo {
  font-size:11px; font-weight:700; color:var(--g400);
  text-transform:uppercase; letter-spacing:.5px;
  padding:0 4px 8px; border-bottom:1px solid var(--g200); margin-bottom:4px;
}
.menu-movil-item {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:10px; cursor:pointer;
  font-size:15px; font-weight:600; color:var(--texto);
  background:none; border:none; width:100%; text-align:left;
  justify-content:flex-start;
  transition:background .15s; font-family:"DM Sans",sans-serif;
}
.menu-movil-item:hover { background:var(--g100) }
.menu-movil-item .menu-badge {
  margin-left:auto; background:var(--azul); color:white;
  font-size:11px; font-weight:700; border-radius:99px;
  padding:2px 8px; min-width:20px; text-align:center; flex-shrink:0;
}

body.dark .menu-movil-panel { background:#1e293b; border-left:1px solid var(--g200) }
body.dark .menu-movil-item:hover { background:var(--g100) }
body.dark .menu-movil-titulo { color:var(--g400); border-color:var(--g200) }

/* ── Botón horario (reemplaza toggle) ────────────────────────────────────────── */
.btn-horario {
  display:flex; align-items:center; gap:8px;
  width:100%; height:44px; padding:0 14px;
  border:1.5px solid var(--g200); border-radius:var(--radius-sm);
  background:var(--blanco); color:var(--texto);
  font-family:"DM Sans",sans-serif; font-size:14px; font-weight:600;
  cursor:pointer; transition:all .2s; white-space:nowrap;
}
.btn-horario:hover { border-color:var(--azul); color:var(--azul) }
.btn-horario-on {
  background:#f0fdf4; border-color:#16a34a; color:#16a34a;
}
.btn-horario-on:hover { border-color:#15803d; color:#15803d }
body.dark .btn-horario { background:var(--g100); border-color:var(--g200) }
body.dark .btn-horario-on { background:#052e16; border-color:#16a34a; color:#4ade80 }

/* Salto de línea en título solo en móvil */
.brand-br { display:none }
@media (max-width:600px) { .brand-br { display:block } }

/* ── Compartir comparativa ────────────────────────────────────────────────────── */
.cmp-compartir-wrap { display:flex; justify-content:flex-end; margin-bottom:12px }
.btn-cmp-compartir {
  display:flex; align-items:center; gap:7px;
  background:var(--g100); border:1.5px solid var(--g200);
  color:var(--g700); padding:8px 16px; border-radius:var(--radius-sm);
  font-size:13px; font-weight:600; font-family:"DM Sans",sans-serif;
  cursor:pointer; transition:background .2s, border-color .2s;
}
.btn-cmp-compartir:hover { background:var(--g200); border-color:var(--azul-light); color:var(--azul) }
body.dark .btn-cmp-compartir { background:var(--g100); border-color:var(--g200); color:var(--g700) }