@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
    :root { --primary: #1E73FF; --primary-dark: #1656cc; --dark-bg: #0a0e27; --dark-border: #1e2749; }
    * { font-family: 'Inter', sans-serif; }
    body {
  background: var(--dark-bg);
  color: #e2e8f0;
  overflow-x: hidden;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}
    /* ESTILO GLASSMorphism (TELA DE LOGIN) */
    .glass { background: rgba(21, 25, 53, 0.75); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); }
    
    .btn-primary { background: var(--primary); transition: all 0.2s ease; } 
    .btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); }
    .fade-in { animation: fadeIn 0.4s ease forwards; } 
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    
    .sidebar-item {
      color: rgba(226, 232, 240, 0.9);
    }
    .sidebar-item i,
    .sidebar-item span {
      color: inherit;
    }
    .sidebar-item:hover, .sidebar-item.active { background: rgba(30, 115, 255, 0.1); border-left: 3px solid var(--primary); color: var(--primary); }
    ::-webkit-scrollbar { width: 6px; height: 6px; } 
    ::-webkit-scrollbar-thumb { background: var(--dark-border); border-radius: 4px; }
    .vrum-security-seal {
      position: fixed;
      left: 50%;
      bottom: calc(.7rem + env(safe-area-inset-bottom));
      transform: translateX(-50%);
      z-index: 35;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .35rem;
      padding: .34rem .72rem;
      border-radius: 999px;
      color: rgba(209, 250, 229, .95);
      background: rgba(5, 150, 105, .12);
      border: 1px solid rgba(16, 185, 129, .28);
      box-shadow: 0 8px 24px rgba(0,0,0,.18);
      backdrop-filter: blur(10px);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .01em;
      pointer-events: none;
      user-select: none;
    }
    .vrum-security-seal i { color: #34d399; font-size: .78rem; }
    html[data-vrum-pdf-mode] .vrum-security-seal { display: none !important; }
    @media (max-width: 420px) {
      .vrum-security-seal { font-size: .68rem; padding: .3rem .62rem; }
    }
    
    .logo-glow { filter: drop-shadow(0 0 20px rgba(30, 115, 255, 0.3)); }
    input[type="file"] { display: none; }

    .app-menu-button {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.14);
      box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
      color: rgba(255, 255, 255, 0.96);
    }
    .app-menu-button i {
      color: #fff;
      opacity: 0.96;
    }
    .vrum-oficina-logo {
      width: 56px !important;
      height: 56px !important;
      min-width: 56px !important;
      min-height: 56px !important;
      display: block;
      background: rgba(30, 115, 255, 0.12);
    }

#publicCheckoutScreen { overscroll-behavior: contain; }
  #areaAgendamentoVisitante { width: 100%; }
  #areaAgendamentoVisitante .vrum-lista-orcamento-visitante { max-height: 18rem; overflow-y: auto; padding-right: .25rem; }
  html, body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
  }
  body {
    touch-action: auto !important;
    overscroll-behavior-y: contain;
  }
  #appScreen {
    height: 100vh;
    max-height: 100vh;
    min-height: 0;
    overflow: hidden;
  }
  #appScreen main {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  #mainContentArea {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y !important;
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
  }
  #mainContentArea > .view:not(.hidden) {
    min-height: max-content;
    overflow: visible;
  }
  #sidebar,
  #authScreen,
  #publicCheckoutScreen,
  #listaNotificacoes,
  #osModalContainer,
  #osModalContent,
  .overflow-y-auto {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y !important;
  }
  @supports (height: 100dvh) {
    #appScreen {
      height: 100dvh;
      max-height: 100dvh;
    }
  }
  @media (max-height: 720px) {
    #publicCheckoutScreen > div { margin-top: 0.5rem; margin-bottom: 1.5rem; }
    #areaAgendamentoVisitante .vrum-lista-orcamento-visitante { max-height: 13rem; }
  }
  #appScreen.vrum-solicitar-scroll-active,
  #appScreen.vrum-solicitar-scroll-active main,
  #appScreen.vrum-solicitar-scroll-active #mainContentArea {
    min-height: 0;
  }
  #appScreen.vrum-solicitar-scroll-active {
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
  }
  #appScreen.vrum-solicitar-scroll-active main {
    height: 100vh;
    max-height: 100vh;
  }
  #appScreen.vrum-solicitar-scroll-active #mainContentArea {
    height: calc(100vh - 74px);
    max-height: calc(100vh - 74px);
    overflow-y: scroll !important;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y !important;
    padding-bottom: calc(5rem + env(safe-area-inset-bottom));
  }
  #appScreen.vrum-solicitar-scroll-active #view-cliente-solicitar,
  #appScreen.vrum-solicitar-scroll-active #view-cliente-solicitar > div {
    min-height: max-content;
    overflow: visible;
  }
  @supports (height: 100dvh) {
    #appScreen.vrum-solicitar-scroll-active,
    #appScreen.vrum-solicitar-scroll-active main {
      height: 100dvh;
      max-height: 100dvh;
    }
    #appScreen.vrum-solicitar-scroll-active #mainContentArea {
      height: calc(100dvh - 74px);
      max-height: calc(100dvh - 74px);
    }
  }

