/* ==========================================================================
   Gas4Route · Stylesheet
   Dark & Light Theme Styles
   ========================================================================== */

/* Tipografía local autohospedada (cumplimiento RGPD) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: local('Inter'),
       local('Inter-Regular');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: local('JetBrains Mono'),
       local('JetBrainsMono-Regular');
}

:root {
  /* Identidad Gas4Route: Verde Ahorro Enérgico para Botones y Acciones */
  --brand-primary: #10b981;
  --brand-primary-hover: #059669;
  --brand-primary-light: #34d399;
  --brand-primary-text: #ffffff;
  --brand-primary-bg: rgba(16, 185, 129, 0.12);
  --brand-primary-border: rgba(16, 185, 129, 0.35);

  /* Acento Financiero: Verde Ahorro (Exclusivo para dinero en el bolsillo y precios más bajos) */
  --accent-emerald: #10b981;
  --accent-emerald-bg: rgba(16, 185, 129, 0.10);
  --accent-emerald-border: rgba(16, 185, 129, 0.28);

  /* Tema oscuro neutro (Negros puros OLED y carbón neutro) */
  --bg-app: #000000;
  --bg-surface: #0a0a0c;
  --bg-elevated: #141417;
  --bg-card: #111113;
  --bg-card-hover: #18181c;
  --bg-input: #111113;
  --bg-canvas: #000000;

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-muted: rgba(255, 255, 255, 0.14);
  --border-active: rgba(255, 255, 255, 0.26);
  --border-focus: rgba(255, 255, 255, 0.50);

  --text-hero: #ffffff;
  --text-primary: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-tertiary: #71717a;

  --accent-blue: #a1a1aa;
  --accent-blue-bg: rgba(255, 255, 255, 0.06);
  --accent-blue-border: rgba(255, 255, 255, 0.14);

  --accent-amber: #f59e0b;
  --accent-amber-bg: rgba(245, 158, 11, 0.12);

  --accent-rose: #f43f5e;
  --accent-rose-bg: rgba(244, 63, 94, 0.12);

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-full: 9999px;

  --shadow-dock: 0 4px 20px rgba(0, 0, 0, 0.60);
  --shadow-card: 0 3px 12px rgba(0, 0, 0, 0.40);
  --shadow-pin: 0 3px 10px rgba(0, 0, 0, 0.50);

  --sidebar-w: clamp(480px, 46vw, 680px);
}

:root[data-theme="dark"] {
  --brand-primary: #10b981;
  --brand-primary-hover: #059669;
  --brand-primary-light: #34d399;
  --brand-primary-text: #ffffff;
  --brand-primary-bg: rgba(16, 185, 129, 0.12);
  --brand-primary-border: rgba(16, 185, 129, 0.35);

  --bg-app: #000000;
  --bg-surface: #0a0a0c;
  --bg-elevated: #141417;
  --bg-card: #111113;
  --bg-card-hover: #18181c;
  --bg-input: #111113;
  --bg-canvas: #000000;

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-muted: rgba(255, 255, 255, 0.14);
  --border-active: rgba(255, 255, 255, 0.26);

  --text-hero: #ffffff;
  --text-primary: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-tertiary: #71717a;

  --accent-blue: #a1a1aa;
  --accent-blue-bg: rgba(255, 255, 255, 0.06);
  --accent-blue-border: rgba(255, 255, 255, 0.14);

  --shadow-dock: 0 4px 20px rgba(0, 0, 0, 0.60);
  --shadow-card: 0 3px 12px rgba(0, 0, 0, 0.40);
  --shadow-pin: 0 3px 10px rgba(0, 0, 0, 0.50);
}

:root[data-theme="light"] {
  --brand-primary: #059669;
  --brand-primary-hover: #047857;
  --brand-primary-light: #10b981;
  --brand-primary-text: #ffffff;
  --brand-primary-bg: rgba(5, 150, 105, 0.10);
  --brand-primary-border: rgba(5, 150, 105, 0.30);

  --bg-app: #f4f4f6;
  --bg-surface: #ffffff;
  --bg-elevated: #fafafa;
  --bg-card: #ffffff;
  --bg-card-hover: #f4f4f6;
  --bg-input: #ffffff;
  --bg-canvas: #f4f4f6;

  --border-subtle: #e4e4e7;
  --border-muted: #d4d4d8;
  --border-active: #a1a1aa;
  --border-focus: #09090b;

  --text-hero: #09090b;
  --text-primary: #18181b;
  --text-secondary: #71717a;
  --text-tertiary: #a1a1aa;

  --accent-emerald: #059669;
  --accent-emerald-bg: #ecfdf5;
  --accent-emerald-border: #a7f3d0;

  --accent-blue: #71717a;
  --accent-blue-bg: rgba(0, 0, 0, 0.04);
  --accent-blue-border: rgba(0, 0, 0, 0.10);

  --shadow-dock: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.03);
  --shadow-pin: 0 3px 8px rgba(0, 0, 0, 0.10);
}

/* Reseteo base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-primary);
  background-color: var(--bg-app);
  -webkit-font-smoothing: antialiased;
}

.tabular-nums {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -0.2px;
}

.g4r-svg-icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Utilidad de accesibilidad y lectores de pantalla */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Disposición principal de dos columnas en escritorio */
.g4r-app-shell {
  display: flex;
  flex-direction: row; /* Sidebar on LEFT, Map on RIGHT */
  width: 100vw;
  height: 100dvh;
  position: relative;
  overflow: hidden;
}

/* Panel lateral */
.g4r-sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  height: 100dvh;
  background: var(--bg-surface);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  z-index: 500;
  box-shadow: var(--shadow-dock);
  position: relative;
}

/* Cabecera del panel lateral */
.g4r-sidebar-header {
  padding: 16px 18px 12px 18px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-surface);
  transition: padding 280ms cubic-bezier(0.16, 1, 0.3, 1),
              gap 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.g4r-header-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.g4r-brand-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-width: max-content;
}

.g4r-brand-logo-wrap {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.g4r-brand-logo-img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 160ms ease;
  user-select: none;
  display: block;
}

.g4r-brand-logo-wrap:hover .g4r-brand-logo-img {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.g4r-brand-logo-wrap .g4r-status-indicator {
  position: absolute;
  bottom: -2px;
  right: -2px;
  border: 1.5px solid var(--bg-surface);
}

.g4r-status-indicator {
  width: 8.5px;
  height: 8.5px;
  border-radius: 50%;
  background: var(--accent-emerald);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.7);
  flex-shrink: 0;
  animation: g4rPulseLive 2.4s ease-in-out infinite;
}

@keyframes g4rPulseLive {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.85);
    opacity: 0.65;
  }
}

.g4r-status-indicator.is-offline {
  background: var(--accent-amber);
  box-shadow: 0 0 8px var(--accent-amber);
  animation: none;
}

.g4r-brand-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.g4r-brand-title {
  margin: 0;
  padding: 0;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--text-hero);
  text-transform: uppercase;
  line-height: 1.15;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.g4r-brand-num {
  color: var(--accent-emerald);
  font-weight: 900;
  padding: 0 1px;
}

.g4r-status-label {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color 150ms ease;
}

.g4r-status-label:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.g4r-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.g4r-vehicle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 140ms cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.g4r-vehicle-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent-blue-border);
  color: var(--text-hero);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.g4r-vehicle-btn:active {
  transform: translateY(0);
}

.g4r-vehicle-btn-text {
  font-size: 11px;
  color: var(--accent-blue);
  font-weight: 700;
}

.g4r-vsummary-full {
  display: inline;
}

.g4r-vsummary-short {
  display: none;
}

/* Botón de instalación de la PWA */
.g4r-pwa-install-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(56, 189, 248, 0.16);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.45);
  border-radius: var(--radius-full);
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 140ms cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.g4r-pwa-install-btn:hover {
  background: rgba(56, 189, 248, 0.28);
  border-color: #38bdf8;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.3);
}

.g4r-pwa-install-btn:active {
  transform: translateY(0);
}

.g4r-pwa-install-btn .g4r-svg-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.g4r-pwa-btn-full {
  display: inline;
}

.g4r-pwa-btn-short {
  display: none;
}

/* Botón de apoyo en cabecera */
.g4r-bmc-header-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 140ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
}

.g4r-bmc-header-pill:hover {
  background: rgba(245, 158, 11, 0.22);
  border-color: #f59e0b;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
}

.g4r-heart-svg {
  width: 13.5px;
  height: 13.5px;
  color: #f59e0b;
  fill: currentColor;
  flex-shrink: 0;
  transition: transform 140ms ease;
}

.g4r-bmc-header-pill:hover .g4r-heart-svg {
  transform: scale(1.18);
}

:root[data-theme="light"] .g4r-bmc-header-pill {
  background: rgba(245, 158, 11, 0.10);
  color: #d97706;
  border-color: rgba(245, 158, 11, 0.35);
}

:root[data-theme="light"] .g4r-heart-svg {
  color: #d97706;
}

.g4r-bmc-header-pill:active {
  transform: translateY(0);
}

.g4r-bmc-svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  flex-shrink: 0;
}

.g4r-bmc-header-short {
  display: none;
}

@media (max-width: 600px) {
  .g4r-pwa-install-btn {
    height: 30px;
    padding: 0 8px;
    font-size: 11px;
    gap: 4px;
    flex-shrink: 0;
  }
  .g4r-pwa-btn-full {
    display: none;
  }
  .g4r-pwa-btn-short {
    display: inline;
  }
  .g4r-header-top-row {
    gap: 6px;
    width: 100%;
    align-items: center;
    justify-content: space-between;
  }

  .g4r-brand-group {
    gap: 6px;
    flex-shrink: 0;
    min-width: max-content;
  }

  .g4r-brand-logo-wrap {
    width: 28px;
    height: 28px;
  }

  .g4r-brand-logo-img {
    width: 28px;
    height: 28px;
  }

  .g4r-brand-title {
    font-size: 13px;
  }

  .g4r-status-label {
    font-size: 10.5px;
  }

  .g4r-header-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 1;
    min-width: 0;
  }

  .g4r-vsummary-full {
    display: none;
  }

  .g4r-vsummary-short {
    display: inline;
  }

  .g4r-vehicle-btn {
    height: 30px;
    padding: 0 8px;
    gap: 5px;
    font-size: 11px;
    max-width: none;
    flex-shrink: 0;
    min-width: 0;
  }

  .g4r-vehicle-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  .g4r-vehicle-btn-text {
    font-size: 11px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .g4r-bmc-header-text {
    display: none;
  }

  .g4r-bmc-header-short {
    display: inline;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.2px;
  }

  .g4r-bmc-header-pill {
    height: 28px;
    padding: 0 7px;
    border-radius: var(--radius-full);
    gap: 3.5px;
    justify-content: center;
    flex-shrink: 0;
  }

  .g4r-bmc-svg {
    width: 12.5px;
    height: 12.5px;
  }

  .g4r-btn-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }

  .g4r-btn-icon svg {
    width: 13px;
    height: 13px;
  }
}

@media (max-width: 480px) {
  .g4r-status-label {
    font-size: 8.5px;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .g4r-pwa-btn-text {
    display: none;
  }

  .g4r-pwa-install-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    justify-content: center;
    border-radius: var(--radius-full);
  }

  .g4r-pwa-install-btn .g4r-svg-icon {
    width: 13px;
    height: 13px;
  }

  .g4r-vehicle-btn {
    height: 28px;
    max-width: 85px;
    padding: 0 7px;
    gap: 4px;
  }

  .g4r-vsummary-short {
    font-size: 10.5px;
  }

  .g4r-bmc-header-text {
    display: none;
  }

  .g4r-bmc-header-short {
    display: inline;
    font-size: 10px;
    font-weight: 700;
  }

  .g4r-bmc-header-pill {
    width: auto;
    height: 28px;
    padding: 0 7px;
    gap: 3.5px;
    justify-content: center;
  }

  .g4r-btn-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }

  .g4r-header-actions {
    gap: 4px;
    flex-shrink: 0;
  }
}

@media (max-width: 360px) {
  .g4r-header-top-row {
    gap: 3px;
  }

  .g4r-header-actions {
    gap: 3px;
  }

  .g4r-brand-group {
    gap: 4px;
  }

  .g4r-brand-title {
    font-size: 11.5px;
  }

  .g4r-status-label {
    font-size: 7.5px;
    max-width: 85px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .g4r-bmc-header-short {
    display: none;
  }

  .g4r-bmc-header-pill {
    width: 28px;
    height: 28px;
    padding: 0;
    justify-content: center;
  }

  .g4r-vehicle-btn {
    padding: 0 5px;
    max-width: 72px;
    height: 28px;
    gap: 3px;
    flex-shrink: 0;
  }

  .g4r-vsummary-short {
    font-size: 10px;
  }
}

.g4r-btn-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 140ms cubic-bezier(0.16, 1, 0.3, 1);
}

.g4r-btn-icon:hover {
  background: var(--bg-card-hover);
  color: var(--text-hero);
  border-color: var(--border-muted);
  transform: translateY(-1px);
}

.g4r-btn-icon:active {
  transform: scale(0.92);
  transition-duration: 60ms;
}

.g4r-btn-icon.is-spinning svg {
  animation: g4rSpin 0.7s linear infinite;
}

@keyframes g4rSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Selector segmentado de modos */
.g4r-mode-selector {
  position: relative;
  display: flex;
  width: 100%;
  height: 38px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  padding: 3px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-sizing: border-box;
  gap: 0;
  user-select: none;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25);
}

.g4r-mode-glider {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / 3);
  background: var(--bg-surface);
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

.g4r-mode-selector[data-active="radius"] .g4r-mode-glider {
  transform: translateX(0);
}

.g4r-mode-selector[data-active="route"] .g4r-mode-glider {
  transform: translateX(100%);
}

.g4r-mode-selector[data-active="radar"] .g4r-mode-glider {
  transform: translateX(200%);
}

:root[data-theme="light"] .g4r-mode-selector {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.04);
}

:root[data-theme="light"] .g4r-mode-glider {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.g4r-mode-btn {
  flex: 1 1 0px;
  width: 0;
  min-width: 0;
  max-width: 33.333333%;
  height: 100%;
  padding: 0 4px;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  z-index: 1;
  transition: color 180ms ease, opacity 180ms ease;
}

.g4r-mode-btn span {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  font-size: 11px;
  line-height: 1;
}

.g4r-mode-label-desktop {
  display: inline-block;
}

.g4r-mode-label-mobile {
  display: none !important;
}

@media (max-width: 600px) {
  .g4r-mode-label-desktop {
    display: none !important;
  }
  .g4r-mode-label-mobile {
    display: inline-block !important;
  }
}

.g4r-mode-btn .g4r-svg-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.g4r-mode-btn:hover:not(.is-active) {
  color: var(--text-primary);
}

.g4r-mode-btn:active {
  transform: scale(0.97);
  transition-duration: 70ms;
}

.g4r-mode-btn.is-active {
  color: #ffffff !important;
  font-weight: 600;
}

:root[data-theme="light"] .g4r-mode-btn {
  color: #64748b;
}

:root[data-theme="light"] .g4r-mode-btn:hover:not(.is-active) {
  color: #0f172a;
}

:root[data-theme="light"] .g4r-mode-btn.is-active {
  color: #0f172a !important;
}

/* Selector de combustibles */
.g4r-fuel-pills-bar {
  display: flex;
  gap: 5px;
  padding: 4px 2px;
  margin: -4px -2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.g4r-fuel-pills-bar::-webkit-scrollbar {
  display: none;
}

.g4r-fuel-pill {
  flex: 1;
  padding: 7px 6px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border-radius: var(--radius-xs);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: all 130ms ease;
  position: relative;
}

.g4r-fuel-pill:hover {
  border-color: var(--border-muted);
  background: var(--bg-card-hover);
  color: var(--text-hero);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.g4r-fuel-pill:active {
  transform: scale(0.97);
  transition-duration: 50ms;
}

.g4r-fuel-pill.is-active {
  border-color: var(--accent-emerald);
  background: var(--accent-emerald-bg);
  color: var(--accent-emerald);
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--accent-emerald);
}

/* Barra de filtros para el conductor */
.g4r-tactical-filters-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 0;
}

.g4r-tactical-filters-bar::-webkit-scrollbar {
  display: none;
}

.g4r-tactical-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 140ms cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.g4r-tactical-chip .g4r-svg-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--text-tertiary);
  transition: color 120ms ease;
}

.g4r-tactical-chip:hover {
  background: var(--bg-hover);
  border-color: var(--border-muted);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.g4r-tactical-chip:hover .g4r-svg-icon {
  color: var(--text-secondary);
}

.g4r-tactical-chip:active {
  transform: scale(0.94);
  transition-duration: 60ms;
}

.g4r-tactical-chip.is-active {
  background: rgba(99, 102, 241, 0.14);
  border-color: rgba(99, 102, 241, 0.5);
  color: #818cf8;
  font-weight: 600;
  transform: translateY(0);
}

.g4r-tactical-chip.is-active .g4r-svg-icon {
  color: #818cf8;
}

#filterLowCostBtn.is-active {
  background: rgba(16, 185, 129, 0.16);
  border-color: rgba(16, 185, 129, 0.5);
  color: #34d399;
}

#filterLowCostBtn.is-active .g4r-svg-icon {
  color: #34d399;
}

#filterPremiumBtn.is-active {
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.5);
  color: #fbbf24;
}

#filterPremiumBtn.is-active .g4r-svg-icon {
  color: #fbbf24;
}

@keyframes g4rPanelEnter {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Búsqueda manual de direcciones */
.g4r-search-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  transition: border-color 140ms ease;
}

.g4r-search-row:focus-within {
  border-color: var(--accent-emerald);
}

.g4r-search-row input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-hero);
  font-size: 12px;
  outline: none;
  min-width: 0;
}

.g4r-search-row input::placeholder {
  color: var(--text-muted);
  opacity: 0.75;
}

.g4r-search-clear-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color 120ms ease;
  line-height: 1;
}

.g4r-search-clear-btn:hover {
  color: var(--text-hero);
}

.g4r-btn-search {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 140ms cubic-bezier(0.16, 1, 0.3, 1);
}

.g4r-btn-search:hover {
  background: var(--accent-emerald);
  color: #ffffff;
  border-color: var(--accent-emerald);
  transform: translateY(-1px);
}

.g4r-btn-search:active {
  transform: scale(0.94);
  transition-duration: 60ms;
}

/* Controles de incremento y decremento */
.g4r-input-stepper {
  display: flex;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 2px 4px;
  transition: border-color 120ms ease;
}

.g4r-input-stepper:focus-within {
  border-color: var(--accent-emerald);
}

.g4r-stepper-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 4px 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  border-radius: 4px;
  transition: all 120ms cubic-bezier(0.16, 1, 0.3, 1);
}

.g4r-stepper-btn:hover {
  background: var(--bg-elevated);
  color: var(--text-hero);
}

.g4r-stepper-btn:active {
  transform: scale(0.88);
  transition-duration: 50ms;
}

.g4r-input-stepper input {
  flex: 1;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text-hero);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  outline: none;
}

.g4r-stepper-unit {
  font-size: 10px;
  color: var(--text-tertiary);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  padding-right: 4px;
  user-select: none;
}

/* Panel de ruta */
.g4r-route-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  max-height: none;
  opacity: 1;
  overflow: visible;
  transition: opacity 200ms ease, border-color 200ms ease;
}

.g4r-route-box {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 12px);
  padding: 8px 10px;
}

.g4r-route-inputs-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  position: relative;
}

.g4r-route-inputs-container::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 15px;
  bottom: 15px;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent-emerald) 0%, var(--accent-blue) 100%);
  border-radius: 2px;
  opacity: 0.6;
  z-index: 1;
  pointer-events: none;
}

.g4r-route-swap-btn {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  border: 1px solid var(--border-muted);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--shadow-card);
}

.g4r-route-swap-btn:hover {
  background: var(--bg-card-hover);
  color: var(--accent-blue);
  border-color: var(--accent-blue);
  transform: scale(1.06);
}

.g4r-route-swap-btn.is-spinning svg {
  transform: rotate(180deg);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.g4r-route-swap-btn svg {
  width: 14px;
  height: 14px;
}

.g4r-route-input-action {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  transition: all 140ms ease;
  flex-shrink: 0;
}

.g4r-route-input-action:hover {
  color: var(--accent-emerald);
  transform: scale(1.12);
}

.g4r-route-row {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 5px 9px;
  min-height: 32px;
  position: relative;
  z-index: 2;
  transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.g4r-route-row:focus-within {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 1px var(--accent-blue);
}

.g4r-route-row input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-hero);
  font-size: 12px;
  outline: none;
  transition: font-size 180ms ease;
}

.g4r-route-node-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.g4r-node-origin {
  background: var(--accent-emerald);
  box-shadow: 0 0 5px rgba(16, 185, 129, 0.6);
}

.g4r-node-dest {
  background: var(--accent-blue);
  box-shadow: 0 0 5px rgba(59, 130, 246, 0.6);
}

#calcRouteBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 700;
  min-height: 38px;
  border-radius: var(--radius-sm, 8px);
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 3px 12px rgba(16, 185, 129, 0.32);
  margin-top: 2px;
  opacity: 1;
  visibility: visible;
  cursor: pointer;
  transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

#calcRouteBtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(16, 185, 129, 0.45);
}

#calcRouteBtn:active {
  transform: translateY(0);
}

#calcRouteBtn svg {
  width: 14px;
  height: 14px;
}

/* ==========================================================================
   Dynamic Collapsible Top Menu on Scroll (Organic Screen Space Reclamation)
   ========================================================================== */

.g4r-sidebar.is-scrolled .g4r-sidebar-header {
  padding: 10px 18px 8px 18px;
  gap: 8px;
}

.g4r-sidebar.is-scrolled .g4r-brand-logo-img,
.g4r-sidebar.is-scrolled .g4r-brand-logo-wrap {
  width: 26px;
  height: 26px;
}

.g4r-sidebar.is-scrolled .g4r-bmc-header-pill {
  max-width: 0;
  opacity: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Los filtros se colapsan al hacer scroll */
.g4r-sidebar.is-scrolled .g4r-radius-chips-bar {
  max-height: 0;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.g4r-sidebar.is-scrolled .g4r-mode-selector {
  height: 34px;
}

.g4r-sidebar.is-scrolled .g4r-mode-btn {
  font-size: 11px;
}

/* ==========================================================================
/* Menú y transiciones de panel */
.g4r-panel-enter,
.g4r-menu-enter {
  animation: g4rPanelFadeIn 180ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes g4rPanelFadeIn {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Tarjeta de Barómetro y Radar Nacional */
.g4r-radar-card {
  margin: 6px 14px 4px 14px;
  padding: 8px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
}

.g4r-radar-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
}

.g4r-radar-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent-emerald, #10b981);
  background: rgba(16, 185, 129, 0.12);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(16, 185, 129, 0.28);
  white-space: nowrap;
}

.g4r-radar-pulsing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-emerald, #10b981);
  box-shadow: 0 0 6px var(--accent-emerald, #10b981);
  animation: g4rPulseDot 1.8s ease-in-out infinite;
}

@keyframes g4rPulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.55; }
}

.g4r-radar-scope-divider {
  opacity: 0.5;
}

.g4r-radar-scope-label {
  font-size: 10.5px;
  color: var(--text-secondary);
  font-weight: 600;
}

.g4r-radar-trend-btn {
  margin: 0;
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-hero);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.g4r-radar-trend-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-muted);
  transform: translateY(-1px);
}

.g4r-radar-trend-btn:active {
  transform: scale(0.98);
}

.g4r-radar-trend-btn .g4r-svg-icon {
  width: 13px;
  height: 13px;
  color: var(--accent-emerald, #10b981);
}

:root[data-theme="light"] .g4r-radar-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

:root[data-theme="light"] .g4r-radar-trend-btn {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  color: #0f172a;
}

:root[data-theme="light"] .g4r-radar-trend-btn:hover {
  background: rgba(0, 0, 0, 0.07);
  border-color: rgba(0, 0, 0, 0.14);
}

:root[data-theme="light"] .g4r-radar-exec-col.is-record {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.10) 0%, rgba(5, 150, 105, 0.02) 100%);
  border-color: rgba(5, 150, 105, 0.35);
  box-shadow: 0 1px 4px rgba(5, 150, 105, 0.06);
}

:root[data-theme="light"] .g4r-radar-exec-col.is-record .g4r-exec-col-label {
  color: #059669;
}

:root[data-theme="light"] .g4r-exec-record-dot {
  background: #059669;
  box-shadow: 0 0 5px rgba(5, 150, 105, 0.6);
}

:root[data-theme="light"] .g4r-exec-col-price.g4r-exec-price-hero {
  color: #059669;
}

:root[data-theme="light"] .g4r-exec-col-tag {
  color: #059669;
  background: rgba(5, 150, 105, 0.10);
  border-color: rgba(5, 150, 105, 0.28);
}

:root[data-theme="light"] .g4r-exec-col-price.g4r-exec-price-ref {
  color: #0f172a;
}

:root[data-theme="light"] .g4r-exec-station-brand {
  color: #0f172a;
}

/* Contenedor del listado de gasolineras */
.g4r-list-pane {
  flex: 1;
  overflow-y: auto;
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-muted) transparent;
}

.g4r-list-summary {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-tertiary);
  padding-bottom: 2px;
}

/* Skeleton Placeholders para estabilizar el layout y eliminar CLS */
.g4r-card-skeleton {
  min-height: 148px;
  pointer-events: none;
  user-select: none;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}

.g4r-skeleton-block {
  background: linear-gradient(90deg, var(--bg-surface) 25%, var(--bg-elevated) 50%, var(--bg-surface) 75%);
  background-size: 200% 100%;
  animation: g4r-skel-shimmer 1.8s infinite ease-in-out;
  border-radius: var(--radius-xs, 6px);
}

@keyframes g4r-skel-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.g4r-skel-title {
  width: 140px;
  height: 18px;
}

.g4r-skel-subtitle {
  width: 190px;
  height: 13px;
  margin-top: 6px;
}

.g4r-skel-price {
  width: 72px;
  height: 28px;
  border-radius: var(--radius-sm, 8px);
}

.g4r-skel-actions {
  width: 100%;
  height: 36px;
  border-radius: var(--radius-sm, 8px);
  margin-top: auto;
}

/* Tarjetas de gasolineras: limpias, sin borde exterior perimetral para evitar sensación de apelotonamiento */
.g4r-card {
  background: var(--bg-card);
  border: none;
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 140ms ease,
              background-color 140ms ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  content-visibility: auto;
  contain-intrinsic-size: auto 155px;
  contain: layout style;
}

:root[data-theme="light"] .g4r-card {
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* Tarjetas inmediatamente sobre el fold inicial se renderizan sin latencia de límites */
.g4r-card:nth-child(-n+2) {
  content-visibility: visible;
}

.g4r-btn-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 16px;
  background: var(--bg-surface);
  border: 1px dashed var(--border-muted);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 140ms cubic-bezier(0.16, 1, 0.3, 1);
  margin: 6px 0 10px 0;
}

.g4r-btn-load-more:hover {
  background: var(--bg-elevated);
  border-color: var(--accent-blue-border);
  color: var(--text-hero);
  border-style: solid;
  transform: translateY(-1px);
}

.g4r-btn-load-more:active {
  transform: scale(0.98);
  transition-duration: 60ms;
}

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

@media (hover: hover) and (pointer: fine) {
  .g4r-card:hover {
    background: var(--bg-card-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
  }

  :root[data-theme="light"] .g4r-card:hover {
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  }
}

.g4r-card:active {
  transform: translateY(0) scale(0.988);
  transition-duration: 60ms;
}

.g4r-card.is-unreachable {
  opacity: 0.65;
  border: 1px dashed rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.03);
}

.g4r-card.is-unreachable:hover {
  opacity: 0.9;
  border-color: rgba(239, 68, 68, 0.55);
}

.g4r-card.is-highlight {
  box-shadow: 0 0 0 1.5px var(--accent-emerald), 0 4px 16px rgba(16, 185, 129, 0.18);
  background: var(--accent-emerald-bg);
}

.g4r-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.g4r-card-identity {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
}

.g4r-card-brand-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.g4r-card-brand-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-hero);
  letter-spacing: -0.2px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.g4r-card-location {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.g4r-card-price-hero {
  text-align: right;
  line-height: 1;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 3px;
}

.g4r-hero-price-line {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
}

.g4r-hero-price-num {
  font-size: 21px;
  font-weight: 800;
  color: var(--text-hero);
  letter-spacing: -0.5px;
}

.g4r-hero-price-unit {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-left: 2px;
}

/* Pastilla destacada de ahorro en la cabecera del precio */
.g4r-hero-saving-pill {
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
  font-size: 11px;
  font-weight: 700;
  padding: 2.5px 6.5px;
  border-radius: var(--radius-xs, 5px);
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.35);
  white-space: nowrap;
  letter-spacing: -0.1px;
  line-height: 1.15;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.12);
  transition: all 120ms ease;
  user-select: none;
}

.g4r-hero-saving-pill.is-best {
  background: rgba(16, 185, 129, 0.22);
  border-color: rgba(16, 185, 129, 0.55);
  color: #34d399;
  box-shadow: 0 1px 6px rgba(16, 185, 129, 0.22);
}

:root[data-theme="light"] .g4r-hero-saving-pill {
  background: rgba(5, 150, 105, 0.12);
  color: #047857;
  border-color: rgba(5, 150, 105, 0.32);
}

:root[data-theme="light"] .g4r-hero-saving-pill.is-best {
  background: rgba(5, 150, 105, 0.18);
  color: #065f46;
  border-color: rgba(5, 150, 105, 0.45);
}

.g4r-hero-saving-pill .g4r-saving-sparkle {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  color: currentColor;
}

.g4r-hero-saving-pill small {
  font-size: 9.5px;
  font-weight: 600;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.g4r-hero-promo-sub {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 2px;
}

.g4r-strikethrough-price {
  font-size: 10.5px;
  color: var(--text-tertiary);
  text-decoration: line-through;
  letter-spacing: -0.2px;
}

.g4r-promo-discount-pill {
  font-size: 10px;
  font-weight: 700;
  color: #0284c7;
  background: rgba(2, 132, 199, 0.15);
  border: 1px solid rgba(2, 132, 199, 0.35);
  padding: 2px 5px;
  border-radius: var(--radius-sm);
  letter-spacing: -0.2px;
}

.g4r-promo-hint-pill {
  font-size: 9px;
  color: var(--text-tertiary);
  background: var(--bg-card);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border-subtle);
}

.g4r-promo-available-pill {
  font-size: 9.5px;
  font-weight: 700;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  letter-spacing: -0.2px;
}

/* Distintivos y etiquetas */
.g4r-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-full);
}

.g4r-badge-optimal {
  background: var(--accent-emerald-bg);
  color: var(--accent-emerald);
  border: 1px solid var(--accent-emerald-border);
}

.g4r-badge-origin {
  background: var(--accent-blue-bg);
  color: var(--accent-blue);
  border: 1px solid var(--accent-blue-border);
}

.g4r-badge-dest {
  background: var(--accent-blue-bg);
  color: var(--accent-blue);
  border: 1px solid var(--accent-blue-border);
}

.g4r-badge-warning {
  background: var(--accent-amber-bg);
  color: var(--accent-amber);
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.g4r-badge-base {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border: 1px solid var(--border-muted);
}

.g4r-badge-loss {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.g4r-badge-promo {
  background: rgba(2, 132, 199, 0.14);
  color: #0284c7;
  border: 1px solid rgba(2, 132, 199, 0.35);
  font-weight: 700;
}

.g4r-badge-promo-info {
  background: rgba(245, 158, 11, 0.10);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.28);
  font-weight: 600;
  font-size: 9.5px;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
}

:root[data-theme="light"] .g4r-badge-promo-info {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.35);
}

.g4r-badge-timing {
  font-size: 9.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.g4r-timing-svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

/* Píldora de estado de apertura en tiempo real */
.g4r-schedule-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9.5px;
  font-weight: 600;
  padding: 1.5px 6px;
  border-radius: var(--radius-full, 9999px);
  line-height: 1.2;
  white-space: nowrap;
}

.g4r-schedule-pill.is-open {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.28);
}

.g4r-schedule-pill.is-closed {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.28);
}

:root[data-theme="light"] .g4r-schedule-pill.is-open {
  background: rgba(5, 150, 105, 0.10);
  color: #059669;
  border-color: rgba(5, 150, 105, 0.25);
}

:root[data-theme="light"] .g4r-schedule-pill.is-closed {
  background: rgba(220, 38, 38, 0.10);
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.25);
}

.g4r-card-timing-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.g4r-badge-timing.g4r-timing-wait {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.38);
}

.g4r-badge-timing.g4r-timing-good {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.38);
}

/* Franjas de coste y ahorro */
.g4r-card-cost-strip {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  padding: 6px 10px;
}

.g4r-cost-strip-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.g4r-strip-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--text-tertiary);
}

.g4r-strip-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--accent-emerald);
}

.g4r-cost-strip-breakdown {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 3px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}

.g4r-val-profit {
  color: var(--accent-emerald);
}

.g4r-val-loss {
  color: var(--accent-rose);
}

.g4r-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 2px;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.g4r-card-distance {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-hero);
  letter-spacing: -0.15px;
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.g4r-card-distance .g4r-icon-subtle {
  width: 15px;
  height: 15px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.g4r-btn-text-action {
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.15s ease;
}

.g4r-btn-text-action:hover {
  opacity: 0.8;
}

/* Barra de radio de búsqueda */
.g4r-radius-chips-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  animation: g4rPanelEnter 200ms cubic-bezier(0.16, 1, 0.3, 1) both;
  max-height: 32px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 280ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),
              margin 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.g4r-radius-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-tertiary);
}

.g4r-radius-chip {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 10.5px;
  font-weight: 600;
  padding: 2.5px 8px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 140ms cubic-bezier(0.16, 1, 0.3, 1);
}

.g4r-radius-chip:hover {
  border-color: var(--text-secondary);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.g4r-radius-chip:active {
  transform: scale(0.94);
  transition-duration: 60ms;
}

.g4r-radius-chip.is-active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-primary-text, #ffffff);
  font-weight: 700;
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   Dual Strategy Selector: Más baratas (€/L) vs Más rentable (Mi coche)
   ========================================================================== */

.g4r-strategy-selector {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  background: rgba(255, 255, 255, 0.04);
  padding: 3px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  width: 100%;
}

:root[data-theme="light"] .g4r-strategy-selector {
  background: rgba(0, 0, 0, 0.04);
}

.g4r-strategy-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 140ms cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.g4r-strategy-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.g4r-strategy-btn:active {
  transform: scale(0.97);
}

.g4r-strategy-btn.is-active {
  background: var(--bg-surface);
  color: var(--accent-emerald);
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  border-color: rgba(16, 185, 129, 0.35);
}

:root[data-theme="light"] .g4r-strategy-btn.is-active {
  background: #ffffff;
  color: #059669;
  border-color: rgba(5, 150, 105, 0.35);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Barra rápida de consumo del vehículo */
.g4r-quick-vehicle-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  animation: g4rFadeIn 160ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.g4r-quick-veh-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.g4r-quick-veh-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.g4r-quick-veh-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-hero);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.g4r-quick-veh-current {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-emerald);
  background: var(--accent-emerald-bg);
  border: 1px solid var(--accent-emerald-border);
  padding: 1.5px 7px;
  border-radius: var(--radius-full);
}

.g4r-quick-fuel-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: transparent;
  border: none;
  padding: 0;
}

.g4r-quick-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.g4r-quick-autonomy-badge {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-emerald);
}

.g4r-quick-levels-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.g4r-quick-level-chip {
  padding: 4px 2px;
  font-size: 10.5px;
  font-weight: 600;
  border-radius: var(--radius-full);
  text-align: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 120ms ease;
  white-space: nowrap;
}

.g4r-quick-level-chip:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.g4r-quick-level-chip:active {
  transform: scale(0.95);
}

.g4r-quick-level-chip.is-active {
  background: rgba(16, 185, 129, 0.14);
  border-color: var(--accent-emerald);
  color: var(--accent-emerald);
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--accent-emerald);
}

.g4r-quick-liters-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 1px;
}

