/* =============================================================================
   dotacar — sistema de design
   -----------------------------------------------------------------------------
   Direção: LIGHT (branco quente) + ORANGE ENERGY + AUTOMOTIVE + DATA VIZ.
   (Virou de dark p/ light em 2026-09-11 a pedido do dono: "branco e laranja, mais moderno".
    Só os VALORES dos tokens mudaram — os NOMES seguem, e as telas usam tokens, então o app
    inteiro acompanha. Excecoes hardcoded (rgba 255,255,255) foram corrigidas caso a caso.)
   Os tokens abaixo são os do pacote "EV Management Design System" fornecido pelo
   dono — mantidos com os MESMOS NOMES de propósito, para que qualquer trecho
   daquela referência cole aqui sem tradução.

   Servido em /ds.css. Nenhuma página redefine cor ou medida.
   Documentação: docs/DESIGN_SYSTEM.md
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* --- laranja: energia, ação e prioridade — tokens EXATOS do ev-drive-kit do dono --- */
  --color-primary:#FF8A00; --color-primary-light:#FF9F1C; --color-primary-dark:#E76F00;
  --color-primary-soft:#FFF5EB;

  /* --- fundo em camadas (branco QUENTE + cinza-claro do ev-drive-kit) -------- */
  --color-background:#F7F5F2; --color-background-secondary:#FFFFFF; --color-background-tertiary:#F3F4F6;
  --color-surface:#FFFFFF; --color-surface-hover:#F2F4F7; --color-surface-active:#EAEDF1;

  --color-border:#E5E7EB; --color-border-light:#EFF1F4; --color-border-primary:rgba(255,138,0,.28);

  --color-text-primary:#1F2937; --color-text-secondary:#6B7280;
  /* terciário #8A93A0 mantido (~4.5:1 no fundo claro, passa WCAG AA); o kit usa #9CA3AF só em eixos de gráfico. */
  --color-text-tertiary:#8A93A0; --color-text-disabled:#B7BEC8;

  --color-success:#C2410C; --color-warning:#F59E0B; --color-danger:#EF4444; --color-info:#3B82F6;

  --font-display:32px; --font-h1:28px; --font-h2:22px; --font-h3:18px;
  --font-body:15px; --font-small:13px; --font-caption:11px;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;

  --radius-sm:10px; --radius-md:14px; --radius-lg:18px; --radius-xl:28px; --radius-pill:999px;

  --sidebar-width:240px;
  --shadow-card:0 1px 2px rgba(31,41,55,.04),0 10px 30px -18px rgba(31,41,55,.20); --shadow-modal:0 12px 40px rgba(31,41,55,.14);
  --transition-fast:120ms; --transition-normal:200ms; --transition-slow:300ms;

  --nav-h:70px;   /* barra inferior; a altura já é reservada no padding do body */

  /* --- ponte: nomes semânticos que as telas antigas usam -------------------- */
  --bg:var(--color-background); --surface:var(--color-surface); --surface-2:var(--color-background-tertiary);
  --line:var(--color-border); --line-soft:var(--color-border);
  --ink:var(--color-text-primary); --ink-2:var(--color-text-secondary); --muted:var(--color-text-tertiary);
  --brand:var(--color-primary); --brand-ink:var(--color-primary-light); --brand-bg:var(--color-primary-soft);
  --ok:var(--color-success); --ok-bg:rgba(194,65,12,.12);
  --warn:var(--color-danger); --warn-bg:rgba(229,72,77,.10);
  --info:var(--color-info); --info-bg:rgba(59,130,246,.12);
  --card:var(--color-surface);
  --s1:var(--space-1); --s2:var(--space-2); --s3:var(--space-3); --s4:var(--space-4);
  --s5:var(--space-5); --s6:var(--space-6); --s8:var(--space-8); --s10:var(--space-10);
  --r-sm:var(--radius-md); --r:var(--radius-lg); --r-lg:var(--radius-xl); --r-pill:var(--radius-pill);
  --t-display:var(--font-display); --t-title:var(--font-h2); --t-lead:var(--font-h3);
  --t-body:var(--font-body); --t-cap:var(--font-small); --t-micro:var(--font-caption);
  --sh:none; --sh-2:var(--shadow-card);
  --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

body{
  margin:0; background:var(--color-background); color:var(--color-text-primary);
  font-family:var(--font); font-size:var(--font-body); line-height:1.45;
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + var(--space-4));
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }

/* --- cabeçalho ------------------------------------------------------------- */
.ds-top{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4) var(--space-4) var(--space-2); }
.ds-top .back{ font-size:24px; text-decoration:none; line-height:1; color:var(--color-text-primary);
  min-width:44px; min-height:44px; display:inline-grid; place-items:center; margin-left:-10px; }
.ds-top h1{ font-size:var(--font-h2); font-weight:650; margin:0; letter-spacing:-.3px; }
.ds-top .sub{ font-size:var(--font-small); color:var(--color-text-secondary); }
.ds-top .right{ margin-left:auto; display:flex; align-items:center; gap:var(--space-2); }

.ds-wrap{ padding:0 var(--space-4); }
.ds-sec{ font-size:var(--font-caption); color:var(--color-text-tertiary); text-transform:uppercase;
         letter-spacing:.7px; font-weight:600; margin:var(--space-6) var(--space-1) var(--space-2); }

/* --- cartão ---------------------------------------------------------------- */
.card, .ds-card{ background:var(--color-surface); border:1px solid var(--color-border);
                 border-radius:var(--radius-lg); box-shadow:var(--shadow-card); overflow:hidden; }
.card{ padding:var(--space-5); }
.ds-card.pad{ padding:var(--space-5); }
.ds-card + .ds-card{ margin-top:var(--space-3); }
/* cartão de prioridade: laranja discreto na borda e no fundo */
.card-primary, .ds-card.primary{ border-color:var(--color-border-primary);
  background:linear-gradient(145deg, rgba(255,138,0,.08), var(--color-surface)); }

/* --- números --------------------------------------------------------------- */
.ds-stat{ display:flex; flex-direction:column; gap:2px; }
.ds-stat .k{ font-size:var(--font-caption); color:var(--color-text-tertiary);
             text-transform:uppercase; letter-spacing:.6px; font-weight:600; }
.ds-stat .v{ font-size:var(--font-display); font-weight:660; letter-spacing:-1.2px; line-height:1.05; }
.ds-stat .v small{ font-size:var(--font-small); font-weight:500; color:var(--color-text-secondary);
                   letter-spacing:0; margin-left:3px; }
.ds-stat .note{ font-size:var(--font-small); color:var(--color-text-secondary); }
.ds-stat.sm .v{ font-size:var(--font-h2); }

.ds-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }
@media (min-width:620px){ .ds-grid{ grid-template-columns:repeat(4,1fr); } }
.ds-grid > .ds-card{ padding:var(--space-4); margin:0; }

