/* ============================================================
   NOVU SKIN — camada de layout por cima do app.css
   Inspiração: dashboards de mobilidade (claro, cards brancos
   arredondados, sidebar escura, toggle Claro/Escuro).
   Cores da marca: Vermelho · Branco · Cinza · Cinza escuro.
   ============================================================ */

:root {
  --nv-red:        #E11D2E;
  --nv-red-dark:   #B31224;
  --nv-red-light:  #F04B59;
  /* componentes RGB da cor da marca — usados nos brilhos/sombras translúcidos.
     O app do motorista troca este valor pela cor escolhida pela empresa. */
  --nv-rgb:        225, 29, 46;
  --nv-pale:       rgba(var(--nv-rgb), 0.10);
  --nv-glow:       rgba(var(--nv-rgb), 0.30);
  --nv-canvas:     #EFF1F4;          /* fundo geral (cinza claro) */
  --nv-card:       #FFFFFF;          /* superfície dos cards */
  --nv-card-2:     #F6F7F9;          /* superfície secundária */
  --nv-border:     #E7E9EE;
  --nv-ink:        #17181C;          /* texto principal */
  --nv-ink-2:      #5C6270;          /* texto secundário */
  --nv-side:       #141519;          /* sidebar (cinza escuro) */
  --nv-side-ink:   #C9CCD4;
  --nv-shadow:     0 1px 2px rgba(16,18,24,.05), 0 10px 30px rgba(16,18,24,.06);
  --nv-shadow-lg:  0 18px 44px rgba(16,18,24,.14);
}

/* ─── TEMA ESCURO — redefine os tokens do app.css inteiro ─── */
html[data-theme="dark"] {
  --nv-canvas:   #0E0F12;
  --nv-card:     #17181D;
  --nv-card-2:   #1E2026;
  --nv-border:   #262931;
  --nv-ink:      #F1F2F5;
  --nv-ink-2:    #9AA0AC;
  --nv-side:     #101114;
  --nv-shadow:   0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.45);
  --nv-shadow-lg:0 18px 44px rgba(0,0,0,.6);
}
html[data-theme="dark"] body {
  /* tokens herdados pelo app.css */
  --white:      #17181D;
  --off:        #0E0F12;
  --off2:       #22242B;
  --gray-1:     #F1F2F5;
  --gray-2:     #D4D7DE;
  --gray-3:     #9AA0AC;
  --gray-4:     #6E7480;
  --gray-5:     #3A3E48;
  --gray-6:     #2A2D35;
  --blue-pale:  rgba(var(--nv-rgb), 0.14);
  --green-pale: rgba(22,163,74,0.16);
  --amber-pale: rgba(217,119,6,0.16);
  --red-pale:   rgba(220,38,38,0.16);
  --glass-bg:       rgba(23,24,29,0.86);
  --glass-bg-dark:  rgba(23,24,29,0.7);
  --glass-border:   #262931;
  --glass-shadow:   0 8px 32px rgba(0,0,0,.5);
}

/* ─── BASE ─── */
body { background: var(--nv-canvas); color: var(--nv-ink); transition: background .25s ease, color .25s ease; }
body::before { background: none; }                    /* sem blobs — visual limpo */