.g4r-quick-sublabel {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.g4r-quick-liter-chip {
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 600;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 120ms ease;
}

.g4r-quick-liter-chip:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

.g4r-quick-liter-chip.is-active {
  background: rgba(16, 185, 129, 0.12);
  border-color: var(--accent-emerald);
  color: var(--accent-emerald);
  font-weight: 700;
}

.g4r-quick-edit-btn {
  background: transparent !important;
  border: none !important;
  color: var(--text-tertiary) !important;
  font-size: 10.5px !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: auto;
  cursor: pointer;
  padding: 3px 4px;
}

:root[data-theme="light"] .g4r-quick-vehicle-bar {
  background: #f8fafc;
  border-color: #e2e8f0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

:root[data-theme="light"] .g4r-quick-sublabel {
  color: #64748b;
  font-weight: 600;
}

:root[data-theme="light"] .g4r-quick-level-chip,
:root[data-theme="light"] .g4r-quick-liter-chip {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #334155;
}

:root[data-theme="light"] .g4r-quick-level-chip.is-active,
:root[data-theme="light"] .g4r-quick-liter-chip.is-active {
  background: #ecfdf5;
  border-color: #059669;
  color: #059669;
}

.g4r-quick-edit-btn:hover {
  color: var(--text-secondary) !important;
}

/* Barra de referencia */
.g4r-reference-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  padding: 6px 10px;
  font-size: 11px;
  color: var(--text-secondary);
  animation: fadeIn 0.15s ease-out;
}

.g4r-ref-bar-left {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.g4r-ref-bar-text {
  color: var(--text-tertiary);
}

.g4r-ref-bar-sub {
  color: var(--text-tertiary);
}

.g4r-ref-bar-reset {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 10.5px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 0 0 0 8px;
  white-space: nowrap;
}

.g4r-ref-bar-reset:hover {
  color: var(--text-hero);
}

/* Comparativa relativa de precios */
.g4r-card-comparison-box {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.g4r-card-comparison-box.is-profit {
  border-color: rgba(16, 185, 129, 0.32);
  background: linear-gradient(to right, rgba(16, 185, 129, 0.06), transparent);
}

.g4r-card-comparison-box.is-loss {
  border-color: rgba(239, 68, 68, 0.22);
  background: linear-gradient(to right, rgba(239, 68, 68, 0.04), transparent);
}

.g4r-card-comparison-box.is-base {
  border-color: var(--border-muted);
  background: var(--bg-surface);
}

.g4r-comp-row-main {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.g4r-comp-lbl {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
}

.g4r-comp-val {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--text-hero);
}

.g4r-comp-sub {
  font-size: 11px;
  color: var(--text-secondary);
}

.g4r-comp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}

.g4r-comp-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.g4r-comp-cell-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--text-tertiary);
}

.g4r-comp-cell-data {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.g4r-comp-net {
  background: rgba(255, 255, 255, 0.04);
  padding: 4px 7px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
}

.g4r-card-comparison-box.is-profit .g4r-comp-net {
  background: rgba(16, 185, 129, 0.14);
  border-color: rgba(16, 185, 129, 0.40);
  box-shadow: 0 1px 4px rgba(16, 185, 129, 0.10);
}

.g4r-card-comparison-box.is-profit .g4r-comp-net .g4r-comp-cell-data {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--accent-emerald);
}

.g4r-card-comparison-box.is-loss .g4r-comp-net {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.25);
}

.g4r-comp-expl {
  font-size: 11.5px;
  line-height: 1.45;
  padding-top: 6px;
  border-top: 1px solid var(--border-subtle);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.g4r-comp-expl.is-profit {
  color: var(--accent-emerald);
}

.g4r-comp-expl.is-loss {
  color: var(--accent-rose);
}

/* Botones */
.g4r-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 140ms cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.g4r-btn:hover {
  transform: translateY(-1px);
}

.g4r-btn:active {
  transform: scale(0.96) translateY(0);
  transition-duration: 60ms;
}

.g4r-btn-primary {
  background: var(--brand-primary);
  color: var(--brand-primary-text, #ffffff) !important;
  font-weight: 700;
  letter-spacing: 0.2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.g4r-btn-primary:hover {
  background: var(--brand-primary-hover);
  color: var(--brand-primary-text, #ffffff) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* Mapa y botones flotantes */
.g4r-map-viewport {
  flex: 1;
  height: 100%;
  position: relative;
  z-index: 1;
  background: var(--bg-app);
}

#map {
  width: 100%;
  height: 100%;
}

.g4r-map-floating-bar {
  position: absolute;
  top: max(16px, env(safe-area-inset-top, 16px));
  right: max(16px, env(safe-area-inset-right, 16px));
  z-index: 1005;
  display: flex;
  gap: 8px;
  pointer-events: auto;
}

.g4r-map-action-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 10px 16px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-muted);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.15);
  transition: all 120ms cubic-bezier(0.16, 1, 0.3, 1);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Area tactil expandida invisible para garantizar pulsacion limpia en pantallas tactiles */
.g4r-map-action-pill::after {
  content: "";
  position: absolute;
  top: -8px;
  bottom: -8px;
  left: -8px;
  right: -8px;
  pointer-events: auto;
}

.g4r-map-action-pill svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.g4r-map-action-pill:hover {
  color: var(--text-hero);
  border-color: var(--border-active);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.g4r-map-action-pill:active {
  transform: scale(0.96);
  background: var(--bg-card);
  border-color: var(--accent-emerald);
}

.g4r-locate-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.g4r-locate-icon-wrap svg {
  width: 17px;
  height: 17px;
  display: block;
  transition: opacity 160ms ease, transform 160ms ease;
}

.g4r-locate-icon-wrap .g4r-icon-recenter {
  display: none;
}

.g4r-map-action-pill.is-recenter .g4r-locate-icon-wrap .g4r-icon-pin {
  display: none;
}

.g4r-map-action-pill.is-recenter .g4r-locate-icon-wrap .g4r-icon-recenter {
  display: block;
}

/* Pila de etiquetas en rejilla: todos los textos comparten el mismo espacio sin alterar el ancho del boton */
.g4r-locate-label-stack {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  justify-items: center;
  height: 18px;
  overflow: hidden;
}

.g4r-locate-label-stack .g4r-locate-text {
  grid-area: 1 / 1;
  white-space: nowrap;
  font-weight: 700;
  line-height: 18px;
  pointer-events: none;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), opacity 180ms ease;
  will-change: transform, opacity;
}

/* 1. Estado Reposo (Mi Ubicacion visible) */
.g4r-locate-label-stack .g4r-label-idle {
  opacity: 1;
  transform: translateY(0);
}

.g4r-locate-label-stack .g4r-label-locating {
  opacity: 0;
  transform: translateY(14px);
}

.g4r-locate-label-stack .g4r-label-located {
  opacity: 0;
  transform: translateY(14px);
}

.g4r-locate-label-stack .g4r-label-recenter {
  opacity: 0;
  transform: translateY(14px);
}

/* 2. Estado Buscando (Localizando... entra rodando verticalmente desde abajo) */
.g4r-map-action-pill.is-locating .g4r-locate-label-stack .g4r-label-idle {
  opacity: 0;
  transform: translateY(-14px);
}

.g4r-map-action-pill.is-locating .g4r-locate-label-stack .g4r-label-locating {
  opacity: 1;
  transform: translateY(0);
}

.g4r-map-action-pill.is-locating .g4r-locate-label-stack .g4r-label-located {
  opacity: 0;
  transform: translateY(14px);
}

.g4r-map-action-pill.is-locating .g4r-locate-label-stack .g4r-label-recenter {
  opacity: 0;
  transform: translateY(14px);
}

/* 3. Estado Confirmado (Localizado entra rodando verticalmente) */
.g4r-map-action-pill.is-located .g4r-locate-label-stack .g4r-label-idle {
  opacity: 0;
  transform: translateY(-14px);
}

.g4r-map-action-pill.is-located .g4r-locate-label-stack .g4r-label-locating {
  opacity: 0;
  transform: translateY(-14px);
}

.g4r-map-action-pill.is-located .g4r-locate-label-stack .g4r-label-located {
  opacity: 1;
  transform: translateY(0);
}

.g4r-map-action-pill.is-located .g4r-locate-label-stack .g4r-label-recenter {
  opacity: 0;
  transform: translateY(14px);
}

/* 4. Estado Desplazado (Recentrar entra rodando verticalmente) */
.g4r-map-action-pill.is-recenter .g4r-locate-label-stack .g4r-label-idle,
.g4r-map-action-pill.is-recenter .g4r-locate-label-stack .g4r-label-locating,
.g4r-map-action-pill.is-recenter .g4r-locate-label-stack .g4r-label-located {
  opacity: 0;
  transform: translateY(-14px);
}

.g4r-map-action-pill.is-recenter .g4r-locate-label-stack .g4r-label-recenter {
  opacity: 1;
  transform: translateY(0);
}

.g4r-map-action-pill.is-recenter {
  border-color: rgba(59, 130, 246, 0.55);
  color: var(--brand-primary, #3b82f6);
  background: rgba(59, 130, 246, 0.10);
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.25);
  animation: pulseRecenter 2.2s infinite ease-in-out;
}

/* Estado: Localizando (Cero estetica IA: micro-spinner circular nativo estilo iOS/macOS en el icono) */
.g4r-map-action-pill.is-locating {
  border-color: var(--border-active);
  background: var(--bg-card);
  color: var(--text-hero);
  pointer-events: none;
  cursor: wait;
}

.g4r-map-action-pill.is-locating .g4r-locate-icon-wrap svg {
  opacity: 0;
  transform: scale(0.6);
}

.g4r-map-action-pill.is-locating .g4r-locate-icon-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  margin-left: -7px;
  border: 2px solid var(--border-muted);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  animation: g4rNativeSpin 0.65s linear infinite;
  box-sizing: border-box;
}

@keyframes g4rNativeSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Estado: Ubicacion fijada con exito */
.g4r-map-action-pill.is-located {
  border-color: rgba(16, 185, 129, 0.55);
  color: var(--brand-primary);
  background: rgba(16, 185, 129, 0.08);
  transition: all 180ms ease;
}

.g4r-map-action-pill.is-located svg {
  color: var(--brand-primary);
  transform: scale(1.15);
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Boton GPS en formulario de ruta (origen) */
.g4r-route-input-action.is-locating {
  color: var(--brand-primary);
  cursor: wait;
}

.g4r-route-input-action.is-locating svg {
  animation: g4rNativeSpin 0.65s linear infinite;
  transform-origin: center center;
}

/* Marcadores vectoriales en mapa */
.leaflet-marker-icon {
  overflow: visible !important;
}

.g4r-beacon-pin {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-muted);
  color: var(--text-hero);
  border-radius: var(--radius-full);
  padding: 3.5px 9px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  box-shadow: var(--shadow-pin);
  position: relative;
  white-space: nowrap;
  overflow: visible;
  transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 140ms ease;
  user-select: none;
}

.g4r-beacon-pin:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  z-index: 1000;
}

.g4r-pin-brand-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
}

.g4r-pin-price {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.g4r-pin-unit {
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-left: 1px;
}

.g4r-beacon-pin::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--border-muted);
}

.g4r-pin-tag {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: -0.15px;
  text-transform: none;
  padding: 2.5px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  pointer-events: none;
  line-height: 1.25;
  background: var(--bg-elevated);
  color: var(--text-hero);
  border: 1px solid var(--border-muted);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  z-index: 20;
}

.g4r-pin-rank {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-tertiary);
  margin-right: 2px;
  font-variant-numeric: tabular-nums;
}

.g4r-pin-cluster-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  color: var(--text-hero);
  border: 1.2px solid var(--border-active);
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 5.5px;
  border-radius: var(--radius-full);
  margin-left: 3px;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transition: transform 120ms ease, background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.g4r-beacon-pin:hover .g4r-pin-cluster-badge {
  background: var(--text-hero);
  color: var(--bg-surface);
  border-color: var(--text-hero);
}

.g4r-beacon-pin.is-optimal {
  border-color: #6366f1;
  background: var(--bg-surface);
  color: var(--text-hero);
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.35), 0 4px 14px rgba(99, 102, 241, 0.3);
  z-index: 900;
}

.g4r-beacon-pin.is-optimal .g4r-pin-tag {
  background: #6366f1;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.45);
}

.g4r-beacon-pin.is-optimal::after {
  border-top-color: #6366f1;
}

.g4r-beacon-pin.is-route-stop {
  border-color: var(--border-active);
  color: var(--text-hero);
}

.g4r-beacon-pin.is-route-stop::after {
  border-top-color: var(--border-active);
}

.g4r-beacon-pin.is-base {
  border-color: #0284c7;
  background: var(--bg-surface);
  color: var(--text-hero);
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(2, 132, 199, 0.35), 0 3px 10px rgba(2, 132, 199, 0.25);
  z-index: 850;
}

.g4r-beacon-pin.is-base .g4r-pin-tag {
  background: #0284c7;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.4);
}

.g4r-beacon-pin.is-base::after {
  border-top-color: #0284c7;
}

/* Ventanas emergentes de Leaflet */
.leaflet-popup-content-wrapper {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-muted) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-dock) !important;
  padding: 0 !important;
}

.leaflet-popup-content {
  margin: 14px !important;
  line-height: 1.4 !important;
}

.leaflet-popup-tip {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-muted) !important;
}

/* Boton de cierre de ventana emergente (x) con holgura ergonomica */
.leaflet-popup-close-button {
  top: 10px !important;
  right: 10px !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--radius-full) !important;
  color: var(--text-tertiary) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  transition: all 0.15s ease !important;
  z-index: 30 !important;
  cursor: pointer !important;
}

.leaflet-popup-close-button:hover,
.leaflet-popup-close-button:active {
  color: var(--text-primary) !important;
  background: var(--bg-hover) !important;
  border-color: var(--border-muted) !important;
}

.g4r-popup-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 275px;
  max-width: 320px;
}

.g4r-popup-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-right: 28px; /* Espaciado de seguridad para que la (x) nunca colisione con el precio */
}

.g4r-popup-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.g4r-popup-brand-badge {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-hero);
  line-height: 1.2;
}

.g4r-popup-address {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.35;
  margin-top: 1px;
}

.g4r-popup-price-callout {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  flex-shrink: 0;
  white-space: nowrap;
}

.g4r-popup-cost-figure {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-emerald);
  white-space: nowrap;
  line-height: 1.15;
}

.g4r-popup-cost-caption {
  display: block;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  white-space: nowrap;
  margin-top: 1px;
}

.g4r-popup-promo-alert {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(2, 132, 199, 0.12);
  border: 1px solid rgba(2, 132, 199, 0.35);
  border-radius: var(--radius-xs);
  padding: 6px 8px;
  font-size: 10.5px;
  color: var(--text-primary);
}

.g4r-popup-promo-alert strong {
  color: #0284c7;
}

.g4r-popup-promo-info {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-xs);
  padding: 6px 8px;
  font-size: 10.5px;
  color: var(--text-primary);
}

.g4r-popup-promo-info strong {
  color: #f59e0b;
}

.g4r-popup-promo-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-elevated);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-xs);
  padding: 4px 8px;
  font-size: 10px;
  color: var(--text-tertiary);
}

.g4r-popup-timing-callout {
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: var(--radius-xs);
  padding: 6px 9px;
  font-size: 11px;
  line-height: 1.4;
  margin-top: 4px;
}

.g4r-popup-timing-callout.is-wait {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}

.g4r-popup-timing-callout.is-good {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
}

.g4r-popup-breakdown {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  padding: 6px 8px;
  font-size: 10.5px;
}

.g4r-popup-breakdown-row {
  display: flex;
  justify-content: space-between;
  color: var(--text-secondary);
  line-height: 1.4;
}

.g4r-promo-highlight-row {
  color: #0284c7 !important;
  font-weight: 700 !important;
}

.g4r-popup-prices-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.g4r-popup-price-cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-elevated);
  padding: 4px 6px;
  border-radius: var(--radius-xs);
  font-size: 10.5px;
  border: 1px solid var(--border-subtle);
}

.g4r-popup-fuel-label {
  color: var(--text-tertiary);
}

.g4r-popup-fuel-val {
  font-weight: 600;
  white-space: nowrap;
}

.g4r-popup-schedule-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--text-secondary);
  padding: 1px 0;
}

.g4r-popup-schedule-text {
  font-size: 10.5px;
  color: var(--text-secondary);
}

/* Estado vacío */
.g4r-state-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px 16px;
  gap: 8px;
  animation: g4rFadeIn 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.g4r-state-icon-pulse {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

/* ==========================================================================
   Contenedor de Carga y Skeletons Fluidos (Filosofía Minimalista)
   ========================================================================== */
.g4r-loading-view {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  animation: g4rFadeIn 180ms ease both;
}

.g4r-loader-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.g4r-loader-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border-subtle);
  border-top-color: var(--color-accent);
  animation: g4rSpin 0.75s linear infinite;
  flex-shrink: 0;
}

@keyframes g4rSpin {
  to {
    transform: rotate(360deg);
  }
}

.g4r-loader-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.g4r-loader-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
}

.g4r-loader-desc {
  margin: 0;
  font-size: 11px;
  color: var(--text-tertiary);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.g4r-skeleton-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.g4r-skel-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.g4r-skel-identity {
  display: flex;
  align-items: center;
  gap: 8px;
}

.g4r-skel-tag {
  width: 52px;
  height: 16px;
  border-radius: 4px;
}

/* Marcador pulsante de ubicación actual */
.g4r-user-gps-icon {
  background: transparent !important;
  border: none !important;
}

.g4r-user-gps-marker {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.g4r-gps-dot {
  position: relative;
  z-index: 3;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #0284c7;
  border: 2.5px solid #ffffff;
  box-shadow: 0 0 12px rgba(2, 132, 199, 0.95), 0 2px 6px rgba(0, 0, 0, 0.4);
}

.g4r-gps-pulse-ring {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(14, 165, 233, 0.24);
  border: 1px solid rgba(14, 165, 233, 0.5);
  pointer-events: none;
  animation: g4rGpsPulseRing 2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.g4r-gps-pulse-ring-2 {
  animation-delay: 1s;
}

@keyframes g4rGpsPulseRing {
  0% {
    transform: scale(0.35);
    opacity: 0.95;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

.g4r-state-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-hero);
}

.g4r-state-desc {
  font-size: 11.5px;
  color: var(--text-secondary);
  max-width: 260px;
}

/* Panel táctil inferior (Bottom Sheet) para móvil */
@media (max-width: 860px) {
  .g4r-app-shell {
    flex-direction: column;
  }

  .g4r-map-viewport {
    width: 100%;
    height: 100dvh;
    position: relative;
    z-index: 1;
  }

  .g4r-map-floating-bar {
    top: max(14px, env(safe-area-inset-top, 14px));
    right: max(14px, env(safe-area-inset-right, 14px));
    z-index: 1010;
  }

  .g4r-map-action-pill {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 13.5px;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.2);
  }

  @media (max-width: 480px) {
    .g4r-map-floating-bar {
      gap: 6px;
    }

    .g4r-map-action-pill {
      min-height: 40px;
      padding: 8px 13px;
      font-size: 12.5px;
      gap: 5px;
    }

    .g4r-map-action-pill svg {
      width: 15px;
      height: 15px;
    }

    .g4r-map-layers-menu {
      min-width: 210px;
      padding: 10px;
    }
  }

  .g4r-sidebar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    min-width: 100%;
    height: calc(100dvh - 56px);
    max-height: calc(100dvh - 56px);
    border-right: none;
    border-top: 1px solid var(--border-muted);
    border-radius: 20px 20px 0 0;
    transform: translateY(calc(100% - 165px));
    z-index: 2000;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.45);
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
    overscroll-behavior: contain;
    overflow-y: hidden;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    contain: layout style;
  }

  .g4r-sidebar.is-dragging {
    will-change: transform;
  }

  .g4r-card {
    animation: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    contain-intrinsic-size: auto 210px;
  }

  :root[data-theme="light"] .g4r-card {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  }

  .g4r-sidebar.is-collapsed {
    transform: translateY(calc(100% - 165px));
    overflow-y: hidden !important;
  }

  .g4r-sidebar.is-half {
    transform: translateY(calc(100% - 60dvh));
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior-y: contain;
    scroll-behavior: auto;
  }

  .g4r-sidebar.is-expanded {
    transform: translateY(0);
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior-y: contain;
    scroll-behavior: auto;
  }

  .g4r-sheet-handle-zone {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 11px 0 9px 0;
    cursor: grab;
    touch-action: none;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--bg-surface);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom: 1px solid transparent;
    flex-shrink: 0;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
  }

  .g4r-sheet-handle-zone.is-scrolled {
    border-bottom-color: var(--border-subtle);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  }

  :root[data-theme="light"] .g4r-sheet-handle-zone {
    background: #ffffff;
  }

  :root[data-theme="light"] .g4r-sheet-handle-zone.is-scrolled {
    border-bottom-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  }

  .g4r-sheet-handle {
    width: 44px;
    height: 5px;
    background: var(--border-muted);
    border-radius: 3px;
    transition: background 160ms ease, transform 160ms ease;
  }

  .g4r-sheet-handle-zone:active .g4r-sheet-handle {
    background: var(--accent-emerald);
    transform: scaleX(1.15);
  }

  .g4r-list-pane {
    overflow-y: visible;
    flex: none;
    padding: 10px 14px 16px 14px !important;
    gap: 12px !important;
    contain: layout style;
  }

  .g4r-sidebar-footer {
    margin-top: 14px;
    margin-bottom: 0;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
  }

  .g4r-support-banner {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    gap: 6px;
  }

  .g4r-support-banner-header {
    gap: 6px;
  }

  .g4r-bmc-icon-badge {
    width: 24px;
    height: 24px;
    border-radius: 6px;
  }

  .g4r-bmc-icon-badge .g4r-heart-svg {
    width: 14px;
    height: 14px;
  }

  .g4r-bmc-brand-title {
    font-size: 11.5px;
  }

  .g4r-support-banner-sub {
    font-size: 10.5px;
  }

  .g4r-support-banner-text {
    font-size: 11px;
    line-height: 1.35;
    margin: 0;
  }

  .g4r-support-banner-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
  }

  .g4r-support-banner-actions .g4r-bmc-pill-btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
    padding: 10px 14px;
    font-size: 12.5px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    white-space: normal;
    text-align: center;
    box-sizing: border-box;
  }

  .g4r-support-banner-actions .g4r-footer-legal-btn {
    width: 100%;
    justify-content: center;
    padding: 9px 12px;
    font-size: 12px;
    border-radius: var(--radius-sm);
    box-sizing: border-box;
  }

  .g4r-footer-attributions {
    margin-top: 6px;
    font-size: 10.5px;
    line-height: 1.35;
  }

  /* Posicionamiento dinámico de los controles de Leaflet por encima del sheet en móvil sin layout shift */
  .leaflet-bottom {
    bottom: calc(130px + env(safe-area-inset-bottom, 0px) + 12px) !important;
    contain: layout style;
    transition: opacity 200ms ease;
  }

  .g4r-sidebar.is-half ~ .g4r-map-viewport .leaflet-bottom {
    opacity: 0;
    pointer-events: none;
  }

  .g4r-sidebar.is-expanded ~ .g4r-map-viewport .leaflet-bottom {
    opacity: 0;
    pointer-events: none;
  }

  .g4r-sidebar-header {
    padding: 10px 14px 8px 14px;
    gap: 8px;
  }

  @media (max-width: 400px) {
    .g4r-sidebar-header {
      padding: 10px 10px 8px 10px;
    }
  }

  .g4r-route-form {
    padding: 10px 14px;
    gap: 8px;
  }

  .g4r-fuel-gauge-card {
    padding: 10px 12px;
    gap: 8px;
  }

  .g4r-tank-chips-grid {
    gap: 4px;
  }

  .g4r-tank-chip {
    padding: 6px 4px;
    font-size: 11px;
  }

  #calcRouteBtn {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
  }

  /* En móvil, eliminar el recuadro doble de la estrategia de ruta para flujo nativo sin marcos */
  .g4r-route-strategy-panel {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    gap: 10px;
    overflow: visible;
  }

  .g4r-route-strategy-panel::before {
    display: none;
  }

  .g4r-strat-card-view {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    margin: 0;
  }

  .g4r-strat-card-top-row {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .g4r-strat-badge-group {
    flex-wrap: nowrap;
    min-width: 0;
    gap: 6px;
  }

  .g4r-strat-pill-full {
    display: none;
  }

  .g4r-strat-pill-short {
    display: inline;
  }

  .g4r-strat-station-row .g4r-card-brand-tag {
    margin-right: 0;
  }

  .g4r-btn-map-focus {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 3px 7px;
  }

  /* Evitar zoom automático de iOS Safari asegurando font-size 16px en inputs móviles */
  .g4r-search-row input,
  .g4r-route-row input,
  .g4r-input-stepper input {
    font-size: 16px !important;
  }

  /* Tipografía accesible y nítida en pantallas móviles (iPhone, Samsung) */
  .g4r-card {
    padding: 11px 12px;
  }

  .g4r-card-brand-name {
    font-size: 14.5px;
  }

  .g4r-card-location {
    font-size: 12px;
    line-height: 1.35;
  }

  .g4r-badge {
    font-size: 11px;
    padding: 2.5px 7px;
  }

  .g4r-card-distance {
    font-size: 12px;
  }

  .g4r-comp-lbl {
    font-size: 11px;
  }

  .g4r-comp-cell-title {
    font-size: 10.5px;
  }

  .g4r-comp-cell-data {
    font-size: 13.5px;
  }

  .g4r-comp-expl {
    font-size: 12px;
    line-height: 1.4;
  }

  .g4r-list-summary {
    font-size: 12px;
    line-height: 1.4;
  }

  .g4r-strat-hero-value-card {
    padding: 9px 12px;
    gap: 8px;
  }

  .g4r-strat-saving-column {
    padding-left: 10px;
  }

  .g4r-strat-big-price,
  .g4r-strat-big-saving {
    font-size: 20px;
  }

  .g4r-nav-btn {
    min-height: 38px;
    padding: 6px 12px;
    font-size: 12px;
  }

  .g4r-mode-btn {
    font-size: 11.5px;
  }

  .g4r-mode-btn span {
    font-size: 11.5px;
  }
}

@media (min-width: 861px) {
  .g4r-sheet-handle-zone {
    display: none;
  }
}

@media (min-width: 1300px) {
  :root {
    --sidebar-w: clamp(540px, 48vw, 760px);
  }
}

@media (min-width: 1800px) {
  :root {
    --sidebar-w: clamp(620px, 50vw, 880px);
  }
}

/* ==========================================================================
   Map Base Layers & Dark Theme (Zero Watermarks · Zero API Keys)
   ========================================================================== */

/* Transición suave de filtro solo activa durante el cambio manual de tema para evitar destellos al cargar teselas */
.is-theme-switching .leaflet-tile {
  transition: filter 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark theme styling para teselas de OpenStreetMap e IGN Callejero (Obsidian / Midnight Apple Maps style) */
[data-theme="dark"] .leaflet-tile,
:root:not([data-theme="light"]) .leaflet-tile {
  filter: invert(100%) hue-rotate(180deg) brightness(85%) contrast(98%) saturate(0.85);
}

[data-theme="light"] .leaflet-tile {
  filter: none;
}

/* Las imágenes satélite / ortofoto aérea PNOA no se invierten (fotografía aérea real) */
.g4r-sat-tiles .leaflet-tile,
.leaflet-layer.g4r-sat-tiles .leaflet-tile,
.leaflet-tile.g4r-sat-tiles,
.leaflet-pane .g4r-sat-tiles img,
[data-theme="dark"] .g4r-sat-tiles .leaflet-tile,
[data-theme="dark"] .leaflet-layer.g4r-sat-tiles .leaflet-tile,
[data-theme="dark"] .leaflet-tile.g4r-sat-tiles,
:root:not([data-theme="light"]) .g4r-sat-tiles .leaflet-tile,
:root:not([data-theme="light"]) .leaflet-layer.g4r-sat-tiles .leaflet-tile,
:root:not([data-theme="light"]) .leaflet-tile.g4r-sat-tiles {
  filter: none !important;
}

[data-theme="dark"] .leaflet-container,
:root:not([data-theme="light"]) .leaflet-container {
  background: #090a0d !important;
}

[data-theme="light"] .leaflet-container {
  background: #eef0f4 !important;
}

/* ==========================================================================
   Controles de Mapa Leaflet Rediseñados (Gas4Route Design System)
   ========================================================================== */

/* 1. Atribución compacta, elegante y no intrusiva */
.leaflet-control-attribution {
  background: var(--bg-surface) !important;
  color: var(--text-tertiary) !important;
  border: 1px solid var(--border-subtle) !important;
  border-bottom: none !important;
  border-right: none !important;
  border-top-left-radius: var(--radius-sm, 8px) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 10px !important;
  line-height: 1.35 !important;
  padding: 3px 8px !important;
  max-width: min(300px, calc(100vw - 32px)) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  opacity: 0.82;
  transition: opacity 180ms ease, max-width 240ms ease;
  margin: 0 !important;
  pointer-events: auto;
}

.leaflet-control-attribution:hover {
  opacity: 1;
  max-width: calc(100vw - 32px) !important;
}

.leaflet-control-attribution a {
  color: var(--accent-blue) !important;
  text-decoration: none !important;
}

.leaflet-control-attribution a:hover {
  text-decoration: underline !important;
}

/* 2. Control de Zoom Moderno (+ / -) con lenguaje de diseño unificado */
.leaflet-control-zoom {
  border: 1.5px solid var(--border-muted) !important;
  border-radius: var(--radius-md, 14px) !important;
  background: var(--bg-surface) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.32), 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  margin-right: 14px !important;
  margin-bottom: 12px !important;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease !important;
}

.leaflet-control-zoom:hover {
  border-color: var(--border-active) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42) !important;
}

.leaflet-control-zoom.leaflet-bar {
  border: 1.5px solid var(--border-muted) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.32), 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

/* Botones individuales de zoom */
.leaflet-control-zoom a,
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  width: 42px !important;
  height: 42px !important;
  line-height: 42px !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  text-decoration: none !important;
  transition: background-color 150ms ease, color 150ms ease, transform 80ms ease !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  cursor: pointer !important;
}

.leaflet-control-zoom-in {
  border-bottom: 1px solid var(--border-subtle) !important;
}

.leaflet-control-zoom a:hover {
  background-color: var(--bg-elevated) !important;
  color: var(--accent-emerald) !important;
}

.leaflet-control-zoom a:active {
  background-color: var(--bg-card) !important;
  transform: scale(0.92) !important;
}

.leaflet-control-zoom-disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* 3. Selector de tipo de mapa */
.g4r-map-layers-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 230px;
  background: var(--bg-surface);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md, 14px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--border-subtle);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1020;
  transform-origin: top right;
  animation: g4rLayerMenuEnter 180ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.g4r-map-layers-menu[hidden] {
  display: none !important;
}

@keyframes g4rLayerMenuEnter {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(-6px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.g4r-map-layers-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 2px;
}

.g4r-map-layers-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
}

.g4r-map-layers-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  border-radius: var(--radius-xs, 6px);
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease;
}

.g4r-map-layers-close svg {
  width: 14px;
  height: 14px;
}

.g4r-map-layers-close:hover {
  color: var(--text-hero);
  background: var(--bg-elevated);
}

.g4r-map-layers-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.g4r-layer-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-sm, 10px);
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: all 140ms cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.g4r-layer-card:hover {
  background: var(--bg-elevated);
  border-color: var(--border-active);
  transform: translateY(-1px);
}

.g4r-layer-card.is-active {
  background: var(--bg-elevated);
  border-color: var(--accent-emerald);
  box-shadow: 0 0 0 1px var(--accent-emerald), 0 4px 12px rgba(16, 185, 129, 0.15);
}

.g4r-layer-card-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
}

.street-icon-wrap {
  color: var(--accent-blue);
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.25);
}

.sat-icon-wrap {
  color: var(--accent-emerald);
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.25);
}

.g4r-layer-card-icon-wrap svg {
  width: 18px;
  height: 18px;
}

.g4r-layer-card-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.g4r-layer-card-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-hero);
  line-height: 1.25;
}

.g4r-layer-card-desc {
  font-size: 10.5px;
  color: var(--text-tertiary);
  line-height: 1.2;
}

.g4r-layer-card-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border-muted);
  color: transparent;
  flex-shrink: 0;
  transition: all 140ms ease;
}

.g4r-layer-card-check svg {
  width: 12px;
  height: 12px;
}

.g4r-layer-card.is-active .g4r-layer-card-check {
  background: var(--accent-emerald);
  border-color: var(--accent-emerald);
  color: #fff;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

/* ==========================================================================
   Executive Route Strategy Panel & Modern Travel Planner
   ========================================================================== */

.g4r-route-strategy-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-lg, 16px);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  animation: g4rPanelEnter 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.g4r-route-strategy-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent-emerald);
}

/* Cabecera del itinerario de ruta */
.g4r-trip-overview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}

.g4r-trip-route-title-group {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
}

.g4r-trip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.g4r-trip-city {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-hero);
  letter-spacing: -0.01em;
}

.g4r-trip-arrow-sep {
  font-size: 12px;
  color: var(--text-muted);
  padding: 0 1px;
}

.g4r-trip-route-cities {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-hero);
  letter-spacing: -0.01em;
}

.g4r-trip-km-pill {
  font-size: 10.5px;
  font-weight: 700;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
}

.g4r-btn-share-plan {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 140ms ease;
}

.g4r-btn-share-plan:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-muted);
  color: var(--text-hero);
}

.g4r-btn-share-plan.is-copied {
  background: rgba(16, 185, 129, 0.2);
  border-color: #10b981;
  color: #34d399;
}

.g4r-strat-share-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Diagnóstico de autonomía */
.g4r-trip-diagnosis-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  transition: all 160ms ease;
}

.g4r-trip-diagnosis-banner.is-safe {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.g4r-trip-diagnosis-banner.is-mandatory {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.g4r-diagnosis-icon-wrap {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.is-safe .g4r-diagnosis-icon-wrap {
  background: rgba(16, 185, 129, 0.2);
  color: var(--accent-emerald);
}

.is-mandatory .g4r-diagnosis-icon-wrap {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

.g4r-diagnosis-text-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.g4r-diagnosis-headline {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-hero);
}

.g4r-diagnosis-subtext {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-secondary);
  margin: 0;
}

/* Cabecera de sección y opciones */
.g4r-strat-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.g4r-strat-section-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.g4r-strat-baseline-hint {
  font-size: 10.5px;
  color: var(--text-tertiary);
  font-weight: 500;
}

/* Selector de estrategia de ruta */
.g4r-strat-segmented-bar {
  display: flex;
  gap: 6px;
  background: var(--bg-surface);
  padding: 4px;
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--border-subtle);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.g4r-strat-segmented-bar::-webkit-scrollbar {
  display: none;
}

.g4r-strat-tab {
  flex: 1;
  min-width: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 11px;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm, 9px);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 160ms cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  user-select: none;
}

.g4r-strat-tab:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

.g4r-strat-tab.is-active {
  background: var(--bg-card);
  border-color: var(--border-muted);
  color: var(--text-hero);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.g4r-strat-tab.is-recommended {
  border-color: rgba(16, 185, 129, 0.35);
}

.g4r-strat-tab.is-recommended.is-active {
  border-color: var(--accent-emerald);
  box-shadow: 0 0 0 1px var(--accent-emerald), 0 3px 12px rgba(16, 185, 129, 0.22);
}

.g4r-strat-tab-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.g4r-strat-tab-icon {
  width: 13px;
  height: 13px;
}

.g4r-strat-tab-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1.15;
}

.g4r-strat-tab-title {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.g4r-strat-tab-saving {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-emerald);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.g4r-strat-tab-badge {
  position: absolute;
  top: -6px;
  right: 6px;
  font-size: 8px;
  font-weight: 900;
  padding: 1.5px 5.5px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.45);
  letter-spacing: 0.04em;
}

/* Contenedor de estrategia recomendada */
.g4r-strat-card-container {
  width: 100%;
}

/* Tarjeta de estrategia activa */
.g4r-strat-card-view {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-left: 3.5px solid var(--accent-emerald);
  border-radius: var(--radius-md, 14px);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--shadow-sm);
  animation: g4rCardReveal 200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes g4rCardReveal {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.g4r-strat-card-view:hover {
  border-color: var(--border-muted);
  box-shadow: var(--shadow-md);
}

.g4r-strat-card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;
}

.g4r-strat-badge-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
}

.g4r-strat-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  line-height: 1.2;
  flex-shrink: 0;
}

.g4r-strat-pill-short {
  display: none;
}

.g4r-strat-pill-full {
  display: inline;
}

.g4r-strat-badge-svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.g4r-strat-pill.is-optimal {
  background: rgba(16, 185, 129, 0.16);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.g4r-strat-pill.is-origin {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border: 1px solid var(--border-muted);
}

.g4r-strat-pill.is-dest {
  background: rgba(168, 85, 247, 0.16);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.4);
}

.g4r-strat-km-tag {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

.g4r-btn-map-focus {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 140ms ease;
}

.g4r-btn-map-focus:hover {
  background: var(--bg-hover);
  color: var(--text-hero);
  border-color: var(--accent-blue-border);
}

.g4r-btn-map-icon {
  width: 12px;
  height: 12px;
}

/* Marcas y títulos de gasolinera */
.g4r-strat-station-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.g4r-strat-station-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.g4r-strat-station-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.25;
}

