:root {
  --bg: #eef3f9;
  --panel: #ffffff;
  --panel-2: #f8fbff;
  --text: #102033;
  --muted: #607086;
  --border: #d7e3f2;
  --accent: #1768c4;
  --accent-dark: #0f4f9a;
  --accent-soft: #e9f3ff;
  --good: #0f8a5f;
  --good-soft: #e8fff4;
  --bad: #b42318;
  --warn: #a56500;
  --warn-soft: #fff7e6;
  --dark: #20242c;
  --dark-2: #292e38;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

.layout {
  height: 100vh;
  display: grid;
  grid-template-columns: 390px minmax(0, 1fr) 360px;
  gap: 0;
}

.left-panel {
  z-index: 950;
  background: var(--panel);
  border-right: 1px solid rgba(16, 32, 51, .18);
  box-shadow: 8px 0 28px rgba(16, 32, 51, .14);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.left-panel > * { flex: 0 0 auto; }
.left-panel > .station-section { flex: 1 1 auto; min-height: 180px; }
.left-sheet-handle { display: none; }
.mobile-dock { display: none; }
.close-left-btn { display: none; }

.app-header {
  color: #fff;
  padding: 18px 18px 0;
  background:
    linear-gradient(90deg, rgba(23,104,196,.88), rgba(15,24,36,.88)),
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.25), transparent 35%),
    var(--dark);
}
.brand-block { display: flex; align-items: center; gap: 12px; }
.app-icon {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 13px;
  background: rgba(255,255,255,.16);
  font-size: 23px;
}
.app-header h1 { margin: 0; font-size: 24px; letter-spacing: -.3px; }
.app-header p { margin: 4px 0 0; color: rgba(255,255,255,.78); font-size: 13px; }
.header-actions { display: grid; gap: 10px; padding: 16px 0 14px; }
.api-status {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 30px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.13);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  white-space: nowrap;
}
.api-status.ok { color: #d8ffe9; background: rgba(15, 138, 95, .32); }
.api-status.warning { color: #ffe6b7; background: rgba(165, 101, 0, .28); }

/* Switch de 3 vías: Mapa / Viaje / Diario */
.mode-segmented {
  display: flex;
  background: rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 4px;
  gap: 2px;
}
.mode-seg {
  flex: 1 1 0;
  min-height: 34px;
  padding: 7px 6px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.mode-seg:hover { color: #fff; }
.mode-seg.active { background: #ff7a00; color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.22); }


.panel-section {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  min-height: 0;
}
.toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; background: var(--panel); }
.toolbar label:nth-child(1), .toolbar label:nth-child(5) { grid-column: span 2; }
.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: #f2f6fb; }
.quick-actions button:nth-child(1), .quick-actions button:nth-child(5) { grid-column: span 2; }
.summary-card { background: var(--panel); }
.top-card, .station-section { overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); }

label { display: grid; gap: 5px; font-size: 12px; font-weight: 900; color: var(--text); }
select, input, button {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 10px;
  font-size: 14px;
  background: #fff;
}
button {
  border: none;
  background: var(--accent);
  color: white;
  font-weight: 900;
  cursor: pointer;
  min-height: 35px;
}
button:hover { filter: brightness(.96); }
.ghost-btn, .secondary-btn { background: var(--accent-soft); color: var(--accent-dark); }
.ghost-btn { border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.12); color: #fff; }

.map-panel { min-width: 0; position: relative; background: #d9e7f2; }
.map-wrap { position: relative; height: 100%; }
#map { height: 100vh; min-height: 100vh; width: 100%; }

.side-panel {
  z-index: 900;
  background: rgba(238, 243, 249, .94);
  border-left: 1px solid rgba(16, 32, 51, .14);
  box-shadow: -8px 0 28px rgba(16, 32, 51, .1);
  padding: 14px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  overflow: hidden;
}
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  overflow: hidden;
}
.calculator-card { overflow: auto; }
.card h2, .panel-section h2 { margin: 0 0 10px; font-size: 17px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 900;
}

.summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.summary-box { border: 1px solid var(--border); border-radius: 12px; padding: 9px; background: var(--panel-2); }
.summary-label { font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.summary-value { font-size: 17px; font-weight: 900; }

.station-list, .top-list { display: grid; gap: 8px; overflow: auto; padding-right: 5px; min-height: 0; align-content: start; }
.station-item, .top-item {
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 10px;
  cursor: pointer;
  background: #fbfcfe;
}
.station-item:hover, .station-item.active, .top-item:hover { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
.station-head, .top-head { display: flex; justify-content: space-between; gap: 10px; font-weight: 900; font-size: 14px; }
.station-brand { text-transform: uppercase; }
.station-address { color: var(--muted); margin: 4px 0 7px; font-size: 12px; line-height: 1.25; }
.price-row { display: flex; flex-wrap: wrap; gap: 5px; }
.price-pill { background: #eef4fb; border-radius: 999px; padding: 4px 7px; font-size: 11px; font-weight: 800; }
.best-price { color: var(--good); font-weight: 900; }
.expensive-price { color: var(--bad); font-weight: 900; }
.updated { color: var(--muted); font-size: 11px; margin-top: 6px; }
.empty { color: var(--muted); margin: 0; }

.map-gps-card {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 800;
  width: min(590px, calc(100% - 36px));
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 14px 34px rgba(16, 32, 51, .18);
  backdrop-filter: blur(8px);
}
.map-gps-card h2 { margin: 0; font-size: 17px; }
.gps-grid { display: grid; grid-template-columns: 1.4fr .8fr 1fr 1fr; gap: 9px; margin: 9px 0; }
.route-results { max-height: 150px; overflow: auto; margin-top: 9px; }
.results, .selected-station, .muted-box { display: grid; gap: 7px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 13px; padding: 11px; }
.selected-station, .muted-box { color: var(--muted); font-size: 12px; }
.result-line { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.result-line strong { text-align: right; }
.calculator { display: grid; gap: 9px; }

.station-detail { display: grid; gap: 10px; }
.empty-detail { color: var(--muted); font-size: 13px; }
.detail-hero { display: flex; gap: 12px; align-items: center; }
.detail-hero h3 { margin: 0; font-size: 20px; text-transform: uppercase; }
.detail-hero p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.station-logo { width: 62px; height: 62px; object-fit: contain; border: 1px solid var(--border); border-radius: 16px; background: #fff; padding: 7px; }
.station-logo-fallback { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 16px; background: var(--accent-soft); color: var(--accent-dark); font-weight: 900; font-size: 20px; }
.detail-address { color: var(--muted); font-size: 13px; }
.detail-prices { display: grid; gap: 8px; }
.detail-prices div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel-2); }
.detail-prices strong { font-size: 16px; }
.use-station-price { margin-top: 2px; }

.price-marker { display: grid; gap: 2px; justify-items: center; transform: translate(-50%, -100%); }
.price-marker .pin-price { padding: 4px 8px; border-radius: 999px; background: #fff; border: 2px solid var(--accent); color: var(--accent-dark); font-weight: 900; font-size: 12px; box-shadow: 0 5px 14px rgba(16, 32, 51, .18); white-space: nowrap; }
.price-marker.best .pin-price { border-color: var(--good); color: var(--good); }
.price-marker.expensive .pin-price { border-color: var(--bad); color: var(--bad); }
.price-marker .pin-dot { width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--accent); border: 2px solid #fff; box-shadow: 0 3px 8px rgba(16, 32, 51, .2); }
.price-marker.best .pin-dot { background: var(--good); }
.price-marker.expensive .pin-dot { background: var(--bad); }
.user-marker { font-size: 28px; filter: drop-shadow(0 3px 5px rgba(0,0,0,.3)); }
.leaflet-popup-content { min-width: 235px; }
.popup-title { font-weight: 900; margin-bottom: 4px; }
.popup-address { color: #516173; margin-bottom: 8px; }
.popup-prices { display: grid; gap: 4px; }
.popup-price { display: flex; justify-content: space-between; gap: 10px; }
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background-color: rgba(23, 104, 196, .25); }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div { background-color: rgba(23, 104, 196, .88); color: #fff; font-weight: 900; }

@media (max-width: 1220px) {
  .layout { grid-template-columns: 330px minmax(0, 1fr); }
  .side-panel { position: absolute; right: 14px; top: 14px; bottom: 14px; width: 330px; border-radius: 18px; }
  .left-panel { grid-template-rows: auto auto auto auto minmax(120px, .5fr) minmax(160px, 1fr); }
  .toolbar { grid-template-columns: 1fr; }
  .toolbar label:nth-child(1), .toolbar label:nth-child(5) { grid-column: span 1; }
  .quick-actions { grid-template-columns: 1fr; }
  .quick-actions button:nth-child(1), .quick-actions button:nth-child(5) { grid-column: span 1; }
}
@media (max-width: 820px) {
  body { overflow: auto; }
  .layout { height: auto; min-height: 100vh; display: block; }
  .left-panel { height: auto; min-height: 620px; overflow: visible; }
  .map-panel { height: 600px; }
  #map { height: 600px; min-height: 600px; }
  .side-panel { position: static; width: auto; margin: 12px; overflow: visible; }
  .map-gps-card { position: static; width: auto; margin: 12px; box-shadow: none; }
  .gps-grid { grid-template-columns: 1fr; }
}

/* Ajustes v2.3: panel amplio, GPS superior y autocompletado */
.layout { grid-template-columns: 390px minmax(0, 1fr) 460px; }
.side-panel { width: auto; }
.map-gps-card {
  top: 18px;
  bottom: auto;
  left: 18px;
  width: min(720px, calc(100% - 36px));
}
.gps-grid { grid-template-columns: 1.25fr 1.25fr .75fr .9fr .9fr; align-items: end; }
.use-location-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin: 4px 0 8px;
  cursor: pointer;
}
.use-location-check input { width: auto; accent-color: var(--accent); }
.origin-hidden { display: none !important; }
.autocomplete-field { position: relative; }
.suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1200;
  display: none;
  max-height: 220px;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(16,32,51,.18);
}
.suggestions.open { display: block; }
.suggestion-item {
  padding: 9px 10px;
  font-size: 12px;
  line-height: 1.25;
  border-bottom: 1px solid #edf2f7;
  cursor: pointer;
  color: var(--text);
  font-weight: 600;
}
.suggestion-item:hover { background: var(--accent-soft); }
.detail-card { min-height: 300px; }
.detail-hero { align-items: center; }
.detail-hero h3 { font-size: 30px; line-height: 1; }
.detail-hero p { font-size: 15px; }
.station-logo, .station-logo-fallback { width: 92px; height: 92px; border-radius: 22px; }
.station-logo-fallback { font-size: 30px; }
.detail-address { font-size: 15px; line-height: 1.35; }
.detail-prices { gap: 10px; }
.detail-prices div { padding: 13px 14px; border-radius: 15px; }
.detail-prices span { font-size: 16px; font-weight: 900; color: var(--text); }
.detail-prices strong { font-size: 22px; color: var(--accent-dark); }
.use-station-price { min-height: 44px; font-size: 15px; }

@media (max-width: 1450px) {
  .layout { grid-template-columns: 340px minmax(0, 1fr) 420px; }
  .gps-grid { grid-template-columns: 1fr 1fr .8fr; }
}

@media (max-width: 1220px) {
  .side-panel { width: 420px; }
  .map-gps-card { width: min(650px, calc(100% - 36px)); }
}


/* Ajustes v2.4: selección de inicio/destino desde mapa */
.gps-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 6px 0 8px;
}
.map-pick-notice {
  margin: 6px 0 8px;
  padding: 9px 11px;
  border-radius: 12px;
  background: #fff7e6;
  border: 1px solid #f0c36d;
  color: #744210;
  font-size: 13px;
  font-weight: 800;
}
.hidden { display: none !important; }
.map-point-marker {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  color: white;
  font-weight: 900;
  border: 3px solid white;
  box-shadow: 0 5px 15px rgba(16, 32, 51, .3);
}
.map-point-marker::first-letter { transform: rotate(45deg); }
.map-point-marker.origin { background: #0f8a5f; }
.map-point-marker.destination { background: #b42318; }
.map-point-marker.origin, .map-point-marker.destination { font-size: 0; }
.map-point-marker.origin::after, .map-point-marker.destination::after {
  font-size: 14px;
  transform: rotate(45deg);
}
.map-point-marker.origin::after { content: 'A'; }
.map-point-marker.destination::after { content: 'B'; }


/* Ajustes solicitados: paneles, GPS compacto y ventanas internas */
.layout {
  transition: grid-template-columns .28s ease;
}

.layout.side-collapsed {
  grid-template-columns: 390px minmax(0, 1fr) 0px;
}

.side-panel {
  transition: transform .28s ease, opacity .28s ease, width .28s ease, padding .28s ease;
}

.layout.side-collapsed .side-panel {
  transform: translateX(105%);
  opacity: 0;
  pointer-events: none;
  padding: 0;
  border-left: 0;
  overflow: hidden;
}

.right-panel-toggle {
  position: fixed;
  right: 18px;
  top: 18px;
  z-index: 1300;
  width: auto;
  min-height: 38px;
  padding: 9px 14px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(16,32,51,.24);
}

.close-side-btn {
  width: auto;
  justify-self: end;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
}

.map-gps-card.compact {
  width: min(540px, calc(100% - 36px));
  padding: 10px;
  border-radius: 16px;
  transition: transform .25s ease, opacity .25s ease;
}

.map-gps-card.compact .gps-checks {
  gap: 6px 10px;
  margin: 4px 0 6px;
}

.map-gps-card.compact .use-location-check {
  font-size: 12px;
  margin: 0;
}

.map-gps-card.compact .gps-grid {
  grid-template-columns: 1fr 1fr .65fr;
  gap: 7px;
}

.map-gps-card.compact label {
  font-size: 11px;
}

.map-gps-card.compact input,
.map-gps-card.compact select {
  padding: 7px 8px;
  font-size: 12px;
  min-height: 32px;
}

.map-gps-card.compact #calculateRouteBtn {
  min-height: 34px;
  padding: 8px 10px;
}

.map-gps-card.gps-hidden {
  transform: translateY(-20px);
  opacity: 0;
  pointer-events: none;
}

.show-gps-btn {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 850;
  width: auto;
  min-height: 38px;
  padding: 9px 14px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(16,32,51,.2);
}

.mini-btn {
  width: auto;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
}

.route-results {
  display: none;
}

.nearby-hidden .station-list {
  display: none;
}

.station-section.nearby-open .station-list {
  display: grid;
}

.station-section.nearby-open {
  min-height: 0;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  background: rgba(16, 32, 51, .38);
  backdrop-filter: blur(4px);
  animation: fadeIn .22s ease;
}

.top-modal {
  width: min(560px, calc(100vw - 28px));
  max-height: min(720px, calc(100vh - 34px));
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 30px 80px rgba(16,32,51,.35);
  animation: slideUp .24s ease;
}

.modal-top-list {
  overflow: auto;
  min-height: 0;
  padding-right: 6px;
}

.price-change {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 900;
}

.price-change.up { color: var(--good); }
.price-change.down { color: var(--bad); }
.price-change.flat { color: var(--muted); }

.trip-detail-card {
  min-height: 170px;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 1450px) {
  .layout.side-collapsed { grid-template-columns: 340px minmax(0, 1fr) 0px; }
  .map-gps-card.compact { width: min(520px, calc(100% - 36px)); }
}

@media (max-width: 820px) {
  .right-panel-toggle { right: 12px; top: 12px; }
  .layout.side-collapsed .side-panel {
    transform: none;
    display: none;
  }
  .map-gps-card.compact {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 12px;
    width: auto;
    margin: 0;
  }
}


/* Ajustes v2.5 */
.right-panel-toggle {
  right: 22px;
  top: 70px;
  z-index: 1500;
}

.close-side-btn {
  position: sticky;
  top: 0;
  z-index: 3;
  justify-self: stretch;
  margin-bottom: 8px;
  background: var(--bad);
  color: #fff;
}

.top-modal {
  width: min(760px, calc(100vw - 28px));
  max-height: min(820px, calc(100vh - 34px));
}

.top-item-rich {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 10px;
  align-items: center;
}

.top-item-logo img, .top-item-logo .station-logo-fallback {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.top-item-logo .station-logo-fallback {
  font-size: 14px;
}

.top-item-main strong {
  display: block;
  font-size: 14px;
}

.top-item-main small {
  color: var(--muted);
  font-size: 11px;
}

.top-item-price {
  text-align: right;
  white-space: nowrap;
}

.map-gps-card.compact {
  cursor: grab;
  will-change: transform, left, top;
}

.map-gps-card.compact.dragging {
  cursor: grabbing;
  transition: none !important;
}

.map-gps-card.compact .gps-grid {
  grid-template-columns: 1fr 1fr .7fr .8fr .9fr;
}

.user-marker-live {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #1473e6;
  border: 4px solid #fff;
  box-shadow: 0 0 0 8px rgba(20,115,230,.18), 0 4px 12px rgba(0,0,0,.35);
}

@media (max-width: 820px) {
  .right-panel-toggle { top: 64px; right: 12px; }
  .map-gps-card.compact .gps-grid { grid-template-columns: 1fr; }
}

/* GasoMaps UI refresh: API-only coordinates, cleaner panels, smoother actions */
:root {
  --radius-lg: 18px;
  --radius-md: 14px;
  --soft-shadow: 0 12px 28px rgba(16, 32, 51, .13);
}

body { background: #eaf1f8; }
.layout {
  grid-template-columns: 360px minmax(0, 1fr) 430px;
}
.layout.side-collapsed {
  grid-template-columns: 360px minmax(0, 1fr) 0px;
}

.left-panel {
  background: #f7fbff;
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
  animation: panelIn .28s ease both;
}
.app-header {
  padding: 18px 18px 14px;
  background:
    linear-gradient(140deg, rgba(17,76,134,.98), rgba(14,38,64,.98)),
    radial-gradient(circle at 15% 0%, rgba(255,255,255,.22), transparent 35%);
}
.header-actions { padding-bottom: 0; }
.api-status { min-height: 32px; }
.panel-section { padding: 14px 16px; }
.toolbar {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  background: #ffffff;
}
.toolbar label:nth-child(1),
.toolbar label:nth-child(4) { grid-column: span 2; }
.toolbar .optional-filter { display: none; }

label { gap: 7px; font-size: 12px; letter-spacing: .1px; }
select, input {
  min-height: 42px;
  border-radius: 14px;
  border: 1px solid #cbd9ea;
  background: linear-gradient(180deg, #fff, #f8fbff);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
select:focus, input:focus { outline: 3px solid rgba(23,104,196,.16); border-color: var(--accent); }
button { border-radius: 14px; min-height: 42px; transition: transform .16s ease, filter .16s ease, box-shadow .16s ease; }
button:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(16,32,51,.14); }
button:active { transform: translateY(0); }
.quick-actions { background: #edf4fb; gap: 10px; }
.quick-actions button { box-shadow: 0 4px 10px rgba(23,104,196,.12); }

.location-warning {
  display: grid;
  gap: 5px;
  background: #fff8e8;
  border-bottom: 1px solid #f0d29b;
  color: #6b4b12;
  font-size: 12px;
  line-height: 1.35;
}
.location-warning strong { font-size: 13px; }
.location-warning span { color: #785a20; }
.warning-text { color: #8a5b00; }

.summary-card { background: #ffffff; }
.summary-box {
  min-height: 66px;
  border-radius: 15px;
  background: linear-gradient(180deg, #ffffff, #f4f8fd);
  transition: transform .18s ease, box-shadow .18s ease;
}
.summary-box:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(16,32,51,.08); }
.summary-value { font-size: 20px; }

.station-section {
  min-height: 0;
  transition: grid-template-rows .28s ease, background .28s ease;
}
.station-section.nearby-hidden {
  grid-template-rows: auto 0fr;
}
.station-section.nearby-open {
  grid-template-rows: auto minmax(0, 1fr);
  background: #ffffff;
}
.station-section.nearby-open .station-list {
  min-height: 0;
  max-height: none;
  animation: expandList .26s ease both;
}
.station-list { padding: 2px 6px 6px 0; }
.station-item {
  border-radius: 16px;
  padding: 12px;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.station-item:hover, .station-item.active { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(16,32,51,.10); }
.price-pill { padding: 5px 8px; border-radius: 9px; }

/* GPS: away from Leaflet zoom buttons and easier to use */
.map-gps-card,
.map-gps-card.compact {
  left: 58px;
  top: 16px;
  bottom: auto;
  width: min(660px, calc(100% - 84px));
  border-radius: 20px;
  padding: 14px;
  box-shadow: 0 16px 36px rgba(16,32,51,.18);
  animation: gpsOpen .24s ease both;
}
.map-gps-card.compact .section-head { margin-bottom: 8px; }
.map-gps-card.compact h2 { font-size: 18px; }
.gps-checks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 10px;
}
.use-location-check {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: #f7fbff;
  font-weight: 800;
  line-height: 1.15;
}
.map-gps-card.compact .gps-grid,
.gps-grid {
  grid-template-columns: 1fr 1fr .7fr .85fr .9fr;
  gap: 10px;
  align-items: end;
}
.map-gps-card.compact input,
.map-gps-card.compact select,
.map-gps-card.compact label {
  font-size: 12px;
}
.map-gps-card.compact input,
.map-gps-card.compact select {
  min-height: 40px;
  padding: 9px 10px;
}
.map-gps-card.compact #calculateRouteBtn {
  min-height: 42px;
  margin-top: 3px;
}
.show-gps-btn {
  left: 58px;
  top: 16px;
  border-radius: 999px;
  min-height: 40px;
}
.map-pick-notice { animation: fadeIn .2s ease both; }

/* Right panel: calculator visible first, details appear only after action */
.side-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  padding: 14px 16px;
}
.layout.side-collapsed .side-panel { display: block; }
.close-side-btn { flex: 0 0 auto; }
.card { overflow: visible; border-radius: 18px; }
.calculator-card { flex: 0 0 auto; overflow: visible; }
.detail-card,
.trip-detail-card {
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
}
.panel-card-hidden { display: none !important; }
.panel-card-reveal { animation: detailSlideIn .28s ease both; }
.detail-prices div {
  align-items: center;
  min-height: 52px;
}
.detail-prices span {
  white-space: nowrap;
}
.detail-prices strong {
  white-space: nowrap;
  font-size: 20px;
}
.station-logo, .station-logo-fallback { flex: 0 0 auto; }
.right-panel-toggle.hidden { display: none !important; }

/* Keep the floating Details button from blocking content */
.right-panel-toggle {
  top: 18px;
  right: 18px;
}

@keyframes panelIn {
  from { opacity: .4; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes gpsOpen {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes detailSlideIn {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes expandList {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1450px) {
  .layout,
  .layout.side-collapsed { grid-template-columns: 320px minmax(0, 1fr) 0px; }
  .layout:not(.side-collapsed) { grid-template-columns: 320px minmax(0, 1fr) 390px; }
  .map-gps-card.compact { width: min(610px, calc(100% - 84px)); }
  .map-gps-card.compact .gps-grid { grid-template-columns: 1fr 1fr .75fr; }
}

@media (max-width: 980px) {
  .gps-checks { grid-template-columns: 1fr; }
  .map-gps-card.compact .gps-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  body { overflow: auto; }
  .layout, .layout.side-collapsed, .layout:not(.side-collapsed) { display: block; }
  .left-panel { min-height: auto; display: block; }
  .map-gps-card, .map-gps-card.compact {
    left: 12px;
    right: 12px;
    top: 56px;
    width: auto;
  }
  .show-gps-btn { left: 58px; top: 12px; }
  .map-gps-card.compact .gps-grid { grid-template-columns: 1fr; }
  .side-panel { margin: 0; border-radius: 0; }
}

/* GasoMaps v3.2 UI refinements */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.gps-mode-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0; }
.gps-mode-btn { background: #f5f9ff; color: var(--accent-dark); border: 1px solid var(--border); min-height: 48px; border-radius: 14px; transition: transform .22s ease, opacity .22s ease, max-width .25s ease, padding .25s ease, border-color .22s ease, background .22s ease; }
.gps-mode-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(23,104,196,.22); }
.gps-mode-btn.eaten { opacity: 0; transform: scale(.78); pointer-events: none; max-width: 0; padding-left: 0; padding-right: 0; overflow: hidden; border-width: 0; }
.gps-stepbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; color: var(--accent-dark); font-size: 13px; font-weight: 900; }
.ghost-step { max-width: 110px; background: var(--accent-soft); color: var(--accent-dark); }
.smart-gps-grid { grid-template-columns: 1.35fr 1.35fr .8fr 1fr 1fr; align-items: end; }
.smart-gps-grid label { min-width: 0; }
.smart-gps-grid input, .smart-gps-grid select { min-height: 43px; font-size: 14px; }
.autocomplete-field { transition: opacity .25s ease, transform .25s ease, max-height .25s ease, margin .25s ease; }
.field-fade-hidden { opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none; max-height: 0; overflow: hidden; margin: 0 !important; }
.map-gps-card { left: 70px; top: 16px; bottom: auto; width: min(720px, calc(100% - 110px)); transition: transform .22s ease, opacity .22s ease, box-shadow .22s ease; }
.show-gps-btn { left: 70px !important; top: 16px !important; bottom: auto !important; }
.detail-address.prominent-address { font-size: 15px; line-height: 1.35; color: var(--text); font-weight: 800; background: var(--panel-2); border: 1px solid var(--border); padding: 9px 10px; border-radius: 12px; }
.selectable-prices { gap: 9px; }
.fuel-price-choice { display: flex; justify-content: space-between; align-items: center; background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 13px; padding: 12px; text-align: left; min-height: 46px; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.fuel-price-choice:hover { transform: translateY(-1px); border-color: var(--accent); box-shadow: 0 8px 20px rgba(23,104,196,.12); filter: none; }
.fuel-price-choice strong { color: var(--accent-dark); font-size: 17px; }
.panel-card-hidden { display: none !important; }
.panel-card-reveal { animation: panelReveal .26s ease both; }
@keyframes panelReveal { from { opacity: 0; transform: translateX(12px) scale(.985); } to { opacity: 1; transform: translateX(0) scale(1); } }
.right-list-card { min-height: 0; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.right-list-content { display: grid; gap: 10px; overflow: auto; min-height: 0; padding-right: 4px; }
.right-list-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.right-list-main { display: grid; gap: 3px; min-width: 0; }
.right-list-main strong { font-size: 13px; line-height: 1.2; }
.right-list-main small { color: var(--muted); font-size: 11px; line-height: 1.2; }
.top-item-logo .station-logo, .top-item-logo .station-logo-fallback { width: 44px; height: 44px; border-radius: 12px; font-size: 15px; }
.location-warning { animation: fadeUp .25s ease both; }
.station-section.nearby-open { animation: openList .26s ease both; }
@keyframes openList { from { opacity: .2; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.toolbar select, .gps-grid select, .calculator select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--accent-dark) 50%), linear-gradient(135deg, var(--accent-dark) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; min-height: 42px; }
.toolbar select:focus, .gps-grid select:focus, input:focus { outline: 2px solid rgba(23,104,196,.2); border-color: var(--accent); }
.station-section { min-height: 0; }
.left-panel { grid-template-rows: auto auto auto auto auto minmax(220px, 1fr); }
.station-list { max-height: none; }

@media (max-width: 1220px) {
  .smart-gps-grid { grid-template-columns: 1fr 1fr; }
  .gps-mode-actions { grid-template-columns: 1fr; }
  .map-gps-card { left: 54px; width: min(620px, calc(100% - 78px)); }
}

/* GasoMaps v3.3 fixes: GPS wizard, right panel, action panels */
.gps-mode-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}
.gps-mode-btn {
  min-height: 46px !important;
  height: auto !important;
  transform: none;
  overflow: hidden;
  white-space: normal;
  line-height: 1.18;
}
.gps-mode-btn.active {
  transform: none !important;
  min-height: 46px !important;
}
.gps-mode-btn.eaten {
  display: none !important;
}
.gps-mode-actions.mode-location,
.gps-mode-actions.mode-origin-map {
  grid-template-columns: 2fr 1fr;
}
.gps-mode-actions.mode-location #gpsUseLocationBtn,
.gps-mode-actions.mode-origin-map #gpsPickOriginBtn {
  animation: eatFill .24s ease both;
}
@keyframes eatFill {
  from { transform: scale(.96); opacity: .75; }
  to { transform: scale(1); opacity: 1; }
}
.smart-gps-grid {
  display: grid !important;
  grid-template-columns: minmax(170px, 1.6fr) minmax(140px, 1.25fr) minmax(88px, .7fr) minmax(130px, .95fr) minmax(130px, .95fr);
  gap: 10px;
  align-items: end;
}
.smart-gps-grid.origin-ready {
  grid-template-columns: minmax(230px, 2.2fr) minmax(88px, .7fr) minmax(130px, .95fr) minmax(130px, .95fr);
}
.smart-gps-grid.origin-ready .gps-destination-field {
  grid-column: 1 / 2;
}
.smart-gps-grid.map-destination-mode {
  grid-template-columns: minmax(88px, .7fr) minmax(130px, .95fr) minmax(130px, .95fr);
}
.field-fade-hidden {
  display: none !important;
}
.map-gps-card,
.map-gps-card.compact {
  left: 76px !important;
  top: 16px !important;
  width: min(690px, calc(100% - 118px)) !important;
}
.show-gps-btn {
  left: 76px !important;
  top: 16px !important;
}
.map-gps-card.compact input,
.map-gps-card.compact select {
  min-height: 42px !important;
  font-size: 13px !important;
  padding: 9px 12px !important;
}
.map-gps-card.compact label {
  font-size: 12px !important;
  line-height: 1.2;
}
.map-gps-card.compact #calculateRouteBtn {
  min-height: 42px !important;
  margin-top: 8px !important;
}
.route-results {
  display: none;
}
.route-results:not(:empty) {
  display: block;
}
.detail-card,
.trip-detail-card,
.right-list-card,
.calculator-card {
  animation: panelReveal .25s ease both;
}
.side-panel .detail-card {
  max-height: none;
}
.detail-hero h3 {
  font-size: 24px;
  line-height: 1.05;
  margin: 0;
}
.detail-hero p {
  font-size: 13px;
}
.detail-address.prominent-address {
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: -.1px;
}
.detail-prices.selectable-prices {
  display: grid;
  gap: 10px;
}
.fuel-price-choice span {
  font-size: 15px;
  font-weight: 900;
}
.fuel-price-choice strong {
  font-size: 18px !important;
}
.right-list-card {
  min-height: 360px;
}
.right-list-content {
  max-height: calc(100vh - 160px);
}
.right-list-item {
  cursor: pointer;
}
.left-panel .station-section.nearby-hidden {
  display: none;
}
.left-panel .station-section.nearby-open {
  display: block;
}
@media (max-width: 1220px) {
  .smart-gps-grid,
  .smart-gps-grid.origin-ready,
  .smart-gps-grid.map-destination-mode {
    grid-template-columns: 1fr 1fr !important;
  }
  .gps-mode-actions,
  .gps-mode-actions.mode-location,
  .gps-mode-actions.mode-origin-map {
    grid-template-columns: 1fr !important;
  }
  .map-gps-card,
  .map-gps-card.compact {
    left: 54px !important;
    width: min(620px, calc(100% - 78px)) !important;
  }
}

/* GasoMaps v3.4 requested refinements */
.map-gps-card.gps-hidden,
.map-gps-card.compact.gps-hidden {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.show-gps-btn.hidden { display: none !important; }
.show-gps-btn {
  left: 92px !important;
  top: 18px !important;
  z-index: 950 !important;
}
.map-gps-card,
.map-gps-card.compact {
  cursor: grab;
}
.map-gps-card.dragging,
.map-gps-card.compact.dragging {
  cursor: grabbing;
  user-select: none;
}
.map-gps-card input,
.map-gps-card select,
.map-gps-card button,
.map-gps-card .suggestions {
  cursor: auto;
}
.smart-gps-grid {
  grid-template-columns: minmax(240px, 2.2fr) minmax(240px, 2.2fr) minmax(98px, .75fr) minmax(150px, 1fr) minmax(150px, 1fr) !important;
}
.smart-gps-grid.origin-ready {
  grid-template-columns: minmax(360px, 3fr) minmax(98px, .75fr) minmax(150px, 1fr) minmax(150px, 1fr) !important;
}
.smart-gps-grid input,
.smart-gps-grid select {
  min-width: 0;
  width: 100%;
}
.smart-gps-grid .gps-destination-field input,
.smart-gps-grid .gps-origin-field input {
  font-size: 14px !important;
}
.suggestions {
  min-width: 280px;
  max-height: 230px;
  overflow: auto;
}
.calculator-card.panel-card-hidden { display: none !important; }
.right-list-card {
  min-height: calc(100vh - 42px) !important;
  max-height: calc(100vh - 42px) !important;
}
.right-list-content {
  max-height: none !important;
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.right-list-results {
  display: grid;
  gap: 12px;
  align-content: start;
  overflow: auto;
  min-height: 0;
}
.right-list-row.full-row {
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
}
.top-item-logo.big-logo .station-logo,
.top-item-logo.big-logo .station-logo-fallback {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  font-size: 18px;
}
.right-list-main strong {
  font-size: 14px !important;
}
.right-list-main small {
  font-size: 12px !important;
}
.top-item-price {
  display: grid;
  justify-items: end;
  gap: 5px;
  white-space: nowrap;
}
.price-change {
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  border-radius: 999px;
  padding: 3px 7px;
  margin-top: 4px;
}
.price-change.up { color: #008a3d; background: #e9f8ef; }
.price-change.down { color: #c52020; background: #fff0f0; }
.price-change.flat { color: #667085; background: #f2f4f7; }
.fuel-price-choice span {
  display: grid;
  gap: 3px;
}
.detail-hero h3 {
  font-size: 26px !important;
}
.detail-address.prominent-address {
  font-size: 16px !important;
}
.use-station-price { display: none !important; }
.left-nearby-disabled { display: none !important; }
@media (max-width: 1220px) {
  .smart-gps-grid,
  .smart-gps-grid.origin-ready,
  .smart-gps-grid.map-destination-mode {
    grid-template-columns: 1fr !important;
  }
}

/* GasoMaps v3.5 ajustes finales */
.left-panel {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  align-content: start !important;
}
.quick-actions {
  grid-template-columns: 1fr 1fr !important;
  align-items: stretch !important;
}
.quick-actions #nearestBtn,
.quick-actions #clearFiltersBtn,
.quick-actions #showCalculatorBtn {
  grid-column: 1 / -1;
}
.quick-actions button {
  min-height: 42px;
  white-space: normal;
}
.map-gps-card,
.map-gps-card.compact {
  width: min(780px, calc(100% - 96px)) !important;
  max-width: calc(100% - 96px) !important;
  z-index: 640 !important;
}
.map-gps-card.compact .section-head {
  cursor: grab;
  user-select: none;
}
.map-gps-card.compact.dragging .section-head { cursor: grabbing; }
.smart-gps-grid,
.map-gps-card.compact .gps-grid {
  display: grid !important;
  grid-template-columns: minmax(230px, 2.4fr) minmax(116px, .9fr) minmax(138px, 1fr) minmax(150px, 1fr) !important;
  gap: 10px !important;
  align-items: end !important;
}
.smart-gps-grid label,
.map-gps-card.compact label { min-width: 0 !important; }
.smart-gps-grid input,
.smart-gps-grid select,
.map-gps-card.compact input,
.map-gps-card.compact select {
  width: 100% !important;
  min-width: 0 !important;
  font-size: 14px !important;
  height: 43px !important;
  text-overflow: ellipsis;
}
.smart-gps-grid.origin-ready #destinationField,
.smart-gps-grid.map-destination-mode #destinationField {
  grid-column: 1 / 2 !important;
}
.gps-mode-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.gps-mode-btn {
  min-height: 50px !important;
  padding: 10px 12px !important;
  transition: transform .18s ease, opacity .18s ease, max-width .25s ease, background .18s ease !important;
}
.gps-mode-actions.mode-location #gpsPickOriginBtn,
.gps-mode-actions.mode-origin-map #gpsUseLocationBtn {
  opacity: 0 !important;
  transform: scale(.86) !important;
  pointer-events: none !important;
  max-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden !important;
}
.gps-mode-actions.mode-location,
.gps-mode-actions.mode-origin-map {
  grid-template-columns: minmax(0, 2fr) minmax(0, 0fr) minmax(0, 1fr) !important;
}
.gps-mode-actions.mode-origin-map {
  grid-template-columns: minmax(0, 0fr) minmax(0, 2fr) minmax(0, 1fr) !important;
}
.trip-detail-card,
.right-list-card,
.detail-card,
.calculator-card {
  height: calc(100vh - 28px) !important;
  max-height: calc(100vh - 28px) !important;
  overflow: auto !important;
}
.trip-detail-card .section-head h2,
.right-list-card .section-head h2,
.detail-card .section-head h2 { font-size: 18px !important; }
.trip-hero-result {
  display: grid;
  gap: 6px;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  color: #fff;
  box-shadow: 0 16px 34px rgba(23,104,196,.22);
}
.trip-hero-result span { font-size: 13px; opacity: .9; font-weight: 800; }
.trip-hero-result strong { font-size: 34px; line-height: 1; letter-spacing: -.6px; }
.trip-hero-result small { font-size: 14px; opacity: .95; }
.trip-metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.trip-metric {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--panel-2);
}
.trip-metric span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 6px;
}
.trip-metric strong { font-size: 22px; color: var(--accent-dark); }
.trip-fuel-note {
  margin-top: 14px;
  padding: 12px;
  border-radius: 14px;
  background: #eef6ff;
  color: var(--accent-dark);
  font-weight: 800;
  font-size: 13px;
}
.detail-hero h3 {
  font-size: 22px !important;
  letter-spacing: -.3px;
}
.detail-address.prominent-address {
  font-size: 16px !important;
}
.right-list-content {
  gap: 12px !important;
  padding-right: 6px !important;
}
.right-list-row.full-row {
  grid-template-columns: minmax(70px, auto) 58px minmax(0, 1fr) auto !important;
}
.rank-badge {
  align-self: center;
  justify-self: start;
  padding: 8px 9px;
  border-radius: 999px;
  background: #fff7e6;
  border: 1px solid #ffd48a;
  color: #8a4b00;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}
.top-item-logo.big-logo .station-logo,
.top-item-logo.big-logo .station-logo-fallback,
.top-item-logo .station-logo,
.top-item-logo .station-logo-fallback {
  width: 54px !important;
  height: 54px !important;
  border-radius: 16px !important;
  font-size: 16px !important;
}
.right-list-main strong { font-size: 15px !important; }
.right-list-main small { font-size: 12px !important; }
.price-change.up { background: #dcfce7 !important; color: #008a3d !important; }
.price-change.down { background: #ffe4e6 !important; color: #d00028 !important; }
.price-change.flat { background: #eef2f7 !important; color: #64748b !important; }
.side-panel { overflow: hidden !important; }
.show-gps-btn { z-index: 650 !important; }
@media (max-width: 1180px) {
  .map-gps-card,
  .map-gps-card.compact { width: min(680px, calc(100% - 80px)) !important; }
  .smart-gps-grid,
  .map-gps-card.compact .gps-grid { grid-template-columns: 1.5fr .8fr 1fr 1fr !important; }
}
@media (max-width: 920px) {
  .smart-gps-grid,
  .map-gps-card.compact .gps-grid { grid-template-columns: 1fr 1fr !important; }
  .gps-mode-actions { grid-template-columns: 1fr !important; }
  .gps-mode-actions.mode-location,
  .gps-mode-actions.mode-origin-map { grid-template-columns: 1fr !important; }
  .gps-mode-actions.mode-location #gpsPickOriginBtn,
  .gps-mode-actions.mode-origin-map #gpsUseLocationBtn { display: none !important; }
  .right-list-row.full-row { grid-template-columns: 1fr 54px minmax(0,1fr) !important; }
  .right-list-row.full-row .top-item-price { grid-column: 3 / 4; }
}

/* GasoMaps v3.6 refinamientos solicitados */
.summary-card { display: none !important; }
.left-panel .station-section { display: none !important; }
.left-panel { width: 320px !important; min-width: 320px !important; }
.layout { grid-template-columns: 320px minmax(0, 1fr) minmax(430px, 30vw) !important; }
.layout.side-collapsed { grid-template-columns: 320px minmax(0, 1fr) 0px !important; }
.side-panel { min-width: 430px !important; }
.quick-actions { grid-template-columns: 1fr 1fr !important; gap: 9px !important; padding: 12px !important; }
.quick-actions #showNearbyBtn,
.quick-actions #nearestBtn,
.quick-actions #showCalculatorBtn,
.quick-actions #clearFiltersBtn { grid-column: 1 / -1 !important; }
.quick-actions #cheapNearBtn,
.quick-actions #showTopBtn { grid-column: auto !important; }
.quick-actions button { min-height: 42px !important; font-size: 14px !important; }
.location-warning { margin-top: 0 !important; }

.map-gps-card,
.map-gps-card.compact { width: min(820px, calc(100% - 96px)) !important; }
.gps-mode-actions,
.gps-mode-actions.mode-location,
.gps-mode-actions.mode-origin-map { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.gps-mode-actions.mode-location #gpsPickOriginBtn,
.gps-mode-actions.mode-origin-map #gpsUseLocationBtn { opacity: 1 !important; transform: none !important; pointer-events: auto !important; max-width: none !important; padding: 10px 12px !important; overflow: visible !important; border-width: 1px !important; }
.gps-mode-btn { min-height: 46px !important; max-height: 54px !important; overflow: hidden !important; line-height: 1.15 !important; white-space: normal !important; }
.smart-gps-grid,
.map-gps-card.compact .gps-grid { grid-template-columns: minmax(300px, 2.8fr) minmax(118px, .9fr) minmax(150px, 1fr) minmax(150px, 1fr) !important; }
.smart-gps-grid:not(.origin-ready):not(.map-destination-mode),
.map-gps-card.compact .gps-grid:not(.origin-ready):not(.map-destination-mode) { grid-template-columns: minmax(300px, 2.8fr) minmax(118px, .9fr) minmax(150px, 1fr) minmax(150px, 1fr) !important; }
.smart-gps-grid #originField,
.smart-gps-grid #destinationField { min-width: 0 !important; }
.smart-gps-grid input,
.smart-gps-grid select { font-size: 14px !important; }
.suggestions { min-width: min(420px, 90vw) !important; font-size: 14px !important; }

.right-list-row.full-row { grid-template-columns: 34px 62px minmax(0, 1fr) auto !important; gap: 10px !important; }
.right-list-row.full-row:not(:has(.rank-badge)) { grid-template-columns: 62px minmax(0, 1fr) auto !important; }
.rank-badge.compact-rank { width: 28px !important; min-width: 28px !important; height: 28px !important; display: grid !important; place-items: center !important; padding: 0 !important; font-size: 14px !important; }
.right-list-main strong { font-size: 14px !important; line-height: 1.15 !important; }
.right-list-main small { font-size: 12px !important; line-height: 1.2 !important; }
.top-item-logo.big-logo .station-logo,
.top-item-logo.big-logo .station-logo-fallback { width: 56px !important; height: 56px !important; }

@media (max-width: 1500px) {
  .left-panel { width: 270px !important; min-width: 270px !important; }
  .layout { grid-template-columns: 270px minmax(0, 1fr) 390px !important; }
  .layout.side-collapsed { grid-template-columns: 270px minmax(0, 1fr) 0px !important; }
  .side-panel { min-width: 390px !important; }
  .toolbar { gap: 8px !important; }
  .quick-actions button { font-size: 12px !important; padding: 9px 8px !important; }
  .app-header { padding: 14px 14px 10px !important; }
  .panel-section { padding: 10px !important; }
}

@media (max-width: 1100px) {
  .layout,
  .layout.side-collapsed { grid-template-columns: 1fr !important; }
  .left-panel { width: auto !important; min-width: 0 !important; }
  .side-panel { min-width: 0 !important; }
}

/* GasoMaps v3.7: ajuste final panel izquierdo, GPS y carga */
.layout,
.layout.side-collapsed {
  min-width: 0 !important;
}
.left-panel {
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
  overflow-x: hidden !important;
}
.layout {
  grid-template-columns: 300px minmax(0, 1fr) minmax(400px, 28vw) !important;
}
.layout.side-collapsed {
  grid-template-columns: 300px minmax(0, 1fr) 0px !important;
}
.side-panel { min-width: 400px !important; }
.quick-actions {
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  padding: 10px !important;
}
.quick-actions button {
  width: 100% !important;
  min-width: 0 !important;
  font-size: 12px !important;
  line-height: 1.12 !important;
  padding: 9px 7px !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}
.quick-actions #showNearbyBtn,
.quick-actions #nearestBtn,
.quick-actions #showCalculatorBtn,
.quick-actions #clearFiltersBtn { grid-column: 1 / -1 !important; }
.quick-actions #cheapNearBtn,
.quick-actions #showTopBtn { grid-column: auto !important; }
.toolbar select,
.toolbar input { min-width: 0 !important; }
.location-warning { padding: 12px !important; font-size: 12px !important; }

.map-gps-card,
.map-gps-card.compact {
  width: min(760px, calc(100vw - 370px)) !important;
  max-width: calc(100vw - 370px) !important;
  left: 18px !important;
  right: auto !important;
}
.gps-mode-actions,
.gps-mode-actions.mode-location,
.gps-mode-actions.mode-origin-map,
.gps-mode-actions.mode-destination-map {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
.gps-mode-actions .gps-mode-btn,
.gps-mode-actions.mode-location .gps-mode-btn,
.gps-mode-actions.mode-origin-map .gps-mode-btn,
.gps-mode-actions.mode-destination-map .gps-mode-btn {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 8px 10px !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  transform: none !important;
  overflow: hidden !important;
  white-space: normal !important;
  line-height: 1.05 !important;
  font-size: 12px !important;
}
.gps-mode-btn.active {
  transform: none !important;
  box-shadow: 0 5px 12px rgba(23,104,196,.22) !important;
}
.smart-gps-grid,
.map-gps-card.compact .gps-grid {
  grid-template-columns: minmax(230px, 2fr) minmax(88px, .7fr) minmax(116px, .95fr) minmax(116px, .95fr) !important;
  gap: 8px !important;
}
.smart-gps-grid label { min-width: 0 !important; }
.smart-gps-grid input,
.smart-gps-grid select { width: 100% !important; min-width: 0 !important; font-size: 12px !important; }

.panel-loading {
  min-height: 260px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  text-align: center;
  color: #31526f;
  padding: 30px 18px;
}
.loading-spinner {
  width: 44px;
  height: 44px;
  border: 5px solid #dbeafe;
  border-top-color: #1f6fd0;
  border-radius: 50%;
  animation: spinLoad .85s linear infinite;
}
.panel-loading span { font-size: 13px; line-height: 1.35; max-width: 260px; }
@keyframes spinLoad { to { transform: rotate(360deg); } }

.right-list-results { gap: 10px !important; }
.right-list-row.full-row { grid-template-columns: 30px 56px minmax(0, 1fr) auto !important; }
.right-list-row.full-row:not(:has(.rank-badge)) { grid-template-columns: 56px minmax(0, 1fr) auto !important; }
.rank-badge.compact-rank { font-size: 13px !important; width: 26px !important; min-width: 26px !important; }

@media (max-width: 1500px) {
  .left-panel { width: 280px !important; min-width: 280px !important; max-width: 280px !important; }
  .layout { grid-template-columns: 280px minmax(0, 1fr) 380px !important; }
  .layout.side-collapsed { grid-template-columns: 280px minmax(0, 1fr) 0px !important; }
  .side-panel { min-width: 380px !important; }
  .map-gps-card,
  .map-gps-card.compact { width: min(700px, calc(100vw - 340px)) !important; max-width: calc(100vw - 340px) !important; }
  .quick-actions button { font-size: 11.5px !important; padding: 8px 6px !important; }
}
@media (max-width: 1180px) {
  .map-gps-card,
  .map-gps-card.compact { width: calc(100vw - 330px) !important; max-width: calc(100vw - 330px) !important; }
  .gps-mode-actions,
  .gps-mode-actions.mode-location,
  .gps-mode-actions.mode-origin-map,
  .gps-mode-actions.mode-destination-map { grid-template-columns: 1fr !important; }
  .smart-gps-grid,
  .map-gps-card.compact .gps-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 920px) {
  .left-panel { width: auto !important; min-width: 0 !important; max-width: none !important; }
  .layout,
  .layout.side-collapsed { grid-template-columns: 1fr !important; }
  .map-gps-card,
  .map-gps-card.compact { width: calc(100vw - 28px) !important; max-width: calc(100vw - 28px) !important; left: 14px !important; }
}

/* GasoMaps v3.8: estabilidad del panel izquierdo */
:root { --left-panel-w: 350px; --right-panel-w: 420px; }
.layout,
.layout.side-collapsed {
  height: 100vh !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.layout {
  grid-template-columns: var(--left-panel-w) minmax(0, 1fr) minmax(var(--right-panel-w), 28vw) !important;
}
.layout.side-collapsed {
  grid-template-columns: var(--left-panel-w) minmax(0, 1fr) 0px !important;
}
.left-panel {
  width: var(--left-panel-w) !important;
  min-width: var(--left-panel-w) !important;
  max-width: var(--left-panel-w) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.side-panel { min-width: var(--right-panel-w) !important; }
.api-status {
  width: 100% !important;
  max-width: 100% !important;
  font-size: 11px !important;
  padding-inline: 8px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.app-header h1 { font-size: 22px !important; }
.app-header p { font-size: 12px !important; }
.toolbar { grid-template-columns: 1fr 1fr !important; }
.toolbar label:nth-child(1),
.toolbar label:nth-child(4),
.toolbar label:nth-child(5) { grid-column: 1 / -1 !important; }
.toolbar select,
.toolbar input {
  height: 42px !important;
  font-size: 13px !important;
}
.quick-actions {
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  padding: 12px !important;
}
.quick-actions button {
  min-height: 44px !important;
  font-size: 13px !important;
  line-height: 1.12 !important;
  padding: 10px 8px !important;
  border-radius: 12px !important;
  white-space: normal !important;
  overflow: visible !important;
}
.quick-actions #showNearbyBtn,
.quick-actions #nearestBtn,
.quick-actions #showCalculatorBtn,
.quick-actions #clearFiltersBtn { grid-column: 1 / -1 !important; }
.quick-actions #cheapNearBtn,
.quick-actions #showTopBtn { grid-column: auto !important; }
.location-warning {
  padding: 12px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}
.map-panel { min-width: 0 !important; }
.map-gps-card,
.map-gps-card.compact {
  width: min(760px, calc(100vw - var(--left-panel-w) - 96px)) !important;
  max-width: calc(100vw - var(--left-panel-w) - 96px) !important;
  left: 22px !important;
}
.right-panel-toggle { z-index: 1200 !important; }

@media (max-width: 1500px) {
  :root { --left-panel-w: 320px; --right-panel-w: 390px; }
  .quick-actions button { font-size: 12px !important; padding: 9px 7px !important; }
  .app-header { padding: 14px 14px 10px !important; }
  .panel-section { padding: 11px !important; }
  .map-gps-card,
  .map-gps-card.compact {
    width: min(700px, calc(100vw - var(--left-panel-w) - 74px)) !important;
    max-width: calc(100vw - var(--left-panel-w) - 74px) !important;
  }
}

@media (max-width: 1250px) {
  :root { --left-panel-w: 300px; --right-panel-w: 380px; }
  .quick-actions button { font-size: 11.5px !important; }
  .map-gps-card,
  .map-gps-card.compact {
    width: calc(100vw - var(--left-panel-w) - 58px) !important;
    max-width: calc(100vw - var(--left-panel-w) - 58px) !important;
  }
}

@media (max-width: 920px) {
  :root { --left-panel-w: 100%; --right-panel-w: 100%; }
  .layout,
  .layout.side-collapsed,
  .layout:not(.side-collapsed) {
    display: block !important;
    height: auto !important;
    overflow: auto !important;
  }
  body { overflow: auto !important; }
  .left-panel {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .map-panel { height: 650px !important; }
  .map-gps-card,
  .map-gps-card.compact {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    left: 14px !important;
  }
}


/* v3.9 - botones de ruta */
.route-action-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.route-action-row #calculateRouteBtn {
  width: 100%;
}

.secondary-route-btn {
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid #bdd3ef;
  border-radius: 12px;
  background: #eef6ff;
  color: #1156a5;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.secondary-route-btn:hover {
  background: #dcecff;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .route-action-row {
    grid-template-columns: 1fr;
  }
}

/* ================= MODO VIAJE (integrado en el mapa) ================= */
.trip-mode-panel { background: #0e1626; color: #eaf1fb; }
.trip-mode-panel .section-head h2 { color: #fff; margin: 0; font-size: 16px; }
.trip-mode-panel label {
  color: #9fb3ce;
  font-size: 12px;
  font-weight: 800;
  display: grid;
  gap: 5px;
  margin-bottom: 10px;
}
.trip-mode-panel select,
.trip-mode-panel input {
  background: #182238;
  border: 1px solid #2a3a58;
  color: #fff;
  font-weight: 700;
}
.trip-hint { color: #8ea0bf; font-size: 11.5px; margin: -4px 0 10px; line-height: 1.4; }
.mini-btn-outline {
  background: transparent;
  border: 1px solid #3a4d70;
  color: #cfe0fb;
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 800;
  min-height: auto;
  width: auto;
}
#startTripModeBtn {
  background: linear-gradient(135deg, #2f8bff, #1768c4);
  font-size: 15px;
  padding: 12px;
  border-radius: 12px;
}
.trip-mini-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
#tripSpeedMini { font-weight: 900; font-size: 15px; color: #fff; }
.trip-mode-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.trip-mode-actions .secondary-btn {
  background: #1f2c46;
  color: #eaf1fb;
  border: 1px solid #2a3a58;
}
.trip-mode-actions .danger-btn {
  background: rgba(255, 92, 92, .16);
  color: #ff8888;
  border: 1px solid #ff5c5c;
}
.simple-mode-link {
  display: block;
  text-align: center;
  margin-top: 12px;
  color: #8ea0bf;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  border-top: 1px solid #23324e;
  padding-top: 10px;
}
.simple-mode-link:hover { color: #cfe0fb; }

.movement-badge {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 900;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(35, 192, 122, .18);
  color: #3fe3a3;
}
.movement-badge.stopped { background: rgba(255, 181, 69, .18); color: #ffc670; }
.movement-badge.paused { background: rgba(255, 255, 255, .12); color: #cfd8e6; }

/* Tarjeta de viaje en curso (panel derecho) */
.trip-live-card .trip-speed-display {
  display: grid;
  place-items: center;
  padding: 14px 0 6px;
}
.trip-live-card #tripLiveSpeed {
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  color: var(--accent-dark);
  font-variant-numeric: tabular-nums;
}
.trip-live-card .trip-speed-display small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  margin-top: 2px;
}
.trip-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.trip-stat-box {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 10px;
  display: grid;
  gap: 4px;
}
.trip-stat-box.highlight { background: var(--good-soft); border-color: var(--good); }
.trip-stat-label { font-size: 11px; color: var(--muted); font-weight: 800; }
.trip-stat-value { font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }
.trip-stat-box.highlight .trip-stat-value { color: var(--good); }

#tripSummaryBlock h3 { margin: 4px 0 0; font-size: 15px; }
.trip-refuel-form {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.trip-refuel-form label {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  display: grid;
  gap: 4px;
}
.trip-comparison {
  margin-top: 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 12px;
  display: grid;
  gap: 8px;
}
.trip-comparison h4 { margin: 0; font-size: 13px; }
.trip-comparison-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--muted); }
.trip-comparison-row strong { color: var(--text); }
.trip-comparison-row.diff-good strong { color: var(--good); }
.trip-comparison-row.diff-bad strong { color: var(--bad); }
#tripNewBtn { margin-top: 14px; }
.journal-save-btn { margin-top: 10px; background: var(--good-soft); color: #0f8a5f; border: 1px solid var(--good); }

/* ================= DIARIO DEL CONDUCTOR ================= */

/* ---------- Vista de calendario a pantalla completa ---------- */
.diario-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1550;
  background: #0e1626;
  color: #eaf1fb;
  overflow-y: auto;
}
.diario-fullscreen-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 24px 60px;
}
.diario-fullscreen-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  margin-bottom: 22px;
}
.diario-back-btn {
  align-self: flex-start;
  background: rgba(255,255,255,.1);
  color: #cfe0fb;
  border: none;
  border-radius: 999px;
  padding: 9px 16px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  min-height: auto;
}
.diario-back-btn:hover { background: rgba(255,255,255,.18); }
.diario-fullscreen-header h1 { margin: 0 0 4px; font-size: 24px; }
.diario-fullscreen-header p { margin: 0; color: #8ea0bf; font-size: 13.5px; }
.diario-fullscreen-hint { text-align: center; margin-top: 14px; }

.diario-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 20px 0 22px;
}
.diario-summary-big .diario-summary-box { padding: 16px; }
.diario-summary-big .diario-summary-value { font-size: 22px; }
.diario-summary-box {
  background: #182238;
  border: 1px solid #2a3a58;
  border-radius: 14px;
  padding: 10px;
  display: grid;
  gap: 4px;
}
.diario-summary-box.fuel { border-color: rgba(255,92,92,.4); }
.diario-summary-label { font-size: 11px; color: #8ea0bf; font-weight: 800; }
.diario-summary-value { font-size: 17px; font-weight: 900; color: #23c07a; }
.diario-summary-box.fuel .diario-summary-value { color: #ff8888; }

.diario-calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-weight: 900;
  color: #fff;
  font-size: 17px;
}
.diario-calendar-head .mini-btn-outline {
  background: rgba(255,255,255,.08);
  border-color: #2a3a58;
  color: #cfe0fb;
}
.diario-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
.diario-weekdays span { text-align: center; font-size: 12px; color: #6f83a3; font-weight: 800; }
.diario-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.diario-day {
  position: relative;
  aspect-ratio: 1;
  min-height: 44px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: #182238;
  color: #cfe0fb;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 8px;
  gap: 6px;
  transition: transform .12s ease, background .12s ease;
}
.diario-day-num { font-size: 14px; }
.diario-calendar-grid-big .diario-day { min-height: 76px; padding: 10px; }
.diario-calendar-grid-big .diario-day-num { font-size: 16px; }
.diario-day.empty { background: transparent; cursor: default; border-color: transparent; }
.diario-day:hover:not(.empty) { background: #22304e; transform: translateY(-1px); }
.diario-day.today { border-color: #ff7a00; }
.diario-day.has-data.today { border-color: #ff7a00; }

.diario-day-net {
  align-self: stretch;
  text-align: center;
  border-radius: 8px;
  padding: 3px 4px;
  font-size: 10.5px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.diario-calendar-grid-big .diario-day-net { font-size: 12.5px; padding: 4px 6px; }
.diario-day-net.positive { background: rgba(35,192,122,.28); color: #8dffc4; }
.diario-day-net.negative { background: rgba(255,92,92,.28); color: #ffb3b3; }
.diario-day.net-positive { background: rgba(35,192,122,.14); }
.diario-day.net-negative { background: rgba(255,92,92,.12); }

/* ---------- Ventana emergente (día / recorrido / carga) ---------- */
.diario-modal {
  width: min(520px, calc(100vw - 28px));
  max-height: min(760px, calc(100vh - 34px));
  overflow-y: auto;
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 30px 80px rgba(16,32,51,.35);
  animation: slideUp .24s ease;
}
.diario-modal-close {
  position: sticky;
  float: right;
  top: 0;
  margin: -6px -6px 0 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  min-height: auto;
  z-index: 3;
}
.diario-modal-close:hover { background: var(--border); color: var(--text); }
.diario-modal h2 { margin: 0 0 14px; font-size: 18px; clear: both; }

.diario-day-totals { margin-bottom: 14px; }
.diario-net-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 12px 14px;
  margin-bottom: 18px;
}
.diario-net-label { font-size: 12px; font-weight: 800; color: var(--muted); }
.diario-net-value { font-size: 19px; font-weight: 900; }
.diario-net-value.positive { color: var(--good); }
.diario-net-value.negative { color: var(--bad); }
.diario-earnings-form {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.diario-earnings-form label { font-size: 12px; font-weight: 800; color: var(--muted); display: grid; gap: 4px; }

.diario-section { margin-bottom: 16px; }
.diario-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.diario-section-head h3 { margin: 0; font-size: 14px; }

.diario-list { display: grid; gap: 8px; }
.diario-item {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.diario-item-main { display: grid; gap: 2px; font-size: 12.5px; color: var(--muted); }
.diario-item-main strong { font-size: 14px; color: var(--text); }
.diario-item-note { font-style: italic; color: var(--muted); }
.diario-item-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.diario-item-actions .mini-btn-outline { padding: 6px 10px; font-size: 11px; }

.diario-form { display: grid; gap: 12px; }
.diario-form label { font-size: 12px; font-weight: 800; color: var(--muted); display: grid; gap: 4px; }
.diario-form input, .diario-form select {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 11px;
  font-size: 14px;
  font-weight: 700;
}
.diario-form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }

.diario-photo-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border: 1px dashed var(--accent-dark);
  border-radius: 12px;
  padding: 11px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
}
.diario-beta-tag {
  background: var(--warn-soft, rgba(255,181,69,.2));
  color: #a5652f;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 900;
}

@media (max-width: 640px) {
  .diario-fullscreen-inner { padding: 20px 16px 90px; }
  .diario-day { min-height: 52px; padding: 6px; gap: 4px; }
  .diario-day-num { font-size: 12.5px; }
  .diario-day-net { font-size: 9px; padding: 2px 3px; }
  .diario-calendar-grid-big .diario-day { min-height: 62px; padding: 7px; }
  .diario-calendar-grid-big .diario-day-num { font-size: 13.5px; }
  .diario-calendar-grid-big .diario-day-net { font-size: 10.5px; }
  .diario-modal { width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; }
}


/* Marcador del usuario en Modo Viaje: flecha direccional */
.user-marker-trip {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #1768c4;
  border: 3px solid #fff;
  color: #fff;
  font-size: 16px;
  box-shadow: 0 0 0 9px rgba(23,104,196,.2), 0 4px 14px rgba(0,0,0,.4);
  transition: transform .3s ease;
}

.hidden { display: none !important; }

/* ======================================================================
   GasoMaps — Modo App Móvil (rediseño para celular)
   Se activa solo bajo max-width:920px. Al entrar solo se ve el mapa;
   los paneles son hojas ("bottom sheets") cerradas por defecto que se
   abren desde una barra inferior de accesos directos.
   ====================================================================== */
@media (max-width: 920px) {
  html, body { height: 100dvh; overflow: hidden !important; }

  .layout,
  .layout.side-collapsed,
  .layout:not(.side-collapsed) {
    display: block !important;
    position: relative !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  /* Mapa a pantalla completa, como fondo fijo */
  .map-panel {
    position: absolute !important;
    inset: 0 !important;
    height: 100dvh !important;
    min-width: 0 !important;
    z-index: 1 !important;
  }
  .map-wrap { height: 100% !important; }
  #map { height: 100% !important; min-height: 0 !important; }

  /* Botón flotante "Detalles" */
  .right-panel-toggle {
    position: fixed !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    right: 12px !important;
    z-index: 1200 !important;
  }

  /* ---------- Barra inferior de accesos directos ---------- */
  .mobile-dock {
    display: flex !important;
    position: fixed;
    left: 10px; right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 600;
    background: rgba(20, 32, 51, .94);
    backdrop-filter: blur(8px);
    border-radius: 18px;
    box-shadow: 0 10px 26px rgba(16, 32, 51, .3);
    padding: 7px;
    gap: 2px;
    overflow-x: auto;
  }
  .dock-btn {
    flex: 1 1 0;
    min-width: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: transparent;
    color: #cfe0fb;
    border: none;
    border-radius: 13px;
    padding: 7px 2px 6px;
    font-size: 9.5px;
    font-weight: 800;
    white-space: nowrap;
    min-height: auto;
  }
  .dock-btn:hover { background: rgba(255,255,255,.08); filter: none; }
  .dock-btn:active { background: rgba(255,255,255,.14); }
  .dock-icon { font-size: 16px; line-height: 1; }

  /* ---------- Panel izquierdo = hoja "Precios", cerrada por defecto ---------- */
  .left-panel {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: 100% !important; min-width: 0 !important; max-width: 100% !important;
    height: auto !important;
    max-height: 78vh !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -10px 32px rgba(16, 32, 51, .28) !important;
    z-index: 700 !important;
    transform: translateY(100%) !important;
    transition: transform .25s ease !important;
  }
  .left-panel.sheet-open { transform: translateY(0) !important; }

  .left-sheet-handle {
    display: block !important;
    width: 44px; height: 5px;
    margin: 9px auto 0;
    padding: 0;
    border: none;
    border-radius: 99px;
    background: #d7e3f2;
    min-height: 5px;
  }
  .left-sheet-handle:hover { background: #bcd0e8; }

  /* Botón "Ocultar panel" de la hoja Precios: igual de visible que el del panel derecho */
  .close-left-btn {
    display: block !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    width: calc(100% - 24px) !important;
    margin: 6px 12px 0 !important;
    min-height: 38px !important;
    padding: 9px 12px !important;
    border-radius: 12px !important;
    background: var(--bad) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    border: none !important;
  }

  .app-header { padding: 6px 16px 6px !important; }
  .app-icon { width: 32px !important; height: 32px !important; font-size: 16px !important; border-radius: 10px !important; }
  .app-header h1 { font-size: 16.5px !important; }
  .app-header p { display: none !important; }

  /* En el celular el switch de 3 vías se mantiene visible en el header (además del
     acceso rápido del dock inferior). */
  .header-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    padding: 8px 0 10px !important;
  }
  .api-status { min-height: 26px !important; font-size: 10.5px !important; }
  .mode-seg { font-size: 11px !important; padding: 7px 4px !important; min-height: 30px !important; }

  /* Botón "Salir" del Modo Viaje: mismo tratamiento visual que "Ocultar panel" */
  .trip-mode-panel .section-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  #exitTripModeBtn {
    width: 100% !important;
    min-height: 40px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    background: var(--bad) !important;
    color: #fff !important;
    border: none !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    order: 2 !important;
  }

  .toolbar { grid-template-columns: 1fr 1fr !important; gap: 8px !important; padding: 10px 16px !important; }
  .toolbar label.sort-filter { grid-column: 1 / -1 !important; }
  .toolbar select, .toolbar input { height: 38px !important; font-size: 12.5px !important; }


  /* Acciones rápidas: chips horizontales deslizables en vez de columna gigante */
  .quick-actions {
    display: flex !important;
    grid-template-columns: unset !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    padding: 2px 16px 14px !important;
    scroll-snap-type: x proximity !important;
  }
  .quick-actions::-webkit-scrollbar { display: none; }
  .quick-actions button {
    flex: 0 0 auto !important;
    grid-column: unset !important;
    width: auto !important;
    white-space: nowrap !important;
    font-size: 12.5px !important;
    padding: 10px 15px !important;
    border-radius: 999px !important;
    scroll-snap-align: start !important;
  }

  .location-warning { padding: 10px 16px !important; font-size: 11px !important; }
  .location-warning span {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .trip-mode-panel { padding: 10px 16px 18px !important; }
  .left-panel .station-section { display: none !important; }

  /* ---------- Panel derecho = hoja superpuesta, más baja para no tapar el mapa ---------- */
  .side-panel {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: 100% !important; min-width: 0 !important; max-width: 100% !important;
    height: 52vh !important;
    max-height: 52vh !important;
    border-radius: 20px 20px 0 0 !important;
    transform: translateY(100%) !important;
    transition: transform .28s ease !important;
    z-index: 1000 !important;
    padding: 10px 14px !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
  }
  .layout:not(.side-collapsed) .side-panel { transform: translateY(0) !important; }
  .close-side-btn { position: sticky !important; top: 0 !important; z-index: 2 !important; }
  .detail-card #map, .station-detail { overflow: visible !important; }

  /* En Modo Viaje la hoja queda más baja todavía para ver bien el mapa mientras conduces */
  body.trip-mode-active .side-panel {
    height: 38vh !important;
    max-height: 38vh !important;
  }
  .trip-live-actions { margin-top: 12px !important; }

  /* ---------- Planificador de GPS: hoja inferior compacta, más chica y de una sola columna ---------- */
  .map-gps-card,
  .map-gps-card.compact {
    position: fixed !important;
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: 100% !important; max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 62vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 850 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }
  .map-gps-card h2 { font-size: 15px !important; }
  .map-gps-card .gps-mode-actions { gap: 7px !important; margin: 7px 0 !important; }
  .gps-mode-btn { font-size: 12px !important; padding: 9px 8px !important; }

  /* Estas reglas más específicas (con :not() y min-width en px) le ganaban a versiones
     anteriores de este mismo ajuste; se repiten aquí con la misma especificidad exacta
     para garantizar que la hoja de GPS quede en una sola columna sin desplazamiento. */
  .smart-gps-grid,
  .smart-gps-grid.origin-ready,
  .smart-gps-grid.map-destination-mode,
  .map-gps-card.compact .gps-grid,
  .smart-gps-grid:not(.origin-ready):not(.map-destination-mode),
  .map-gps-card.compact .gps-grid:not(.origin-ready):not(.map-destination-mode) {
    grid-template-columns: 1fr !important;
    gap: 7px !important;
    margin: 7px 0 !important;
  }
  .smart-gps-grid label,
  .smart-gps-grid #originField,
  .smart-gps-grid #destinationField,
  .map-gps-card.compact label {
    min-width: 0 !important;
    width: 100% !important;
    grid-column: 1 / -1 !important;
  }
  .smart-gps-grid input,
  .smart-gps-grid select,
  .map-gps-card input,
  .map-gps-card select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 38px !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
  }
  .suggestions { min-width: 0 !important; width: 100% !important; max-width: 100% !important; }
  .route-results { max-height: 110px !important; }

  .show-gps-btn {
    position: fixed !important;
    left: 14px !important; bottom: calc(74px + env(safe-area-inset-bottom)) !important; top: auto !important;
    z-index: 590 !important;
  }

  /* No permitir arrastrar/reposicionar el GPS en el celular: siempre pegado abajo */
  .map-gps-card.compact .section-head { cursor: default !important; }
  .map-gps-card.compact.dragging .section-head { cursor: default !important; }

  /* Mientras el GPS está abierto, oculta la hoja de Precios para no amontonar */
  body.gps-sheet-open .left-panel { display: none !important; }
}

@media (max-width: 420px) {
  .quick-actions button { font-size: 12px !important; padding: 9px 13px !important; }
  .trip-stats-grid { grid-template-columns: 1fr 1fr !important; }
  #tripLiveSpeed { font-size: 46px !important; }
  .dock-icon { font-size: 16px !important; }
  .dock-btn { font-size: 9.5px !important; }
}

/* ===== Refinamiento visual Modo Viaje y Diario móvil ===== */
.trip-mode-panel {
  background: linear-gradient(180deg, #0f2138 0%, #0b1728 100%);
  color: #eef6ff;
  border-bottom: 0;
}
.trip-mode-panel h2 { color: #fff; letter-spacing: -.2px; }
.trip-mode-panel label { color: #b9cae1; }
.trip-mode-panel select,
.trip-mode-panel input {
  background: #172942;
  color: #f4f8ff;
  border-color: #314967;
  box-shadow: none;
}
.trip-mode-panel select:focus,
.trip-mode-panel input:focus { border-color: #45a2ff; outline-color: rgba(69,162,255,.2); }
.trip-mode-panel #startTripModeBtn {
  background: linear-gradient(135deg, #278cf5, #1167c8);
  box-shadow: 0 10px 24px rgba(17,103,200,.3);
}
.trip-mode-panel .trip-hint { color: #91a8c6; }
.trip-mode-panel .simple-mode-link {
  color: #a9bdd7;
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  padding: 10px;
  margin-top: 10px;
}
.trip-live-card {
  border: 1px solid #d6e3f2;
  box-shadow: 0 18px 45px rgba(16,32,51,.15);
}
.trip-live-card .trip-speed-display {
  background: radial-gradient(circle at 50% 30%, #eef7ff, #fff 70%);
  border-radius: 20px;
  padding: 14px 10px;
  margin-bottom: 10px;
}
.trip-live-card .trip-stat-box { background: #f7faff; }
.trip-live-card .trip-stat-box.highlight { background: #eafaf3; }

@media (max-width: 920px) {
  #exitTripModeBtn { display: none !important; }
  body.trip-mode-active .side-panel {
    height: min(46vh, 420px) !important;
    max-height: min(46vh, 420px) !important;
    background: rgba(244,248,253,.98) !important;
  }
  .trip-live-card { border-radius: 18px !important; padding: 12px !important; }
  .trip-live-card .trip-speed-display { padding: 8px !important; }
  .trip-live-card .trip-speed-display span { font-size: 44px !important; }
  .trip-stats-grid { gap: 8px !important; }
  .trip-stat-box { padding: 10px !important; }
  .trip-stat-value { font-size: 17px !important; }

  .diario-fullscreen { overflow-x: hidden !important; }
  .diario-fullscreen-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding: max(16px, env(safe-area-inset-top)) 10px calc(92px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden !important;
  }
  .diario-fullscreen-header { align-items: flex-start !important; text-align: left !important; margin-bottom: 14px !important; }
  .diario-fullscreen-header h1 { font-size: clamp(24px, 7vw, 32px) !important; }
  .diario-fullscreen-header p { font-size: 14px !important; line-height: 1.4; }
  .diario-summary { gap: 8px !important; margin: 14px 0 18px !important; }
  .diario-summary-big .diario-summary-box { padding: 13px !important; min-width: 0; }
  .diario-summary-big .diario-summary-value { font-size: clamp(20px, 6vw, 28px) !important; }
  .diario-calendar-head {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    gap: 6px !important;
    font-size: 16px !important;
  }
  .diario-calendar-head button { padding: 8px 6px !important; font-size: 11px !important; min-width: 0 !important; }
  .diario-calendar-head button:last-child { text-align: right; }
  .diario-weekdays,
  .diario-days-grid { gap: 4px !important; width: 100% !important; }
  .diario-weekdays span { font-size: 10px !important; min-width: 0; }
  .diario-day,
  .diario-calendar-grid-big .diario-day {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 58px !important;
    aspect-ratio: auto !important;
    padding: 6px 4px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }
  .diario-calendar-grid-big .diario-day-num { font-size: 13px !important; }
  .diario-calendar-grid-big .diario-day-net {
    font-size: 9px !important;
    padding: 3px 2px !important;
    letter-spacing: -.2px;
  }
  .diario-fullscreen-hint { font-size: 12px !important; padding: 0 8px; }
}

/* ===== Optimización móvil y paneles v3 ===== */
body.mode-viaje .toolbar,
body.mode-viaje .quick-actions,
body.mode-viaje .location-warning,
body.mode-viaje .station-section,
body.mode-viaje .planner-left-panel {
  display: none !important;
}
body.mode-diario .quick-actions { display: none !important; }

/* El planificador vive dentro del panel izquierdo, no flotando sobre el mapa */
.planner-left-panel {
  background: #f7fbff;
  border-bottom: 1px solid var(--border);
}
.planner-left-panel > .section-head { margin-bottom: 8px; }
#plannerLeftHost { min-width: 0; }
.map-gps-card.planner-embedded,
#plannerLeftHost .map-gps-card {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: default !important;
}
#plannerLeftHost .map-gps-card > .section-head { display: none !important; }
#plannerLeftHost .gps-mode-actions { grid-template-columns: 1fr !important; }
#plannerLeftHost .smart-gps-grid,
#plannerLeftHost .gps-grid { grid-template-columns: 1fr !important; }
#plannerLeftHost .route-action-row { grid-template-columns: 1fr !important; }
#plannerLeftHost .route-results { display: none !important; }

/* Modal del día: panel lateral en PC */
#diarioModalBackdrop {
  justify-items: end;
  align-items: stretch;
  padding: 0;
  background: rgba(3, 9, 20, .42);
}
#diarioModalBackdrop .diario-modal {
  width: min(440px, 38vw);
  max-width: 440px;
  height: 100dvh;
  max-height: none;
  border-radius: 22px 0 0 22px;
  overflow-y: auto;
  animation: diarioSlideIn .24s ease;
}
@keyframes diarioSlideIn {
  from { transform: translateX(30px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Valores del calendario siempre legibles */
.diario-day-net {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 820px) {
  .left-panel {
    max-height: calc(100dvh - 78px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  .quick-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; overflow: visible !important; }
  .quick-actions button { width: 100% !important; min-width: 0 !important; white-space: normal !important; }
  body.mode-viaje .quick-actions { display: none !important; }

  #diarioModalBackdrop {
    justify-items: stretch;
    align-items: end;
  }
  #diarioModalBackdrop .diario-modal {
    width: 100%;
    max-width: none;
    height: min(76dvh, 760px);
    border-radius: 24px 24px 0 0;
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
    animation: diarioSheetUp .24s ease;
  }
  @keyframes diarioSheetUp {
    from { transform: translateY(35px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  .diario-summary-big {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .diario-summary-box { min-width: 0 !important; padding: 12px !important; }
  .diario-summary-label { font-size: 11px !important; }
  .diario-summary-value { font-size: clamp(22px, 7vw, 31px) !important; white-space: nowrap; }
  .diario-calendar-head {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    gap: 6px !important;
  }
  .diario-calendar-head button { white-space: normal !important; line-height: 1.1; }
  .diario-days-grid { gap: 4px !important; }
  .diario-day,
  .diario-calendar-grid-big .diario-day {
    min-width: 0 !important;
    min-height: 58px !important;
    padding: 5px 3px !important;
    overflow: hidden;
  }
  .diario-day-net,
  .diario-calendar-grid-big .diario-day-net {
    font-size: clamp(8px, 2.35vw, 10px) !important;
    padding: 3px 1px !important;
    letter-spacing: -.25px;
  }
  .planner-left-panel { padding: 12px 16px 22px !important; }
  #plannerLeftHost .gps-mode-actions { gap: 7px !important; }
}


/* ===== Ajustes v4: botones compactos y planificador en panel derecho ===== */
.quick-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 9px !important;
  padding: 12px !important;
}
.quick-actions button {
  min-width: 0 !important;
  min-height: 46px !important;
  padding: 9px 8px !important;
  border-radius: 13px !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  box-shadow: 0 5px 12px rgba(23,104,196,.13) !important;
}
.quick-actions #showNearbyBtn,
.quick-actions #nearestBtn,
.quick-actions #showCalculatorBtn {
  grid-column: 1 / -1 !important;
}
.quick-actions #openPlannerBtn,
.quick-actions #cheapNearBtn,
.quick-actions #showTopBtn {
  grid-column: auto !important;
}

/* El planificador nunca aparece flotando al iniciar */
#mapGpsCard.hidden,
#mapGpsCard.gps-hidden { display: none !important; }
.planner-right-card { overflow: auto !important; }
#plannerRightHost { min-width: 0; }
#plannerRightHost .map-gps-card,
.map-gps-card.planner-embedded {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: default !important;
}
#plannerRightHost .map-gps-card > .section-head { display: none !important; }
#plannerRightHost .gps-mode-actions { grid-template-columns: 1fr !important; gap: 8px !important; }
#plannerRightHost .smart-gps-grid,
#plannerRightHost .gps-grid { grid-template-columns: 1fr 1fr !important; gap: 9px !important; }
#plannerRightHost .gps-origin-field,
#plannerRightHost .gps-destination-field { grid-column: 1 / -1 !important; }
#plannerRightHost .route-action-row { grid-template-columns: 1fr 1fr !important; }
#plannerRightHost .route-results { display: block !important; max-height: 180px; }

@media (max-width: 820px) {
  .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .quick-actions #showNearbyBtn,
  .quick-actions #nearestBtn,
  .quick-actions #showCalculatorBtn { grid-column: 1 / -1 !important; }
  .quick-actions button { min-height: 48px !important; font-size: 12px !important; }
  #plannerRightHost .smart-gps-grid,
  #plannerRightHost .gps-grid,
  #plannerRightHost .route-action-row { grid-template-columns: 1fr !important; }
}


/* ===== Ajustes v5: navegación coherente y botones sin espacios vacíos ===== */
.quick-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
.quick-actions #showNearbyBtn,
.quick-actions #openPlannerBtn,
.quick-actions #cheapNearBtn,
.quick-actions #showTopBtn,
.quick-actions #nearestBtn,
.quick-actions #showCalculatorBtn {
  grid-column: auto !important;
  min-height: 48px !important;
  padding: 8px 6px !important;
  font-size: 11.5px !important;
  line-height: 1.15 !important;
}
.station-detail-head {
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}
.station-detail-head h2 { margin: 0 !important; text-align: center; }
#stationDetailBackBtn { width: auto !important; white-space: nowrap; }
#rightListBackBtn { width: auto !important; white-space: nowrap; }
.planner-right-card > .section-head { padding-right: 2px; }
@media (max-width: 390px) {
  .quick-actions button { font-size: 11px !important; }
}


/* ===== Resumen flotante de viaje activo (Mapa / Diario) ===== */
.trip-active-mini {
  position: fixed;
  top: 14px;
  right: 96px;
  z-index: 1725;
  width: min(560px, calc(100vw - 470px));
  min-width: 410px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(23, 104, 196, .22);
  border-radius: 17px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 32px rgba(16,32,51,.20);
  backdrop-filter: blur(12px);
  transition: right .26s ease, transform .22s ease, opacity .22s ease;
}
body.right-panel-open .trip-active-mini { right: 456px; }
.trip-active-mini-main { min-width: 0; display: grid; gap: 7px; }
.trip-active-mini-statusline { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.trip-active-mini-statusline > strong { color: var(--accent-dark); font-size: 16px; white-space: nowrap; }
.trip-active-mini-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.trip-active-mini-stats > span {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 10px;
  background: #f3f7fc;
  border: 1px solid #dbe6f3;
}
.trip-active-mini-stats small { color: var(--muted); font-size: 9px; font-weight: 800; }
.trip-active-mini-stats strong { color: var(--text); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trip-active-mini-actions { display: grid; grid-template-columns: 1fr; gap: 6px; width: 98px; }
.trip-active-mini-actions button { min-height: 31px; padding: 6px 8px; border-radius: 10px; font-size: 10.5px; }
.trip-mini-pause { background: #1f2c46; color: #fff; }
.trip-mini-finish { background: #fff0f0; color: #c92a2a; border: 1px solid #ff7777; }

@media (max-width: 1180px) and (min-width: 921px) {
  .trip-active-mini { right: 84px; width: 470px; min-width: 0; }
  body.right-panel-open .trip-active-mini { right: 438px; width: 390px; }
}

@media (max-width: 920px) {
  .trip-active-mini {
    top: auto;
    right: 12px !important;
    left: 12px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    width: auto;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 8px;
    border-radius: 16px;
    z-index: 1800;
  }
  .trip-active-mini-stats { gap: 5px; }
  .trip-active-mini-stats > span { padding: 5px 6px; }
  .trip-active-mini-stats small { font-size: 8px; }
  .trip-active-mini-stats strong { font-size: 10.5px; }
  .trip-active-mini-statusline > strong { font-size: 13px; }
  .trip-active-mini .movement-badge { font-size: 10px; padding: 4px 7px; }
  .trip-active-mini-actions { width: 82px; }
  .trip-active-mini-actions button { min-height: 29px; font-size: 9.5px; padding: 5px 6px; }
  body.mode-diario .trip-active-mini {
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

/* ===== v7: viaje activo sin solapamientos y vista de Viaje consistente ===== */
@media (min-width: 921px) {
  .trip-active-mini {
    top: 12px !important;
    left: calc(360px + (100vw - 360px) / 2) !important;
    right: auto !important;
    transform: translateX(-50%);
    width: min(520px, calc(100vw - 820px)) !important;
    min-width: 390px !important;
  }

  body.right-panel-open .trip-active-mini {
    left: calc(360px + (100vw - 360px - 430px) / 2) !important;
    right: auto !important;
    width: min(500px, calc(100vw - 850px)) !important;
  }

  body.mode-diario .trip-active-mini {
    left: auto !important;
    right: 24px !important;
    transform: none;
    width: 500px !important;
    min-width: 0 !important;
  }
}

/* No compite con el botón Detalles en pantallas medianas. */
@media (min-width: 921px) and (max-width: 1280px) {
  .trip-active-mini,
  body.right-panel-open .trip-active-mini {
    left: 52% !important;
    width: 410px !important;
    min-width: 0 !important;
  }
}

/* El panel izquierdo del modo viaje queda como una tarjeta, no como un bloque oscuro completo. */
body.mode-viaje .left-panel {
  background: #f5f9fe !important;
}
body.mode-viaje .trip-mode-panel {
  margin: 14px !important;
  padding: 16px !important;
  border-radius: 20px !important;
  border: 1px solid #c9d9ec !important;
  background: linear-gradient(160deg, #10223b, #0b1728) !important;
  box-shadow: 0 14px 30px rgba(16,32,51,.16) !important;
}
body.mode-viaje .trip-mode-panel .section-head {
  margin-bottom: 12px !important;
}
body.mode-viaje #tripRunningBlock .trip-mini-status {
  padding: 10px 0 8px;
}
body.mode-viaje #tripRunningBlock .trip-mode-actions {
  gap: 10px;
}
body.mode-viaje .simple-mode-link {
  margin-top: 10px;
  border: 1px solid rgba(255,255,255,.1);
}

@media (max-width: 920px) {
  /* En celular nunca tapa Detalles ni una hoja lateral abierta. */
  .trip-active-mini {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(74px + env(safe-area-inset-bottom)) !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
  }

  body.right-panel-open .trip-active-mini {
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    opacity: .96;
  }

  body.mode-diario .trip-active-mini {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }

  body.mode-viaje .trip-mode-panel {
    margin: 10px 12px 18px !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }

  /* Cuando el viaje está abierto en su pestaña, la información principal vive en el panel derecho. */
  body.mode-viaje #tripRunningBlock {
    display: grid;
    gap: 10px;
  }
}

/* ===== v8: permiso obligatorio y estado del viaje en panel derecho ===== */
.trip-right-panel-note {
  display: grid;
  gap: 7px;
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 14px;
  border: 1px solid rgba(92, 164, 255, .35);
  background: rgba(47, 139, 255, .12);
  color: #eaf3ff;
}
.trip-right-panel-note strong { font-size: 13px; }
.trip-right-panel-note span { color: #a9bdd9; font-size: 11px; line-height: 1.35; }
.trip-right-panel-note button { min-height: 34px; }

.trip-location-modal {
  width: min(430px, calc(100vw - 28px));
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 30px 80px rgba(16,32,51,.35);
  text-align: center;
  display: grid;
  gap: 12px;
}
.trip-location-icon { font-size: 42px; }
.trip-location-modal h2 { margin: 0; font-size: 22px; }
.trip-location-modal p { margin: 0; color: var(--muted); line-height: 1.45; }
.trip-location-help { font-size: 12px; }
.trip-location-actions { display: grid; gap: 9px; margin-top: 5px; }

@media (max-width: 920px) {
  .trip-location-modal { padding: 20px; border-radius: 20px; }
  .trip-right-panel-note { text-align: left; }
}


/* ===== v9: un solo panel visible y navegación limpia ===== */
#rightPanelToggle.hidden { display: none !important; }
body.right-panel-open #rightPanelToggle { display: none !important; }

/* Si el panel derecho muestra el viaje, el resumen flotante no se duplica. */
.layout[data-right-card="tripLiveCard"] ~ .trip-active-mini,
body.right-panel-open .trip-active-mini.trip-hidden-by-panel { display: none !important; }

@media (max-width: 920px) {
  /* Una sola hoja móvil: la izquierda se cierra cuando aparece la derecha. */
  body.right-panel-open .left-panel.sheet-open {
    transform: translateY(105%) !important;
    pointer-events: none !important;
  }

  .side-panel {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: min(72dvh, 680px) !important;
    margin: 0 !important;
    padding: 10px 12px calc(18px + env(safe-area-inset-bottom)) !important;
    border-radius: 24px 24px 0 0 !important;
    border: 1px solid rgba(16,32,51,.13) !important;
    border-bottom: 0 !important;
    background: rgba(244,248,253,.985) !important;
    box-shadow: 0 -18px 48px rgba(16,32,51,.25) !important;
    overflow-y: auto !important;
    z-index: 2100 !important;
    transform: translateY(105%) !important;
    transition: transform .28s ease !important;
  }
  .layout:not(.side-collapsed) .side-panel {
    transform: translateY(0) !important;
  }
  .side-panel::before {
    content: '';
    display: block;
    width: 54px;
    height: 5px;
    margin: 0 auto 10px;
    border-radius: 99px;
    background: #cbd7e6;
  }
  .side-panel > .close-side-btn {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    margin: 0 0 10px !important;
    min-height: 46px !important;
    border-radius: 15px !important;
  }
  body.right-panel-open::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 2050;
    background: rgba(10,22,39,.22);
    pointer-events: none;
  }
  body.right-panel-open .side-panel { z-index: 2100 !important; }
  body.right-panel-open .trip-active-mini { display: none !important; }

  /* El contenido principal queda visible detrás, sin un segundo panel abierto. */
  body.right-panel-open .left-panel { pointer-events: none; }
  body.right-panel-open .side-panel { pointer-events: auto; }

  .side-panel .card {
    border-radius: 18px !important;
    box-shadow: none !important;
  }
  .side-panel .detail-card,
  .side-panel .right-list-card,
  .side-panel .calculator-card,
  .side-panel .trip-live-card,
  .side-panel .planner-right-card {
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* v10: solicitud GPS de un solo toque */
button.location-loading,
button:disabled {
  cursor: wait;
  opacity: .72;
  transform: none !important;
  box-shadow: none !important;
}
.trip-location-modal button:disabled {
  pointer-events: none;
}

/* Enlace de marca MyMacavi */
.mymacavi-link {
  color: inherit;
  text-decoration: none;
}
.mymacavi-link:hover,
.mymacavi-link:focus-visible {
  color: #fff;
  text-decoration: underline;
}


/* v17: diagnóstico GPS y mejor lectura del modal de ubicación */
.trip-location-diagnostics{
  display:grid;gap:6px;margin-top:2px;padding:11px 12px;border-radius:13px;
  background:var(--panel-2);border:1px solid var(--border);color:var(--text);
  font-size:12px;line-height:1.4;text-align:left;
}
.trip-location-diagnostics strong{font-size:13px}
.trip-location-diagnostics span{display:block;color:var(--muted)}
.trip-location-actions{grid-template-columns:1fr 1fr!important}
@media(max-width:640px){.trip-location-actions{grid-template-columns:1fr!important}}
\n\n/* ======================================================================
   Combusticut v19 · Planificador estable + móvil más limpio
   ====================================================================== */
.route-selection-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 10px}.route-selection-summary span{display:grid;gap:2px;padding:9px 11px;border:1px solid var(--border);border-radius:12px;background:var(--panel-2);font-size:11px;color:var(--muted);min-width:0}.route-selection-summary b{color:var(--text);font-size:10px;text-transform:uppercase;letter-spacing:.4px}.planner-field-hidden{display:none!important}.vehicle-locked{background:var(--panel-2)!important;color:var(--muted)!important;cursor:not-allowed!important;opacity:.92}.ccv-consumption-note{display:block;margin-top:5px;color:var(--muted);font-size:10.5px;line-height:1.35}.route-edit-result{width:100%;margin-top:14px;min-height:42px}.trip-detail-card .section-head{display:grid;grid-template-columns:auto 1fr auto}.trip-detail-card .section-head h2{text-align:center;margin:0}.gps-stepbar{background:transparent;border:0}.ghost-step{background:transparent!important;border:0!important;box-shadow:none!important;padding-left:0!important;color:var(--accent)!important}.map-point-marker{font-size:0!important}.map-point-marker.origin::after,.map-point-marker.destination::after{font-size:14px!important;transform:rotate(45deg)}

/* Autocompletado: sobre el planificador y con selección claramente visible. */
.autocomplete-field .suggestions{z-index:2300!important;box-shadow:0 16px 34px rgba(0,0,0,.22)!important}.suggestion-item{padding:11px 12px!important}.suggestion-item:hover{background:var(--accent-soft)!important}

@media(max-width:920px){
  /* Hojas compactas que no quedan pegadas a los bordes ni tapan la barra inferior. */
  .left-panel{left:8px!important;right:8px!important;bottom:86px!important;width:auto!important;max-width:none!important;max-height:72dvh!important;border-radius:24px!important;border:1px solid rgba(113,151,186,.28)!important;overflow:auto!important;transform:translateY(calc(100% + 110px))!important}.left-panel.sheet-open{transform:translateY(0)!important}.left-sheet-handle{margin-top:8px!important}.close-left-btn{width:calc(100% - 20px)!important;margin:7px 10px 0!important;border-radius:14px!important;background:#244863!important}
  .side-panel{left:8px!important;right:8px!important;bottom:86px!important;width:auto!important;height:auto!important;max-height:72dvh!important;border-radius:24px!important;border:1px solid rgba(113,151,186,.30)!important;padding:10px!important;transform:translateY(calc(100% + 110px))!important;background:var(--panel)!important;box-shadow:0 20px 50px rgba(0,0,0,.35)!important}.layout:not(.side-collapsed) .side-panel{transform:translateY(0)!important}.side-panel .close-side-btn{min-height:40px!important;border-radius:13px!important;background:#244863!important;margin-bottom:8px!important}
  body.trip-mode-active .side-panel{height:auto!important;max-height:62dvh!important}
  .side-panel .card,.trip-detail-card,.right-list-card,.detail-card,.calculator-card{height:auto!important;max-height:none!important;min-height:0!important;border-radius:18px!important;overflow:visible!important}.right-list-card{display:block!important}.right-list-content{max-height:56dvh!important;overflow:auto!important}.right-list-results{overflow:visible!important}.right-list-row.full-row,.right-list-row.full-row:not(:has(.rank-badge)){grid-template-columns:52px minmax(0,1fr) auto!important;gap:10px!important}.right-list-row.full-row .rank-badge{display:none!important}.top-item-logo.big-logo .station-logo,.top-item-logo.big-logo .station-logo-fallback{width:50px!important;height:50px!important}.right-list-main strong{font-size:13px!important}.right-list-main small{font-size:11px!important}.top-item-price strong{font-size:16px!important}.price-change{font-size:9px!important;padding:3px 6px!important;margin-top:2px!important}
  .planner-right-card{padding:0!important;background:transparent!important;border:0!important}.planner-right-card>.section-head{display:none!important}.planner-right-host{min-height:0!important}.map-gps-card.planner-embedded,.map-gps-card.compact.planner-embedded{position:static!important;inset:auto!important;width:100%!important;max-width:none!important;max-height:60dvh!important;margin:0!important;padding:10px!important;border-radius:18px!important;box-shadow:none!important;overflow:auto!important;background:var(--panel)!important}.map-gps-card.planner-embedded .section-head{position:sticky;top:0;background:var(--panel);z-index:3;padding-bottom:6px}.gps-mode-actions,.gps-mode-actions.mode-location,.gps-mode-actions.mode-origin-map,.gps-mode-actions.mode-destination-map{grid-template-columns:1fr!important;gap:6px!important}.gps-mode-actions .gps-mode-btn{height:auto!important;min-height:40px!important;font-size:11px!important;padding:9px!important}.smart-gps-grid,.smart-gps-grid.origin-ready,.smart-gps-grid.map-destination-mode,.map-gps-card.compact .gps-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}.smart-gps-grid .autocomplete-field{grid-column:1/-1!important}.smart-gps-grid label{font-size:10.5px!important}.smart-gps-grid input,.smart-gps-grid select{height:40px!important;font-size:12px!important}.route-selection-summary{grid-template-columns:1fr!important}.route-action-row{grid-template-columns:1fr 1fr!important}.route-action-row button{font-size:11px!important;padding:9px 7px!important}.map-pick-notice,.route-results{font-size:10.5px!important}.gps-stepbar{font-size:11px!important}.ccv-consumption-note{font-size:9.5px!important}
  .trip-detail-card .section-head{grid-template-columns:auto 1fr auto!important;gap:6px!important}.trip-detail-card .section-head h2{font-size:14px!important}.trip-hero-result{padding:14px!important}.trip-hero-result strong{font-size:28px!important}.trip-metric-grid{gap:8px!important}.trip-metric{padding:10px!important}.trip-metric strong{font-size:17px!important}
  .mobile-dock{left:8px!important;right:8px!important;bottom:max(8px,env(safe-area-inset-bottom))!important;border:1px solid rgba(113,151,186,.28)!important;padding:5px!important}.dock-btn{font-size:9px!important;padding:6px 2px!important}.dock-icon{font-size:15px!important}
  .diario-fullscreen-inner{padding-top:max(18px,env(safe-area-inset-top))!important;padding-bottom:100px!important}.diario-fullscreen-header h1{font-size:24px!important;line-height:1.1!important}.diario-fullscreen-header p{font-size:12px!important}.diario-calendar-grid-big .diario-day{min-height:58px!important}
}
@media(max-width:430px){.smart-gps-grid,.smart-gps-grid.origin-ready,.smart-gps-grid.map-destination-mode,.map-gps-card.compact .gps-grid{grid-template-columns:1fr!important}.route-action-row{grid-template-columns:1fr!important}.trip-metric-grid{grid-template-columns:1fr 1fr!important}.right-list-row.full-row,.right-list-row.full-row:not(:has(.rank-badge)){grid-template-columns:46px minmax(0,1fr) auto!important}.top-item-logo.big-logo .station-logo,.top-item-logo.big-logo .station-logo-fallback{width:44px!important;height:44px!important}.top-item-price strong{font-size:14px!important}}

/* ======================================================================
   Combusticut v21 — Modo Viaje coherente entre mapa / detalles / diario
   ====================================================================== */

/* Wake Lock queda funcionando en silencio: no ocupa espacio visual. */
#tripWakeLockStatus { display: none !important; }

/* Tarjeta izquierda de Viaje más limpia. */
body.mode-viaje .trip-mode-panel {
  background: linear-gradient(165deg, #142a45 0%, #0d1c31 100%) !important;
  border: 1px solid #2b4b6e !important;
  box-shadow: 0 18px 38px rgba(2, 12, 27, .28) !important;
}
.trip-running-overview {
  display: grid;
  gap: 10px;
  padding: 13px;
  margin-bottom: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(139,190,255,.20);
}
.trip-running-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.trip-running-status-row #tripSpeedMini {
  color: #f4f8ff;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -.3px;
}
.trip-running-copy {
  margin: 0;
  color: #9eb6d3;
  font-size: 11.5px;
  line-height: 1.4;
}
.trip-details-btn {
  min-height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2d8cff, #1767c4);
  color: #fff;
  font-weight: 900;
}
body.mode-viaje #tripRunningBlock .trip-mode-actions {
  margin-top: 2px;
}
.trip-fullscreen-launch {
  width: 100%;
  min-height: 40px;
  margin-top: 10px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(155,194,239,.22) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.055) !important;
  color: #cfe3ff !important;
  text-align: center;
  font-size: 12px !important;
  font-weight: 900 !important;
  cursor: pointer;
}
.trip-fullscreen-launch:hover { background: rgba(255,255,255,.10) !important; }

/* La mini-tarjeta tiene un hogar dentro del panel derecho. */
.trip-mini-dock-host:empty { display: none; }
.trip-mini-dock-host:not(:empty) {
  display: block;
  margin: 2px 0 12px;
}
.trip-active-mini.docked,
body.right-panel-open .trip-active-mini.docked,
.side-panel .trip-active-mini.docked {
  position: static !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  display: grid !important;
  opacity: 1 !important;
  z-index: auto !important;
  margin: 0 !important;
  padding: 10px !important;
  border-radius: 14px !important;
  border: 1px solid #315171 !important;
  background: #10263d !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.trip-active-mini.docked .trip-active-mini-stats > span {
  background: #17314b !important;
  border-color: #2d4d6c !important;
}
.trip-active-mini.docked .trip-active-mini-stats small { color: #91aac8 !important; }
.trip-active-mini.docked .trip-active-mini-stats strong { color: #f4f8ff !important; }
.trip-active-mini.docked .trip-active-mini-statusline > strong { color: #8cc8ff !important; }

/* Panel derecho del viaje: limpio, legible y sin sensación de duplicación. */
.trip-live-card {
  display: grid;
  align-content: start;
  gap: 4px;
}
.trip-live-card > .section-head {
  margin-bottom: 4px !important;
}
.trip-live-card .trip-speed-display {
  border-radius: 18px;
  background: linear-gradient(180deg, #17314b, #112840);
  border: 1px solid #2d4d6c;
  margin-top: 2px;
}
.trip-live-card #tripLiveSpeed { color: #8bc8ff !important; }
.trip-live-card .trip-stat-box {
  background: #132b43 !important;
  border-color: #31506e !important;
}
.trip-live-card .trip-stat-box.highlight {
  background: #0d4338 !important;
  border-color: #1f806a !important;
}
.trip-live-card .trip-stat-label { color: #91aac8 !important; }
.trip-live-card .trip-stat-value { color: #f1f7ff !important; }
.trip-live-card .trip-stat-box.highlight .trip-stat-value { color: #61edbd !important; }

/* Pantalla completa propia de Viaje: sin plan, cuenta ni administración. */
.trip-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 5200;
  overflow-y: auto;
  background:
    radial-gradient(circle at 50% 20%, rgba(32,117,201,.16), transparent 38%),
    linear-gradient(180deg, #0c1a2a, #081522 70%);
  color: #eff6ff;
}
.trip-fullscreen-shell {
  width: min(760px, 100%);
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 22px max(24px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.trip-fullscreen-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
}
.trip-fullscreen-header > div {
  display: grid;
  justify-items: center;
  line-height: 1.1;
}
.trip-fullscreen-header small {
  color: #5fd5cb;
  font-size: 10px;
  letter-spacing: 1.8px;
  font-weight: 900;
}
.trip-fullscreen-header strong { font-size: 18px; }
.trip-fullscreen-back {
  width: auto;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #17314b;
  color: #dbeaff;
  border: 1px solid #31506e;
}
.trip-fullscreen-gps {
  justify-self: end;
  padding: 6px 9px;
  border-radius: 999px;
  background: #183654;
  color: #8dccff;
  font-size: 11px;
  font-weight: 900;
}
.trip-fullscreen-state-row {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}
.trip-fullscreen-speed {
  display: grid;
  justify-items: center;
  padding: 18px 0 8px;
}
.trip-fullscreen-speed strong {
  font-size: clamp(92px, 22vw, 170px);
  line-height: .85;
  letter-spacing: -6px;
  color: #eaf5ff;
  font-variant-numeric: tabular-nums;
}
.trip-fullscreen-speed span {
  color: #a7bed9;
  font-size: 14px;
  font-weight: 800;
  margin-top: 12px;
}
.trip-fullscreen-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.trip-fullscreen-stats article {
  min-height: 92px;
  padding: 14px 16px;
  display: grid;
  align-content: center;
  gap: 7px;
  border-radius: 18px;
  background: #122b43;
  border: 1px solid #31506e;
}
.trip-fullscreen-stats article.highlight {
  background: #0d4338;
  border-color: #1d7c67;
}
.trip-fullscreen-stats small { color: #91aac8; font-size: 11px; font-weight: 800; }
.trip-fullscreen-stats strong { color: #f5f9ff; font-size: 22px; }
.trip-fullscreen-stats .highlight strong { color: #62edbd; }
.trip-fullscreen-config {
  margin: 0;
  text-align: center;
  color: #a8bfd9;
  font-size: 12px;
  font-weight: 700;
}
.trip-fullscreen-actions {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-top: 20px;
}
.trip-fullscreen-actions button { min-height: 54px; font-size: 15px; }
body.trip-fullscreen-open { overflow: hidden !important; }

/* El resumen de viaje sobre Diario siempre tiene prioridad visual cuando no hay panel. */
body.mode-diario .trip-active-mini:not(.docked) {
  z-index: 1900 !important;
}

@media (max-width: 920px) {
  body.mode-viaje .trip-mode-panel {
    margin: 8px 10px 16px !important;
    padding: 12px !important;
  }
  .trip-running-overview { padding: 11px; }
  .trip-running-copy { font-size: 10.8px; }

  /* La tarjeta flotante deja más aire y no tapa el dock inferior. */
  .trip-active-mini:not(.docked) {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    padding: 8px !important;
  }
  body.mode-diario .trip-active-mini:not(.docked) {
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }
  .trip-active-mini.docked {
    grid-template-columns: 1fr !important;
  }
  .trip-active-mini.docked .trip-active-mini-actions {
    width: 100% !important;
    grid-template-columns: 1fr 1fr !important;
  }

  .trip-fullscreen-shell {
    padding: max(14px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
    gap: 14px;
  }
  .trip-fullscreen-header {
    grid-template-columns: 1fr auto;
  }
  .trip-fullscreen-header > div { display: none; }
  .trip-fullscreen-speed { padding-top: 28px; }
  .trip-fullscreen-speed strong { font-size: clamp(104px, 36vw, 150px); }
  .trip-fullscreen-stats article { min-height: 84px; padding: 12px; }
  .trip-fullscreen-stats strong { font-size: 20px; }
  .trip-fullscreen-actions { position: sticky; bottom: 0; padding-top: 12px; padding-bottom: max(4px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, #081522 22%); }
}

@media (max-width: 420px) {
  .trip-fullscreen-stats { gap: 8px; }
  .trip-fullscreen-stats article { min-height: 78px; border-radius: 15px; }
  .trip-fullscreen-stats small { font-size: 10px; }
  .trip-fullscreen-stats strong { font-size: 18px; }
  .trip-fullscreen-actions { gap: 8px; }
  .trip-fullscreen-actions button { min-height: 50px; font-size: 13px; }
}

/* ======================================================================
   Combusticut v22 — correcciones Android / una sola hoja móvil
   ====================================================================== */
@media (max-width: 920px) {
  /* Regla final: una tarjeta oculta SIEMPRE permanece oculta. Corrige una
     regla antigua que forzaba right-list-card a display:block. */
  .side-panel .panel-card-hidden,
  .side-panel .right-list-card.panel-card-hidden,
  .side-panel .trip-live-card.panel-card-hidden,
  .side-panel .detail-card.panel-card-hidden,
  .side-panel .trip-detail-card.panel-card-hidden,
  .side-panel .calculator-card.panel-card-hidden,
  .side-panel .planner-right-card.panel-card-hidden {
    display: none !important;
  }

  .side-panel .right-list-card:not(.panel-card-hidden) { display: block !important; }
  .side-panel .trip-live-card:not(.panel-card-hidden) { display: grid !important; }

  /* La hoja deja espacio real para el dock y nunca crece por tarjetas ocultas. */
  .side-panel {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(84px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-height: min(68dvh, 650px) !important;
    overflow: hidden !important;
    padding: 10px !important;
  }
  .side-panel > .close-side-btn {
    flex: 0 0 auto !important;
    margin-bottom: 8px !important;
  }
  .side-panel .card:not(.panel-card-hidden) {
    min-height: 0 !important;
    max-height: calc(min(68dvh, 650px) - 66px) !important;
    overflow: auto !important;
  }
  .right-list-card:not(.panel-card-hidden) {
    display: flex !important;
    flex-direction: column !important;
  }
  .right-list-content {
    min-height: 0 !important;
    max-height: none !important;
    overflow: auto !important;
    padding-right: 2px !important;
  }
  .right-list-results {
    display: grid !important;
    gap: 10px !important;
  }

  /* Estaciones cercanas: evita precio/logo/texto montados unos sobre otros. */
  .right-list-item.station-item {
    padding: 12px !important;
    border-radius: 16px !important;
  }
  .right-list-row.full-row,
  .right-list-row.full-row:not(:has(.rank-badge)) {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    grid-template-areas:
      "logo main"
      "price price" !important;
    gap: 8px 11px !important;
    align-items: center !important;
  }
  .right-list-row.full-row .rank-badge { display: none !important; }
  .right-list-row.full-row .top-item-logo { grid-area: logo !important; }
  .right-list-row.full-row .right-list-main { grid-area: main !important; }
  .right-list-row.full-row .top-item-price {
    grid-area: price !important;
    grid-column: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(113,151,186,.20) !important;
    text-align: left !important;
  }
  .top-item-logo.big-logo .station-logo,
  .top-item-logo.big-logo .station-logo-fallback {
    width: 52px !important;
    height: 52px !important;
    border-radius: 13px !important;
  }
  .right-list-main strong {
    font-size: 13px !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
  }
  .right-list-main small {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }
  .top-item-price strong {
    font-size: 21px !important;
    line-height: 1 !important;
  }
  .price-change {
    margin: 0 !important;
    font-size: 10px !important;
  }

  /* El resumen del viaje flota siempre encima del dock, también en Diario. */
  .trip-active-mini:not(.docked),
  body.mode-diario .trip-active-mini:not(.docked) {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(84px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    z-index: 1950 !important;
  }

  /* Diario es realmente pantalla completa: si se abre una herramienta del mapa,
     app.js sale de Diario primero, evitando hojas apiladas. */
  .diario-fullscreen {
    z-index: 1550 !important;
  }
  .diario-fullscreen-inner {
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
  }

  /* Dock estable y siempre por encima de hojas cerradas. */
  .mobile-dock {
    z-index: 2300 !important;
  }
  body.right-panel-open .mobile-dock {
    z-index: 2300 !important;
  }
}

@media (max-width: 430px) {
  .side-panel {
    left: 8px !important;
    right: 8px !important;
    max-height: 66dvh !important;
  }
  .right-list-row.full-row,
  .right-list-row.full-row:not(:has(.rank-badge)) {
    grid-template-columns: 48px minmax(0, 1fr) !important;
  }
  .top-item-logo.big-logo .station-logo,
  .top-item-logo.big-logo .station-logo-fallback {
    width: 46px !important;
    height: 46px !important;
  }
  .top-item-price strong { font-size: 19px !important; }
}