/**
 * ============================================================================
 * GO! VERMELHINHOS - Design System & Modern Interface Layer (FASE 8.4)
 * Identidade visual moderna, limpa, legível e otimizada para smartphones.
 * ============================================================================
 */

:root {
  /* --- PALETA OFICIAL GO! VERMELHINHOS --- */
  --go-navy-deep: #070D1E;         /* Azul marinho quase negro */
  --go-navy: #0B132B;              /* Azul marinho profundo da marca */
  --go-navy-surface: #111A35;      /* Superfície escura */
  --go-navy-elevated: #182245;     /* Cards escuros elevados */
  
  --go-red: #D3131E;               /* Vermelho clássico Vermelhinho (Ação Principal) */
  --go-red-hover: #B91C1C;
  --go-red-active: #991B1B;
  --go-red-subtle: rgba(211, 19, 30, 0.08);
  --go-red-glow: rgba(211, 19, 30, 0.28);

  --go-blue: #0284C7;              /* Azul vivo oficial (Ações Secundárias / Informações) */
  --go-blue-dark: #0369A1;
  --go-blue-subtle: rgba(2, 132, 199, 0.08);

  --go-green: #10B981;             /* Verde estrito para veículos em circulação e GPS */
  --go-green-bg: rgba(16, 185, 129, 0.12);

  /* Superfícies & Cores Neutras (Modo Claro Padrão) */
  --go-bg: #F8FAFC;
  --go-surface: #FFFFFF;
  --go-surface-subtle: #F1F5F9;
  --go-border: #E2E8F0;
  --go-border-strong: #CBD5E1;

  /* Tipografia & Contraste Alto (Regra 19: principal #111827, secundário #4B5563) */
  --go-text-primary: #111827;
  --go-text-secondary: #4B5563;
  --go-text-muted: #6B7280;
  --go-text-inverse: #FFFFFF;

  /* Dimensões & Raios (Regra 17: border-radius 18px padrão) */
  --go-radius: 18px;
  --go-radius-sm: 10px;
  --go-radius-pill: 9999px;

  --go-header-height: 54px;
  --go-nav-height: 64px;

  --go-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --go-shadow-card: 0 4px 16px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
  --go-shadow-cta: 0 6px 20px -2px rgba(211, 19, 30, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root {
    --go-bg: #070D1E;
    --go-surface: #0E172E;
    --go-surface-subtle: #141F3C;
    --go-border: #1E2D52;
    --go-border-strong: #2D3F6E;

    --go-text-primary: #F8FAFC;
    --go-text-secondary: #CBD5E1;
    --go-text-muted: #94A3B8;

    --go-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.45);
  }
}

/* ==========================================================================
   1. CABEÇALHO COMPACTO & ELEGANTE
   ========================================================================== */

.app-header,
header.app-header {
  height: var(--go-header-height) !important;
  min-height: var(--go-header-height) !important;
  max-height: var(--go-header-height) !important;
  padding: 0 16px !important;
  background: var(--go-surface) !important;
  border-bottom: 1px solid var(--go-border) !important;
  box-shadow: var(--go-shadow-sm) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

.header-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.header-logo-img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  flex-shrink: 0 !important;
}

/* Esconder badge antigo se houver */
.header-logo-badge {
  display: none !important;
}

.header-titles {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  line-height: 1.15 !important;
}

.header-brand-name {
  font-family: var(--font-display, inherit) !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--go-red) !important;
}

.header-titles h1,
#appHeaderTitle {
  font-family: var(--font-display, inherit) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--go-text-primary) !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

.header-titles .subtitle {
  display: none !important; /* Remove subtítulo poluído */
}

/* ==========================================================================
   2. BOTTOM NAVIGATION MODERNA
   ========================================================================== */

.bottom-nav {
  height: var(--go-nav-height) !important;
  background: var(--go-surface) !important;
  border-top: 1px solid var(--go-border) !important;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.04) !important;
  padding: 0 12px !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  z-index: 1050 !important;
}

.bottom-nav .nav-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  min-width: 64px !important;
  padding: 6px 12px !important;
  border-radius: 12px !important;
  color: var(--go-text-secondary) !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.18s ease !important;
  position: relative !important;
}