.g4r-strat-station-addr {
  font-size: 11px;
  color: var(--text-secondary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Executive Stop Card Value Split */
.g4r-strat-hero-value-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1.5px solid var(--border-muted);
  border-radius: var(--radius-md, 12px);
  padding: 12px 16px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}

:root[data-theme="light"] .g4r-strat-hero-value-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.g4r-strat-price-column {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.g4r-strat-column-label {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.g4r-strat-price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.g4r-strat-big-price {
  font-size: 24px;
  font-weight: 900;
  color: var(--text-hero);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.g4r-strat-price-unit {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-tertiary);
}

.g4r-strat-saving-column {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 2px;
  border-left: 1px dashed var(--border-subtle);
  padding-left: 14px;
}

.g4r-strat-big-saving {
  font-size: 22px;
  font-weight: 900;
  color: var(--accent-emerald, #10b981);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}

.g4r-strat-saving-note {
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 600;
}

.g4r-strat-promo-tag {
  font-size: 9px;
  font-weight: 700;
  color: #0284c7;
  background: rgba(2, 132, 199, 0.15);
  border: 1px solid rgba(2, 132, 199, 0.35);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
}

/* Franja informativa de parada */
.g4r-strat-telemetry-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

@media (max-width: 440px) {
  .g4r-strat-telemetry-strip {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

.g4r-tel-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 8px);
  padding: 7px 11px;
}

.g4r-tel-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--accent-blue);
  flex-shrink: 0;
}

.g4r-tel-chip-icon .g4r-svg-icon {
  width: 15px;
  height: 15px;
}

.g4r-tel-chip-body {
  display: flex;
  flex-direction: column;
  gap: 1.5px;
  min-width: 0;
}

.g4r-tel-chip-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.g4r-tel-chip-val {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 480px) {
  .g4r-strat-card-view .g4r-nav-actions {
    display: flex;
    gap: 6px;
  }

  .g4r-strat-card-top-row {
    gap: 5px;
  }

  .g4r-strat-pill {
    font-size: 9.5px;
    padding: 2.5px 7px;
  }

  .g4r-strat-km-tag {
    font-size: 10px;
  }

  .g4r-btn-map-focus {
    padding: 3px 6px;
    font-size: 10px;
  }
}

/* ==========================================================================
   Route Filter & Sort Bar
   ========================================================================== */

.g4r-route-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px;
  overflow-x: auto;
  scrollbar-width: none;
}

.g4r-route-filter-bar::-webkit-scrollbar {
  display: none;
}

.g4r-filter-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.g4r-filter-chips {
  display: flex;
  align-items: center;
  gap: 6px;
}

.g4r-filter-chip {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 120ms ease;
}

.g4r-filter-chip:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-muted);
}

.g4r-filter-chip.is-active {
  background: var(--bg-elevated);
  border-color: var(--accent-emerald-border);
  color: var(--accent-emerald);
  font-weight: 600;
}

/* ==========================================================================
   Corridor Milestone Strip inside Station Cards
   ========================================================================== */

.g4r-corridor-milestone-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
  flex-wrap: wrap;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px dashed var(--border-subtle);
  font-size: 11.5px;
}

.g4r-milestone-km {
  font-weight: 700;
  color: var(--text-primary);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
}

.g4r-milestone-detour {
  color: var(--accent-blue);
  font-weight: 600;
  font-size: 11.5px;
}

.g4r-corridor-hero-compact {
  padding: 8px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 8px);
  box-shadow: none;
  margin: 4px 0 6px 0;
}

.g4r-corridor-hero-compact .g4r-strat-big-price {
  font-size: 19px;
}

.g4r-corridor-hero-compact .g4r-strat-big-saving {
  font-size: 18px;
}

/* ==========================================================================
   Sidebar Footer & Ethical Support Link
   ========================================================================== */

.g4r-sidebar-footer {
  margin-top: 14px;
  padding: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.g4r-support-banner {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-card);
}

.g4r-support-banner-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-hero);
}

.g4r-support-banner-text {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}

.g4r-support-banner-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.g4r-footer-legal-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 500;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 120ms ease;
}

.g4r-footer-legal-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-muted);
  background: var(--bg-elevated);
}

.g4r-footer-attributions {
  font-size: 9.5px;
  color: var(--text-tertiary);
  text-align: center;
  line-height: 1.4;
  padding: 4px 0 8px 0;
}

/* ==========================================================================
   Legal & Transparency Modal
   ========================================================================== */

.g4r-modal-backdrop {
  position: fixed;
  inset: 0;
  width: 100%;
  width: 100dvw;
  height: 100%;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.76);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  overscroll-behavior: contain;
  padding: max(16px, env(safe-area-inset-top, 16px)) 12px max(16px, env(safe-area-inset-bottom, 16px)) 12px;
  animation: g4rFadeIn 180ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  box-sizing: border-box;
}

.g4r-modal-backdrop.is-closing {
  animation: g4rFadeOut 180ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none;
}

.g4r-modal-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-md);
  max-width: 480px;
  width: 100%;
  min-height: 0;
  max-height: min(85vh, 580px);
  max-height: min(85dvh, calc(100dvh - 32px), 580px);
  margin: auto;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
  animation: g4rModalEnter 220ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  overflow: hidden;
  will-change: transform, opacity;
  box-sizing: border-box;
  flex-shrink: 0;
}

.g4r-modal-backdrop.is-closing .g4r-modal-card {
  animation: g4rModalExit 180ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

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

@keyframes g4rModalEnter {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes g4rModalExit {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
}

.g4r-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.g4r-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-hero);
}

.g4r-modal-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  transition: all 140ms cubic-bezier(0.16, 1, 0.3, 1);
}

.g4r-modal-close-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.g4r-modal-close-btn:hover {
  color: var(--text-hero);
  background: var(--bg-hover);
}

.g4r-modal-close-btn:active {
  transform: scale(0.92);
  transition-duration: 60ms;
}

.g4r-modal-body {
  padding: 18px 20px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.g4r-modal-section h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.g4r-modal-section p {
  margin: 0;
  white-space: pre-line;
}

.g4r-modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: flex-end;
  background: var(--bg-elevated);
  flex-shrink: 0;
}

.g4r-modal-footer-split {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.g4r-legal-support-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #f59e0b !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  background: rgba(245, 158, 11, 0.08) !important;
}

.g4r-legal-support-btn:hover {
  background: rgba(245, 158, 11, 0.16) !important;
  border-color: #f59e0b !important;
}

/* Enlaces secundarios en modales para acceso directo y transparencia */
.g4r-wizard-footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

.g4r-wizard-sub-link {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  transition: all 120ms ease;
}

.g4r-wizard-sub-link:hover {
  color: var(--text-hero);
  background: var(--bg-hover);
}

.g4r-wizard-sub-link.g4r-sub-link-support:hover {
  color: #f59e0b;
}

.g4r-wizard-sub-sep {
  color: var(--border-muted);
  user-select: none;
  font-size: 11px;
}

.g4r-sub-link-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.g4r-modal-sub-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}

.g4r-modal-text-link-btn {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: all 120ms ease;
  font-family: inherit;
}

.g4r-modal-text-link-btn:hover {
  color: var(--text-hero);
  background: var(--bg-hover);
}

.g4r-modal-sub-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* ==========================================================================
   Automotive Dashboard Fuel Gauge & Telemetry Cluster
   ========================================================================== */

.g4r-fuel-gauge-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 12px);
  padding: 9px 12px;
  box-shadow: var(--shadow-card);
  max-height: none;
  opacity: 1;
  overflow: visible;
  transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 200ms ease;
}

.g4r-gauge-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.g4r-gauge-title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.g4r-gauge-mini-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  line-height: 1;
}

.g4r-gauge-icon-inline {
  width: 12px;
  height: 12px;
  color: var(--accent-blue);
  flex-shrink: 0;
}

.g4r-gauge-level-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-hero);
  line-height: 1.2;
}

.g4r-gauge-telemetry-badge {
  font-size: 10px;
  font-weight: 700;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--accent-emerald);
  background: var(--accent-emerald-bg);
  border: 1px solid var(--accent-emerald-border);
  padding: 2.5px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* Pista y controles de ajuste */
.g4r-gauge-visual-track {
  position: relative;
  height: 7px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-full);
  margin: 3px 0 11px 0;
  border: 1px solid var(--border-subtle);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

:root[data-theme="light"] .g4r-gauge-visual-track {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

.g4r-gauge-fill-gradient {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, #ef4444 0%, #f59e0b 35%, #10b981 100%);
  transition: width 240ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.35);
}

.g4r-gauge-needle {
  position: absolute;
  top: -4px;
  width: 3.5px;
  height: 15px;
  background: #ffffff;
  border-radius: 2px;
  transform: translateX(-50%);
  transition: left 240ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.95);
  z-index: 2;
  pointer-events: none;
}

:root[data-theme="light"] .g4r-gauge-needle {
  background: #0f172a;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}

.g4r-gauge-scale-ticks {
  position: absolute;
  top: 9px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text-tertiary);
  pointer-events: none;
}

.g4r-scale-tick.is-empty {
  color: #ef4444;
}

.g4r-scale-tick.is-full {
  color: var(--accent-emerald);
}

.g4r-tank-chips-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}

.g4r-tank-chip {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: 10.5px;
  font-weight: 700;
  padding: 4.5px 4px;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: all 140ms cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.g4r-tank-chip:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-muted);
  transform: translateY(-1px);
}

.g4r-tank-chip:active {
  transform: scale(0.95);
  transition-duration: 60ms;
}

.g4r-tank-chip.is-active {
  background: rgba(16, 185, 129, 0.14);
  border-color: var(--accent-emerald);
  color: var(--accent-emerald);
  font-weight: 800;
  box-shadow: 0 0 0 1px var(--accent-emerald), 0 2px 8px rgba(16, 185, 129, 0.2);
  transform: translateY(0);
}

:root[data-theme="light"] .g4r-tank-chip.is-active {
  background: rgba(5, 150, 105, 0.12);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  box-shadow: 0 0 0 1px var(--brand-primary);
}

.g4r-btn-route-calc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: var(--radius-md, 12px) !important;
  padding: 11px 16px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.32) !important;
  transition: all 150ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.g4r-btn-route-calc:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.42) !important;
}

.g4r-btn-route-calc:active {
  transform: scale(0.98);
}



/* ==========================================================================
   Navigation Action Buttons (Google Maps, Waze, Apple Maps, Share)
   Direct 1-tap navigation, minimalist & compact
   ========================================================================== */

.g4r-nav-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 6px;
}

.g4r-nav-btn {
  flex: 1 1 0;
  min-width: 0;
  height: 32px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all 120ms ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

.g4r-nav-btn:active {
  transform: scale(0.97);
}

.g4r-nav-btn.g4r-nav-primary {
  flex: 1 1 auto;
  font-weight: 700;
  gap: 7px;
}

.g4r-nav-btn.g4r-nav-icon-only {
  flex: 0 0 34px;
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  padding: 0;
}

/* Google Maps */
.g4r-nav-google {
  background: rgba(66, 133, 244, 0.12);
  color: #60a5fa;
  border: 1px solid rgba(66, 133, 244, 0.35);
}

.g4r-nav-google:hover {
  background: rgba(66, 133, 244, 0.22);
  border-color: #60a5fa;
  color: #93c5fd;
  transform: translateY(-1px);
}

:root[data-theme="light"] .g4r-nav-google {
  background: rgba(66, 133, 244, 0.08);
  color: #1a73e8;
  border-color: rgba(66, 133, 244, 0.28);
}

:root[data-theme="light"] .g4r-nav-google:hover {
  background: rgba(66, 133, 244, 0.16);
  border-color: #1a73e8;
  color: #1557b0;
}

/* Waze */
.g4r-nav-waze {
  background: rgba(51, 204, 255, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(51, 204, 255, 0.35);
}

.g4r-nav-waze:hover {
  background: rgba(51, 204, 255, 0.22);
  border-color: #38bdf8;
  color: #7dd3fc;
  transform: translateY(-1px);
}

:root[data-theme="light"] .g4r-nav-waze {
  background: rgba(0, 180, 216, 0.09);
  color: #0077b6;
  border-color: rgba(0, 180, 216, 0.28);
}

:root[data-theme="light"] .g4r-nav-waze:hover {
  background: rgba(0, 180, 216, 0.18);
  border-color: #0077b6;
  color: #023e8a;
}

/* Apple Maps */
.g4r-nav-apple {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  border: 1px solid var(--border-muted);
}

.g4r-nav-apple:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--border-active);
  color: #ffffff;
  transform: translateY(-1px);
}

:root[data-theme="light"] .g4r-nav-apple {
  background: rgba(0, 0, 0, 0.04);
  color: #18181b;
  border-color: rgba(0, 0, 0, 0.12);
}

:root[data-theme="light"] .g4r-nav-apple:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.22);
  color: #000000;
}

/* Compartir */
.g4r-nav-share {
  flex: 0 0 34px;
  width: 34px;
  padding: 0;
  cursor: pointer;
  background: rgba(148, 163, 184, 0.08);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

.g4r-nav-share:hover {
  background: rgba(148, 163, 184, 0.18);
  color: var(--text-primary);
  border-color: var(--border-muted);
  transform: translateY(-1px);
}

:root[data-theme="light"] .g4r-nav-share {
  background: rgba(100, 116, 139, 0.06);
  color: #475569;
  border-color: rgba(100, 116, 139, 0.18);
}

:root[data-theme="light"] .g4r-nav-share:hover {
  background: rgba(100, 116, 139, 0.12);
  color: #0f172a;
  border-color: rgba(100, 116, 139, 0.30);
}

.g4r-nav-share.is-copied {
  background: rgba(16, 185, 129, 0.18) !important;
  border-color: var(--accent-emerald) !important;
  color: var(--accent-emerald) !important;
}

:root[data-theme="light"] .g4r-nav-share.is-copied {
  background: rgba(5, 150, 105, 0.14) !important;
  border-color: var(--accent-emerald) !important;
  color: var(--accent-emerald) !important;
}

.g4r-nav-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.g4r-nav-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* En popups de Leaflet: barra completa limpia */
.g4r-nav-actions.is-popup {
  display: flex !important;
  gap: 6px !important;
  margin-top: 8px !important;
  width: 100% !important;
}

/* ==========================================================================
   Vehicle Onboarding Wizard Modal
   ========================================================================== */

.g4r-wizard-backdrop {
  z-index: 100000;
}

.g4r-wizard-modal {
  max-width: 480px;
  width: 100%;
  min-height: 0;
  max-height: min(90vh, 680px);
  max-height: min(90dvh, calc(100dvh - 32px), 680px);
  border-radius: 16px;
  border: 1px solid var(--border-muted);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  background: var(--bg-surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: auto;
  flex-shrink: 0;
  box-sizing: border-box;
}

.g4r-wizard-title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.g4r-wizard-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-blue);
  background: var(--accent-blue-bg);
  border: 1px solid var(--accent-blue-border);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  display: inline-block;
  align-self: flex-start;
}

.g4r-wizard-body {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.g4r-wizard-intro {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
  margin: 0;
}

.g4r-wizard-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.g4r-wizard-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}

.g4r-wizard-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.g4r-wizard-autonomy-stat {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent-emerald);
  background: var(--accent-emerald-bg);
  border: 1px solid var(--accent-emerald-border);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.g4r-wizard-fuel-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  padding: 2px;
  margin: 0;
}

.g4r-wizard-fuel-grid .g4r-wizard-tile:nth-child(1),
.g4r-wizard-fuel-grid .g4r-wizard-tile:nth-child(2) {
  grid-column: span 3;
}

.g4r-wizard-fuel-grid .g4r-wizard-tile:nth-child(n+3) {
  grid-column: span 2;
}

.g4r-wizard-tile {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 10px;
  min-height: 42px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 140ms cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--text-secondary);
  position: relative;
}

.g4r-wizard-tile:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-muted);
  color: var(--text-hero);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.g4r-wizard-tile:active {
  transform: scale(0.97);
  transition-duration: 50ms;
}

.g4r-wizard-tile.is-active {
  background: var(--brand-primary-bg);
  border-color: var(--brand-primary-light);
  color: var(--text-hero);
  box-shadow: 0 0 0 1px var(--brand-primary-light);
}

.g4r-wizard-tile-icon {
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.g4r-wizard-tile-icon .g4r-svg-icon {
  width: 17px;
  height: 17px;
}

.g4r-wizard-tile-text {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  transition: color 130ms ease;
}

.g4r-wizard-tile.is-active .g4r-wizard-tile-text {
  color: var(--brand-primary-light);
  font-weight: 700;
}

.g4r-wizard-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 520px) {
  .g4r-wizard-grid-2col {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}

.g4r-wizard-presets-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.g4r-wizard-preset-chip {
  padding: 4px 6px;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 140ms cubic-bezier(0.16, 1, 0.3, 1);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.g4r-wizard-preset-chip:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.g4r-wizard-preset-chip:active {
  transform: scale(0.94);
  transition-duration: 60ms;
}

.g4r-wizard-preset-chip.is-active {
  background: var(--brand-primary-bg);
  border-color: var(--brand-primary-light);
  color: var(--brand-primary-light);
  font-weight: 700;
  transform: translateY(0);
}

.g4r-wizard-levels-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}

.g4r-wizard-level-chip {
  padding: 8px 4px;
  font-size: 10.5px;
  font-weight: 600;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
  cursor: pointer;
  text-align: center;
  transition: all 140ms cubic-bezier(0.16, 1, 0.3, 1);
  white-space: normal;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  min-width: 0;
  box-sizing: border-box;
  word-break: break-word;
}

.g4r-wizard-level-chip:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.g4r-wizard-level-chip:active {
  transform: scale(0.95);
  transition-duration: 60ms;
}

.g4r-wizard-level-chip.is-active {
  background: var(--brand-primary-bg);
  border-color: var(--brand-primary-light);
  color: var(--brand-primary-light);
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--brand-primary-light);
}

/* Cuadrícula de programas de fidelización */
.g4r-wizard-loyalty-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.g4r-wizard-loyalty-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 140ms ease;
  user-select: none;
  text-align: left;
}

.g4r-wizard-loyalty-chip:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-muted);
}

.g4r-wizard-loyalty-chip.is-active {
  background: rgba(2, 132, 199, 0.12);
  border-color: #0284c7;
}

.g4r-wizard-loyalty-info {
  display: flex;
  flex-direction: column;
}

.g4r-wizard-loyalty-name {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
}

.g4r-wizard-loyalty-chip.is-active .g4r-wizard-loyalty-name {
  color: #0284c7;
}

.g4r-wizard-loyalty-disc {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-emerald);
  margin-top: 2px;
}

.g4r-wizard-loyalty-check {
  font-size: 12px;
  color: #0284c7;
  opacity: 0;
  transform: scale(0.8);
  transition: all 120ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.g4r-wizard-loyalty-chip.is-active .g4r-wizard-loyalty-check {
  opacity: 1;
  transform: scale(1);
}

.g4r-wizard-loyalty-hint {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-tertiary);
  margin: 4px 0 0;
}

.g4r-wizard-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 10;
}

.g4r-wizard-submit-btn {
  width: 100%;
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border-radius: var(--radius-sm);
  background: var(--accent-emerald);
  color: #ffffff;
  border: none;
  cursor: pointer;
  transition: all 140ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.g4r-wizard-submit-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

/* Paneles y transiciones del asistente */
.g4r-wizard-step-pane {
  display: flex;
  flex-direction: column;
  gap: 13px;
  animation: g4rFadeIn 180ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Encabezado del paso 2 (Onboarding de Ubicación) */
.is-location-wizard .g4r-modal-header {
  display: none !important;
}

.g4r-wizard-hero-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 14px 10px 4px;
  gap: 10px;
}

.g4r-wizard-hero-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-muted);
  color: var(--text-hero);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2px;
}

.g4r-wizard-hero-svg {
  width: 26px;
  height: 26px;
  display: block;
}

.g4r-wizard-hero-title {
  font-size: 17.5px;
  font-weight: 800;
  color: var(--text-hero);
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.3px;
}

.g4r-wizard-hero-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
  max-width: 360px;
}

/* Modal de ubicación para nuevos usuarios */
.g4r-wizard-modal.is-location-wizard {
  max-width: 400px;
  width: min(400px, calc(100% - 24px));
  margin: auto;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
  background: var(--bg-surface);
  border: 1px solid var(--border-muted);
}

.is-location-wizard .g4r-wizard-body {
  padding: 16px 20px 22px;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.g4r-wizard-location-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  margin: 4px 0 0;
}

.g4r-wizard-btn-location {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 18px;
  background: var(--brand-primary);
  color: var(--brand-primary-text, #ffffff) !important;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 140ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  font-family: inherit;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.g4r-wizard-btn-location:hover {
  background: var(--brand-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.g4r-wizard-btn-location:active {
  transform: scale(0.98);
}

.g4r-wizard-btn-location .g4r-wizard-btn-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.g4r-wizard-btn-location.is-loading {
  background: var(--brand-primary-hover);
  cursor: wait;
  opacity: 0.85;
}

.g4r-wizard-btn-skip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 140ms ease;
  font-family: inherit;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.g4r-wizard-btn-skip:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-active);
  color: var(--text-primary);
}

.g4r-wizard-btn-skip:active {
  transform: scale(0.98);
}

.g4r-wizard-btn-skip .g4r-wizard-btn-skip-icon {
  width: 14px;
  height: 14px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

/* Nota compacta y elegante de privacidad */
.g4r-wizard-privacy-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-tertiary);
  margin: 6px auto 0;
  text-align: center;
  line-height: 1.35;
  white-space: nowrap;
}

.g4r-wizard-privacy-pill .g4r-wizard-privacy-icon {
  width: 13px;
  height: 13px;
  color: var(--accent-emerald);
  flex-shrink: 0;
}

.g4r-spin {
  animation: g4rSpin 1s linear infinite;
}

@keyframes g4rSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   Project Support & Donation System (Buy Me a Coffee)
   ========================================================================== */

.g4r-tile-svg {
  width: 22px;
  height: 22px;
}

.g4r-btn-svg-inline {
  width: 15px;
  height: 15px;
  display: inline-block;
  vertical-align: -2px;
  margin-right: 4px;
}

.g4r-chip-svg {
  width: 13px;
  height: 13px;
  margin-right: 4px;
  vertical-align: -2px;
}

/* Botón de apoyo al proyecto */
.g4r-bmc-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #000000;
  border-radius: var(--radius-full);
  padding: 8px 18px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 140ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
  white-space: nowrap;
}

.g4r-bmc-pill-btn:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.45);
  color: #000000;
}

.g4r-bmc-pill-btn:active {
  transform: translateY(0);
}

.g4r-bmc-pill-btn.g4r-btn-large {
  padding: 12px 22px;
  font-size: 13.5px;
  width: 100%;
}

.g4r-bmc-icon-badge {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.g4r-bmc-icon-badge .g4r-heart-svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.g4r-bmc-svg-inline {
  width: 15px;
  height: 15px;
  fill: currentColor;
  flex-shrink: 0;
}

.g4r-bmc-external-svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-left: 2px;
  flex-shrink: 0;
}

.g4r-bmc-brand-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-hero);
}

.g4r-support-banner-sub {
  font-size: 10.5px;
  color: var(--text-tertiary);
}

.g4r-support-banner-titles {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Modal de Apoyo y Transparencia */
.g4r-support-modal {
  max-width: 480px;
  width: 100%;
  min-height: 0;
  max-height: min(85vh, 620px);
  max-height: min(85dvh, calc(100dvh - env(safe-area-inset-top, 16px) - env(safe-area-inset-bottom, 16px) - 32px), 620px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  border-radius: var(--radius-md);
  box-sizing: border-box;
}

.g4r-support-modal-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.g4r-support-modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 20px 22px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.g4r-support-callout {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.g4r-support-callout h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-emerald);
}

.g4r-support-callout p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}

.g4r-support-pitch-card {
  background: var(--bg-card);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

.g4r-support-pitch-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent-emerald);
}

.g4r-support-pitch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.g4r-support-pitch-badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--accent-emerald);
  background: rgba(16, 185, 129, 0.12);
  padding: 2px 7px;
  border-radius: 4px;
}

.g4r-support-pitch-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-hero);
  font-variant-numeric: tabular-nums;
}

.g4r-support-pitch-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}

.g4r-btn-kofi-main {
  width: 100%;
  justify-content: center;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 700;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #000000;
  border: none;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
  transition: all 160ms cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.g4r-btn-kofi-main:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.5);
  color: #000000;
}

.g4r-support-hint-text {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-tertiary);
  text-align: center;
  margin: 0;
  padding: 0 4px;
  flex-shrink: 0;
}

/* Modal Selector de Idioma (i18n) */
.g4r-lang-modal-card {
  max-width: 440px;
  width: 100%;
  min-height: 0;
  max-height: min(85vh, 560px);
  max-height: min(85dvh, calc(100dvh - env(safe-area-inset-top, 16px) - env(safe-area-inset-bottom, 16px) - 32px), 560px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

.g4r-lang-modal-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.g4r-lang-icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: rgba(14, 165, 233, 0.12);
  color: var(--accent-cyan, #0ea5e9);
  flex-shrink: 0;
}

.g4r-lang-globe-svg {
  width: 18px;
  height: 18px;
}

.g4r-lang-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px 20px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.g4r-lang-subtext {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

.g4r-lang-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.g4r-lang-item-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 13px;
  background: var(--bg-card);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
  font-size: 13.5px;
  text-align: left;
}

.g4r-lang-item-btn:hover {
  background: var(--bg-surface-hover, rgba(255, 255, 255, 0.06));
  border-color: var(--border-medium, rgba(255, 255, 255, 0.2));
  transform: translateY(-1px);
}

.g4r-lang-item-btn.is-active {
  background: rgba(14, 165, 233, 0.12);
  border-color: var(--accent-cyan, #0ea5e9);
  box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.35);
}

.g4r-lang-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.g4r-lang-code-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 24px;
  padding: 0 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-primary);
}

.g4r-lang-item-btn.is-active .g4r-lang-code-pill {
  background: var(--accent-cyan, #0ea5e9);
  border-color: transparent;
  color: #0b0f17;
}

.g4r-lang-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text-primary);
}

.g4r-lang-check-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-cyan, #0ea5e9);
  color: #0b0f17;
  flex-shrink: 0;
}

.g4r-lang-check-svg {
  width: 13px;
  height: 13px;
  stroke-width: 3;
}

@media (max-width: 860px) {
  .g4r-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    width: 100dvw !important;
    height: 100% !important;
    height: 100dvh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
    padding: 16px 14px !important;
    box-sizing: border-box !important;
    z-index: 999999 !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    background: rgba(0, 0, 0, 0.82) !important;
  }

  .g4r-modal-card,
  .g4r-wizard-modal,
  .g4r-support-modal,
  .g4r-lang-modal-card {
    margin: auto !important;
    width: min(390px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    max-height: min(90vh, calc(100vh - 28px), 600px) !important;
    max-height: min(90dvh, calc(100dvh - 28px), 600px) !important;
    min-height: 0 !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75) !important;
    background: var(--bg-surface) !important;
  }

  .g4r-history-modal-card {
    margin: auto !important;
    width: min(780px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: min(92vh, calc(100vh - 24px), 720px) !important;
    max-height: min(92dvh, calc(100dvh - 24px), 720px) !important;
    min-height: 0 !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75) !important;
    background: var(--bg-surface) !important;
    will-change: transform;
    transform: translateZ(0);
    contain: layout paint;
  }

  .g4r-wizard-modal.is-location-wizard {
    margin: auto !important;
    width: min(390px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    max-height: min(75vh, calc(100vh - 48px), 440px) !important;
    max-height: min(75dvh, calc(100dvh - 48px), 440px) !important;
  }

  .g4r-modal-header,
  .g4r-wizard-modal .g4r-modal-header {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    padding: 10px 14px !important;
  }

  .g4r-modal-title {
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  .g4r-modal-body,
  .g4r-wizard-body,
  .g4r-history-modal-body,
  .g4r-support-modal-body,
  .g4r-lang-modal-body {
    padding: 10px 14px !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    will-change: scroll-position;
    transform: translateZ(0);
  }

  /* Configuración del vehículo */
  .g4r-wizard-intro {
    font-size: 11px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    color: var(--text-secondary) !important;
  }

  .g4r-wizard-step-pane {
    gap: 8px !important;
    min-height: 0 !important;
  }

  .g4r-wizard-field {
    gap: 3px !important;
  }

  .g4r-wizard-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    margin-bottom: 2px !important;
  }

  .g4r-wizard-label-row {
    margin-bottom: 2px !important;
  }

  .g4r-wizard-autonomy-stat {
    font-size: 10px !important;
    padding: 1px 6px !important;
  }

  .g4r-wizard-fuel-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  .g4r-wizard-fuel-grid .g4r-wizard-tile {
    grid-column: span 1 !important;
  }

  .g4r-wizard-tile {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 6px 8px !important;
    gap: 6px !important;
    min-height: 32px !important;
  }

  .g4r-wizard-fuel-grid .g4r-wizard-tile:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    justify-content: center !important;
  }

  .g4r-wizard-tile-icon {
    font-size: 13px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .g4r-wizard-tile-text {
    font-size: 11px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  .g4r-wizard-grid-2col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    align-items: start !important;
  }

  .g4r-wizard-grid-2col .g4r-wizard-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
  }

  .g4r-wizard-grid-2col .g4r-wizard-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    height: 16px !important;
    line-height: 16px !important;
    margin-bottom: 2px !important;
  }

  .g4r-wizard-grid-2col .g4r-wizard-presets-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 3px !important;
    width: 100% !important;
    margin-bottom: 3px !important;
  }

  .g4r-wizard-grid-2col .g4r-wizard-preset-chip {
    padding: 3px 0 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    min-height: 24px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .g4r-wizard-grid-2col .g4r-input-stepper {
    height: 32px !important;
    padding: 1px 3px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .g4r-wizard-grid-2col .g4r-input-stepper .g4r-stepper-btn {
    width: 28px !important;
    height: 28px !important;
    font-size: 15px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .g4r-wizard-grid-2col .g4r-input-stepper input {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    padding: 1px 2px !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  .g4r-wizard-grid-2col .g4r-stepper-unit {
    font-size: 9.5px !important;
    font-weight: 600 !important;
    flex-shrink: 0 !important;
    color: var(--text-tertiary) !important;
    margin-right: 2px !important;
  }

  .g4r-wizard-label-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    margin-bottom: 2px !important;
  }

  .g4r-wizard-autonomy-stat {
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .g4r-wizard-levels-row {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 3px !important;
  }

  .g4r-wizard-level-chip {
    padding: 5px 2px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    min-height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .g4r-wizard-loyalty-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  .g4r-wizard-loyalty-chip {
    padding: 6px 8px !important;
  }

  .g4r-wizard-loyalty-name {
    font-size: 10.5px !important;
  }

  .g4r-wizard-loyalty-disc {
    font-size: 9.5px !important;
  }

  .g4r-wizard-loyalty-hint {
    font-size: 10px !important;
  }

  /* Modal de permiso de ubicación */
  .is-location-wizard .g4r-modal-header {
    display: none !important;
  }

  .is-location-wizard .g4r-wizard-body {
    padding: 14px 16px 18px !important;
    gap: 12px !important;
    overflow-y: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  .is-location-wizard .g4r-wizard-hero-banner {
    padding: 6px 2px 2px !important;
    gap: 8px !important;
  }

  .is-location-wizard .g4r-wizard-hero-icon-wrap {
    width: 48px !important;
    height: 48px !important;
  }

  .is-location-wizard .g4r-wizard-hero-svg {
    width: 22px !important;
    height: 22px !important;
  }

  .is-location-wizard .g4r-wizard-hero-title {
    font-size: 16px !important;
    margin: 0 !important;
  }

  .is-location-wizard .g4r-wizard-hero-desc {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
  }

  .is-location-wizard .g4r-wizard-btn-location {
    padding: 12px 16px !important;
    font-size: 13.5px !important;
  }

  .is-location-wizard .g4r-wizard-btn-skip {
    padding: 9px 12px !important;
    font-size: 12px !important;
  }

  .is-location-wizard .g4r-wizard-privacy-pill {
    font-size: 10px !important;
  }

  /* Modal legal y de privacidad */
  .g4r-modal-section {
    margin-bottom: 8px !important;
  }

  .g4r-modal-section h4 {
    font-size: 11.5px !important;
    margin: 0 0 3px 0 !important;
    line-height: 1.3 !important;
    color: var(--text-hero) !important;
  }

  .g4r-modal-section p {
    font-size: 10.5px !important;
    line-height: 1.38 !important;
    margin: 0 !important;
    color: var(--text-secondary) !important;
  }

  /* Modal de apoyo y donaciones */
  .g4r-support-modal-body {
    padding: 10px 12px 12px !important;
    gap: 8px !important;
  }

  .g4r-support-callout {
    padding: 7px 9px !important;
    gap: 3px !important;
  }

  .g4r-support-callout h4 {
    font-size: 11.5px !important;
  }

  .g4r-support-callout p {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }

  .g4r-support-pitch-card {
    padding: 7px 9px !important;
    gap: 3px !important;
  }

  .g4r-support-pitch-badge {
    font-size: 8.5px !important;
    padding: 1px 5px !important;
  }

  .g4r-support-pitch-price {
    font-size: 11.5px !important;
  }

  .g4r-support-pitch-desc {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }

  .g4r-bmc-pill-btn.g4r-btn-kofi-main,
  .g4r-btn-kofi-main {
    padding: 8px 12px !important;
    font-size: 11.5px !important;
    min-height: 36px !important;
    width: 100% !important;
  }

  .g4r-support-hint-text {
    font-size: 9.5px !important;
    line-height: 1.25 !important;
  }

  /* Pie fijo en modales */
  .g4r-modal-footer,
  .g4r-wizard-footer {
    padding: 8px 14px !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    background: var(--bg-elevated) !important;
    border-top: 1px solid var(--border-subtle) !important;
  }

  .g4r-modal-footer:not(.g4r-modal-footer-split) .g4r-btn,
  .g4r-wizard-submit-btn {
    padding: 8px 14px !important;
    font-size: 12px !important;
    min-height: 36px !important;
    width: 100% !important;
  }

  .g4r-modal-footer-split {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 8px 12px !important;
  }

  .g4r-modal-footer-split .g4r-btn {
    flex: 1 1 0 !important;
    width: auto !important;
    min-height: 36px !important;
    padding: 6px 10px !important;
    font-size: 11.5px !important;
    justify-content: center !important;
  }
}

/* Adaptación responsiva de botones */
.g4r-kofi-text-full { display: inline; }
.g4r-kofi-text-short { display: none; }

/* En el modal del vehículo (ancho máximo de 480px en cualquier pantalla),
   las 5 columnas de nivel de depósito siempre usan etiquetas concisas para
   evitar desbordamiento horizontal en resoluciones altas (1440p) o fuentes anchas de sistema (Linux) */
.g4r-wizard-levels-row .g4r-level-full { display: none; }
.g4r-wizard-levels-row .g4r-level-short {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .g4r-wizard-levels-row {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .g4r-wizard-level-chip {
    padding: 6px 2px !important;
    font-size: 9.5px !important;
    white-space: normal !important;
    line-height: 1.15;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    word-break: break-word;
  }
}

@media (max-width: 480px) {
  .g4r-kofi-text-full { display: none; }
  .g4r-kofi-text-short { display: inline; }
}

/* ==========================================================================
   In-Feed Support Card (Mobile & Desktop Contextual Ko-fi Invitation)
   ========================================================================== */
.g4r-infeed-support-card {
  position: relative;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(245, 158, 11, 0.02) 100%);
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: var(--radius-md);
  padding: 13px 15px;
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  animation: g4rFadeIn 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: opacity 240ms ease, transform 240ms ease;
}

.g4r-infeed-support-card.is-dismissing {
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  pointer-events: none;
}

.g4r-infeed-dismiss-btn {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 120ms ease;
  padding: 0;
}

.g4r-infeed-dismiss-btn .g4r-modal-close-icon {
  width: 13px;
  height: 13px;
}

.g4r-infeed-dismiss-btn:hover {
  background: var(--bg-hover);
  color: var(--text-hero);
}

.g4r-infeed-support-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 24px;
}

.g4r-infeed-badge-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
}

.g4r-infeed-badge-icon .g4r-heart-svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.g4r-infeed-titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.g4r-infeed-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #f59e0b;
  text-transform: uppercase;
  display: inline-block;
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.24);
}

:root[data-theme="light"] .g4r-infeed-tag {
  color: #d97706;
}

.g4r-infeed-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-hero);
  margin: 0;
  line-height: 1.25;
}

.g4r-infeed-desc {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

.g4r-infeed-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.g4r-infeed-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #000000;
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
  transition: all 140ms cubic-bezier(0.16, 1, 0.3, 1);
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}

.g4r-infeed-cta-btn:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.g4r-infeed-cta-btn:active {
  transform: translateY(0);
}

.g4r-infeed-cta-btn .g4r-heart-svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.g4r-infeed-later-btn {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  transition: all 120ms ease;
}

.g4r-infeed-later-btn:hover {
  color: var(--text-secondary);
  background: var(--bg-hover);
}

/* ==========================================================================
   Visual Brand Badges & Highway Milestone Progress Tracker
   ========================================================================== */

.g4r-card-brand-tag {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  border: 1px solid currentColor;
}

.g4r-hero-price-line {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.g4r-card-progress-tracker {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 6px 10px;
  margin: 4px 0 6px 0;
}

.g4r-tracker-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9.5px;
  color: var(--text-tertiary);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}

.g4r-tracker-endpoint {
  font-weight: 600;
  color: var(--text-tertiary);
}

.g4r-tracker-marker-label {
  font-weight: 700;
  color: var(--accent-emerald);
}

