/* ═══════════════════════════════════════════════════════════════════════════════
   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% }

/* ── Banner offline ──────────────────────────────────────────────────────── */
#banner-offline {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  background: #92400e; color: #fef3c7;
  font-size: 13px; font-weight: 600;
  padding: 8px 16px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transform: translateY(-100%);
  transition: transform .3s ease;
  pointer-events: none;
}
#banner-offline.visible { transform: translateY(0) }
body.dark #banner-offline { background: #78350f; color: #fde68a }
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 }
img.brand-icon {width: 36px; height: 36px; object-fit: contain; border-radius: 6px;
}
.brand-title { font-family:"Inter",sans-serif; font-size:clamp(14px,3vw,27px); font-weight:800; letter-spacing:-.4px; overflow:hidden; text-overflow:ellipsis }
.brand-page { font-weight:500; opacity:.6; font-size:.85em }
.brand-sub { font-size:12px; opacity:.7; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.brand-sub-corto { display:none }
.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:#15803d; 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:#166534; 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-cerrada { opacity:.45; filter:saturate(0.3) }
.card-cerrada:hover { opacity:.65 }
.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 }
.station-logo-img { border-radius:10px; overflow:hidden; padding:4px }
.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; display:flex; align-items:center; gap:6px; flex-wrap:wrap }
.card-dist-inline { display:inline-flex; align-items:center; gap:3px; color:var(--azul); font-weight:600; white-space:nowrap }
.card-dist { display:none }
.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 }
.badge-sinact { display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:600; padding:2px 7px; border-radius:99px; margin-top:4px; background:#fef3c7; color:#92400e; border:1px solid #fde68a }
body.dark .badge-sinact { background:rgba(245,158,11,.12); color:#fcd34d; border-color:rgba(245,158,11,.25) }
.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:"Inter",sans-serif; font-size:48px; font-weight:800; color:#16a34a; line-height:1; transition:color .3s ease }
.card-precio-row { display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; gap:6px 8px }
.card-precio-row .precio-variacion { margin:0; font-size:16px; font-weight:800; flex-shrink:0 }
.card-comb-wrap { margin-top:2px }
.precio-top { color:#FACC15}
.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-actions { display:flex; align-items:center; gap:6px; flex-shrink:0 }
.btn-fav-card, .btn-sel-card {
  width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  background:var(--g100); border:1.5px solid var(--g200); font-size:16px; line-height:1;
  cursor:pointer; flex-shrink:0; transition:all .2s;
}
.btn-fav-card:hover { transform:scale(1.1) }
.btn-fav-card.fav-on { background:#fff0f0; border-color:#fca5a5 }
.btn-sel-card { color:var(--g500); padding:0 }
.btn-sel-card:hover { background:var(--g200) }
.btn-sel-card.sel-on { background:#dbeafe; border-color:#93c5fd; 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); position:relative; isolation:isolate; z-index:0  }
.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 { line-height:0; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)) }
.marker-user svg { fill:#2563eb; stroke:#fff; stroke-width:1.6 }
.marker-user svg circle { fill:#fff; stroke:none }
.sp-ico { flex-shrink:0; vertical-align:-.18em }
.marker-pin {
  display:flex; align-items:center; gap:4px;
  padding:4px 8px 4px 5px; 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;
  border:2px solid rgba(255,255,255,.5);
  transition:transform .15s;
}
.marker-pin:hover { transform:scale(1.08) }
/* El .marker-top ya no usa amarillo fijo — el color viene del precio (verde) */
.marker-top { border-color:rgba(255,255,255,.9) !important; box-shadow:0 2px 14px rgba(0,0,0,.35) }
.marker-pin img { border-radius:3px }
.popup-content { font-family:"DM Sans",sans-serif; font-size:13px; line-height:1.7; min-width:160px }

/* ── Popup de gasolinera (mapa principal y de ruta) ── */
.leaflet-container .leaflet-popup-content-wrapper { border-radius:14px }
.leaflet-container .leaflet-popup-content { margin:14px 16px 14px; line-height:1.4; font-size:13px }
.sp-pop { font-family:"DM Sans",sans-serif; font-size:13px; line-height:1.4; min-width:220px; color:var(--texto) }
.sp-pop-cab { display:flex; align-items:flex-start; gap:10px; padding-right:14px }
.sp-pop-logo { width:36px; height:36px; flex-shrink:0; border-radius:9px; background:#f1f5f9; padding:3px; object-fit:contain }
.sp-pop-logo-vacio { display:flex; align-items:center; justify-content:center; color:var(--g500) }
.sp-pop-tit { min-width:0 }
.sp-pop-nom { font-family:"Inter",sans-serif; font-weight:800; font-size:15px; line-height:1.2; color:var(--texto) }
.sp-pop-dir { margin-top:2px; font-size:12px; line-height:1.35; color:var(--g500) }
.sp-pop .badge-horario { margin-top:10px }
.sp-pop-filas { margin-top:8px }
.sp-pop-fila { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:5px 0; border-bottom:1px solid var(--g200) }
.sp-pop-fila span { font-size:11px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:var(--g500) }
.sp-pop-fila b { font-family:"Inter",sans-serif; font-size:14px; font-weight:700; color:var(--texto) }
.sp-pop-fila.dest b { font-size:16px; font-weight:800 }
.sp-pop-acc { display:flex; gap:8px; margin-top:12px }
.leaflet-popup-content .sp-pop-btn {
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 8px; border-radius:9px; font-size:13px; font-weight:700; line-height:1.1;
  text-decoration:none; white-space:nowrap; border:1.5px solid var(--azul)
}
.leaflet-popup-content .sp-pop-btn.sec { background:transparent; color:var(--azul); border-color:var(--g200) }
.leaflet-popup-content .sp-pop-btn.pri { background:var(--azul); color:#fff }
.leaflet-popup-content .sp-pop-btn:hover { opacity:.88 }
body.dark .leaflet-container .leaflet-popup-content-wrapper, body.dark .leaflet-container .leaflet-popup-tip { background:var(--blanco); color:var(--texto) }
body.dark .sp-pop-logo { background:#e2e8f0 }
body.dark .leaflet-popup-content .sp-pop-btn.sec { color:#93c5fd }
body.dark .leaflet-popup-close-button { color:var(--g400) !important }

/* ── 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:"Inter",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:"Inter",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:"Inter",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) }
/* ── Mis favoritos (modal único: nav.js) ── */
.modal-favs-v2 { display:flex; flex-direction:column; overflow:hidden }
.modal-favs-v2 .modal-header, .modal-favs-v2 .favs-tabs { position:static; flex-shrink:0 }
.favs-scroll { flex:1; min-height:140px; overflow-y:auto; overscroll-behavior:contain }
.favs-empty { text-align:center; padding:40px 24px; color:var(--g700) }
.favs-empty-ico { display:flex; justify-content:center; margin-bottom:12px; color:var(--g300,#cbd5e1) }
.favs-empty-tit { font-weight:700; color:var(--texto) }
.favs-empty-sub { color:var(--g400); font-size:14px; margin-top:6px }
.fav-item { display:flex; flex-direction:column; gap:12px; padding:16px 20px; border-bottom:1px solid var(--g100) }
.fav-item:last-child { border-bottom:none }
.fav-top { display:flex; align-items:flex-start; gap:12px }
.fav-info { flex:1; min-width:0 }
.fav-nombre { font-family:"Inter",sans-serif; font-weight:800; font-size:15px; line-height:1.25; color:var(--texto) }
.fav-dir { margin-top:2px; font-size:12px; line-height:1.35; color:var(--g500); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.fav-precios { display:flex; flex-wrap:wrap; gap:8px; margin-top:-4px }
.fav-chip { display:inline-flex; align-items:baseline; gap:6px; background:var(--g100); border-radius:8px; padding:3px 9px }
.fav-chip i { font-style:normal; font-size:11px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:var(--g500) }
.fav-chip b { font-family:"Inter",sans-serif; font-size:13px; font-weight:800; color:var(--texto) }
.fav-ico { width:44px; height:44px; flex-shrink:0; border-radius:10px; background:var(--g100); border:1.5px solid var(--g200); display:flex; align-items:center; justify-content:center; color:var(--azul) }
.fav-ico.ev { color:#d97706 }
.fav-ruta-nom { display:flex; align-items:center; flex-wrap:wrap; gap:2px 6px }
.fav-ruta-nom svg { flex-shrink:0; color:var(--g400) }
.btn-fav-del { flex-shrink:0; width:32px; height:32px; margin:-4px -6px 0 0; border:none; border-radius:8px; background:none; color:var(--g400); display:flex; align-items:center; justify-content:center; cursor:pointer }
.btn-fav-del:hover { color:#ef4444; background:rgba(239,68,68,.1) }
.fav-acc-fila { display:flex; gap:8px }
.btn-fav-pri, .btn-fav-sec {
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 10px; border-radius:9px; border:1.5px solid var(--azul);
  font-family:"DM Sans",sans-serif; font-size:13px; font-weight:700; line-height:1.1;
  text-decoration:none; white-space:nowrap; cursor:pointer
}
.btn-fav-pri { background:var(--azul); color:#fff }
.btn-fav-sec { background:transparent; color:var(--azul); border-color:var(--g200) }
.btn-fav-pri:hover, .btn-fav-sec:hover { opacity:.88 }
.btn-fav-solo { flex:none; margin-top:16px; padding:9px 18px }
.favs-sub { display:flex; gap:8px; padding:14px 20px 2px }
.favs-sub button {
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 10px; border-radius:99px; border:1.5px solid var(--g200); background:var(--blanco);
  color:var(--g500); font-family:"DM Sans",sans-serif; font-size:13px; font-weight:600; cursor:pointer
}
.favs-sub button span { font-size:11px; font-weight:700; background:var(--g100); border-radius:99px; padding:1px 7px }
.favs-sub button.activo { background:var(--azul); border-color:var(--azul); color:#fff }
.favs-sub button.activo span { background:rgba(255,255,255,.22); color:#fff }
.favs-undo { flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 20px; background:var(--texto); color:var(--blanco); font-size:13px; font-weight:600 }
.favs-undo button { background:none; border:none; padding:4px 8px; color:#60a5fa; font-family:"DM Sans",sans-serif; font-size:13px; font-weight:700; cursor:pointer }

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

/* ════════════════════════════════════════════════════════════════════════════════
   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 svg { display:block; margin:0 auto }
.pump-anim { 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:calc(18px + env(safe-area-inset-top, 0px)) 24px 18px }
.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:"Inter",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:"Inter",sans-serif; font-size:48px; font-weight:800; color:#FACC15; line-height:1; white-space:nowrap }
.precio-valor-row { display:flex; flex-direction:column; align-items:flex-start; gap:2px }
.precio-variacion {
  font-size:18px; font-weight:700; line-height:1;
  display:inline-flex; align-items:center; gap:3px;
  padding:3px 7px; border-radius:6px;
}
.precio-variacion.sube  { color:#fff; background:#dc2626 }
.precio-variacion.baja  { color:#fff; background:#16a34a }
body.dark .precio-variacion.sube { color:#fff; background:#b91c1c }
body.dark .precio-variacion.baja { color:#fff; background:#15803d }
.precio-desde {
  display:none; font-size:11px; color:var(--g400); font-weight:500;
  margin-top:4px; letter-spacing:.1px;
}
.precio-desde.precio-desde-viejo { color:#d97706; font-weight:600 }
body.dark .precio-desde { color:var(--g400) }
body.dark .precio-desde.precio-desde-viejo { color:#fbbf24 }
.aviso-precio-desde {
  display:none; align-items:flex-start; gap:8px;
  background:#fef9ec; border:1.5px solid #fde68a;
  border-radius:var(--radius-sm); padding:10px 14px;
  font-size:12px; color:#92400e; line-height:1.5;
  margin-bottom:16px;
}
.aviso-precio-desde svg { flex-shrink:0; margin-top:1px; stroke:#d97706 }
body.dark .aviso-precio-desde { background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.3); color:#fde68a }
body.dark .aviso-precio-desde svg { stroke:#fbbf24 }

.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 }
.btn-grafica-det {
  background:transparent; color:var(--verde);
  border:1.5px solid var(--verde) !important;
  display:inline-flex; align-items:center; gap:6px;
}
.btn-grafica-det:hover { background:rgba(22,163,74,.08); opacity:1 }
body.dark .btn-grafica-det { color:#86efac; border-color:#16a34a !important }
body.dark .btn-grafica-det:hover { background:rgba(22,163,74,.12) }
.btn-compartir-det {
  background:white; color:#2563eb;
  border:1.5px solid #2563eb !important;
  display:flex; align-items:center; gap:7px;
}
.btn-compartir-det:hover { background:#eff6ff; opacity:1 }
body.dark .btn-compartir-det { background:transparent; color:#93c5fd; border-color:#3b82f6 !important }
body.dark .btn-compartir-det:hover { background:#1e3a5f }

.detalle-muni-link {
  display:flex; align-items:center; gap:7px; margin-top:16px;
  padding:12px 16px; border-radius:var(--radius-sm);
  background:var(--g100); border:1px solid var(--g200);
  color:var(--azul); font-size:13px; font-weight:600;
  text-decoration:none; transition:all .2s;
}
.detalle-muni-link:hover { background:var(--azul); color:white; border-color:var(--azul) }
body.dark .detalle-muni-link { background:var(--g100); border-color:var(--g200); color:#93c5fd }
body.dark .detalle-muni-link:hover { background:#1e40af; 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 svg { transform:rotate(45deg) }
.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 }
}

/* ── Visibilidad escritorio/móvil ────────────────────────────────────────────── */
/* En escritorio: todo visible, tres puntos ocultos */
.btn-solo-movil  { display: none !important }
.btn-solo-escritorio { display: flex }

/* ── Móvil ≤ 925px ───────────────────────────────────────────────────────────── */
@media (max-width:925px) {

  /* Header */
  header { padding:14px 16px 60px }
  .header-inner { gap:4px }
  .brand { flex:1; min-width:0 }
  .brand-sub { font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px }
  .brand-sub-largo { display:none }
  .brand-sub-corto { display:inline }
  .brand-icon { font-size:26px }
  .brand-title { font-size:15px; white-space:normal; line-height:1.2; word-break:break-word }

  /* Ocultar botones de navegación, mostrar tres puntos */
  .btn-solo-escritorio { display: none !important }
  .btn-solo-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 }
  .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:42px }
  .card-actions { gap:5px }
}


.btn-nav-card {
  width:34px; height:34px; border-radius:8px; 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:"Inter",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(--g600); font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.5px; margin:16px 0 14px;
}
body.dark .search-divider { color:var(--g700); }
.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) }

.btn-guardar-busqueda {
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(37,99,235,.12); color:#1d4ed8; border:1px solid rgba(37,99,235,.25);
  border-radius:6px; padding:4px 10px; font-size:12px; font-weight:600;
  cursor:pointer; margin-left:6px; transition:background .2s;
  font-family:"DM Sans",sans-serif; vertical-align:middle;
}
.btn-guardar-busqueda:hover { background:rgba(37,99,235,.22) }
.btn-guardar-busqueda.guardada {
  background:rgba(22,163,74,.15); color:#15803d;
  border-color:rgba(22,163,74,.35); cursor:default; opacity:.85;
}
body.dark .btn-guardar-busqueda { background:rgba(59,130,246,.15); color:#93c5fd; border-color:rgba(59,130,246,.3) }
body.dark .btn-guardar-busqueda:hover { background:rgba(59,130,246,.28) }
body.dark .btn-guardar-busqueda.guardada { background:rgba(22,163,74,.2); color:#86efac; border-color:rgba(22,163,74,.3) }

/* ── Tabs de favoritos ───────────────────────────────────────────────────────── */
.favs-tabs {
  display:flex; gap:0; border-bottom:2px solid var(--g200);
  padding:0 24px; position:sticky; top:0; background:var(--blanco); z-index:1;
}
.favs-tab {
  display:flex; align-items:center; gap:7px;
  padding:14px 18px; font-size:14px; font-weight:600;
  color:var(--g400); background:none; border:none; cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-2px;
  transition:all .2s; font-family:"DM Sans",sans-serif;
}
.favs-tab.activo { color:var(--azul); border-bottom-color:var(--azul) }
.favs-tab:hover:not(.activo) { color:var(--texto) }
.favs-tab-count {
  background:var(--g100); color:var(--g500);
  font-size:11px; font-weight:700; padding:2px 7px; border-radius:99px;
}
.favs-tab.activo .favs-tab-count { background:rgba(37,99,235,.12); color:var(--azul) }

/* ── Búsquedas favoritas ─────────────────────────────────────────────────────── */
.fav-busqueda-icon {
  width:44px; height:44px; border-radius:10px; background:var(--g100);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0; border:1.5px solid var(--g200);
}
.fav-busqueda-meta {
  display:flex; flex-wrap:wrap; gap:4px; margin-top:4px;
  font-size:12px; color:var(--g500);
}
.fav-busqueda-fecha { color:var(--g400) }

body.dark .favs-tabs { background:var(--blanco); border-color:var(--g200) }
body.dark .favs-tab.activo { color:#93c5fd; border-bottom-color:#3b82f6 }
body.dark .favs-tab-count { background:var(--g100); color:var(--g400) }
body.dark .favs-tab.activo .favs-tab-count { background:rgba(59,130,246,.15); color:#93c5fd }
body.dark .fav-busqueda-icon { background:var(--g100); border-color:var(--g200) }

/* ── 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-nombre { color:var(--texto) }
body.dark .favs-sub button { background:var(--blanco); border-color:var(--g200) }
body.dark .favs-sub button.activo { background:var(--azul); border-color:var(--azul) }
body.dark .btn-fav-sec { color:#93c5fd }
body.dark .fav-ico { background:var(--g100); border-color:var(--g200) }
body.dark .fav-ico.ev { color:#fbbf24 }
body.dark .favs-undo { background:var(--g200); 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:1000;
  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 ───────────────────────────────────────────────────── */
/* ── Panel de filtros en tabs ───────────────────────────────────────────────── */
.tabs-filtros-wrap { position:relative; margin-left:auto }

.tab-filtros { gap:6px; white-space:nowrap; position:relative }
.tab-filtros.activo { background:var(--azul-bg); color:var(--azul); border-color:var(--azul-light) }
.tab-filtros.tiene-filtros { color:var(--azul) }

.filtros-badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:16px; height:16px; padding:0 4px;
  background:var(--azul); color:white; border-radius:99px;
  font-size:10px; font-weight:700; line-height:1;
}

.panel-filtros {
  position:absolute; top:calc(100% + 8px); right:0;
  width:300px; background:var(--blanco);
  border:1.5px solid var(--g200); border-radius:var(--radius);
  box-shadow:0 8px 32px rgba(0,0,0,.12); z-index:200;
  overflow:hidden;
}
body.dark .panel-filtros { box-shadow:0 8px 32px rgba(0,0,0,.4) }

.pf-grupo {
  padding:14px 16px;
  border-bottom:1.5px solid var(--g100);
}
.pf-grupo:last-child { border-bottom:none }

.pf-label {
  font-size:11px; font-weight:700; color:var(--g400);
  text-transform:uppercase; letter-spacing:.5px;
  margin-bottom:10px; display:flex; align-items:center; gap:6px;
}
.pf-label-hint { font-size:11px; font-weight:500; color:var(--azul); text-transform:none; letter-spacing:0 }

.pf-opciones { display:flex; flex-direction:column; gap:4px }
.pf-opcion {
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:var(--radius-sm);
  border:1.5px solid transparent; background:transparent;
  font-family:"DM Sans",sans-serif; font-size:13px; font-weight:500;
  color:var(--texto); cursor:pointer; text-align:left;
  transition:background .12s, border-color .12s;
}
.pf-opcion:hover { background:var(--g100) }
.pf-opcion.activa { background:var(--azul-bg); border-color:var(--azul-light); color:var(--azul); font-weight:600 }

.pf-litros-row { display:flex; align-items:center; gap:8px }
.pf-litros-row #litros {
  flex:1; border:1.5px solid var(--g200); border-radius:var(--radius-sm);
  padding:0 12px; height:38px; 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;
}
.pf-litros-row #litros:focus { border-color:var(--azul) }
.pf-litros-row #litros::placeholder { color:var(--g400) }
.pf-clear-litros {
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  border:1.5px solid var(--g200); background:var(--g100);
  color:var(--g400); font-size:12px; cursor:pointer;
  transition:background .12s; flex-shrink:0;
}
.pf-clear-litros:hover { background:var(--g200) }

.panel-filtros .marcas-trigger { height:38px; font-size:13px }
.panel-filtros .marcas-panel {
  position:static; box-shadow:none; border:none;
  border-top:1.5px solid var(--g100); border-radius:0;
  margin-top:8px;
}

@media (max-width:480px) {
  .panel-filtros { width:calc(100vw - 32px); right:-8px }
}


/* Botón tres puntos */
.btn-menu-movil {
  align-items:center; justify-content:center;
  background:rgba(255,255,255,.15); color:white;
  border:1.5px solid rgba(255,255,255,.3);
  padding:8px 10px; border-radius:var(--radius-sm);
  cursor:pointer; transition:background .2s; flex-shrink:0;
}
.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) }

/* ── Mapa bienvenida GeoIP ───────────────────────────────────────────────────── */
#banner-geoip {
  display: flex; align-items: center; gap: 7px;
  background: #eff6ff; border: 1.5px solid #bfdbfe;
  color: #1e40af; font-size: 13px; font-weight: 500;
  padding: 9px 14px; border-radius: var(--radius-sm);
  margin-bottom: 10px;
}
body.dark #banner-geoip {
  background: rgba(37,99,235,.12); border-color: rgba(37,99,235,.3);
  color: #93c5fd;
}

/* ── Overlay carga mapa GeoIP ───────────────────────────────────────────────── */
#mapa-cargando-overlay {
  position: absolute; inset: 0; z-index: 800;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(2px);
  border-radius: var(--radius);
  pointer-events: none;
}
body.dark #mapa-cargando-overlay { background: rgba(15,23,42,0.55) }
.mapa-cargando-inner {
  display: flex; align-items: center; gap: 10px;
  background: white; border-radius: 99px;
  padding: 10px 18px; box-shadow: 0 4px 20px rgba(0,0,0,.15);
  font-size: 13px; font-weight: 600; color: #1e40af;
}
body.dark .mapa-cargando-inner { background: #1e293b; color: #93c5fd }
.mapa-cargando-spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2.5px solid #bfdbfe;
  border-top-color: #2563eb;
  animation: spin .7s linear infinite; flex-shrink: 0;
}

/* ── Cluster personalizado de marcadores ────────────────────────────────────── */
.marker-cluster-custom {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--azul);
  border: 3px solid white;
  box-shadow: 0 2px 10px rgba(37,99,235,.5);
  display: flex; align-items: center; justify-content: center;
}
.marker-cluster-custom span {
  color: white; font-family: "Inter", sans-serif;
  font-weight: 800; font-size: 13px; line-height: 1;
}

/* ── Botón flotante actualizar mapa bienvenida ──────────────────────────────── */
#btn-actualizar-mapa {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 1000; display: none; align-items: center; gap: 7px;
  background: var(--azul); color: white;
  border: none; border-radius: 99px;
  padding: 10px 20px; font-size: 13px; font-weight: 700;
  font-family: "DM Sans", sans-serif;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 4px 16px rgba(37,99,235,.45);
  transition: opacity .2s, transform .2s;
  animation: slideDown .25s ease;
}
#btn-actualizar-mapa:hover { opacity: .88; transform: translateX(-50%) translateY(-1px) }
#btn-actualizar-mapa svg { flex-shrink: 0 }
@keyframes slideDown {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px) }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) }
}
@keyframes spin { to { transform: rotate(360deg) } }
body.dark #btn-actualizar-mapa {
  background: #2563eb; box-shadow: 0 4px 16px rgba(37,99,235,.3);
}

/* ── Splash Screen ─────────────────────────────────────────────────────────── */
/* Visitas recurrentes: la clase no-splash se aplica en <head> antes del primer paint
   para que el splash nunca sea visible y no retrase el LCP. */
.no-splash #splash-screen { display: none !important; }

#splash-screen {
  position:fixed; inset:0; z-index:99999;
  background:linear-gradient(160deg, #0f172a 0%, #1e3a8a 60%, #1d4ed8 100%);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s ease, transform .5s ease;
}
#splash-screen.splash-hide {
  opacity:0;
  transform:scale(1.04);
  pointer-events:none;
}
.splash-inner {
  display:flex; flex-direction:column; align-items:center; gap:20px;
  user-select:none;
}

/* Órbita */
.splash-orbit-wrap {
  position:relative;
  width:200px; height:200px;
}
.splash-orbit {
  position:absolute; inset:0;
  animation: orbitaSpin 7s linear infinite;
}
@keyframes orbitaSpin {
  from { transform:rotate(0deg) }
  to   { transform:rotate(360deg) }
}
.splash-logo-item {
  position:absolute;
  top:50%; left:50%;
  width:44px; height:44px;
  margin:-22px 0 0 -22px;
  transform: rotate(calc(var(--i) * 45deg)) translateY(-90px);
}
/* Contrarotación para que los logos se vean siempre derechos */
.splash-logo-circle {
  width:44px; height:44px;
  background:#fff;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 12px rgba(0,0,0,.25);
  animation: contraRotar 7s linear infinite;
  overflow:hidden;
  padding:6px;
}
@keyframes contraRotar {
  from { transform:rotate(0deg) }
  to   { transform:rotate(-360deg) }
}
.splash-logo-circle img {
  width:28px; height:28px;
  object-fit:contain;
}

/* Centro */
.splash-center {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.splash-icon {
  font-size:52px;
  filter:drop-shadow(0 0 20px rgba(250,204,21,.5));
  animation: pulseIcon 2s ease-in-out infinite;
}
@keyframes pulseIcon {
  0%,100% { transform:scale(1) }
  50%      { transform:scale(1.1) }
}

/* Título y subtítulo */
.splash-titulo {
  font-family:"Inter",sans-serif;
  font-size:32px; font-weight:800;
  color:#fff;
  letter-spacing:-.5px;
  text-shadow:0 2px 20px rgba(0,0,0,.3);
}
.splash-sub {
  font-size:13px; color:rgba(255,255,255,.65);
  font-weight:500; letter-spacing:.2px;
  margin-top:-12px;
}

/* Puntos de carga */
.splash-dots {
  display:flex; gap:7px; margin-top:4px;
}
.splash-dots span {
  width:7px; height:7px;
  background:rgba(255,255,255,.4);
  border-radius:50%;
  animation:dotBounce .9s ease-in-out infinite;
}
.splash-dots span:nth-child(2) { animation-delay:.15s }
.splash-dots span:nth-child(3) { animation-delay:.3s  }
@keyframes dotBounce {
  0%,80%,100% { transform:scale(1);   opacity:.4 }
  40%          { transform:scale(1.4); opacity:1  }
}

/* ─── Footer global ─────────────────────────────────────────────────────────── */
.site-footer {
  margin-top: 60px;
  border-top: 1.5px solid var(--g200);
  background: var(--blanco);
  padding: 32px 24px 40px;
}
.site-footer-inner {
  max-width: 900px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 22px; align-items: stretch;
  text-align: left;
}
.site-footer-brand { display: flex; flex-direction: column; gap: 6px; align-items: flex-start }
.site-footer-logo {
  display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
}
.site-footer-logo img { width: 44px; height: 44px; border-radius: 10px; object-fit: contain }
.site-footer-nombre { font-family:"Inter",sans-serif; font-weight:800; font-size:24px; letter-spacing:-.3px; line-height:1.1; color:var(--texto) }
.site-footer-desc   { color:var(--g500); font-size:13px; line-height:1.4; margin:0 }
.site-footer-nav {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px;
  padding-top: 20px; border-top: 1px solid var(--g200);
}
.site-footer-col { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.site-footer-tit {
  font-family:"DM Sans",sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--g400); margin: 0 0 4px;
}
.site-footer-nav a {
  font-size: 14px; font-weight: 600; color: var(--g500); padding: 3px 0;
  text-decoration: none; transition: color .15s;
}
.site-footer-nav a:hover { color: var(--azul) }
@media (min-width: 640px) {
  .site-footer-nav { grid-template-columns: repeat(4, minmax(0, 1fr)) }
}
.site-footer-legal {
  font-size: 11px; color: var(--g500); line-height: 1.6;
  max-width: 560px; margin: 0;
}
body.dark .site-footer { background: var(--blanco); border-color: var(--g200) }

/* ── Redes sociales en el footer ── */
.site-footer-redes {
  display: flex;
  gap: 12px;
  margin: 0;
}
.site-footer-red {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--g200);
  color: var(--g400);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color .15s, border-color .15s, background .15s;
}
.site-footer-red:hover {
  border-color: var(--azul);
  color: var(--azul);
  background: color-mix(in srgb, var(--azul) 8%, transparent);
}
.site-footer-red-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .site-footer-redes { flex-wrap: wrap; }
  .site-footer-red   { flex: 1; justify-content: center; }
}

/* ── Accesibilidad: oculto visualmente pero visible para crawlers y lectores de pantalla ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Placeholder mapa bienvenida ── */
.mapa-bienvenida-placeholder {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  border-radius: 16px;
  margin: 16px 0;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  background-color: #1a3a5c;
}
/* Imagen de fondo como <img> real para que el navegador la descubra antes (mejor LCP) */
.mbp-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
/* Overlay suave para no distraer */
.mapa-bienvenida-placeholder::before {
  content: '';
  position: absolute; inset: 0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background: rgba(15, 23, 42, 0.55);
  z-index: 1;
}
.mbp-inner {
  position: relative; z-index: 2;
  text-align: center; padding: 40px 24px;
}
.mbp-icon  { font-size: 44px; margin-bottom: 12px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.mbp-titulo { font-size: 20px; font-weight: 700; color: #fff; margin: 0 0 6px; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.mbp-sub    { font-size: 14px; color: rgba(255,255,255,.65); margin: 0 0 22px; }
.mbp-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: white; color: #1d4ed8;
  border: none; border-radius: 10px;
  padding: 12px 26px; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: opacity .15s, transform .15s;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.mbp-btn:hover { opacity: .92; transform: translateY(-2px); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   MEJORAS APP NATIVA
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 1. Prevenir zoom en inputs en iOS (font-size < 16px dispara zoom) ─────── */
/* Usamos la media query -webkit-touch-callout que solo aplica en Safari iOS */
@supports (-webkit-touch-callout: none) {
  input, select, textarea {
    font-size: max(16px, 1em) !important;
  }
}

/* ── 2. Deshabilitar selección de texto en elementos interactivos ──────────── */
button,
.card,
.tab,
.pf-opcion,
.marca-chip,
.fav-item,
.ranking-fila,
.marker-pin,
.btn-repostar,
.btn-electrico-hero,
.btn-horario,
.sugerencia-item,
.historial-item {
  -webkit-user-select: none;
  user-select: none;
}

/* ── 3. Eliminar cursor de texto en tarjetas ───────────────────────────────── */
.card,
.fav-item,
.ranking-fila {
  cursor: pointer;
}

/* ── 4. Scroll con inercia nativa en listas ────────────────────────────────── */
.grid-lista,
.lista-resultados,
#lista {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* ── 6. Shimmer mejorado para skeletons ────────────────────────────────────── */
/* Sobreescribe el shimmer básico existente con un gradiente viajero */
@keyframes shimmer {
  0%   { background-position: -400px 0 }
  100% { background-position:  400px 0 }
}
.skeleton .sk-logo,
.skeleton .sk-h {
  background: linear-gradient(
    90deg,
    var(--g200) 25%,
    var(--g100) 50%,
    var(--g200) 75%
  );
  background-size: 800px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
body.dark .skeleton .sk-logo,
body.dark .skeleton .sk-h {
  background: linear-gradient(
    90deg,
    #1e293b 25%,
    #263548 50%,
    #1e293b 75%
  );
  background-size: 800px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

/* ── 7. Tap highlight eliminado (el azul feo de Android al tocar) ──────────── */
* {
  -webkit-tap-highlight-color: transparent;
}

/* ── 8. Bottom sheet arrastrable — handle visual ───────────────────────────── */
/* Reutilizable por cualquier bottom sheet de la app */
.sp-sheet-handle {
  width: 40px;
  height: 4px;
  background: var(--g300);
  border-radius: 99px;
  margin: 10px auto 6px;
  flex-shrink: 0;
  cursor: grab;
}
.sp-sheet-handle:active { cursor: grabbing }

/* ── 9. Swipe tabs — indicador animado ─────────────────────────────────────── */
/* El subrayado de la tab activa se mueve con transición cuando se desliza */
.tabs {
  position: relative;
}
.tab {
  position: relative;
  transition: color 0.2s ease;
}
/* Indicador deslizante bajo la tab activa */
.tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--azul);
  border-radius: 99px;
  transition: left 0.25s ease, right 0.25s ease;
}

/* ── 10. Safe area insets — respeta el notch y la home bar de iOS ──────────── */
.site-footer {
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
header {
  padding-top: calc(20px + env(safe-area-inset-top, 0px));
}

/* ── Botón compartir en tarjeta ────────────────────────────────────────────── */
.btn-compartir-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--g400);
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
  -webkit-user-select: none;
  user-select: none;
}
.btn-compartir-card:hover {
  color: var(--azul);
  background: rgba(37, 99, 235, 0.07);
}
body.dark .btn-compartir-card:hover {
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.12);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   APP NATIVA v2
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Tab bar inferior ───────────────────────────────────────────────────────── */
#sp-tabbar {
  display: none; /* solo móvil — JS lo activa */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 800;
  background: var(--blanco);
  border-top: 1px solid var(--g200);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.92);
}
body.dark #sp-tabbar {
  background: rgba(15,23,42,0.92);
  border-top-color: var(--g200);
}
.sp-tabbar-inner {
  display: flex;
  align-items: stretch;
  height: 68px;
}
.sp-tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  background: transparent;
  color: var(--g400);
  font-size: 12px;
  font-weight: 600;
  font-family: "DM Sans", sans-serif;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  position: relative;
}
.sp-tabbar-item svg {
  width: 26px; height: 26px;
  stroke-width: 2;
  transition: transform 0.15s;
}
.sp-tabbar-item.active {
  color: var(--azul);
}
.sp-tabbar-item.active svg {
  transform: translateY(-1px);
}
/* Punto indicador bajo el icono activo */
.sp-tabbar-item.active::after {
  content: '';
  position: absolute;
  bottom: 6px;
  width: 4px; height: 4px;
  background: var(--azul);
  border-radius: 99px;
}
/* Feedback táctil inmediato */
.sp-tabbar-item:active svg {
  transform: scale(0.88) translateY(-1px);
}
body.dark .sp-tabbar-item { color: var(--g400) }
body.dark .sp-tabbar-item.active { color: #93c5fd }
body.dark .sp-tabbar-item.active::after { background: #93c5fd }

/* Espacio para que el contenido no quede bajo la tab bar */
@media (max-width: 768px) {
  body.has-tabbar main,
  body.has-tabbar .main-content,
  body.has-tabbar .detalle-main,
  body.has-tabbar .com-main,
  body.has-tabbar .marcas-main,
  body.has-tabbar .acerca-main,
  body.has-tabbar .ruta-main {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
  body.has-tabbar .site-footer {
    margin-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  }
  #sp-tabbar { display: block }
}

/* ── Active states táctiles — highlight instantáneo sin delay ──────────────── */
.card.sp-touching,
.fav-item.sp-touching,
.ranking-fila.sp-touching {
  background: var(--g100) !important;
  transition: background 0s !important;
}
body.dark .card.sp-touching,
body.dark .fav-item.sp-touching,
body.dark .ranking-fila.sp-touching {
  background: #1e293b !important;
}

/* ── Long press context menu ────────────────────────────────────────────────── */
#sp-context-menu {
  position: fixed;
  z-index: 9000;
  background: var(--blanco);
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.1);
  min-width: 220px;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.92);
  transform-origin: top left;
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
#sp-context-menu.visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: all;
}
body.dark #sp-context-menu {
  background: #1e293b;
  box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}
