/* ==========================================================================
   GASOLINERAS — panel de precios en directo (solo se carga en /gasolineras).
   Lenguaje: instrumento financiero sobrio. Cifras tabulares, tonos desaturados (salvia / grafito / arcilla),
   controles segmentados con "pulgar" deslizante y tarjetas físicas (elevación al pasar el ratón).
   ========================================================================== */
.fuel-board, .fuel-sheet {
  /* Escala de precio relativa: ganga · precio medio · por encima (nada de verdes/rojos saturados) */
  --tier-low: #6f9a85;      --tier-low-bg: rgb(111 154 133 / 0.16);  --tier-low-ink: #3b6a54;
  --tier-mid: #8a94a0;      --tier-mid-bg: rgb(138 148 160 / 0.16);  --tier-mid-ink: #5a6571;
  --tier-high: #b98369;     --tier-high-bg: rgb(185 131 105 / 0.17); --tier-high-ink: #8f553b;
  --ink-fill: var(--foreground);
  /* Parpadeo del precio al actualizarse: ajusta duración y colores aquí */
  --flash-ms: 1.4s;
  --flash-down: rgb(111 154 133 / 0.38);
  --flash-up: rgb(185 131 105 / 0.38);
}
.dark .fuel-board, .dark .fuel-sheet {
  --tier-low: #86b39d;      --tier-low-bg: rgb(134 179 157 / 0.16);  --tier-low-ink: #a6d1bb;
  --tier-mid: #98a3af;      --tier-mid-bg: rgb(152 163 175 / 0.14);  --tier-mid-ink: #b3bcc6;
  --tier-high: #cf9a80;     --tier-high-bg: rgb(207 154 128 / 0.16); --tier-high-ink: #e6b49c;
}

/* ---------- Cabecera + insignia en directo ---------- */
.fuel-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1rem; }
.fuel-head h1 { margin: 0; }
.fuel-head p { margin: 0.25rem 0 0; color: var(--muted-foreground); }
.fuel-head[hidden], .fuel-live[hidden] { display: none; }

.fuel-live {
  display: inline-flex; align-items: center; gap: 0.55rem;
  min-height: 2rem; padding: 0 0.85rem 0 0.7rem; border-radius: 9999px;
  font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--tier-mid-ink); background: var(--tier-mid-bg);
}
.fuel-live-dot { position: relative; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; flex: none; }
.fuel-live[data-level='live'] { color: var(--tier-low-ink); background: var(--tier-low-bg); }
.fuel-live[data-level='old'] { color: #8a6a2c; background: rgb(196 150 70 / 0.16); }
.dark .fuel-live[data-level='old'] { color: #dcbc7d; }
.fuel-live[data-level='stale'] { color: var(--tier-high-ink); background: var(--tier-high-bg); }
.fuel-live[data-level='live'] .fuel-live-dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; background: currentColor;
  animation: fuelPulse 2.2s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
@keyframes fuelPulse { 0% { transform: scale(1); opacity: 0.55; } 80%, 100% { transform: scale(3.2); opacity: 0; } }

/* ---------- Barra de control ---------- */
.fuel-bar { display: flex; flex-direction: column; gap: 0.9rem; padding: clamp(0.9rem, 0.7rem + 1vw, 1.4rem); border-radius: 1.25rem; background: var(--card); box-shadow: var(--ring), var(--lift-1); }
.fuel-where { display: grid; gap: 0.6rem; }
@media (min-width: 40rem) { .fuel-where { grid-template-columns: minmax(0, 1fr) auto; } }
.fuel-where-field {
  position: relative; display: flex; align-items: center; gap: 0.6rem;
  min-height: 3rem; padding: 0 1rem; border-radius: 9999px;
  background: var(--card-sunken); box-shadow: inset 0 0 0 1px var(--border);
  transition: box-shadow 0.18s var(--ease-out), background-color 0.18s;
}
.fuel-where-field:focus-within { background: var(--card); box-shadow: 0 0 0 1.5px rgb(var(--a-500)), 0 0 0 5px rgb(var(--a-500) / 0.14); }
.fuel-where-field > svg { color: var(--muted-foreground); flex: none; }
.fuel-where-field input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 1rem; color: var(--foreground); }
.fuel-where-field input::placeholder { color: var(--muted-foreground); }
.fuel-locate-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0 1.2rem; border-radius: 9999px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; color: var(--foreground);
  background: var(--card); box-shadow: var(--ring), 0 1px 2px rgb(15 23 42 / 0.06);
  transition-property: box-shadow, transform, background-color; transition-duration: 0.18s; transition-timing-function: var(--ease-out);
}
.fuel-locate-btn:hover { box-shadow: 0 0 0 1px rgb(var(--a-500) / 0.6), 0 2px 8px -2px rgb(var(--a-500) / 0.3); }
.fuel-locate-btn:active { transform: scale(var(--press)); }
.fuel-locate-btn svg { color: rgb(var(--a-500)); }
.fuel-location-label { margin: -0.3rem 0 0; padding-left: 0.4rem; font-size: 0.82rem; color: var(--muted-foreground); }
.fuel-location-label[hidden], .fuel-controls[hidden] { display: none; }