.g4r-tracker-rail {
  position: relative;
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  overflow: visible;
}

.g4r-tracker-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--accent-emerald);
}

.g4r-tracker-dot {
  position: absolute;
  top: -3px;
  width: 11px;
  height: 11px;
  background: var(--accent-emerald);
  border: 2px solid #ffffff;
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   Radar España / National Barometer & Rankings
   ========================================================================== */

.g4r-radar-hero {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: g4rPanelEnter 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
  box-sizing: border-box;
  overflow: hidden;
  max-width: 100%;
}

.g4r-radar-hero-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.g4r-radar-title-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
}

.g4r-radar-head-icon {
  width: 17px;
  height: 17px;
  color: #f59e0b;
  flex-shrink: 0;
}

.g4r-radar-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-hero);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.g4r-radar-badge {
  display: inline-flex;
  align-items: center;
  gap: 4.5px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.14) 0%, rgba(245, 158, 11, 0.06) 100%);
  border: 1px solid rgba(245, 158, 11, 0.32);
  padding: 3px 8.5px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: all 140ms ease;
  margin-left: auto;
}

.g4r-radar-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
  animation: g4rPulseDot 1.8s ease-in-out infinite;
  flex-shrink: 0;
}

.g4r-radar-badge-num {
  font-size: 11.5px;
  font-weight: 800;
  color: #f59e0b;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.g4r-radar-badge-icon {
  width: 12.5px;
  height: 12.5px;
  color: #f59e0b;
  flex-shrink: 0;
  opacity: 0.92;
}

.g4r-radar-subtitle {
  margin: 0;
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Featured Record Hero Card */
.g4r-radar-record-hero-card {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.16) 0%, rgba(16, 185, 129, 0.04) 100%);
  border: 1.5px solid rgba(16, 185, 129, 0.45);
  border-radius: var(--radius-md, 14px);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.15);
  position: relative;
  overflow: hidden;
}

:root[data-theme="light"] .g4r-radar-record-hero-card {
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.12) 0%, rgba(5, 150, 105, 0.03) 100%);
  border-color: rgba(5, 150, 105, 0.35);
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.1);
}

.g4r-record-hero-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.g4r-record-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--accent-emerald, #10b981);
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.4);
  padding: 2.5px 8px;
  border-radius: var(--radius-full);
}

.g4r-record-hero-pill svg {
  width: 12px;
  height: 12px;
}

.g4r-record-delta-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-emerald, #10b981);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 2px 7px;
  border-radius: var(--radius-full);
}

.g4r-record-hero-body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.g4r-record-hero-left {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.g4r-record-hero-price {
  font-size: 28px;
  font-weight: 900;
  color: var(--accent-emerald, #10b981);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 0 16px rgba(16, 185, 129, 0.3);
}

.g4r-record-hero-unit {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-tertiary);
}

.g4r-record-hero-station {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.g4r-record-station-brand {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-hero);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.g4r-record-station-loc {
  font-size: 11.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Secondary Submetrics Row */
.g4r-radar-submetrics-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.g4r-submetric-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 10px);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.g4r-submetric-card.is-saving {
  border-color: rgba(59, 130, 246, 0.35);
  background: rgba(59, 130, 246, 0.06);
}

.g4r-submetric-label {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.g4r-submetric-val {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-hero);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.g4r-submetric-sub {
  font-size: 10px;
  color: var(--text-secondary);
}

/* Tarjeta interactiva de previsión y recomendación en el Barómetro Nacional */
.g4r-radar-trend-callout {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(16, 185, 129, 0.06) 100%);
  border: 1px solid rgba(59, 130, 246, 0.24);
  border-radius: var(--radius-sm, 10px);
  padding: 9px 12px;
  cursor: pointer;
  transition: all 140ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.g4r-radar-trend-callout:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.14) 0%, rgba(16, 185, 129, 0.10) 100%);
  border-color: rgba(59, 130, 246, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.g4r-radar-trend-callout:active {
  transform: translateY(0);
}

.g4r-radar-trend-callout-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.g4r-radar-trend-pill {
  display: inline-flex;
  align-items: center;
  gap: 4.5px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--brand-primary, #3b82f6);
  background: rgba(59, 130, 246, 0.12);
  padding: 2.5px 7px;
  border-radius: var(--radius-full);
}

.g4r-radar-trend-pill .g4r-svg-icon {
  width: 11px;
  height: 11px;
}

.g4r-radar-trend-link-text {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-hero);
}

.g4r-radar-trend-link-text .g4r-chevron-icon {
  width: 13px;
  height: 13px;
  stroke-width: 2.5;
}

.g4r-radar-trend-desc {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-secondary);
}

.g4r-radar-saving-callout {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.28);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 11.5px;
  color: var(--text-primary);
  line-height: 1.45;
}

.g4r-radar-callout-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  color: var(--accent-emerald);
  flex-shrink: 0;
  margin-top: 1px;
}

.g4r-radar-callout-text {
  flex: 1;
}

/* Segmented control de territorios en Barómetro Nacional */
.g4r-radar-territory-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  padding: 3px;
  width: 100%;
  box-sizing: border-box;
}

.g4r-radar-tab-pill {
  flex: 1;
  text-align: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  padding: 6px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all 140ms ease;
}

.g4r-radar-tab-pill:hover {
  color: var(--text-hero);
  background: rgba(255, 255, 255, 0.05);
}

.g4r-radar-tab-pill.is-active {
  background: var(--bg-card);
  color: var(--text-hero);
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-muted);
}

/* Executive Ultra-Compact Barometer Card */
.g4r-radar-hero.g4r-radar-hero-compact {
  padding: 10px 12px;
  gap: 8px;
}

.g4r-radar-exec-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.g4r-radar-exec-col {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 10px);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3px;
  min-width: 0;
  box-sizing: border-box;
}

.g4r-radar-exec-col.is-record {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.14) 0%, rgba(16, 185, 129, 0.03) 100%);
  border-color: rgba(16, 185, 129, 0.40);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.05);
}

.g4r-radar-exec-col.is-record.is-clickable {
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
  user-select: none;
  -webkit-user-select: none;
}

.g4r-radar-exec-col.is-record.is-clickable:hover {
  transform: translateY(-1px);
  border-color: rgba(16, 185, 129, 0.65);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.14);
}

.g4r-radar-exec-col.is-record.is-clickable:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(16, 185, 129, 0.08);
}

.g4r-radar-exec-col.is-reference {
  background: var(--bg-elevated);
  border-color: var(--border-subtle);
}

.g4r-exec-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.g4r-exec-hero-title-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.g4r-exec-record-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.8);
  flex-shrink: 0;
}

.g4r-exec-col-label {
  font-size: 9px;
  font-weight: 800;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.g4r-radar-exec-col.is-record .g4r-exec-col-label {
  color: #10b981;
}

.g4r-exec-col-tag {
  font-size: 9.5px;
  font-weight: 700;
  color: #10b981;
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 1.5px 6px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  line-height: 1;
}

.g4r-exec-col-main {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin: 1px 0;
}

.g4r-exec-col-price {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-hero);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}

.g4r-exec-col-price.g4r-exec-price-hero {
  font-size: 25px;
  font-weight: 900;
  color: #10b981;
  letter-spacing: -0.02em;
}

.g4r-exec-col-price.g4r-exec-price-ref {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-hero);
  letter-spacing: -0.01em;
}

.g4r-exec-col-unit {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
}

.g4r-exec-col-sub {
  font-size: 10.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.g4r-exec-station-brand {
  color: var(--text-primary);
  font-weight: 700;
}

.g4r-exec-station-city {
  color: var(--text-tertiary);
  font-weight: 500;
}

/* Botón de acción directa al Barómetro Nacional e Histórico */
.g4r-radar-exec-trend-btn,
.g4r-radar-exec-action-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(16, 185, 129, 0.08) 100%);
  border: 1px solid rgba(59, 130, 246, 0.28);
  border-radius: var(--radius-sm, 10px);
  padding: 8px 12px;
  cursor: pointer;
  color: var(--text-hero);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  transition: all 160ms cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
  user-select: none;
  -webkit-user-select: none;
}

.g4r-radar-exec-trend-btn:hover,
.g4r-radar-exec-action-btn:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.20) 0%, rgba(16, 185, 129, 0.14) 100%);
  border-color: rgba(59, 130, 246, 0.45);
  transform: translateY(-0.5px);
  box-shadow: 0 3px 12px rgba(59, 130, 246, 0.18);
}

.g4r-radar-exec-trend-btn:active,
.g4r-radar-exec-action-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(59, 130, 246, 0.1);
}

.g4r-exec-trend-left,
.g4r-radar-exec-btn-left {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex: 1;
}

.g4r-exec-trend-icon,
.g4r-radar-exec-btn-left .g4r-svg-icon {
  width: 14px;
  height: 14px;
  color: var(--brand-primary, #3b82f6);
  flex-shrink: 0;
}

.g4r-exec-trend-text,
.g4r-radar-exec-btn-text,
.g4r-radar-exec-trend-btn > span {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-hero);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}

.g4r-exec-trend-arrow,
.g4r-radar-exec-action-btn .g4r-chevron-icon,
.g4r-radar-exec-trend-btn .g4r-chevron-icon {
  width: 14px;
  height: 14px;
  color: var(--brand-primary, #3b82f6);
  flex-shrink: 0;
  stroke-width: 2.5;
  margin-left: auto;
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.g4r-radar-exec-trend-btn:hover .g4r-exec-trend-arrow,
.g4r-radar-exec-action-btn:hover .g4r-chevron-icon,
.g4r-radar-exec-trend-btn:hover .g4r-chevron-icon {
  transform: translateX(2px);
}

.g4r-history-view-ranking-btn {
  margin-top: 10px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  padding: 10px 14px;
}

.g4r-history-view-ranking-btn .g4r-svg-icon {
  width: 15px;
  height: 15px;
}

@media (max-width: 480px) {
  .g4r-radar-hero.g4r-radar-hero-compact {
    padding: 8px 10px;
    gap: 7px;
  }

  .g4r-radar-exec-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 6px;
  }

  .g4r-radar-exec-col {
    padding: 7px 8px;
  }

  .g4r-exec-col-price.g4r-exec-price-hero {
    font-size: 22px;
  }

  .g4r-exec-col-price.g4r-exec-price-ref {
    font-size: 17px;
  }

  .g4r-exec-col-sub {
    font-size: 10px;
  }

  .g4r-radar-exec-trend-btn,
  .g4r-radar-exec-action-btn {
    padding: 7px 10px;
  }

  .g4r-exec-trend-text,
  .g4r-radar-exec-btn-text,
  .g4r-radar-exec-trend-btn > span {
    font-size: 10.5px;
  }
}

/* Cinta compacta de regímenes fiscales (IGIC, IPSI, IVA) */
.g4r-radar-regimes-ribbon {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0;
}

.g4r-radar-regimes-ribbon::-webkit-scrollbar {
  display: none;
}

.g4r-regime-chip {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: 11px;
  cursor: pointer;
  transition: all 140ms ease;
  white-space: nowrap;
  text-align: left;
}

.g4r-regime-chip:hover {
  background: var(--bg-hover);
  border-color: var(--border-muted);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.g4r-regime-chip:active {
  transform: scale(0.98);
}

.g4r-regime-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.g4r-regime-badge.is-igic {
  background: rgba(245, 158, 11, 0.16);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.g4r-regime-badge.is-ipsi {
  background: rgba(14, 165, 233, 0.16);
  color: #0ea5e9;
  border: 1px solid rgba(14, 165, 233, 0.35);
}

.g4r-regime-badge.is-iva {
  background: rgba(16, 185, 129, 0.16);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.g4r-regime-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
}

.g4r-regime-text strong {
  color: var(--text-hero);
  font-weight: 700;
}

.g4r-regime-arrow {
  color: var(--text-tertiary);
  font-weight: 600;
  font-size: 12px;
}
/* Barra de filtros por provincia */
.g4r-province-filter-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  animation: g4rPanelEnter 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.g4r-province-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.g4r-province-filter-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

.g4r-province-select {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--radius-full);
  outline: none;
  cursor: pointer;
  max-width: 220px;
  transition: all 140ms ease;
}

.g4r-province-select:hover {
  border-color: var(--border-muted);
  background: var(--bg-hover);
}

.g4r-province-select:focus {
  border-color: var(--accent-emerald);
  box-shadow: 0 0 0 1px var(--accent-emerald);
}

.g4r-province-select-pill {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.g4r-province-select-pill .g4r-province-select {
  height: 28px;
  line-height: 1;
  padding: 4px 10px;
}

.g4r-province-chips-row {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 2px 2px 2px;
  -webkit-overflow-scrolling: touch;
}

.g4r-province-chips-row::-webkit-scrollbar {
  display: none;
}

.g4r-province-chip {
  padding: 5px 11px;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 140ms cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.g4r-province-chip:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-muted);
  transform: translateY(-1px);
}

.g4r-province-chip:active {
  transform: scale(0.95);
  transition-duration: 60ms;
}

.g4r-province-chip.is-active {
  background: rgba(16, 185, 129, 0.16);
  border-color: var(--accent-emerald);
  color: var(--accent-emerald);
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--accent-emerald), 0 2px 8px rgba(16, 185, 129, 0.2);
  transform: translateY(0);
}

.g4r-province-chip.g4r-province-switch-chip {
  border-color: rgba(59, 130, 246, 0.35);
  color: #60a5fa;
  background: rgba(59, 130, 246, 0.08);
}

.g4r-province-chip.g4r-province-switch-chip:hover {
  background: rgba(59, 130, 246, 0.18);
  border-color: #60a5fa;
  color: #ffffff;
}

/* Barómetro de precios por marca */
.g4r-brand-barometer {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: g4rPanelEnter 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.g4r-brand-barometer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.g4r-brand-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.g4r-brand-barometer-head.is-toggleable {
  cursor: pointer;
  user-select: none;
}

.g4r-brand-toggle-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
}

.g4r-brand-toggle-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.g4r-brand-barometer-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-hero);
}

.g4r-brand-barometer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

@media (max-width: 480px) {
  .g4r-brand-barometer-grid {
    grid-template-columns: 1fr;
  }
}

.g4r-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  gap: 8px;
}

.g4r-brand-info {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.g4r-brand-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.g4r-brand-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.g4r-brand-count {
  font-size: 9.5px;
  color: var(--text-tertiary);
}

.g4r-brand-pricing {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.g4r-brand-avg {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-hero);
}

.g4r-brand-diff {
  font-size: 10px;
  font-weight: 600;
}

/* Tarjetas de ranking y medallas */
.g4r-ranking-card {
  margin-bottom: 2px;
}

.g4r-rank-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.g4r-rank-svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.g4r-rank-pill.is-gold {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22) 0%, rgba(245, 158, 11, 0.08) 100%);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.55);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
}

.g4r-rank-pill.is-silver {
  background: linear-gradient(135deg, rgba(203, 213, 225, 0.22) 0%, rgba(203, 213, 225, 0.08) 100%);
  color: #f1f5f9;
  border: 1px solid rgba(203, 213, 225, 0.55);
}

.g4r-rank-pill.is-bronze {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.22) 0%, rgba(217, 119, 6, 0.08) 100%);
  color: #fdba74;
  border: 1px solid rgba(217, 119, 6, 0.55);
}

.g4r-rank-pill.is-regular {
  background: var(--bg-hover);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}

:root[data-theme="light"] .g4r-rank-pill.is-gold {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.5);
  box-shadow: 0 1px 4px rgba(245, 158, 11, 0.2);
}

:root[data-theme="light"] .g4r-rank-pill.is-silver {
  background: rgba(100, 116, 139, 0.12);
  color: #334155;
  border-color: rgba(100, 116, 139, 0.4);
}

:root[data-theme="light"] .g4r-rank-pill.is-bronze {
  background: rgba(217, 119, 6, 0.12);
  color: #c2410c;
  border-color: rgba(217, 119, 6, 0.4);
}

.g4r-beacon-pin.is-gold-podium {
  border-color: rgba(245, 158, 11, 0.85);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
}

.g4r-beacon-pin.is-gold-podium .g4r-pin-tag {
  background: #f59e0b;
  color: #000;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.5);
}

.g4r-beacon-pin.is-silver-podium {
  border-color: rgba(203, 213, 225, 0.85);
  box-shadow: 0 0 12px rgba(203, 213, 225, 0.4);
}

.g4r-beacon-pin.is-silver-podium .g4r-pin-tag {
  background: #cbd5e1;
  color: #000;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 2px 8px rgba(203, 213, 225, 0.4);
}

.g4r-beacon-pin.is-bronze-podium {
  border-color: rgba(217, 119, 6, 0.85);
  box-shadow: 0 0 12px rgba(217, 119, 6, 0.4);
}

.g4r-beacon-pin.is-bronze-podium .g4r-pin-tag {
  background: #d97706;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.4);
}

/* ==========================================================================
   Station Fuel Price History Modal & SVG Chart
   ========================================================================== */

.g4r-card-actions-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.g4r-btn-history {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--radius-xs, 6px);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  transition: all 160ms ease;
  cursor: pointer;
}

.g4r-btn-history:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-active);
  color: var(--text-hero);
  transform: translateY(-0.5px);
}

.g4r-popup-history-row {
  margin: 8px 0 4px 0;
  display: flex;
}

.g4r-popup-history-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 8px);
  padding: 6px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 160ms ease;
}

.g4r-popup-history-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-focus);
}

.g4r-popup-history-icon {
  width: 14px;
  height: 14px;
  color: var(--accent-blue, #2563eb);
}

/* Modal de histórico de precios */
.g4r-history-modal-card {
  max-width: 780px;
  width: 95%;
  min-height: 0;
  max-height: min(90vh, 720px);
  max-height: min(90dvh, calc(100dvh - env(safe-area-inset-top, 16px) - env(safe-area-inset-bottom, 16px) - 24px), 720px);
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-md, 14px);
  box-sizing: border-box;
}

.g4r-history-header-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.g4r-history-station-sub {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
}

.g4r-history-modal-body {
  padding: 13px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Selector de combustibles */
/* Selector de combustibles adaptativo sin scroll horizontal */
.g4r-history-chips-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  background: rgba(255, 255, 255, 0.03);
  padding: 2.5px;
  border-radius: var(--radius-md, 10px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  min-width: 0;
}

.g4r-history-chips-row.g4r-chips-count-1 {
  grid-template-columns: 1fr;
}

.g4r-history-chips-row.g4r-chips-count-2 {
  grid-template-columns: repeat(2, 1fr);
}

.g4r-history-chips-row.g4r-chips-count-3 {
  grid-template-columns: repeat(3, 1fr);
}

.g4r-history-chips-row.g4r-chips-count-4 {
  grid-template-columns: repeat(2, 1fr);
}

.g4r-history-chips-row.g4r-chips-count-5 {
  grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 580px) {
  .g4r-history-chips-row.g4r-chips-count-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .g4r-history-chips-row.g4r-chips-count-5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

.g4r-history-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px 4px;
  min-height: 29px;
  border-radius: var(--radius-sm, 7px);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  box-sizing: border-box;
  transition: all 140ms ease;
  width: 100%;
  min-width: 0;
  text-align: center;
}

.g4r-history-chip:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-hero);
}

.g4r-history-chip.is-active {
  background: rgba(16, 185, 129, 0.14);
  color: var(--accent-emerald) !important;
  border-color: rgba(16, 185, 129, 0.35);
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.g4r-chip-label {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  box-sizing: border-box;
}

.g4r-chip-price {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  opacity: 0.95;
}

.g4r-history-chip.is-active .g4r-chip-label {
  color: var(--accent-emerald);
  opacity: 1;
}

.g4r-history-chip.is-active .g4r-chip-price {
  color: var(--accent-emerald);
  font-weight: 800;
}

.g4r-history-header-group .g4r-card-brand-tag {
  align-self: flex-start;
  margin-bottom: 2px;
}

/* Estado de carga */
.g4r-history-loading-box,
.g4r-history-empty-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  gap: 12px;
  text-align: center;
  background: var(--bg-elevated);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-sm, 10px);
}

.g4r-history-spinner {
  width: 26px;
  height: 26px;
  border: 2.5px solid var(--border-subtle);
  border-top-color: var(--text-hero);
  border-radius: 50%;
  animation: g4r-spin 700ms linear infinite;
}

@keyframes g4r-spin {
  to { transform: rotate(360deg); }
}

.g4r-history-status-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 10px);
  flex-shrink: 0;
}

.g4r-history-status-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.g4r-history-status-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.g4r-history-status-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.g4r-history-status-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent-blue, #2563eb);
}

.g4r-history-status-msg {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Tarjeta Hero de Previsión y Recomendación Inteligente */
.g4r-history-hero-advice-card,
.g4r-history-kpi-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 11px;
  border-radius: var(--radius-md, 11px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid var(--border-muted);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.g4r-history-hero-advice-card.is-profit,
.g4r-history-kpi-card.is-profit {
  border-color: rgba(16, 185, 129, 0.35);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(255, 255, 255, 0.01) 100%);
  box-shadow: 0 2px 12px rgba(16, 185, 129, 0.12);
}

.g4r-history-hero-advice-card.is-loss,
.g4r-history-kpi-card.is-loss {
  border-color: rgba(239, 68, 68, 0.35);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(255, 255, 255, 0.01) 100%);
  box-shadow: 0 2px 12px rgba(239, 68, 68, 0.1);
}

.g4r-history-hero-advice-card.is-stable,
.g4r-history-kpi-card.is-stable {
  border-color: var(--border-subtle);
}

.g4r-hero-advice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.g4r-hero-advice-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-primary, #3b82f6);
  background: rgba(59, 130, 246, 0.12);
  padding: 2.5px 8px;
  border-radius: var(--radius-full);
}

.g4r-hero-advice-pill .g4r-advice-sparkle-icon {
  width: 12px;
  height: 12px;
  color: inherit;
}

.g4r-history-hero-advice-card.is-profit .g4r-hero-advice-pill {
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
}

.g4r-history-hero-advice-card.is-loss .g4r-hero-advice-pill {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
}

.g4r-hero-advice-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.g4r-hero-advice-main {
  margin: 0;
  font-size: 11px;
  line-height: 1.38;
  color: var(--text-hero);
  font-weight: 600;
}

.g4r-hero-advice-tip-row {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  background: rgba(255, 255, 255, 0.03);
  padding: 4px 7px;
  border-radius: var(--radius-xs, 6px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.g4r-tip-tag {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.14);
  padding: 1px 4.5px;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 1px;
}

.g4r-tip-text {
  font-size: 10px;
  line-height: 1.32;
  color: var(--text-secondary);
}

.g4r-history-kpi-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-primary);
}

.g4r-history-kpi-badge .g4r-kpi-icon {
  width: 15px;
  height: 15px;
}

.g4r-history-hero-advice-card.is-profit .g4r-history-kpi-badge,
.g4r-history-kpi-card.is-profit .g4r-history-kpi-badge {
  color: #10b981;
}

.g4r-history-hero-advice-card.is-loss .g4r-history-kpi-badge,
.g4r-history-kpi-card.is-loss .g4r-history-kpi-badge {
  color: #ef4444;
}

.g4r-kpi-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.g4r-history-kpi-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: transparent;
  padding: 4px 0 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.g4r-kpi-stat-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: center;
  padding: 0 4px;
}

.g4r-kpi-stat-item:not(:first-child) {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.g4r-kpi-stat-label {
  font-size: 8.5px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-weight: 600;
}

.g4r-kpi-stat-val {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-hero);
}

/* Compatibilidad con caja previa de recomendación */
.g4r-history-advice-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-left: 3.5px solid var(--brand-primary, #3b82f6);
  border-radius: var(--radius-sm, 8px);
  padding: 10px 14px;
}

.g4r-history-advice-box.is-profit {
  border-left-color: #10b981;
}

.g4r-history-advice-box.is-loss {
  border-left-color: #ef4444;
}

.g4r-history-advice-box.is-stable {
  border-left-color: var(--text-tertiary);
}

.g4r-history-advice-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-primary);
}

.g4r-history-advice-header .g4r-svg-icon {
  width: 14px;
  height: 14px;
  color: var(--brand-primary, #3b82f6);
}

.g4r-history-advice-box.is-profit .g4r-history-advice-header .g4r-svg-icon {
  color: #10b981;
}

.g4r-history-advice-box.is-loss .g4r-history-advice-header .g4r-svg-icon {
  color: #ef4444;
}

.g4r-history-advice-text {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-primary);
  line-height: 1.45;
}

.g4r-history-advice-tip {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Contenedor del gráfico SVG */
.g4r-history-chart-wrapper {
  width: 100%;
  background: linear-gradient(180deg, rgba(20, 24, 28, 0.75) 0%, rgba(13, 16, 19, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md, 12px);
  padding: 9px 11px 7px 11px;
  box-sizing: border-box;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.g4r-chart-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 2px;
  flex-wrap: wrap;
}

.g4r-chart-tabs {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full, 9999px);
  padding: 2px;
  gap: 2px;
}

.g4r-chart-tab-btn {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-full, 9999px);
  cursor: pointer;
  transition: all 120ms ease;
  white-space: nowrap;
}

.g4r-chart-tab-btn:hover {
  color: var(--text-hero);
}

.g4r-chart-tab-btn.is-active {
  background: var(--bg-card);
  color: var(--text-hero);
  border: 1px solid var(--border-muted);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.g4r-chart-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 600;
  margin-left: auto;
}

.g4r-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.g4r-legend-swatch {
  width: 12px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
}

.g4r-legend-swatch.is-min {
  background: #10b981;
}

.g4r-legend-swatch.is-avg {
  background: #60a5fa;
  border-top: 1.5px dashed #60a5fa;
}

.g4r-chart-tooltip-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 11px;
  font-family: var(--font-sans);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  min-height: 26px;
  color: var(--text-secondary);
  transition: all 150ms ease;
  user-select: none;
}

.g4r-chart-range-label {
  color: var(--text-secondary);
  font-weight: 500;
}

.g4r-chart-hint-label {
  color: var(--text-tertiary);
  font-size: 10px;
}

.g4r-chart-tip-date {
  color: var(--text-hero);
  font-weight: 700;
}

.g4r-chart-tip-price {
  font-weight: 800;
  font-size: 12px;
}

.g4r-history-svg-chart {
  width: 100%;
  height: auto;
  max-height: 220px;
  display: block;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

/* Contenedor en cuadrícula para histórico (gráfico + tabla) */
.g4r-history-content-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

@media (min-width: 680px) {
  .g4r-history-modal-card {
    max-width: 780px;
  }

  .g4r-history-content-grid {
    display: grid;
    grid-template-columns: 1.22fr 1fr;
    gap: 14px;
    align-items: stretch;
  }

  .g4r-summary-toggle-text {
    display: none;
  }
}

/* Barra superior de filtros de territorio y carburante en el modal */
.g4r-history-filters-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  background: var(--bg-surface);
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  z-index: 5;
}

.g4r-history-filters-bar.has-territory {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

@media (min-width: 600px) {
  .g4r-history-filters-bar.has-territory {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 8px;
    align-items: center;
  }
}

:root[data-theme="light"] .g4r-history-filters-bar {
  background: #ffffff;
}

/* Acordeón colapsable para la tabla de registro diario */
.g4r-history-timeline-details {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md, 12px);
  background: linear-gradient(180deg, rgba(20, 24, 28, 0.75) 0%, rgba(13, 16, 19, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  box-sizing: border-box;
  flex: 1 1 auto;
}

.g4r-history-timeline-summary {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  list-style: none;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 140ms ease;
  width: 100%;
  min-height: 32px;
  box-sizing: border-box;
  min-width: 0;
}

.g4r-history-timeline-summary::-webkit-details-marker {
  display: none;
}

.g4r-history-timeline-summary:hover {
  background: rgba(255, 255, 255, 0.05);
}

.g4r-summary-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.g4r-summary-left .g4r-history-section-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-hero);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.g4r-history-summary-count {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-tertiary);
  background: rgba(255, 255, 255, 0.06);
  padding: 1.5px 6px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1.3;
}

.g4r-summary-right {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--brand-primary, #3b82f6);
  font-size: 10.5px;
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
}

.g4r-summary-toggle-text {
  font-size: 10.5px;
  font-weight: 600;
  color: inherit;
  white-space: nowrap;
}

.g4r-history-timeline-summary .g4r-summary-chevron {
  width: 12px;
  height: 12px;
  color: inherit;
  flex-shrink: 0;
  stroke-width: 2.5;
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.g4r-history-timeline-details[open] .g4r-summary-chevron {
  transform: rotate(180deg);
}

.g4r-history-timeline-content {
  padding: 6px 8px 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-top: none;
}

/* Tabla cronológica de registros */
.g4r-history-timeline-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  width: 100%;
  box-sizing: border-box;
}

.g4r-history-section-title {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.g4r-history-timeline-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  flex: 1;
  max-height: 250px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.g4r-history-timeline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-radius: var(--radius-xs, 7px);
  font-size: 12px;
  background: transparent;
  border: 1px solid transparent;
  transition: all 120ms ease;
  cursor: pointer;
}

.g4r-history-timeline-row:hover,
.g4r-history-timeline-row.is-highlighted {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.g4r-date-badge {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 11.5px;
}

.g4r-history-row-price {
  font-weight: 800;
  color: var(--text-hero);
  font-size: 12.5px;
}

.g4r-history-row-delta {
  font-size: 10.5px;
  font-weight: 700;
  min-width: 68px;
  text-align: center;
  padding: 2.5px 8px;
  border-radius: var(--radius-full);
}

.g4r-history-row-delta.is-drop {
  color: #10b981;
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.28);
}

.g4r-history-row-delta.is-rise {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.28);
}

.g4r-history-row-delta.is-same {
  color: var(--text-tertiary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.g4r-val-same {
  color: var(--text-tertiary);
}

/* Pie de página y botón cerrar sutil */
.g4r-history-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.g4r-history-footnote {
  font-size: 11px;
  color: var(--text-tertiary);
}

.g4r-history-close-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 18px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 140ms ease;
  user-select: none;
}

.g4r-history-close-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--text-hero);
  transform: translateY(-1px);
}

.g4r-history-close-btn:active {
  transform: scale(0.97);
}

:root[data-theme="light"] .g4r-radar-territory-tabs {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .g4r-radar-tab-pill.is-active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

:root[data-theme="light"] .g4r-radar-regimes-ribbon .g4r-regime-chip {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  color: #475569;
}

:root[data-theme="light"] .g4r-radar-regimes-ribbon .g4r-regime-chip:hover {
  background: #f1f5f9;
  border-color: rgba(0, 0, 0, 0.16);
  color: #0f172a;
}

:root[data-theme="light"] .g4r-radar-exec-trend-btn,
:root[data-theme="light"] .g4r-radar-exec-action-btn {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(16, 185, 129, 0.06) 100%);
  border-color: rgba(37, 99, 235, 0.24);
  color: #0f172a;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.06);
}

:root[data-theme="light"] .g4r-radar-exec-trend-btn:hover,
:root[data-theme="light"] .g4r-radar-exec-action-btn:hover {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.14) 0%, rgba(16, 185, 129, 0.10) 100%);
  border-color: rgba(37, 99, 235, 0.42);
  box-shadow: 0 3px 12px rgba(37, 99, 235, 0.14);
}

:root[data-theme="light"] .g4r-history-chart-wrapper {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

:root[data-theme="light"] .g4r-history-chips-row {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .g4r-chart-tooltip-bar {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .g4r-history-timeline-list {
  background: transparent;
  border: none;
}

:root[data-theme="light"] .g4r-history-timeline-row:hover,
:root[data-theme="light"] .g4r-history-timeline-row.is-highlighted {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}

:root[data-theme="light"] .g4r-history-hero-advice-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

:root[data-theme="light"] .g4r-history-hero-advice-card.is-profit {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, #ffffff 100%);
  border-color: rgba(16, 185, 129, 0.35);
}

:root[data-theme="light"] .g4r-history-hero-advice-card.is-loss {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, #ffffff 100%);
  border-color: rgba(239, 68, 68, 0.35);
}

:root[data-theme="light"] .g4r-hero-advice-tip-row {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.06);
}

:root[data-theme="light"] .g4r-history-timeline-details {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

:root[data-theme="light"] .g4r-history-timeline-summary {
  background: rgba(0, 0, 0, 0.02);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

:root[data-theme="light"] .g4r-history-timeline-summary:hover {
  background: rgba(0, 0, 0, 0.04);
}

:root[data-theme="light"] .g4r-history-timeline-content {
  border-top-color: transparent;
}

:root[data-theme="light"] .g4r-history-summary-count {
  background: rgba(0, 0, 0, 0.05);
}

:root[data-theme="light"] .g4r-history-close-btn {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.12);
  color: #334155;
}

:root[data-theme="light"] .g4r-history-close-btn:hover {
  background: rgba(0, 0, 0, 0.09);
  color: #0f172a;
}

@media (max-width: 480px) {
  .g4r-history-modal-body {
    padding: 10px 12px;
    gap: 8px;
  }

  .g4r-history-filters-bar {
    gap: 5px;
    padding: 0;
  }

  .g4r-history-chip {
    padding: 5px 4px;
    font-size: 10.5px;
  }

  .g4r-history-timeline-summary {
    padding: 7px 8px;
    gap: 6px;
  }

  .g4r-summary-left .g4r-history-section-title {
    font-size: 11px;
  }

  .g4r-summary-toggle-text {
    display: none;
  }

  .g4r-history-hero-advice-card {
    padding: 8px 10px;
    gap: 6px;
  }

  .g4r-hero-advice-main {
    font-size: 11px;
    line-height: 1.38;
  }

  .g4r-hero-advice-tip-row {
    padding: 4px 7px;
  }

  .g4r-tip-text {
    font-size: 10px;
    line-height: 1.35;
  }

  .g4r-history-chart-wrapper {
    padding: 8px 6px 10px;
    gap: 7px;
  }

  .g4r-chart-tabs {
    gap: 3px;
  }

  .g4r-chart-tab-btn {
    font-size: 10px;
    padding: 3px 6px;
  }

  .g4r-chart-legend {
    gap: 8px;
  }

  .g4r-chart-legend-item {
    font-size: 9.5px;
  }

  .g4r-chart-range-label {
    font-size: 10px;
  }

  .g4r-chart-hint-label {
    font-size: 9px;
  }
}

/* ==========================================================================
   PWA Floating Installation Toast (Sleek, Non-Intrusive Alternative)
   ========================================================================== */

.g4r-pwa-floating-toast {
  position: fixed;
  bottom: max(16px, env(safe-area-inset-bottom, 16px));
  left: 50%;
  transform: translateX(-50%) translateY(0);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-active);
  border-radius: var(--radius-full);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: g4rToastSlideUp 260ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  max-width: min(calc(100vw - 24px), 430px);
  width: auto;
  box-sizing: border-box;
}

.g4r-pwa-floating-toast.is-dismissing {
  animation: g4rToastSlideDown 200ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none;
}

@keyframes g4rToastSlideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(24px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes g4rToastSlideDown {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(20px) scale(0.96);
  }
}

.g4r-pwa-toast-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #09090b;
}

.g4r-pwa-toast-app-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.g4r-pwa-toast-content {
  display: flex;
  flex-direction: column;
  gap: 1.5px;
  min-width: 0;
  flex: 1;
}

.g4r-pwa-toast-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-hero);
  white-space: nowrap;
  letter-spacing: -0.15px;
}

.g4r-pwa-toast-sub {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.g4r-pwa-toast-btn {
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff !important;
  background: var(--brand-primary);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition: all 140ms ease;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.28);
}

.g4r-pwa-toast-btn:hover {
  background: var(--brand-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.38);
}

.g4r-pwa-toast-btn:active {
  transform: scale(0.96);
}

.g4r-pwa-toast-close {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
  transition: all 120ms ease;
  padding: 0;
}

.g4r-pwa-toast-close:hover {
  color: var(--text-hero);
  background: rgba(255, 255, 255, 0.08);
}

.g4r-pwa-toast-close svg {
  width: 14px;
  height: 14px;
}

/* En pantallas de escritorio / PC (> 860px): modal de instalación centrado en la parte inferior */
@media (min-width: 861px) {
  .g4r-pwa-floating-toast {
    bottom: 28px;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(0);
    animation: g4rToastSlideUp 260ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .g4r-pwa-floating-toast.is-dismissing {
    animation: g4rToastSlideDown 200ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
}

@media (max-width: 600px) {
  .g4r-pwa-floating-toast {
    bottom: max(16px, env(safe-area-inset-bottom, 16px));
    width: calc(100% - 24px);
    max-width: 390px;
    padding: 8px 10px;
    gap: 9px;
  }

  .g4r-pwa-toast-icon-wrap {
    width: 34px;
    height: 34px;
  }

  .g4r-pwa-toast-title {
    font-size: 12.5px;
  }

  .g4r-pwa-toast-sub {
    font-size: 10.5px;
  }

  .g4r-pwa-toast-btn {
    padding: 6px 13px;
    font-size: 11.5px;
  }
}

/* ==========================================================================
   PWA Installation Visual Guidance Modal (iOS / Safari & Multi-Platform)
   ========================================================================== */

.g4r-pwa-install-modal-card .g4r-wizard-title-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.g4r-pwa-install-modal-card .g4r-wizard-badge {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2.5px 8.5px;
  border-radius: var(--radius-xs, 6px);
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.28);
  color: #10b981;
}

:root[data-theme="light"] .g4r-pwa-install-modal-card .g4r-wizard-badge {
  background: rgba(5, 150, 105, 0.10);
  border-color: rgba(5, 150, 105, 0.25);
  color: #059669;
}

.g4r-ios-guide-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.g4r-ios-browser-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-sm, 8px);
  padding: 10px 12px;
  color: #fde68a;
  font-size: 12px;
  line-height: 1.45;
}

