/* ============================================
   VIVAMOB — MVP de Plataforma para Motoristas
   Folha de estilos principal
   ============================================ */

/* ---- RESET & BASE ---- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
  --primary: #10B981;
  --primary-dark: #059669;
  --primary-light: #D1FAE5;
  --accent: #F59E0B;
  --danger: #EF4444;
  --danger-light: #FEE2E2;
  --bg: #F3F4F6;
  --bg-card: #FFFFFF;
  --text: #111827;
  --text-secondary: #6B7280;
  --text-muted: #9CA3AF;
  --border: #E5E7EB;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.03);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 10px 10px -5px rgba(0,0,0,0.02);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --transition: 0.25s cubic-bezier(0.4,0,0.2,1);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
html { font-size:16px; -webkit-tap-highlight-color:transparent; }
body {
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  line-height:1.5;
}

/* ---- LOADING OVERLAY ---- */
.loading-overlay {
  position:fixed; inset:0; z-index:9999;
  background:var(--bg-card);
  display:flex; align-items:center; justify-content:center;
  transition:opacity 0.5s ease, visibility 0.5s ease;
}
.loading-overlay.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.loading-content { text-align:center; }
.logo-pulse { animation:pulse 1.5s ease-in-out infinite; margin-bottom:16px; }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
.loading-text { font-size:1.5rem; font-weight:700; color:var(--primary); margin-bottom:16px; }
.loading-bar { width:160px; height:4px; background:var(--border); border-radius:2px; overflow:hidden; margin:0 auto; }
.loading-bar-fill { height:100%; width:0%; background:var(--primary); border-radius:2px; animation:loadBar 1.2s ease forwards; }
@keyframes loadBar { to { width:100%; } }

/* ---- TOAST ---- */
.toast-container { position:fixed; top:20px; right:20px; z-index:10000; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast {
  background:var(--bg-card); color:var(--text); padding:14px 20px; border-radius:var(--radius);
  box-shadow:var(--shadow-lg); font-size:0.9rem; font-weight:500;
  display:flex; align-items:center; gap:10px; min-width:280px; max-width:360px;
  transform:translateX(120%); animation:toastIn 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards;
  pointer-events:auto; border-left:4px solid var(--primary);
}
.toast.success { border-left-color:var(--primary); }
.toast.error { border-left-color:var(--danger); }
.toast.info { border-left-color:#3B82F6; }
.toast.warning { border-left-color:var(--accent); }
@keyframes toastIn { to { transform:translateX(0); } }
@keyframes toastOut { to { transform:translateX(120%); opacity:0; } }

/* ---- MODAL ---- */
.modal-overlay { position:fixed; inset:0; z-index:9998; background:rgba(0,0,0,0.45);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; visibility:hidden; transition:opacity 0.25s ease, visibility 0.25s ease; }
.modal-overlay.visible { opacity:1; visibility:visible; }
.modal-card { background:var(--bg-card); border-radius:var(--radius-lg); width:100%; max-width:420px;
  box-shadow:var(--shadow-xl); transform:scale(0.92) translateY(10px); transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1); }
.modal-overlay.visible .modal-card { transform:scale(1) translateY(0); }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:20px 20px 0; }
.modal-header h3 { font-size:1.1rem; font-weight:600; }
.modal-close { background:none; border:none; font-size:1.5rem; color:var(--text-muted); cursor:pointer; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:background 0.2s; }
.modal-close:hover { background:var(--bg); }
.modal-body { padding:16px 20px 20px; font-size:0.95rem; color:var(--text-secondary); line-height:1.6; }
.modal-footer { padding:0 20px 20px; display:flex; gap:10px; }
.modal-footer .btn { flex:1; }

/* ---- SCREEN SYSTEM ---- */
.screen { position:fixed; inset:0; z-index:10; background:var(--bg); display:none; overflow-y:auto; }
.screen.active { display:block; animation:screenIn 0.35s ease; }
@keyframes screenIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }

/* ============================================
   LANDING PAGE
   ============================================ */
