/* ============================================
   🎨 GLOBAL.CSS - Versão Final Unificada
   ============================================
   Este arquivo contém TODOS os estilos do app.
   Estrutura:
   1.  Índice de Camadas (Z-Index)
   2.  Variáveis de Cores e Tema
   3.  Glossário CSS (para aprendizado)
   4.  Reset e Estilos Base (body, html)
   5.  Headers (app-header, menu, perfil)
   6.  Mapa e Botões Flutuantes
   7.  Botões (todos os tipos)
   8.  Cards e Containers
   9.  Modais e Alertas
   10. Loaders e Spinners
   11. Formulários e Inputs
   12. Listas e Itens
   13. Páginas Específicas (Perfil, Financeiro, Missões, Chat, Histórico)
   14. Tema Escuro
   15. Utilitários
   ============================================ */

/* ============================================
   1. 🎚️ ÍNDICE DE CAMADAS (Z-INDEX)
   ============================================
   Use estas referências para posicionar elementos.
   NUNCA coloque valores aleatórios.

   Camada | Valor | Componente
   -------|-------|--------------------------------
   1      | 1     | Mapa (#mapa)
   10     | 10    | Elementos de página padrão
   100    | 100   | Cards flutuantes (top-card, bottom-panel)
   200    | 200   | Botões flutuantes (taxímetro, GPS, suporte)
   300    | 300   | Cards de corrida ativa / solicitação
   1000   | 1000  | Header principal (.app-header)
   2000   | 2000  | Overlay do menu
   2500   | 2500  | Menu suspenso (.menu-suspenso)
   9999   | 9999  | Modais (.modal-wrapper)
   10000  | 10000 | Toasts (.toast-notification)
   ============================================ */

/* ============================================
   2. 🎨 VARIÁVEIS CSS (Cores e Tema Base)
   ============================================ */
:root {
  /* Cores Principais */
  --primary: #000000;            /* Preto - usado em headers e elementos principais */
  --accent: #ff6a00;             /* Laranja - cor de destaque para ações */
  --bg-surface: #ffffff;         /* Branco - fundo de cards e superfícies */
  --bg-body: #f4f6f8;            /* Cinza muito claro - fundo geral das páginas */

  /* Cores de Estado */
  --success: #4caf50;            /* Verde - ações positivas (confirmar, online) */
  --danger: #f44336;             /* Vermelho - ações destrutivas (cancelar, excluir) */
  --info: #2196f3;               /* Azul - informações neutras */
  --warning: #ff9800;            /* Laranja/Amarelo - alertas não críticos */
  --accent-light: #ffe1cc;
  --success: #4caf50;
  --success-light: #b7dfb9;
  --success-dark: #2d6930;
  /* Cores de Texto */
  --text-main: #333333;          /* Cinza escuro - texto principal */
  --text-light: #888888;         /* Cinza médio - texto secundário */
  --text-inverse: #ffffff;       /* Branco - texto sobre fundos escuros */

  /* Cores de Borda e Fundo Auxiliares */
  --border-light: #e9ecef;       /* Borda sutil para cards em tema claro */
  --bg-highlight: #f8f9fa;       /* Fundo levemente destacado */

  /* Sombras (para profundidade) */
  --shadow-sm: 0 2px 5px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 10px rgba(0,0,0,0.15);
  --shadow-lg: 0 5px 20px rgba(0,0,0,0.2);

  /* Arredondamentos */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 30px;
  --radius-full: 9999px;

  /* Transições */
  --transition: all 0.2s ease;

  /* Fontes */
  --font-main: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ============================================
   3. 📘 GLOSSÁRIO CSS (para aprendizado)
   ============================================
   - padding:       Espaço INTERNO (dentro da borda). Ex: padding: 15px;
   - margin:        Espaço EXTERNO (fora da borda). Ex: margin-bottom: 20px;
   - width/height:  Largura e altura. % é relativo ao elemento pai. vh/vw é relativo à tela.
   - border-radius: Arredonda os cantos. Ex: border-radius: 12px;
   - box-shadow:    Sombra. Ordem: deslocX deslocY blur cor.
   - z-index:       Camada de empilhamento. Maior valor = mais acima.
   - position:      Como o elemento é posicionado:
                     - static: padrão (não usa top/left)
                     - relative: relativo a si mesmo
                     - absolute: relativo ao ancestral posicionado mais próximo
                     - fixed: fixo na tela (mesmo com scroll)
   - display: flex: Ativa o modelo flexbox. Itens filhos podem ser alinhados com align-items e justify-content.
   - gap:           Espaço entre itens de um flex/grid. Ex: gap: 10px;
   - transition:    Suaviza mudanças. Ex: transition: all 0.2s;
   - overflow:      Controla o que acontece se o conteúdo for maior que o container.
                     - hidden: esconde o que sobra
                     - auto: mostra barra de rolagem se necessário
   ============================================ */

/* ============================================
   4. 🔄 RESET E ESTILOS BASE (body, html)
   ============================================ */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent; /* Remove highlight azul no mobile ao tocar */
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: var(--font-main);
  background-color: var(--bg-body);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;  /* Suaviza fontes no macOS/iOS */
}

/* Layout padrão: scroll ativado, mas páginas com mapa sobrescrevem com body.body-fixed */
body {
  overflow-y: auto;
  overflow-x: hidden;
}