:root {
    --vrum-native-status-top: env(safe-area-inset-top, 0px);
    --vrum-native-nav-bottom: env(safe-area-inset-bottom, 0px);
    --vrum-native-keyboard-bottom: 0px;
  }
  html.vrum-android-apk,
  html.vrum-android-apk body {
    background: #0a0e27;
  }
  html.vrum-android-apk #appScreen:not(.hidden) {
    padding-top: 0px !important;
    box-sizing: border-box !important;
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 100vh !important;
  }
  @supports (height: 100dvh) {
    html.vrum-android-apk #appScreen:not(.hidden) {
      height: 100dvh !important;
      max-height: 100dvh !important;
      min-height: 100dvh !important;
    }
  }
  html.vrum-android-apk.vrum-native-edge-to-edge #appScreen:not(.hidden) > main > header {
    padding-top: max(1rem, var(--vrum-native-status-top)) !important;
  }
  html.vrum-android-apk #authScreen,
  html.vrum-android-apk #publicCheckoutScreen {
    padding-top: calc(1rem + var(--vrum-native-status-top)) !important;
    box-sizing: border-box !important;
  }
  html.vrum-android-apk.vrum-keyboard-open #authScreen,
  html.vrum-android-apk.vrum-keyboard-open #publicCheckoutScreen {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    height: calc(100vh - var(--vrum-native-keyboard-bottom)) !important;
    max-height: calc(100vh - var(--vrum-native-keyboard-bottom)) !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding-bottom: calc(1.5rem + var(--vrum-native-nav-bottom)) !important;
    -webkit-overflow-scrolling: touch !important;
  }
  html.vrum-android-apk.vrum-keyboard-open #authScreen > div {
    margin-top: 0 !important;
    margin-bottom: 2rem !important;
    padding-top: .25rem !important;
  }
  html.vrum-android-apk.vrum-keyboard-open #appScreen:not(.hidden) {
    height: calc(100vh - var(--vrum-native-keyboard-bottom)) !important;
    max-height: calc(100vh - var(--vrum-native-keyboard-bottom)) !important;
    min-height: 0 !important;
  }
  html.vrum-android-apk.vrum-keyboard-open #mainContentArea,
  html.vrum-android-apk.vrum-keyboard-open #osModalContent,
  html.vrum-android-apk.vrum-keyboard-open #listaNotificacoes,
  html.vrum-android-apk.vrum-keyboard-open .overflow-y-auto {
    padding-bottom: calc(var(--vrum-native-keyboard-bottom) + 5rem) !important;
    -webkit-overflow-scrolling: touch !important;
  }
  html.vrum-android-apk.vrum-keyboard-open #osModalContent,
  html.vrum-android-apk.vrum-keyboard-open .fixed .overflow-y-auto {
    max-height: calc(100vh - var(--vrum-native-keyboard-bottom) - var(--vrum-native-status-top) - 2rem) !important;
  }
  html.vrum-android-apk.vrum-keyboard-open input:focus,
  html.vrum-android-apk.vrum-keyboard-open textarea:focus {
    scroll-margin-bottom: calc(var(--vrum-native-keyboard-bottom) + 7rem) !important;
    scroll-margin-top: 5rem !important;
  }
  html.vrum-android-apk #mainContentArea {
    padding-bottom: calc(8rem + var(--vrum-native-nav-bottom)) !important;
  }
  html.vrum-android-apk #dropdownNotificacoes {
    top: calc(5rem + var(--vrum-native-status-top)) !important;
  }