.screen-landing { display:none; }
.screen-landing.active { display:flex; flex-direction:column; }
.landing-bg { position:absolute; inset:0; overflow:hidden; }
.landing-gradient { position:absolute; inset:0; background:linear-gradient(135deg, #10B981 0%, #059669 50%, #047857 100%); }
.landing-pattern { position:absolute; inset:0; opacity:0.08;
  background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0); background-size:24px 24px; }
.landing-content { position:relative; z-index:2; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 24px; text-align:center; color:white; }
.landing-logo { margin-bottom:48px; }
.landing-logo svg { filter:drop-shadow(0 8px 24px rgba(0,0,0,0.2)); }
.landing-title { font-size:2.2rem; font-weight:800; margin-top:20px; letter-spacing:-0.5px; }
.landing-subtitle { font-size:1rem; font-weight:400; opacity:0.85; margin-top:6px; }
.landing-actions { width:100%; max-width:320px; display:flex; flex-direction:column; gap:12px; }
.landing-footer { margin-top:auto; padding-top:40px; font-size:0.75rem; opacity:0.5; }

/* ---- BUTTONS ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px;
  border:none; border-radius:var(--radius); font-family:inherit; font-size:0.95rem; font-weight:600;
  cursor:pointer; transition:all var(--transition); text-decoration:none; line-height:1.4; }
.btn-primary { background:var(--primary); color:white; box-shadow:0 4px 14px rgba(16,185,129,0.35); }
.btn-primary:hover { background:var(--primary-dark); transform:translateY(-1px); box-shadow:0 6px 20px rgba(16,185,129,0.4); }
.btn-primary:active { transform:translateY(0); }
.btn-outline { background:rgba(255,255,255,0.12); color:white; border:1px solid rgba(255,255,255,0.3); }
.btn-outline:hover { background:rgba(255,255,255,0.2); }
.btn-outline.btn-dark { background:transparent; color:var(--text); border:1.5px solid var(--border); }
.btn-outline.btn-dark:hover { background:var(--bg); }
.btn-lg { padding:16px 24px; font-size:1rem; border-radius:var(--radius-lg); }
.btn-full { width:100%; }
.btn-text { background:none; color:var(--text-secondary); font-weight:500; padding:8px; }
.btn-text:hover { color:var(--text); }
.btn-icon { font-size:1.1rem; }

/* ============================================
   AUTH SCREENS (Cadastro / Login)
   ============================================ */
.auth-header { display:flex; align-items:center; padding:16px 20px; gap:12px; position:sticky; top:0; background:var(--bg); z-index:5; }
.btn-icon-back { width:40px; height:40px; border-radius:50%; border:none; background:var(--bg-card); color:var(--text); font-size:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); transition:background 0.2s; }
.btn-icon-back:hover { background:var(--border); }
.auth-spacer { width:40px; }
.auth-body { max-width:420px; margin:0 auto; padding:20px 24px 40px; }
.auth-title { font-size:1.5rem; font-weight:700; margin-bottom:4px; }
.auth-desc { color:var(--text-secondary); font-size:0.9rem; margin-bottom:28px; }
.auth-form { display:flex; flex-direction:column; gap:18px; }
.auth-actions { display:flex; flex-direction:column; gap:12px; margin-top:24px; }

/* ---- Progress Steps ---- */
.progress-steps { flex:1; display:flex; align-items:center; justify-content:center; gap:4px; max-width:200px; }
.step { width:28px; height:28px; border-radius:50%; background:var(--border); color:var(--text-muted); font-size:0.75rem; font-weight:700; display:flex; align-items:center; justify-content:center; transition:all 0.3s ease; flex-shrink:0; }
.step.active { background:var(--primary); color:white; box-shadow:0 0 0 4px var(--primary-light); }
.step.completed { background:var(--primary); color:white; }
.step-line { flex:1; height:3px; background:var(--border); border-radius:2px; max-width:40px; transition:background 0.3s ease; }
.step-line.active { background:var(--primary); }