/* Classe para páginas com tela fixa (mapa) */
body.body-fixed {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

/* Classe para páginas com scroll ativado (perfil, histórico, etc.) */
body.body-scroll {
  overflow-y: auto !important;
  overflow-x: hidden;
  position: relative;
  height: auto;
  min-height: 100vh;
}

/* ============================================
   5. 📱 HEADERS (App Header, Menu, Perfil)
   ============================================ */
.app-header {
  position: fixed;           /* Fixo no topo da tela */
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  z-index: 1000;             /* Camada 1000 - ver índice */
  box-shadow: var(--shadow-md);
}

.header-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 26px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  transition: var(--transition);
}
.header-btn:active {
  opacity: 0.7;
  transform: scale(0.9);
}

.header-logo {
  height: 40px;
  width: auto;
  object-fit: contain;       /* Mantém proporção da imagem */
}

.header-title {
  font-size: 18px;
  font-weight: bold;
  color: white;
}

/* Menu Overlay (fundo escuro ao abrir menu) */
.menu-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 2000;
  display: none;
}

/* Menu Suspenso */
.menu-suspenso {
  position: fixed;
  top: 70px;
  left: 10px;
  width: 280px;
  max-height: 80vh;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 2500;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.menu-header {
  background: var(--bg-highlight);
  padding: 15px;
  text-align: center;
  border-bottom: 1px solid var(--border-light);
}
.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
}
.menu-list li {
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: var(--transition);
}
.menu-list li:hover {
  background: var(--bg-highlight);
}

/* Header da Página de Perfil */
.profile-header {
  background: var(--primary);
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  border-bottom: 1px solid var(--border-light);
  position: fixed;
  top: 0;
  z-index: 100;
}
.profile-header .btn-back {
  font-size: 26px;
  color: var(--primary);
  background: none;
  border: none;
  cursor: pointer;
}
.profile-header .header-title {
  flex: 1;
  color: var(--text-main);
}

/* ============================================
   10. ⏳ LOADERS E SPINNERS
   ============================================ */
.page-loader {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg-body);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  gap: 15px;
}
.page-loader i {
  font-size: 50px;
  color: var(--accent);
}
.loader-text {
  font-size: 16px;
  font-weight: bold;
  color: var(--accent);
}
.loader-inline {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--text-light);
  gap: 10px;
}

/* ============ RECEIPT MODAL (cupom fiscal) ============ */
/* Usado em: modalResumo (motorista), modalFinalizada (passageiro).
   Inspirado no modal-res do taxímetro. Reutilizável pra histórico/admin. */
.receipt-card {
  background: #fff;
  width: 85%;
  max-width: 330px;
  border-radius: 20px;
  text-align: center;
  padding: 22px 18px;
  animation: receiptPop 0.3s ease;
  box-shadow: 0 15px 35px rgba(0,0,0,0.5);
}
@keyframes receiptPop {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.receipt-icon {
  font-size: 45px;
  color: var(--success);
  display: block;
}
.receipt-title {
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 12px;
  color: var(--text-main);
}
.receipt-value {
  font-size: 38px;
  font-weight: 900;
  color: var(--accent);
  margin: 8px 0;
  letter-spacing: -1px;
}
.receipt-details {
  color: #888;
  font-size: 12px;
  line-height: 1.5;
  margin: 8px 0;
}
.receipt-details b { color: #555; }
.receipt-actions {
  margin-top: 18px;
  display: flex;
  gap: 10px;
}
.receipt-btn {
  flex: 1;
  padding: 14px;
  border-radius: 12px;
  border: none;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s;
}
.receipt-btn:active { transform: scale(0.98); }
.receipt-btn-primary { background: var(--success); color: #fff; }
.receipt-btn-secondary { background: #eee; color: #555; }

/* Versão no rodapé do menu lateral (Fase 4g) */
.menu-version {
  display: block !important;
  width: 100% !important;
  align-self: stretch !important;
  text-align: center !important;
  font-size: 10px !important;
  color: rgba(255, 106, 0, 0.65) !important;
  padding: 10px 8px !important;
  border-top: 1px solid #f0f0f0 !important;
  flex-shrink: 0 !important;
  letter-spacing: 0.3px;
  font-weight: 500;
}

/* ============================================
   BANNER "CADASTRO EM ANÁLISE" (Fase 10)
   Home de user com aprovado !== true.
   Motorista: persistente. Passageiro: dismissable (sessionStorage).
   ============================================ */
.banner-cadastro {
  position: fixed;
  top: 80px;
  left: 12px;
  right: 12px;
  z-index: 900;  /* abaixo do sidebar (2000+); top-card desce via body.tem-banner-cadastro */
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: #fff;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.35;
  box-shadow: 0 2px 8px rgba(255, 106, 0, 0.4);
}
.banner-cadastro span {
  flex: 1;
  min-width: 0;
}
.banner-cadastro-btn {
  background: #fff;
  color: var(--accent);
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.banner-cadastro-btn:active { opacity: 0.8; }
.banner-cadastro-x {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  flex-shrink: 0;
}

/* ============================================================
   Pin GPS — target pulsante (padronizado 2026-11-05)
   Usado em mapas do motorista e passageiro pra indicar "você está aqui".
   ============================================================ */
.pin-target {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  color: var(--accent);
  border: 3px solid var(--accent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  font-size: 16px;
  animation: pin-target-pulse 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pin-target-pulse {
  0%   { box-shadow: 0 2px 8px rgba(0,0,0,0.25), 0 0 0 0 rgba(255,106,0,0.7); }
  70%  { box-shadow: 0 2px 8px rgba(0,0,0,0.25), 0 0 0 12px rgba(255,106,0,0); }
  100% { box-shadow: 0 2px 8px rgba(0,0,0,0.25), 0 0 0 0 rgba(255,106,0,0); }
}