.sp-ctx-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--texto);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: "DM Sans", sans-serif;
  transition: background 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.sp-ctx-item:not(:last-child) {
  border-bottom: 1px solid var(--g200);
}
.sp-ctx-item:active,
.sp-ctx-item:hover {
  background: var(--g100);
}
.sp-ctx-item svg {
  flex-shrink: 0;
  color: var(--g500);
}
.sp-ctx-item.destructive { color: #ef4444 }
.sp-ctx-item.destructive svg { color: #ef4444 }
body.dark .sp-ctx-item { color: var(--texto) }
body.dark .sp-ctx-item:hover { background: #263548 }
body.dark .sp-ctx-item:not(:last-child) { border-color: var(--g200) }
#sp-context-overlay {
  position: fixed;
  inset: 0;
  z-index: 8999;
  display: none;
}
#sp-context-overlay.visible { display: block }

/* ── Rubber band scroll ─────────────────────────────────────────────────────── */
/* Efecto de rebote elástico al llegar al final de la lista en Android */
.grid-lista,
#lista {
  overscroll-behavior-y: contain;
}
/* La clase sp-rubber se añade/quita por JS para el efecto visual */
#lista.sp-rubber-top {
  transform: translateY(var(--rubber-offset, 0px));
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Swipe back — indicador visual ──────────────────────────────────────────── */
#sp-swipeback-hint {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%) translateX(-100%);
  z-index: 7000;
  background: rgba(0,0,0,0.55);
  color: white;
  border-radius: 0 12px 12px 0;
  padding: 10px 14px 10px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  font-family: "DM Sans", sans-serif;
  transition: transform 0.2s ease;
  pointer-events: none;
  white-space: nowrap;
}
#sp-swipeback-hint.visible {
  transform: translateY(-50%) translateX(0);
}