.fuel-place-list {
  position: absolute; inset: calc(100% + 0.45rem) 0 auto 0; z-index: 30;
  margin: 0; padding: 0.35rem; list-style: none; max-height: 18rem; overflow-y: auto;
  background: var(--card); border-radius: 1rem; box-shadow: 0 0 0 1px var(--border-strong), var(--lift-2);
}
.fuel-place-list[hidden] { display: none; }
.fuel-place-list li { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; min-height: 2.75rem; padding: 0 0.8rem; border-radius: 0.65rem; cursor: pointer; }
.fuel-place-list li:hover, .fuel-place-list li:focus-visible { background: var(--muted); outline: none; }
.fuel-place-list small { color: var(--muted-foreground); white-space: nowrap; }
.fuel-place-empty { cursor: default !important; color: var(--muted-foreground); font-size: 0.88rem; }

.fuel-controls { display: flex; flex-direction: column; gap: 0.8rem; }

/* Píldoras (combustible y marca): una fila deslizable, sin <select> */
.fuel-pills { display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding: 0.15rem 0.1rem; margin-inline: -0.1rem; }
.fuel-pills::-webkit-scrollbar { display: none; }
@media (max-width: 39.99rem) { .fuel-pills { -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); } }
.fuel-pill {
  flex: none; scroll-snap-align: start;
  min-height: 2.5rem; padding: 0 1rem; border-radius: 9999px; white-space: nowrap;
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; letter-spacing: -0.005em; color: var(--muted-foreground);
  background: var(--card-sunken); box-shadow: inset 0 0 0 1px var(--border);
  transition-property: color, background-color, box-shadow, transform; transition-duration: 0.18s; transition-timing-function: var(--ease-out);
}
.fuel-pill small { margin-left: 0.2rem; font-weight: 500; opacity: 0.65; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .fuel-pill:hover { color: var(--foreground); box-shadow: inset 0 0 0 1px var(--border-strong); } }
.fuel-pill:active { transform: scale(var(--press)); }
.fuel-pill[aria-checked='true'] { color: var(--card); background: var(--ink-fill); box-shadow: 0 6px 14px -8px rgb(0 0 0 / 0.5); }

/* Control segmentado con pulgar deslizante */
.fuel-seg { position: relative; display: inline-flex; padding: 0.25rem; border-radius: 0.95rem; background: var(--card-sunken); box-shadow: inset 0 0 0 1px var(--border); max-width: 100%; }
.fuel-seg-thumb { position: absolute; top: 0.25rem; bottom: 0.25rem; left: 0; width: 0; border-radius: 0.7rem; background: var(--card); box-shadow: 0 0 0 1px var(--border), 0 1px 3px rgb(15 23 42 / 0.14); opacity: 0; pointer-events: none; will-change: transform, width; }
.fuel-seg-thumb.is-ready { opacity: 1; }
.fuel-seg button {
  position: relative; z-index: 1; flex: 1 1 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 2.5rem; padding: 0 0.95rem; border-radius: 0.7rem; white-space: nowrap;
  font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--muted-foreground);
  transition-property: color, transform; transition-duration: 0.16s; transition-timing-function: var(--ease-out);
}
.fuel-seg button:active { transform: scale(var(--press)); }
.fuel-seg button[aria-checked='true'] { color: var(--foreground); }
.fuel-seg:not(:has(.is-ready)) button[aria-checked='true'] { background: var(--card); box-shadow: 0 0 0 1px var(--border); }