/* --- bateria: o componente principal (regra do pacote) --------------------- */
/* Cor por faixa: 80-100 laranja · 40-79 laranja/amarelo · 20-39 amarelo · 0-19 vermelho */
/* A bateria agora e' o componente `carbat.js` (silhueta do carro + pack de celulas).
   O anel `.ds-bat` saiu em 2026-09-03 — ver docs/DESIGN_SYSTEM.md. */

/* barra linear, quando não cabe o anel */
.ds-bar{ height:8px; border-radius:99px; background:var(--color-background-tertiary); overflow:hidden; }
.ds-bar > i{ display:block; height:100%; width:0; background:var(--color-primary); transition:width var(--transition-slow); }

/* --- lista ----------------------------------------------------------------- */
.ds-li{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-5);
        border-bottom:1px solid var(--color-border); }
.ds-li:last-child{ border-bottom:0; }
.ds-li .txt{ flex:1; min-width:0; }
.ds-li .txt b{ display:block; font-weight:600; }
.ds-li .txt span{ display:block; font-size:var(--font-small); color:var(--color-text-secondary); margin-top:2px; }
.ds-li .val{ font-weight:650; white-space:nowrap; }
.ds-li > i{ color:var(--color-primary); font-size:20px; }

/* --- status: cor + ícone + texto, nunca cor sozinha ------------------------ */
.ds-pill{ display:inline-flex; align-items:center; gap:6px; font-size:var(--font-small); font-weight:600;
          padding:5px 11px; border-radius:var(--radius-pill);
          background:var(--color-background-tertiary); color:var(--color-text-secondary); }
.ds-pill.ok{ background:rgba(194,65,12,.12); color:var(--color-success); }
.ds-pill.warn{ background:rgba(239,68,68,.14); color:var(--color-danger); }
.ds-pill.info{ background:rgba(59,130,246,.14); color:var(--color-info); }
.ds-pill.energy{ background:var(--color-primary-soft); color:var(--color-primary-light); }
.ds-pill .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }

/* --- botões ---------------------------------------------------------------- */
.ds-btn,.btn-primary{ appearance:none; min-height:46px; padding:0 var(--space-5); border-radius:var(--radius-pill);
  font:inherit; font-weight:600; display:inline-flex; align-items:center; justify-content:center;
  gap:var(--space-2); border:1px solid var(--color-border); background:transparent; color:var(--color-text-primary);
  transition:background var(--transition-fast); }
.ds-btn:active,.btn-primary:active{ transform:translateY(1px); }
.ds-btn.pri,.btn-primary{ background:linear-gradient(135deg,#FFA62E,#F97316); border-color:transparent; color:#fff; box-shadow:0 6px 16px -8px rgba(231,111,0,.65); }
.ds-btn.ghost{ border-color:transparent; color:var(--color-text-secondary); }
.ds-btn.danger{ background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.3); color:var(--color-danger); }
.ds-btn.block{ width:100%; }
.ds-btn[disabled]{ opacity:.45; }

/* ações rápidas: ícone em cima, rótulo embaixo */
.ds-quick{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-2); }
.ds-quick .ds-btn{ flex-direction:column; gap:6px; padding:var(--space-3) var(--space-1); min-height:74px;
                   font-size:var(--font-caption); background:var(--color-surface); }
.ds-quick .ds-btn i{ font-size:22px; color:var(--color-primary); }

/* --- interruptor ----------------------------------------------------------- */
.ds-sw{ width:52px; height:31px; border-radius:var(--radius-pill); background:var(--color-surface-active);
        position:relative; flex:0 0 auto; border:1px solid var(--color-border); padding:0;
        transition:background var(--transition-fast); }