.g4r-ios-warning-icon {
  flex-shrink: 0;
  color: #fbbf24;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  width: 18px;
  height: 18px;
}

.g4r-ios-warning-icon svg {
  width: 18px;
  height: 18px;
}

.g4r-ios-warning-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.g4r-ios-copy-link-btn {
  margin-top: 6px;
  align-self: flex-start;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 6px;
  color: #fef3c7;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 120ms ease;
}

.g4r-ios-copy-link-btn:hover {
  background: rgba(245, 158, 11, 0.3);
  border-color: #fbbf24;
}

.g4r-ios-step-card {
  background: var(--bg-elevated, rgba(22, 27, 34, 0.7));
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-md, 12px);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: border-color 140ms ease;
}

.g4r-ios-step-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.g4r-ios-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #10b981;
  font-weight: 700;
  font-size: 11.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.g4r-ios-step-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.g4r-ios-step-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-hero);
  line-height: 1.35;
}

.g4r-ios-step-sub {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.g4r-ios-visual-step-card {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm, 8px);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mockup barra de direcciones en PC / Mac */
.g4r-desktop-address-mockup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}

.g4r-desktop-url-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.g4r-desktop-lock-svg {
  width: 12px;
  height: 12px;
  color: #10b981;
  flex-shrink: 0;
}

.g4r-desktop-install-target {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.38);
  color: #10b981;
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 11px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Selector interactivo de plataforma PWA */
.g4r-pwa-device-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 2px 6px 2px;
  margin: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.g4r-pwa-device-tabs::-webkit-scrollbar {
  display: none;
}

.g4r-pwa-device-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  transition: all 0.15s ease;
  user-select: none;
}

.g4r-pwa-device-chip:hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--text-primary);
}

.g4r-pwa-device-chip.is-active {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.45);
  color: #10b981;
}

/* Mockups específicos de Mac Safari */
.g4r-mac-menubar-mockup {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
}

.g4r-mac-apple-svg {
  width: 12px;
  height: 12px;
  color: var(--text-primary);
  flex-shrink: 0;
}

.g4r-mac-app-name {
  font-weight: 700;
  color: var(--text-primary);
}

.g4r-mac-menu-item-active {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #10b981;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
}

.g4r-mac-menu-item-muted {
  color: var(--text-tertiary);
  font-weight: 500;
}

.g4r-mac-dock-shelf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 2px 4px;
}

.g4r-mac-dock-container {
  display: inline-flex;
  align-items: flex-end;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 4px 10px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.g4r-mac-dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.g4r-mac-dock-app-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.g4r-mac-dock-app-icon.is-featured {
  transform: translateY(-2px);
  width: 26px;
  height: 26px;
  box-shadow: 0 3px 8px rgba(16, 185, 129, 0.35);
}

.g4r-mac-dock-indicator-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 4px #10b981;
}

.g4r-mac-dock-label {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
}

/* Mockups específicos de Firefox */
.g4r-firefox-tab-shelf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}

.g4r-firefox-pinned-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
}

.g4r-firefox-tab-mini-icon {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

.g4r-firefox-action-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #10b981;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

.g4r-firefox-bookmark-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.g4r-firefox-bookmark-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
}

.g4r-firefox-star-svg {
  width: 13px;
  height: 13px;
  color: #fbbf24;
  flex-shrink: 0;
}

.g4r-firefox-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-weight: 700;
  color: var(--text-primary);
}

.g4r-firefox-tip-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}

.g4r-firefox-tip-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

.g4r-firefox-tip-browsers {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #10b981;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
}

.g4r-ios-share-badge-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.g4r-ios-share-btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #38bdf8;
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.g4r-ios-svg-share {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.g4r-ios-share-btn-hint {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
}

.g4r-ios-sheet-action-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 6px 10px;
}

.g4r-ios-action-icon-box {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.g4r-ios-action-icon-box svg {
  width: 16px;
  height: 16px;
  stroke: #f8fafc;
}

.g4r-ios-action-row-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-hero);
  flex: 1;
}

.g4r-ios-action-row-tag {
  font-size: 10px;
  font-weight: 700;
  color: #10b981;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 2px 7px;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.g4r-ios-confirm-header-mockup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 6px 10px;
}

.g4r-ios-confirm-app-preview {
  display: flex;
  align-items: center;
  gap: 8px;
}

.g4r-ios-preview-app-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  object-fit: contain;
  background: #0b0e14;
  flex-shrink: 0;
}

.g4r-ios-preview-text-group {
  display: flex;
  flex-direction: column;
}

.g4r-ios-preview-app-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-hero);
  line-height: 1.2;
}

.g4r-ios-preview-app-url {
  font-size: 10px;
  color: var(--text-tertiary);
}

.g4r-ios-confirm-pill-btn {
  background: var(--brand-primary, #059669);
  color: #ffffff;
  font-weight: 700;
  font-size: 11.5px;
  padding: 4px 12px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.35);
  letter-spacing: 0.2px;
}

/* Adaptación completa para Modo Claro (Light Theme) */
:root[data-theme="light"] .g4r-ios-step-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

:root[data-theme="light"] .g4r-ios-step-num {
  background: rgba(5, 150, 105, 0.10);
  border-color: rgba(5, 150, 105, 0.25);
  color: #059669;
}

:root[data-theme="light"] .g4r-ios-step-title {
  color: #0f172a;
}

:root[data-theme="light"] .g4r-ios-step-sub {
  color: #475569;
}

:root[data-theme="light"] .g4r-ios-visual-step-card {
  background: #f8fafc;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

:root[data-theme="light"] .g4r-desktop-url-pill {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
  color: #334155;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

:root[data-theme="light"] .g4r-desktop-lock-svg {
  color: #059669;
}

:root[data-theme="light"] .g4r-desktop-install-target {
  background: #ffffff;
  border-color: rgba(5, 150, 105, 0.35);
  color: #059669;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

:root[data-theme="light"] .g4r-ios-share-btn-pill {
  background: #ffffff;
  border-color: rgba(56, 189, 248, 0.35);
  color: #0284c7;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

:root[data-theme="light"] .g4r-ios-share-btn-hint {
  color: #64748b;
}

:root[data-theme="light"] .g4r-ios-sheet-action-row {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

:root[data-theme="light"] .g4r-ios-action-icon-box {
  background: rgba(5, 150, 105, 0.10);
}

:root[data-theme="light"] .g4r-ios-action-icon-box svg {
  stroke: #059669;
}

:root[data-theme="light"] .g4r-ios-action-row-text {
  color: #0f172a;
}

:root[data-theme="light"] .g4r-ios-action-row-tag {
  background: rgba(5, 150, 105, 0.10);
  border-color: rgba(5, 150, 105, 0.25);
  color: #059669;
}

:root[data-theme="light"] .g4r-ios-confirm-header-mockup {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

:root[data-theme="light"] .g4r-ios-preview-app-icon {
  background: #f1f5f9;
  border-color: rgba(0, 0, 0, 0.1);
}

:root[data-theme="light"] .g4r-ios-preview-app-name {
  color: #0f172a;
}

:root[data-theme="light"] .g4r-ios-preview-app-url {
  color: #64748b;
}

:root[data-theme="light"] .g4r-ios-confirm-pill-btn {
  background: #059669;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.25);
}

:root[data-theme="light"] .g4r-wizard-badge {
  background: rgba(5, 150, 105, 0.10);
  border-color: rgba(5, 150, 105, 0.25);
  color: #059669;
}

:root[data-theme="light"] .g4r-pwa-device-chip {
  background: #f1f5f9;
  border-color: rgba(0, 0, 0, 0.08);
  color: #475569;
}

:root[data-theme="light"] .g4r-pwa-device-chip:hover {
  background: #e2e8f0;
  color: #0f172a;
}

:root[data-theme="light"] .g4r-pwa-device-chip.is-active {
  background: rgba(5, 150, 105, 0.10);
  border-color: rgba(5, 150, 105, 0.35);
  color: #059669;
}

:root[data-theme="light"] .g4r-mac-menubar-mockup {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
}

:root[data-theme="light"] .g4r-mac-apple-svg {
  color: #0f172a;
}

:root[data-theme="light"] .g4r-mac-app-name {
  color: #0f172a;
}

:root[data-theme="light"] .g4r-mac-menu-item-active {
  background: rgba(5, 150, 105, 0.12);
  border-color: rgba(5, 150, 105, 0.35);
  color: #059669;
}

:root[data-theme="light"] .g4r-mac-menu-item-muted {
  color: #94a3b8;
}

:root[data-theme="light"] .g4r-mac-dock-container {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .g4r-mac-dock-app-icon {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

:root[data-theme="light"] .g4r-mac-dock-app-icon.is-featured {
  box-shadow: 0 3px 8px rgba(5, 150, 105, 0.25);
}

:root[data-theme="light"] .g4r-mac-dock-indicator-dot {
  background: #059669;
  box-shadow: 0 0 3px #059669;
}

:root[data-theme="light"] .g4r-mac-dock-label {
  color: #64748b;
}

:root[data-theme="light"] .g4r-firefox-pinned-tab {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
  color: #0f172a;
}

:root[data-theme="light"] .g4r-firefox-action-pill {
  background: rgba(5, 150, 105, 0.10);
  border-color: rgba(5, 150, 105, 0.30);
  color: #059669;
}

:root[data-theme="light"] .g4r-firefox-bookmark-pill {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.1);
  color: #0f172a;
}

:root[data-theme="light"] .g4r-firefox-star-svg {
  color: #d97706;
}

:root[data-theme="light"] .g4r-firefox-kbd {
  background: #f1f5f9;
  border-color: rgba(0, 0, 0, 0.18);
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

:root[data-theme="light"] .g4r-firefox-tip-label {
  color: #475569;
}

:root[data-theme="light"] .g4r-firefox-tip-browsers {
  background: rgba(5, 150, 105, 0.10);
  border-color: rgba(5, 150, 105, 0.25);
  color: #059669;
}

/* ==========================================================================
   Accessibility: Reduced Motion Preference
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Halloween Seasonal Edition · versión sobria con elementos temáticos
   Un solo acento (naranja quemado). Ilustraciones planas y estáticas:
   sin degradados, brillos ni animaciones.
   ========================================================================== */

/* --- 1. Variables --- */
:root[data-season="halloween"]:not([data-theme="light"]) {
  --brand-primary: #d9622b;
  --brand-primary-hover: #b84f1f;
  --brand-primary-light: #e8793f;
  --brand-primary-text: #ffffff;
  --brand-primary-bg: rgba(217, 98, 43, 0.14);
  --brand-primary-border: rgba(217, 98, 43, 0.40);

  --bg-app: #0b0a09;
  --bg-surface: #14110f;
  --bg-elevated: #1c1815;
  --bg-card: #161210;
  --bg-card-hover: #211b17;
  --bg-input: #120f0d;
  --bg-canvas: #0b0a09;

  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-muted: rgba(217, 98, 43, 0.25);
  --border-active: rgba(217, 98, 43, 0.50);

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.40);
  --shadow-dock: 0 4px 16px rgba(0, 0, 0, 0.55);
}

:root[data-season="halloween"][data-theme="light"] {
  --brand-primary: #c2521f;
  --brand-primary-hover: #a8441a;
  --brand-primary-light: #d9622b;
  --brand-primary-text: #ffffff;
  --brand-primary-bg: rgba(194, 82, 31, 0.08);
  --brand-primary-border: rgba(194, 82, 31, 0.30);

  --bg-app: #f5f1ea;
  --bg-surface: #ffffff;
  --bg-elevated: #fbf8f3;
  --bg-card: #ffffff;
  --bg-card-hover: #faf6f0;
  --bg-input: #ffffff;
  --bg-canvas: #f5f1ea;

  --border-subtle: #e7dfd4;
  --border-muted: #e9cfb8;
  --border-active: #d9622b;

  --shadow-dock: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
}

:root[data-season="halloween"] ::selection {
  background: var(--brand-primary);
  color: #ffffff;
}

/* --- 2. Cabecera: telaraña en la esquina y murciélagos --- */
:root[data-season="halloween"] .g4r-sidebar-header {
  flex-shrink: 0;
}

:root[data-season="halloween"]:not([data-theme="light"]) .g4r-sidebar-header {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='rgba(217,98,43,0.20)' stroke-width='1.1'%3E%3Cpath d='M0 0L150 30M0 0L130 85M0 0L85 130M0 0L30 150M0 0L150 150'/%3E%3Cpath d='M35 7Q32 22 22 22Q20 32 7 35'/%3E%3Cpath d='M70 14Q62 42 45 45Q42 62 14 70'/%3E%3Cpath d='M105 21Q92 65 68 68Q65 92 21 105'/%3E%3Cpath d='M140 28Q120 88 92 92Q88 120 28 140'/%3E%3C/g%3E%3Cg stroke='%23d9622b' stroke-opacity='0.85' stroke-width='1.3' stroke-linecap='round' fill='none'%3E%3Cpath d='M50 56L43 52'/%3E%3Cpath d='M50 56L42 58'/%3E%3Cpath d='M50 56L44 64'/%3E%3Cpath d='M50 56L47 67'/%3E%3Cpath d='M50 56L57 52'/%3E%3Cpath d='M50 56L58 58'/%3E%3Cpath d='M50 56L56 64'/%3E%3Cpath d='M50 56L53 67'/%3E%3C/g%3E%3Cg fill='%23d9622b' fill-opacity='0.85'%3E%3Cellipse cx='50' cy='58' rx='3.6' ry='4.4'/%3E%3Ccircle cx='50' cy='52.6' r='2.4'/%3E%3C/g%3E%3C/svg%3E") no-repeat top left / 120px 120px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='56' viewBox='0 0 130 56'%3E%3Cg fill='%23d9622b' fill-opacity='0.50'%3E%3Cpath transform='translate(6 6) scale(1.7)' d='M12 3C11 3 10.5 4 10 4.5C9 3.5 7 2.5 2 3C4 4 4.6 5.6 4 7.2C5.6 6.6 7.4 6.9 8.4 8.2C9.4 7.3 10.5 7.5 11 8.6L12 10.6L13 8.6C13.5 7.5 14.6 7.3 15.6 8.2C16.6 6.9 18.4 6.6 20 7.2C19.4 5.6 20 4 22 3C17 2.5 15 3.5 14 4.5C13.5 4 13 3 12 3Z'/%3E%3Cpath transform='translate(58 28) scale(1.1)' d='M12 3C11 3 10.5 4 10 4.5C9 3.5 7 2.5 2 3C4 4 4.6 5.6 4 7.2C5.6 6.6 7.4 6.9 8.4 8.2C9.4 7.3 10.5 7.5 11 8.6L12 10.6L13 8.6C13.5 7.5 14.6 7.3 15.6 8.2C16.6 6.9 18.4 6.6 20 7.2C19.4 5.6 20 4 22 3C17 2.5 15 3.5 14 4.5C13.5 4 13 3 12 3Z'/%3E%3Cpath transform='translate(94 4) scale(0.9)' d='M12 3C11 3 10.5 4 10 4.5C9 3.5 7 2.5 2 3C4 4 4.6 5.6 4 7.2C5.6 6.6 7.4 6.9 8.4 8.2C9.4 7.3 10.5 7.5 11 8.6L12 10.6L13 8.6C13.5 7.5 14.6 7.3 15.6 8.2C16.6 6.9 18.4 6.6 20 7.2C19.4 5.6 20 4 22 3C17 2.5 15 3.5 14 4.5C13.5 4 13 3 12 3Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat top 6px right 14px / 118px 51px,
    var(--bg-surface);
  border-bottom: 1px solid var(--border-muted);
  box-shadow: none;
}

:root[data-season="halloween"][data-theme="light"] .g4r-sidebar-header {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='rgba(110,80,50,0.22)' stroke-width='1.1'%3E%3Cpath d='M0 0L150 30M0 0L130 85M0 0L85 130M0 0L30 150M0 0L150 150'/%3E%3Cpath d='M35 7Q32 22 22 22Q20 32 7 35'/%3E%3Cpath d='M70 14Q62 42 45 45Q42 62 14 70'/%3E%3Cpath d='M105 21Q92 65 68 68Q65 92 21 105'/%3E%3Cpath d='M140 28Q120 88 92 92Q88 120 28 140'/%3E%3C/g%3E%3Cg stroke='%233a2a20' stroke-opacity='0.75' stroke-width='1.3' stroke-linecap='round' fill='none'%3E%3Cpath d='M50 56L43 52'/%3E%3Cpath d='M50 56L42 58'/%3E%3Cpath d='M50 56L44 64'/%3E%3Cpath d='M50 56L47 67'/%3E%3Cpath d='M50 56L57 52'/%3E%3Cpath d='M50 56L58 58'/%3E%3Cpath d='M50 56L56 64'/%3E%3Cpath d='M50 56L53 67'/%3E%3C/g%3E%3Cg fill='%233a2a20' fill-opacity='0.75'%3E%3Cellipse cx='50' cy='58' rx='3.6' ry='4.4'/%3E%3Ccircle cx='50' cy='52.6' r='2.4'/%3E%3C/g%3E%3C/svg%3E") no-repeat top left / 120px 120px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='56' viewBox='0 0 130 56'%3E%3Cg fill='%233a2a20' fill-opacity='0.30'%3E%3Cpath transform='translate(6 6) scale(1.7)' d='M12 3C11 3 10.5 4 10 4.5C9 3.5 7 2.5 2 3C4 4 4.6 5.6 4 7.2C5.6 6.6 7.4 6.9 8.4 8.2C9.4 7.3 10.5 7.5 11 8.6L12 10.6L13 8.6C13.5 7.5 14.6 7.3 15.6 8.2C16.6 6.9 18.4 6.6 20 7.2C19.4 5.6 20 4 22 3C17 2.5 15 3.5 14 4.5C13.5 4 13 3 12 3Z'/%3E%3Cpath transform='translate(58 28) scale(1.1)' d='M12 3C11 3 10.5 4 10 4.5C9 3.5 7 2.5 2 3C4 4 4.6 5.6 4 7.2C5.6 6.6 7.4 6.9 8.4 8.2C9.4 7.3 10.5 7.5 11 8.6L12 10.6L13 8.6C13.5 7.5 14.6 7.3 15.6 8.2C16.6 6.9 18.4 6.6 20 7.2C19.4 5.6 20 4 22 3C17 2.5 15 3.5 14 4.5C13.5 4 13 3 12 3Z'/%3E%3Cpath transform='translate(94 4) scale(0.9)' d='M12 3C11 3 10.5 4 10 4.5C9 3.5 7 2.5 2 3C4 4 4.6 5.6 4 7.2C5.6 6.6 7.4 6.9 8.4 8.2C9.4 7.3 10.5 7.5 11 8.6L12 10.6L13 8.6C13.5 7.5 14.6 7.3 15.6 8.2C16.6 6.9 18.4 6.6 20 7.2C19.4 5.6 20 4 22 3C17 2.5 15 3.5 14 4.5C13.5 4 13 3 12 3Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat top 6px right 14px / 118px 51px,
    #ffffff;
  border-bottom: 1px solid #e9cfb8;
  box-shadow: none;
}

/* --- 3. Logotipo: calabaza estática junto al título --- */
:root[data-season="halloween"] .g4r-brand-num {
  color: var(--brand-primary);
}

:root[data-season="halloween"] .g4r-brand-logo-img {
  border: 1.5px solid var(--brand-primary);
}

:root[data-season="halloween"] .g4r-brand-title::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  vertical-align: -4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='14.5' rx='9.5' ry='7.5' fill='%23d9622b'/%3E%3Cpath d='M12 7C8 8.5 8 20.5 12 22C16 20.5 16 8.5 12 7Z' fill='%23bf4f1c'/%3E%3Cpath d='M11 7.5C11 5 12 3.6 13.8 3L14.4 4.6C13.4 5.1 13.1 6 13.3 7.5Z' fill='%234f6b2e'/%3E%3Cpath d='M7 13.2L10 13.2L8.5 10.6ZM14 13.2L17 13.2L15.5 10.6Z' fill='%23140e0a'/%3E%3Cpath d='M7.6 16.2L9.4 17.4L11 16.2L12.6 17.4L14.2 16.2L16.4 16.2C16 18.4 14.2 19.6 12 19.6C9.8 19.6 8 18.4 7.6 16.2Z' fill='%23140e0a'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- 4. Selector de modo --- */
:root[data-season="halloween"]:not([data-theme="light"]) .g4r-mode-selector {
  background: var(--bg-elevated);
  border-color: var(--border-subtle);
}

:root[data-season="halloween"]:not([data-theme="light"]) .g4r-mode-glider {
  background: var(--brand-primary-bg);
  border: 1px solid var(--brand-primary-border);
  box-shadow: none;
}

:root[data-season="halloween"][data-theme="light"] .g4r-mode-selector {
  background: #fbf8f3;
  border-color: #e7dfd4;
}

:root[data-season="halloween"][data-theme="light"] .g4r-mode-glider {
  background: #ffffff;
  border: 1px solid #d9622b;
  box-shadow: none;
}

:root[data-season="halloween"][data-theme="light"] .g4r-mode-btn.is-active {
  color: #a8441a !important;
  font-weight: 700;
}

/* --- 5. Píldoras de combustible y botón de ruta --- */
:root[data-season="halloween"]:not([data-theme="light"]) .g4r-fuel-pill.is-active {
  border-color: var(--brand-primary);
  background: var(--brand-primary-bg);
  color: #e8793f;
  box-shadow: none;
}

:root[data-season="halloween"][data-theme="light"] .g4r-fuel-pill.is-active {
  border-color: #c2521f;
  background: #fbf3ec;
  color: #a8441a;
  box-shadow: none;
}

:root[data-season="halloween"] #calcRouteBtn,
:root[data-season="halloween"] .g4r-btn-route-calc {
  background: var(--brand-primary) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

:root[data-season="halloween"] #calcRouteBtn:hover,
:root[data-season="halloween"] .g4r-btn-route-calc:hover {
  background: var(--brand-primary-hover) !important;
}

/* --- 6. Mejor gasolinera: borde naranja y calabaza en la esquina --- */
:root[data-season="halloween"] #stationsList > .g4r-card:first-of-type {
  position: relative;
  z-index: 1;
  content-visibility: visible;
  border: 1.5px solid var(--brand-primary);
  box-shadow: none;
}

:root[data-season="halloween"] #stationsList > .g4r-card:first-of-type::after {
  content: "";
  position: absolute;
  top: -9px;
  right: 10px;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='14.5' rx='9.5' ry='7.5' fill='%23d9622b'/%3E%3Cpath d='M12 7C8 8.5 8 20.5 12 22C16 20.5 16 8.5 12 7Z' fill='%23bf4f1c'/%3E%3Cpath d='M11 7.5C11 5 12 3.6 13.8 3L14.4 4.6C13.4 5.1 13.1 6 13.3 7.5Z' fill='%234f6b2e'/%3E%3Cpath d='M7 13.2L10 13.2L8.5 10.6ZM14 13.2L17 13.2L15.5 10.6Z' fill='%23140e0a'/%3E%3Cpath d='M7.6 16.2L9.4 17.4L11 16.2L12.6 17.4L14.2 16.2L16.4 16.2C16 18.4 14.2 19.6 12 19.6C9.8 19.6 8 18.4 7.6 16.2Z' fill='%23140e0a'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
}

/* --- 7. Pie: cementerio en silueta --- */
:root[data-season="halloween"] .g4r-sidebar-footer::before {
  content: "";
  display: block;
  height: 38px;
  margin-bottom: -4px;
  pointer-events: none;
}

:root[data-season="halloween"]:not([data-theme="light"]) .g4r-sidebar-footer::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='38' viewBox='0 0 200 38'%3E%3Cg fill='%23d9622b' fill-opacity='0.28' stroke='%23d9622b' stroke-opacity='0.28'%3E%3Crect x='0' y='35' width='200' height='3' stroke='none'/%3E%3Cpath d='M10 36V19A8 8 0 0 1 26 19V36Z' stroke='none'/%3E%3Cpath d='M44 29V17A8 8 0 0 1 60 17V29L57 26L54 29L51 26L48 29L44 26Z M49 16.5A1.4 1.4 0 1 0 49.01 16.5Z M55 16.5A1.4 1.4 0 1 0 55.01 16.5Z' fill-rule='evenodd' stroke='none'/%3E%3Cpath d='M92 36V14M85 21H99' fill='none' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M124 36V24A6 6 0 0 1 136 24V36Z' stroke='none'/%3E%3Cpath d='M174 36V25M174 29L166 21M174 27L182 19M166 21L164 15M182 19L185 13M166 21L161 20' fill='none' stroke-width='2' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom center / 200px 38px;
}

:root[data-season="halloween"][data-theme="light"] .g4r-sidebar-footer::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='38' viewBox='0 0 200 38'%3E%3Cg fill='%233a2a20' fill-opacity='0.20' stroke='%233a2a20' stroke-opacity='0.20'%3E%3Crect x='0' y='35' width='200' height='3' stroke='none'/%3E%3Cpath d='M10 36V19A8 8 0 0 1 26 19V36Z' stroke='none'/%3E%3Cpath d='M44 29V17A8 8 0 0 1 60 17V29L57 26L54 29L51 26L48 29L44 26Z M49 16.5A1.4 1.4 0 1 0 49.01 16.5Z M55 16.5A1.4 1.4 0 1 0 55.01 16.5Z' fill-rule='evenodd' stroke='none'/%3E%3Cpath d='M92 36V14M85 21H99' fill='none' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M124 36V24A6 6 0 0 1 136 24V36Z' stroke='none'/%3E%3Cpath d='M174 36V25M174 29L166 21M174 27L182 19M166 21L164 15M182 19L185 13M166 21L161 20' fill='none' stroke-width='2' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom center / 200px 38px;
}

/* --- 8. Mapa nocturno suave y marcadores --- */
:root[data-season="halloween"]:not([data-theme="light"]) .leaflet-tile {
  filter: invert(100%) hue-rotate(180deg) brightness(78%) contrast(100%) saturate(0.6);
}

:root[data-season="halloween"]:not([data-theme="light"]) .leaflet-container {
  background: #0b0a09 !important;
}

:root[data-season="halloween"] .g4r-gps-dot {
  background: var(--brand-primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

:root[data-season="halloween"] .g4r-gps-pulse-ring {
  background: rgba(217, 98, 43, 0.20);
  border-color: rgba(217, 98, 43, 0.50);
}

:root[data-season="halloween"] .g4r-beacon-pin.is-optimal {
  border-color: var(--brand-primary);
  box-shadow: none;
}

:root[data-season="halloween"] .g4r-beacon-pin.is-optimal .g4r-pin-tag {
  background: var(--brand-primary);
  color: #ffffff;
  box-shadow: none;
}

:root[data-season="halloween"] .g4r-beacon-pin.is-optimal::after {
  border-top-color: var(--brand-primary);
}

/* --- 9. Marcador de la mejor gasolinera: calabaza dentro de la etiqueta --- */
:root[data-season="halloween"] .g4r-beacon-pin.is-optimal .g4r-pin-tag {
  white-space: nowrap;
}

:root[data-season="halloween"] .g4r-beacon-pin.is-optimal .g4r-pin-tag::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 4px;
  vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='14.5' rx='9.5' ry='7.5' fill='%23fff1e0'/%3E%3Cpath d='M12 7C8 8.5 8 20.5 12 22C16 20.5 16 8.5 12 7Z' fill='%23f2d6b8'/%3E%3Cpath d='M11 7.5C11 5 12 3.6 13.8 3L14.4 4.6C13.4 5.1 13.1 6 13.3 7.5Z' fill='%232f4a1c'/%3E%3Cpath d='M7 13.2L10 13.2L8.5 10.6ZM14 13.2L17 13.2L15.5 10.6Z' fill='%23a8441a'/%3E%3Cpath d='M7.6 16.2L9.4 17.4L11 16.2L12.6 17.4L14.2 16.2L16.4 16.2C16 18.4 14.2 19.6 12 19.6C9.8 19.6 8 18.4 7.6 16.2Z' fill='%23a8441a'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- 10. Mejor gasolinera: telaraña en la esquina opuesta a la calabaza --- */
:root[data-season="halloween"]:not([data-theme="light"]) #stationsList > .g4r-card:first-of-type {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60' fill='none' stroke='rgba(217,98,43,0.22)' stroke-width='1'%3E%3Cpath d='M0 0L60 12M0 0L52 34M0 0L34 52M0 0L12 60M0 0L60 60'/%3E%3Cpath d='M14 3Q12 9 9 9Q8 12 3 14'/%3E%3Cpath d='M28 6Q25 17 18 18Q17 25 6 28'/%3E%3Cpath d='M42 9Q37 26 27 27Q26 37 9 42'/%3E%3Cpath d='M56 12Q48 35 37 37Q35 48 12 56'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 46px 46px;
}

:root[data-season="halloween"][data-theme="light"] #stationsList > .g4r-card:first-of-type {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60' fill='none' stroke='rgba(110,80,50,0.20)' stroke-width='1'%3E%3Cpath d='M0 0L60 12M0 0L52 34M0 0L34 52M0 0L12 60M0 0L60 60'/%3E%3Cpath d='M14 3Q12 9 9 9Q8 12 3 14'/%3E%3Cpath d='M28 6Q25 17 18 18Q17 25 6 28'/%3E%3Cpath d='M42 9Q37 26 27 27Q26 37 9 42'/%3E%3Cpath d='M56 12Q48 35 37 37Q35 48 12 56'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 46px 46px;
}

/* --- 11. Luna sobre el mapa nocturno (solo modo oscuro) --- */
:root[data-season="halloween"]:not([data-theme="light"]) .g4r-map-viewport::after {
  content: "";
  position: absolute;
  top: max(16px, env(safe-area-inset-top, 16px));
  left: max(16px, env(safe-area-inset-left, 16px));
  width: 64px;
  height: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='48' viewBox='0 0 64 48'%3E%3Cpath d='M26 5A17 17 0 1 0 36 33A14 14 0 1 1 26 5Z' fill='%23f1dfb8' fill-opacity='0.92'/%3E%3Cg fill='%23f1dfb8' fill-opacity='0.6'%3E%3Ccircle cx='46' cy='10' r='1.4'/%3E%3Ccircle cx='56' cy='22' r='1.1'/%3E%3Ccircle cx='49' cy='34' r='1.2'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
  z-index: 1004;
}

/* --- 12. Ubicación del usuario: calabaza en lugar del punto --- */
:root[data-season="halloween"] .g4r-gps-dot {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='14.5' rx='9.5' ry='7.5' fill='%23d9622b'/%3E%3Cpath d='M12 7C8 8.5 8 20.5 12 22C16 20.5 16 8.5 12 7Z' fill='%23bf4f1c'/%3E%3Cpath d='M11 7.5C11 5 12 3.6 13.8 3L14.4 4.6C13.4 5.1 13.1 6 13.3 7.5Z' fill='%234f6b2e'/%3E%3Cpath d='M7 13.2L10 13.2L8.5 10.6ZM14 13.2L17 13.2L15.5 10.6Z' fill='%23140e0a'/%3E%3Cpath d='M7.6 16.2L9.4 17.4L11 16.2L12.6 17.4L14.2 16.2L16.4 16.2C16 18.4 14.2 19.6 12 19.6C9.8 19.6 8 18.4 7.6 16.2Z' fill='%23140e0a'/%3E%3C/svg%3E") no-repeat center / contain;
  box-shadow: none;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.45));
}

/* --- 13. Botones del mapa con acento naranja --- */
:root[data-season="halloween"] .g4r-map-action-pill {
  border-color: var(--brand-primary-border);
}

:root[data-season="halloween"] .g4r-map-action-pill svg {
  color: var(--brand-primary);
}

/* --- 14. Punto de salida / referencia: marrón cálido con calabaza --- */
:root[data-season="halloween"] .g4r-beacon-pin.is-base {
  border-color: #8a6a50;
  box-shadow: none;
}

:root[data-season="halloween"] .g4r-beacon-pin.is-base .g4r-pin-tag {
  background: #3a2a20;
  color: #f1dfb8;
  border: 1px solid #8a6a50;
  box-shadow: none;
  white-space: nowrap;
}

:root[data-season="halloween"] .g4r-beacon-pin.is-base .g4r-pin-tag::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 4px;
  vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='14.5' rx='9.5' ry='7.5' fill='%23d9622b'/%3E%3Cpath d='M12 7C8 8.5 8 20.5 12 22C16 20.5 16 8.5 12 7Z' fill='%23bf4f1c'/%3E%3Cpath d='M11 7.5C11 5 12 3.6 13.8 3L14.4 4.6C13.4 5.1 13.1 6 13.3 7.5Z' fill='%236f9440'/%3E%3Cpath d='M7 13.2L10 13.2L8.5 10.6ZM14 13.2L17 13.2L15.5 10.6Z' fill='%23140e0a'/%3E%3Cpath d='M7.6 16.2L9.4 17.4L11 16.2L12.6 17.4L14.2 16.2L16.4 16.2C16 18.4 14.2 19.6 12 19.6C9.8 19.6 8 18.4 7.6 16.2Z' fill='%23140e0a'/%3E%3C/svg%3E") no-repeat center / contain;
}

:root[data-season="halloween"] .g4r-beacon-pin.is-base::after {
  border-top-color: #8a6a50;
}


/* ==========================================================================
   Navidad Seasonal Edition · versión sobria
   Un solo acento (rojo arándano) con verde pino y crema en las ilustraciones.
   Dibujos planos y estáticos: sin degradados, brillos ni animaciones.
   ========================================================================== */

/* --- 1. Variables --- */
:root[data-season="christmas"]:not([data-theme="light"]) {
  --brand-primary: #d1453b;
  --brand-primary-hover: #b3372f;
  --brand-primary-light: #e0584d;
  --brand-primary-text: #ffffff;
  --brand-primary-bg: rgba(209, 69, 59, 0.14);
  --brand-primary-border: rgba(209, 69, 59, 0.42);

  --bg-app: #0a0d0b;
  --bg-surface: #101512;
  --bg-elevated: #18201b;
  --bg-card: #121915;
  --bg-card-hover: #1a231d;
  --bg-input: #0e1310;
  --bg-canvas: #0a0d0b;

  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-muted: rgba(209, 69, 59, 0.26);
  --border-active: rgba(209, 69, 59, 0.52);

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.40);
  --shadow-dock: 0 4px 16px rgba(0, 0, 0, 0.55);
}

:root[data-season="christmas"][data-theme="light"] {
  --brand-primary: #b3322a;
  --brand-primary-hover: #962a23;
  --brand-primary-light: #c9433a;
  --brand-primary-text: #ffffff;
  --brand-primary-bg: rgba(179, 50, 42, 0.07);
  --brand-primary-border: rgba(179, 50, 42, 0.28);

  --bg-app: #f4f1ec;
  --bg-surface: #ffffff;
  --bg-elevated: #faf7f2;
  --bg-card: #ffffff;
  --bg-card-hover: #f9f5ef;
  --bg-input: #ffffff;
  --bg-canvas: #f4f1ec;

  --border-subtle: #e6e0d6;
  --border-muted: #e4c9c4;
  --border-active: #b3322a;

  --shadow-dock: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
}

:root[data-season="christmas"] ::selection {
  background: var(--brand-primary);
  color: #ffffff;
}

/* --- 2. Cabecera: guirnalda de luces arriba y copos de nieve --- */
:root[data-season="christmas"] .g4r-sidebar-header {
  flex-shrink: 0;
}

:root[data-season="christmas"]:not([data-theme="light"]) .g4r-sidebar-header {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='14' viewBox='0 0 96 14'%3E%3Cpath d='M0 2Q16 9 32 2Q48 9 64 2Q80 9 96 2' fill='none' stroke='%234a5a4f' stroke-width='1.2'/%3E%3Cg opacity='0.92'%3E%3Crect x='14.9' y='5.2' width='2.2' height='2' rx='0.5' fill='%234a5a4f'/%3E%3Cellipse cx='16' cy='9.6' rx='2.3' ry='3' fill='%23d1453b'/%3E%3Crect x='46.9' y='5.2' width='2.2' height='2' rx='0.5' fill='%234a5a4f'/%3E%3Cellipse cx='48' cy='9.6' rx='2.3' ry='3' fill='%234f9a6a'/%3E%3Crect x='78.9' y='5.2' width='2.2' height='2' rx='0.5' fill='%234a5a4f'/%3E%3Cellipse cx='80' cy='9.6' rx='2.3' ry='3' fill='%23e9c15a'/%3E%3C/g%3E%3C/svg%3E") repeat-x top left / 96px 14px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='56' viewBox='0 0 130 56'%3E%3Cg fill='none' stroke='%23cfe3ee' stroke-opacity='0.45' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(22 22) scale(1.7)' d='M0 -7V7M-6.1 -3.5L6.1 3.5M-6.1 3.5L6.1 -3.5M-2 -5.5L0 -3.5L2 -5.5M-2 5.5L0 3.5L2 5.5'/%3E%3Cpath transform='translate(70 38) scale(1.1)' d='M0 -7V7M-6.1 -3.5L6.1 3.5M-6.1 3.5L6.1 -3.5M-2 -5.5L0 -3.5L2 -5.5M-2 5.5L0 3.5L2 5.5'/%3E%3Cpath transform='translate(104 14) scale(0.9)' d='M0 -7V7M-6.1 -3.5L6.1 3.5M-6.1 3.5L6.1 -3.5M-2 -5.5L0 -3.5L2 -5.5M-2 5.5L0 3.5L2 5.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat top 10px right 14px / 118px 51px,
    var(--bg-surface);
  border-bottom: 1px solid var(--border-muted);
  box-shadow: none;
}