/* ── Bottom sheet con inercia — handle draggable ───────────────────────────── */
.evol-sheet {
  touch-action: none; /* gestionamos nosotros el drag */
}
.evol-handle-wrap {
  touch-action: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   AJUSTES DE INTERFAZ (iconos SVG, formulario, slider, botones rápidos)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Botón de ruta: sin borde nativo de <button> ── */
.btn-de-ruta { border:none; font:inherit; cursor:pointer }
.btn-de-ruta:focus:not(:focus-visible) { outline:none }

/* ── Iconos SVG en botones de cabecera ── */
.btn-header svg { flex-shrink:0 }

/* ── Móvil: botones rápidos compactos, en dos columnas ── */
@media (max-width:480px) {
  .btns-rapidos { grid-template-columns:1fr 1fr; gap:8px }
  .btn-repostar-ahora, .btn-de-ruta {
    flex-direction:column; align-items:flex-start; gap:6px; padding:12px;
  }
  .btn-repostar-sub { display:none }
  .btn-repostar-titulo { font-size:14px; line-height:1.2 }
}

/* ── Alineación del formulario ── */
.campo label { line-height:16px }
.campo input[type="text"], .campo select { height:44px }
.btn-buscar { height:44px }

/* En escritorio el botón de horario no debe aplastar el slider */
@media (min-width:926px) {
  .radio-horario-row .btn-horario { width:auto; flex:0 0 auto }
  .radio-horario-row input[type="range"] { flex:1; min-width:110px }
}

/* ── Slider de radio: pista clara y tirador visible ── */
#radio {
  -webkit-appearance:none; appearance:none;
  height:6px; margin:0; border-radius:99px;
  background:var(--g200); accent-color:var(--verde);
}
#radio::-webkit-slider-thumb {
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--verde); border:3px solid #fff;
  box-shadow:0 1px 4px rgba(15,23,42,.35);
}
#radio::-moz-range-thumb {
  width:18px; height:18px; border-radius:50%;
  background:var(--verde); border:3px solid #fff;
  box-shadow:0 1px 4px rgba(15,23,42,.35);
}