.ds-sw:after{ content:""; position:absolute; top:3px; left:3px; width:23px; height:23px; border-radius:50%;
              background:#fff; transition:left var(--transition-fast); }
.ds-sw.on{ background:var(--color-primary); border-color:var(--color-primary); }
.ds-sw.on:after{ left:25px; }
.ds-sw[disabled]{ opacity:.45; }

/* --- estados --------------------------------------------------------------- */
.ds-empty{ text-align:center; color:var(--color-text-tertiary); font-size:var(--font-small); padding:var(--space-10) var(--space-5); }
.ds-note{ font-size:var(--font-small); color:var(--color-text-secondary); line-height:1.55; padding:var(--space-3) var(--space-1); }
.ds-banner{ border-radius:var(--radius-lg); padding:var(--space-3) var(--space-4); font-size:var(--font-small);
            background:rgba(239,68,68,.12); color:var(--color-danger); margin-bottom:var(--space-3); }
.ds-banner.info{ background:rgba(59,130,246,.12); color:var(--color-info); }
.ds-banner.ok{ background:rgba(194,65,12,.10); color:var(--color-success); }
.ds-skel{ display:inline-block; min-width:2.5em; height:1em; border-radius:6px; vertical-align:middle;
          background:linear-gradient(90deg,#ECE5DA,#F5F0E8,#ECE5DA); background-size:200% 100%;
          animation:ds-sk 1.2s infinite; }
@keyframes ds-sk{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* --- barra inferior com ação central de energia ---------------------------- */
.ds-nav{ position:fixed; left:0; right:0; bottom:0; z-index:1200; background:rgba(255,255,255,.9);
         backdrop-filter:blur(14px); border-top:1px solid var(--color-border); display:flex;
         justify-content:space-around; align-items:flex-end;
         padding:var(--space-2) 0 calc(var(--space-2) + env(safe-area-inset-bottom,0px)); }
.ds-nav a{ display:flex; flex-direction:column; align-items:center; gap:3px; text-decoration:none;
           color:var(--color-text-tertiary); font-size:var(--font-caption); font-weight:600; flex:1; padding-top:4px; }
.ds-nav a i{ font-size:22px; }
.ds-nav a.on{ color:var(--color-primary); }
.ds-nav .fabnav{ flex:0 0 auto; width:54px; height:54px; border-radius:50%; background:var(--color-primary);
                 color:#fff; display:flex; align-items:center; justify-content:center; margin:-22px var(--space-2) 0;
                 box-shadow:0 8px 20px rgba(255,138,0,.28); border:0; }
.ds-nav .fabnav i{ font-size:26px; }

/* --- gaveta e folha -------------------------------------------------------- */
/* z-index alto DE PROPÓSITO: o Leaflet usa até 800 nos panes dele e o mapa
   passava por cima da gaveta aberta. */
.ds-drawer{ position:fixed; inset:0 auto 0 0; width:274px; z-index:1400; background:var(--color-background-secondary);
            border-right:1px solid var(--color-border); transform:translateX(-100%);
            transition:transform var(--transition-normal) ease; padding:var(--space-5) 0; overflow:auto; }
.ds-drawer.open{ transform:none; }
.ds-drawer .brand{ font-size:var(--font-h3); font-weight:700; color:var(--color-primary);
                   padding:0 var(--space-5) var(--space-4); display:flex; align-items:center; gap:var(--space-2); }
.ds-drawer a{ display:flex; align-items:center; gap:var(--space-3); padding:13px var(--space-5);
              text-decoration:none; font-weight:500; color:var(--color-text-secondary); }
.ds-drawer a.on{ color:var(--color-primary); background:var(--color-primary-soft); }
.ds-drawer a i{ font-size:20px; width:22px; }
.ds-ov{ position:fixed; inset:0; z-index:1300; background:rgba(0,0,0,.6); opacity:0; pointer-events:none;
        transition:opacity var(--transition-normal); }
.ds-ov.open{ opacity:1; pointer-events:auto; }
.ds-sheet{ position:fixed; left:0; right:0; bottom:0; z-index:1400; background:var(--color-background-secondary);
           border-top:1px solid var(--color-border); border-radius:var(--radius-xl) var(--radius-xl) 0 0;
           padding:var(--space-5) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom,0px));
           transform:translateY(110%); transition:transform var(--transition-normal); }
.ds-sheet.open{ transform:none; }

/* --- mapa: claro (tiles normais), e sempre ABAIXO da navegação -------------- */
.ds-mapwrap{ position:relative; z-index:0; }
.leaflet-container{ background:#E6E1D8 !important; }
.leaflet-tile{ filter:saturate(.86) brightness(1.02); }
.leaflet-control-attribution{ background:rgba(255,255,255,.72) !important; color:#6E655A !important; }
.leaflet-control-attribution a{ color:#877E70 !important; }

/* --- marca ----------------------------------------------------------------- */
/* Conjunto = símbolo + nome. O símbolo é um PONTO dentro de um ANEL DE ENERGIA:
   o ponto é o carro no mapa (o "dot" do nome), o anel é o mesmo arco da bateria da
   home — marca e dado principal falam a mesma língua. Nunca recolorir o símbolo
   nem trocar o laranja por outra cor. */
.ds-brand{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.ds-brand svg{ width:26px; height:26px; flex:0 0 auto; }
.ds-brand .nome{ font-size:var(--font-h3); font-weight:700; letter-spacing:-.4px;
                 color:var(--color-text-primary); }
.ds-brand.lg svg{ width:56px; height:56px; } .ds-brand.lg .nome{ font-size:var(--font-h1); }
.ds-brand .tag{ font-size:var(--font-caption); color:var(--color-text-tertiary); font-weight:500; }

/* --- utilitários ----------------------------------------------------------- */
.ds-row{ display:flex; align-items:center; gap:var(--space-3); }
.ds-between{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.ds-mt{ margin-top:var(--space-3); } .ds-mt-lg{ margin-top:var(--space-5); }
.ds-muted{ color:var(--color-text-secondary); } .ds-cap{ font-size:var(--font-small); }
.hidden{ display:none !important; }

/* ---------- Acessibilidade (auditoria UX noturna) ---------- */
/* G1 — foco visível por teclado/head-unit (antes: nenhum outline + tap-highlight zerado).
   Laranja da marca; só no foco por teclado (:focus-visible), não atrapalha o toque. */
:focus-visible{ outline:2px solid var(--color-primary); outline-offset:2px; border-radius:inherit; }
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--color-primary); outline-offset:1px; }
:focus:not(:focus-visible){ outline:none; }

/* G2 — respeita "reduzir movimento" do sistema (skeleton/drawer/spinner/pulse) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important; }
}


/* ===================== dotacar-ui (redesign_2): tokens --dc-* + componentes ===================== */
/* ============================================================
   dotacar — tokens
   Evolução da paleta atual (o laranja continua o mesmo), com dois
   ajustes: neutros quentes no lugar dos cinzas azulados do Tailwind,
   e um tema escuro de verdade — o app é usado dentro do carro, à noite.
   ============================================================ */


:root {
  /* ---------- marca ---------- */
  --dc-orange: #ff8a00;
  --dc-orange-deep: #e76f00;
  --dc-amber: #ffb347;
  --dc-orange-tint: #fff0e0;
  --dc-orange-tint-2: #fff8f1;
  --dc-grad: linear-gradient(135deg, #ffa62e 0%, #f97316 100%);
  --dc-grad-soft: linear-gradient(160deg, #fff6ec 0%, #ffe8d2 100%);

  /* ---------- neutros quentes ---------- */
  --dc-page: #f6f3ef;
  --dc-card: #ffffff;
  --dc-inset: #f5f1ec;
  --dc-line: #e9e3db;
  --dc-ink: #1a1714;
  --dc-ink-2: #6e655c;
  --dc-ink-3: #a29a92;

  /* ---------- semânticas ---------- */
  --dc-ok: #C2410C;        --dc-ok-tint: #FDEDE4;
  --dc-warn: #b06a00;      --dc-warn-tint: #fdf2e0;
  --dc-danger: #c53434;    --dc-danger-tint: #fbeaea;
  --dc-info: #2f6fc4;      --dc-info-tint: #eaf1fb;

  /* ---------- tipografia ---------- */
  --dc-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dc-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --dc-t-hero: 800 40px/1 var(--dc-font);
  --dc-t-display: 800 28px/1.06 var(--dc-font);
  --dc-t-title: 700 19px/1.25 var(--dc-font);
  --dc-t-value: 700 17px/1.3 var(--dc-font);
  --dc-t-strong: 600 14px/1.4 var(--dc-font);
  --dc-t-body: 400 14px/1.5 var(--dc-font);
  --dc-t-caption: 400 12.5px/1.45 var(--dc-font);
  --dc-t-label: 600 10.5px/1.2 var(--dc-mono);   /* rótulos de seção */
  --dc-t-read: 500 13px/1.2 var(--dc-mono);      /* leituras de instrumento */

  /* ---------- forma ---------- */
  --dc-r-lg: 22px;
  --dc-r: 16px;
  --dc-r-sm: 12px;
  --dc-r-pill: 999px;

  --dc-s1: 4px; --dc-s2: 8px; --dc-s3: 12px; --dc-s4: 16px;
  --dc-s5: 20px; --dc-s6: 24px; --dc-s8: 32px;

  --dc-shadow: 0 1px 2px rgba(26, 23, 20, .04), 0 10px 26px -18px rgba(26, 23, 20, .28);
  --dc-shadow-lift: 0 2px 6px rgba(26, 23, 20, .06), 0 22px 44px -26px rgba(26, 23, 20, .42);
  --dc-shadow-btn: 0 8px 18px -10px rgba(231, 111, 0, .8);

  --dc-touch: 48px;
  --dc-ease: cubic-bezier(.22, 1, .36, 1);
  --dc-dur: 620ms;
}

/* ---------- tema escuro ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dc-orange: #ff9a21;
    --dc-orange-deep: #ff7a00;
    --dc-amber: #ffc76b;
    --dc-orange-tint: #33220f;
    --dc-orange-tint-2: #241a12;
    --dc-grad: linear-gradient(135deg, #ffa93b 0%, #f97316 100%);
    --dc-grad-soft: linear-gradient(160deg, #2a1f16 0%, #1d1512 100%);

    --dc-page: #100e0d;
    --dc-card: #191615;
    --dc-inset: #221e1c;
    --dc-line: #2f2926;
    --dc-ink: #f7f2ec;
    --dc-ink-2: #a99d93;
    --dc-ink-3: #776c64;

    --dc-ok: #FF7A3D;        --dc-ok-tint: #2A1A12;
    --dc-warn: #f0b050;      --dc-warn-tint: #2b2012;
    --dc-danger: #ef6b6b;    --dc-danger-tint: #2e1616;
    --dc-info: #74a9ec;      --dc-info-tint: #16202e;

    --dc-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 28px -18px rgba(0, 0, 0, .9);
    --dc-shadow-lift: 0 2px 6px rgba(0, 0, 0, .6), 0 24px 48px -26px rgba(0, 0, 0, 1);
    --dc-shadow-btn: 0 8px 18px -10px rgba(255, 122, 0, .6);
  }
}

:root[data-theme="dark"] {
  --dc-orange: #ff9a21;
  --dc-orange-deep: #ff7a00;
  --dc-amber: #ffc76b;
  --dc-orange-tint: #33220f;
  --dc-orange-tint-2: #241a12;
  --dc-grad: linear-gradient(135deg, #ffa93b 0%, #f97316 100%);
  --dc-grad-soft: linear-gradient(160deg, #2a1f16 0%, #1d1512 100%);

  --dc-page: #100e0d;
  --dc-card: #191615;
  --dc-inset: #221e1c;
  --dc-line: #2f2926;
  --dc-ink: #f7f2ec;
  --dc-ink-2: #a99d93;
  --dc-ink-3: #776c64;

  --dc-ok: #FF7A3D;        --dc-ok-tint: #2A1A12;
  --dc-warn: #f0b050;      --dc-warn-tint: #2b2012;
  --dc-danger: #ef6b6b;    --dc-danger-tint: #2e1616;
  --dc-info: #74a9ec;      --dc-info-tint: #16202e;

  --dc-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 28px -18px rgba(0, 0, 0, .9);
  --dc-shadow-lift: 0 2px 6px rgba(0, 0, 0, .6), 0 24px 48px -26px rgba(0, 0, 0, 1);
  --dc-shadow-btn: 0 8px 18px -10px rgba(255, 122, 0, .6);
}
/* ============================================================
   dotacar — componentes
   Requer tokens.css
   ============================================================ */

.dc, .dc * { box-sizing: border-box; }

.dc {
  font-family: var(--dc-font);
  color: var(--dc-ink);
  background: var(--dc-page);
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Shell — topo fixo, conteúdo rolável, barra inferior
   ============================================================ */
.dc-app {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  background: var(--dc-page);
  overflow: hidden;
}

.dc-topbar {
  display: flex;
  align-items: center;
  gap: var(--dc-s3);
  padding: calc(10px + env(safe-area-inset-top, 0px)) var(--dc-s4) 10px;
  background: color-mix(in srgb, var(--dc-page) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms linear;
  z-index: 4;
}

.dc-topbar.is-stuck { border-bottom-color: var(--dc-line); }

.dc-iconbtn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--dc-ink);
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
  position: relative;
}

.dc-iconbtn:hover { background: var(--dc-inset); }
.dc-iconbtn:focus-visible { outline: 2px solid var(--dc-orange); outline-offset: 2px; }

.dc-topbar__id { flex: 1; min-width: 0; display: grid; gap: 1px; }

.dc-topbar__car {
  display: flex;
  align-items: center;
  gap: 5px;
  font: var(--dc-t-title);
  font-size: 17px;
  letter-spacing: -.01em;
}

.dc-topbar__sub {
  font: var(--dc-t-read);
  font-size: 11px;
  color: var(--dc-ink-3);
  letter-spacing: .01em;
}

/* pulso de "ao vivo" */
.dc-live {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dc-ok);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--dc-ok) 60%, transparent);
  animation: dc-pulse 2.4s ease-out infinite;
  flex: none;
}

@keyframes dc-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dc-ok) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.dc-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--dc-s2) var(--dc-s4) var(--dc-s6);
  /* flex, e não grid: num container de altura fixa o grid comprime as linhas
     cujo item tem overflow:hidden (min-size 0) — era o que achatava o herói */
  display: flex;
  flex-direction: column;
  gap: var(--dc-s5);
  scrollbar-width: thin;
}