:root[data-season="christmas"][data-theme="light"] .g4r-sidebar-header {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='14' viewBox='0 0 96 14'%3E%3Cpath d='M0 2Q16 9 32 2Q48 9 64 2Q80 9 96 2' fill='none' stroke='%238a9a8e' stroke-width='1.2'/%3E%3Cg opacity='0.95'%3E%3Crect x='14.9' y='5.2' width='2.2' height='2' rx='0.5' fill='%238a9a8e'/%3E%3Cellipse cx='16' cy='9.6' rx='2.3' ry='3' fill='%23d1453b'/%3E%3Crect x='46.9' y='5.2' width='2.2' height='2' rx='0.5' fill='%238a9a8e'/%3E%3Cellipse cx='48' cy='9.6' rx='2.3' ry='3' fill='%234f9a6a'/%3E%3Crect x='78.9' y='5.2' width='2.2' height='2' rx='0.5' fill='%238a9a8e'/%3E%3Cellipse cx='80' cy='9.6' rx='2.3' ry='3' fill='%23e9c15a'/%3E%3C/g%3E%3C/svg%3E") repeat-x top left / 96px 14px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='56' viewBox='0 0 130 56'%3E%3Cg fill='none' stroke='%237fa3b5' stroke-opacity='0.50' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(22 22) scale(1.7)' d='M0 -7V7M-6.1 -3.5L6.1 3.5M-6.1 3.5L6.1 -3.5M-2 -5.5L0 -3.5L2 -5.5M-2 5.5L0 3.5L2 5.5'/%3E%3Cpath transform='translate(70 38) scale(1.1)' d='M0 -7V7M-6.1 -3.5L6.1 3.5M-6.1 3.5L6.1 -3.5M-2 -5.5L0 -3.5L2 -5.5M-2 5.5L0 3.5L2 5.5'/%3E%3Cpath transform='translate(104 14) scale(0.9)' d='M0 -7V7M-6.1 -3.5L6.1 3.5M-6.1 3.5L6.1 -3.5M-2 -5.5L0 -3.5L2 -5.5M-2 5.5L0 3.5L2 5.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat top 10px right 14px / 118px 51px,
    #ffffff;
  border-bottom: 1px solid #e4c9c4;
  box-shadow: none;
}

/* --- 3. Logotipo: arbolito junto al título --- */
:root[data-season="christmas"] .g4r-brand-num {
  color: var(--brand-primary);
}

:root[data-season="christmas"] .g4r-brand-logo-img {
  border: 1.5px solid var(--brand-primary);
}

:root[data-season="christmas"] .g4r-brand-title::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  vertical-align: -4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='10.4' y='18.6' width='3.2' height='4' fill='%236b4a35'/%3E%3Cpath d='M12 3.6L17.4 10H14.6L19.6 16.4H4.4L9.4 10H6.6Z' fill='%232f7a52'/%3E%3Cpath d='M12 3.6L17.4 10H14.6L19.6 16.4H12Z' fill='%23276a45'/%3E%3Cpath d='M12 18.4L19.6 16.4H4.4Z' fill='%23276a45'/%3E%3Ccircle cx='12' cy='2.8' r='1.9' fill='%23e9c15a'/%3E%3Ccircle cx='9.4' cy='14' r='1.1' fill='%23d1453b'/%3E%3Ccircle cx='14.6' cy='12.2' r='1.1' fill='%23f4ecd8'/%3E%3Ccircle cx='12' cy='8.6' r='0.9' fill='%23d1453b'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- 4. Selector de modo --- */
:root[data-season="christmas"]:not([data-theme="light"]) .g4r-mode-selector {
  background: var(--bg-elevated);
  border-color: var(--border-subtle);
}

:root[data-season="christmas"]:not([data-theme="light"]) .g4r-mode-glider {
  background: var(--brand-primary-bg);
  border: 1px solid var(--brand-primary-border);
  box-shadow: none;
}

:root[data-season="christmas"][data-theme="light"] .g4r-mode-selector {
  background: #faf7f2;
  border-color: #e6e0d6;
}

:root[data-season="christmas"][data-theme="light"] .g4r-mode-glider {
  background: #ffffff;
  border: 1px solid #b3322a;
  box-shadow: none;
}

:root[data-season="christmas"][data-theme="light"] .g4r-mode-btn.is-active {
  color: #962a23 !important;
  font-weight: 700;
}

/* --- 5. Píldoras de combustible y botón de ruta --- */
:root[data-season="christmas"]:not([data-theme="light"]) .g4r-fuel-pill.is-active {
  border-color: var(--brand-primary);
  background: var(--brand-primary-bg);
  color: #e8786e;
  box-shadow: none;
}

:root[data-season="christmas"][data-theme="light"] .g4r-fuel-pill.is-active {
  border-color: #b3322a;
  background: #fbf1ef;
  color: #962a23;
  box-shadow: none;
}

:root[data-season="christmas"] #calcRouteBtn,
:root[data-season="christmas"] .g4r-btn-route-calc {
  background: var(--brand-primary) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

:root[data-season="christmas"] #calcRouteBtn:hover,
:root[data-season="christmas"] .g4r-btn-route-calc:hover {
  background: var(--brand-primary-hover) !important;
}

/* --- 6. Mejor gasolinera: borde rojo, acebo en la esquina y copos --- */
:root[data-season="christmas"] #stationsList > .g4r-card:first-of-type {
  position: relative;
  z-index: 1;
  content-visibility: visible;
  border: 1.5px solid var(--brand-primary);
  box-shadow: none;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 46px 46px;
}

:root[data-season="christmas"]:not([data-theme="light"]) #stationsList > .g4r-card:first-of-type {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23cfe3ee' stroke-opacity='0.28' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(15 15) scale(1.3)' d='M0 -7V7M-6.1 -3.5L6.1 3.5M-6.1 3.5L6.1 -3.5M-2 -5.5L0 -3.5L2 -5.5M-2 5.5L0 3.5L2 5.5'/%3E%3Cpath transform='translate(40 33) scale(0.8)' d='M0 -7V7M-6.1 -3.5L6.1 3.5M-6.1 3.5L6.1 -3.5M-2 -5.5L0 -3.5L2 -5.5M-2 5.5L0 3.5L2 5.5'/%3E%3C/g%3E%3C/svg%3E");
}

:root[data-season="christmas"][data-theme="light"] #stationsList > .g4r-card:first-of-type {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%237fa3b5' stroke-opacity='0.45' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(15 15) scale(1.3)' d='M0 -7V7M-6.1 -3.5L6.1 3.5M-6.1 3.5L6.1 -3.5M-2 -5.5L0 -3.5L2 -5.5M-2 5.5L0 3.5L2 5.5'/%3E%3Cpath transform='translate(40 33) scale(0.8)' d='M0 -7V7M-6.1 -3.5L6.1 3.5M-6.1 3.5L6.1 -3.5M-2 -5.5L0 -3.5L2 -5.5M-2 5.5L0 3.5L2 5.5'/%3E%3C/g%3E%3C/svg%3E");
}

:root[data-season="christmas"] #stationsList > .g4r-card:first-of-type::after {
  content: "";
  position: absolute;
  top: -9px;
  right: 10px;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 14C8.2 14.4 4.8 12.2 3.2 8.4L5.4 8.2L4.4 6.2C8.2 6.2 11.4 9 12 14Z' fill='%232f7a52'/%3E%3Cpath d='M12 14C15.8 14.4 19.2 12.2 20.8 8.4L18.6 8.2L19.6 6.2C15.8 6.2 12.6 9 12 14Z' fill='%23276a45'/%3E%3Ccircle cx='12' cy='14.6' r='2.6' fill='%23c93a30'/%3E%3Ccircle cx='9' cy='17.2' r='2.4' fill='%23c93a30'/%3E%3Ccircle cx='15' cy='17.2' r='2.4' fill='%23b3322a'/%3E%3Ccircle cx='11.2' cy='13.7' r='0.7' fill='%23f4ecd8' fill-opacity='0.7'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
}

/* --- 7. Pie: pinos nevados y muñeco de nieve --- */
:root[data-season="christmas"] .g4r-sidebar-footer::before {
  content: "";
  display: block;
  height: 38px;
  margin-bottom: -4px;
  pointer-events: none;
}

:root[data-season="christmas"]:not([data-theme="light"]) .g4r-sidebar-footer::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='38' viewBox='0 0 200 38'%3E%3Cg fill='%234a9a6c' opacity='0.42'%3E%3Cpath d='M24 9L32 21H27.4L34.6 31.5H13.4L20.6 21H16Z'/%3E%3Crect x='22.4' y='31' width='3.2' height='5'/%3E%3Cpath d='M96 15L102 24H98.6L104 31.8H88L93.4 24H90Z'/%3E%3Crect x='94.6' y='31.4' width='2.8' height='4.6'/%3E%3Cpath d='M178 11L185.5 22H181.2L188 32H168L174.8 22H170.5Z'/%3E%3Crect x='176.5' y='31.5' width='3' height='4.5'/%3E%3C/g%3E%3Cg fill='%23e6eef2' opacity='0.30'%3E%3Crect x='0' y='35' width='200' height='3'/%3E%3Ccircle cx='140' cy='29.2' r='6'/%3E%3Ccircle cx='140' cy='20.6' r='4.5'/%3E%3Ccircle cx='140' cy='13.6' r='3.3'/%3E%3Crect x='137' y='8' width='6' height='3.2'/%3E%3Crect x='135.4' y='10.6' width='9.2' height='1.3'/%3E%3C/g%3E%3Cg stroke='%23e6eef2' stroke-opacity='0.30' stroke-width='1.4' stroke-linecap='round' fill='none'%3E%3Cpath d='M135.8 20L130 16.5M144.2 20L150 16.5'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom center / 200px 38px;
}

:root[data-season="christmas"][data-theme="light"] .g4r-sidebar-footer::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='38' viewBox='0 0 200 38'%3E%3Cg fill='%232f6b4a' opacity='0.34'%3E%3Cpath d='M24 9L32 21H27.4L34.6 31.5H13.4L20.6 21H16Z'/%3E%3Crect x='22.4' y='31' width='3.2' height='5'/%3E%3Cpath d='M96 15L102 24H98.6L104 31.8H88L93.4 24H90Z'/%3E%3Crect x='94.6' y='31.4' width='2.8' height='4.6'/%3E%3Cpath d='M178 11L185.5 22H181.2L188 32H168L174.8 22H170.5Z'/%3E%3Crect x='176.5' y='31.5' width='3' height='4.5'/%3E%3C/g%3E%3Cg fill='%239db3be' opacity='0.55'%3E%3Crect x='0' y='35' width='200' height='3'/%3E%3Ccircle cx='140' cy='29.2' r='6'/%3E%3Ccircle cx='140' cy='20.6' r='4.5'/%3E%3Ccircle cx='140' cy='13.6' r='3.3'/%3E%3Crect x='137' y='8' width='6' height='3.2'/%3E%3Crect x='135.4' y='10.6' width='9.2' height='1.3'/%3E%3C/g%3E%3Cg stroke='%239db3be' stroke-opacity='0.55' stroke-width='1.4' stroke-linecap='round' fill='none'%3E%3Cpath d='M135.8 20L130 16.5M144.2 20L150 16.5'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom center / 200px 38px;
}

/* --- 8. Mapa nocturno suave, estrella sobre el mapa y botones --- */
:root[data-season="christmas"]:not([data-theme="light"]) .leaflet-tile {
  filter: invert(100%) hue-rotate(180deg) brightness(78%) contrast(100%) saturate(0.6);
}

:root[data-season="christmas"]:not([data-theme="light"]) .leaflet-container {
  background: #0a0d0b !important;
}

:root[data-season="christmas"]:not([data-theme="light"]) .g4r-map-viewport::after {
  content: "";
  position: absolute;
  top: max(16px, env(safe-area-inset-top, 16px));
  left: max(16px, env(safe-area-inset-left, 16px));
  width: 64px;
  height: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='48' viewBox='0 0 64 48'%3E%3Cpath d='M22 5C23.4 15.6 26.4 20.6 37 24C26.4 27.4 23.4 32.4 22 43C20.6 32.4 17.6 27.4 7 24C17.6 20.6 20.6 15.6 22 5Z' fill='%23f2d98a' fill-opacity='0.92'/%3E%3Cg fill='%23f4ecd8' fill-opacity='0.65'%3E%3Ccircle cx='46' cy='11' r='1.5'/%3E%3Ccircle cx='55' cy='24' r='1.1'/%3E%3Ccircle cx='47' cy='36' r='1.3'/%3E%3Ccircle cx='36' cy='8' r='0.9'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
  z-index: 1004;
}

:root[data-season="christmas"] .g4r-map-action-pill {
  border-color: var(--brand-primary-border);
}

:root[data-season="christmas"] .g4r-map-action-pill svg {
  color: var(--brand-primary);
}

/* --- 9. Ubicación del usuario: bola de Navidad --- */
:root[data-season="christmas"] .g4r-gps-dot {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.4V1.6' stroke='%23e9c15a' stroke-width='1.2' stroke-linecap='round' fill='none'/%3E%3Crect x='9.4' y='3.2' width='5.2' height='3.4' rx='0.9' fill='%23e9c15a'/%3E%3Ccircle cx='12' cy='14.4' r='8' fill='%23c93a30'/%3E%3Cpath d='M4.4 13.4Q12 18.2 19.6 13.4' stroke='%23e9c15a' stroke-width='1.3' fill='none' stroke-opacity='0.9'/%3E%3Cpath d='M7.6 11.6A5.6 5.6 0 0 1 11 8.4' stroke='%23f4ecd8' stroke-width='1.3' stroke-linecap='round' fill='none' stroke-opacity='0.7'/%3E%3C/svg%3E") no-repeat center / contain;
  box-shadow: none;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.45));
}

:root[data-season="christmas"] .g4r-gps-pulse-ring {
  background: rgba(209, 69, 59, 0.20);
  border-color: rgba(209, 69, 59, 0.50);
}

/* --- 10. Marcadores del mapa --- */
:root[data-season="christmas"] .g4r-beacon-pin.is-optimal {
  border-color: var(--brand-primary);
  box-shadow: none;
}

:root[data-season="christmas"] .g4r-beacon-pin.is-optimal .g4r-pin-tag {
  background: var(--brand-primary);
  color: #ffffff;
  box-shadow: none;
  white-space: nowrap;
}

:root[data-season="christmas"] .g4r-beacon-pin.is-optimal .g4r-pin-tag::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 4px;
  vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12.00,2.10 14.59,9.04 21.99,9.36 16.18,13.96 18.17,21.09 12.00,17.00 5.83,21.09 7.82,13.96 2.01,9.36 9.41,9.04' fill='%23f2d27a'/%3E%3C/svg%3E") no-repeat center / contain;
}

:root[data-season="christmas"] .g4r-beacon-pin.is-optimal::after {
  border-top-color: var(--brand-primary);
}

:root[data-season="christmas"] .g4r-beacon-pin.is-base {
  border-color: #4f7d62;
  box-shadow: none;
}

:root[data-season="christmas"] .g4r-beacon-pin.is-base .g4r-pin-tag {
  background: #1f3a2c;
  color: #e6efe9;
  border: 1px solid #4f7d62;
  box-shadow: none;
  white-space: nowrap;
}

:root[data-season="christmas"] .g4r-beacon-pin.is-base .g4r-pin-tag::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 4px;
  vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-9 -9 18 18'%3E%3Cpath d='M0 -7V7M-6.1 -3.5L6.1 3.5M-6.1 3.5L6.1 -3.5M-2 -5.5L0 -3.5L2 -5.5M-2 5.5L0 3.5L2 5.5' fill='none' stroke='%23e6eef2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

:root[data-season="christmas"] .g4r-beacon-pin.is-base::after {
  border-top-color: #4f7d62;
}


/* ==========================================================================
   Galicia · Letras Galegas (17 mayo) y Día da Patria Galega (25 julio)
   Dibujos planos y estáticos: sin degradados, brillos ni animaciones.
   ========================================================================== */

/* --- 1. Variables --- */
:root[data-season="galicia"]:not([data-theme="light"]) {
  --brand-primary: #3d8fd6;
  --brand-primary-hover: #2f78bb;
  --brand-primary-light: #5aa6e6;
  --brand-primary-text: #ffffff;
  --brand-primary-bg: rgba(61, 143, 214, 0.14);
  --brand-primary-border: rgba(61, 143, 214, 0.42);

  --bg-app: #090c10;
  --bg-surface: #0f141a;
  --bg-elevated: #171e27;
  --bg-card: #111820;
  --bg-card-hover: #19222c;
  --bg-input: #0d1218;
  --bg-canvas: #090c10;

  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-muted: rgba(61, 143, 214, 0.26);
  --border-active: rgba(61, 143, 214, 0.52);

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.40);
  --shadow-dock: 0 4px 16px rgba(0, 0, 0, 0.55);
}

:root[data-season="galicia"][data-theme="light"] {
  --brand-primary: #1c64a6;
  --brand-primary-hover: #175286;
  --brand-primary-light: #2f7fc4;
  --brand-primary-text: #ffffff;
  --brand-primary-bg: rgba(28, 100, 166, 0.07);
  --brand-primary-border: rgba(28, 100, 166, 0.28);

  --bg-app: #f2f5f8;
  --bg-surface: #ffffff;
  --bg-elevated: #f7fafc;
  --bg-card: #ffffff;
  --bg-card-hover: #f3f7fb;
  --bg-input: #ffffff;
  --bg-canvas: #f2f5f8;

  --border-subtle: #dde5ee;
  --border-muted: #c4d6e8;
  --border-active: #1c64a6;

  --shadow-dock: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
}

:root[data-season="galicia"] ::selection {
  background: var(--brand-primary);
  color: #ffffff;
}

/* --- 2. Cabecera --- */
:root[data-season="galicia"] .g4r-sidebar-header {
  flex-shrink: 0;
}

:root[data-season="galicia"]:not([data-theme="light"]) .g4r-sidebar-header {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='56' viewBox='0 0 130 56'%3E%3Cpolygon points='56,0 82,0 130,40 130,56 112,56' fill='%232f7fc4' fill-opacity='0.20'/%3E%3Cg transform='translate(88 4) scale(1.7)' opacity='0.55'%3E%3Cpath d='M21 2.6C13.4 3.4 8.6 8.2 7.2 14.2L5 20L4 21.6L6.2 20.8L10.4 19C16.4 17.4 20.6 12 21 2.6Z' fill='%23e6f0f9'/%3E%3Cpath d='M21 2.6C19 8 14.6 13.6 6.2 20.8' stroke='%23e6f0f9' stroke-opacity='0.5' stroke-width='1' fill='none'/%3E%3C/g%3E%3C/svg%3E") no-repeat top 6px right 10px / 118px 51px,
    var(--bg-surface);
  border-bottom: 1px solid var(--border-muted);
  box-shadow: none;
}

:root[data-season="galicia"][data-theme="light"] .g4r-sidebar-header {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='56' viewBox='0 0 130 56'%3E%3Cpolygon points='56,0 82,0 130,40 130,56 112,56' fill='%232f7fc4' fill-opacity='0.14'/%3E%3Cg transform='translate(88 4) scale(1.7)' opacity='0.55'%3E%3Cpath d='M21 2.6C13.4 3.4 8.6 8.2 7.2 14.2L5 20L4 21.6L6.2 20.8L10.4 19C16.4 17.4 20.6 12 21 2.6Z' fill='%231c64a6'/%3E%3Cpath d='M21 2.6C19 8 14.6 13.6 6.2 20.8' stroke='%231c64a6' stroke-opacity='0.5' stroke-width='1' fill='none'/%3E%3C/g%3E%3C/svg%3E") no-repeat top 6px right 10px / 118px 51px,
    #ffffff;
  border-bottom: 1px solid #c4d6e8;
  box-shadow: none;
}

/* --- 3. Logotipo --- */
:root[data-season="galicia"] .g4r-brand-num {
  color: var(--brand-primary);
}

:root[data-season="galicia"] .g4r-brand-logo-img {
  border: 1.5px solid var(--brand-primary);
}

:root[data-season="galicia"] .g4r-brand-title::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  vertical-align: -4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 6.6V19.8C5.8 19 9.6 19.3 12 20.8C14.4 19.3 18.2 19 22 19.8V6.6' fill='%232f7fc4'/%3E%3Cpath d='M12 6C9.5 4.6 6.2 4.4 3 5.2V18.2C6.2 17.4 9.5 17.6 12 19Z' fill='%23f4f7fa'/%3E%3Cpath d='M12 6C14.5 4.6 17.8 4.4 21 5.2V18.2C17.8 17.4 14.5 17.6 12 19Z' fill='%23dfe9f2'/%3E%3Cpath d='M5 8.4H10M5 10.8H10M5 13.2H9M14 8.4H19M14 10.8H19M14 13.2H18' stroke='%238fb4d6' stroke-width='0.9' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- 4. Selector de modo --- */
:root[data-season="galicia"]:not([data-theme="light"]) .g4r-mode-selector {
  background: var(--bg-elevated);
  border-color: var(--border-subtle);
}

:root[data-season="galicia"]:not([data-theme="light"]) .g4r-mode-glider {
  background: var(--brand-primary-bg);
  border: 1px solid var(--brand-primary-border);
  box-shadow: none;
}

:root[data-season="galicia"][data-theme="light"] .g4r-mode-selector {
  background: #f7fafc;
  border-color: #dde5ee;
}

:root[data-season="galicia"][data-theme="light"] .g4r-mode-glider {
  background: #ffffff;
  border: 1px solid #1c64a6;
  box-shadow: none;
}

:root[data-season="galicia"][data-theme="light"] .g4r-mode-btn.is-active {
  color: #175286 !important;
  font-weight: 700;
}

/* --- 5. Píldoras de combustible y botón de ruta --- */
:root[data-season="galicia"]:not([data-theme="light"]) .g4r-fuel-pill.is-active {
  border-color: var(--brand-primary);
  background: var(--brand-primary-bg);
  color: #7bb8ee;
  box-shadow: none;
}

:root[data-season="galicia"][data-theme="light"] .g4r-fuel-pill.is-active {
  border-color: #1c64a6;
  background: #eef5fb;
  color: #175286;
  box-shadow: none;
}

:root[data-season="galicia"] #calcRouteBtn,
:root[data-season="galicia"] .g4r-btn-route-calc {
  background: var(--brand-primary) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

:root[data-season="galicia"] #calcRouteBtn:hover,
:root[data-season="galicia"] .g4r-btn-route-calc:hover {
  background: var(--brand-primary-hover) !important;
}

/* --- 6. Mejor gasolinera --- */
:root[data-season="galicia"] #stationsList > .g4r-card:first-of-type {
  position: relative;
  z-index: 1;
  content-visibility: visible;
  border: 1.5px solid var(--brand-primary);
  box-shadow: none;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 40px 40px;
}

:root[data-season="galicia"]:not([data-theme="light"]) #stationsList > .g4r-card:first-of-type {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpolygon points='0,0 40,0 0,40' fill='%232f7fc4' fill-opacity='0.30'/%3E%3C/svg%3E");
}

:root[data-season="galicia"][data-theme="light"] #stationsList > .g4r-card:first-of-type {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpolygon points='0,0 40,0 0,40' fill='%232f7fc4' fill-opacity='0.20'/%3E%3C/svg%3E");
}

:root[data-season="galicia"] #stationsList > .g4r-card:first-of-type::after {
  content: "";
  position: absolute;
  top: -9px;
  right: 10px;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 2.6C13.4 3.4 8.6 8.2 7.2 14.2L5 20L4 21.6L6.2 20.8L10.4 19C16.4 17.4 20.6 12 21 2.6Z' fill='%232f7fc4'/%3E%3Cpath d='M21 2.6C19 8 14.6 13.6 6.2 20.8' stroke='%23175286' stroke-width='1.1' fill='none' stroke-linecap='round'/%3E%3Cpath d='M4 21.6L6.4 18.4' stroke='%231b2733' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
}

/* --- 7. Pie --- */
:root[data-season="galicia"] .g4r-sidebar-footer::before {
  content: "";
  display: block;
  height: 38px;
  margin-bottom: -4px;
  pointer-events: none;
}

:root[data-season="galicia"]:not([data-theme="light"]) .g4r-sidebar-footer::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='38' viewBox='0 0 200 38'%3E%3Cg fill='%236aa6dc' opacity='0.34'%3E%3Crect x='0' y='35' width='200' height='3'/%3E%3Cpolygon points='8,16 36,6 64,16'/%3E%3Crect x='11' y='16' width='50' height='11'/%3E%3Crect x='14' y='27' width='3.4' height='8'/%3E%3Crect x='27' y='27' width='3.4' height='8'/%3E%3Crect x='40' y='27' width='3.4' height='8'/%3E%3Crect x='53' y='27' width='3.4' height='8'/%3E%3Crect x='11' y='26.4' width='9.4' height='1.6'/%3E%3Crect x='24' y='26.4' width='9.4' height='1.6'/%3E%3Crect x='37' y='26.4' width='9.4' height='1.6'/%3E%3Crect x='50' y='26.4' width='9.4' height='1.6'/%3E%3Crect x='105' y='31' width='20' height='4'/%3E%3Crect x='109' y='27.4' width='12' height='3.6'/%3E%3Crect x='113.8' y='9' width='2.8' height='18.4'/%3E%3Crect x='108.6' y='13.4' width='13.2' height='2.8'/%3E%3Crect x='35' y='1' width='2' height='5'/%3E%3Crect x='33' y='2.4' width='6' height='1.8'/%3E%3C/g%3E%3Cpath d='M142 33Q148 28.4 154 33T166 33T178 33T190 33' fill='none' stroke='%236aa6dc' stroke-opacity='0.34' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x bottom left / 200px 38px;
}

:root[data-season="galicia"][data-theme="light"] .g4r-sidebar-footer::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='38' viewBox='0 0 200 38'%3E%3Cg fill='%231c64a6' opacity='0.26'%3E%3Crect x='0' y='35' width='200' height='3'/%3E%3Cpolygon points='8,16 36,6 64,16'/%3E%3Crect x='11' y='16' width='50' height='11'/%3E%3Crect x='14' y='27' width='3.4' height='8'/%3E%3Crect x='27' y='27' width='3.4' height='8'/%3E%3Crect x='40' y='27' width='3.4' height='8'/%3E%3Crect x='53' y='27' width='3.4' height='8'/%3E%3Crect x='11' y='26.4' width='9.4' height='1.6'/%3E%3Crect x='24' y='26.4' width='9.4' height='1.6'/%3E%3Crect x='37' y='26.4' width='9.4' height='1.6'/%3E%3Crect x='50' y='26.4' width='9.4' height='1.6'/%3E%3Crect x='105' y='31' width='20' height='4'/%3E%3Crect x='109' y='27.4' width='12' height='3.6'/%3E%3Crect x='113.8' y='9' width='2.8' height='18.4'/%3E%3Crect x='108.6' y='13.4' width='13.2' height='2.8'/%3E%3Crect x='35' y='1' width='2' height='5'/%3E%3Crect x='33' y='2.4' width='6' height='1.8'/%3E%3C/g%3E%3Cpath d='M142 33Q148 28.4 154 33T166 33T178 33T190 33' fill='none' stroke='%231c64a6' stroke-opacity='0.26' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x bottom left / 200px 38px;
}

/* --- 8. Mapa --- */
:root[data-season="galicia"]:not([data-theme="light"]) .leaflet-tile {
  filter: invert(100%) hue-rotate(180deg) brightness(78%) contrast(100%) saturate(0.6);
}

:root[data-season="galicia"]:not([data-theme="light"]) .leaflet-container {
  background: #090c10 !important;
}

:root[data-season="galicia"] .g4r-map-viewport::after {
  content: "";
  position: absolute;
  top: max(16px, env(safe-area-inset-top, 16px));
  left: max(16px, env(safe-area-inset-left, 16px));
  width: 64px;
  height: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='48' viewBox='0 0 64 48'%3E%3Cpath d='M12 3V45' stroke='%238a98a6' stroke-width='2' stroke-linecap='round'/%3E%3Crect x='12' y='6' width='42' height='24' fill='%23f4f7fa' stroke='%23b4c3d1' stroke-width='0.8'/%3E%3Cpolygon points='12,6 20.75,6 54,25 54,30 45.3,30 12,11' fill='%232f7fc4'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
  z-index: 1004;
}

:root[data-season="galicia"] .g4r-map-action-pill {
  border-color: var(--brand-primary-border);
}

:root[data-season="galicia"] .g4r-map-action-pill svg {
  color: var(--brand-primary);
}

/* --- 9. Ubicación del usuario --- */
:root[data-season="galicia"] .g4r-gps-dot {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.6L3.2 11.6C2.4 7.4 6 3.2 12 3.2S21.6 7.4 20.8 11.6Z' fill='%232f7fc4'/%3E%3Cpath d='M12 21.6L5.4 9.6M12 21.6L8.4 5.2M12 21.6V3.2M12 21.6L15.6 5.2M12 21.6L18.6 9.6' stroke='%23e6f0f9' stroke-width='1.1' fill='none' stroke-linecap='round'/%3E%3Crect x='10' y='21' width='4' height='2' rx='0.6' fill='%23175286'/%3E%3C/svg%3E") no-repeat center / contain;
  box-shadow: none;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.45));
}

:root[data-season="galicia"] .g4r-gps-pulse-ring {
  background: rgba(61, 143, 214, 0.20);
  border-color: rgba(61, 143, 214, 0.50);
}

/* --- 10. Marcadores del mapa --- */
:root[data-season="galicia"] .g4r-beacon-pin.is-optimal {
  border-color: var(--brand-primary);
  box-shadow: none;
}

:root[data-season="galicia"] .g4r-beacon-pin.is-optimal .g4r-pin-tag {
  background: var(--brand-primary);
  color: #ffffff;
  box-shadow: none;
  white-space: nowrap;
}

:root[data-season="galicia"] .g4r-beacon-pin.is-optimal .g4r-pin-tag::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 4px;
  vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.6L3.2 11.6C2.4 7.4 6 3.2 12 3.2S21.6 7.4 20.8 11.6Z' fill='%23f4f7fa'/%3E%3Cpath d='M12 21.6L5.4 9.6M12 21.6L8.4 5.2M12 21.6V3.2M12 21.6L15.6 5.2M12 21.6L18.6 9.6' stroke='%232f7fc4' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

:root[data-season="galicia"] .g4r-beacon-pin.is-optimal::after {
  border-top-color: var(--brand-primary);
}

:root[data-season="galicia"] .g4r-beacon-pin.is-base {
  border-color: #5b7fa3;
  box-shadow: none;
}

:root[data-season="galicia"] .g4r-beacon-pin.is-base .g4r-pin-tag {
  background: #16283a;
  color: #e3eef8;
  border: 1px solid #5b7fa3;
  box-shadow: none;
  white-space: nowrap;
}

:root[data-season="galicia"] .g4r-beacon-pin.is-base .g4r-pin-tag::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 4px;
  vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 6.6V19.8C5.8 19 9.6 19.3 12 20.8C14.4 19.3 18.2 19 22 19.8V6.6' fill='%232f7fc4'/%3E%3Cpath d='M12 6C9.5 4.6 6.2 4.4 3 5.2V18.2C6.2 17.4 9.5 17.6 12 19Z' fill='%23f4f7fa'/%3E%3Cpath d='M12 6C14.5 4.6 17.8 4.4 21 5.2V18.2C17.8 17.4 14.5 17.6 12 19Z' fill='%23dfe9f2'/%3E%3Cpath d='M5 8.4H10M5 10.8H10M5 13.2H9M14 8.4H19M14 10.8H19M14 13.2H18' stroke='%238fb4d6' stroke-width='0.9' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
}

:root[data-season="galicia"] .g4r-beacon-pin.is-base::after {
  border-top-color: #5b7fa3;
}

/* ==========================================================================
   Carnaval / Entroido (jueves lardero a martes de Carnaval)
   Dibujos planos y estáticos: sin degradados, brillos ni animaciones.
   ========================================================================== */

/* --- 1. Variables --- */
:root[data-season="carnival"]:not([data-theme="light"]) {
  --brand-primary: #c8479f;
  --brand-primary-hover: #a93a86;
  --brand-primary-light: #d965b3;
  --brand-primary-text: #ffffff;
  --brand-primary-bg: rgba(200, 71, 159, 0.15);
  --brand-primary-border: rgba(200, 71, 159, 0.42);

  --bg-app: #0e0a10;
  --bg-surface: #151018;
  --bg-elevated: #1f1824;
  --bg-card: #181220;
  --bg-card-hover: #21182a;
  --bg-input: #120d16;
  --bg-canvas: #0e0a10;

  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-muted: rgba(200, 71, 159, 0.26);
  --border-active: rgba(200, 71, 159, 0.52);

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.40);
  --shadow-dock: 0 4px 16px rgba(0, 0, 0, 0.55);
}

:root[data-season="carnival"][data-theme="light"] {
  --brand-primary: #a82f84;
  --brand-primary-hover: #8c266f;
  --brand-primary-light: #c2409a;
  --brand-primary-text: #ffffff;
  --brand-primary-bg: rgba(168, 47, 132, 0.07);
  --brand-primary-border: rgba(168, 47, 132, 0.28);

  --bg-app: #f6f1f6;
  --bg-surface: #ffffff;
  --bg-elevated: #faf6fa;
  --bg-card: #ffffff;
  --bg-card-hover: #f8f2f8;
  --bg-input: #ffffff;
  --bg-canvas: #f6f1f6;

  --border-subtle: #e8dfe8;
  --border-muted: #e3c8dc;
  --border-active: #a82f84;

  --shadow-dock: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
}

:root[data-season="carnival"] ::selection {
  background: var(--brand-primary);
  color: #ffffff;
}

/* --- 2. Cabecera --- */
:root[data-season="carnival"] .g4r-sidebar-header {
  flex-shrink: 0;
}

:root[data-season="carnival"]:not([data-theme="light"]) .g4r-sidebar-header {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='56' viewBox='0 0 130 56'%3E%3Cg fill='none' stroke-width='2' stroke-linecap='round' opacity='0.8'%3E%3Cpath d='M14 0C10 7 20 11 14 19C8 27 19 31 14 42' stroke='%232bb5a8'/%3E%3Cpath d='M36 0C32 6 42 10 36 17C31 24 40 27 36 33' stroke='%23f2c230'/%3E%3Cpath d='M58 0C54 8 64 12 58 21C52 29 63 34 58 47' stroke='%23c2409a'/%3E%3C/g%3E%3Cg opacity='0.85'%3E%3Crect x='84' y='9' width='6' height='2.6' fill='%232bb5a8' transform='rotate(28 87 10)'/%3E%3Ccircle cx='104' cy='19' r='2' fill='%23f2c230'/%3E%3Crect x='92' y='30' width='5.4' height='2.4' fill='%23c2409a' transform='rotate(-24 94 31)'/%3E%3Ccircle cx='78' cy='24' r='1.7' fill='%233f7fd8'/%3E%3Cpolygon points='116,8 121,15 111,15' fill='%23c2409a'/%3E%3Crect x='108' y='36' width='5' height='2.4' fill='%232bb5a8' transform='rotate(40 110 37)'/%3E%3Ccircle cx='122' cy='30' r='1.6' fill='%23f2c230'/%3E%3Ccircle cx='98' cy='44' r='1.8' fill='%233f7fd8'/%3E%3C/g%3E%3C/svg%3E") no-repeat top 4px right 10px / 118px 51px,
    var(--bg-surface);
  border-bottom: 1px solid var(--border-muted);
  box-shadow: none;
}