/* Correção para o modal "Novo Agendamento" não tremer quando o teclado abre no APK */
  html.vrum-android-apk.vrum-keyboard-open #modalNovaOSOficina {
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: calc(0.75rem + var(--vrum-native-status-top)) !important;
    padding-bottom: calc(var(--vrum-native-keyboard-bottom) + 1rem) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html.vrum-android-apk.vrum-keyboard-open #modalNovaOSOficina > .overflow-y-auto,
  html.vrum-android-apk.vrum-keyboard-open #modalNovaOSOficina .glass {
    max-height: calc(100vh - var(--vrum-native-keyboard-bottom) - var(--vrum-native-status-top) - 1.25rem) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: calc(2rem + var(--vrum-native-keyboard-bottom)) !important;
  }

  html.vrum-android-apk.vrum-keyboard-open #modalNovaOSOficina input:focus,
  html.vrum-android-apk.vrum-keyboard-open #modalNovaOSOficina textarea:focus,
  html.vrum-android-apk.vrum-keyboard-open #modalNovaOSOficina select:focus {
    scroll-margin-top: 7rem !important;
    scroll-margin-bottom: calc(var(--vrum-native-keyboard-bottom) + 8rem) !important;
  }

  #modalCancelamentoVisitanteBonito.vrum-cancelado-ok {
    pointer-events: auto !important;
  }

html,body{margin:0;background:#fff;color:#111;font-family:Arial,Helvetica,sans-serif;}body{padding:14px;}[data-vrum-pdf-root]{width:100%!important;max-width:820px!important;margin:0 auto!important;position:static!important;min-height:auto!important;}img{max-width:100%!important;height:auto!important;object-fit:contain!important;}@media print{body{padding:0;}[data-vrum-pdf-root]{max-width:none!important;width:100%!important;}}

html,body{margin:0;background:#fff;color:#111;font-family:Arial,Helvetica,sans-serif;}body{padding:14px;}[data-vrum-pdf-root]{width:100%!important;max-width:820px!important;margin:0 auto!important;position:static!important;min-height:auto!important;}img{max-width:100%!important;height:auto!important;object-fit:contain!important;}@media print{body{padding:0;}[data-vrum-pdf-root]{max-width:none!important;width:100%!important;}}

#vrumDemoRoleModal { font-family: Inter, Arial, sans-serif; }
  #vrumDemoRoleModal .vrum-demo-role-panel {
    background: rgba(13, 18, 48, .96);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 24px 80px rgba(0,0,0,.42);
  }
  .vrum-demo-real-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 1px solid rgba(249,115,22,.38);
    background: rgba(249,115,22,.16);
    color: #fdba74;
    border-radius: 999px;
    padding: .42rem .7rem;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .vrum-demo-real-notice {
    background: linear-gradient(135deg, rgba(249,115,22,.16), rgba(30,115,255,.12));
    border: 1px solid rgba(249,115,22,.28);
    border-radius: 1.1rem;
    padding: .85rem 1rem;
    color: #fed7aa;
    font-size: .82rem;
    line-height: 1.35;
  }

html,
  body {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    touch-action: auto !important;
    overscroll-behavior: auto !important;
  }

  body {
    overflow-y: auto !important;
  }

  #appScreen:not(.hidden) {
    display: flex !important;
    height: 100vh !important;
    max-height: 100vh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
  }

  @supports (height: 100dvh) {
    #appScreen:not(.hidden) {
      height: 100dvh !important;
      max-height: 100dvh !important;
      min-height: 100dvh !important;
    }
  }

  #appScreen:not(.hidden) main {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #mainContentArea {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: auto !important;
    overscroll-behavior: auto !important;
    padding-bottom: calc(8rem + env(safe-area-inset-bottom)) !important;
  }

  #mainContentArea > .view:not(.hidden) {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 5rem !important;
  }

  #view-cliente-solicitar,
  #view-cliente-perfil,
  #view-cliente-historico,
  #view-cliente-recarga,
  #view-cliente-lista-oficinas,
  #view-oficina-pedidos,
  #view-oficina-config,
  #view-oficina-dashboard {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 6rem !important;
  }

  #appScreen.vrum-solicitar-scroll-active,
  #appScreen.vrum-solicitar-scroll-active main,
  #appScreen.vrum-solicitar-scroll-active #mainContentArea {
    height: auto !important;
    max-height: none !important;
  }

  #appScreen.vrum-solicitar-scroll-active #mainContentArea {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    touch-action: auto !important;
    overscroll-behavior: auto !important;
  }

  #sidebar,
  #authScreen,
  #publicCheckoutScreen,
  #listaNotificacoes,
  #osModalContainer,
  #osModalContent,
  .overflow-y-auto {
    -webkit-overflow-scrolling: touch !important;
    touch-action: auto !important;
    overscroll-behavior: auto !important;
  }