/* ─── CARDS: sólidos, arredondados, sombra suave (sem "vidro") ─── */
.glass, .panel, .kpi, .auth-card, .veh-card, .modal {
  background: var(--nv-card);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--nv-border);
  box-shadow: var(--nv-shadow);
}
.panel, .kpi { border-radius: 22px; }
.panel.glass, .kpi.glass { border-radius: 22px; }
.veh-card { border-radius: 22px; }
.veh-card:hover { box-shadow: var(--nv-shadow-lg); }
.veh-thumb { background: var(--nv-card-2); }
html[data-theme="dark"] .veh-thumb { background: #1E2026; }

/* animação de entrada dos cards (escalonada) */
@keyframes nvUp { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.fade-in .panel, .fade-in .kpi, .fade-in .veh-card { animation: nvUp .45s var(--ease-smooth) backwards; }
.fade-in .kpi:nth-child(2) { animation-delay: .05s; }
.fade-in .kpi:nth-child(3) { animation-delay: .1s; }
.fade-in .kpi:nth-child(4) { animation-delay: .15s; }
.fade-in .panel:nth-of-type(2) { animation-delay: .08s; }
.fade-in .panel:nth-of-type(3) { animation-delay: .14s; }

/* ─── SIDEBAR escura (referência) ─── */
.sidebar {
  background: var(--nv-side);
  border-right: none;
  box-shadow: 4px 0 24px rgba(0,0,0,.08);
}
/* Logo da lateral: ícone nítido sempre visível + nome em TEXTO (sem imagem
   borrada), centralizado tanto recolhida quanto expandida. */
.sidebar .sidebar-logo, .sidebar:hover .sidebar-logo { justify-content: center; gap: 10px; padding-bottom: 1.3rem; }
.sidebar .logo-mark, .sidebar:hover .logo-mark {
  display: block; width: 40px; height: 40px; border-radius: 12px;
  overflow: hidden; box-shadow: none;               /* sem "aura" no ícone */
}
.logo-mark img { width: 100%; height: 100%; object-fit: cover; }
.logo-name { display: none; color: #fff; font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.logo-name i { font-style: normal; color: var(--nv-red); }
.sidebar:hover .logo-name { display: block; }
@media (max-width: 900px) { .logo-name { display: block; } }
.logo-full { display: none !important; }            /* aposenta o wordmark em imagem */
.sidebar-user { background: rgba(255,255,255,0.06); }
.sidebar-user .meta .name { color: #fff; }
.sidebar-user .meta .role { color: var(--nv-side-ink); }
.logout-btn { color: var(--nv-side-ink); }
.nav-item { background: transparent; color: var(--nv-side-ink); }
.nav-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
.nav-item:hover .nav-ico { background: rgba(255,255,255,0.12); color: #fff; }
.nav-ico { background: rgba(255,255,255,0.07); color: var(--nv-side-ink); }
.nav-item.active { background: rgba(255,255,255,0.1); color: #fff; }
.nav-item.active .nav-ico {
  background: linear-gradient(135deg, var(--nv-red), var(--nv-red-dark));
  color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}
.nav-item .nav-count { background: rgba(255,255,255,0.12); color: #fff; }
.nav-section-label { color: rgba(255,255,255,0.35); }

/* ─── TOPBAR ─── */
.topbar {
  background: color-mix(in srgb, var(--nv-canvas) 82%, transparent);
  border-bottom: 1px solid var(--nv-border);
}
body.dash-active .main { background: var(--nv-canvas); }  /* dashboard usa o mesmo canvas limpo */
body.dash-active .topbar { background: color-mix(in srgb, var(--nv-canvas) 82%, transparent); border-bottom-color: var(--nv-border); }

/* ─── TOGGLE Claro/Escuro (pill, igual à referência) ─── */
.theme-toggle {
  position: relative; display: inline-flex; align-items: center;
  background: var(--nv-card); border: 1px solid var(--nv-border);
  border-radius: 999px; padding: 3px; cursor: pointer; gap: 0;
  box-shadow: var(--nv-shadow); flex-shrink: 0;
}
.theme-toggle .tt-opt {
  position: relative; z-index: 1; padding: .32rem .8rem; font-size: .76rem;
  font-weight: 600; color: var(--nv-ink-2); transition: color .25s;
}
/* MOBILE: sem botão de tema — o app segue o tema do aparelho */
@media (max-width: 900px) { .theme-toggle { display: none !important; } }
.theme-toggle .tt-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  background: var(--nv-ink); border-radius: 999px;
  transition: transform .3s var(--ease-spring);
}
.theme-toggle .tt-light { color: var(--nv-card); }
.theme-toggle.is-dark .tt-thumb { transform: translateX(100%); }
.theme-toggle.is-dark .tt-light { color: var(--nv-ink-2); }
.theme-toggle.is-dark .tt-dark { color: var(--nv-card); }

/* ─── FORM / TABELAS / MISC no tema escuro ─── */
.input, .select, .textarea { background: var(--nv-card-2); border-color: var(--nv-border); color: var(--nv-ink); }
.input:focus, .select:focus, .textarea:focus { background: var(--nv-card); border-color: var(--nv-red); box-shadow: 0 0 0 4px rgba(var(--nv-rgb), 0.12); }
table.tbl tbody tr:hover { background: color-mix(in srgb, var(--nv-red) 4%, transparent); }
.icon-btn { background: var(--nv-card-2); border-color: var(--nv-border); }
.seg { background: var(--nv-card-2); border-color: var(--nv-border); box-shadow: none; }
.btn-glass { background: var(--nv-card-2); border-color: var(--nv-border); color: var(--nv-ink); backdrop-filter: none; box-shadow: none; }
.btn-glass:hover:not(:disabled) { background: var(--nv-border); }
html[data-theme="dark"] .toast { background: var(--nv-card); color: var(--nv-ink); border: 1px solid var(--nv-border); }
html[data-theme="dark"] .modal { background: var(--nv-card); }
html[data-theme="dark"] .spinner { border-color: var(--nv-border); border-top-color: var(--nv-red); }

/* botões de ação padrão do produto: vender=verde, excluir=vermelho (já
   existem .btn-green e .btn-danger no app.css — aqui só reforçamos o hover) */
.btn-danger { background: rgba(220,38,38,0.12); }
.btn-danger:hover:not(:disabled) { background: var(--red); color: #fff; }

/* ═══════════════════════════════════════════════════════════
   SEGMENTOS (Mês atual / Ano, filtros de veículos) — sem quebra
   ═══════════════════════════════════════════════════════════ */
.seg button { white-space: nowrap; padding: 0.55rem 1rem; line-height: 1.2; }
.seg.seg-sm button { padding: 0.45rem 0.9rem; font-size: 0.8rem; }
.seg { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
/* filtro de veículos (Todos / Locados / Disponíveis): chips que não se sobrepõem */
#veh-filter { flex-wrap: wrap; overflow: visible; gap: 6px; }
#veh-filter button { flex: 0 0 auto; white-space: nowrap; }
.panel-head .seg { margin-bottom: 0; flex-shrink: 0; }
.panel-head { flex-wrap: wrap; row-gap: .5rem; }

/* ═══════════════════════════════════════════════════════════
   FOTOS DE VEÍCULO — sempre contidas no card, sem cortar
   ═══════════════════════════════════════════════════════════ */
.veh-thumb {
  aspect-ratio: 16 / 10; height: auto; overflow: hidden;
  display: grid; place-items: center; padding: 8px;
}
/* `contain` mostra a foto INTEIRA (sem cortes); o card preenche o resto */
.veh-thumb img, .veh-photo img, .vehicle-photo img {
  width: 100%; height: 100%; object-fit: contain; object-position: center; display: block;
}
/* foto na tela do motorista / modais: nunca ultrapassa a área */
.veh-hero-img, .car-photo {
  width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-md);
  background: var(--nv-card-2); display: grid; place-items: center;
}
.veh-hero-img img, .car-photo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
/* qualquer imagem dentro de card/modal fica limitada ao container */
.panel img, .modal-body img, .veh-card img { max-width: 100%; }
.upload-mini { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════
   REVISÃO MOBILE — nada cortado, sem rolagem lateral
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* dashboard enxuta no celular: esconde cards secundários e sobe o de vencidas */
  .hide-mobile { display: none !important; }
  .only-mobile { display: block !important; }
  /* ordem no celular: Faturamento → Vencidas → A receber → RECEITA → Gastos → listas.
     `display: contents` solta os stat cards dentro da coluna flex do .d2-main,
     permitindo intercalar o gráfico de Receita entre eles. */
  .d2-stats { display: contents !important; }
  .m-1 { order: 1; } .m-2 { order: 2; } .m-3 { order: 3; }
  .m-4 { order: 4; } .m-5 { order: 5; } .m-6 { order: 6; }
  /* dashboard vira coluna única */
  .dash2, .d2-row2, .d2-row3, .d2-stats { grid-template-columns: 1fr !important; }
  .d2-minis { flex-direction: row; }
  .d2-mini { min-width: 0; }
  .d2-val { font-size: 1.35rem; }
  .d2-big { font-size: 1.55rem; }
  .d2-rev-cap { margin-left: 0; width: 100%; font-size: .68rem; }
  .d2-rev .panel-head { flex-wrap: wrap; }
  /* lista de próximos semanais: empilha sem cortar */
  .d2-li { align-items: flex-start; gap: 10px; }
  .d2-li-txt { min-width: 100px; }
  .d2-li-val { width: auto; }
  .d2-li .btn { width: 100%; justify-content: center; margin-top: .2rem; }
  /* topbar e títulos */
  .topbar { flex-wrap: wrap; row-gap: .4rem; }
  .topbar .page-title { white-space: normal; font-size: 1rem; line-height: 1.25; }
  .clockw { padding: .35rem .7rem; font-size: .74rem; }
  /* cards e paletas */
  .pz-palette { gap: 9px; }
  .pz-swatch { width: 40px; height: 40px; }
  .pzp-frame { max-width: 100%; }
  .sub-hero { padding: 1.15rem 1.1rem; }
  .sub-hero .sh-price { margin-left: 0; text-align: left; width: 100%; }
  .sub-warn { flex-wrap: wrap; }
  .sub-warn .btn { margin-left: 0; width: 100%; justify-content: center; }
  .upgrade-card .up-foot { flex-direction: column; align-items: stretch; }
  .upgrade-card .up-foot .btn { width: 100%; justify-content: center; }
  /* espaço no rodapé para o botão flutuante do chat não cobrir conteúdo */
  .content { padding-bottom: 88px; }
  /* tabelas/áreas roláveis nunca empurram a página */
  .table-wrap, .wk-strip, .lc-wrap { max-width: 100%; }
  .modal { max-width: 100%; }
  .row-actions { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .d2-minis { flex-direction: column; }
  .d2-stats { gap: .9rem; }
  .lc-tip { font-size: .66rem; }
  .df-duo, .kpi-duo { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   MOBI — chat flutuante (empresa: todas as abas)
   ═══════════════════════════════════════════════════════════ */
.mobi-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--nv-red-light), var(--nv-red-dark)); color: #fff;
  display: grid; place-items: center; box-shadow: 0 10px 28px rgba(var(--nv-rgb), 0.45);
  transition: transform .25s var(--ease-spring), box-shadow .25s;
}
.mobi-fab:hover { transform: scale(1.08); box-shadow: 0 14px 34px rgba(var(--nv-rgb), 0.55); }
.mobi-fab svg { width: 26px; height: 26px; }
.mobi-fab .mobi-dot {
  position: absolute; top: 4px; right: 4px; width: 12px; height: 12px;
  border-radius: 50%; background: #22C55E; border: 2px solid #fff;
}
.mobi-panel {
  position: fixed; right: 18px; bottom: 88px; z-index: 91;
  width: min(392px, calc(100vw - 36px)); height: min(560px, calc(100vh - 120px));
  background: var(--nv-card); border: 1px solid var(--nv-border);
  border-radius: 22px; box-shadow: var(--nv-shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(16px) scale(.98); pointer-events: none;
  transition: opacity .25s var(--ease-smooth), transform .25s var(--ease-smooth);
}
.mobi-panel.open { opacity: 1; transform: none; pointer-events: auto; }
.mobi-head {
  display: flex; align-items: center; gap: 10px; padding: .9rem 1.1rem;
  background: var(--nv-side); color: #fff; flex-shrink: 0;
}
.mobi-head .mobi-ava {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--nv-red-light), var(--nv-red-dark)); flex-shrink: 0;
}
.mobi-head .mobi-ava svg { width: 20px; height: 20px; }
.mobi-head .m-name { font-weight: 700; font-size: .95rem; line-height: 1.2; }
.mobi-head .m-sub { font-size: .72rem; color: rgba(255,255,255,0.65); display: flex; align-items: center; gap: 5px; }
.mobi-head .m-sub::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #22C55E; }
.mobi-head .mobi-close { margin-left: auto; background: none; border: none; color: rgba(255,255,255,0.7); cursor: pointer; padding: 6px; border-radius: 8px; }
.mobi-head .mobi-close:hover { background: rgba(255,255,255,0.12); color: #fff; }

.mobi-msgs { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .55rem; background: var(--nv-card-2); }
.mobi-msg { max-width: 84%; padding: .6rem .85rem; border-radius: 16px; font-size: .86rem; line-height: 1.5; animation: nvUp .3s var(--ease-smooth) backwards; }
.mobi-msg.bot { background: var(--nv-card); border: 1px solid var(--nv-border); color: var(--nv-ink); align-self: flex-start; border-bottom-left-radius: 6px; }
.mobi-msg.user { background: var(--nv-ink); color: var(--nv-card); align-self: flex-end; border-bottom-right-radius: 6px; }
html[data-theme="dark"] .mobi-msg.user { background: #F1F2F5; color: #17181D; }
.mobi-msg .mobi-typing { display: inline-flex; gap: 4px; padding: 2px 0; }
.mobi-msg .mobi-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--nv-ink-2); animation: mobiBlink 1.2s infinite; }
.mobi-msg .mobi-typing i:nth-child(2) { animation-delay: .18s; }
.mobi-msg .mobi-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes mobiBlink { 0%, 70%, 100% { opacity: .25; } 35% { opacity: 1; } }

/* chips: sugestões e ACESSOS RÁPIDOS (redirecionam a aba) */
.mobi-chips { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; max-width: 92%; }
.mobi-chip {
  border: 1px solid var(--nv-border); background: var(--nv-card); color: var(--nv-ink);
  border-radius: 999px; padding: .38rem .8rem; font-size: .78rem; font-weight: 600; cursor: pointer;
  transition: all .18s;
}
.mobi-chip:hover { border-color: var(--nv-red); color: var(--nv-red); }
.mobi-chip.goto { background: rgba(var(--nv-rgb), 0.08); border-color: rgba(var(--nv-rgb), 0.3); color: var(--nv-red); display: inline-flex; align-items: center; gap: 6px; }
.mobi-chip.goto:hover { background: var(--nv-red); color: #fff; }
.mobi-chip.goto svg { width: 14px; height: 14px; }

.mobi-input { display: flex; gap: 8px; padding: .8rem; border-top: 1px solid var(--nv-border); background: var(--nv-card); flex-shrink: 0; }
.mobi-input input {
  flex: 1; border: 1.5px solid var(--nv-border); background: var(--nv-card-2);
  border-radius: 999px; padding: .6rem 1rem; font-size: .88rem; color: var(--nv-ink); font-family: inherit;
}
.mobi-input input:focus { outline: none; border-color: var(--nv-red); }
.mobi-input button {
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--nv-red); color: #fff; display: grid; place-items: center; flex-shrink: 0;
  transition: background .18s, transform .18s;
}
.mobi-input button:hover { background: var(--nv-red-dark); transform: scale(1.06); }
.mobi-input button svg { width: 18px; height: 18px; }

@media (max-width: 640px) {
  .mobi-panel { left: 12px; right: 12px; width: auto; bottom: 84px; height: min(540px, calc(100vh - 104px)); }
  .mobi-fab { right: 12px; bottom: 12px; }
  .mobi-hello { right: 12px; left: 12px; max-width: none; }
}

/* Mini mensagem de boas-vindas (1º acesso) ao lado do balão do chat */
.mobi-hello {
  position: fixed; right: 18px; bottom: 88px; z-index: 89;
  max-width: 320px; padding: .95rem 1.05rem;
  background: var(--nv-card); border: 1px solid var(--nv-border);
  border-radius: 18px 18px 6px 18px; box-shadow: var(--nv-shadow-lg);
  font-size: .87rem; line-height: 1.5; color: var(--nv-ink);
  animation: nvUp .45s var(--ease-smooth) backwards;
}
.mobi-hello b { color: var(--nv-red); }
.mobi-hello .mh-x { position: absolute; top: 8px; right: 8px; border: none; background: none; color: var(--nv-ink-2); cursor: pointer; padding: 4px; border-radius: 6px; }
.mobi-hello .mh-x:hover { background: var(--nv-card-2); }
.mobi-hello .mh-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: .6rem; padding: .45rem .95rem; border: none; border-radius: 999px; background: var(--nv-red); color: #fff; font-weight: 700; font-size: .8rem; cursor: pointer; font-family: inherit; }
.mobi-hello .mh-cta:hover { background: var(--nv-red-dark); }

/* ═══════════════════════════════════════════════════════════
   DASHBOARD — mapa do trajeto + relógio/temperatura (headbar)
   ═══════════════════════════════════════════════════════════ */
/* O card inteiro do "Trajeto de recebimentos" vira um mapa urbano
   (quadras + ruas repetidas), como o "Location Live" da referência. */
.panel-map {
  /* moldura: uma faixa da cor do card em volta do mapa + contorno fino */
  border: 8px solid var(--nv-card);
  outline: 1.5px solid var(--nv-border);
  background-clip: padding-box;
  background-color: #EDEFF3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='128'%3E%3Cg fill='%23E2E5EA'%3E%3Crect x='4' y='4' width='64' height='40' rx='5'/%3E%3Crect x='76' y='4' width='42' height='40' rx='5'/%3E%3Crect x='126' y='4' width='38' height='40' rx='5'/%3E%3Crect x='4' y='52' width='28' height='28' rx='5'/%3E%3Crect x='40' y='52' width='28' height='28' rx='5'/%3E%3Crect x='76' y='52' width='88' height='28' rx='5'/%3E%3Crect x='4' y='88' width='64' height='36' rx='5'/%3E%3Crect x='76' y='88' width='42' height='36' rx='5'/%3E%3Crect x='126' y='88' width='38' height='36' rx='5'/%3E%3C/g%3E%3C/svg%3E");
}
html[data-theme="dark"] .panel-map {
  background-color: #14161B;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='128'%3E%3Cg fill='%231C1F26'%3E%3Crect x='4' y='4' width='64' height='40' rx='5'/%3E%3Crect x='76' y='4' width='42' height='40' rx='5'/%3E%3Crect x='126' y='4' width='38' height='40' rx='5'/%3E%3Crect x='4' y='52' width='28' height='28' rx='5'/%3E%3Crect x='40' y='52' width='28' height='28' rx='5'/%3E%3Crect x='76' y='52' width='88' height='28' rx='5'/%3E%3Crect x='4' y='88' width='64' height='36' rx='5'/%3E%3Crect x='76' y='88' width='42' height='36' rx='5'/%3E%3Crect x='126' y='88' width='38' height='36' rx='5'/%3E%3C/g%3E%3C/svg%3E");
}
/* legibilidade dos textos do gráfico sobre o mapa */
.route-val { fill: var(--gray-1); paint-order: stroke; stroke: var(--nv-card); stroke-width: 3px; }
.route-lbl { fill: var(--gray-2); paint-order: stroke; stroke: var(--nv-card); stroke-width: 3px; }
.panel-map .panel-head h3 { text-shadow: 0 1px 0 var(--nv-card); }

/* ═══════════════════════════════════════════════════════════
   DASHBOARD v2 — modelo "Finance/HR System" (Dribbble)
   Grid: conteúdo principal + coluna lateral direita
   ═══════════════════════════════════════════════════════════ */
.dash2 { display: grid; gap: 1.4rem; align-items: start; }
@media (min-width: 1180px) { .dash2 { grid-template-columns: 1fr 300px; } }
.d2-main { display: flex; flex-direction: column; gap: 1.4rem; min-width: 0; }
.d2-side { display: flex; flex-direction: column; gap: 1.4rem; min-width: 0; }
.dash2 .panel { margin-bottom: 0; }

/* linha de 4 stat cards */
.d2-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1.1rem; }
.d2-stat { padding: 1.1rem 1.2rem; }
.d2-stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.d2-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--nv-rgb), .1); color: var(--nv-red); }
.d2-ico svg { width: 19px; height: 19px; }
.d2-kebab { border: none; background: none; cursor: pointer; color: var(--nv-ink-2); width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; transition: all .15s; }
.d2-kebab:hover { background: var(--nv-card-2); color: var(--nv-red); }
.d2-kebab svg { width: 16px; height: 16px; }
.d2-val { font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.d2-lbl { font-size: .78rem; color: var(--nv-ink-2); font-weight: 600; margin-top: .2rem; }
.d2-lbl span { display: block; font-weight: 500; font-size: .7rem; color: var(--nv-ink-2); opacity: .8; }

/* linha 2: dois mini-cards empilhados + gráfico de receita */
.d2-row2 { display: grid; gap: 1.1rem; }
@media (min-width: 900px) { .d2-row2 { grid-template-columns: 230px 1fr; } }
.d2-minis { display: flex; flex-direction: column; gap: 1.1rem; }
.d2-mini { padding: 1rem 1.15rem; flex: 1; }
.d2-mini[data-vencidas] { cursor: pointer; }
/* visibilidade por dispositivo (dashboard enxuta no celular) */
.only-mobile { display: none; }
.d2-mini-lbl { font-size: .76rem; font-weight: 700; color: var(--nv-ink-2); display: flex; align-items: center; gap: 8px; margin-bottom: .5rem; }
.d2-ico-sm { width: 30px; height: 30px; border-radius: 9px; }
.d2-ico-sm svg { width: 15px; height: 15px; }
.d2-mini-row { display: flex; align-items: center; gap: 10px; margin-top: .35rem; }
.d2-big { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.d2-big small { font-size: .95rem; color: var(--nv-ink-2); font-weight: 700; }
.d2-mini-sub { font-size: .68rem; color: var(--nv-ink-2); margin-top: .3rem; }
.pill { border-radius: 999px; padding: .22rem .6rem; font-size: .7rem; font-weight: 800; }
.pill.green { background: var(--green-pale); color: var(--green); }
.pill.red { background: var(--red-pale); color: var(--red); }

/* gráfico de receita (linhas) */
.d2-rev { padding-bottom: .8rem; }
.d2-rev-cap { margin-left: auto; font-size: .72rem; color: var(--nv-ink-2); font-weight: 600; }
.d2-rev-cap b.pos { color: var(--green); }
.d2-rev-cap b.neg { color: var(--red); }
.lc-wrap { width: 100%; }
.lc-legend { display: flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 600; color: var(--nv-ink-2); margin: .2rem 0 .3rem; }
.lc-key { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }
.lc-key.cur { background: var(--nv-red); }
.lc-key.prev { background: var(--gray-4); }
.lc-key.prev + * { margin-left: 2px; }
.lc-legend .lc-key.prev { margin-left: 10px; }
.lc-svg { display: block; width: 100%; height: auto; }
.lc-grid { stroke: var(--nv-border); stroke-width: 1; stroke-dasharray: 2 4; }
.lc-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lc-line.cur { stroke: var(--nv-red); }
.lc-line.prev { stroke: var(--gray-4); stroke-width: 2; stroke-dasharray: 5 6; opacity: .8; }
.lc-dot { fill: var(--nv-red); stroke: var(--nv-card); stroke-width: 2; transition: r .15s; }
.lc-dot.on { r: 6; stroke-width: 3; }
.lc-lbl { fill: var(--gray-3); font-size: 9.5px; font-weight: 600; }
.lc-cursor { stroke: var(--nv-red); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: 0; transition: opacity .15s; }
.lc-hit { cursor: crosshair; }

/* tooltip do gráfico de receita */
.lc-plot { position: relative; }
.lc-tip {
  position: absolute; transform: translate(-50%, calc(-100% - 14px)); pointer-events: none; z-index: 5;
  background: var(--nv-ink); color: #fff; border-radius: 12px; padding: .55rem .7rem;
  font-size: .72rem; line-height: 1.45; white-space: nowrap; box-shadow: 0 10px 26px rgba(16,18,24,.32);
}
html[data-theme="dark"] .lc-tip { background: #2A2D35; }
.lc-tip[hidden] { display: none; }
.lc-tip b { display: block; font-size: .74rem; margin-bottom: .2rem; }
.lc-tip span { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.75); }
.lc-tip strong { color: #fff; margin-left: auto; padding-left: 10px; }
.lc-tip i.k { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }
.lc-tip i.k.cur { background: var(--nv-red-light); }
.lc-tip i.k.prev { background: #9AA0AC; }
.lc-tip em { display: block; font-style: normal; font-weight: 800; margin-top: .25rem; font-size: .7rem; }
.lc-tip em.pos { color: #4ADE80; }
.lc-tip em.neg { color: #FCA5A5; }

/* linha 3: lista "Próximos Semanais" (estilo Recent emails) + donut */
.d2-row3 { display: grid; gap: 1.4rem; align-items: start; }
@media (min-width: 1000px) { .d2-row3 { grid-template-columns: 1.5fr 1fr; } }
.d2-list { display: flex; flex-direction: column; }
.d2-li { display: flex; align-items: center; gap: 12px; padding: .65rem .2rem; border-bottom: 1px solid var(--nv-border); flex-wrap: wrap; }
.d2-li:last-child { border-bottom: none; }
.d2-ava { width: 36px; height: 36px; font-size: .72rem; flex-shrink: 0; }
.d2-li-txt { flex: 1; min-width: 140px; line-height: 1.25; }
.d2-li-txt b { font-size: .84rem; display: block; }
.d2-li-txt span { font-size: .7rem; color: var(--nv-ink-2); }
.d2-li-val { text-align: right; line-height: 1.25; margin-left: auto; }
.d2-li-val b { font-size: .84rem; }
.d2-li-val span { display: block; font-size: .68rem; color: var(--nv-ink-2); }

/* coluna direita: status da assinatura — card VERMELHO nos dois temas */
.d2-sub {
  padding: 1.15rem 1.2rem;
  background: linear-gradient(135deg, var(--nv-red-light) 0%, var(--nv-red) 55%, var(--nv-red-dark) 100%);
  border-color: transparent; color: #fff;
}
.d2-sub .d2-mini-lbl { color: rgba(255,255,255,.8); margin-bottom: 0; }
.d2-sub-st { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; margin: .15rem 0 .55rem; color: #fff; }
.d2-sub-st.warn { color: #FFE08A; }
.d2-sub-bar { background: rgba(255,255,255,.25) !important; margin-bottom: .5rem; }
.d2-sub-bar i { background: #fff !important; }
.d2-sub-note { font-size: .72rem; color: rgba(255,255,255,.85); margin-bottom: .8rem; }
/* botão legível sobre o vermelho: branco com texto vermelho */
.d2-sub .btn { background: #fff; color: var(--nv-red); box-shadow: 0 4px 14px rgba(0,0,0,.16); font-weight: 700; }
.d2-sub .btn:hover:not(:disabled) { background: #FFF1F2; color: var(--nv-red-dark); transform: translateY(-1px); }

/* nota destacada (como o "Board meeting") */
.d2-note { display: flex; gap: 10px; padding: 1rem 1.1rem; align-items: flex-start; }
.d2-note-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--nv-red); margin-top: 5px; flex-shrink: 0; }
.d2-note b { font-size: .82rem; display: block; }
.d2-note span { font-size: .72rem; color: var(--nv-ink-2); line-height: 1.45; }

/* ── DASHBOARD estilo referência: mapa grande + coluna central + frota ── */
.dash-grid { display: grid; gap: 1.4rem; margin-bottom: 1.4rem; align-items: stretch; }
@media (min-width: 1100px) { .dash-grid { grid-template-columns: 1.35fr 1fr 0.95fr; } }
.dash-col { display: flex; flex-direction: column; gap: 1.4rem; min-width: 0; }
.dash-col .panel, .dash-grid .panel { margin-bottom: 0; }

/* card do mapa: gráfico ocupa o meio, faixa de progresso embaixo (como o
   endereço no "Location Live") */
.dash-map { display: flex; flex-direction: column; }
.dash-map-chart { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.map-strip {
  display: flex; align-items: center; gap: 12px; margin-top: .8rem;
  background: var(--nv-card); border: 1px solid var(--nv-border);
  border-radius: 999px; padding: .55rem .9rem; box-shadow: var(--nv-shadow);
}
.map-strip .ms-ico { width: 30px; height: 30px; border-radius: 50%; background: rgba(var(--nv-rgb), .1); color: var(--nv-red); display: grid; place-items: center; flex-shrink: 0; }
.map-strip .ms-ico svg { width: 16px; height: 16px; }
.map-strip .ms-txt { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.map-strip .ms-txt b { font-size: .82rem; }
.map-strip .ms-txt span { font-size: .64rem; color: var(--nv-ink-2); }
.map-strip .ms-txt.right { text-align: right; }
.map-strip .ms-bar { flex: 1; height: 7px; border-radius: 99px; background: var(--nv-card-2); overflow: hidden; min-width: 40px; }
.map-strip .ms-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--nv-red), #17181C); }

/* faixa da semana (estilo "Weather": dia atual elevado e escuro) */
.wk-strip { display: flex; gap: 8px; overflow-x: auto; padding: .3rem .1rem .45rem; scrollbar-width: none; }
.wk-strip::-webkit-scrollbar { display: none; }
.wk-chip {
  flex: 1; min-width: 58px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: .6rem .3rem .5rem; border-radius: 16px; border: 1px solid var(--nv-border);
  background: var(--nv-card-2); color: var(--nv-ink-2);
}
.wk-chip .wk-day { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.wk-chip .wk-ico svg { width: 16px; height: 16px; }
.wk-chip .wk-val { font-size: .74rem; font-weight: 800; color: var(--nv-ink); }
.wk-chip .wk-sub { font-size: .6rem; }
.wk-chip.today {
  background: var(--nv-ink); color: rgba(255,255,255,.75); border-color: var(--nv-ink);
  transform: translateY(-5px) scale(1.06); box-shadow: 0 10px 22px rgba(16,18,24,.28);
}
.wk-chip.today .wk-val { color: #fff; }
.wk-chip.today .wk-ico { color: var(--nv-red); }
html[data-theme="dark"] .wk-chip.today { background: #F1F2F5; color: #5C6270; border-color: #F1F2F5; }
html[data-theme="dark"] .wk-chip.today .wk-val { color: #17181D; }

/* dupla de KPIs compactos na coluna central */
.kpi-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.kpi-duo .kpi { margin-bottom: 0; }
.kpi-duo .kpi .kpi-val { font-size: 1.45rem; }
@media (max-width: 560px) { .kpi-duo { grid-template-columns: 1fr; } }

/* card da FROTA (estilo "Car details": imagem grande + seletor + minis) */
.dash-fleet { display: flex; flex-direction: column; text-align: center; }
.df-img { display: grid; place-items: center; padding: .6rem 0 .2rem; }
.df-img img { max-height: 150px; width: auto; max-width: 100%; filter: drop-shadow(0 14px 22px rgba(16,18,24,.22)); }
.df-name { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; margin-top: .4rem; }
.df-sub { font-size: .78rem; color: var(--nv-ink-2); margin-bottom: .9rem; }
.df-selector {
  display: flex; gap: 4px; background: var(--nv-card-2); border: 1px solid var(--nv-border);
  border-radius: 999px; padding: 4px; margin-bottom: 1rem; cursor: pointer;
}
.df-selector button {
  flex: 1; border: none; background: none; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: .45rem .3rem; border-radius: 999px; color: var(--nv-ink-2); transition: all .18s;
}
.df-selector button b { font-size: .95rem; color: var(--nv-ink); }
.df-selector button span { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.df-selector button:hover { background: var(--nv-card); box-shadow: var(--nv-shadow); }
.df-duo { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.df-mini {
  background: var(--nv-card-2); border: 1px solid var(--nv-border); border-radius: 16px;
  padding: .8rem .6rem; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.df-mini .dm-lbl { font-size: .66rem; font-weight: 700; color: var(--nv-ink-2); display: inline-flex; align-items: center; gap: 4px; }
.df-mini .dm-lbl svg { width: 13px; height: 13px; }
.df-mini b { font-size: 1.35rem; letter-spacing: -.02em; }
.df-mini .dm-sub { font-size: .62rem; color: var(--nv-ink-2); }
.df-next { margin-top: .9rem; display: flex; flex-direction: column; gap: .5rem; text-align: left; }
.df-next-row { display: flex; align-items: center; gap: 8px; background: var(--nv-card-2); border: 1px solid var(--nv-border); border-radius: 12px; padding: .5rem .6rem; }
.df-next-row .dn-ico { width: 26px; height: 26px; border-radius: 8px; background: rgba(var(--nv-rgb), .1); color: var(--nv-red); display: grid; place-items: center; flex-shrink: 0; }
.df-next-row .dn-ico svg { width: 14px; height: 14px; }
.df-next-row .dn-txt { flex: 1; font-size: .72rem; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-next-row .dn-txt small { display: block; font-weight: 500; color: var(--nv-ink-2); }
.df-next-row .badge { flex-shrink: 0; font-size: .62rem; padding: .18rem .5rem; }

.clockw {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--nv-card); border: 1px solid var(--nv-border);
  border-radius: 999px; padding: .42rem 1rem; box-shadow: var(--nv-shadow);
  font-size: .82rem; font-weight: 600; color: var(--nv-ink); white-space: nowrap;
}
.clockw .cw-time { font-size: .95rem; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.clockw .cw-date { color: var(--nv-ink-2); text-transform: capitalize; }
.clockw .cw-temp { font-weight: 700; }
.clockw .cw-sep { width: 1px; height: 16px; background: var(--nv-border); }
@media (max-width: 700px) { .clockw .cw-date, .clockw .cw-sep:first-of-type { display: none; } }

/* ═══════════════════════════════════════════════════════════
   PERSONALIZAR — logo, paleta de cores e preview do motorista
   ═══════════════════════════════════════════════════════════ */
.pz-logo-box {
  width: 72px; height: 72px; border-radius: 18px; overflow: hidden; flex-shrink: 0;
  background: var(--nv-card-2); display: grid; place-items: center; cursor: pointer;
  border: 2px dashed var(--gray-5); color: var(--nv-ink-2); transition: border-color .18s;
}
.pz-logo-box:hover { border-color: var(--nv-red); color: var(--nv-red); }
.pz-logo-box img { width: 100%; height: 100%; object-fit: cover; }

.pz-palette { display: flex; gap: 12px; flex-wrap: wrap; }
.pz-swatch {
  width: 46px; height: 46px; border-radius: 50%; border: 3px solid transparent;
  background: var(--sw); cursor: pointer; display: grid; place-items: center;
  color: #fff; transition: transform .18s var(--ease-spring), box-shadow .18s;
  box-shadow: 0 4px 12px rgba(16,18,24,.18);
}
.pz-swatch svg { width: 20px; height: 20px; opacity: 0; transition: opacity .15s; }
.pz-swatch:hover { transform: scale(1.12); }
.pz-swatch.active { border-color: var(--nv-card); outline: 3px solid var(--sw); }
.pz-swatch.active svg { opacity: 1; }

/* divisor de seção (ex.: personalização dentro da aba Motoristas) */
.section-split { display: flex; align-items: center; gap: 12px; margin: 1.8rem 0 1.2rem; }
.section-split .ss-line { flex: 1; height: 1px; background: var(--nv-border); }
.section-split .ss-txt {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: var(--nv-ink-2);
}
.section-split .ss-txt svg { width: 15px; height: 15px; color: var(--nv-red); }

/* card do link de acesso dos motoristas */
.link-card .pix-code { font-size: .8rem; word-break: break-all; }

/* mini "celular" com o app do motorista */
.pz-phone { display: grid; place-items: center; }
.pzp-frame {
  width: 100%; max-width: 320px; border-radius: 26px; overflow: hidden;
  border: 6px solid #17181C; background: var(--nv-canvas);
  display: flex; min-height: 380px; box-shadow: var(--nv-shadow-lg);
}
.pzp-side { width: 52px; background: #141519; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0; flex-shrink: 0; }
.pzp-logo { width: 32px; height: 32px; border-radius: 9px; overflow: hidden; display: grid; place-items: center; margin-bottom: 4px; }
.pzp-nav { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #9AA0AC; background: rgba(255,255,255,.07); }
.pzp-nav svg { width: 15px; height: 15px; }
.pzp-nav.on { color: #fff; }
.pzp-main { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pzp-title { font-size: .78rem; font-weight: 800; color: var(--nv-ink); }
.pzp-title small { display: block; font-weight: 500; color: var(--nv-ink-2); font-size: .64rem; }
.pzp-hero { border-radius: 14px; padding: .8rem .9rem; color: #fff; }
.pzp-hero small { font-size: .56rem; font-weight: 800; letter-spacing: .08em; opacity: .8; display: block; }
.pzp-hero b { font-size: 1.15rem; display: block; margin: 2px 0 8px; }
.pzp-hero .pzp-btn { display: inline-block; background: #fff; color: #17181C; border-radius: 999px; padding: .3rem .7rem; font-size: .62rem; font-weight: 800; }
.pzp-card { background: var(--nv-card); border: 1px solid var(--nv-border); border-radius: 14px; padding: .7rem .8rem; }
.pzp-row { display: flex; align-items: center; justify-content: space-between; font-size: .68rem; font-weight: 700; color: var(--nv-ink); }
.pzp-row i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-style: normal; }
.pzp-row i svg { width: 14px; height: 14px; }
.pzp-cal { display: flex; gap: 8px; margin-top: .6rem; }
.pzp-cal span { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: .62rem; font-weight: 700; background: var(--nv-card-2); color: var(--nv-ink-2); border: 1.5px solid transparent; }
.pzp-cal span.ok { background: #16A34A; color: #fff; }
.pzp-cal span.hoje { background: transparent; }

/* ═══════════════════════════════════════════════════════════
   PAINEL DO DONO (admin Novu) — clientes e chamados
   ═══════════════════════════════════════════════════════════ */
.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.2rem; }
.admin-card { cursor: pointer; transition: transform .18s var(--ease-smooth), box-shadow .18s; }
.admin-card:hover { transform: translateY(-3px); box-shadow: var(--nv-shadow-lg); }
.ac-head { display: flex; align-items: center; gap: 10px; margin-bottom: .9rem; flex-wrap: wrap; }
.ac-head .avatar { width: 42px; height: 42px; }
.ac-id { min-width: 0; flex: 1; }
.ac-id b { display: block; font-size: .95rem; letter-spacing: -.01em; }
.ac-id span { font-size: .72rem; color: var(--nv-ink-2); }
.ac-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; text-align: center; margin-bottom: .9rem; }
.ac-nums div { background: var(--nv-card-2); border: 1px solid var(--nv-border); border-radius: 12px; padding: .6rem .3rem; }
.ac-nums b { display: block; font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.ac-nums span { font-size: .62rem; color: var(--nv-ink-2); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.ac-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .72rem; color: var(--nv-ink-2); flex-wrap: wrap; }
.ac-foot svg { width: 13px; height: 13px; vertical-align: -2px; }
.ac-since { opacity: .75; }

/* chamados */
.tk-card { cursor: pointer; }
.tk-card:hover { box-shadow: var(--nv-shadow-lg); }
.tk-head { display: flex; align-items: center; gap: 10px; margin-bottom: .7rem; flex-wrap: wrap; }
.tk-head .avatar { width: 38px; height: 38px; font-size: .74rem; }
.tk-id { flex: 1; min-width: 140px; }
.tk-id b { display: block; font-size: .92rem; }
.tk-id span { font-size: .72rem; color: var(--nv-ink-2); }
.tk-msg { font-size: .86rem; color: var(--nv-ink); line-height: 1.55; margin-bottom: .7rem; }
.tk-reply {
  display: flex; gap: 8px; align-items: flex-start; font-size: .8rem; color: var(--nv-ink-2);
  background: var(--nv-card-2); border-left: 3px solid var(--green); border-radius: 10px; padding: .55rem .7rem; margin-bottom: .8rem;
}
.tk-reply svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }
.tk-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* thread do chamado (modal) */
.tk-thread { display: flex; flex-direction: column; gap: .6rem; max-height: 260px; overflow-y: auto; }
.tk-bubble { padding: .7rem .85rem; border-radius: 14px; font-size: .85rem; line-height: 1.5; }
.tk-bubble b { display: block; font-size: .72rem; margin-bottom: .2rem; opacity: .75; }
.tk-bubble small { display: block; font-size: .66rem; opacity: .6; margin-top: .3rem; }
.tk-bubble.cli { background: var(--nv-card-2); border: 1px solid var(--nv-border); border-bottom-left-radius: 5px; }
.tk-bubble.novu { background: rgba(var(--nv-rgb), .1); border: 1px solid rgba(var(--nv-rgb), .25); border-bottom-right-radius: 5px; align-self: flex-end; max-width: 92%; }

/* ═══════════════════════════════════════════════════════════
   ASSINATURA (aba) + TELA DE BLOQUEIO
   ═══════════════════════════════════════════════════════════ */
/* Assinatura bloqueada: as demais abas ficam visualmente travadas */
body.sub-locked .nav-item:not([data-key="assinatura"]) { opacity: .4; pointer-events: none; filter: grayscale(1); }
body.sub-locked .mobi-fab { display: none; }

/* Plano Pro: hero e ícones em destaque dourado-avermelhado */
.sub-hero.pro { background: linear-gradient(135deg, #2A1216 0%, #4A1A22 55%, #17181C 100%); }
.sub-hero.pro .sh-ico { background: linear-gradient(135deg, #FBBF24, var(--nv-red)); }

/* Card de upgrade para o Pro */
.upgrade-card { position: relative; overflow: hidden; }
.upgrade-card::after {
  content: ''; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px;
  border-radius: 50%; background: radial-gradient(circle, rgba(var(--nv-rgb), .14), transparent 70%);
}
.upgrade-card .up-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; color: var(--nv-red);
  background: rgba(var(--nv-rgb), .1); border-radius: 999px; padding: .3rem .75rem; margin-bottom: .7rem;
}
.upgrade-card .up-badge svg { width: 14px; height: 14px; }
.upgrade-card .up-title { font-size: 1.15rem; margin-bottom: .4rem; }
.upgrade-card .up-desc { margin-bottom: .9rem; max-width: 640px; }
.upgrade-card .up-list { list-style: none; display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.1rem; }
.upgrade-card .up-list li { display: flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; color: var(--nv-ink); }
.upgrade-card .up-list svg { width: 16px; height: 16px; color: var(--green); flex-shrink: 0; }
.upgrade-card .up-foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; position: relative; }
.upgrade-card .up-price b { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; }
.upgrade-card .up-price span { color: var(--nv-ink-2); font-size: .8rem; font-weight: 600; }
.sub-hero {
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  padding: 1.5rem 1.6rem; border-radius: 22px; margin-bottom: 1.4rem;
  background: linear-gradient(135deg, #1B1C21 0%, #2A2C33 100%); color: #fff;
  border: 1px solid rgba(255,255,255,0.08); box-shadow: var(--nv-shadow);
}
.sub-hero .sh-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, var(--nv-red-light), var(--nv-red-dark)); flex-shrink: 0; }
.sub-hero .sh-plan { font-size: 1.25rem; font-weight: 700; }
.sub-hero .sh-sub { font-size: .82rem; color: rgba(255,255,255,0.65); }
.sub-hero .sh-price { margin-left: auto; text-align: right; }
.sub-hero .sh-price .v { font-size: 1.6rem; font-weight: 700; }
.sub-hero .sh-price .p { font-size: .74rem; color: rgba(255,255,255,0.6); }
.sub-days {
  height: 8px; border-radius: 99px; background: rgba(255,255,255,0.14); overflow: hidden; width: 100%;
}
.sub-days i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--nv-red-light), #22C55E); transition: width .6s var(--ease-smooth); }

.paywall-wrap { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1.2rem; }
.paywall-card { width: 100%; max-width: 480px; padding: 2.4rem 2.2rem; border-radius: 26px; background: var(--nv-card); border: 1px solid var(--nv-border); box-shadow: var(--nv-shadow-lg); text-align: center; }
.paywall-card .pw-ico { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 20px; display: grid; place-items: center; background: rgba(var(--nv-rgb), 0.1); color: var(--nv-red); }
.paywall-card .pw-ico svg { width: 30px; height: 30px; }

/* aviso de vencimento (banner no topo do conteúdo) */
.sub-warn {
  display: flex; align-items: center; gap: 10px; padding: .8rem 1.1rem;
  border-radius: 14px; margin-bottom: 1.2rem; font-size: .86rem; font-weight: 500;
  background: var(--amber-pale); color: var(--amber); border: 1px solid rgba(217,119,6,0.25);
  animation: nvUp .4s var(--ease-smooth) backwards;
}
.sub-warn.danger { background: var(--red-pale); color: var(--red); border-color: rgba(220,38,38,0.3); }
.sub-warn .btn { margin-left: auto; flex-shrink: 0; }

/* ─── LOGIN: um ambiente por endereço ─── */
.auth-card.auth-admin { border-top: 4px solid var(--nv-red); }
.demo-box .demo-switch {
  margin-top: .7rem; padding-top: .6rem; border-top: 1px dashed var(--nv-border);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .74rem; color: var(--nv-ink-2);
}
.demo-box .demo-switch a {
  background: var(--nv-card); border: 1px solid var(--nv-border); color: var(--nv-ink);
  border-radius: 999px; padding: .22rem .6rem; font-weight: 700; text-decoration: none;
}
.demo-box .demo-switch a:hover { border-color: var(--nv-red); color: var(--nv-red); }

/* ─── LOGIN no tema novo ─── */
.auth-card { border-radius: 26px; }
html[data-theme="dark"] .auth-card { background: var(--nv-card); }

/* ═══════════════════════════════════════════════════════════
   MODO ESCURO — revisão geral (fundos claros fixos do app.css)
   ═══════════════════════════════════════════════════════════ */
html[data-theme="dark"] .notif-dropdown { background: var(--nv-card); border-color: var(--nv-border); box-shadow: var(--nv-shadow-lg); }
html[data-theme="dark"] .bell-btn,
html[data-theme="dark"] .notif-latest { background: var(--nv-card); border-color: var(--nv-border); color: var(--nv-ink); }
html[data-theme="dark"] .file-row,
html[data-theme="dark"] .chat-ended,
html[data-theme="dark"] .quick-item { background: var(--nv-card-2); border-color: var(--nv-border); }
html[data-theme="dark"] .quick-item:hover { background: var(--nv-card); }
html[data-theme="dark"] .add-tile,
html[data-theme="dark"] .dropzone,
html[data-theme="dark"] .upload-mini { background: var(--nv-card-2); border-color: var(--nv-border); }
html[data-theme="dark"] table.tbl tr { background: transparent; }
@media (max-width: 900px) {
  html[data-theme="dark"] table.tbl tr,
  html[data-theme="dark"] table.tbl tbody tr:hover { background: var(--nv-card-2); border-color: var(--nv-border); }
}

/* chat do motorista (aba Falar com a empresa) no escuro */
html[data-theme="dark"] .chat-window, html[data-theme="dark"] .chat-box { background: var(--nv-card-2); border-color: var(--nv-border); }
html[data-theme="dark"] .chat-head,
html[data-theme="dark"] .chat-input { background: var(--nv-card); border-color: var(--nv-border); }
html[data-theme="dark"] .chat-msg.bot .bubble { background: var(--nv-card); color: var(--nv-ink); border-color: var(--nv-border); box-shadow: none; }
html[data-theme="dark"] .chat-field { background: var(--nv-card-2); border-color: var(--nv-border); color: var(--nv-ink); }
html[data-theme="dark"] .chat-chip { background: var(--nv-card); color: var(--nv-ink); }
html[data-theme="dark"] .chat-reply-btn { background: var(--nv-card-2); border-color: var(--nv-border); color: var(--nv-ink-2); }
html[data-theme="dark"] .modal-close:hover { background: var(--nv-card-2); }
/* o QR Pix precisa de fundo branco para leitura — mantém proposital */

/* ═══════════════════════════════════════════════════════════
   CHAT DO MOTORISTA — mesmo visual do chat Mobi (cliente SaaS)
   ═══════════════════════════════════════════════════════════ */
.chat-mobi { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.chat-mobi .chat-head {
  background: var(--nv-side); color: #fff; border-bottom: none;
  padding: .9rem 1.1rem; backdrop-filter: none; flex-shrink: 0;
}
.chat-mobi .chat-ava {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--nv-red-light), var(--nv-red-dark)); color: #fff;
}
.chat-mobi .chat-ava svg { width: 20px; height: 20px; }
.chat-mobi .chat-name { font-weight: 700; font-size: .95rem; color: #fff; }
.chat-mobi .chat-status { font-size: .72rem; color: rgba(255,255,255,.65); }
.chat-mobi .chat-dot { background: #22C55E; }
.chat-mobi .chat-wa { background: rgba(255,255,255,.12); border: none; color: #fff; }
.chat-mobi .chat-wa:hover { background: rgba(255,255,255,.22); }
.chat-mobi .chat-scroll { background: var(--nv-card-2); padding: 1rem; gap: .55rem; }
.chat-mobi .chat-msg.bot .bubble {
  background: var(--nv-card); color: var(--nv-ink); border: 1px solid var(--nv-border);
  border-bottom-left-radius: 6px; box-shadow: none;
}
.chat-mobi .chat-msg.me .bubble {
  background: var(--nv-ink); color: var(--nv-card); border-bottom-right-radius: 6px;
}
html[data-theme="dark"] .chat-mobi .chat-msg.me .bubble { background: #F1F2F5; color: #17181D; }
.chat-mobi .chat-mini-ava { background: linear-gradient(135deg, var(--nv-red-light), var(--nv-red-dark)); color: #fff; }
.chat-mobi .chat-input { background: var(--nv-card); border-top: 1px solid var(--nv-border); padding: .8rem; }
.chat-mobi .chat-field { background: var(--nv-card-2); border: 1.5px solid var(--nv-border); border-radius: 999px; color: var(--nv-ink); }
.chat-mobi .chat-field:focus { border-color: var(--nv-red); box-shadow: none; }
.chat-mobi .chat-send {
  width: 42px; height: 42px; border-radius: 50%; background: var(--nv-red); color: #fff; border: none;
}
.chat-mobi .chat-send:hover { background: var(--nv-red-dark); transform: scale(1.06); }
.chat-mobi .chat-chip { background: var(--nv-card); border: 1px solid var(--nv-border); color: var(--nv-ink); border-radius: 999px; font-weight: 600; }
.chat-mobi .chat-chip:hover { border-color: var(--nv-red); color: var(--nv-red); }

/* chips de acesso rápido no chat do motorista (redirecionam a aba) */
.chat-chip.chat-chip-goto {
  background: rgba(var(--nv-rgb), 0.08); border: 1px solid rgba(var(--nv-rgb), 0.3); color: var(--nv-red);
  display: inline-flex; align-items: center; gap: 6px;
}
.chat-chip.chat-chip-goto:hover { background: var(--nv-red); color: #fff; }
.chat-chip.chat-chip-goto svg { width: 14px; height: 14px; }