:root[data-season="carnival"][data-theme="light"] .g4r-sidebar-header {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='56' viewBox='0 0 130 56'%3E%3Cg fill='none' stroke-width='2' stroke-linecap='round' opacity='0.8'%3E%3Cpath d='M14 0C10 7 20 11 14 19C8 27 19 31 14 42' stroke='%232bb5a8'/%3E%3Cpath d='M36 0C32 6 42 10 36 17C31 24 40 27 36 33' stroke='%23f2c230'/%3E%3Cpath d='M58 0C54 8 64 12 58 21C52 29 63 34 58 47' stroke='%23c2409a'/%3E%3C/g%3E%3Cg opacity='0.85'%3E%3Crect x='84' y='9' width='6' height='2.6' fill='%232bb5a8' transform='rotate(28 87 10)'/%3E%3Ccircle cx='104' cy='19' r='2' fill='%23f2c230'/%3E%3Crect x='92' y='30' width='5.4' height='2.4' fill='%23c2409a' transform='rotate(-24 94 31)'/%3E%3Ccircle cx='78' cy='24' r='1.7' fill='%233f7fd8'/%3E%3Cpolygon points='116,8 121,15 111,15' fill='%23c2409a'/%3E%3Crect x='108' y='36' width='5' height='2.4' fill='%232bb5a8' transform='rotate(40 110 37)'/%3E%3Ccircle cx='122' cy='30' r='1.6' fill='%23f2c230'/%3E%3Ccircle cx='98' cy='44' r='1.8' fill='%233f7fd8'/%3E%3C/g%3E%3C/svg%3E") no-repeat top 4px right 10px / 118px 51px,
    #ffffff;
  border-bottom: 1px solid #e3c8dc;
  box-shadow: none;
}

/* --- 3. Logotipo --- */
:root[data-season="carnival"] .g4r-brand-num {
  color: var(--brand-primary);
}

:root[data-season="carnival"] .g4r-brand-logo-img {
  border: 1.5px solid var(--brand-primary);
}

:root[data-season="carnival"] .g4r-brand-title::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  vertical-align: -4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.2 9.6C2.2 7.6 5.8 6.8 12 6.8S21.8 7.6 21.8 9.6C21.8 14.2 18.8 17.6 15.2 17.6C13.6 17.6 12.9 16.4 12 16.4S10.4 17.6 8.8 17.6C5.2 17.6 2.2 14.2 2.2 9.6Z' fill='%23c2409a'/%3E%3Cellipse cx='7.8' cy='11.6' rx='2.5' ry='1.7' transform='rotate(12 7.8 11.6)' fill='%23140c14'/%3E%3Cellipse cx='16.2' cy='11.6' rx='2.5' ry='1.7' transform='rotate(-12 16.2 11.6)' fill='%23140c14'/%3E%3Cpath d='M3 9.2C7 8 17 8 21 9.2' stroke='%23f2c230' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='8.2' r='1.1' fill='%23f2c230'/%3E%3Cpath d='M19.4 6.4L21.6 3.2M21 7.4L23 5.4' stroke='%232bb5a8' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- 4. Selector de modo --- */
:root[data-season="carnival"]:not([data-theme="light"]) .g4r-mode-selector {
  background: var(--bg-elevated);
  border-color: var(--border-subtle);
}

:root[data-season="carnival"]:not([data-theme="light"]) .g4r-mode-glider {
  background: var(--brand-primary-bg);
  border: 1px solid var(--brand-primary-border);
  box-shadow: none;
}

:root[data-season="carnival"][data-theme="light"] .g4r-mode-selector {
  background: #faf6fa;
  border-color: #e8dfe8;
}

:root[data-season="carnival"][data-theme="light"] .g4r-mode-glider {
  background: #ffffff;
  border: 1px solid #a82f84;
  box-shadow: none;
}

:root[data-season="carnival"][data-theme="light"] .g4r-mode-btn.is-active {
  color: #8c266f !important;
  font-weight: 700;
}

/* --- 5. Píldoras de combustible y botón de ruta --- */
:root[data-season="carnival"]:not([data-theme="light"]) .g4r-fuel-pill.is-active {
  border-color: var(--brand-primary);
  background: var(--brand-primary-bg);
  color: #e68ac6;
  box-shadow: none;
}

:root[data-season="carnival"][data-theme="light"] .g4r-fuel-pill.is-active {
  border-color: #a82f84;
  background: #fbf0f8;
  color: #8c266f;
  box-shadow: none;
}

:root[data-season="carnival"] #calcRouteBtn,
:root[data-season="carnival"] .g4r-btn-route-calc {
  background: var(--brand-primary) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

:root[data-season="carnival"] #calcRouteBtn:hover,
:root[data-season="carnival"] .g4r-btn-route-calc:hover {
  background: var(--brand-primary-hover) !important;
}

/* --- 6. Mejor gasolinera --- */
:root[data-season="carnival"] #stationsList > .g4r-card:first-of-type {
  position: relative;
  z-index: 1;
  content-visibility: visible;
  border: 1.5px solid var(--brand-primary);
  box-shadow: none;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 46px 46px;
}

:root[data-season="carnival"]:not([data-theme="light"]) #stationsList > .g4r-card:first-of-type {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg opacity='0.7'%3E%3Ccircle cx='9' cy='9' r='2.2' fill='%23f2c230'/%3E%3Crect x='19' y='6' width='6' height='2.6' fill='%232bb5a8' transform='rotate(24 22 7)'/%3E%3Ccircle cx='8' cy='24' r='1.8' fill='%23c2409a'/%3E%3Crect x='24' y='20' width='5' height='2.4' fill='%233f7fd8' transform='rotate(-30 26 21)'/%3E%3Cpolygon points='36,8 40,14 32,14' fill='%23c2409a'/%3E%3Ccircle cx='14' cy='38' r='1.6' fill='%232bb5a8'/%3E%3C/g%3E%3C/svg%3E");
}

:root[data-season="carnival"][data-theme="light"] #stationsList > .g4r-card:first-of-type {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg opacity='0.7'%3E%3Ccircle cx='9' cy='9' r='2.2' fill='%23f2c230'/%3E%3Crect x='19' y='6' width='6' height='2.6' fill='%232bb5a8' transform='rotate(24 22 7)'/%3E%3Ccircle cx='8' cy='24' r='1.8' fill='%23c2409a'/%3E%3Crect x='24' y='20' width='5' height='2.4' fill='%233f7fd8' transform='rotate(-30 26 21)'/%3E%3Cpolygon points='36,8 40,14 32,14' fill='%23c2409a'/%3E%3Ccircle cx='14' cy='38' r='1.6' fill='%232bb5a8'/%3E%3C/g%3E%3C/svg%3E");
}

:root[data-season="carnival"] #stationsList > .g4r-card:first-of-type::after {
  content: "";
  position: absolute;
  top: -9px;
  right: 10px;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='rotate(16 12 13)'%3E%3Cpath d='M12 3.6L19.4 21.4H4.6Z' fill='%23f2c230'/%3E%3Cpath d='M9.4 10L14.6 10L16.4 14.2L7.6 14.2Z' fill='%23c2409a'/%3E%3Cpath d='M6.2 17.6L17.8 17.6L19 20.4H5Z' fill='%23c2409a'/%3E%3Ccircle cx='12' cy='3.4' r='2.2' fill='%232bb5a8'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
}

/* --- 7. Pie --- */
:root[data-season="carnival"] .g4r-sidebar-footer::before {
  content: "";
  display: block;
  height: 38px;
  margin-bottom: -4px;
  pointer-events: none;
}

:root[data-season="carnival"]:not([data-theme="light"]) .g4r-sidebar-footer::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='38' viewBox='0 0 200 38'%3E%3Cg opacity='0.55'%3E%3Cellipse cx='18' cy='14' rx='6' ry='7.4' fill='%23c2409a'/%3E%3Cpath d='M18 21.4L16.4 23.599999999999998H19.6Z' fill='%23c2409a'/%3E%3Cpath d='M18 23.599999999999998Q15 27.4 18 31.4T18 38' fill='none' stroke='%238a8f99' stroke-width='0.9'/%3E%3Cellipse cx='54' cy='19' rx='5.2' ry='6.4' fill='%232bb5a8'/%3E%3Cpath d='M54 25.4L52.4 27.599999999999998H55.6Z' fill='%232bb5a8'/%3E%3Cpath d='M54 27.599999999999998Q51 31.4 54 35.4T54 38' fill='none' stroke='%238a8f99' stroke-width='0.9'/%3E%3Cellipse cx='96' cy='12' rx='6' ry='7.4' fill='%23f2c230'/%3E%3Cpath d='M96 19.4L94.4 21.599999999999998H97.6Z' fill='%23f2c230'/%3E%3Cpath d='M96 21.599999999999998Q93 25.4 96 29.4T96 38' fill='none' stroke='%238a8f99' stroke-width='0.9'/%3E%3Cellipse cx='138' cy='18' rx='5.4' ry='6.6' fill='%233f7fd8'/%3E%3Cpath d='M138 24.6L136.4 26.8H139.6Z' fill='%233f7fd8'/%3E%3Cpath d='M138 26.8Q135 30.6 138 34.6T138 38' fill='none' stroke='%238a8f99' stroke-width='0.9'/%3E%3Cellipse cx='178' cy='14' rx='6' ry='7.4' fill='%23c2409a'/%3E%3Cpath d='M178 21.4L176.4 23.599999999999998H179.6Z' fill='%23c2409a'/%3E%3Cpath d='M178 23.599999999999998Q175 27.4 178 31.4T178 38' fill='none' stroke='%238a8f99' stroke-width='0.9'/%3E%3Cellipse cx='158' cy='22' rx='4.4' ry='5.4' fill='%23f2c230'/%3E%3Cpath d='M158 27.4L156.4 29.599999999999998H159.6Z' fill='%23f2c230'/%3E%3Cpath d='M158 29.599999999999998Q155 33.4 158 37.4T158 38' fill='none' stroke='%238a8f99' stroke-width='0.9'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom left / 200px 38px;
}

:root[data-season="carnival"][data-theme="light"] .g4r-sidebar-footer::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='38' viewBox='0 0 200 38'%3E%3Cg opacity='0.62'%3E%3Cellipse cx='18' cy='14' rx='6' ry='7.4' fill='%23c2409a'/%3E%3Cpath d='M18 21.4L16.4 23.599999999999998H19.6Z' fill='%23c2409a'/%3E%3Cpath d='M18 23.599999999999998Q15 27.4 18 31.4T18 38' fill='none' stroke='%238a8f99' stroke-width='0.9'/%3E%3Cellipse cx='54' cy='19' rx='5.2' ry='6.4' fill='%232bb5a8'/%3E%3Cpath d='M54 25.4L52.4 27.599999999999998H55.6Z' fill='%232bb5a8'/%3E%3Cpath d='M54 27.599999999999998Q51 31.4 54 35.4T54 38' fill='none' stroke='%238a8f99' stroke-width='0.9'/%3E%3Cellipse cx='96' cy='12' rx='6' ry='7.4' fill='%23f2c230'/%3E%3Cpath d='M96 19.4L94.4 21.599999999999998H97.6Z' fill='%23f2c230'/%3E%3Cpath d='M96 21.599999999999998Q93 25.4 96 29.4T96 38' fill='none' stroke='%238a8f99' stroke-width='0.9'/%3E%3Cellipse cx='138' cy='18' rx='5.4' ry='6.6' fill='%233f7fd8'/%3E%3Cpath d='M138 24.6L136.4 26.8H139.6Z' fill='%233f7fd8'/%3E%3Cpath d='M138 26.8Q135 30.6 138 34.6T138 38' fill='none' stroke='%238a8f99' stroke-width='0.9'/%3E%3Cellipse cx='178' cy='14' rx='6' ry='7.4' fill='%23c2409a'/%3E%3Cpath d='M178 21.4L176.4 23.599999999999998H179.6Z' fill='%23c2409a'/%3E%3Cpath d='M178 23.599999999999998Q175 27.4 178 31.4T178 38' fill='none' stroke='%238a8f99' stroke-width='0.9'/%3E%3Cellipse cx='158' cy='22' rx='4.4' ry='5.4' fill='%23f2c230'/%3E%3Cpath d='M158 27.4L156.4 29.599999999999998H159.6Z' fill='%23f2c230'/%3E%3Cpath d='M158 29.599999999999998Q155 33.4 158 37.4T158 38' fill='none' stroke='%238a8f99' stroke-width='0.9'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom left / 200px 38px;
}

/* --- 8. Mapa --- */
:root[data-season="carnival"]:not([data-theme="light"]) .leaflet-tile {
  filter: invert(100%) hue-rotate(180deg) brightness(78%) contrast(100%) saturate(0.6);
}

:root[data-season="carnival"]:not([data-theme="light"]) .leaflet-container {
  background: #0e0a10 !important;
}

:root[data-season="carnival"] .g4r-map-viewport::after {
  content: "";
  position: absolute;
  top: max(16px, env(safe-area-inset-top, 16px));
  left: max(16px, env(safe-area-inset-left, 16px));
  width: 64px;
  height: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='48' viewBox='0 0 64 48'%3E%3Cpath d='M8 4C20 2 26 14 16 19C6 24 12 36 28 31' stroke='%23c2409a' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3Cg opacity='0.9'%3E%3Crect x='36' y='8' width='6' height='2.6' fill='%232bb5a8' transform='rotate(28 39 9)'/%3E%3Ccircle cx='52' cy='14' r='2.2' fill='%23f2c230'/%3E%3Ccircle cx='46' cy='28' r='1.8' fill='%233f7fd8'/%3E%3Crect x='54' y='30' width='5.4' height='2.4' fill='%23c2409a' transform='rotate(-24 56 31)'/%3E%3Cpolygon points='40,38 44,44 36,44' fill='%232bb5a8'/%3E%3Ccircle cx='28' cy='42' r='1.6' fill='%23f2c230'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
  z-index: 1004;
}

:root[data-season="carnival"] .g4r-map-action-pill {
  border-color: var(--brand-primary-border);
}

:root[data-season="carnival"] .g4r-map-action-pill svg {
  color: var(--brand-primary);
}

/* --- 9. Ubicación del usuario --- */
:root[data-season="carnival"] .g4r-gps-dot {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='10.4' rx='6.8' ry='8.2' fill='%23c2409a'/%3E%3Cpath d='M12 18.4L10.4 20.4H13.6Z' fill='%239a2f78'/%3E%3Cpath d='M12 20.4Q9.6 21.8 12 23.2' stroke='%238a8f99' stroke-width='0.9' fill='none' stroke-linecap='round'/%3E%3Cpath d='M7.6 8.4A5 5 0 0 1 10.6 4.8' stroke='%23f6e3f0' stroke-width='1.4' stroke-linecap='round' fill='none' stroke-opacity='0.7'/%3E%3C/svg%3E") no-repeat center / contain;
  box-shadow: none;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.45));
}

:root[data-season="carnival"] .g4r-gps-pulse-ring {
  background: rgba(200, 71, 159, 0.20);
  border-color: rgba(200, 71, 159, 0.50);
}

/* --- 10. Marcadores del mapa --- */
:root[data-season="carnival"] .g4r-beacon-pin.is-optimal {
  border-color: var(--brand-primary);
  box-shadow: none;
}

:root[data-season="carnival"] .g4r-beacon-pin.is-optimal .g4r-pin-tag {
  background: var(--brand-primary);
  color: #ffffff;
  box-shadow: none;
  white-space: nowrap;
}

:root[data-season="carnival"] .g4r-beacon-pin.is-optimal .g4r-pin-tag::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 4px;
  vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='rotate(16 12 13)'%3E%3Cpath d='M12 3.6L19.4 21.4H4.6Z' fill='%23f2c230'/%3E%3Cpath d='M9.4 10L14.6 10L16.4 14.2L7.6 14.2Z' fill='%23c2409a'/%3E%3Cpath d='M6.2 17.6L17.8 17.6L19 20.4H5Z' fill='%23c2409a'/%3E%3Ccircle cx='12' cy='3.4' r='2.2' fill='%232bb5a8'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

:root[data-season="carnival"] .g4r-beacon-pin.is-optimal::after {
  border-top-color: var(--brand-primary);
}

:root[data-season="carnival"] .g4r-beacon-pin.is-base {
  border-color: #2bb5a8;
  box-shadow: none;
}

:root[data-season="carnival"] .g4r-beacon-pin.is-base .g4r-pin-tag {
  background: #0f4a47;
  color: #e4f7f5;
  border: 1px solid #2bb5a8;
  box-shadow: none;
  white-space: nowrap;
}

:root[data-season="carnival"] .g4r-beacon-pin.is-base .g4r-pin-tag::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 4px;
  vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='7' cy='8' r='3' fill='%23f2c230'/%3E%3Ccircle cx='17' cy='7' r='2.4' fill='%23c2409a'/%3E%3Ccircle cx='12' cy='17' r='3.2' fill='%23f4f1f6'/%3E%3Crect x='3' y='15' width='4' height='2' fill='%233f7fd8' transform='rotate(-30 5 16)'/%3E%3C/svg%3E") no-repeat center / contain;
}

:root[data-season="carnival"] .g4r-beacon-pin.is-base::after {
  border-top-color: #2bb5a8;
}

/* ==========================================================================
   Día de la Hispanidad (12 octubre)
   Dibujos planos y estáticos: sin degradados, brillos ni animaciones.
   ========================================================================== */

/* --- 1. Variables --- */
:root[data-season="hispanidad"]:not([data-theme="light"]) {
  --brand-primary: #d9263a;
  --brand-primary-hover: #b81e30;
  --brand-primary-light: #e8475a;
  --brand-primary-text: #ffffff;
  --brand-primary-bg: rgba(217, 38, 58, 0.14);
  --brand-primary-border: rgba(217, 38, 58, 0.42);

  --bg-app: #0c0b0a;
  --bg-surface: #141211;
  --bg-elevated: #1d1a18;
  --bg-card: #161413;
  --bg-card-hover: #1f1b19;
  --bg-input: #100f0e;
  --bg-canvas: #0c0b0a;

  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-muted: rgba(217, 38, 58, 0.26);
  --border-active: rgba(217, 38, 58, 0.52);

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.40);
  --shadow-dock: 0 4px 16px rgba(0, 0, 0, 0.55);
}

:root[data-season="hispanidad"][data-theme="light"] {
  --brand-primary: #c8102e;
  --brand-primary-hover: #a50d26;
  --brand-primary-light: #d8283f;
  --brand-primary-text: #ffffff;
  --brand-primary-bg: rgba(200, 16, 46, 0.07);
  --brand-primary-border: rgba(200, 16, 46, 0.28);

  --bg-app: #f6f3ee;
  --bg-surface: #ffffff;
  --bg-elevated: #fbf8f2;
  --bg-card: #ffffff;
  --bg-card-hover: #faf6ef;
  --bg-input: #ffffff;
  --bg-canvas: #f6f3ee;

  --border-subtle: #e8e0d4;
  --border-muted: #e8c9cd;
  --border-active: #c8102e;

  --shadow-dock: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
}

:root[data-season="hispanidad"] ::selection {
  background: var(--brand-primary);
  color: #ffffff;
}

/* --- 2. Cabecera --- */
:root[data-season="hispanidad"] .g4r-sidebar-header {
  flex-shrink: 0;
}

:root[data-season="hispanidad"]:not([data-theme="light"]) .g4r-sidebar-header {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='16' viewBox='0 0 60 16'%3E%3Cpath d='M0 2H60' stroke='%235a5550' stroke-width='1.2'/%3E%3Cpolygon points='4,2 18,2 11,14' fill='%23c60b1e'/%3E%3Cpolygon points='22,2 36,2 29,14' fill='%23ffc400'/%3E%3Cpolygon points='40,2 54,2 47,14' fill='%23c60b1e'/%3E%3C/svg%3E") repeat-x top left / 60px 16px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='56' viewBox='0 0 130 56'%3E%3Cg fill='%23ffc400' fill-opacity='0.45'%3E%3Cpolygon points='34.00,12.00 36.94,19.95 45.41,20.29 38.76,25.55 41.05,33.71 34.00,29.00 26.95,33.71 29.24,25.55 22.59,20.29 31.06,19.95'/%3E%3Cpolygon points='80.00,6.00 81.94,11.33 87.61,11.53 83.14,15.02 84.70,20.47 80.00,17.30 75.30,20.47 76.86,15.02 72.39,11.53 78.06,11.33'/%3E%3Cpolygon points='106.00,21.00 108.23,26.93 114.56,27.22 109.61,31.17 111.29,37.28 106.00,33.80 100.71,37.28 102.39,31.17 97.44,27.22 103.77,26.93'/%3E%3C/g%3E%3C/svg%3E") no-repeat top 14px right 10px / 118px 51px,
    var(--bg-surface);
  border-bottom: 1px solid var(--border-muted);
  box-shadow: none;
}

:root[data-season="hispanidad"][data-theme="light"] .g4r-sidebar-header {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='16' viewBox='0 0 60 16'%3E%3Cpath d='M0 2H60' stroke='%239a948c' stroke-width='1.2'/%3E%3Cpolygon points='4,2 18,2 11,14' fill='%23c60b1e'/%3E%3Cpolygon points='22,2 36,2 29,14' fill='%23ffc400'/%3E%3Cpolygon points='40,2 54,2 47,14' fill='%23c60b1e'/%3E%3C/svg%3E") repeat-x top left / 60px 16px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='56' viewBox='0 0 130 56'%3E%3Cg fill='%23ffc400' fill-opacity='0.60'%3E%3Cpolygon points='34.00,12.00 36.94,19.95 45.41,20.29 38.76,25.55 41.05,33.71 34.00,29.00 26.95,33.71 29.24,25.55 22.59,20.29 31.06,19.95'/%3E%3Cpolygon points='80.00,6.00 81.94,11.33 87.61,11.53 83.14,15.02 84.70,20.47 80.00,17.30 75.30,20.47 76.86,15.02 72.39,11.53 78.06,11.33'/%3E%3Cpolygon points='106.00,21.00 108.23,26.93 114.56,27.22 109.61,31.17 111.29,37.28 106.00,33.80 100.71,37.28 102.39,31.17 97.44,27.22 103.77,26.93'/%3E%3C/g%3E%3C/svg%3E") no-repeat top 14px right 10px / 118px 51px,
    #ffffff;
  border-bottom: 1px solid #e8c9cd;
  box-shadow: none;
}

/* --- 3. Logotipo --- */
:root[data-season="hispanidad"] .g4r-brand-num {
  color: var(--brand-primary);
}

:root[data-season="hispanidad"] .g4r-brand-logo-img {
  border: 1.5px solid var(--brand-primary);
}

:root[data-season="hispanidad"] .g4r-brand-title::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  vertical-align: -4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.4' y='2.4' width='1.9' height='20' rx='0.6' fill='%238a8f99'/%3E%3Crect x='5.3' y='3.6' width='16.4' height='3' fill='%23c60b1e'/%3E%3Crect x='5.3' y='6.6' width='16.4' height='6' fill='%23ffc400'/%3E%3Crect x='5.3' y='12.6' width='16.4' height='3' fill='%23c60b1e'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- 4. Selector de modo --- */
:root[data-season="hispanidad"]:not([data-theme="light"]) .g4r-mode-selector {
  background: var(--bg-elevated);
  border-color: var(--border-subtle);
}

:root[data-season="hispanidad"]:not([data-theme="light"]) .g4r-mode-glider {
  background: var(--brand-primary-bg);
  border: 1px solid var(--brand-primary-border);
  box-shadow: none;
}

:root[data-season="hispanidad"][data-theme="light"] .g4r-mode-selector {
  background: #fbf8f2;
  border-color: #e8e0d4;
}

:root[data-season="hispanidad"][data-theme="light"] .g4r-mode-glider {
  background: #ffffff;
  border: 1px solid #c8102e;
  box-shadow: none;
}

:root[data-season="hispanidad"][data-theme="light"] .g4r-mode-btn.is-active {
  color: #a50d26 !important;
  font-weight: 700;
}

/* --- 5. Píldoras de combustible y botón de ruta --- */
:root[data-season="hispanidad"]:not([data-theme="light"]) .g4r-fuel-pill.is-active {
  border-color: var(--brand-primary);
  background: var(--brand-primary-bg);
  color: #ee6b79;
  box-shadow: none;
}

:root[data-season="hispanidad"][data-theme="light"] .g4r-fuel-pill.is-active {
  border-color: #c8102e;
  background: #fcf0f1;
  color: #a50d26;
  box-shadow: none;
}

:root[data-season="hispanidad"] #calcRouteBtn,
:root[data-season="hispanidad"] .g4r-btn-route-calc {
  background: var(--brand-primary) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

:root[data-season="hispanidad"] #calcRouteBtn:hover,
:root[data-season="hispanidad"] .g4r-btn-route-calc:hover {
  background: var(--brand-primary-hover) !important;
}

/* --- 6. Mejor gasolinera --- */
:root[data-season="hispanidad"] #stationsList > .g4r-card:first-of-type {
  position: relative;
  z-index: 1;
  content-visibility: visible;
  border: 1.5px solid var(--brand-primary);
  box-shadow: none;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 28px 28px;
}

:root[data-season="hispanidad"]:not([data-theme="light"]) #stationsList > .g4r-card:first-of-type {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpolygon points='0,0 10,0 0,10' fill='%23c60b1e'/%3E%3Cpolygon points='10,0 19,0 0,19 0,10' fill='%23ffc400'/%3E%3Cpolygon points='19,0 28,0 0,28 0,19' fill='%23c60b1e'/%3E%3C/svg%3E");
}

:root[data-season="hispanidad"][data-theme="light"] #stationsList > .g4r-card:first-of-type {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpolygon points='0,0 10,0 0,10' fill='%23c60b1e'/%3E%3Cpolygon points='10,0 19,0 0,19 0,10' fill='%23ffc400'/%3E%3Cpolygon points='19,0 28,0 0,28 0,19' fill='%23c60b1e'/%3E%3C/svg%3E");
}

:root[data-season="hispanidad"] #stationsList > .g4r-card:first-of-type::after {
  content: "";
  position: absolute;
  top: -9px;
  right: 10px;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.4' y='2.4' width='1.9' height='20' rx='0.6' fill='%238a8f99'/%3E%3Crect x='5.3' y='3.6' width='16.4' height='3' fill='%23c60b1e'/%3E%3Crect x='5.3' y='6.6' width='16.4' height='6' fill='%23ffc400'/%3E%3Crect x='5.3' y='12.6' width='16.4' height='3' fill='%23c60b1e'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
}

/* --- 7. Pie --- */
:root[data-season="hispanidad"] .g4r-sidebar-footer::before {
  content: "";
  display: block;
  height: 38px;
  margin-bottom: -4px;
  pointer-events: none;
}

:root[data-season="hispanidad"]:not([data-theme="light"]) .g4r-sidebar-footer::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='38' viewBox='0 0 200 38'%3E%3Cg opacity='0.75'%3E%3Crect x='0' y='35' width='200' height='3' fill='%238a8f99'/%3E%3Crect x='20' y='8' width='1.6' height='27' fill='%238a8f99'/%3E%3Crect x='21.6' y='8' width='15' height='2.6' fill='%23c60b1e'/%3E%3Crect x='21.6' y='10.6' width='15' height='5.2' fill='%23ffc400'/%3E%3Crect x='21.6' y='15.8' width='15' height='2.6' fill='%23c60b1e'/%3E%3Crect x='92' y='16' width='1.6' height='19' fill='%238a8f99'/%3E%3Crect x='93.6' y='16' width='15' height='2.6' fill='%23c60b1e'/%3E%3Crect x='93.6' y='18.6' width='15' height='5.2' fill='%23ffc400'/%3E%3Crect x='93.6' y='23.8' width='15' height='2.6' fill='%23c60b1e'/%3E%3Crect x='158' y='10' width='1.6' height='25' fill='%238a8f99'/%3E%3Crect x='159.6' y='10' width='15' height='2.6' fill='%23c60b1e'/%3E%3Crect x='159.6' y='12.6' width='15' height='5.2' fill='%23ffc400'/%3E%3Crect x='159.6' y='17.8' width='15' height='2.6' fill='%23c60b1e'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom left / 200px 38px;
}

:root[data-season="hispanidad"][data-theme="light"] .g4r-sidebar-footer::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='38' viewBox='0 0 200 38'%3E%3Cg opacity='0.85'%3E%3Crect x='0' y='35' width='200' height='3' fill='%239a948c'/%3E%3Crect x='20' y='8' width='1.6' height='27' fill='%239a948c'/%3E%3Crect x='21.6' y='8' width='15' height='2.6' fill='%23c60b1e'/%3E%3Crect x='21.6' y='10.6' width='15' height='5.2' fill='%23ffc400'/%3E%3Crect x='21.6' y='15.8' width='15' height='2.6' fill='%23c60b1e'/%3E%3Crect x='92' y='16' width='1.6' height='19' fill='%239a948c'/%3E%3Crect x='93.6' y='16' width='15' height='2.6' fill='%23c60b1e'/%3E%3Crect x='93.6' y='18.6' width='15' height='5.2' fill='%23ffc400'/%3E%3Crect x='93.6' y='23.8' width='15' height='2.6' fill='%23c60b1e'/%3E%3Crect x='158' y='10' width='1.6' height='25' fill='%239a948c'/%3E%3Crect x='159.6' y='10' width='15' height='2.6' fill='%23c60b1e'/%3E%3Crect x='159.6' y='12.6' width='15' height='5.2' fill='%23ffc400'/%3E%3Crect x='159.6' y='17.8' width='15' height='2.6' fill='%23c60b1e'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom left / 200px 38px;
}

/* --- 8. Mapa --- */
:root[data-season="hispanidad"]:not([data-theme="light"]) .leaflet-tile {
  filter: invert(100%) hue-rotate(180deg) brightness(78%) contrast(100%) saturate(0.6);
}

:root[data-season="hispanidad"]:not([data-theme="light"]) .leaflet-container {
  background: #0c0b0a !important;
}

:root[data-season="hispanidad"] .g4r-map-viewport::after {
  content: "";
  position: absolute;
  top: max(16px, env(safe-area-inset-top, 16px));
  left: max(16px, env(safe-area-inset-left, 16px));
  width: 64px;
  height: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='48' viewBox='0 0 64 48'%3E%3Cpath d='M12 3V45' stroke='%238a8f99' stroke-width='2' stroke-linecap='round'/%3E%3Crect x='13' y='6' width='42' height='6.5' fill='%23c60b1e'/%3E%3Crect x='13' y='12.5' width='42' height='13' fill='%23ffc400'/%3E%3Crect x='13' y='25.5' width='42' height='6.5' fill='%23c60b1e'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
  z-index: 1004;
}

:root[data-season="hispanidad"] .g4r-map-action-pill {
  border-color: var(--brand-primary-border);
}

:root[data-season="hispanidad"] .g4r-map-action-pill svg {
  color: var(--brand-primary);
}

/* --- 9. Ubicación del usuario --- */
:root[data-season="hispanidad"] .g4r-gps-dot {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Ccircle cx='12' cy='12' r='9.4'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23c)'%3E%3Crect x='0' y='0' width='24' height='24' fill='%23c60b1e'/%3E%3Crect x='0' y='6' width='24' height='12' fill='%23ffc400'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='9.9' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
  box-shadow: none;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.45));
}

:root[data-season="hispanidad"] .g4r-gps-pulse-ring {
  background: rgba(217, 38, 58, 0.20);
  border-color: rgba(217, 38, 58, 0.50);
}

/* --- 10. Marcadores del mapa --- */
:root[data-season="hispanidad"] .g4r-beacon-pin.is-optimal {
  border-color: var(--brand-primary);
  box-shadow: none;
}

:root[data-season="hispanidad"] .g4r-beacon-pin.is-optimal .g4r-pin-tag {
  background: var(--brand-primary);
  color: #ffffff;
  box-shadow: none;
  white-space: nowrap;
}

:root[data-season="hispanidad"] .g4r-beacon-pin.is-optimal .g4r-pin-tag::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 4px;
  vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='12.00,2.10 14.59,9.04 21.99,9.36 16.18,13.96 18.17,21.09 12.00,17.00 5.83,21.09 7.82,13.96 2.01,9.36 9.41,9.04' fill='%23ffc400'/%3E%3C/svg%3E") no-repeat center / contain;
}

:root[data-season="hispanidad"] .g4r-beacon-pin.is-optimal::after {
  border-top-color: var(--brand-primary);
}

:root[data-season="hispanidad"] .g4r-beacon-pin.is-base {
  border-color: #9a7a1a;
  box-shadow: none;
}

:root[data-season="hispanidad"] .g4r-beacon-pin.is-base .g4r-pin-tag {
  background: #3a2f12;
  color: #ffe9a0;
  border: 1px solid #9a7a1a;
  box-shadow: none;
  white-space: nowrap;
}

:root[data-season="hispanidad"] .g4r-beacon-pin.is-base .g4r-pin-tag::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 4px;
  vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.4' y='2.4' width='1.9' height='20' rx='0.6' fill='%238a8f99'/%3E%3Crect x='5.3' y='3.6' width='16.4' height='3' fill='%23c60b1e'/%3E%3Crect x='5.3' y='6.6' width='16.4' height='6' fill='%23ffc400'/%3E%3Crect x='5.3' y='12.6' width='16.4' height='3' fill='%23c60b1e'/%3E%3C/svg%3E") no-repeat center / contain;
}

:root[data-season="hispanidad"] .g4r-beacon-pin.is-base::after {
  border-top-color: #9a7a1a;
}

/* ==========================================================================
   Semana Santa (Domingo de Ramos a Lunes de Pascua)
   Dibujos planos y estáticos: sin degradados, brillos ni animaciones.
   ========================================================================== */

/* --- 1. Variables --- */
:root[data-season="semanasanta"]:not([data-theme="light"]) {
  --brand-primary: #9468cf;
  --brand-primary-hover: #7d52b8;
  --brand-primary-light: #ac86e0;
  --brand-primary-text: #ffffff;
  --brand-primary-bg: rgba(148, 104, 207, 0.15);
  --brand-primary-border: rgba(148, 104, 207, 0.42);

  --bg-app: #0a090e;
  --bg-surface: #110f16;
  --bg-elevated: #1a1722;
  --bg-card: #13111a;
  --bg-card-hover: #1c1925;
  --bg-input: #0e0c13;
  --bg-canvas: #0a090e;

  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-muted: rgba(148, 104, 207, 0.26);
  --border-active: rgba(148, 104, 207, 0.52);

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.40);
  --shadow-dock: 0 4px 16px rgba(0, 0, 0, 0.55);
}

:root[data-season="semanasanta"][data-theme="light"] {
  --brand-primary: #5f3a8f;
  --brand-primary-hover: #4d2e75;
  --brand-primary-light: #7a52ad;
  --brand-primary-text: #ffffff;
  --brand-primary-bg: rgba(95, 58, 143, 0.07);
  --brand-primary-border: rgba(95, 58, 143, 0.28);

  --bg-app: #f4f1f7;
  --bg-surface: #ffffff;
  --bg-elevated: #faf8fc;
  --bg-card: #ffffff;
  --bg-card-hover: #f7f3fa;
  --bg-input: #ffffff;
  --bg-canvas: #f4f1f7;

  --border-subtle: #e4dfeb;
  --border-muted: #d6c9e6;
  --border-active: #5f3a8f;

  --shadow-dock: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
}

:root[data-season="semanasanta"] ::selection {
  background: var(--brand-primary);
  color: #ffffff;
}

/* --- 2. Cabecera --- */
:root[data-season="semanasanta"] .g4r-sidebar-header {
  flex-shrink: 0;
}

:root[data-season="semanasanta"]:not([data-theme="light"]) .g4r-sidebar-header {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='56' viewBox='0 0 130 56'%3E%3Cg opacity='0.60'%3E%3Cpath d='M71.0 18C72.8 20.4 73.6 22 71.0 24.4C68.4 22 69.2 20.4 71.0 18Z' fill='%23f2c230'/%3E%3Crect x='66' y='26' width='10' height='34' rx='1' fill='%23f4ecdc'/%3E%3Crect x='66' y='31' width='10' height='2.6' fill='%237b4fb0'/%3E%3Cpath d='M93.5 6C95.3 8.4 96.1 10 93.5 12.4C90.9 10 91.7 8.4 93.5 6Z' fill='%23f2c230'/%3E%3Crect x='88' y='14' width='11' height='46' rx='1' fill='%23f4ecdc'/%3E%3Crect x='88' y='19' width='11' height='2.6' fill='%237b4fb0'/%3E%3Cpath d='M117.0 24C118.8 26.4 119.6 28 117.0 30.4C114.4 28 115.2 26.4 117.0 24Z' fill='%23f2c230'/%3E%3Crect x='112' y='32' width='10' height='28' rx='1' fill='%23f4ecdc'/%3E%3Crect x='112' y='37' width='10' height='2.6' fill='%237b4fb0'/%3E%3C/g%3E%3C/svg%3E") no-repeat top 4px right 10px / 118px 51px,
    var(--bg-surface);
  border-bottom: 1px solid var(--border-muted);
  box-shadow: none;
}