.dc-scroll > * { flex: 0 0 auto; }

/* ---------- barra inferior ---------- */
.dc-nav {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--dc-card) 92%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--dc-line);
  z-index: 4;
}

.dc-nav__item {
  appearance: none;
  border: 0;
  background: transparent;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 7px 2px 5px;
  border-radius: 12px;
  color: var(--dc-ink-3);
  cursor: pointer;
  position: relative;
  min-height: 52px;
}

.dc-nav__item span { font: 600 10px/1 var(--dc-font); letter-spacing: .01em; }
.dc-nav__item:hover { color: var(--dc-ink-2); }
.dc-nav__item.is-active { color: var(--dc-orange-deep); }
.dc-nav__item:focus-visible { outline: 2px solid var(--dc-orange); outline-offset: -2px; }

.dc-nav__item.is-active::before {
  content: '';
  position: absolute;
  top: 0;
  width: 22px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--dc-grad);
}

/* ---------- gaveta agrupada ---------- */
.dc-drawer {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  pointer-events: none;
}

.dc-drawer__veil {
  grid-area: 1 / 1 / 2 / 3;
  background: rgba(12, 10, 9, .45);
  opacity: 0;
  transition: opacity 260ms var(--dc-ease);
  backdrop-filter: blur(2px);
}

/* z-index obrigatorio: o veil usa `backdrop-filter`, que cria contexto de empilhamento e
   por isso pinta ACIMA de irmao sem posicionamento — mesmo vindo antes no HTML. Sem isto o
   veil cobria o painel: o menu aparecia apagado E o toque num item caia no veil, que so
   FECHA a gaveta. Ou seja, a gaveta nova nao navegava. (achado em 2026-09-12) */
.dc-drawer__panel {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1 / 2 / 2;
  width: min(300px, 84%);
  background: var(--dc-card);
  border-right: 1px solid var(--dc-line);
  transform: translateX(-102%);
  transition: transform 300ms var(--dc-ease);
  overflow-y: auto;
  padding: var(--dc-s4) var(--dc-s3) var(--dc-s6);
  display: grid;
  gap: var(--dc-s4);
  align-content: start;
}

.dc-drawer.is-open { pointer-events: auto; }
.dc-drawer.is-open .dc-drawer__veil { opacity: 1; }
.dc-drawer.is-open .dc-drawer__panel { transform: none; }

.dc-drawer__brand {
  display: flex;
  align-items: center;
  gap: var(--dc-s2);
  padding: 0 var(--dc-s2) var(--dc-s3);
  border-bottom: 1px solid var(--dc-line);
}

.dc-drawer__brand strong { font: 700 18px/1 var(--dc-font); letter-spacing: -.02em; }
.dc-drawer__brand strong em { font-style: normal; color: var(--dc-orange); }

.dc-drawer__group { display: grid; gap: 2px; }