/* Ajustes finais de contraste e legibilidade do app */
html:not([data-vrum-pdf-mode]),
html:not([data-vrum-pdf-mode]) body {
  background: #080b29 !important;
  color: #f8fafc !important;
}

#appScreen,
#mainContentArea,
#authScreen,
#publicCheckoutScreen {
  background-color: #080b29 !important;
  color: #f8fafc !important;
}

#sidebar {
  color: #f8fafc !important;
  background:
    radial-gradient(circle at 78% 28%, rgba(30, 115, 255, .22), transparent 24rem),
    linear-gradient(180deg, rgba(17, 24, 62, .98), rgba(10, 14, 39, .98)) !important;
}

#sidebar nav button,
#sidebar nav a,
#sidebar .sidebar-item,
#sidebar [onclick*="changeView"],
#sidebar [data-view] {
  color: #f8fafc !important;
  opacity: 1 !important;
}

#sidebar nav button i,
#sidebar nav a i,
#sidebar .sidebar-item i,
#sidebar [onclick*="changeView"] i,
#sidebar [data-view] i {
  color: #e2e8f0 !important;
  opacity: 1 !important;
}

#sidebar nav button span,
#sidebar nav a span,
#sidebar .sidebar-item span,
#sidebar [onclick*="changeView"] span,
#sidebar [data-view] span {
  color: #f8fafc !important;
  opacity: 1 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

#sidebar nav button:hover,
#sidebar nav a:hover,
#sidebar .sidebar-item:hover,
#sidebar [onclick*="changeView"]:hover,
#sidebar [data-view]:hover {
  background: rgba(30, 115, 255, .16) !important;
  color: #ffffff !important;
}

header button[onclick*="toggleSidebar"],
button[onclick*="toggleSidebar"],
#btnMenu,
.menu-btn {
  color: #f8fafc !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

header button[onclick*="toggleSidebar"] i,
button[onclick*="toggleSidebar"] i,
#btnMenu i,
.menu-btn i {
  color: #f8fafc !important;
  opacity: 1 !important;
}

#termosModal,
#termosModal * {
  color: #e5e7eb !important;
}

#termosModal h1,
#termosModal h2,
#termosModal h3,
#termosModal h4,
#termosModal strong,
#termosModal b {
  color: #ffffff !important;
}

#termosModal p,
#termosModal li,
#termosModal span,
#termosModal div {
  color: #dbe4f0 !important;
}

#termosModal .glass,
#termosModal .bg-white,
#termosModal .bg-gray-50 {
  background: rgba(15, 23, 42, .96) !important;
  border-color: rgba(255,255,255,.14) !important;
}