.fuel-controls-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; }
.fuel-controls-row > .fuel-seg { flex: 1 1 auto; }
@media (min-width: 40rem) { .fuel-controls-row > .fuel-seg { flex: 0 1 auto; } }
.fuel-more-btn { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.85rem; padding: 0 1rem; border-radius: 0.95rem; font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--foreground); background: var(--card-sunken); box-shadow: inset 0 0 0 1px var(--border); transition: transform 0.16s var(--ease-out), box-shadow 0.16s; }
.fuel-more-btn:active { transform: scale(var(--press)); }
.fuel-more-btn[aria-expanded='true'] { box-shadow: inset 0 0 0 1px var(--border-strong); }
.fuel-more-count { display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 700; color: var(--card); background: var(--ink-fill); }
.fuel-more-count[hidden] { display: none; }

.fuel-field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.fuel-field > span:first-child { font-size: 0.78rem; font-weight: 600; color: var(--muted-foreground); }
.fuel-price-input { display: flex; align-items: center; gap: 0.5rem; min-height: 2.85rem; padding: 0 0.95rem; border-radius: 0.95rem; background: var(--card-sunken); box-shadow: inset 0 0 0 1px var(--border); max-width: 11rem; transition: box-shadow 0.18s; }
.fuel-price-input:focus-within { background: var(--card); box-shadow: 0 0 0 1.5px rgb(var(--a-500)), 0 0 0 5px rgb(var(--a-500) / 0.14); }
.fuel-price-input input { width: 100%; min-width: 0; padding: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 1rem; font-variant-numeric: tabular-nums; color: var(--foreground); }
.fuel-price-input input::placeholder { color: var(--muted-foreground); }
.fuel-price-input em { font-style: normal; font-size: 0.8rem; font-weight: 600; color: var(--muted-foreground); }