/* ---- Form Elements ---- */
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group label { font-size:0.85rem; font-weight:600; color:var(--text-secondary); }
.form-input { width:100%; padding:14px 16px; border:1.5px solid var(--border); border-radius:var(--radius); font-family:inherit; font-size:0.95rem; background:var(--bg-card); color:var(--text); transition:border-color 0.2s, box-shadow 0.2s; outline:none; }
.form-input:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light); }
.form-input.error { border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-light); }
.form-error { font-size:0.8rem; color:var(--danger); min-height:18px; display:block; }
.input-password-wrap { position:relative; }
.input-password-wrap .form-input { padding-right:48px; }
.btn-toggle-password { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; font-size:1.1rem; cursor:pointer; opacity:0.5; transition:opacity 0.2s; }
.btn-toggle-password:hover { opacity:0.8; }

/* ---- Confirmation Card ---- */
.confirm-card { background:var(--bg-card); border-radius:var(--radius); padding:18px; margin-bottom:14px; box-shadow:var(--shadow-sm); border:1px solid var(--border); }
.confirm-card h4 { font-size:0.9rem; font-weight:600; color:var(--text-secondary); margin-bottom:12px; display:flex; align-items:center; gap:6px; }
.confirm-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); font-size:0.9rem; }
.confirm-row:last-child { border-bottom:none; }
.confirm-row span { color:var(--text-secondary); }
.confirm-row strong { color:var(--text); font-weight:600; }

/* ---- Success Screen ---- */
.success-body { max-width:420px; margin:0 auto; padding:60px 24px 40px; text-align:center; }
.success-anim { margin-bottom:24px; }
.success-circle { width:72px; height:72px; background:var(--primary); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto;
  animation:successPop 0.5s cubic-bezier(0.34,1.56,0.64,1); box-shadow:0 8px 24px rgba(16,185,129,0.35); }
@keyframes successPop { from { transform:scale(0); } to { transform:scale(1); } }
.success-title { font-size:1.4rem; font-weight:700; margin-bottom:24px; }
.success-details { background:var(--bg-card); border-radius:var(--radius); padding:16px; margin-bottom:24px; text-align:left; box-shadow:var(--shadow-sm); border:1px solid var(--border); }
.success-row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border); font-size:0.9rem; }
.success-row:last-child { border-bottom:none; }
.success-row span { color:var(--text-secondary); }
.success-row strong { color:var(--text); font-weight:600; }
.badge { display:inline-block; padding:4px 10px; border-radius:20px; font-size:0.75rem; font-weight:600; }
.badge-success { background:var(--primary-light); color:var(--primary-dark); }
.demo-payment-box { background:linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%); border-radius:var(--radius-lg); padding:24px; border:2px dashed var(--accent); }
.demo-payment-box .demo-badge { display:inline-block; background:var(--accent); color:white; font-size:0.65rem; font-weight:700; padding:3px 10px; border-radius:20px; margin-bottom:12px; letter-spacing:0.5px; }
.demo-payment-box h4 { font-size:1rem; margin-bottom:8px; }
.demo-payment-box p { font-size:0.85rem; color:var(--text-secondary); margin-bottom:16px; }

/* ---- Login Logo ---- */
.login-logo { text-align:center; margin-bottom:32px; }

/* ============================================
   DASHBOARD LAYOUT
   ============================================ */
.screen-dashboard { display:none; flex-direction:column; background:var(--bg); }
.screen-dashboard.active { display:flex; }

/* ---- Header ---- */
.dash-header { background:var(--bg-card); padding:12px 16px; display:flex; align-items:center; justify-content:space-between;
  box-shadow:var(--shadow-sm); position:sticky; top:0; z-index:20; }
.dash-header-left { display:flex; align-items:center; gap:12px; }
.btn-menu-toggle { width:40px; height:40px; border:none; background:none; font-size:1.4rem; cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); transition:background 0.2s; }
.btn-menu-toggle:hover { background:var(--bg); }
.dash-greeting { font-size:0.85rem; color:var(--text-secondary); margin:0; }
.dash-greeting strong { color:var(--text); font-weight:700; }
.dash-status { display:flex; align-items:center; gap:6px; font-size:0.75rem; color:var(--primary); font-weight:600; margin-top:2px; }
.status-dot { width:8px; height:8px; background:var(--primary); border-radius:50%; animation:blink 2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.4} }
.dash-header-right { display:flex; align-items:center; gap:10px; }
.btn-icon-notif { width:40px; height:40px; border:none; background:none; font-size:1.3rem; cursor:pointer; border-radius:50%; transition:background 0.2s; }
.btn-icon-notif:hover { background:var(--bg); }
.dash-avatar { width:36px; height:36px; border-radius:50%; background:var(--primary); color:white; font-weight:700; font-size:0.85rem; display:flex; align-items:center; justify-content:center; }