.dc-drawer__label {
  font: var(--dc-t-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dc-ink-3);
  padding: var(--dc-s2) var(--dc-s2) var(--dc-s1);
}

.dc-drawer__link {
  appearance: none;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: var(--dc-s3);
  width: 100%;
  min-height: 42px;
  padding: 0 var(--dc-s2);
  border-radius: 10px;
  color: var(--dc-ink);
  font: var(--dc-t-strong);
  cursor: pointer;
  text-align: left;
  /* link de menu nao e' texto corrido: sem sublinhado. Faltava aqui, entao os itens da gaveta
     apareciam SUBLINHADOS (na home e, depois da unificacao, em toda tela). Medido no render. */
  text-decoration: none;
}

.dc-drawer__link svg { color: var(--dc-ink-3); flex: none; }
.dc-drawer__link:hover { background: var(--dc-inset); }
.dc-drawer__link.is-active { background: var(--dc-orange-tint); color: var(--dc-orange-deep); }
.dc-drawer__link.is-active svg { color: var(--dc-orange-deep); }
.dc-drawer__link:focus-visible { outline: 2px solid var(--dc-orange); outline-offset: -2px; }

/* ============================================================
   Blocos genéricos
   ============================================================ */
.dc-sec {
  font: var(--dc-t-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dc-ink-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dc-s3);
  margin-bottom: var(--dc-s2);
}

.dc-sec a, .dc-sec button {
  font: var(--dc-t-label);
  letter-spacing: .08em;
  color: var(--dc-orange-deep);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-transform: none;
}

.dc-card {
  background: var(--dc-card);
  border: 1px solid var(--dc-line);
  border-radius: var(--dc-r);
  box-shadow: var(--dc-shadow);
  padding: var(--dc-s4);
  display: grid;
  gap: var(--dc-s3);
  align-content: start;
}

.dc-card--flush { padding: 0; overflow: hidden; }
.dc-card--plain { box-shadow: none; background: var(--dc-inset); border-color: transparent; }

.dc-head {
  display: flex;
  align-items: center;
  gap: var(--dc-s2);
}

.dc-head h2 { font: var(--dc-t-title); margin: 0; flex: 1; min-width: 0; letter-spacing: -.01em; }
.dc-head__icon { color: var(--dc-orange); display: grid; place-items: center; }

/* ---------- chips ---------- */
.dc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--dc-r-pill);
  font: 600 12px/1.2 var(--dc-font);
  background: var(--dc-inset);
  color: var(--dc-ink-2);
  white-space: nowrap;
}

.dc-chip--ok { background: var(--dc-ok-tint); color: var(--dc-ok); }
.dc-chip--warn { background: var(--dc-warn-tint); color: var(--dc-warn); }
.dc-chip--danger { background: var(--dc-danger-tint); color: var(--dc-danger); }
.dc-chip--brand { background: var(--dc-orange-tint); color: var(--dc-orange-deep); }

/* ---------- botões ---------- */
.dc-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dc-s2);
  min-height: 44px;
  padding: 0 var(--dc-s5);
  border-radius: var(--dc-r-pill);
  border: 1.5px solid transparent;
  font: var(--dc-t-strong);
  font-size: 14.5px;
  cursor: pointer;
  transition: transform 120ms var(--dc-ease), background-color 200ms var(--dc-ease);
}

.dc-btn:active { transform: translateY(1px); }
.dc-btn:focus-visible { outline: 2px solid var(--dc-orange); outline-offset: 3px; }
.dc-btn--primary { background: var(--dc-grad); color: #fff; box-shadow: var(--dc-shadow-btn); }
.dc-btn--ghost { background: var(--dc-inset); color: var(--dc-ink); }
.dc-btn--ghost:hover { background: var(--dc-line); }
.dc-btn--outline { border-color: var(--dc-line); background: var(--dc-card); color: var(--dc-ink); }
.dc-btn--outline:hover { border-color: var(--dc-orange); color: var(--dc-orange-deep); }
.dc-btn--full { width: 100%; }
.dc-btn--sm { min-height: 36px; padding: 0 var(--dc-s4); font-size: 13.5px; }

/* ============================================================
   Hero do veículo
   ============================================================ */
.dc-hero {
  position: relative;
  border-radius: var(--dc-r-lg);
  background: var(--dc-grad-soft);
  border: 1px solid var(--dc-line);
  box-shadow: var(--dc-shadow-lift);
  padding: var(--dc-s4) var(--dc-s4) 0;
  display: grid;
  gap: var(--dc-s2);
  overflow: hidden;
  isolation: isolate;
}

.dc-hero__top {
  display: flex;
  align-items: center;
  gap: var(--dc-s2);
  flex-wrap: wrap;
}

.dc-hero__stage {
  position: relative;
  display: grid;
  place-items: center;
  margin-top: -4px;
}

.dc-hero__car {
  width: 100%;
  max-width: 330px;
  aspect-ratio: 956 / 470;   /* reserva o box do car.png (956x470) ANTES de decodificar ->
                                sem reflow/corte ao (re)abrir a home; a imagem tem 482KB e,
                                sem isso, o box nasce com altura 0 e o overflow:hidden do hero
                                cortava o carro enquanto assentava. */
  height: auto;
  margin-top: -22%;
  filter: drop-shadow(0 20px 20px rgba(120, 60, 0, .22));
  pointer-events: none;
}

/* faixa de instrumentos: leitura de painel, em mono */
.dc-gauges {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border-top: 1px solid color-mix(in srgb, var(--dc-ink) 10%, transparent);
  margin: 0 calc(var(--dc-s4) * -1);
  padding: var(--dc-s3) var(--dc-s4) var(--dc-s4);
  background: color-mix(in srgb, var(--dc-card) 55%, transparent);
}

.dc-gauge { display: grid; gap: 2px; padding-right: var(--dc-s2); min-width: 0; }
.dc-gauge + .dc-gauge { border-left: 1px solid color-mix(in srgb, var(--dc-ink) 8%, transparent); padding-left: var(--dc-s3); }

.dc-gauge__label {
  font: var(--dc-t-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dc-ink-3);
}

.dc-gauge__value {
  font: var(--dc-t-value);
  font-size: 19px;
  color: var(--dc-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.dc-gauge__value small { font-size: .62em; font-weight: 600; color: var(--dc-ink-2); margin-left: 2px; }

/* ============================================================
   Ações rápidas — quatro alvos grandes, uma delas com "segurar"
   ============================================================ */
.dc-quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--dc-s2);
}

/* Duas acoes em vez de quatro (sairam o "Trancar" e o "Climatizar", que nao mandavam
   comando nenhum). Com 2 colunas os botoes ficam largos demais e parecem banner — a
   largura fica presa e o bloco centralizado. */
.dc-quick--2 {
  grid-template-columns: repeat(2, minmax(0, 168px));
  justify-content: center;
}

.dc-quick__btn {
  appearance: none;
  border: 1px solid var(--dc-line);
  background: var(--dc-card);
  border-radius: var(--dc-r);
  min-height: 74px;
  padding: var(--dc-s2) 4px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  color: var(--dc-ink);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: var(--dc-shadow);
  transition: border-color 180ms var(--dc-ease);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.dc-quick__btn span { font: 600 11.5px/1.1 var(--dc-font); }
.dc-quick__btn svg { color: var(--dc-orange-deep); }
.dc-quick__btn:focus-visible { outline: 2px solid var(--dc-orange); outline-offset: 2px; }
.dc-quick__btn:hover { border-color: color-mix(in srgb, var(--dc-orange) 45%, var(--dc-line)); }

/* preenchimento do "segurar para destrancar" */
.dc-quick__fill {
  position: absolute;
  inset: 0 100% 0 0;
  background: var(--dc-orange-tint);
  z-index: -1;
}

.dc-quick__btn.is-holding .dc-quick__fill {
  inset: 0 0 0 0;
  transition: inset var(--hold-dur, 1100ms) linear;
}

.dc-quick__btn.is-done {
  border-color: var(--dc-ok);
}

.dc-quick__btn.is-done svg, .dc-quick__btn.is-done span { color: var(--dc-ok); }

.dc-quick__hint {
  font: var(--dc-t-label);
  letter-spacing: .06em;
  text-transform: none;
  color: var(--dc-ink-3);
  text-align: center;
}

/* ============================================================
   Estado do carro — vista de cima com os valores ao lado
   O carro é um <img> (render com fundo transparente). Os eixos são
   variáveis, então trocar o render não desalinha as etiquetas:
     --dc-axle-front / --dc-axle-rear = posição dos eixos em % da altura.
   Sem imagem, entra a silhueta de reserva desenhada em SVG.
   ============================================================ */
.dc-topview {
  --dc-axle-front: 19%;
  --dc-axle-rear: 82%;
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  padding: var(--dc-s3) 0;
}

.dc-topview__car,
.dc-topview__svg {
  width: 53%;
  max-width: 208px;
  height: auto;
  display: block;
  filter: drop-shadow(0 14px 20px rgba(60, 40, 20, .22));
}

:root[data-theme="dark"] .dc-topview__car,
:root[data-theme="dark"] .dc-topview__svg {
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .7));
}