.vrum-oficina-logo-iniciais {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, rgba(30,115,255,.28), rgba(16,185,129,.22)) !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
}

.vrum-top-urgencia-badge {
  box-shadow: 0 0 20px rgba(251,146,60,.18) !important;
}

.progress-striped,
.progress-striped::before,
.progress-striped::after,
.vrum-skeleton::after {
  background-image: none !important;
  animation: none !important;
}

.vrum-skeleton::after {
  display: none !important;
}


/* ===== VRUMTECH: LOADING GLOBAL EM BOTÕES ===== */
.vrum-btn-loading {
  cursor: wait !important;
  user-select: none !important;
}

.vrum-btn-spinner {
  width: 1.05em;
  height: 1.05em;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: #ffffff;
  border-radius: 9999px;
  display: inline-block;
  vertical-align: -0.18em;
  margin-right: .55rem;
  animation: vrum-spin .75s linear infinite;
}

.vrum-btn-loading-text {
  display: inline-block;
  vertical-align: middle;
}

@keyframes vrum-spin {
  to { transform: rotate(360deg); }
}


/* VrumTech - loading seguro de botões.
   Não usa disabled e não troca o texto do botão. */
.vrum-btn-loading {
  position: relative !important;
  cursor: wait !important;
}
.vrum-btn-loading::after {
  content: "" !important;
  display: inline-block !important;
  width: 0.9em !important;
  height: 0.9em !important;
  margin-left: 0.55em !important;
  vertical-align: -0.12em !important;
  border: 2px solid currentColor !important;
  border-top-color: transparent !important;
  border-radius: 50% !important;
  animation: vrumSpinBtn 0.75s linear infinite !important;
}
.vrum-btn-loading::before {
  content: attr(data-vrum-loading-label) "..." !important;
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
@keyframes vrumSpinBtn {
  to { transform: rotate(360deg); }
}


/* VRUMTECH V20 - CORRECAO CELULAR TELA PELA METADE (20260630)
   Alguns Android/WebView/PWA informavam visualViewport menor sem teclado aberto.
   Isso deixava a classe vrum-keyboard-open presa e o app/onboarding ficava só na metade.
   As regras abaixo garantem tela cheia quando não há teclado real e largura total no painel. */
html.vrum-android-apk:not(.vrum-keyboard-open) #authScreen,
html.vrum-android-apk:not(.vrum-keyboard-open) #appScreen:not(.hidden) {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
}
@supports (height: 100dvh) {
  html.vrum-android-apk:not(.vrum-keyboard-open) #authScreen,
  html.vrum-android-apk:not(.vrum-keyboard-open) #appScreen:not(.hidden) {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
  }
}
#appScreen:not(.hidden) {
  width: 100vw !important;
  max-width: 100vw !important;
}
#appScreen:not(.hidden) > main {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 0% !important;
}
#mainContentArea {
  width: 100% !important;
  max-width: 100% !important;
}
html.vrum-android-apk:not(.vrum-keyboard-open) #mainContentArea {
  height: auto !important;
  max-height: none !important;
}
html.vrum-android-apk:not(.vrum-keyboard-open) #authScreen .vrum-auth-shell {
  max-height: none !important;
}


/* VRUMTECH V20 - BACKUP CSS MOTO G24 / ANDROID 14 / PWA (20260701) */
html.vrum-android-device.vrum-stable-viewport-override #appScreen:not(.hidden) {
  width: var(--vrum-stable-vw, 100vw) !important;
  max-width: var(--vrum-stable-vw, 100vw) !important;
  height: var(--vrum-stable-vh, 100vh) !important;
  min-height: var(--vrum-stable-vh, 100vh) !important;
  max-height: var(--vrum-stable-vh, 100vh) !important;
  overflow: hidden !important;
}
html.vrum-android-device.vrum-stable-viewport-override #appScreen:not(.hidden) > main,
html.vrum-android-device.vrum-stable-viewport-override #mainContentArea {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}