/* ---- Sidebar (Desktop) ---- */
.sidebar { position:fixed; left:0; top:0; bottom:0; width:260px; background:var(--bg-card); border-right:1px solid var(--border);
  display:flex; flex-direction:column; z-index:30; transform:translateX(-100%); transition:transform 0.3s cubic-bezier(0.4,0,0.2,1); }
.sidebar.open { transform:translateX(0); }
.sidebar-brand { display:flex; align-items:center; gap:12px; padding:20px 24px; border-bottom:1px solid var(--border); }
.sidebar-brand span { font-size:1.2rem; font-weight:800; color:var(--primary); }
.sidebar-nav { flex:1; padding:12px 12px; display:flex; flex-direction:column; gap:2px; overflow-y:auto; }
.nav-item { display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:var(--radius-sm); color:var(--text-secondary); text-decoration:none; font-size:0.9rem; font-weight:500; transition:all 0.2s; cursor:pointer; border:none; background:none; width:100%; text-align:left; }
.nav-item:hover { background:var(--bg); color:var(--text); }
.nav-item.active { background:var(--primary-light); color:var(--primary-dark); font-weight:600; }
.nav-icon { font-size:1.2rem; width:24px; text-align:center; }
.sidebar-footer { padding:12px; border-top:1px solid var(--border); }
.nav-logout { color:var(--danger); }
.nav-logout:hover { background:var(--danger-light); }
.sidebar-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.35); z-index:25; opacity:0; visibility:hidden; transition:all 0.3s; }
.sidebar-overlay.visible { opacity:1; visibility:visible; }

/* ---- Main Content ---- */
.dash-main { flex:1; padding:16px; overflow-y:auto; padding-bottom:80px; }
.page { display:none; animation:pageFade 0.3s ease; }
.page.active { display:block; }
@keyframes pageFade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.page-title { font-size:1.25rem; font-weight:700; margin-bottom:4px; }
.page-desc { color:var(--text-secondary); font-size:0.9rem; margin-bottom:20px; }

/* ---- Dashboard Cards ---- */
.dash-cards { display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin-bottom:20px; }
.dash-card { background:var(--bg-card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow-sm); border:1px solid var(--border); cursor:pointer; transition:all 0.2s; }
.dash-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.dash-card-icon { font-size:1.6rem; margin-bottom:8px; }
.dash-card-label { font-size:0.75rem; color:var(--text-secondary); display:block; margin-bottom:4px; }
.dash-card-value { font-size:1.1rem; font-weight:700; color:var(--text); display:block; }