/* etiqueta de pressão, ancorada no eixo */
.dc-topview__tag {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 7px 12px;
  min-width: 74px;
  border-radius: var(--dc-r-sm);
  background: var(--dc-card);
  border: 1px solid var(--dc-line);
  box-shadow: var(--dc-shadow);
  transform: translateY(-50%);
}

.dc-topview__tag strong {
  font: 600 19px/1 var(--dc-mono);
  letter-spacing: -.02em;
  color: var(--dc-ink);
}

.dc-topview__tag span {
  font: var(--dc-t-label);
  letter-spacing: .12em;
  color: var(--dc-ink-3);
}

.dc-topview__tag.is-left { left: 0; }
.dc-topview__tag.is-right { right: 0; }
.dc-topview__tag.is-front { top: var(--dc-axle-front); }
.dc-topview__tag.is-rear { top: var(--dc-axle-rear); }

.dc-topview__tag.is-low {
  border-color: var(--dc-warn);
  background: var(--dc-warn-tint);
}

.dc-topview__tag.is-low strong,
.dc-topview__tag.is-low span { color: var(--dc-warn); }

/* fio ligando a etiqueta à roda */
.dc-topview__wire {
  position: absolute;
  height: 1px;
  background: repeating-linear-gradient(90deg,
    currentColor 0 4px, transparent 4px 8px);
  color: var(--dc-ink-3);
  opacity: .5;
  transform: translateY(-50%);
}

.dc-topview__wire.is-left { left: 78px; right: 58%; }
.dc-topview__wire.is-right { right: 78px; left: 58%; }
.dc-topview__wire.is-front { top: var(--dc-axle-front); }
.dc-topview__wire.is-rear { top: var(--dc-axle-rear); }