/* ---------- Avisos y estados ---------- */
.fuel-notice { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; border-radius: 0.95rem; font-size: 0.88rem; font-weight: 500; color: #8a6a2c; background: rgb(196 150 70 / 0.16); }
.dark .fuel-notice { color: #dcbc7d; }
.fuel-notice.is-stale { color: var(--tier-high-ink); background: var(--tier-high-bg); }
.fuel-notice[hidden], .fuel-board-summary[hidden], .fuel-results-head[hidden], .fuel-state[hidden], .fuel-list[hidden], .fuel-map-wrap[hidden], .fuel-footnote[hidden] { display: none; }
.fuel-state { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: clamp(1.5rem, 1rem + 3vw, 3rem) 1rem; text-align: center; color: var(--muted-foreground); }
.fuel-state h2 { margin: 0; color: var(--foreground); }
.fuel-state p { margin: 0; max-width: 34rem; }
.fuel-state.is-error svg { color: var(--tier-high); }
.fuel-state.is-loading { align-items: stretch; padding: 0; }
.fuel-skeleton { height: 9rem; border-radius: 1.15rem; background: linear-gradient(100deg, var(--card-sunken) 30%, var(--muted) 50%, var(--card-sunken) 70%); background-size: 200% 100%; animation: fuelShimmer 1.4s linear infinite; }
@keyframes fuelShimmer { to { background-position: -200% 0; } }

/* ---------- Resumen: mejor precio + reparto ---------- */
.fuel-board-summary { display: grid; gap: 1.25rem; padding: clamp(1.1rem, 0.8rem + 1.4vw, 1.9rem); border-radius: 1.4rem; background: var(--card); box-shadow: var(--ring), var(--lift-1); }
@media (min-width: 56rem) { .fuel-board-summary { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2.5rem; } }
.fuel-best-block { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; }
.fuel-best-label { font-size: 0.85rem; font-weight: 600; color: var(--muted-foreground); }
.fuel-best-row { display: flex; align-items: baseline; gap: 0.4rem; }
.fuel-best-price { font-family: var(--font-display); font-size: clamp(2.6rem, 1.8rem + 4vw, 4.2rem); font-weight: 700; letter-spacing: -0.04em; line-height: 0.95; font-variant-numeric: tabular-nums; }
.fuel-price-unit { font-size: 0.9rem; font-weight: 600; color: var(--muted-foreground); }
.fuel-best-where { font-size: 0.95rem; font-weight: 500; }
.fuel-tier { display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0 0.6rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--t-ink, var(--tier-mid-ink)); background: var(--t-bg, var(--tier-mid-bg)); }
.fuel-tier.is-low { --t-ink: var(--tier-low-ink); --t-bg: var(--tier-low-bg); }
.fuel-tier.is-mid { --t-ink: var(--tier-mid-ink); --t-bg: var(--tier-mid-bg); }
.fuel-tier.is-high { --t-ink: var(--tier-high-ink); --t-bg: var(--tier-high-bg); }

.fuel-strip-wrap { min-width: 0; padding: 0 0.6rem; }
.fuel-strip { position: relative; height: 5.2rem; margin-bottom: 1rem; }
.fuel-strip-track { position: absolute; inset: auto 0 1.2rem 0; height: 0.4rem; border-radius: 9999px; background: linear-gradient(90deg, var(--tier-low-bg), var(--tier-mid-bg) 50%, var(--tier-high-bg)); }
.fuel-strip-avg { position: absolute; bottom: 0.7rem; left: calc(var(--x, 0.5) * 100%); width: 0; height: 1.3rem; border-left: 1.5px dashed var(--border-strong); }
.fuel-strip-avg em { position: absolute; top: calc(100% + 0.15rem); left: 0; transform: translateX(-50%); font-style: normal; font-size: 0.7rem; font-weight: 600; white-space: nowrap; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.fuel-dot {
  position: absolute; bottom: calc(1.05rem + var(--lane, 0) * 1rem); left: calc(var(--x, 0) * 100%);
  width: 0.95rem; height: 0.95rem; margin-left: -0.475rem; border-radius: 50%;
  background: var(--tier-mid); box-shadow: 0 0 0 2px var(--card);
  transition: scale 0.2s var(--ease-out);
}
.fuel-dot.is-low { background: var(--tier-low); }
.fuel-dot.is-high { background: var(--tier-high); }
.fuel-dot.is-best { width: 1.25rem; height: 1.25rem; margin-left: -0.625rem; bottom: 0.9rem; z-index: 2; --lane: 0; box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--tier-low-bg); }
.fuel-dot:hover, .fuel-dot:focus-visible { scale: 1.35; z-index: 3; }
.fuel-strip-scale { display: flex; justify-content: space-between; font-size: 0.74rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

.fuel-results-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.fuel-count { margin: 0; font-size: 0.9rem; color: var(--muted-foreground); }

/* ---------- Tarjetas ---------- */
.fuel-list { display: grid; gap: 0.9rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) { .fuel-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fuel-more-results { grid-column: 1 / -1; justify-self: center; }
.fuel-card {
  --t: var(--tier-mid); --t-ink: var(--tier-mid-ink); --t-bg: var(--tier-mid-bg);
  position: relative; display: flex; flex-direction: column; gap: 0.8rem;
  padding: clamp(0.95rem, 0.75rem + 0.9vw, 1.3rem); border-radius: 1.2rem;
  background: var(--card); box-shadow: 0 0 0 1px var(--border), var(--lift-1);
  transition: box-shadow 0.3s var(--ease-out), translate 0.3s var(--ease-out), scale 0.18s var(--ease-out);
}
.fuel-card.is-low { --t: var(--tier-low); --t-ink: var(--tier-low-ink); --t-bg: var(--tier-low-bg); }
.fuel-card.is-high { --t: var(--tier-high); --t-ink: var(--tier-high-ink); --t-bg: var(--tier-high-bg); }
.fuel-card.is-best { box-shadow: 0 0 0 1.5px var(--tier-low), var(--lift-1); }
@media (hover: hover) {
  .fuel-card:hover { translate: 0 -3px; box-shadow: 0 0 0 1px var(--border-strong), 0 2px 4px rgb(15 23 42 / 0.06), 0 22px 40px -18px rgb(15 23 42 / 0.3); }
  .fuel-card.is-best:hover { box-shadow: 0 0 0 1.5px var(--tier-low), 0 2px 4px rgb(15 23 42 / 0.06), 0 22px 40px -18px rgb(15 23 42 / 0.3); }
  .dark .fuel-card:hover { box-shadow: 0 0 0 1px var(--border-strong), 0 22px 40px -18px rgb(0 0 0 / 0.8); }
}
.fuel-card:active { scale: 0.99; }
.fuel-card[data-trend='down'] .fuel-price-num { --flash: var(--flash-down); animation: fuelNumFlash var(--flash-ms) ease-out; }
.fuel-card[data-trend='up'] .fuel-price-num { --flash: var(--flash-up); animation: fuelNumFlash var(--flash-ms) ease-out; }
.fuel-card.is-pulse { animation: fuelPulseRing 1.5s var(--ease-out); }
@keyframes fuelNumTint { 0% { background-color: var(--flash); } 100% { background-color: transparent; } }
@keyframes fuelNumFlash { 0%, 38% { background-color: var(--flash); } 22% { background-color: transparent; } 100% { background-color: transparent; } }
@keyframes fuelPulseRing { 0% { box-shadow: 0 0 0 3px rgb(var(--a-500) / 0.7), var(--lift-1); } 100% { box-shadow: 0 0 0 0 rgb(var(--a-500) / 0), var(--lift-1); } }

.fuel-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.85rem; align-items: start; }
.fuel-card-text { min-width: 0; }
.fuel-card-text h3 { margin: 0; font-size: 1.05rem; line-height: 1.2; overflow-wrap: anywhere; }
.fuel-card-text p { margin: 0.2rem 0 0; font-size: 0.84rem; color: var(--muted-foreground); overflow-wrap: anywhere; }
.fuel-card-price { display: flex; align-items: baseline; gap: 0.25rem; }
.fuel-price-num { margin: 0 -0.25rem; padding: 0.1rem 0.25rem; border-radius: 0.45rem; font-family: var(--font-display); font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.3rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.fuel-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; font-size: 0.82rem; }
.fuel-dist { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.fuel-dist svg { color: var(--muted-foreground); }
.fuel-sched { color: var(--muted-foreground); }
.fuel-best { display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0 0.6rem; border-radius: 9999px; font-size: 0.72rem; font-weight: 700; color: var(--card); background: var(--ink-fill); }

.fuel-meter { position: relative; height: 0.4rem; border-radius: 9999px; background: linear-gradient(90deg, var(--tier-low-bg), var(--tier-mid-bg) 50%, var(--tier-high-bg)); }
.fuel-meter-dot { position: absolute; top: 50%; left: calc(var(--pos, 0.5) * (100% - 0.9rem)); width: 0.9rem; height: 0.9rem; margin-top: -0.45rem; border-radius: 50%; background: var(--t); box-shadow: 0 0 0 2px var(--card); transition: left 0.7s var(--ease-out), background-color 0.3s; }
.fuel-card-others { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.8rem; color: var(--muted-foreground); }
.fuel-card-others strong { color: var(--foreground); font-variant-numeric: tabular-nums; }
.fuel-card-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.1rem; }
.fuel-card-actions .btn-primary { flex: 1 1 9rem; }
.fuel-icon-btn { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; flex: none; border-radius: var(--radius-md); color: var(--muted-foreground); background: var(--card-sunken); box-shadow: inset 0 0 0 1px var(--border); transition: color 0.16s, background-color 0.16s, transform 0.16s var(--ease-out); }
.fuel-icon-btn:hover { color: var(--foreground); background: var(--muted); }
.fuel-icon-btn:active { transform: scale(var(--press)); }
@media (max-width: 29.99rem) {
  .fuel-card-head { grid-template-columns: auto minmax(0, 1fr); }
  .fuel-card-price { grid-column: 1 / -1; order: 3; }
  .fuel-card-actions .btn-primary { flex-basis: 100%; }
  .fuel-card-actions .btn-secondary { flex: 1 1 0; }
}
.fuel-footnote { margin: 0; font-size: 0.8rem; color: var(--muted-foreground); text-align: center; }

/* ---------- Mapa ---------- */
.fuel-map-wrap { border-radius: 1.2rem; overflow: hidden; box-shadow: var(--ring), var(--lift-1); }
.fuel-map { height: min(70dvh, 38rem); min-height: 22rem; background: var(--card-sunken); }
.dark .fuel-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.9); }
.fuel-marker-wrap { background: none; border: 0; }
.fuel-marker { display: inline-block; transform: translate(-50%, -100%); white-space: nowrap; padding: 0.25rem 0.55rem; border-radius: 0.6rem; font: 700 0.78rem/1 var(--font-body); font-variant-numeric: tabular-nums; color: #fff; background: #2a323c; box-shadow: 0 2px 6px rgb(0 0 0 / 0.35); }
.fuel-marker.is-cheapest { background: #4f7f68; }
.fuel-map .leaflet-popup-content-wrapper { border-radius: 1rem; background: var(--card); color: var(--foreground); }
.fuel-map .leaflet-popup-tip { background: var(--card); }
.fuel-map .leaflet-popup-content { margin: 0.85rem 1rem; font-family: var(--font-body); }
.fuel-pop { display: flex; flex-direction: column; gap: 0.3rem; }
.fuel-pop strong { font-family: var(--font-display); font-size: 1rem; }
.fuel-pop-price { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.fuel-pop-price small { font-size: 0.72rem; font-weight: 500; color: var(--muted-foreground); }
.fuel-pop-meta { font-size: 0.8rem; color: var(--muted-foreground); }
.fuel-pop-actions { display: grid; gap: 0.4rem; margin-top: 0.4rem; }
.fuel-pop-actions a { min-height: 2.5rem; padding: 0.4rem 0.8rem; color: inherit; }
.fuel-pop-actions .btn-primary { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .fuel-card, .fuel-pill, .fuel-seg button, .fuel-more-btn, .fuel-dot { transition: none; }
  .fuel-card:active { scale: none; }
  .fuel-live[data-level='live'] .fuel-live-dot::after, .fuel-skeleton, .fuel-card.is-pulse { animation: none; }
  /* sin parpadeo: un único cambio de tono que se desvanece (la señal visual se mantiene, el movimiento no) */
  .fuel-card[data-trend] .fuel-price-num { animation: fuelNumTint 0.9s ease-out; }
  .fuel-card:hover { translate: none; }
  .fuel-meter-dot { transition: none; }
}

.fuel-price-input em { white-space: nowrap; flex: none; }
.fuel-price-input { min-width: 9.5rem; }

/* Cabecera: botón de simulación (solo local) + insignia */
.fuel-head-end { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.fuel-sim-btn { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2rem; padding: 0 0.8rem; border-radius: 9999px; font-size: 0.78rem; font-weight: 600; color: var(--muted-foreground); background: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); border: 0; transition: color 0.16s, transform 0.16s var(--ease-out); }
.fuel-sim-btn:hover { color: var(--foreground); }
.fuel-sim-btn:active { transform: scale(var(--press)); }
.fuel-nav-icon { display: block; }
.fuel-icon-btn:hover .fuel-nav-icon { color: rgb(var(--a-500)); }

/* ---------- Móvil: cabecera de controles ultra-compacta (los precios entran sin hacer scroll) ---------- */
@media (max-width: 39.99rem) {
  .fuel-board { gap: 0.7rem; }
  .fuel-board.space-y-6 > * { margin-top: 0; }
  .fuel-head { flex-wrap: nowrap; align-items: center; gap: 0.5rem; }
  .fuel-head h1 { font-size: 1.5rem; }
  .fuel-head p, .fuel-lbl-long, .fuel-location-label, .fuel-sim-btn span, .fuel-strip-scale, .fuel-best-block .fuel-tier, .fuel-footnote { display: none; }
  .fuel-live { min-height: 1.75rem; padding: 0 0.65rem 0 0.55rem; font-size: 0.72rem; }
  .fuel-sim-btn { min-height: 1.75rem; padding: 0 0.55rem; }

  .fuel-bar { gap: 0.5rem; padding: 0.55rem; border-radius: 1.1rem; }
  .fuel-where { grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem; }
  .fuel-where-field, .fuel-locate-btn { min-height: 2.75rem; }
  .fuel-where-field { padding: 0 0.85rem; }
  .fuel-locate-btn { width: 2.75rem; padding: 0; }
  .fuel-controls { gap: 0.45rem; }
  /* combustible: carrusel horizontal a sangre */
  .fuel-pills { margin-inline: -0.55rem; padding-inline: 0.55rem; scroll-padding-inline: 0.55rem; }
  .fuel-pill { min-height: 2.25rem; padding: 0 0.85rem; font-size: 0.86rem; }
  .fuel-controls-row { flex-wrap: nowrap; gap: 0.4rem; }
  .fuel-controls-row > .fuel-seg { flex: 1 1 0; min-width: 0; }
  .fuel-seg { padding: 0.2rem; }
  .fuel-seg-thumb { top: 0.2rem; bottom: 0.2rem; }
  .fuel-seg button { flex: 1 1 0; min-height: 2.25rem; padding: 0 0.4rem; font-size: 0.84rem; }
  .fuel-more-btn { position: relative; flex: none; justify-content: center; width: 2.75rem; min-height: 2.65rem; padding: 0; }
  .fuel-more-count { position: absolute; top: -0.3rem; right: -0.3rem; min-width: 1.1rem; height: 1.1rem; font-size: 0.65rem; box-shadow: 0 0 0 2px var(--card); }

  /* resumen: una sola fila compacta */
  .fuel-board-summary { gap: 0.55rem; padding: 0.8rem 0.95rem 0.6rem; border-radius: 1.1rem; }
  .fuel-best-block { gap: 0.15rem; }
  .fuel-best-label { font-size: 0.75rem; }
  .fuel-best-price { font-size: 2.2rem; }
  .fuel-best-where { font-size: 0.82rem; }
  .fuel-strip-wrap { padding: 0 0.4rem; }
  .fuel-strip { height: 2.4rem; }
  .fuel-strip-track { bottom: 0.45rem; }
  .fuel-strip-avg { bottom: 0.1rem; height: 1.2rem; }
  .fuel-dot { bottom: 0.3rem; }
  .fuel-dot.is-best { bottom: 0.15rem; }
  .fuel-results-head { gap: 0.5rem; }
  .fuel-count { font-size: 0.8rem; min-width: 0; flex: 1 1 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fuel-results-head .fuel-seg button { min-height: 2.25rem; padding: 0 0.7rem; }
}

@media (max-width: 39.99rem) {
  /* título solo para lectores de pantalla: la navegación inferior ya indica dónde estás */
  .fuel-head > div:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .fuel-head { justify-content: flex-start; }
  .fuel-best-label { display: none; }
  .fuel-board-summary { padding: 0.65rem 0.95rem 0.5rem; }
  .fuel-results-head { margin-top: -0.1rem; }
}
@media (max-width: 29.99rem) {
  /* el precio se queda arriba a la derecha de la tarjeta (más cerca del borde superior de la pantalla) */
  .fuel-card-head { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.65rem; }
  .fuel-card-price { grid-column: auto; order: 0; }
  .fuel-mark { width: 2.25rem; height: 2.25rem; }
  .fuel-card { padding: 0.85rem; gap: 0.65rem; }
}
@media (max-width: 39.99rem) {
  .fuel-board.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.6rem; }
  .fuel-board .fuel-state.is-loading { gap: 0.6rem; }
}
.fuel-lbl-short { display: none; }
@media (max-width: 39.99rem) { .fuel-lbl-short { display: inline; } }

/* ==========================================================================
   Iteración: menos ruido. Segmentado de combustible, hoja de filtros, logos y precio único por tarjeta.
   ========================================================================== */
.fuel-seg-fuel { flex: 1 1 auto; }
@media (min-width: 40rem) { .fuel-seg-fuel { flex: 0 1 auto; } .fuel-seg-fuel button { padding: 0 1.25rem; } }
.fuel-more-btn { min-height: 2.85rem; }

.fuel-results-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.fuel-results-head .fuel-seg button { min-height: 2.25rem; }
.fuel-lbl-short { display: none; }
@media (max-width: 39.99rem) { .fuel-lbl-short { display: inline; } }

/* Tarjeta: un solo precio grande + detalle discreto de otros tipos */
.fuel-card-price { display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem; }
.fuel-price-row { display: flex; align-items: baseline; gap: 0.25rem; }
.fuel-more-types { padding: 0.15rem 0.35rem; margin: 0 -0.35rem; border-radius: 0.4rem; font-size: 0.72rem; font-weight: 600; color: var(--muted-foreground); opacity: 0.8; font-variant-numeric: tabular-nums; transition: opacity 0.16s, color 0.16s; }
.fuel-more-types:hover { opacity: 1; color: var(--foreground); }

/* Píldoras dentro de la hoja: se reparten en varias líneas */
.fuel-pills-wrap { flex-wrap: wrap; overflow: visible; scroll-snap-type: none; -webkit-mask-image: none !important; mask-image: none !important; }
.fuel-pill.has-logo { display: inline-flex; align-items: center; gap: 0.45rem; padding-left: 0.4rem; }
.fuel-pill.has-logo .fuel-logo { box-shadow: none; }
.fuel-pill[aria-checked='true'] .fuel-logo { outline: 1.5px solid rgb(255 255 255 / 0.5); }

/* ---------- Hoja de filtros ---------- */
html.fuel-sheet-lock { overflow: hidden; }
.fuel-sheet { position: fixed; inset: 0; z-index: 1600; display: grid; align-items: end; justify-items: center; }
.fuel-sheet[hidden] { display: none; }
.fuel-sheet-backdrop { position: absolute; inset: 0; background: rgb(12 14 18 / 0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.fuel-sheet-panel {
  position: relative; display: flex; flex-direction: column; width: 100%; max-height: min(88dvh, 40rem);
  background: var(--card); color: var(--foreground); outline: none;
  border-radius: 1.6rem 1.6rem 0 0; box-shadow: 0 -1px 0 var(--border), 0 -24px 60px -20px rgb(0 0 0 / 0.45);
  padding-bottom: env(safe-area-inset-bottom);
}
.fuel-sheet-grab { display: grid; place-items: center; padding: 0.6rem 0 0.2rem; touch-action: none; cursor: grab; }
.fuel-sheet-grab span { width: 2.5rem; height: 0.3rem; border-radius: 9999px; background: var(--border-strong); }
.fuel-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 0.3rem 1.1rem 0.5rem 1.4rem; touch-action: none; }
.fuel-sheet-head h2 { margin: 0; font-size: 1.3rem; }
.fuel-sheet-x { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: var(--muted-foreground); transition: background-color 0.16s, color 0.16s, transform 0.16s var(--ease-out); }
.fuel-sheet-x:hover { background: var(--muted); color: var(--foreground); }
.fuel-sheet-x:active { transform: scale(var(--press)); }
.fuel-sheet-body { display: flex; flex-direction: column; gap: 1.35rem; padding: 0.4rem 1.4rem 1.2rem; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.fuel-sheet-body .fuel-field[hidden] { display: none; }
.fuel-sheet-row { display: flex; flex-wrap: wrap; gap: 1.1rem 1.5rem; align-items: flex-start; }
.fuel-sheet-row .fuel-seg { width: 100%; }
.fuel-sheet-foot { display: flex; gap: 0.6rem; padding: 0.8rem 1.4rem 1rem; border-top: 1px solid var(--border); }
.fuel-sheet-foot .btn-primary { flex: 1 1 auto; }
@media (min-width: 40rem) {
  .fuel-sheet { align-items: center; padding: 1.5rem; }
  .fuel-sheet-panel { width: min(32rem, 100%); border-radius: 1.6rem; box-shadow: 0 0 0 1px var(--border-strong), 0 40px 80px -24px rgb(0 0 0 / 0.5); padding-bottom: 0; }
  .fuel-sheet-grab { display: none; }
  .fuel-sheet-head { padding-top: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) { .fuel-sheet-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* Móvil: la fila de combustible y la de orden/vista siguen siendo compactas */
@media (max-width: 39.99rem) {
  .fuel-results-head { flex-wrap: nowrap; }
  .fuel-results-tools { flex-wrap: nowrap; width: 100%; justify-content: space-between; }
  .fuel-results-tools .fuel-seg:first-child { flex: 1 1 auto; }
  .fuel-results-head .fuel-seg button { padding: 0 0.6rem; }
  .fuel-count, .fuel-sched { display: none; }
  .fuel-card-head { gap: 0.65rem; }
  .fuel-logo.is-md { --s: 2.5rem; }
}