/* ---- Quick Actions ---- */
.dash-section { margin-bottom:24px; }
.dash-section-title { font-size:1rem; font-weight:600; margin-bottom:12px; }
.quick-actions { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
.quick-action { background:var(--bg-card); border:1.5px solid var(--border); border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; transition:all 0.2s; font-family:inherit; font-size:0.85rem; font-weight:500; color:var(--text); }
.quick-action:hover { border-color:var(--primary); background:var(--primary-light); }
.quick-action-icon { font-size:1.6rem; }

/* ---- Bottom Nav (Mobile) ---- */
.bottom-nav { position:fixed; bottom:0; left:0; right:0; background:var(--bg-card); border-top:1px solid var(--border); display:flex; justify-content:space-around; padding:6px 0 8px; z-index:20; }
.bottom-nav-item { display:flex; flex-direction:column; align-items:center; gap:2px; text-decoration:none; color:var(--text-muted); font-size:0.65rem; font-weight:500; padding:4px 8px; border-radius:var(--radius-sm); transition:all 0.2s; flex:1; }
.bottom-nav-item.active { color:var(--primary); }
.bottom-nav-icon { font-size:1.3rem; }

/* ============================================
   CORRIDAS
   ============================================ */
.rides-empty { text-align:center; padding:48px 20px; }
.empty-illustration { font-size:4rem; margin-bottom:16px; opacity:0.4; }
.rides-empty h3 { font-size:1rem; color:var(--text-secondary); font-weight:600; margin-bottom:6px; }
.rides-empty p { font-size:0.85rem; color:var(--text-muted); }
.rides-list { display:flex; flex-direction:column; gap:12px; }
.ride-card { background:var(--bg-card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow-sm); border:1px solid var(--border); }
.ride-card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.ride-passenger { font-weight:600; font-size:0.95rem; }
.ride-status { font-size:0.7rem; font-weight:700; padding:3px 10px; border-radius:20px; }
.ride-status.pending { background:#FEF3C7; color:#B45309; }
.ride-status.accepted { background:var(--primary-light); color:var(--primary-dark); }
.ride-status.completed { background:#DBEAFE; color:#1D4ED8; }
.ride-status.cancelled { background:var(--danger-light); color:var(--danger); }
.ride-info-row { display:flex; align-items:center; gap:8px; padding:6px 0; font-size:0.85rem; color:var(--text-secondary); }
.ride-info-row strong { color:var(--text); margin-left:auto; }
.ride-actions { display:flex; gap:10px; margin-top:14px; }
.ride-actions .btn { flex:1; font-size:0.85rem; padding:10px; }
.demo-section { background:var(--bg-card); border-radius:var(--radius); padding:20px; margin-top:20px; border:2px dashed var(--border); text-align:center; }
.demo-badge-inline { display:inline-block; background:var(--accent); color:white; font-size:0.6rem; font-weight:700; padding:3px 10px; border-radius:20px; margin-bottom:10px; letter-spacing:0.5px; }
.demo-section h4 { font-size:0.95rem; margin-bottom:6px; }
.demo-section p { font-size:0.85rem; color:var(--text-secondary); margin-bottom:14px; }

/* ============================================
   MAPA DEMONSTRATIVO
   ============================================ */
.map-demo-badge { position:absolute; top:60px; left:12px; z-index:10; background:rgba(0,0,0,0.7); color:white; font-size:0.65rem; font-weight:600; padding:4px 10px; border-radius:20px; backdrop-filter:blur(4px); }
.map-container { position:relative; width:100%; height:calc(100vh - 180px); min-height:400px; border-radius:var(--radius); overflow:hidden; background:#E8F5E9; border:1px solid var(--border); }
.map-canvas { position:relative; width:100%; height:100%; overflow:hidden; transition:transform 0.3s ease; transform-origin:center; }
.map-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px); background-size:40px 40px; }
.map-roads { position:absolute; inset:0; }
.road { position:absolute; background:#CBD5E1; border-radius:4px; }
.road-h { left:0; right:0; height:12px; }
.road-v { top:0; bottom:0; width:12px; }
.map-areas { position:absolute; inset:0; }
.map-area { position:absolute; background:rgba(255,255,255,0.7); padding:4px 10px; border-radius:20px; font-size:0.7rem; font-weight:600; color:var(--text-secondary); backdrop-filter:blur(2px); box-shadow:var(--shadow-sm); }
.map-marker { position:absolute; display:flex; flex-direction:column; align-items:center; gap:4px; transform:translate(-50%, -100%); transition:all 0.5s ease; }
.marker-pulse { position:absolute; width:40px; height:40px; background:rgba(16,185,129,0.3); border-radius:50%; animation:pulseRing 2s ease-in-out infinite; }
@keyframes pulseRing { 0%,100%{transform:scale(1);opacity:0.6} 50%{transform:scale(1.6);opacity:0} }
.marker-icon { width:36px; height:36px; background:var(--primary); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1rem; box-shadow:var(--shadow); position:relative; z-index:2; }
.marker-icon.pickup { background:#3B82F6; }
.marker-icon.dest { background:var(--accent); }
.marker-label { font-size:0.65rem; font-weight:600; color:var(--text); background:rgba(255,255,255,0.9); padding:2px 8px; border-radius:10px; white-space:nowrap; box-shadow:var(--shadow-sm); }
.driver-marker { left:50%; top:50%; }
.map-route { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.map-controls { position:absolute; right:12px; top:12px; display:flex; flex-direction:column; gap:6px; z-index:5; }
.map-btn { width:40px; height:40px; background:var(--bg-card); border:none; border-radius:var(--radius-sm); font-size:1.2rem; font-weight:700; cursor:pointer; box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; transition:background 0.2s; }
.map-btn:hover { background:var(--bg); }
.map-panel { background:var(--bg-card); border-radius:var(--radius-lg) var(--radius-lg) 0 0; padding:16px 20px; margin-top:-20px; position:relative; z-index:5; box-shadow:0 -4px 20px rgba(0,0,0,0.05); }
.map-panel-hint { font-size:0.85rem; color:var(--text-secondary); text-align:center; }
.map-ride-info { display:flex; flex-direction:column; gap:8px; }
.map-ride-row { display:flex; justify-content:space-between; font-size:0.9rem; }
.map-ride-row strong { color:var(--text); }

/* ============================================
   CARTEIRA
   ============================================ */
.wallet-balance-card { background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); border-radius:var(--radius-lg); padding:24px; color:white; margin-bottom:20px; box-shadow:0 8px 24px rgba(16,185,129,0.25); }
.wallet-label { font-size:0.85rem; opacity:0.85; display:block; margin-bottom:4px; }
.wallet-amount { font-size:2rem; font-weight:800; display:block; margin-bottom:16px; }
.wallet-actions { display:flex; gap:10px; }
.wallet-btn { flex:1; background:rgba(255,255,255,0.15); border:none; border-radius:var(--radius); padding:10px; color:white; font-family:inherit; font-size:0.8rem; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; transition:background 0.2s; }
.wallet-btn:hover { background:rgba(255,255,255,0.25); }
.wallet-cards { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; margin-bottom:20px; }
.wallet-stat-card { background:var(--bg-card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow-sm); border:1px solid var(--border); text-align:center; }
.wallet-stat-label { font-size:0.75rem; color:var(--text-secondary); display:block; margin-bottom:4px; }
.wallet-stat-card strong { font-size:1.1rem; font-weight:700; color:var(--text); }
.wallet-history { margin-top:20px; }
.history-empty { text-align:center; padding:32px; color:var(--text-muted); font-size:0.9rem; }
.history-list { display:flex; flex-direction:column; gap:8px; }
.history-item { background:var(--bg-card); border-radius:var(--radius); padding:14px 16px; display:flex; align-items:center; justify-content:space-between; box-shadow:var(--shadow-sm); border:1px solid var(--border); }
.history-item-info { display:flex; flex-direction:column; }
.history-item-title { font-size:0.9rem; font-weight:600; }
.history-item-date { font-size:0.75rem; color:var(--text-muted); }
.history-item-amount { font-size:0.95rem; font-weight:700; }
.history-item-amount.positive { color:var(--primary); }
.history-item-amount.negative { color:var(--danger); }

/* ============================================
   VALE COMBUSTÍVEL
   ============================================ */
.fuel-card { background:var(--bg-card); border-radius:var(--radius-lg); padding:24px; text-align:center; box-shadow:var(--shadow-sm); border:1px solid var(--border); margin-bottom:20px; }
.fuel-label { font-size:0.85rem; color:var(--text-secondary); display:block; margin-bottom:8px; }
.fuel-amount { font-size:2rem; font-weight:800; color:var(--text); display:block; margin-bottom:20px; }
.fuel-empty { text-align:center; padding:24px; color:var(--text-muted); font-size:0.9rem; }
.fuel-list { display:flex; flex-direction:column; gap:8px; }
.fuel-request-item { background:var(--bg-card); border-radius:var(--radius); padding:14px 16px; display:flex; align-items:center; justify-content:space-between; box-shadow:var(--shadow-sm); border:1px solid var(--border); }
.fuel-request-status { font-size:0.75rem; font-weight:600; padding:3px 10px; border-radius:20px; background:var(--primary-light); color:var(--primary-dark); }

/* ============================================
   PERFIL
   ============================================ */
.profile-card { background:var(--bg-card); border-radius:var(--radius-lg); padding:28px 20px; text-align:center; box-shadow:var(--shadow-sm); border:1px solid var(--border); margin-bottom:20px; }
.profile-avatar { width:72px; height:72px; border-radius:50%; background:var(--primary); color:white; font-size:1.5rem; font-weight:700; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; }
.profile-name { font-size:1.1rem; font-weight:700; margin-bottom:4px; }
.profile-id { font-size:0.8rem; color:var(--text-muted); }
.profile-info { background:var(--bg-card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow-sm); border:1px solid var(--border); margin-bottom:20px; }
.info-row { display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--border); font-size:0.9rem; }
.info-row:last-child { border-bottom:none; }
.info-row span { color:var(--text-secondary); }
.info-row strong { color:var(--text); font-weight:600; }

/* ============================================
   CONFIGURAÇÕES
   ============================================ */
.settings-group { background:var(--bg-card); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow-sm); border:1px solid var(--border); margin-bottom:16px; }
.settings-group h4 { font-size:0.85rem; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:12px; }
.setting-item { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--border); font-size:0.9rem; }
.setting-item:last-child { border-bottom:none; }
.setting-value { color:var(--text-muted); font-size:0.85rem; }
.setting-btn { width:100%; text-align:left; padding:12px 0; background:none; border:none; border-bottom:1px solid var(--border); font-family:inherit; font-size:0.9rem; color:var(--text); cursor:pointer; display:flex; align-items:center; gap:10px; transition:color 0.2s; }
.setting-btn:last-child { border-bottom:none; }
.setting-btn:hover { color:var(--primary); }
.setting-danger { color:var(--danger); }
.setting-danger:hover { color:#B91C1C; }

/* ---- Toggle Switch ---- */
.toggle { position:relative; width:48px; height:28px; display:inline-block; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; background:var(--border); border-radius:28px; cursor:pointer; transition:background 0.3s; }
.toggle-slider::before { content:''; position:absolute; left:3px; top:3px; width:22px; height:22px; background:white; border-radius:50%; transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1); box-shadow:var(--shadow-sm); }
.toggle input:checked + .toggle-slider { background:var(--primary); }
.toggle input:checked + .toggle-slider::before { transform:translateX(20px); }

/* ============================================
   RESPONSIVO — DESKTOP
   ============================================ */
@media (min-width: 768px) {
  .screen-landing.active { flex-direction:row; }
  .landing-content { padding:60px; max-width:520px; margin:0 auto; }
  .landing-title { font-size:2.8rem; }
  .landing-subtitle { font-size:1.1rem; }

  .auth-body { padding:40px 24px; }

  .sidebar { transform:translateX(0); position:relative; width:240px; flex-shrink:0; }
  .btn-menu-toggle { display:none; }
  .sidebar-overlay { display:none !important; }
  .screen-dashboard { flex-direction:row; }
  .dash-header { position:relative; padding:16px 24px; }
  .dash-main { padding:24px; padding-bottom:24px; }
  .bottom-nav { display:none; }

  .dash-cards { grid-template-columns:repeat(4, 1fr); }
  .quick-actions { grid-template-columns:repeat(4, 1fr); }
  .wallet-cards { grid-template-columns:repeat(4, 1fr); }

  .map-container { height:calc(100vh - 200px); }
}

/* ============================================
   UTILITÁRIOS
   ============================================ */
.hidden { display:none !important; }
.text-center { text-align:center; }
.mt-1 { margin-top:4px; }
.mt-2 { margin-top:8px; }
.mt-3 { margin-top:12px; }
.mt-4 { margin-top:16px; }
.mb-1 { margin-bottom:4px; }
.mb-2 { margin-bottom:8px; }
.mb-3 { margin-bottom:12px; }
.mb-4 { margin-bottom:16px; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }

/* ---- Dark Mode (classe adicionada via JS) ---- */
body.dark-mode {
  --bg: #0F172A;
  --bg-card: #1E293B;
  --text: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --border: #334155;
  --primary-light: rgba(16,185,129,0.15);
  --danger-light: rgba(239,68,68,0.15);
}
body.dark-mode .form-input { background:#0F172A; }
body.dark-mode .map-container { background:#1a2f1a; }