/* silhueta de reserva, usada só enquanto não há render de cima */
.dc-topview__svg .tv-paint { fill: url(#tvPaint); }
.dc-topview__svg .tv-shade { fill: url(#tvShade); }
.dc-topview__svg .tv-glass { fill: url(#tvGlass); }
.dc-topview__svg .tv-roof { fill: url(#tvRoof); }
.dc-topview__svg .tv-tire { fill: #16181c; }
.dc-topview__svg .tv-seam { stroke: rgba(0, 0, 0, .18); stroke-width: 1.2; fill: none; }

.dc-topview__badge {
  position: absolute;
  bottom: 0;
  font: var(--dc-t-label);
  letter-spacing: .1em;
  color: var(--dc-ink-3);
}

/* ---------- chips de abertura ---------- */
.dc-openings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

/* ============================================================
   Linhas de leitura (chave → valor), substitui os cards soltos
   ============================================================ */
.dc-readout { display: grid; }

.dc-readout__row {
  display: flex;
  align-items: center;
  gap: var(--dc-s3);
  padding: 11px 0;
  border-bottom: 1px solid var(--dc-line);
}

.dc-readout__row:last-child { border-bottom: 0; padding-bottom: 0; }
.dc-readout__row:first-child { padding-top: 0; }

.dc-readout__key {
  flex: 1;
  min-width: 0;
  font: var(--dc-t-body);
  color: var(--dc-ink-2);
  display: flex;
  align-items: center;
  gap: var(--dc-s2);
}

.dc-readout__key svg { color: var(--dc-ink-3); flex: none; }

.dc-readout__val {
  font: var(--dc-t-read);
  font-size: 13.5px;
  color: var(--dc-ink);
  text-align: right;
  white-space: nowrap;
}

.dc-readout__val.is-ok { color: var(--dc-ok); }
.dc-readout__val.is-warn { color: var(--dc-warn); }

/* ============================================================
   Comandos — peso por consequência
   ============================================================ */
.dc-cmd {
  display: flex;
  align-items: center;
  gap: var(--dc-s3);
  padding: var(--dc-s3) 0;
  border-bottom: 1px solid var(--dc-line);
}

.dc-cmd:last-child { border-bottom: 0; padding-bottom: 0; }
.dc-cmd:first-child { padding-top: 0; }

.dc-cmd__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--dc-orange-tint);
  color: var(--dc-orange-deep);
  display: grid;
  place-items: center;
  flex: none;
}

.dc-cmd--risk .dc-cmd__icon { background: var(--dc-danger-tint); color: var(--dc-danger); }

.dc-cmd__text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.dc-cmd__text strong { font: var(--dc-t-strong); font-size: 14.5px; }
.dc-cmd__text span { font: var(--dc-t-caption); color: var(--dc-ink-2); }

.dc-cmd__actions { display: flex; gap: 6px; flex: none; }

/* resposta do carro, não do pedido */
.dc-cmd__echo {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  font: var(--dc-t-read);
  font-size: 11.5px;
  color: var(--dc-ok);
  padding-top: 6px;
}

/* ============================================================
   Timeline de atividade
   ============================================================ */
.dc-timeline { display: grid; gap: 0; }

.dc-timeline__item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--dc-s3);
  padding: 10px 0;
  position: relative;
}

.dc-timeline__item::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: var(--dc-line);
}

.dc-timeline__item:first-child::before { top: 18px; }
.dc-timeline__item:last-child::before { bottom: calc(100% - 18px); }

.dc-timeline__dot {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--dc-card);
  border: 1.5px solid var(--dc-line);
  display: grid;
  place-items: center;
  color: var(--dc-ink-3);
  position: relative;
  z-index: 1;
  margin-top: 1px;
}

.dc-timeline__item.is-brand .dc-timeline__dot {
  border-color: color-mix(in srgb, var(--dc-orange) 55%, transparent);
  background: var(--dc-orange-tint);
  color: var(--dc-orange-deep);
}

.dc-timeline__text { font: var(--dc-t-body); padding-top: 1px; }
.dc-timeline__text small { display: block; font: var(--dc-t-caption); color: var(--dc-ink-2); }
.dc-timeline__when { font: var(--dc-t-read); font-size: 11.5px; color: var(--dc-ink-3); padding-top: 3px; }

/* ============================================================
   Viagem
   ============================================================ */
.dc-trip {
  display: grid;
  gap: var(--dc-s3);
  padding: var(--dc-s4) 0;
  border-bottom: 1px solid var(--dc-line);
}

.dc-trip:first-child { padding-top: 0; }
.dc-trip:last-child { border-bottom: 0; padding-bottom: 0; }

.dc-trip__head { display: flex; align-items: baseline; gap: var(--dc-s3); }
.dc-trip__when { flex: 1; display: grid; gap: 1px; min-width: 0; }
.dc-trip__when strong { font: var(--dc-t-strong); font-size: 15px; }
.dc-trip__when span { font: var(--dc-t-caption); color: var(--dc-ink-2); }

.dc-trip__km {
  font: var(--dc-t-display);
  font-size: 24px;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.dc-trip__km small { font-size: .5em; font-weight: 600; color: var(--dc-ink-2); }

.dc-trip__route {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--dc-s2);
  font: var(--dc-t-read);
  font-size: 12px;
  color: var(--dc-ink-2);
}

.dc-trip__bar {
  height: 8px;
  border-radius: var(--dc-r-pill);
  background: var(--dc-inset);
  position: relative;
  overflow: hidden;
}

.dc-trip__bar i {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: inherit;
  background: var(--dc-grad);
}

/* camada de trás = carga no início da viagem; a da frente = carga no fim.
   A diferença visível entre as duas é exatamente o que a viagem consumiu. */
.dc-trip__bar i.is-ghost { background: var(--dc-orange); opacity: .3; }

.dc-trip__meta {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--dc-s2);
}

.dc-trip__meta div { display: grid; gap: 1px; min-width: 0; }
.dc-trip__meta dt, .dc-trip__meta span:first-child {
  font: var(--dc-t-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dc-ink-3);
}
.dc-trip__meta strong { font: var(--dc-t-read); font-size: 14px; color: var(--dc-ink); }

/* ============================================================
   Comparação de custo (EV vs. gasolina)
   ============================================================ */
.dc-compare { display: grid; gap: var(--dc-s3); }

.dc-compare__row { display: grid; gap: 6px; }

.dc-compare__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--dc-s3);
  font: var(--dc-t-body);
}

.dc-compare__top b { font: var(--dc-t-read); font-size: 14px; }

.dc-compare__track {
  height: 12px;
  border-radius: var(--dc-r-pill);
  background: var(--dc-inset);
  overflow: hidden;
}

.dc-compare__track i { display: block; height: 100%; border-radius: inherit; background: var(--dc-grad); }
.dc-compare__row--alt .dc-compare__track i { background: var(--dc-ink-3); }

.dc-saved {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dc-s3);
  padding: var(--dc-s3);
  border-radius: var(--dc-r-sm);
  background: var(--dc-ok-tint);
  color: var(--dc-ok);
  font: var(--dc-t-strong);
}

.dc-saved b { font: var(--dc-t-display); font-size: 22px; letter-spacing: -.02em; }

/* ============================================================
   Estado vazio com proposta, não com lamento
   ============================================================ */
.dc-empty {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--dc-s3);
  padding: var(--dc-s6) var(--dc-s4);
}

.dc-empty__art {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--dc-orange-tint);
  color: var(--dc-orange-deep);
  display: grid;
  place-items: center;
}

.dc-empty strong { font: var(--dc-t-title); font-size: 17px; }
.dc-empty p { margin: 0; font: var(--dc-t-body); color: var(--dc-ink-2); max-width: 30ch; }

/* ============================================================
   Utilitários
   ============================================================ */
.dc-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dc-s3); }
.dc-row { display: flex; align-items: center; gap: var(--dc-s2); flex-wrap: wrap; }
.dc-mono { font-family: var(--dc-mono); font-variant-numeric: tabular-nums; }
.dc-note { font: var(--dc-t-caption); color: var(--dc-ink-3); }
.dc-note b { color: var(--dc-ink-2); font-weight: 600; }

.dc-big {
  font: var(--dc-t-hero);
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}

.dc-big small { font-size: .42em; font-weight: 700; color: var(--dc-ink-2); letter-spacing: 0; }

@media (prefers-reduced-motion: reduce) {
  .dc-live { animation: none; }
  .dc-drawer__panel, .dc-drawer__veil { transition: none; }
  .dc-quick__btn.is-holding .dc-quick__fill { transition-duration: 1ms; }
}

/* =============================================================================
   TEMA ESCURO — tokens LEGADOS (--color-*, --bg, --surface, --ink, ...)
   -----------------------------------------------------------------------------
   POR QUE ESTE BLOCO EXISTE (bug relatado pelo dono em 2026-09-12):
   "a tela home esta escura e o menu esta em branco".

   O bloco `dc` acima ja virava para o escuro sozinho (prefers-color-scheme), mas so
   redefinia os tokens --dc-*. Os tokens LEGADOS — que o nav.js (gaveta), o painel e as
   ~27 telas antigas usam — continuavam com os valores CLAROS. Resultado: fundo escuro
   com gaveta, cartoes e textos brancos por cima. Aqui os legados passam a ter escuro,
   apontando para a MESMA paleta dos --dc-* (uma paleta so, nao duas).

   Os dois seletores sao obrigatorios e fazem coisas diferentes:
     - @media prefers-color-scheme  -> aparelho no escuro E usuario em "sistema"
       (o `:not([data-theme="light"])` deixa a escolha "claro" ganhar do aparelho);
     - :root[data-theme="dark"]     -> usuario escolheu escuro na mao (/ajustes).
   Quem grava o data-theme e' o /tema.js.
   ============================================================================= */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary:#FF9A21; --color-primary-light:#FFB65C; --color-primary-dark:#FF7A00;
    --color-primary-soft:#33220F;

    --color-background:#100E0D; --color-background-secondary:#191615; --color-background-tertiary:#221E1C;
    --color-surface:#191615; --color-surface-hover:#221E1C; --color-surface-active:#2F2926;

    --color-border:#2F2926; --color-border-light:#221E1C; --color-border-primary:rgba(255,154,33,.32);

    --color-text-primary:#F7F2EC; --color-text-secondary:#A99D93;
    --color-text-tertiary:#877B72; --color-text-disabled:#5A514B;

    --color-success:#FF7A3D; --color-warning:#F0B050; --color-danger:#EF6B6B; --color-info:#74A9EC;

    --shadow-card:0 1px 2px rgba(0,0,0,.5),0 12px 28px -18px rgba(0,0,0,.9);
    --shadow-modal:0 12px 40px rgba(0,0,0,.7);

    /* ponte: as telas antigas leem estes, e alguns nao sao alias puro dos --color-* */
    --ok-bg:rgba(255,122,61,.16); --warn-bg:rgba(239,107,107,.14); --info-bg:rgba(116,169,236,.14);
    --line-soft:#221E1C;
  }
}