.bottom-nav .nav-item .icon {
  font-size: 1.35rem !important;
  line-height: 1 !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.bottom-nav .nav-item.active {
  color: var(--go-red) !important;
  font-weight: 700 !important;
}

.bottom-nav .nav-item.active .icon {
  transform: translateY(-2px) scale(1.12) !important;
}

.bottom-nav .nav-item.active::after {
  content: "" !important;
  position: absolute !important;
  bottom: 2px !important;
  width: 18px !important;
  height: 3px !important;
  background: var(--go-red) !important;
  border-radius: var(--go-radius-pill) !important;
}

/* ==========================================================================
   3. ABA DESTINO ("🧭 Para onde vamos?") - REDESIGN E HIERARQUIA
   ========================================================================== */

.trip-view-container {
  max-width: 620px !important;
  margin: 0 auto !important;
  padding: 16px 16px calc(var(--go-nav-height) + 24px) 16px !important;
  gap: 16px !important;
}

.trip-header-section {
  margin-bottom: 2px !important;
}

.trip-page-title {
  font-size: 1.65rem !important;
  font-weight: 800 !important;
  color: var(--go-text-primary) !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 4px !important;
}

.trip-page-subtitle {
  font-size: 0.92rem !important;
  color: var(--go-text-secondary) !important;
}

/* 3.1 Campo de Destino (Regra 7: Min-height 56px, ícone 🔍, botão ×) */
.trip-search-box {
  margin-bottom: 0 !important;
  position: relative !important;
}

.trip-input-label {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: var(--go-text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.trip-input-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.trip-destination-input {
  width: 100% !important;
  min-height: 56px !important;
  height: 56px !important;
  padding: 0 44px 0 48px !important;
  background: var(--go-surface) !important;
  border: 1.5px solid var(--go-border-strong) !important;
  border-radius: var(--go-radius) !important;
  font-size: 1.02rem !important;
  font-weight: 600 !important;
  color: var(--go-text-primary) !important;
  outline: none !important;
  box-shadow: var(--go-shadow-sm) !important;
  transition: all 0.2s ease !important;
}

.trip-destination-input:focus {
  border-color: var(--go-blue) !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}

.trip-input-icon {
  position: absolute !important;
  left: 16px !important;
  font-size: 1.25rem !important;
  color: var(--go-text-muted) !important;
  pointer-events: none !important;
}

.trip-clear-btn {
  position: absolute !important;
  right: 10px !important;
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  background: var(--go-surface-subtle) !important;
  color: var(--go-text-secondary) !important;
  border: none !important;
  font-size: 1.15rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

.trip-clear-btn:hover {
  background: var(--go-border) !important;
}

/* 3.2 Autocomplete Simplificado (Regra 8) */
.trip-autocomplete-dropdown {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  background: var(--go-surface) !important;
  border: 1px solid var(--go-border) !important;
  border-radius: var(--go-radius) !important;
  box-shadow: var(--go-shadow-card) !important;
  overflow: hidden !important;
  z-index: 1200 !important;
  list-style: none !important;
  padding: 6px !important;
  max-height: 300px !important;
}

.trip-autocomplete-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  min-height: 48px !important;
}

.trip-autocomplete-item:hover,
.trip-autocomplete-item.selected {
  background: var(--go-surface-subtle) !important;
}

.trip-autocomplete-icon {
  font-size: 1.35rem !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.trip-autocomplete-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.trip-autocomplete-text {
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  color: var(--go-text-primary) !important;
  line-height: 1.25 !important;
}

.trip-autocomplete-badge-tipo {
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  color: var(--go-text-muted) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  text-transform: none !important;
}

/* 3.3 Card de Origem / GPS Responsivo (Fase 9.4) */
.trip-origin-card {
  background: var(--go-surface) !important;
  border: 1px solid var(--go-border) !important;
  border-radius: var(--go-radius) !important;
  padding: 16px 18px !important;
  display: flex !important;
  flex-direction: column !important; /* Padrão mobile: empilhamento vertical */
  align-items: stretch !important;
  box-shadow: var(--go-shadow-sm) !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.trip-origin-info {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.trip-origin-icon {
  font-size: 1.35rem !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

.trip-origin-texts {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  line-height: 1.35 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  white-space: normal !important;
}

.trip-origin-label {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--go-text-primary) !important;
}

.trip-origin-status {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--go-text-primary) !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  white-space: normal !important;
}

.trip-origin-status.is-requesting {
  color: var(--go-blue) !important;
}

.trip-origin-status.is-error {
  color: #DC2626 !important;
}

.trip-origin-status.is-warning {
  color: #D97706 !important;
}

.trip-origin-accuracy {
  font-size: 0.84rem !important;
  font-weight: 500 !important;
  color: var(--go-text-secondary) !important;
  line-height: 1.45 !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  white-space: normal !important;
}

.trip-origin-accuracy.is-granted {
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  color: var(--go-green) !important;
}

.trip-origin-accuracy.is-warning {
  color: #D97706 !important;
  font-weight: 600 !important;
}

.trip-origin-accuracy.is-error {
  color: #CBD5E1 !important; /* Cor neutra/clara legível conforme Seção 11 */
  font-weight: 400 !important;
}

@keyframes tripGpsPulse {
  0% { opacity: 0.35; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.12); }
  100% { opacity: 0.35; transform: scale(0.92); }
}

.trip-gps-pulsing {
  display: inline-block !important;
  animation: tripGpsPulse 1.2s infinite ease-in-out !important;
}

/* Botão de Ação do Card de Localização */
.trip-btn-locate {
  background: var(--go-surface-subtle) !important;
  color: var(--go-text-primary) !important;
  border: 1px solid var(--go-border) !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  padding: 10px 16px !important;
  min-height: 48px !important; /* Seção 9: min-height >= 48px */
  height: auto !important;
  width: 100% !important; /* Seção 1 e 3: 100% no mobile */
  max-width: 100% !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  position: static !important;
}

.trip-btn-locate:hover,
.trip-btn-locate:active {
  background: var(--go-border) !important;
  color: #FFFFFF !important;
}

/* Telas maiores (> 520px) com conteúdo compacto (GPS Concedido) */
@media (min-width: 521px) {
  .trip-origin-card.is-compact {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .trip-origin-card.is-compact .trip-origin-info {
    width: auto !important;
  }

  .trip-origin-card.is-compact .trip-btn-locate {
    width: auto !important;
    min-width: 120px !important;
    flex-shrink: 0 !important;
  }
}

/* 3.4 Botão Principal "🧭 Ver como chegar" (Regra 9) */
.trip-btn-submit {
  width: 100% !important;
  min-height: 58px !important;
  height: 60px !important;
  background: var(--go-red) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: var(--go-radius) !important;
  font-family: var(--font-display, inherit) !important;
  font-size: 1.12rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  box-shadow: var(--go-shadow-cta) !important;
  transition: transform 0.12s ease, background 0.18s ease, box-shadow 0.18s ease !important;
}

.trip-btn-submit:hover {
  background: var(--go-red-hover) !important;
  box-shadow: 0 8px 24px -2px rgba(211, 19, 30, 0.45) !important;
}

.trip-btn-submit:active {
  background: var(--go-red-active) !important;
  transform: scale(0.98) !important;
}

/* ==========================================================================
   4. CARDS E TIMELINE PADRONIZADOS (Regra 16 & 17)
   ========================================================================== */

.trip-card-transfer,
.trip-guidance-card,
.trip-main-card,
.trip-info-card,
.trip-alt-card {
  border-radius: var(--go-radius) !important;
  border: 1px solid var(--go-border) !important;
  background: var(--go-surface) !important;
  box-shadow: var(--go-shadow-card) !important;
  overflow: hidden !important;
}

/* Critérios de Planejamento Expansíveis (Regra 10) */
.trip-planning-criteria {
  margin-top: 10px !important;
  background: var(--go-surface-subtle) !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  font-size: 0.8rem !important;
  color: var(--go-text-secondary) !important;
}

.trip-planning-criteria summary {
  cursor: pointer !important;
  font-weight: 600 !important;
  color: var(--go-blue) !important;
  outline: none !important;
}

.trip-planning-criteria p {
  margin-top: 6px !important;
  margin-bottom: 0 !important;
  line-height: 1.4 !important;
}

/* 4.1 Card "Linhas que atendem a região" (Regra 11) */
.trip-region-lines-card {
  background: var(--go-surface) !important;
  border: 1.5px solid var(--go-blue) !important;
  border-radius: var(--go-radius) !important;
  padding: 16px !important;
  box-shadow: var(--go-shadow-card) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.trip-region-lines-header {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.trip-region-lines-badge {
  background: var(--go-blue-subtle) !important;
  color: var(--go-blue-dark) !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 3px 8px !important;
  border-radius: 8px !important;
  width: fit-content !important;
}

.trip-region-lines-title {
  font-family: var(--font-display, inherit) !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: var(--go-text-primary) !important;
  margin: 0 !important;
}

.trip-region-lines-desc {
  font-size: 0.88rem !important;
  color: var(--go-text-secondary) !important;
  margin: 0 !important;
}

.trip-region-lines-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.trip-region-line-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--go-surface-subtle) !important;
  border: 1px solid var(--go-border) !important;
  border-radius: 12px !important;
  padding: 6px 10px !important;
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  color: var(--go-text-primary) !important;
}

.trip-region-line-pill .pill-code {
  background: var(--go-blue) !important;
  color: #FFFFFF !important;
  padding: 2px 7px !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  font-size: 0.78rem !important;
}

.trip-btn-ver-linhas-regiao {
  background: var(--go-blue) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  font-size: 0.96rem !important;
  font-weight: 700 !important;
  min-height: 50px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25) !important;
  transition: all 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.trip-btn-ver-linhas-regiao:hover {
  background: var(--go-blue-dark) !important;
}

.trip-btn-ver-linhas-regiao:active {
  transform: scale(0.98) !important;
}

/* ==========================================================================
   5. MAPA & CONTROLES FLUTUANTES (Regra 13, 14 & 15)
   ========================================================================== */

/* Top bar do mapa */
.map-top-bar {
  padding: 10px 14px !important;
  gap: 8px !important;
  background: transparent !important;
}

.linha-selector-card {
  background: var(--go-surface) !important;
  border-radius: 14px !important;
  border: 1px solid var(--go-border) !important;
  box-shadow: var(--go-shadow-card) !important;
  padding: 8px 14px !important;
  min-height: 48px !important;
}

.linha-badge-pill {
  background: var(--go-red) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
}

/* Botões flutuantes 🎯 e 📍 */
.map-floating-controls {
  bottom: calc(var(--go-nav-height) + 16px) !important;
  right: 14px !important;
  gap: 10px !important;
}

.map-floating-controls button {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  border-radius: 50% !important;
  background: var(--go-surface) !important;
  border: 1px solid var(--go-border) !important;
  box-shadow: var(--go-shadow-card) !important;
  font-size: 1.25rem !important;
  cursor: pointer !important;
  transition: transform 0.15s ease !important;
}

.map-floating-controls button:active {
  transform: scale(0.92) !important;
}

/* 5.1 Card "Ônibus Mais Próximo" (Regra 15) */
.nearest-bus-card {
  border-radius: var(--go-radius) !important;
  background: var(--go-surface) !important;
  border: 1px solid var(--go-border) !important;
  box-shadow: var(--go-shadow-card) !important;
  max-width: 360px !important;
  overflow: hidden !important;
}

.nearest-bus-header {
  background: var(--go-surface-subtle) !important;
  border-bottom: 1px solid var(--go-border) !important;
  padding: 8px 14px !important;
}

.nearest-bus-heading {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: var(--go-text-primary) !important;
}

.nearest-bus-body {
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.nearest-bus-code {
  background: var(--go-blue) !important;
  color: #FFFFFF !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 8px !important;
}

.nearest-bus-distance-badge {
  background: var(--go-surface-subtle) !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;
}

.distance-number {
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: var(--go-text-primary) !important;
}

.btn-ver-onibus {
  background: var(--go-blue) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 10px !important;
  min-height: 44px !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  cursor: pointer !important;
}

/* 5.2 Botão Voltar Compacto (Regra 14) */
.trip-btn-voltar-flutuante {
  background: var(--go-navy) !important;
  border: 1.5px solid var(--go-border-strong) !important;
  border-radius: 20px !important;
  padding: 8px 16px !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  min-height: 44px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

/* ==========================================================================
   6. HORÁRIOS & LISTA DE LINHAS
   ========================================================================== */

.search-box-wrapper {
  border-radius: var(--go-radius) !important;
  border: 1.5px solid var(--go-border-strong) !important;
  background: var(--go-surface) !important;
  min-height: 52px !important;
}

.search-box-wrapper:focus-within {
  border-color: var(--go-blue) !important;
}

.linha-card {
  border-radius: var(--go-radius) !important;
  border: 1px solid var(--go-border) !important;
  background: var(--go-surface) !important;
  box-shadow: var(--go-shadow-sm) !important;
  transition: all 0.18s ease !important;
}

.linha-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--go-shadow-card) !important;
}

.linha-badge {
  background: var(--go-red) !important;
  color: #FFFFFF !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
}

/* Badge live */
.badge-live {
  background: var(--go-green-bg) !important;
  color: var(--go-green) !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

.badge-live::before {
  background-color: var(--go-green) !important;
}

/* 5.3 Barra de Modo Regional no Mapa (Regra 13) */
.map-region-lines-bar {
  position: absolute !important;
  top: 10px !important;
  left: 12px !important;
  right: 12px !important;
  background: var(--go-surface) !important;
  border: 1px solid var(--go-border) !important;
  border-radius: var(--go-radius) !important;
  box-shadow: var(--go-shadow-card) !important;
  padding: 10px 14px !important;
  z-index: 1100 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.map-region-lines-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.map-region-lines-subtitle {
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--go-blue) !important;
}

.map-region-lines-title {
  margin: 0 !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: var(--go-text-primary) !important;
}

.map-region-lines-chips {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  padding-bottom: 2px !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

.map-region-lines-chips::-webkit-scrollbar {
  display: none !important;
}

.map-region-chip {
  padding: 6px 12px !important;
  border-radius: 10px !important;
  border: 1px solid var(--go-border) !important;
  background: var(--go-surface-subtle) !important;
  color: var(--go-text-primary) !important;
  font-weight: 700 !important;
  font-size: 0.84rem !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  min-height: 38px !important;
  transition: all 0.15s ease !important;
}

.map-region-chip.active {
  background: var(--go-blue) !important;
  color: #FFFFFF !important;
  border-color: var(--go-blue) !important;
}

/* ==========================================================================
   7. GUIA DE VIAGEM E TIMELINE "COMO CHEGAR" — CONTRASTE E ISOLAMENTO CLARO (FASE 9.2)
   Regra: Dentro dos cards claros do guia de viagem, todos os textos devem
   possuir contraste estrito de alto nível (mínimo 4.5:1 para texto normal,
   3:1 para títulos grandes), independentemente do modo escuro do sistema.
   ========================================================================== */

/* 7.1 Isolamento de Contexto Claro nos Cards de Orientação */
.trip-guidance-container,
.trip-guidance-timeline-wrapper,
.trip-summary-card,
.trip-card-transfer,
.trip-main-card {
  color: #111827; /* Fallback base escuro */
}

.trip-guidance-timeline-wrapper {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: var(--go-radius, 16px) !important;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.08) !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* 7.2 Cabeçalho da Seção "Como Chegar" */
.trip-guidance-section-header {
  border-bottom: 1px solid #E2E8F0 !important;
  padding-bottom: 8px !important;
  margin-bottom: 16px !important;
}

.trip-guidance-section-title {
  font-family: var(--font-display, inherit) !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.25 !important;
}

.trip-guidance-section-subtitle {
  font-size: 0.82rem !important;
  color: #475569 !important;
  font-weight: 500 !important;
}

/* 7.3 Timeline Vertical e Passos */
.trip-timeline {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.trip-step {
  display: flex !important;
  gap: 12px !important;
  position: relative !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.trip-step-indicator {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 32px !important;
  flex-shrink: 0 !important;
}

.trip-step-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: #F1F5F9 !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #0F172A !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  z-index: 2 !important;
}

.trip-step-line {
  width: 2px !important;
  flex: 1 !important;
  background: #CBD5E1 !important;
  margin: 4px 0 !important;
  min-height: 28px !important;
}

.trip-step-body {
  flex: 1 !important;
  min-width: 0 !important;
  padding-bottom: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

.trip-step:last-child .trip-step-body {
  padding-bottom: 4px !important;
}

/* 7.4 Títulos e Rótulos Principais dos Steps */
.trip-step-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.trip-step-title {
  margin: 0 !important;
  font-size: 1.02rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  line-height: 1.3 !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

.trip-step-highlight {
  font-size: 0.94rem !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  line-height: 1.35 !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

.trip-step-desc {
  font-size: 0.86rem !important;
  color: #334155 !important;
  line-height: 1.4 !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

.trip-text-discreet {
  font-size: 0.76rem !important;
  color: #64748B !important;
  font-style: italic !important;
  line-height: 1.3 !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

.trip-step-label-small {
  font-size: 0.72rem !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  color: #7C3AED !important;
  letter-spacing: 0.5px !important;
}

/* 7.5 Badges da Timeline */
.trip-badge-accuracy {
  background: #F1F5F9 !important;
  color: #334155 !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  border: 1px solid #CBD5E1 !important;
  white-space: nowrap !important;
}

.trip-badge-dest {
  background: #F1F5F9 !important;
  color: #1E293B !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  border: 1px solid #CBD5E1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

/* 7.6 Cards dos Ônibus Dentro da Timeline */
.trip-bus-card {
  background: #F8FAFC !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 6px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.trip-bus-card.bus-card-second {
  background: #FAF5FF !important;
  border-color: #DDD6FE !important;
}

.trip-bus-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.trip-bus-badge {
  background: #DC2626 !important;
  color: #FFFFFF !important;
  font-family: var(--font-display, inherit) !important;
  font-size: 0.96rem !important;
  font-weight: 900 !important;
  padding: 3px 9px !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.25) !important;
}

.trip-bus-badge.line-secondary {
  background: #7C3AED !important;
  box-shadow: 0 1px 3px rgba(124, 58, 237, 0.25) !important;
}

.trip-bus-details {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.trip-bus-direction {
  font-size: 0.94rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  line-height: 1.25 !important;
  word-break: break-word !important;
}

.trip-bus-official {
  font-size: 0.78rem !important;
  color: #475569 !important;
  font-weight: 500 !important;
  word-break: break-word !important;
}

.trip-bus-op-row {
  font-size: 0.85rem !important;
  color: #1E293B !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

.trip-bus-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-top: 2px !important;
}

.trip-btn-action {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
  white-space: normal !important;
  text-align: center !important;
}

.trip-btn-action:hover {
  background: #F1F5F9 !important;
  border-color: #94A3B8 !important;
  color: #0284C7 !important;
}

/* 7.7 Box da Região de Integração / Troca de Linha */
.trip-transfer-box {
  background: #FAF5FF !important;
  border: 1.5px dashed #A855F7 !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.trip-transfer-badge {
  font-size: 0.76rem !important;
  font-weight: 900 !important;
  color: #7C3AED !important;
  letter-spacing: 0.5px !important;
}

.trip-transfer-name {
  font-size: 1.02rem !important;
  font-weight: 800 !important;
  color: #1E1B4B !important;
  margin: 2px 0 2px 0 !important;
  line-height: 1.3 !important;
  word-break: break-word !important;
}

/* 7.8 Destino Final e Desembarque */
.trip-destination-alighting {
  background: #F0FDF4 !important;
  border: 1.5px solid #86EFAC !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  margin-top: 4px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.trip-alighting-label {
  font-size: 0.78rem !important;
  color: #166534 !important;
  font-weight: 700 !important;
}

.trip-alighting-value {
  font-size: 0.98rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  word-break: break-word !important;
}

/* 7.9 Card de Resumo (SUA VIAGEM) em Fundo Claro */
.trip-summary-card {
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: var(--go-radius, 16px) !important;
  padding: 16px !important;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.trip-summary-kicker {
  font-size: 0.76rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.6px !important;
  color: #475569 !important;
  text-transform: uppercase !important;
}

.trip-summary-direction {
  font-size: 1.02rem !important;
  font-weight: 800 !important;
  color: #0F172A !important;
  line-height: 1.25 !important;
  word-break: break-word !important;
}

.trip-summary-target {
  font-size: 0.86rem !important;
  color: #334155 !important;
  font-weight: 500 !important;
}

.trip-rec-access-row {
  color: #334155 !important;
  font-weight: 600 !important;
}

.trip-rec-pill {
  color: #065F46 !important;
  font-weight: 700 !important;
}

/* 7.10 Seção Expansível Detalhes */
.trip-guidance-details {
  background: #F8FAFC !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.trip-guidance-details-summary {
  padding: 12px 16px !important;
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  color: #1E293B !important;
  cursor: pointer !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
}

.trip-guidance-details-summary:hover {
  background: #F1F5F9 !important;
}

.trip-guidance-details-content {
  padding: 10px 16px 14px 16px !important;
  border-top: 1px solid #E2E8F0 !important;
  color: #334155 !important;
  font-size: 0.82rem !important;
}

.trip-details-row {
  color: #334155 !important;
  border-bottom: 1px dashed #CBD5E1 !important;
}