/* ── Placeholder del mapa: más contraste ── */
.mapa-bienvenida-placeholder::before { background:rgba(15,23,42,.65) }
.mbp-icon { color:#fff; display:flex; justify-content:center }
.mbp-sub  { color:rgba(255,255,255,.88) }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   REDISEÑO v2 — paleta unificada, formulario colapsable, banner de resultados,
   tarjetas más compactas y accesibles
   Criterio de color: verde = acción principal y estado activo ·
   azul = navegación/información secundaria · morado = solo eléctrico
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Estado activo en verde (pestañas Lista/Mapa y barra inferior) ── */
.tab:hover { border-color:var(--verde-light); color:#15803d }
.tab.active { background:#15803d; color:#fff; border-color:#15803d }
.tab.active::after { background:#15803d }
body.dark .tab.active { background:#15803d; color:#fff; border-color:#15803d }
.sp-tabbar-item.active { color:#15803d }
.sp-tabbar-item.active::after { background:#15803d }
body.dark .sp-tabbar-item.active { color:#86efac }
body.dark .sp-tabbar-item.active::after { background:#86efac }
.campo input:focus, .campo select:focus { border-color:var(--verde); background:var(--blanco) }

/* ── Cabecera ── */
.brand-sub { opacity:.85 }
@media (max-width:925px) { .brand-sub { font-size:11px } }
/* Con la barra inferior activa, "Favoritos" ya está abajo: se quita el duplicado de la cabecera */
@media (max-width:768px) { body.has-tabbar #btn-favs { display:none } }

/* ── Botones rápidos (eléctrico / ruta): tono suave, sin degradados ── */
.btn-repostar-ahora, .btn-de-ruta { box-shadow:none; padding:11px 14px; min-height:52px }
.btn-de-ruta { background:#eff6ff; color:#1e3a8a; border:1.5px solid #bfdbfe }
.btn-de-ruta svg { color:#2563eb }
.btn-de-ruta:hover { background:#dbeafe; opacity:1; transform:none }
body.dark .btn-de-ruta { background:rgba(59,130,246,.14); border-color:rgba(147,197,253,.35); color:#bfdbfe; box-shadow:none }
body.dark .btn-de-ruta svg { color:#93c5fd }
body.dark .btn-de-ruta:hover { background:rgba(59,130,246,.24) }
@media (max-width:480px) {
  .btn-repostar-ahora, .btn-de-ruta { flex-direction:row; align-items:center; gap:10px; padding:10px 12px; min-height:48px }
  .btn-repostar-titulo { font-size:13px }
}

/* ── Campo de ubicación: icono SVG, botón GPS más grande y foco accesible ── */
.search-panel { scroll-margin-top:12px }
.ubicacion-icono { position:absolute; left:13px; top:0; bottom:0; display:flex; align-items:center; color:var(--verde); pointer-events:none }
.campo .ubicacion-wrap input[type="text"] { padding-left:38px; padding-right:48px }
.btn-geo { width:44px; color:var(--g700); -webkit-tap-highlight-color:transparent }
.btn-geo:hover { color:#15803d }
.btn-geo:focus { outline:none }
.btn-geo:focus-visible { outline:2px solid var(--verde); outline-offset:-5px; border-radius:10px }

/* ── Slider de radio con tramo recorrido en verde (JS actualiza --p) ── */
#radio {
  --p:37.5%;
  background:linear-gradient(to right, var(--verde) 0, var(--verde) var(--p), var(--g200) var(--p), var(--g200) 100%);
}
#radio::-moz-range-track { background:transparent }
.radio-wrap { flex:1 1 auto; min-width:60px }
.radio-escala { display:none }
@media (min-width:926px) { .radio-wrap { min-width:110px } }

/* ── Botón de horario: etiqueta propia (solo móvil) ── */
.btn-horario-lbl { display:none }

/* ── Panel de búsqueda colapsable y "Más opciones" (solo móvil/tablet) ── */
.search-resumen, .campo-mas-opciones { display:none }
.btn-mas-opciones {
  display:flex; align-items:center; justify-content:center; gap:6px; width:100%; min-height:40px;
  background:transparent; border:none; color:#15803d; font-family:"DM Sans",sans-serif;
  font-size:13px; font-weight:700; -webkit-tap-highlight-color:transparent;
}
.btn-mas-opciones svg { transition:transform .2s }
.search-panel.opciones-abiertas .btn-mas-opciones svg { transform:rotate(180deg) }
body.dark .btn-mas-opciones { color:#86efac }

@media (max-width:925px) {
  .campo-combustible { grid-column:1 / -1 }
  .search-panel.opciones-abiertas .campo-combustible { grid-column:auto }
  .search-panel:not(.opciones-abiertas) .campo-opcional { display:none }
  .campo-mas-opciones { display:flex; grid-column:1 / -1; margin-top:-4px }

  .radio-escala { display:flex; justify-content:space-between; margin-top:6px; font-size:10px; font-weight:600; color:var(--g500) }
  .btn-horario { justify-content:flex-start }
  .btn-horario-lbl { display:inline; font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--g500) }
  #btn-horario-texto { margin-left:auto }

  .search-panel.colapsado { padding:6px 8px }
  .search-panel.colapsado .btns-rapidos,
  .search-panel.colapsado .search-divider,
  .search-panel.colapsado .search-grid { display:none }
  .search-panel.colapsado .search-resumen { display:flex }

  #estado { margin-bottom:12px }
}

.search-resumen {
  width:100%; align-items:center; gap:10px; min-height:48px; padding:6px 4px 6px 8px;
  border:none; background:transparent; color:var(--texto); font:inherit; text-align:left;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.search-resumen-icono { display:flex; color:var(--verde); flex-shrink:0 }
.search-resumen-texto { flex:1; min-width:0; font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.search-resumen-texto span { color:var(--g500); font-weight:500 }
.search-resumen-editar {
  display:inline-flex; align-items:center; gap:6px; flex-shrink:0; padding:8px 14px; border-radius:99px;
  background:var(--g100); border:1.5px solid var(--g200); font-size:13px; font-weight:700; color:var(--g700);
}

/* ── Banner de resultados compacto (iconos SVG, acciones solo con icono) ── */
.msg.msg-res { padding:10px 10px 10px 14px }
.res-banner { display:flex; align-items:center; gap:10px; width:100% }
.res-texto { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px }
.res-titulo { display:flex; align-items:flex-start; gap:8px; font-size:14px; font-weight:500; line-height:1.3 }
.res-ico { display:flex; color:#16a34a; flex-shrink:0; margin-top:1px }
.res-fecha { display:flex; align-items:center; gap:6px; font-size:12px; opacity:.85; padding-left:24px }
.res-fecha svg { width:12px; height:12px; flex-shrink:0 }
.res-acciones { display:flex; gap:6px; flex-shrink:0 }
body .msg-res .btn-compartir-busqueda,
body .msg-res .btn-guardar-busqueda {
  width:40px; height:40px; padding:0; margin:0; justify-content:center; border-radius:10px;
  background:rgba(255,255,255,.65); color:#166534; border:1px solid rgba(22,101,52,.25);
  opacity:1; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
body .msg-res .btn-compartir-busqueda:hover,
body .msg-res .btn-guardar-busqueda:hover { background:rgba(255,255,255,.95) }
body .msg-res .btn-guardar-busqueda.guardada { background:#166534; color:#fff; border-color:#166534 }
body.dark .msg-res .res-ico { color:#86efac }
body.dark .msg-res .btn-compartir-busqueda,
body.dark .msg-res .btn-guardar-busqueda { background:rgba(255,255,255,.08); color:#bbf7d0; border-color:rgba(134,239,172,.3) }
body.dark .msg-res .btn-compartir-busqueda:hover,
body.dark .msg-res .btn-guardar-busqueda:hover { background:rgba(255,255,255,.16) }
body.dark .msg-res .btn-guardar-busqueda.guardada { background:rgba(22,163,74,.45); color:#fff; border-color:rgba(134,239,172,.5) }

/* ── Tarjetas: acciones del mismo tamaño (44 px táctil), mejor contraste ── */
.card { --btn-card:44px }
.card-actions { gap:6px }
.btn-fav-card, .btn-sel-card, .btn-nav-card, .btn-compartir-card {
  width:var(--btn-card); height:var(--btn-card); border-radius:10px;
}
.btn-compartir-card { border:1.5px solid var(--g200); background:var(--g100); color:var(--g500) }
.btn-compartir-card:hover { color:var(--azul); background:var(--g200) }
.card-dir-loc { color:var(--g500) }
.card-comb { color:var(--g500) }
.badge-top { display:inline-flex; align-items:center; gap:5px }
.badge-cerca {
  position:absolute; top:-10px; right:16px; display:inline-flex; align-items:center; gap:5px;
  background:var(--blanco); color:var(--azul); border:1.5px solid var(--azul-light);
  font-size:11px; font-weight:700; padding:2px 10px; border-radius:99px; letter-spacing:.3px;
}
body.dark .badge-cerca { color:#93c5fd; border-color:rgba(147,197,253,.5) }
.card-ahorro { font-size:12px; font-weight:600; color:#15803d; margin-top:4px }
body.dark .card-ahorro { color:#86efac }
.pf-opcion svg { flex-shrink:0 }
@media (max-width:360px) {
  .card { --btn-card:40px }
  .card-precio { font-size:36px }
}

/* ── Correcciones móvil v2.1 ── */
@media (max-width:925px) {
  /* El slider ocupa todo el ancho: en columna, el contenedor lo estaba centrando y encogiendo */
  .radio-horario-row { align-items:stretch }
  .radio-horario-row .radio-wrap { align-self:stretch; width:100% }
  .radio-horario-row #radio { width:100% }
  /* Con una búsqueda hecha, los botones rápidos y su separador no vuelven a mostrarse (ni al pulsar "Editar") */
  .search-panel.con-busqueda .btns-rapidos,
  .search-panel.con-busqueda .search-divider { display:none }
}

/* ── Resumen de búsqueda en dos líneas (el radio ya no se corta) ── */
.search-resumen-texto { display:flex; flex-direction:column; gap:1px; white-space:normal }
.search-resumen-texto .rs-ubic { color:var(--texto); font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.search-resumen-texto .rs-det { color:var(--g500); font-size:12px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* ── Iconos de la tarjeta legibles en ambos temas ── */
.btn-fav-card { color:var(--texto) }

/* ── Modo oscuro v2.2 ── */
/* El precio lleva su color en línea (verde→naranja→rojo): se aclara solo en oscuro */
body.dark .card-precio { filter:brightness(1.3) }
body.dark .card-dist-inline { color:#93c5fd }
/* Navegar: contorno azul en vez de bloque brillante, para que mande el precio */
body.dark .btn-nav-card { background:transparent; border:1.5px solid #60a5fa; color:#93c5fd }
body.dark .btn-nav-card:hover { background:rgba(96,165,250,.15); opacity:1 }
/* Banner de resultados más sutil */
body.dark .msg.ok.msg-res { background:rgba(22,163,74,.14); border:1px solid rgba(134,239,172,.28); color:#bbf7d0 }

/* ── Móvil con barra inferior: Eléctrico y Ruta ya están abajo, se quitan del buscador ──
   Solo con la barra inferior activa (≤768px y nav.js la ha creado). En pantallas más
   grandes se mantienen los botones rápidos y su separador. */
@media (max-width:768px) {
  body.has-tabbar .btns-rapidos,
  body.has-tabbar .search-divider { display:none }
}

/* ── Pestañas de favoritos: una sola línea, sin cortar "Rutas EV" (inicio y resto de páginas) ── */
.favs-tabs { padding:0 8px; overflow-x:auto; scrollbar-width:none }
.favs-tabs::-webkit-scrollbar { display:none }
.favs-tab { flex:1 1 0; min-width:0; justify-content:center; white-space:nowrap; padding:14px 2px; gap:4px; font-size:12px }
.favs-tab svg { flex-shrink:0 }
.fav-item { cursor:default }
.favs-tab-count { padding:1px 5px; font-size:10.5px }

/* ═══════════ Menú lateral unificado (nav.js) ═══════════ */
/* ══════════════════════════════════════════════════════
   MENÚ LATERAL UNIFICADO — clases sp-menu-* (lo genera nav.js en todas las páginas)
   z-index por encima de los controles de Leaflet y de cualquier lupa/chip flotante
══════════════════════════════════════════════════════ */
#menu-movil-overlay {
  z-index: 3000;
  background: rgba(15, 23, 42, .55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: spMenuFade .2s ease;
}
@keyframes spMenuFade { from { opacity: 0 } to { opacity: 1 } }
.sp-menu {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(86vw, 320px);
  display: flex; flex-direction: column;
  background: var(--blanco);
  color: var(--texto);
  border-radius: 22px 0 0 22px;
  box-shadow: -8px 0 32px rgba(0, 0, 0, .3);
  overflow: hidden;
  animation: slideInRight .25s ease;
}
.sp-menu-head {
  display: flex; align-items: center; gap: 12px;
  padding: calc(20px + env(safe-area-inset-top, 0px)) 14px 18px 18px;
  background: linear-gradient(135deg, #1e3a8a 0%, #2748d6 100%);
  color: #fff;
  flex-shrink: 0;
}
.sp-menu-logo { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; background: rgba(255, 255, 255, .15) }
.sp-menu-marca { flex: 1; min-width: 0 }
.sp-menu-nombre { font: 800 18px "Inter", sans-serif; letter-spacing: -.2px; line-height: 1.15 }
.sp-menu-sub { margin-top: 2px; font-size: 12px; color: rgba(255, 255, 255, .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sp-menu-cerrar {
  width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(255, 255, 255, .3); border-radius: 50%;
  background: rgba(255, 255, 255, .15); color: #fff; cursor: pointer;
}
.sp-menu-nav { flex: 1; overflow-y: auto; padding: 6px 12px 12px; -webkit-overflow-scrolling: touch }
.sp-menu-sec {
  padding: 16px 8px 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase;
  color: var(--g400);
}
.sp-menu-item {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; margin-bottom: 2px;
  border: 0; border-radius: 14px; background: none;
  color: var(--texto); text-decoration: none; text-align: left;
  font: 600 15px "DM Sans", sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sp-menu-item:active { background: rgba(148, 163, 184, .16) }
.sp-menu-tile {
  width: 38px; height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px;
  background: var(--tb); color: var(--tf);
}
.sp-menu-txt { flex: 1; min-width: 0 }
.sp-menu-chev { flex-shrink: 0; color: var(--g400) }
.sp-menu-item.actual { background: rgba(22, 163, 74, .1); color: #15803d; font-weight: 700 }
body.dark .sp-menu-item.actual { background: rgba(34, 197, 94, .14); color: #86efac }
.sp-menu-aqui {
  padding: 3px 9px; border-radius: 99px;
  background: #16a34a; color: #fff;
  font-size: 11px; font-weight: 700;
}
.sp-t-verde   { --tb: #dcfce7; --tf: #15803d }
.sp-t-ambar   { --tb: #fef3c7; --tf: #b45309 }
.sp-t-azul    { --tb: #dbeafe; --tf: #1d4ed8 }
.sp-t-violeta { --tb: #ede9fe; --tf: #6d28d9 }
.sp-t-cian    { --tb: #cffafe; --tf: #0e7490 }
.sp-t-gris    { --tb: #f1f5f9; --tf: #475569 }
body.dark .sp-t-verde   { --tb: rgba(34, 197, 94, .16);  --tf: #86efac }
body.dark .sp-t-ambar   { --tb: rgba(245, 158, 11, .16); --tf: #fcd34d }
body.dark .sp-t-azul    { --tb: rgba(59, 130, 246, .18); --tf: #93c5fd }
body.dark .sp-t-violeta { --tb: rgba(139, 92, 246, .2);  --tf: #c4b5fd }
body.dark .sp-t-cian    { --tb: rgba(6, 182, 212, .16);  --tf: #67e8f9 }
body.dark .sp-t-gris    { --tb: rgba(148, 163, 184, .16); --tf: #cbd5e1 }
.sp-menu-pie {
  flex-shrink: 0;
  padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--g200);
}
.sp-switch {
  position: relative; flex-shrink: 0;
  width: 44px; height: 26px; border-radius: 99px;
  background: #cbd5e1; transition: background .2s;
}
.sp-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: transform .2s;
}
body.dark .sp-switch { background: #16a34a }
body.dark .sp-switch::after { transform: translateX(18px) }
.sp-t-rosa   { --tb: #fce7f3; --tf: #be185d }
.sp-t-indigo { --tb: #e0e7ff; --tf: #4338ca }
.sp-t-rojo   { --tb: #fee2e2; --tf: #dc2626 }
body.dark .sp-t-rosa   { --tb: rgba(236, 72, 153, .16); --tf: #f9a8d4 }
body.dark .sp-t-indigo { --tb: rgba(99, 102, 241, .2);  --tf: #a5b4fc }
body.dark .sp-t-rojo   { --tb: rgba(239, 68, 68, .18);  --tf: #fca5a5 }

/* El menú (⋮) está disponible también en escritorio: ahí vive el cambio de tema.
   Especificidad mayor que el `.btn-solo-movil {display:none !important}` que repite cada página. */
.btn-menu-movil.btn-solo-movil { display: flex !important }
/* El botón de modo oscuro de la cabecera sobra cuando la página ya tiene el menú (:has) */
.header-actions:has(.btn-menu-movil) .btn-dark-toggle { display: none !important }

/* Menos aire entre el contenido y el footer (la barra inferior ya se reserva en el footer) */
.main-content, .detalle-main { margin-bottom: 24px }
.site-footer { margin-top: 24px }

@media (max-width: 768px) {
  body.has-tabbar main,
  body.has-tabbar .main-content,
  body.has-tabbar .detalle-main,
  body.has-tabbar .com-main,
  body.has-tabbar .marcas-main,
  body.has-tabbar .acerca-main,
  body.has-tabbar .ruta-main { padding-bottom: 0 }

  /* el margin-bottom del footer ya incluye env(safe-area-inset-bottom) */
  body.has-tabbar .site-footer { padding-bottom: 28px }
}

/* Barra de carga entre páginas */
#sp-navbar {
  position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0;
  height: 3px; z-index: 10000; pointer-events: none; opacity: 0;
}
#sp-navbar::before {
  content: ""; position: absolute; inset: 0;
  transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, #22c55e, #86efac, #fff);
  box-shadow: 0 0 8px rgba(134, 239, 172, .7);
  border-radius: 0 2px 2px 0;
}
#sp-navbar.activo { opacity: 1 }
#sp-navbar.activo::before { animation: spNavbar 8s cubic-bezier(.1, .6, .2, 1) forwards }
@keyframes spNavbar {
  0%   { transform: scaleX(0) }
  30%  { transform: scaleX(.6) }
  100% { transform: scaleX(.92) }
}

/* Icono de la barra inferior que acabas de tocar */
.sp-tabbar-item.sp-cargando svg { animation: spRespira .7s ease-in-out infinite alternate }
@keyframes spRespira { from { opacity: 1; transform: scale(1) } to { opacity: .35; transform: scale(.88) } }

/* ── Ficha de gasolinera con texto del servidor (.ssr-ficha) ───────────────── */
.ssr-ficha { max-width:900px; margin:0 auto; padding:8px 16px 8px; font-size:15px; line-height:1.75; color:#475569 }
.ssr-ficha h2 { font-family:"Inter",sans-serif; font-size:19px; font-weight:800; line-height:1.3; margin:0 0 12px; color:var(--texto) }
.ssr-ficha p { margin:0 0 16px }
.ssr-ficha .ficha-tabla { overflow-x:auto; margin:4px 0 14px; background:var(--blanco); border:1.5px solid var(--g200); border-radius:var(--radius-sm) }
.ssr-ficha table { width:100%; border-collapse:collapse; font-size:13.5px; line-height:1.45 }
.ssr-ficha th, .ssr-ficha td { padding:11px 12px; text-align:left; vertical-align:top }
.ssr-ficha th { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--g500); background:var(--g100) }
.ssr-ficha td { border-top:1px solid var(--g200) }
.ssr-ficha td:first-child { font-weight:600; color:var(--texto); white-space:nowrap }
.ssr-ficha td strong { color:var(--texto); white-space:nowrap }
.ssr-ficha .sub { display:block; font-size:12px; color:var(--g400) }
.ssr-ficha .dif-baja { color:#15803d; font-weight:600 }
.ssr-ficha .dif-sube { color:#b45309; font-weight:600 }
.ssr-ficha .ficha-nota { font-size:12.5px; line-height:1.6; color:var(--g400) }
.ssr-ficha .ficha-ver { display:flex; flex-direction:column; gap:8px; margin-top:22px }
.ssr-ficha .ficha-ver-t { margin:0 0 2px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--g500) }
.ssr-ficha .ficha-enlace {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px; background:var(--blanco); border:1.5px solid var(--g200); border-radius:10px;
  color:var(--azul); font-weight:600; font-size:14px; line-height:1.4; text-decoration:none;
  transition:border-color .15s, background .15s;
}
.ssr-ficha .ficha-enlace:hover { border-color:var(--azul-light); background:var(--azul-bg) }
.ssr-ficha .ficha-enlace:focus-visible { outline:2px solid var(--azul); outline-offset:2px }
.ssr-ficha .ficha-enlace svg { flex-shrink:0 }
/* Móvil: la tabla de 4 columnas tiene que caber sin cortarse por la derecha */
@media (max-width:480px) {
  .ssr-ficha table { font-size:13px }
  .ssr-ficha th, .ssr-ficha td { padding:10px 8px }
  .ssr-ficha th { font-size:10.5px; letter-spacing:.02em }
  .ssr-ficha td:first-child { white-space:normal }
}
body.dark .ssr-ficha { color:#cbd5e1 }
body.dark .ssr-ficha .dif-baja { color:#4ade80 }
body.dark .ssr-ficha .dif-sube { color:#fbbf24 }
body.dark .ssr-ficha .ficha-enlace { color:#93c5fd }
body.dark .ssr-ficha .ficha-enlace:hover { background:rgba(59,130,246,.12); border-color:#3b82f6 }
/* Con la ficha debajo del mapa ya no hace falta la reserva de 96 px de la barra inferior:
   la reserva la hace el pie de página, que va después de la ficha */
body.detalle-page:has(.ssr-ficha) .detalle-main { padding-bottom:0 }