:root[data-season="semanasanta"][data-theme="light"] .g4r-sidebar-header {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='56' viewBox='0 0 130 56'%3E%3Cg opacity='0.80'%3E%3Cpath d='M71.0 18C72.8 20.4 73.6 22 71.0 24.4C68.4 22 69.2 20.4 71.0 18Z' fill='%23f2c230'/%3E%3Crect x='66' y='26' width='10' height='34' rx='1' fill='%23f4ecdc'/%3E%3Crect x='66' y='31' width='10' height='2.6' fill='%237b4fb0'/%3E%3Cpath d='M93.5 6C95.3 8.4 96.1 10 93.5 12.4C90.9 10 91.7 8.4 93.5 6Z' fill='%23f2c230'/%3E%3Crect x='88' y='14' width='11' height='46' rx='1' fill='%23f4ecdc'/%3E%3Crect x='88' y='19' width='11' height='2.6' fill='%237b4fb0'/%3E%3Cpath d='M117.0 24C118.8 26.4 119.6 28 117.0 30.4C114.4 28 115.2 26.4 117.0 24Z' fill='%23f2c230'/%3E%3Crect x='112' y='32' width='10' height='28' rx='1' fill='%23f4ecdc'/%3E%3Crect x='112' y='37' width='10' height='2.6' fill='%237b4fb0'/%3E%3C/g%3E%3C/svg%3E") no-repeat top 4px right 10px / 118px 51px,
    #ffffff;
  border-bottom: 1px solid #d6c9e6;
  box-shadow: none;
}

/* --- 3. Logotipo --- */
:root[data-season="semanasanta"] .g4r-brand-num {
  color: var(--brand-primary);
}

:root[data-season="semanasanta"] .g4r-brand-logo-img {
  border: 1.5px solid var(--brand-primary);
}

:root[data-season="semanasanta"] .g4r-brand-title::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  vertical-align: -4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.4C13.8 3.6 14.6 5.2 12 7.6C9.4 5.2 10.2 3.6 12 1.4Z' fill='%23f2c230'/%3E%3Crect x='8.6' y='8.2' width='6.8' height='13.4' rx='1' fill='%23f4ecdc'/%3E%3Crect x='8.6' y='12' width='6.8' height='2.4' fill='%237b4fb0'/%3E%3Cpath d='M8.6 9.4Q10 11 11 9.4' fill='%23dcd0b8'/%3E%3Crect x='6.6' y='21.4' width='10.8' height='1.8' rx='0.6' fill='%238a6fb5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- 4. Selector de modo --- */
:root[data-season="semanasanta"]:not([data-theme="light"]) .g4r-mode-selector {
  background: var(--bg-elevated);
  border-color: var(--border-subtle);
}

:root[data-season="semanasanta"]:not([data-theme="light"]) .g4r-mode-glider {
  background: var(--brand-primary-bg);
  border: 1px solid var(--brand-primary-border);
  box-shadow: none;
}

:root[data-season="semanasanta"][data-theme="light"] .g4r-mode-selector {
  background: #faf8fc;
  border-color: #e4dfeb;
}

:root[data-season="semanasanta"][data-theme="light"] .g4r-mode-glider {
  background: #ffffff;
  border: 1px solid #5f3a8f;
  box-shadow: none;
}

:root[data-season="semanasanta"][data-theme="light"] .g4r-mode-btn.is-active {
  color: #4d2e75 !important;
  font-weight: 700;
}

/* --- 5. Píldoras de combustible y botón de ruta --- */
:root[data-season="semanasanta"]:not([data-theme="light"]) .g4r-fuel-pill.is-active {
  border-color: var(--brand-primary);
  background: var(--brand-primary-bg);
  color: #b898e8;
  box-shadow: none;
}

:root[data-season="semanasanta"][data-theme="light"] .g4r-fuel-pill.is-active {
  border-color: #5f3a8f;
  background: #f3eefa;
  color: #4d2e75;
  box-shadow: none;
}

:root[data-season="semanasanta"] #calcRouteBtn,
:root[data-season="semanasanta"] .g4r-btn-route-calc {
  background: var(--brand-primary) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

:root[data-season="semanasanta"] #calcRouteBtn:hover,
:root[data-season="semanasanta"] .g4r-btn-route-calc:hover {
  background: var(--brand-primary-hover) !important;
}

/* --- 6. Mejor gasolinera --- */
:root[data-season="semanasanta"] #stationsList > .g4r-card:first-of-type {
  position: relative;
  z-index: 1;
  content-visibility: visible;
  border: 1.5px solid var(--brand-primary);
  box-shadow: none;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 40px 40px;
}

:root[data-season="semanasanta"]:not([data-theme="light"]) #stationsList > .g4r-card:first-of-type {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpolygon points='0,0 40,0 0,40' fill='%237b4fb0' fill-opacity='0.34'/%3E%3Cpolygon points='46,0 51,0 0,51 0,46' fill='%23f4ecdc' fill-opacity='0.55'/%3E%3C/svg%3E");
}

:root[data-season="semanasanta"][data-theme="light"] #stationsList > .g4r-card:first-of-type {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpolygon points='0,0 40,0 0,40' fill='%237b4fb0' fill-opacity='0.18'/%3E%3Cpolygon points='46,0 51,0 0,51 0,46' fill='%237b4fb0' fill-opacity='0.55'/%3E%3C/svg%3E");
}

:root[data-season="semanasanta"] #stationsList > .g4r-card:first-of-type::after {
  content: "";
  position: absolute;
  top: -9px;
  right: 10px;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.4 21.4C8 16 12 10.6 19.6 3.6' stroke='%236f7a4a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3Cg fill='%237d9560'%3E%3Cellipse cx='6.2' cy='14.6' rx='3.3' ry='1.4' transform='rotate(-20 6.2 14.6)'/%3E%3Cellipse cx='9.4' cy='10.8' rx='3.3' ry='1.4' transform='rotate(-20 9.4 10.8)'/%3E%3Cellipse cx='13' cy='7.4' rx='3.3' ry='1.4' transform='rotate(-20 13 7.4)'/%3E%3Cellipse cx='16.8' cy='4.2' rx='3' ry='1.3' transform='rotate(-20 16.8 4.2)'/%3E%3C/g%3E%3Cg fill='%238aa66a'%3E%3Cellipse cx='9.4' cy='18.6' rx='3.3' ry='1.4' transform='rotate(-75 9.4 18.6)'/%3E%3Cellipse cx='12.4' cy='14.8' rx='3.3' ry='1.4' transform='rotate(-75 12.4 14.8)'/%3E%3Cellipse cx='15.8' cy='11.2' rx='3.3' ry='1.4' transform='rotate(-75 15.8 11.2)'/%3E%3Cellipse cx='19.4' cy='7.6' rx='3' ry='1.3' transform='rotate(-75 19.4 7.6)'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
}

/* --- 7. Pie --- */
:root[data-season="semanasanta"] .g4r-sidebar-footer::before {
  content: "";
  display: block;
  height: 38px;
  margin-bottom: -4px;
  pointer-events: none;
}

:root[data-season="semanasanta"]:not([data-theme="light"]) .g4r-sidebar-footer::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='38' viewBox='0 0 200 38'%3E%3Cg fill='%23a58bd0' opacity='0.30'%3E%3Crect x='0' y='35' width='200' height='3'/%3E%3Crect x='8' y='23' width='32' height='12'/%3E%3Cpolygon points='6,23 24,14 42,23'/%3E%3Crect x='40' y='15' width='14' height='20'/%3E%3Cpolygon points='38,15 47,7 56,15'/%3E%3Crect x='46.2' y='0.6' width='1.6' height='6.8'/%3E%3Crect x='44.4' y='2.6' width='5.2' height='1.5'/%3E%3Cellipse cx='78' cy='21' rx='4' ry='14'/%3E%3Cellipse cx='134' cy='23' rx='3.6' ry='12'/%3E%3Crect x='107.4' y='13' width='2.8' height='22'/%3E%3Crect x='102.4' y='17.6' width='12.8' height='2.6'/%3E%3Crect x='152' y='25' width='26' height='10'/%3E%3Cpolygon points='150,25 165,15 180,25'/%3E%3Crect x='164.2' y='7.6' width='1.7' height='7.6'/%3E%3Crect x='162.4' y='9.6' width='5.3' height='1.5'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom left / 200px 38px;
}

:root[data-season="semanasanta"][data-theme="light"] .g4r-sidebar-footer::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='38' viewBox='0 0 200 38'%3E%3Cg fill='%235f3a8f' opacity='0.26'%3E%3Crect x='0' y='35' width='200' height='3'/%3E%3Crect x='8' y='23' width='32' height='12'/%3E%3Cpolygon points='6,23 24,14 42,23'/%3E%3Crect x='40' y='15' width='14' height='20'/%3E%3Cpolygon points='38,15 47,7 56,15'/%3E%3Crect x='46.2' y='0.6' width='1.6' height='6.8'/%3E%3Crect x='44.4' y='2.6' width='5.2' height='1.5'/%3E%3Cellipse cx='78' cy='21' rx='4' ry='14'/%3E%3Cellipse cx='134' cy='23' rx='3.6' ry='12'/%3E%3Crect x='107.4' y='13' width='2.8' height='22'/%3E%3Crect x='102.4' y='17.6' width='12.8' height='2.6'/%3E%3Crect x='152' y='25' width='26' height='10'/%3E%3Cpolygon points='150,25 165,15 180,25'/%3E%3Crect x='164.2' y='7.6' width='1.7' height='7.6'/%3E%3Crect x='162.4' y='9.6' width='5.3' height='1.5'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom left / 200px 38px;
}

/* --- 8. Mapa --- */
:root[data-season="semanasanta"]:not([data-theme="light"]) .leaflet-tile {
  filter: invert(100%) hue-rotate(180deg) brightness(78%) contrast(100%) saturate(0.6);
}

:root[data-season="semanasanta"]:not([data-theme="light"]) .leaflet-container {
  background: #0a090e !important;
}

:root[data-season="semanasanta"]:not([data-theme="light"]) .g4r-map-viewport::after {
  content: "";
  position: absolute;
  top: max(16px, env(safe-area-inset-top, 16px));
  left: max(16px, env(safe-area-inset-left, 16px));
  width: 64px;
  height: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='48' viewBox='0 0 64 48'%3E%3Cpath d='M24 3C26.2 6 27.2 8 24 11.2C20.8 8 21.8 6 24 3Z' fill='%23f2c230'/%3E%3Crect x='19' y='12.6' width='10' height='30' rx='1.2' fill='%23f4ecdc' fill-opacity='0.9'/%3E%3Crect x='19' y='19' width='10' height='3' fill='%237b4fb0'/%3E%3Crect x='16' y='42.4' width='16' height='2.2' rx='0.8' fill='%238a6fb5'/%3E%3Cg fill='%23f4ecdc' fill-opacity='0.55'%3E%3Ccircle cx='44' cy='10' r='1.4'/%3E%3Ccircle cx='54' cy='22' r='1.1'/%3E%3Ccircle cx='46' cy='34' r='1.2'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
  z-index: 1004;
}

:root[data-season="semanasanta"] .g4r-map-action-pill {
  border-color: var(--brand-primary-border);
}

:root[data-season="semanasanta"] .g4r-map-action-pill svg {
  color: var(--brand-primary);
}

/* --- 9. Ubicación del usuario --- */
:root[data-season="semanasanta"] .g4r-gps-dot {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.6' fill='%237b4fb0'/%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3Crect x='10.5' y='5.6' width='3' height='12.8' rx='0.5' fill='%23f4ecdc'/%3E%3Crect x='6.6' y='9' width='10.8' height='3' rx='0.5' fill='%23f4ecdc'/%3E%3C/svg%3E") no-repeat center / contain;
  box-shadow: none;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.45));
}

:root[data-season="semanasanta"] .g4r-gps-pulse-ring {
  background: rgba(148, 104, 207, 0.20);
  border-color: rgba(148, 104, 207, 0.50);
}

/* --- 10. Marcadores del mapa --- */
:root[data-season="semanasanta"] .g4r-beacon-pin.is-optimal {
  border-color: var(--brand-primary);
  box-shadow: none;
}

:root[data-season="semanasanta"] .g4r-beacon-pin.is-optimal .g4r-pin-tag {
  background: var(--brand-primary);
  color: #ffffff;
  box-shadow: none;
  white-space: nowrap;
}

:root[data-season="semanasanta"] .g4r-beacon-pin.is-optimal .g4r-pin-tag::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 4px;
  vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='10.3' y='2.4' width='3.4' height='19.2' rx='0.6' fill='%23f4ecdc'/%3E%3Crect x='5' y='7.6' width='14' height='3.4' rx='0.6' fill='%23f4ecdc'/%3E%3C/svg%3E") no-repeat center / contain;
}

:root[data-season="semanasanta"] .g4r-beacon-pin.is-optimal::after {
  border-top-color: var(--brand-primary);
}

:root[data-season="semanasanta"] .g4r-beacon-pin.is-base {
  border-color: #8a6fb5;
  box-shadow: none;
}

:root[data-season="semanasanta"] .g4r-beacon-pin.is-base .g4r-pin-tag {
  background: #2a2238;
  color: #efe7fa;
  border: 1px solid #8a6fb5;
  box-shadow: none;
  white-space: nowrap;
}

:root[data-season="semanasanta"] .g4r-beacon-pin.is-base .g4r-pin-tag::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 4px;
  vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.4C13.8 3.6 14.6 5.2 12 7.6C9.4 5.2 10.2 3.6 12 1.4Z' fill='%23f2c230'/%3E%3Crect x='8.6' y='8.2' width='6.8' height='13.4' rx='1' fill='%23f4ecdc'/%3E%3Crect x='8.6' y='12' width='6.8' height='2.4' fill='%237b4fb0'/%3E%3Cpath d='M8.6 9.4Q10 11 11 9.4' fill='%23dcd0b8'/%3E%3Crect x='6.6' y='21.4' width='10.8' height='1.8' rx='0.6' fill='%238a6fb5'/%3E%3C/svg%3E") no-repeat center / contain;
}

:root[data-season="semanasanta"] .g4r-beacon-pin.is-base::after {
  border-top-color: #8a6fb5;
}

/* ==========================================================================
   Feira do Cocido de Lalín (sábado y domingo anteriores al domingo de Entroido)
   Dibujos planos y estáticos: sin degradados, brillos ni animaciones.
   ========================================================================== */

/* --- 1. Variables --- */
:root[data-season="cocido"]:not([data-theme="light"]) {
  --brand-primary: #58963c;
  --brand-primary-hover: #477d30;
  --brand-primary-light: #76b455;
  --brand-primary-text: #ffffff;
  --brand-primary-bg: rgba(88, 150, 60, 0.15);
  --brand-primary-border: rgba(88, 150, 60, 0.42);

  --bg-app: #0d0b09;
  --bg-surface: #14110e;
  --bg-elevated: #1d1914;
  --bg-card: #161310;
  --bg-card-hover: #201b16;
  --bg-input: #110e0b;
  --bg-canvas: #0d0b09;

  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-muted: rgba(88, 150, 60, 0.26);
  --border-active: rgba(88, 150, 60, 0.52);

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.40);
  --shadow-dock: 0 4px 16px rgba(0, 0, 0, 0.55);
}

:root[data-season="cocido"][data-theme="light"] {
  --brand-primary: #3f7a2b;
  --brand-primary-hover: #326222;
  --brand-primary-light: #4f8f3a;
  --brand-primary-text: #ffffff;
  --brand-primary-bg: rgba(63, 122, 43, 0.07);
  --brand-primary-border: rgba(63, 122, 43, 0.28);

  --bg-app: #f6f2ea;
  --bg-surface: #ffffff;
  --bg-elevated: #fbf8f1;
  --bg-card: #ffffff;
  --bg-card-hover: #faf6ee;
  --bg-input: #ffffff;
  --bg-canvas: #f6f2ea;

  --border-subtle: #e8e0d2;
  --border-muted: #cfdcc2;
  --border-active: #3f7a2b;

  --shadow-dock: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
}

:root[data-season="cocido"] ::selection {
  background: var(--brand-primary);
  color: #ffffff;
}

/* --- 2. Cabecera --- */
:root[data-season="cocido"] .g4r-sidebar-header {
  flex-shrink: 0;
}

:root[data-season="cocido"]:not([data-theme="light"]) .g4r-sidebar-header {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='16' viewBox='0 0 96 16'%3E%3Cpath d='M0 2H96' stroke='%238a7a60' stroke-width='1.4'/%3E%3Cpath d='M14 2V5' stroke='%238a7a60' stroke-width='1'/%3E%3Crect x='11' y='5' width='6' height='9' rx='3' fill='%23a8402c'/%3E%3Crect x='10.6' y='4.6' width='6.8' height='1.6' fill='%23e0cba0'/%3E%3Cpath d='M48 2V5' stroke='%238a7a60' stroke-width='1'/%3E%3Crect x='45' y='5' width='6' height='7' rx='3' fill='%23a8402c'/%3E%3Crect x='44.6' y='4.6' width='6.8' height='1.6' fill='%23e0cba0'/%3E%3Cpath d='M78 2V5' stroke='%238a7a60' stroke-width='1'/%3E%3Crect x='75' y='5' width='6' height='10' rx='3' fill='%23a8402c'/%3E%3Crect x='74.6' y='4.6' width='6.8' height='1.6' fill='%23e0cba0'/%3E%3C/svg%3E") repeat-x top left / 96px 16px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='56' viewBox='0 0 130 56'%3E%3Cg fill='none' stroke='%23e8dfcc' stroke-opacity='0.30' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M70 56C62 47 78 41 70 32C62 23 76 17 70 6'/%3E%3Cpath d='M92 56C84 48 100 42 92 34C84 26 98 20 92 12'/%3E%3Cpath d='M114 56C106 46 122 40 114 30C106 22 118 16 114 8'/%3E%3C/g%3E%3C/svg%3E") no-repeat top 10px right 10px / 118px 51px,
    var(--bg-surface);
  border-bottom: 1px solid var(--border-muted);
  box-shadow: none;
}

:root[data-season="cocido"][data-theme="light"] .g4r-sidebar-header {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='16' viewBox='0 0 96 16'%3E%3Cpath d='M0 2H96' stroke='%239a8a70' stroke-width='1.4'/%3E%3Cpath d='M14 2V5' stroke='%239a8a70' stroke-width='1'/%3E%3Crect x='11' y='5' width='6' height='9' rx='3' fill='%23a8402c'/%3E%3Crect x='10.6' y='4.6' width='6.8' height='1.6' fill='%23e0cba0'/%3E%3Cpath d='M48 2V5' stroke='%239a8a70' stroke-width='1'/%3E%3Crect x='45' y='5' width='6' height='7' rx='3' fill='%23a8402c'/%3E%3Crect x='44.6' y='4.6' width='6.8' height='1.6' fill='%23e0cba0'/%3E%3Cpath d='M78 2V5' stroke='%239a8a70' stroke-width='1'/%3E%3Crect x='75' y='5' width='6' height='10' rx='3' fill='%23a8402c'/%3E%3Crect x='74.6' y='4.6' width='6.8' height='1.6' fill='%23e0cba0'/%3E%3C/svg%3E") repeat-x top left / 96px 16px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='56' viewBox='0 0 130 56'%3E%3Cg fill='none' stroke='%23b5a98e' stroke-opacity='0.50' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M70 56C62 47 78 41 70 32C62 23 76 17 70 6'/%3E%3Cpath d='M92 56C84 48 100 42 92 34C84 26 98 20 92 12'/%3E%3Cpath d='M114 56C106 46 122 40 114 30C106 22 118 16 114 8'/%3E%3C/g%3E%3C/svg%3E") no-repeat top 10px right 10px / 118px 51px,
    #ffffff;
  border-bottom: 1px solid #cfdcc2;
  box-shadow: none;
}

/* --- 3. Logotipo --- */
:root[data-season="cocido"] .g4r-brand-num {
  color: var(--brand-primary);
}

:root[data-season="cocido"] .g4r-brand-logo-img {
  border: 1.5px solid var(--brand-primary);
}

:root[data-season="cocido"] .g4r-brand-title::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  vertical-align: -4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3.6Q7.4 2.2 9 0.8M15 3.6Q13.4 2.2 15 0.8' stroke='%23e8dfcc' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='5' r='1.4' fill='%238a9097'/%3E%3Cpath d='M4.6 10C4.6 7.2 8 6 12 6S19.4 7.2 19.4 10Z' fill='%238a9097'/%3E%3Crect x='3.4' y='9.8' width='17.2' height='1.8' rx='0.6' fill='%236b7078'/%3E%3Cpath d='M4.4 11.6H19.6V16C19.6 19.4 17 21.8 13.8 21.8H10.2C7 21.8 4.4 19.4 4.4 16Z' fill='%236b7078'/%3E%3Crect x='1.4' y='12.4' width='3' height='2.4' rx='1' fill='%238a9097'/%3E%3Crect x='19.6' y='12.4' width='3' height='2.4' rx='1' fill='%238a9097'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- 4. Selector de modo --- */
:root[data-season="cocido"]:not([data-theme="light"]) .g4r-mode-selector {
  background: var(--bg-elevated);
  border-color: var(--border-subtle);
}

:root[data-season="cocido"]:not([data-theme="light"]) .g4r-mode-glider {
  background: var(--brand-primary-bg);
  border: 1px solid var(--brand-primary-border);
  box-shadow: none;
}

:root[data-season="cocido"][data-theme="light"] .g4r-mode-selector {
  background: #fbf8f1;
  border-color: #e8e0d2;
}

:root[data-season="cocido"][data-theme="light"] .g4r-mode-glider {
  background: #ffffff;
  border: 1px solid #3f7a2b;
  box-shadow: none;
}

:root[data-season="cocido"][data-theme="light"] .g4r-mode-btn.is-active {
  color: #326222 !important;
  font-weight: 700;
}

/* --- 5. Píldoras de combustible y botón de ruta --- */
:root[data-season="cocido"]:not([data-theme="light"]) .g4r-fuel-pill.is-active {
  border-color: var(--brand-primary);
  background: var(--brand-primary-bg);
  color: #9bd277;
  box-shadow: none;
}

:root[data-season="cocido"][data-theme="light"] .g4r-fuel-pill.is-active {
  border-color: #3f7a2b;
  background: #eff6ea;
  color: #326222;
  box-shadow: none;
}

:root[data-season="cocido"] #calcRouteBtn,
:root[data-season="cocido"] .g4r-btn-route-calc {
  background: var(--brand-primary) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

:root[data-season="cocido"] #calcRouteBtn:hover,
:root[data-season="cocido"] .g4r-btn-route-calc:hover {
  background: var(--brand-primary-hover) !important;
}

/* --- 6. Mejor gasolinera --- */
:root[data-season="cocido"] #stationsList > .g4r-card:first-of-type {
  position: relative;
  z-index: 1;
  content-visibility: visible;
  border: 1.5px solid var(--brand-primary);
  box-shadow: none;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 46px 46px;
}

:root[data-season="cocido"]:not([data-theme="light"]) #stationsList > .g4r-card:first-of-type {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg opacity='0.65'%3E%3Ccircle cx='10' cy='10' r='3.4' fill='%23d9bd80'/%3E%3Ccircle cx='23' cy='7' r='2.8' fill='%23d9bd80'/%3E%3Ccircle cx='8' cy='24' r='3' fill='%23d9bd80'/%3E%3Ccircle cx='29' cy='18' r='2.4' fill='%23d9bd80'/%3E%3Cellipse cx='19' cy='19' rx='4.2' ry='1.8' transform='rotate(35 19 19)' fill='%234f8a3a'/%3E%3C/g%3E%3C/svg%3E");
}

:root[data-season="cocido"][data-theme="light"] #stationsList > .g4r-card:first-of-type {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg opacity='0.75'%3E%3Ccircle cx='10' cy='10' r='3.4' fill='%23caa95e'/%3E%3Ccircle cx='23' cy='7' r='2.8' fill='%23caa95e'/%3E%3Ccircle cx='8' cy='24' r='3' fill='%23caa95e'/%3E%3Ccircle cx='29' cy='18' r='2.4' fill='%23caa95e'/%3E%3Cellipse cx='19' cy='19' rx='4.2' ry='1.8' transform='rotate(35 19 19)' fill='%234f8a3a'/%3E%3C/g%3E%3C/svg%3E");
}

:root[data-season="cocido"] #stationsList > .g4r-card:first-of-type::after {
  content: "";
  position: absolute;
  top: -9px;
  right: 10px;
  width: 24px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolygon points='4.8,6.6 9.6,4 9.4,9.6' fill='%23e68c88'/%3E%3Cpolygon points='19.2,6.6 14.4,4 14.6,9.6' fill='%23e68c88'/%3E%3Ccircle cx='12' cy='13' r='8.4' fill='%23f2b6b0'/%3E%3Cellipse cx='12' cy='15.8' rx='4.2' ry='3.1' fill='%23e68c88'/%3E%3Ccircle cx='10.7' cy='15.8' r='0.8' fill='%23a8504c'/%3E%3Ccircle cx='13.3' cy='15.8' r='0.8' fill='%23a8504c'/%3E%3Ccircle cx='8.4' cy='11.4' r='1.1' fill='%233a2a28'/%3E%3Ccircle cx='15.6' cy='11.4' r='1.1' fill='%233a2a28'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
}

/* --- 7. Pie --- */
:root[data-season="cocido"] .g4r-sidebar-footer::before {
  content: "";
  display: block;
  height: 38px;
  margin-bottom: -4px;
  pointer-events: none;
}

:root[data-season="cocido"]:not([data-theme="light"]) .g4r-sidebar-footer::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='38' viewBox='0 0 200 38'%3E%3Cg fill='%23b8a888' opacity='0.34'%3E%3Crect x='0' y='35' width='200' height='3'/%3E%3Cpath d='M16 19C16 14 24 12 34 12S52 14 52 19Z'/%3E%3Crect x='13' y='19' width='42' height='3' rx='1'/%3E%3Cpath d='M15 22H53V28C53 33 48 35 43 35H25C20 35 15 33 15 28Z'/%3E%3Crect x='8' y='23' width='7' height='3.4' rx='1.6'/%3E%3Crect x='53' y='23' width='7' height='3.4' rx='1.6'/%3E%3Ccircle cx='34' cy='9.6' r='2.6'/%3E%3Cellipse cx='104' cy='26' rx='15' ry='8.6'/%3E%3Ccircle cx='120' cy='25' r='6.4'/%3E%3Cpolygon points='117,20 123,16 123.6,23'/%3E%3Cellipse cx='125.6' cy='27.6' rx='2.8' ry='2.4'/%3E%3Crect x='92' y='30' width='3.2' height='5'/%3E%3Crect x='98' y='31' width='3.2' height='4'/%3E%3Crect x='108' y='31' width='3.2' height='4'/%3E%3Crect x='114' y='30' width='3.2' height='5'/%3E%3Cellipse cx='169' cy='27' rx='3' ry='9' transform='rotate(-26 169 27)'/%3E%3Cellipse cx='178' cy='24' rx='3.2' ry='10.4'/%3E%3Cellipse cx='187' cy='27' rx='3' ry='9' transform='rotate(26 187 27)'/%3E%3Crect x='177' y='28' width='2.2' height='7'/%3E%3C/g%3E%3Cg fill='none' stroke='%23e8dfcc' stroke-opacity='0.34' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M26 8C22 4 30 2 26 -1'/%3E%3Cpath d='M89 24C85 21 88 17.4 91 18.4'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom left / 200px 38px;
}

:root[data-season="cocido"][data-theme="light"] .g4r-sidebar-footer::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='38' viewBox='0 0 200 38'%3E%3Cg fill='%237a6a4a' opacity='0.30'%3E%3Crect x='0' y='35' width='200' height='3'/%3E%3Cpath d='M16 19C16 14 24 12 34 12S52 14 52 19Z'/%3E%3Crect x='13' y='19' width='42' height='3' rx='1'/%3E%3Cpath d='M15 22H53V28C53 33 48 35 43 35H25C20 35 15 33 15 28Z'/%3E%3Crect x='8' y='23' width='7' height='3.4' rx='1.6'/%3E%3Crect x='53' y='23' width='7' height='3.4' rx='1.6'/%3E%3Ccircle cx='34' cy='9.6' r='2.6'/%3E%3Cellipse cx='104' cy='26' rx='15' ry='8.6'/%3E%3Ccircle cx='120' cy='25' r='6.4'/%3E%3Cpolygon points='117,20 123,16 123.6,23'/%3E%3Cellipse cx='125.6' cy='27.6' rx='2.8' ry='2.4'/%3E%3Crect x='92' y='30' width='3.2' height='5'/%3E%3Crect x='98' y='31' width='3.2' height='4'/%3E%3Crect x='108' y='31' width='3.2' height='4'/%3E%3Crect x='114' y='30' width='3.2' height='5'/%3E%3Cellipse cx='169' cy='27' rx='3' ry='9' transform='rotate(-26 169 27)'/%3E%3Cellipse cx='178' cy='24' rx='3.2' ry='10.4'/%3E%3Cellipse cx='187' cy='27' rx='3' ry='9' transform='rotate(26 187 27)'/%3E%3Crect x='177' y='28' width='2.2' height='7'/%3E%3C/g%3E%3Cg fill='none' stroke='%239a8a70' stroke-opacity='0.30' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M26 8C22 4 30 2 26 -1'/%3E%3Cpath d='M89 24C85 21 88 17.4 91 18.4'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom left / 200px 38px;
}

/* --- 8. Mapa --- */
:root[data-season="cocido"]:not([data-theme="light"]) .leaflet-tile {
  filter: invert(100%) hue-rotate(180deg) brightness(78%) contrast(100%) saturate(0.6);
}

:root[data-season="cocido"]:not([data-theme="light"]) .leaflet-container {
  background: #0d0b09 !important;
}

:root[data-season="cocido"] .g4r-map-viewport::after {
  content: "";
  position: absolute;
  top: max(16px, env(safe-area-inset-top, 16px));
  left: max(16px, env(safe-area-inset-left, 16px));
  width: 64px;
  height: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='48' viewBox='0 0 64 48'%3E%3Cg fill='none' stroke='%23f4ecdc' stroke-width='2' stroke-linecap='round' stroke-opacity='0.9'%3E%3Cpath d='M24 12C19 8 29 6 24 1'/%3E%3Cpath d='M34 12C29 8 39 6 34 1'/%3E%3Cpath d='M44 12C39 8 49 6 44 1'/%3E%3C/g%3E%3Ccircle cx='34' cy='15.4' r='2.2' fill='%238a9097'/%3E%3Cpath d='M14 24C14 18 22 16 34 16S54 18 54 24Z' fill='%238a9097'/%3E%3Crect x='11.6' y='23.4' width='44.8' height='3' rx='1' fill='%236b7078'/%3E%3Cpath d='M13 26.4H55V34C55 41 49 45 43 45H25C19 45 13 41 13 34Z' fill='%236b7078'/%3E%3Crect x='5' y='28' width='8' height='4.2' rx='2' fill='%238a9097'/%3E%3Crect x='55' y='28' width='8' height='4.2' rx='2' fill='%238a9097'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
  z-index: 1004;
}

:root[data-season="cocido"] .g4r-map-action-pill {
  border-color: var(--brand-primary-border);
}

:root[data-season="cocido"] .g4r-map-action-pill svg {
  color: var(--brand-primary);
}

/* --- 9. Ubicación del usuario --- */
:root[data-season="cocido"] .g4r-gps-dot {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.6' fill='%234f8a3a'/%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23ffffff' stroke-width='1.6'/%3E%3Cpath d='M12 18.8C7.8 15.4 7.8 9 12 5.2C16.2 9 16.2 15.4 12 18.8Z' fill='%23e6f0d8'/%3E%3Cpath d='M12 18.8V8.4M12 14.4L9.6 11.8M12 12L14.4 9.6' stroke='%234f8a3a' stroke-width='1' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
  box-shadow: none;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.45));
}

:root[data-season="cocido"] .g4r-gps-pulse-ring {
  background: rgba(88, 150, 60, 0.20);
  border-color: rgba(88, 150, 60, 0.50);
}

/* --- 10. Marcadores del mapa --- */
:root[data-season="cocido"] .g4r-beacon-pin.is-optimal {
  border-color: var(--brand-primary);
  box-shadow: none;
}

:root[data-season="cocido"] .g4r-beacon-pin.is-optimal .g4r-pin-tag {
  background: var(--brand-primary);
  color: #ffffff;
  box-shadow: none;
  white-space: nowrap;
}

:root[data-season="cocido"] .g4r-beacon-pin.is-optimal .g4r-pin-tag::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 4px;
  vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='5' r='1.5' fill='%23f4ecdc'/%3E%3Cpath d='M4.6 10C4.6 7.2 8 6 12 6S19.4 7.2 19.4 10Z' fill='%23f4ecdc'/%3E%3Cpath d='M4.4 11.4H19.6V16C19.6 19.4 17 21.8 13.8 21.8H10.2C7 21.8 4.4 19.4 4.4 16Z' fill='%23f4ecdc'/%3E%3Crect x='1.4' y='12.4' width='3' height='2.4' rx='1' fill='%23f4ecdc'/%3E%3Crect x='19.6' y='12.4' width='3' height='2.4' rx='1' fill='%23f4ecdc'/%3E%3C/svg%3E") no-repeat center / contain;
}

:root[data-season="cocido"] .g4r-beacon-pin.is-optimal::after {
  border-top-color: var(--brand-primary);
}

:root[data-season="cocido"] .g4r-beacon-pin.is-base {
  border-color: #a8643a;
  box-shadow: none;
}

:root[data-season="cocido"] .g4r-beacon-pin.is-base .g4r-pin-tag {
  background: #3a2418;
  color: #f6e3d3;
  border: 1px solid #a8643a;
  box-shadow: none;
  white-space: nowrap;
}

:root[data-season="cocido"] .g4r-beacon-pin.is-base .g4r-pin-tag::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 4px;
  vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 8.6V3.4' stroke='%23f4ecdc' stroke-width='1.4' stroke-linecap='round'/%3E%3Crect x='2.4' y='8.6' width='19.2' height='7.6' rx='3.8' fill='%23c4553a'/%3E%3Crect x='10.8' y='8.2' width='2.4' height='8.4' fill='%23f4ecdc'/%3E%3Cg fill='%23f1d9a8'%3E%3Ccircle cx='6' cy='11' r='0.9'/%3E%3Ccircle cx='8' cy='14' r='0.8'/%3E%3Ccircle cx='16' cy='11.4' r='0.9'/%3E%3Ccircle cx='18.2' cy='14' r='0.8'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

:root[data-season="cocido"] .g4r-beacon-pin.is-base::after {
  border-top-color: #a8643a;
}

/* ==========================================================================
   MEJORAS GAS4ROUTE: FAVORITAS, RECENTRAR, PRESETS, IDA Y VUELTA, TENDENCIAS
   ========================================================================== */

/* --- Botón de Favoritas en Tarjetas --- */
.g4r-card-fav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-tertiary, #94a3b8);
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.g4r-card-fav-btn:hover {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.10);
  transform: scale(1.1);
}

.g4r-card-fav-btn.is-favorite {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
}

.g4r-card-fav-btn.is-favorite .g4r-fav-star {
  fill: #f59e0b;
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.45));
}

.g4r-fav-star {
  width: 16px;
  height: 16px;
  transition: transform 0.18s ease;
}

/* --- Píldora de Ahorro Anual Estimado --- */
.g4r-annual-saving-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.30);
  color: #10b981;
  white-space: nowrap;
}

/* --- Barra de Opciones de Ruta / Ida y Vuelta --- */
.g4r-route-options-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 2px 0;
}

.g4r-round-trip-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
  background: var(--bg-surface-subtle, rgba(255, 255, 255, 0.04));
  color: var(--text-secondary, #94a3b8);
  cursor: pointer;
  transition: all 0.15s ease;
}

.g4r-round-trip-chip:hover {
  background: var(--bg-surface-hover, rgba(255, 255, 255, 0.08));
  color: var(--text-primary, #f1f5f9);
}

.g4r-round-trip-chip.is-active {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.5);
  color: #38bdf8;
  font-weight: 700;
}

.g4r-trip-roundtrip-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}

/* --- Alerta Crítica de Autonomía en Ruta --- */
.g4r-critical-autonomy-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.40);
  color: #fca5a5;
  font-size: 0.82rem;
  line-height: 1.45;
  font-weight: 600;
}

.g4r-critical-autonomy-banner svg {
  width: 18px;
  height: 18px;
  color: #ef4444;
  flex-shrink: 0;
  margin-top: 1px;
}

/* --- Tarjeta "Mejor día de la semana" en Histórico --- */
.g4r-best-day-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  margin-top: 10px;
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.g4r-best-day-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #60a5fa;
}

.g4r-best-day-desc {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-secondary, #94a3b8);
  line-height: 1.4;
}


/* --- Modal Barómetro Nacional Rediseñado (Proporción Óptima en PC) --- */
.g4r-history-modal-card.is-national {
  max-width: 530px !important;
  width: min(530px, calc(100vw - 24px)) !important;
  max-height: min(92vh, 660px) !important;
  max-height: min(92dvh, calc(100dvh - 32px), 660px) !important;
}

@media (min-width: 680px) {
  .g4r-history-modal-card.is-national {
    max-width: 530px !important;
  }
}


/* Indicador de Desviación Respecto a la Media Habitual de la Gasolinera */
.g4r-mean-comparison-subtag {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 2px;
  white-space: nowrap;
}

.g4r-mean-comparison-subtag.is-cheaper {
  color: #10b981;
}

.g4r-mean-comparison-subtag.is-dearer {
  color: #ef4444;
}

.g4r-mean-comparison-subtag.is-normal {
  color: var(--text-tertiary, #94a3b8);
}