:root[data-theme="dark"] {
  --color-primary:#FF9A21; --color-primary-light:#FFB65C; --color-primary-dark:#FF7A00;
  --color-primary-soft:#33220F;

  --color-background:#100E0D; --color-background-secondary:#191615; --color-background-tertiary:#221E1C;
  --color-surface:#191615; --color-surface-hover:#221E1C; --color-surface-active:#2F2926;

  --color-border:#2F2926; --color-border-light:#221E1C; --color-border-primary:rgba(255,154,33,.32);

  --color-text-primary:#F7F2EC; --color-text-secondary:#A99D93;
  --color-text-tertiary:#877B72; --color-text-disabled:#5A514B;

  --color-success:#FF7A3D; --color-warning:#F0B050; --color-danger:#EF6B6B; --color-info:#74A9EC;

  --shadow-card:0 1px 2px rgba(0,0,0,.5),0 12px 28px -18px rgba(0,0,0,.9);
  --shadow-modal:0 12px 40px rgba(0,0,0,.7);

  --ok-bg:rgba(255,122,61,.16); --warn-bg:rgba(239,107,107,.14); --info-bg:rgba(116,169,236,.14);
  --line-soft:#221E1C;
}

/* O mapa (Leaflet) e' a unica peca que nao segue token: no escuro um retangulo branco
   berrante no meio da tela. Baixa o brilho das tiles em vez de inventar outro provedor. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .leaflet-tile{ filter:brightness(.72) contrast(1.06) saturate(.82); }
}
:root[data-theme="dark"] .leaflet-tile{ filter:brightness(.72) contrast(1.06) saturate(.82); }

/* =============================================================================
   GRÁFICOS (/grafico.js) — a moldura; o desenho é SVG feito lá.
   Só o que o SVG não resolve: faixa do eixo, balão de hover, legenda, estado
   vazio e a tabela de números. Cores das marcas NÃO moram aqui (vão no JS, que
   é onde estão validadas); aqui só token de texto e de superfície.
   ============================================================================= */
.gr-host{ position:relative; }
.gr-host svg{ display:block; overflow:visible; }
.gr-alvo{ cursor:default; }

/* faixa do eixo X: primeiro / meio / último. Um rótulo por coluna vira borrão. */
.gr-eixo{ display:flex; justify-content:space-between; gap:var(--space-2);
  border-top:1px solid var(--color-border); padding-top:6px; margin-top:4px; }
.gr-eixo span{ font-size:var(--font-caption); color:var(--color-text-tertiary);
  font-variant-numeric:tabular-nums; white-space:nowrap; }

/* rótulo direto, SELETIVO: só o pico. Número em todo ponto ninguém lê. */
.gr-pico{ margin-top:6px; font-size:var(--font-small); color:var(--color-text-secondary); }
.gr-pico b{ color:var(--color-text-primary); font-weight:650; }
.gr-pico span{ color:var(--color-text-tertiary); }

/* balão: preso ao cartão, some no pointerleave. translate(-50%) com clamp pra
   não vazar nas bordas quando o toque cai na primeira/última coluna. */
.gr-balao{ position:absolute; top:-2px; transform:translateX(-50%);
  background:var(--color-text-primary); color:var(--color-surface);
  font-size:var(--font-caption); line-height:1.35; padding:6px 9px; border-radius:8px;
  pointer-events:none; white-space:nowrap; z-index:3; box-shadow:var(--shadow-card);
  max-width:90%; overflow:hidden; text-overflow:ellipsis; }
.gr-balao b{ display:block; font-weight:600; opacity:.72; font-size:10px; }

/* legenda: obrigatória a partir de 2 séries — identidade nunca só pela cor */
.gr-leg{ display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-3); }
.gr-leg-i{ display:inline-flex; align-items:center; gap:6px;
  font-size:var(--font-small); color:var(--color-text-secondary); }
.gr-leg-i i{ width:10px; height:10px; border-radius:3px; flex:0 0 auto; }
.gr-leg-i b{ color:var(--color-text-primary); font-weight:650; }

/* estado vazio: diz que não há dado. NUNCA desenhar barra de mentira pra encher. */
.gr-vazio{ display:grid; place-items:center; min-height:96px; text-align:center;
  font-size:var(--font-small); color:var(--color-text-tertiary);
  border:1px dashed var(--color-border); border-radius:var(--radius-md); padding:var(--space-4); }

/* os mesmos números em tabela — leitor de tela, daltonismo, conferência */
.gr-tab{ margin-top:var(--space-3); }
.gr-tab summary{ font-size:var(--font-small); color:var(--color-text-secondary);
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px;
  min-height:32px; }
.gr-tab summary::-webkit-details-marker{ display:none; }
.gr-tab summary::before{ content:"▸"; color:var(--color-text-tertiary); }
.gr-tab[open] summary::before{ content:"▾"; }
.gr-tabwrap{ overflow-x:auto; margin-top:var(--space-2); }
.gr-tab table{ width:100%; border-collapse:collapse; font-size:var(--font-small); }
.gr-tab th,.gr-tab td{ text-align:left; padding:6px 10px 6px 0;
  border-bottom:1px solid var(--color-border-light); white-space:nowrap; }
.gr-tab th{ color:var(--color-text-tertiary); font-weight:600;
  text-transform:uppercase; font-size:var(--font-caption); letter-spacing:.5px; }
.gr-tab td{ color:var(--color-text-primary); font-variant-numeric:tabular-nums; }

/* cartão de número com minigráfico ao lado (KPI) */
.gr-kpi{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-3); }
.gr-kpi .gr-mini{ flex:0 0 auto; opacity:.9; }

/* título e legenda de um gráfico — para as telas usarem sem inventar CSS local */
.gr-sec{ font-size:var(--font-caption); color:var(--color-text-tertiary);
  text-transform:uppercase; letter-spacing:.7px; font-weight:600;
  margin:var(--space-6) var(--space-1) var(--space-2); }
.gr-hint{ font-size:var(--font-small); color:var(--color-text-secondary);
  margin:0 0 var(--space-3); line-height:1.45; }